محمد أبو عواد

يمكنك تجربة رابط cdn , اذا كان يعمل بشكل جيد فأنت لست بحاجة لتحميلها , اذا كنت لا تريد تحميلها يمكنك البحث في جوجل عن رابط cdn يعمل بشكل جيد واستخدامه , اذا لم تجد اي رابط جيد فيجب تحميل المكتبة

المشكلة في رابط cdn الخاص بمكتبة sweetAlert , يمكنك استخدام رابط cdn التالي الخاص بالمكتبة <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> ربما سوف تواجهك مشكلة في الرابط الخاص بهم لذلك سوف ارفق لك ملف المكتبة aaa.js

ينقسم تطوير المواقع الى قسمين : مطور الواجهات الأمامية للموقع , ومطور الواجهات الخلفية للموقع الواجهات الامامية المقصود فيها شكل الموقع وما تراه عندما تتصفح الموقع مثل لون الخطوط وحجمها وعرض الصور وطولها وهيكلية العناصر وتوزيعها بداخل الصفحة والألوان وغيرها من الخصائص الواجهات الخلفية هي ما يحدث في الخفاء ولا يمكنك رؤيته مثل الامور المتعلقة بقاعدة البيانات كعرض وحذف وتخزين البيانات وارسال الاشعارات ووضع الاعجاب وغيرها من العمليات في دورة تطوير واجهات المستخدم سوف نقوم بتعلم الجزء الأول وهو قسم الواجهات الامامية أي لغة html و css وجافاسكربت والعديد من المكتبات مثل بوتستراب وjquery وغيرها من الأمور المهمة لتطوير واجهات المستخدم , سوف يتم البدء بالأساسيات وشرحها كلها ثم البدء بتصميم أول موقع بسيط ثم العديد من المواقع باستخدام مختلف التقنيات التي تعليمتها خلال الدورة

يشمل محتويات الدورة التي قمت بالدفع لها كاملة , حيث سوف يتم اعطاءك صلاحيات للوصول الى جميع الدروس والملفات الخاصة بالدورة , الاكاديمية الآن لديها 6 دورات , لو قمت بالدفع لدورة تطوير واجهات المستخدم سوف تستطيع الوصول لجميع دروس وملفات دورة تطوير واجهات المستخدم , أما بالنسبة للدورات الأخرى فسوف يمكنك الوصول لأول مسار فقط منها وليس جميع محتوياتها ,والجدير بالذكر أنه سوف يكون لديك وصول لمحتوى الدورة مدى الحياة وللتحديثات التي تطرأ على الدورة كل فترة

المشكلة لديك أنك لا تحدد العنصر بشكل مباشر بل تكتفي بتحديد الكلاس active , وبالتالي سوف يتم تجاهل التنسيقات الخاصة بالكلاس active , الحل أن نستخدم الخاصية !important كالتالي .active{ transform: scaleY(1) !important; ^^^^^^^^^^ transform-origin: bottom; } في هذه الحالة سوف يتم تجاهل جميع التنسيقات الاخرى لنفس العنصر ويتم تطبيق الخاصية التي لديها important , الحل الآخر يمكنك من خلال تحديد العنصر بشكل مباشر وصحيح كالتالي .form-section form.active{ ^^^^^^^^^^^^^^^^^^^^^^^ transform: scaleY(1); transform-origin: bottom; }

العنصر الذي لديه الكلاس form-section form غير موجود , هل قمت بكتابته ولكن لم ترفقه في الكود أم انك لم تكتبه؟ أرجو منك التأكد من انشائه

المشكلة ليست في العنصر footer بل المشكلة في العصنر الذي لديه الصنف about-us-section , العنصر footer من المفترض أن يعرض بشكل طبيعي ولكن ما يؤثر عليه بهذا الشكل هو القسم about-us-section , بداية ليس من الجيد دائما استخدام الخاصية position لضبط تموضع العناصر فذلك يصعب الأمور في مختلف الشاشات , اذن لا داعي لهذا الكود الخاص بالعنصر footer في الشاشات التي عرضها 500 بكسل أو اقل footer { position: absolute; bottom: 0; top: 540vh; background-color: #1a222a; color: white; text-align: center; display: block; } يمكنك ازالته , أما مسبب المشكلة الاساسي هو أنك تحدد طول العنصر about-us-section بشكل محدد وباستخدام اداة القياس vh في مختلف الشاشات, لاحظ .about-us-section { height: 120vh; } .about-us-section { height: 150vh; } أرجو منك استخدام الطول الطول الطبيعي للقسم على أن تكون الخاصية height قيمتها auto كالتالي hight:auto اذا اردت مزيدا من الارتفاع يمكنك استخدام الحواشي الداخلية والهوامش الخارجية باستخدام padding او margin

اذا كانت مهارتك جيدة في لارافيل وواجهتك مشكلة في فهم احد المواضيع فيمكنك الرجوع الى الموضوع من توثيق لارافيل الرسمي , اما اذا كنت مبتدئ ولغتك الاجليزية جيدة فيمكنك اللجوء الى التوثيق وقراءته من البداية والبدء بشكل تدريجي مع المواضيع لكي تفهم كيف يتم العمل به وتستسطيع استخدامه , بشكل عام حتى لو قرأته كاملا فسوف تحتاج الى الرجوع اليه دائما ومراجعة الملعلومات منه , بالنسبة لقواعد البيانات يجب أن تكون لديك معرفة جيدة بقواعد البيانات بشكل منفصل عن لارافيل , فيجب أن تكون مهاراتك في استخدام mysql جيدة جدا لأنه في بعض الأحيان نحتاج أن نكتب اكواد mysql للاستعلام عن البيانات لذلك نعم عليك دراستها بشكل منفصل

هل يظهر أي مشكلة بعد تنفيذ أمر البناء في منفذ الاوامر؟

يمكنك استخدام التابع except لتحديد الدالة التي تقوم بعرض الزوار , على فرض ان اسم الدالة هو index فيكون شكل الكود كالتالي $this->middleware('auth')->except('index'); سوف يتم تطبيق الميديل وير auth على جميع دوال المتحكم ما عدا الدالة index

هل قمت بتضمين ملف css الخاص ببوتستراب؟ لأني لا أراه , اذا كنت قد نسيت تضمين الملفات يمكنك من خلال الموقع الرسمي لبوتستراب الحصول على روابط cdn جاهزة للملفات دون الحاجة لتحميلها , فقط عليك نسخ الرابط ولصقه بداخل المشروع في المكان الصحيح له , بالنسبة ملف css أرجو منك تضمنيه في العنصر head <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> أما ملفات جافاسكربت فيمكنك تضمينها في نهاية العنصر body <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

بالاضافة الى حل عمر يمكنك الاستفادة من الخاصية خصائص الصندوق المرن flex box في ذلك ,وذلك عن طريق اعطاء الأب الخصائص التالية display: flex; align-items: center; justify-content: center; باستخدام هذه الخصائص نضمن توسيط العناصر بشكل عمودي وأفقي

تحتاج الى زر , عنصر يكون مخفي , وعند الضغط على الزر تقوم باستخدام جافاسكربت باطلاق حدث من نوع click وظيفته هو اظهار العنصر المخفي , الأمر بسيط ولا يتعلق بالعناصر التي ذكرتها, العناصر التي ذكرتها قامت بوتستراب بانشائها , يمكنك أنت أن تقوم بانشاء خصائص خاصة بك واستخدامها في جافاسكربت , بالنسبة للخاصية data- هي خاصية رائعة ويمكنك استخدامها لتخزين قيم مختلفة فيها , فمثلا لو كان لدينا هذا المثال <div id="info" data-name="محمد" data-age="21" data-gender="ذكر"> ... </div> لاحظ أنني أنشأت خصائص خاصة بي وهي name و age و gender , تسبق ب data- لكي نستطيع الاستفادة منها في جافاسكربت كالتالي: const my = document.querySelector('#info'); بداية قمت بالحصول على العنصر باستخدام المعررف id الخاص به , ثانيا اذا اردت الحصول على قيمة الخاصية data-name فيكون الامر كالتالي my.dataset.name اولا my وهي العنصر الذي حصلت عليه ثانيا dataset ومن خلالها نصل للعناصر data- التي قمت بانشائها ثالثا name وهي اسم الخاصية التي أنشاتها لو حاولت طباعة الأمر السابق سوف تكون النتيجة محمد ونفس الأمر لو أردنا الحصول على العمر اي الخاصية age فيكون كالتالي article.dataset.age // 21 كما تلاحظ يمكنك الاستفادة منها كثيرا

العكس تماما , ربما لأنك لا ترى أكواد جافاسكربت ولا اكواد css تعقتد أنه فقط باستخدام اكواد html تم بناء هذا المكون , ولكن هذا اعتقاد خاطئ, يتم استخدام تنسيقات css لتنسيق هذا المكون ولذلك موقع بوتستراب 5 يوفر ملفات css الخاصة بالمكتبة ويتم استخدام اكواد جافاسكربت لاستخدام الاحداث والتفاعلات مع العناصر ولذلك يوفر ملفات جافاسكربت , لو لاحظت أنك قبل استخدام بوتستراب تقوم بتضمين ملفات css وملفات جافاسكربت الخاصة ببوتستراب لكي تعمل وتظهر المكونات وهذا دليل أنها تستخدم اكواد css واكواد جافسكربت وليس اكواد html خالصة كما تعتقد, لا يمكن بناء مكون مثل Modal الذي توفره بوستراب دون استخدام جافاسكربت

السبب أنك تقارن العنصر price ولا تقارن قيمته, لاحظ if(price != ""){ ^^^^^ price تعبر عن العنصر الذي لديه المعرف price, لاحظ let price = document.getElementById("price"); ولكن نحن نريد أن نقارن قيمة الحقل ويمكننا الحصول عليها من خلال التابع value كالتالي if(price.value != ""){ ^^^^^^^

يبدو أنك تستخدم نسخة slim من jquery وهي نسخة لا تحتوي على جميع الوظائف ومن ضمن الوظائف التي لا تمتلكها الوظيفتان fadeIn و fadeOut , لذلك تحتاج الى تغيير النسخة لتكون النسخة العادية , حاول التأكد من الكونسول الذي تستطيع الوصول اليه من المتصفح من خلال الضغط بزر الماوس الأيمن في اي مكان واختيار فحص العنصر أو inspect element , ثم تستيطع الذهاب الى console وغالبا سوف تجد الخطأ بانه لا يتعرف على الوظيفتان fadeIn و fadeOut صورة توضح الكونسول

يمكننا اجراء بعض الاختبارات البسيطة , على سبيل المثال نفحص الأمر من خلال عنصر معين , يكون بالوضع الطبيعي ظاهرا , ولكن عند الضغط عليه نخفيه , هذا اختبار بسيط يمكننا من خلاله اكتشاف هل اللمس يعمل ام لا , على سبيل المثال باستخدام jquery //html <div id="test">test</div> //js $('#test').click(function(){ $('#test').hide(); }); لدينا عنصر لديه معرف test , باستخدام جافاسكربت وبالتحديد مكتبة jquery نقوم باجراء الحدث click عليه, عند الضغط عليه سوف يختفي , وهذا دليل أن اللمس يعمل , اذا كان لا يعمل فلن يختفي العنصر

يمكننا وضع الملف بداخل العنصرين , ولكن أحيانا قد تواجهنا مشاكل عند وضعه في عنصر head ,عند وضعه بداخل العنصر head يتم استدعائه قبل انشاء عناصر html وبالتالي عند الوصول لعنصر ما لن يتم الوصول اليه لأنه لم يجده وسوف تكون النتيجة undefined ,لا يحدث ذلك دائما , يحدث عند محاولة الحصول على عنصر لم يتم انشائه بعد ولكن لو كان الكود عبارة عن دالة يتم تنفيذها بعد الضغط على عنصر ما فلن تواجه مشكلة في ذلك,يمكننا حل المشكلة من خلال استدعاء ملفات جافاسكربت في نهاية العنصر body فنضمن دائما ان العناصر تم انشائها وسوف يتم الوصول اليها دائما

السؤال غير واضح , أرجو توضيح المشكلة

لا يوجد طريقة لإخفاء الاكواد ولكن يمكنك القيام بإعادة ضبط حجم الواجهة كالتالي يمكنك تصغير الواجهة من الخط الفاصل بين واجهة أكواد html وواجهة أكواد css , بعد التصغير يصبح الشكل كالتالي أو يمكنك عرض الواجهة بشكل طولي وتقوم بإعادة ضبط حجم الواجهات بنفس الطريقة

1. السعر الجديد مناسب للقيمة التي نقدمها في الأكاديمية، وذلك يتضمن تضاعف عدد ساعات الدورات. 2. سعر دورات أكاديمية حسوب يتم دفعه مرة واحدة ويعطيك وصول للدورة وتحديثاتها مدى الحياة، كما أنك تحصل على مساعدة فريق من المدربين على مدار الساعة في أثناء دراستك، وبعد إتمام الدورة واجتياز الامتحان تحصل على شهادة معتمدة من الأكاديمية، ونستمر في المتابعة وتقديم النصائح التي تساعدك في الحصول على عمل ونضمن لك استرداد ما دفعته إن لم تحصل على عمل يغطي قيمة ما دفعته خلال 6 شهور من موعد اجتياز الامتحان. ساعات الدورات في أكاديمية حسوب تضاعفت خلال السنوات الأخيرة، ونعمل على تطوير الدورات بشكل مستمر لتواكب متطلبات سوق العمل المتغيرة، ونرى أن السعر الحالي مناسب للقيمة التي نقدمها.

لو لاحظت الواجهة الرئيسية لموقع بوتستراب الاصدار الخامس سوف تجد في الجزء الأيسر من الموقع قائمة, لاحظ هذه القائمة تحتوي على جميع المواضيع , كل موضوع يتم شرح وتوضيح جميع الكلاسات الخاصة به , يتم تقسيم المواضيع الى عدة مجموعات , فهناك مجموعة المكونات أو components , سوف تجد فيها عناصر جاهزة مثل السلايدر والموديل والكارد وغيرها , تقوم بنسخ الكود جاهز ولصقه في المشروع , هناك مجموعة layout التي تقوم بشرح جميع مواضيع المتلعقة بتقسيم العناصر والاصناف التي تبدأ ب col , مجموعة utilities التي تحتوي على مواضيع مثل المسافات والحواشي والهوامش , سوف تجد بداخل مجموعة utilities موضوع اسمه spacing الذي يشرح جميع كلاسات الهوامش الخارجية والحواشي الداخلية , بشكل عام , كل موضوع يقوم بشرح الكلاسات الخاصة به , اذا فهمت فكرة التقسيمة يمكنك التعامل مع الموقع بسهولة , يمكنك الاستفادة من حقل البحث الموجود في الموقع للبحث عن أي خاصية او أي صنف تحتاجه

الصحيح والضروري هو أن تكون لديك خلفية جيدة عن أساسيات Html و css والقليل من جافاسكربت ,ليس مطلوب منك أنك تكون محترف في هذه التقنيات فليس من ضمن عملك أن تقوم بكتابة أكواد html و css بشكل كبير , ولكن أحيانا تحتاج الى استخدام بعض العناصر مثل ما حدث معك عند حاجتك لاستخدام الجدول,فلو لم يكن لديك أي معرفة ب Html فلن تعرف بوجود عنصر table ,لذلك يمكنك فقط خلال ساعات قليلة جدا مراجعة عناصر html واساسيات css ومن ثم الرجوع الى Flask, ولكن اذا أردت استخدام Flask لبناء API فلست بحاجة أن يكون لديك خلفية عن التقنيات Html و css

يتبقى الآن أن تقوم بتفحص المنطق جيدا والكود الذي كتبته , لاحظ أن العلاقة servicesInCart تقوم بإرجاع جميع الخدمات التي قيمة الحقل state لها تساوي 0 , لاحظ public function servicesInCart(){ return $this->belongsToMany(Service::class)->withPivot(['Quantity' , 'state'])->wherePivot('state' , 0); ^^^^^^^^^^^^ } فبالتأكيد عند تفحص الشرط @if ( $service->pivot->state == 1) لن يتحقق لأن جميع البيانات التي سوف يتم ارجاعها من العلاقة servicesInCart قيمة الحقل state لها تساوي 0 , الآن عليك تفحص منطق الكود الذي تحاول تنفيذه

ربما بسبب تعريف العلاقة حيث أنك تضع الحقلين Quantity و state بداخل مصفوفة , لاحظ public function servicesInCart(){ return $this->belongsToMany(Service::class)->withPivot(['Quantity' , 'state'])->wherePivot('state' , 0); ^^^^^^^^^^^^^^^^^^^^^^^ } أرجو منك تعديل العلاقة كالتالي public function servicesInCart(){ return $this->belongsToMany(Service::class)->withPivot('Quantity' , 'state')->wherePivot('state' , 0); } ثم حاول ازالة الأقواس عند استدعاء العلاقةservicesInCart servicesInCart كالتالي @foreach(Auth::user()->servicesInCart as $service) وأخبرنا بالنتيجة