Adnane Kadri

لما قد تتجه للجافاسكربت في حين أنه يمكنك عمل الفكرة مباشرة عن طريق قاعدة css بسيطة؟ أضف هذا التعريف الى ملف التنسيقات styles.css لديك: html{ scroll-behavior: smooth; } يعطي هذا التعريف انتقالا سلسا بين عناصر الوثيقة. يمكنك التماس ذلك عن طريق استعمال قائمة التنقل. تعرف أكثر عن تأثيرات التمرير في صفحات الويب باستخدام Javascript و CSS في هاته السلسلة: تأثيرات التمرير في صفحات الويب باستخدام Javascript وCSS– الجزء الأول. تأثيرات التمرير في صفحات الويب باستخدام Javascript وCSS– الجزء الثاني. تأثيرات التمرير في صفحات الويب باستخدام Javascript وCSS– الجزء الثالث.

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

سبب الخطأ الذي يظهر لديك هو أنك تقوم مباشرة بتنفيذ المتغير h1 دون تعريفه أولا: h1.style.color = "white"; // +++++++ فجافاسكربت تفترض أن تقوم بتعريفه ثم سيمكنك الوصول اليه، أفهم من ذلك أنك تريد الوصول إلى الترويسة بالمعرف title، يمكنك القيام بذلك عن طريق: var opened = document.getElementById("open"), closed = document.getElementById("close"), body = document.getElementById("body"), title = document.getElementById("title"), // ++++++++++++++++ title.style.color = "white"; // ++++++++++++++ سيختفي بعد هذا نص الخطأ ولكن لن تعمل الفكرة بشكلها المتوقع. سنحتاج بعد هذا تغيير المحتوى النصي للعنوان عند كل ضغطة، أو بعبارة أخرى عند كل استدعاء للدالة open1. لفعل ذلك سنحتاج تزويد 1 للمحتوى العددي للعنوان. وبنفس المنطق: title.innerHTML = clicks; ستلاحظ بعض التحسن ولكن ستحتاج هاته الفكرة تعديلا أكثر يتلخص في: function open1() { var opened = document.getElementById("open"), closed = document.getElementById("close"), body = document.getElementById("body"), // لا حاجة لتعريف هذا المتغير فنحن لا نحتاجه أصلا في هاته الدالة title = document.getElementById("title"), clicks = document.getElementById("title").innerHTML || 0, // نقوم باسناد قيمة صفرية كافتراض ان لم يحمل العنوان أي عدد clicks = 0; // لا حاجة لإعادة ضبط عددد النقرات للصفر كوننا نريد تتبع عدد النقرات clicks = parseInt(clicks) + 1; // لتجنب اعتبار الاعداد كسلاسل نصية نقوم بجمع المكافئ للقيمة العددية التي يخزنها العنوان opened.style.display = "block"; closed.style.display = "none"; title.style.color = "black"; // من الطبيعي أن لا يكون لون النص في حالته النشطة ابيضا title.innerHTML = clicks; } النتيجة: function open1() { var opened = document.getElementById("open"), closed = document.getElementById("close"), title = document.getElementById("title"), clicks = document.getElementById("title").innerHTML || 0; clicks = parseInt(clicks) + 1; opened.style.display = "block"; closed.style.display = "none"; title.style.color = "black"; title.innerHTML = clicks; }

قبل محاولة فهم الأطقم والخرائط ضعيفة الإشارة weakSet و weakMap يجب أولا فهم ما هي الخرائط Maps والأطقم Sets من الأساس. لنقم بتناول كل منهما كالتالي: يمكن فهم الأطقم Sets على أنها تجميعات من القيم الفريدة من أي نوع بيانات (سلسلة نصية، مصفوفة .. الخ). بمعنى أن كل عنصر في هاته التجميعة لا يمكن أن يتكرر ضمن نفس المجموعة. إستعمالات شائعة: // إنشاء طقم const letters = new Set(["أ","ب","ت"]); // إضافة قيمة جديدة للطقم letters.add("ج"); // حذف قيمة من الطقم letters.delete("ج"); // التحقق ما كان الطقم يمتلك قيمة ما letters.has("ج"); // حذف كامل القيم من الطقم letters.clear(); يمكن فهم الخرائط Maps على أنها تجميعات من القيم معرفة في أزواج مفتاح-قيمة / key-value حيث يمكن أن تكون هاته المفاتيح أي نوع بيانات. // إنشاء خريطة const platforms = new Map([ ["Mostaql", 500], ["Hsoub.io", 300], ["Orange", 200] ]); // إضافة قيمة جديدة للخريطة platforms.set("Khamsat", 300); // جلب قيمة من الخريطة عن طريق مفتاحها platforms.get("Khamsat"); و الأطقم والخرائط ضعيفة الإشارة تختلف عنها من حيث أنها: تقبل تخزين كائنات فقط، لا يمكن تخزين أنواع أولية فيها. let visitedSet = new WeakSet(); let john = { name: "John" }; visitedSet.add(john); // مسموح visitedSet.add('5'); // غير مسموح تمتلك الأطقم والخرائط ضعيفة الإشارة توابع محدودة وأقل من الأطقم والخرائط العادية. توابع مثل keys أو values لن تكون متوفرة. ما الغرض وراء استعمالها؟ تستعمل أساسا لتخزين البيانات الإضافية المتعلقة بكائن ما. حيث يتم تعيين هذا الكائن كفمتاح لمجموعة البيانات الإضافية الخاصة به. وبالتالي، لو قمنا بمسح هذا الكائن من الذاكرة فستختفي هاته البيانات أيضا. ولنقل كمثال، يريد الطالب Jhon تخزين ملف سري يخصه، بشرط أن خروج هذا الطالب سيعني مسح هذا الملف السري. نقوم بذلك كالتالي: weakMap.set(john, "secret documents"); أي فقدان للكائن john في التطبيق، سيؤدي إلى مسح القيمة المسندة إليه كمفتاح في الخارطة ضعيفة الإشارة. يمكنك الإستزادة بالتعرف عليهما في النوع WeakMap والنوع WeakSet: الخرائط والأطقم ضعيفة الإشارة في جافاسكربت.

أظن أنه لا مشكلة بتموضع الصورة فهي تأخذ حجمها الكامل دون أن تمتلك أية فراغات أو مساحات بيضاء تجعلها تحجز حجما أكثر من الذي تحتاجه. يمكنك جعل القسم المجاور ينزل قليلا ليتساويا على حامل المحور الأفقي، يمكنك ذلك عن طريق إعطاءه هامشا أكثر كالتالي: .main div:first-child{ padding: 40px; } ولكن يبقى هذا الحل حلا مؤقتا إذ قد يتدخل إعطاء هامش بحجم كبير في تنسيق القسم وكسر النصوص، ولذلك فإنه يقترح الإستفادة من خواص الصندوق المرن flexbox لعمل هاته الفكرة. تأكد من إعطاء الخاصيتين التاليتين للحاوي الأب: .main { width: 100%; min-height: 50vh; display: flex; background-color: #ECECEC; align-items: center; /* ++++++++++++++++++ */ justify-content: center; /* ++++++++++++++++++ */ } ثم من إعطاء الخاصية التالية لعناصر الأبناء: .main div{ align-items: center; } تعرف على CSS Flexbox وأساسيات استعماله لهيكلة صفحات الويب.

في الغالب، تكون هاته المشكلة بسبب اتجاه النصوص والمحاذاة داخل عناصر span التي تكون مضبوطة تلقائيا، يمكنك ضبط تموضع النص بداخلها عن طريق وضعها داخل عنصر div أولا ثم إعطاء هذا العنصر محاذاة واتجاه من اليمين لليسار ليوافق الترميز العربي. يكون ذلك كالتالي: <div> <span> 10 جانفي 2022 </span> </div> الافتراضي: بعد تطبيق تنسيقات المحاذاة والاتجاه عليه: div { text-align:right; direction:rtl; }

يمكنك الإستعانة بالمحددات الزائفة لتحقيق نفس الغرض. أظن أنه يوجد بمكان ما بملفات التنسيقات شيفرة كالتالي: p::after{ content:''; width:1px; height:100%; background:orange; position:absolute; left:0; top:0; } بمعنى: أنه يوجد عنصر زائف يتم إضافته بعد الفقرة المحددة ويتم إعطاء هذا العنصر عرض 1 بكسل و إرتفاع 100 بالمئة من عرض الفقرة حيث يتموضع بشكل مطلق بمسافة 0 من اليسار و0 من الأعلى. وبالتالي، وللتحكم في موضعه لنتأكد فقط من جعله يتموضع بمسافة 0 من اليمين لا من اليسار و0 من الأعلى: p::after{ content:''; width:1px; height:100%; background:orange; position:absolute; right:0; top:0; } تعرف أكثر عن محددات الأصناف الزائفة (pseudo-classes) في المحددات (Selectors) في CSS.

أولا يمكنك جعل كامل الصور على سطر واحد عن طريق إرفاق الحاوي blocks بالقيمة nowrap في الخاصية flex-wrap للتأكد من أن الصندوق المرن لن ينزل سطرا في حالة تجاوز عرض أحد الصناديق للمسافة المقصودة. #blocks { margin-top: 20px; padding: 60px 120px; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: flex-start; flex-wrap: nowrap; /*++++++++++++++++++++*/ } بعد هذا سنحتاج إعطاء الصور عرضا وإرتفاعا متساويا وليكن على الخيار: #blocks .conten img { height: 500px; width: 500px; } لا أفضل هذا الخيار لأنه قد يؤدي إلى تبدد الصورة وعدم ظهورها بحجمها الفعلي، عوضا عن ذلك أفضل إعطاء الصور ارتفاعا متساويا وعرضا تلقائيا، وتقطيع أو إخفاء الأجزاء المتجاوزة من الصورة لعرض الحاوي. لنقم بإعطاء الحاوي conten القيمة hidden في الخاصية overflow: #blocks .conten { text-align: center; margin-left: 15px; position: relative; overflow: hidden; } ثم ارتفاعا متساويا وعرضا تلقائيا للصورة داخله: #blocks .conten img { height: 500px; width:auto; } ولفهم دور overflow:hidden في هذا قم بتعليق سطرها ولاحظ التأثير. توثيق الخاصية overflow .

ما الأقسام التي تقصدها؟ كما أنه يرجى إرفاق كامل الشيفرة مع الإشارة إلى أية تنسيقات تطبق على هاته العناصر

يمكنك عمل ذلك عن طريق إظهار نافذة نموذج بشكل نافذة منبثقة بعد إعطاءها الإشارة عن طريق الحدث window.onload. كما يمكن الإستعانة ببوتسراب لتحقيق هذا الغرض عن طريق مكون النوافذ Modal. نقوم بتضمين الملفات اللازمة لعمل بوتستراب بصفحة الـ HTML لدينا: <!-- bootstrap تضمين ملف --> <link rel="stylesheet" href="[BOOTSTRAP_CSS_HERE]"> <!-- تضمين ملف جيكويري --> <script src="[JQUERY_CDN_LINK_HERE]"></script> <!-- popper تضمين ملف --> <script src="[POPPERJS_CDN_LINK_HERE]"></script> <!-- bootstrap تضمين ملف --> <script src="[BOOTSTRAP_JS_HERE]"></script> إضافة عنصر النموذج modal إلى صفحة الـ HTML لدينا: <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">عنوان النافذة</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>قم بإضافة نموذجك هنا</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">حفظ التغييرات</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button> </div> </div> </div> </div> إظهار النموذج بمجرد تمام تحميل موارد الصفحة: $(window).load(function(){ $('#myModal').modal('show') }) تعرف على بوتستراب أكثر هنا.

بالطبع يمكنك ذلك، ويتم تثبيته وإعداده بخطوات بسيطة. في الحقيقة، يوجد ثلاث طرق لعمل ذلك نلخصها في التالي: التثبيت والإستعمال عن طريق CDN خارجي. تضمين بوتستراب عن طريق تثبيته كإعتمادية عن طريق مدير الحزم npm. إستعمال واحدة من حزم React Bootstrap. الطريقة الأولى: التثبيت والإستعمال عن طريق CDN خارجي ولعلها أسهل طريقة، أين يمكن مباشرة تضمين ملفات التنسيقات والجافاسكربت وإرفاقها بروابط صالحة، فملفات التنسيقات تضمن في وسم head كالتالي: <link rel="stylesheet" href="[BOOTSTRAP_CSS_HERE]"> ويتم تضمين ملفات الجافاسكربت لها كالتالي: <!-- تضمين ملف جيكويري --> <script src="[JQUERY_CDN_LINK_HERE]"></script> <!-- popper تضمين ملف --> <script src="[POPPERJS_CDN_LINK_HERE]"></script> <!-- bootstrap تضمين ملف --> <script src="[BOOTSTRAP_JS_HERE]"></script> الطريقة الثانية: تضمين بوتستراب عن طريق تثبيته كإعتمادية عن طريق مدير الحزم npm أين ستحتاج في هذا تثبيت حزمة bootstrap عن طريق مدير الحزم npm كالتالي: npm install bootstrap ثم تضمين ملفات تنسيقات بوتستراب وأيضا jQuery و popper في ملف index.js كالتالي: import 'bootstrap/dist/css/bootstrap.min.css'; import $ from 'jquery'; import Popper from 'popper.js'; import 'bootstrap/dist/js/bootstrap.bundle.min'; import React from 'react'; ان لم تكن قد قمت بتثبيت jquery و popper فتأكد من ذلك أولا عن طريق طباعة الأمر: npm install jquery popper.js لأن بوتستراب يستعمل كلا منهما. الطريقة الثالثة: إستعمال واحدة من حزم React Bootstrap لعل الأكثر شيوعا من بين هاته الحزم هي حزمة react-bootstrap، يتم تثبيتها عن طريق طباعة الأمر: npm install react-bootstrap bootstrap@5.1.3 ثم بتضمين المكون المستهدف لإستعماله: import { Button } from 'react-bootstrap'; الإستعمال: <Button variant="primary">زر بوتستراب</Button>

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

صحيح، ان تصنيفات أرشيفات المسار الأقدم من دورات الأكاديمية هو القسم الذي يحوي أرشيف المسارات التي تم تحديثها وإستبدالها بمسارات أحدث. وفي الغالب، لن يكون عليك مشاهدتها ان لم تكن قد بدأت بها بالفعل.

ليس تماما، يصطلح بـ "مجموعة بدء" أو "Starter Kit" أو "Starter Pack" على أي مجموعة من الأدوات، أطر العمل والحزم التي تقدم لشخص يقوم بنشاط معين أو يبدأ عملية ما لأول مرة، قد يكون بناء مشروع جديد أو غيرها من العمليات. تقترح لارافيل بدورها مجموعة أدوات ترى أنها تسهل تطبيق لارافيل لأول مرة، هاته الأدوات هي: Laravel Breeze: والذي هو تطبيق لارافيل بسيط يتضمن كامل ميزات مصادقة Laravel، بما في ذلك تسجيل الدخول والتسجيل وإعادة تعيين كلمة المرور والتحقق من البريد الإلكتروني وتأكيد كلمة المرور بسطر أوامر واحد. يمكن تخصيصه للعمل مع Vue أو React. Laravel Jetstream : وهو تطبيق مصمم بشكل جميل يوفر ميزات متعددة يوفرها لارافيل مثل تسجيل الدخول والتسجيل والتحقق من البريد الإلكتروني والتوثيق الثنائي وإدارة الجلسة وواجهة برمجة التطبيقات عبر Laravel Sanctum وميزات إدارة الفريق الاختيارية وغيرها الكثير. وبالطبع فإن إستعمال مجموعات البدء ليس اجباريا، فلارافيل تترك لك حرية استخدامها أو الاستفادة منها وضمها إلى تطبيقك وتنزيلها بشكل منفصل، فهي لا تأتي معه.

هل يمكنك إرفاق كامل شيفرة المكون الأب؟

بالشكل الأبسط، ليس تعريب قوالب ووردبريس إلا مثل جعل ملفات HTML و CSS عادية مترجمة إلى العربية مع ملائمة تنسيقاتها للغة العربية، مثل محاذاة النصوص وتعويم العناصر وغيرها. توفر بعض القوالب ملفات لغات معينة، في حين أن البعض الآخر يقوم مباشرة بطباعة الكلمات والجمل باللغة الافتراضية في ملفات المكونات ذات اللواحق php. مثل: template-parts/header/header.php template-parts/footer/footer.php تكون ملف اللغات لقوالب ووردبريس في المسار التالي عادة: theme/inc/translations.php تقوم مثل هاته الملفات بإعادة مصفوفة ترابطية بمفتاح كل كلمة أو جملة تقابلها ترجمتها معبرة بقيمة هذا المفتاح. نقوم بتعديل قيم كل مفتاح وترجمته إلى العربية. في تعديل تنسيقات الـ css سيمكن ذلك عن طريق تعديل ملفات التنسيقات الكائنة عادة بـ : css/

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

يحدث هذا بسبب أن المنفذ الذي يقوم Apache بإستعماله مستعمل بالفعل من قبل برنامج آخر. في الغالب، يكون هذا المنفذ هو المنفذ 80، وبالتالي ولحل المشكل نقوم إما بـ : تعطيل أو إغلاق أو تغيير منفذ البرنامج الذي يقوم بحجز هذا المنفذ إعداد خادم Apache ليستخدم منفذا آخرا من لوحة تحكم xampp بالقسم الخاص بـخادم apache اضغط إعداد config. من القائمة المنسدلة اختر Apache(httpd.conf) سيتم فتح الملف httpd.conf في محرر نصوص قم بالبحث عن رقم المنفذ 80 (يمكن عادة البحث في محركات النصوص عن طريق الضغط على ctrl+f وطباعة السلسلة النصية المراد البحث عنها) قم بتغييرها إلى 8080 في كامل المواضع التالية: Port 80 => Port 8080 Listen 80 => Listen 8080 servername localhost: 80 => servername localhost: 8080 يجب التأكد من حفظ الملف وإغلاقه، ثم القيام بنفس الخطوات في تغيير المنافذ 443 إلى 4433 في ملف htpd-ssl.conf: المواضع التي يجب تغييرها في الملف هي: Listen 443 => Listen 4433 <VirtualHost_default_:443> => <VirtualHost_default_:4433> يجب التأكد بعد هذا من حفظ الملف وإعادة تشغيل خادم Apache.

مرحبا سلطان، يتم في دورة تطوير واجهات المستخدم شرح أساسيات تطوير الويب، إبتداءا من أساسيات HTML مرورا بأساسيات CSS ثم JavaScript ليتم بذلك الإنتقال إلى مجموعة مسارات تطبيقات عملية يتم فيها التعمق في هاته المفاهيم والتعرف عليها بشكل مفصل وعملي أكثر. أما الدورة التي يتم فيها التعرف على الخوارزميات وبنى البيانات وأنماط التصميم وغيرها هي دورة علوم الحاسوب التي ستتدرج فيها إبتداءا من مدخل إلى علوم الحاسب وأساسيات البرمجة والتفكير المنطقي والخوارزميات إلى مبادئ البرمجة مرورا بأنظمة التشغيل وقواعد البيانات. إذ أن كل هذا سيكون كفيلا بأن يجعلك تحسم خيارك بشأن المسار الذي ستأخذه في مستقبلك البرمجي. ولذلك فإنه يقترح -في حالة عدم اكتساب أي خبرة تقنية- البدء بدورة علوم الحاسوب والتأسس جيدا في مفاهيم البرمجة ,التطوير والهندسة ثم سيكون الإنتقال إلى دورة تطوير الويب أكثر سلاسة وسهولة، لأنها حجر الأساس لأي دورة أخرى من الدورات. علما أنه بمجرد تسجيلك في دورة من دورات الأكاديمية سيتم فتح أول مسار من كل دورة من الدورات التي تقدمها الأكاديمية: دورة علوم الحاسب. دورة تطوير واجهات المستخدم. دورة تطوير التطبيقات بإستخدام جافاسكربت. دورة تطوير تطبيقات الويب بإستخدام PHP. دورة تطوير التطبيقات بإستخدام تقنيات الويب. دورة تطوير تطبيقات الويب بإستخدام لغة Ruby.

إن كنت تحاول إظهار مجموعة حقول بناء على الخيار الذي يحدده المستخدم من قائمة خيارات المنسدلة فهذا تلاعب في شجرة الوثيقة ومن مستحيل عمل ذلك بدون الجافاسكربت ﻷن جافاسكربت وجدت لدعم هاته التفاعليات والتلاعبات. مثال: اذا قام المستخدم بتحديد خيار جواز سفر يتم إظهار حقلي رقم جواز السفر ورقم التأشيرة. ولذلك فإن العملية نظريا وعمليا مستحيلة بالإستغناء عن جافاسكربت، وما يقوم به صاحب الشيفرة في الرابط المرفق هو ليس تلاعبا في شجرة الوثيقة بعد تحميل موارد الصفحة، بل هو ضبط شرطي للإعدادات الإفتراضية التي تكون عليها قائمة الخيارات. مثال: لنقل أن مستخدما ما يريد تعديل حالته من "صاحب شركة ناشئة" إلى "عامل حر". بعد أن يتوجه هذا المستخدم إلى صفحة التعديل نحتاج افتراضيا ضبط الخيار الافتراضي الذي قام بتحديده سابقا. وبالتالي فإننا قبل أن نضع خاصية selected على أي من الخيارات، نحتاج إضافة شرط تطابق قيمة الخيار مع حالة المستخدم: <select name="userStatus"> <option value="startup" @if($user->status == 'startup') selected @endif>شركة ناشئة</option> <option value="freelancer" @if($user->status == 'freelancer') selected @endif>عامل حر</option> </select> وهذا ببساطة إستعمال من بين العديد من الإستعمالات التي تجهمعها الشيفرة الموضحة. في حالة ما أردت القيام بذلك بـ PHP فقط فيمكنك كاقتراح عمل ثلاث صفحات تحتوي ثلاث نماذج حيث: الصفحة الأولى تحوي نموذجا يتم من عليه اختيار نوع العميل. تستقبل الصفحة الثانية خرج الصفحة الأولى وتقوم بعرض القائمة المنسدلة التالية: @foreach ($formhandler['guest_form_types[citizen]'] as $guest_type => $value) echo '<option value=' {{$guest_type}} '>' {{$value}} '</option>' @endforeach تستقبل الصفحة الثالثة خرج الصفحة الثانية وتقوم بعرض حقلي جواز السفر ورقم التأشيرة بناء على النتيجة المستقبلة.

يعتبر كل من اللواحق المضافة للأوامر خيارات يتم تطبيقها أثناء تنفيذ الأمر. ومن بين الخيارات التي يقبلها الأمران: php artisan make:model ModelName الخياران policy-- و request-- حيث أن الخيار policy يقوم بإنشاء صنف سياسة policy جديد. السياسات هي تصنيفات تنظم منطق الترخيص حول نموذج أو مورد معين. على سبيل المثال، إذا كان تطبيقك عبارة عن مدونة، فقد يكون لديك نموذج منشور Post وسياسة PostPolicy مقابلة لترخيص عمليات المستخدم مثل إنشاء أو تحديث المنشورات، حيث يحوي هذا الصنف كامل عمليات الترخيص بشأن كل تابع أو كل وظيفة. مبدئيا ، يمكن إنشاء سياسة ما عن طريق الأمر: php artisan make:policy PostPolicy أو يمكن ربطها بملف النموذج عن طريق الأمر: php artisan make:policy PostPolicy --model=Post أو عن طريق إضافتها كلاحقة خيار في أمر إنشاء النموذج: php artisan make:model ModelName --policy ليقوم هذا بإنشاء صنف نموذج وصنف سياسة مقابل له. الخيار الآخر الذي يقبله أمر إنشاء النموذج هو خيار requests-- . يتم عن طريق تخصيص هذا الخيار إنشاء صنفي طلبيات Request يخصان عملية التحديث والإنشاء بداخل مجلد app\requests. أصناف الطلبيات في لارافيل هي نسخ عن الصنف Request قابلة للتخصيص تحتوي على منطق يمكن عن طريقه التحقق من سلامة الطلبيات وتوثيقها. يمكنك التعرف أكثر عن الطلبيات في: قد تحتاج مراجعة التحقق في لارافيل > التحقّق من صحّة طلب استمارة > إنشاء طلبات الاستمارة. و الترخيص في لارافيل > إنشاء السياسات.

يتحكم في هذا هيكلية قواعد بياناتك بالدرجة الأولى، ولكن بشكل عام يمكنك إستعمال هاته الدالة في أي استعلام بمجرد تضمينها بشكل عادي: SELECT class, [dbo].[udf_convert_int_date](YOUR_INTEGER_COLUMN), teacher FROM teachers يمكنك إستعمالها في إستعلامات JOIN أو INSERT أو غيرها، كما يمكنك تخصيص اسم الدالة وتسميتها وفق ما يوافقك.

لعلك لم تنتبه إلى أحد الأوامر المهمة في لارافيل أثناء استعراض الأوامر التي يوفرها artisan عن طريق طباعة. php artrisan هذا الأمر هو: php artisan make:request CustomRequest إذ يتيح هذا الأمر إمكانية إنشاء صنف يرث Request ويحمل صفاته الأساسية ويوفر إماكانية تغيير أشياء من مثل قواعد التحقق Validation أو غيرها. وهو أحد الأمور التي أحب العمل بها في لارافيل. يقوم الأمر php artisan make:request CustomRequest بإنشاء ملف CustomRequest.php داخل app\http\requests، يحمل افتراضا: تابعا rules يقوم بإعادة مصفوفة بكامل قواعد التحقق validation بشأن طلبية Http /** * Get the validation rules that apply to the request. * * @return array */ public function rules() { return [ ]; } تابعا authorize يقوم بتحديد ما ان كان من المسموح قبول هاته الطلبية: /** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return false; } نقوم بتضمين هذا الصنف في أحد ملفات المتحكمات كالتالي: use App\Http\Requests\CustomRequest; ثم نقوم بإستقبال نموذج عنه في التابع المستهدف بطلبية ما، مثال: إذا كان الرابط: POST http://path.to/api/users يستهدف التابع store من المتحكم UserController بطلبية Http، فإن هذا التابع يستقبل معاملا request من الصنف CustomRequest كالتالي: public function store(CustomRequest $request){ } ثم سيمكن إستعمال أي من الخواص أو التوابع التي يقدمها الصنف مباشرة. ولنقل أننا نريد استخراج البيانات المتحقق منها من الطلب فقط: public function store(CustomRequest $request){ $data = $request->validated(); } في حين أن CustomRequest هو من سيضم قواعد التحقق كالتالي: public function rules(){ return [ 'username' => 'required|max:8', 'password' => 'required|min:10', 'extra_data' => 'nullable', ]; } أليست الفكرة أفضل من هذا الشكل: public function store(Request $request){ $data = $request->validate([ 'username' => 'required|max:8', 'password' => 'required|min:10', 'extra_data' => 'nullable', ]); } ثما ماذا لو أردنا إضافة التحقق من صلاحية المستخدم في إنشاء مورد جديد: public function store(Request $request){ if(auth()->user()->is_able_to_store_user) { $data = $request->validate([ 'username' => 'required|max:8', 'password' => 'required|min:10', 'extra_data' => 'nullable', ]); } } تخيل أن الأمر سيمتد لتصبح حتى قراءته مزعجة. فيما يلي مجموعة من الميزات التي تجعلك تنشئ أصناف طلببيات خاصة: كون الطلبيات تختلف فيما بينها يجعل الحاجة إلى معالجتها بشكل منفصل شيء مهم. يقتضي فصل الطلبيات عن المتحكمات اثنين من أهم مبادئ REST لتصميم واجهات تطبيق برمجية فعالة ومميزة. مبدأ فصل المهام الذي يقتضي فصل مكونات التطبيق عن بعضها البعض، فكل صنف أو تابع يجب أن يحوي وظيفة واحدة. وفكرة أن تابعا ما يقوم هو بعملية التحقق والتوثيق والإستعلام من قواعد البيانات والرد فكرة غير محببة كثيرة ويتطلب فصل مكوناتها.. هذا وبجانب أنه يحترم أيضا مبدأ نظام الوسطاء بتوسطه بين طلبية العميل وواجهة المتحكم وعدم تركهما يتفاعلان بصفة مباشرة. يحقق إستعمال أصناف طلبيات مخصصة الكثير من مبادئ الشيفرة النظيفة التي تجعل الشيفرة الخاصة بك قابلة للقراءة والتعديل والتخصيص على شكل واسع. يقوم إنشاء طلبيات مخصصة بإتاحة إمكانية جعل جميع الوظائف المماثلة تستند إلى نفس قواعد التحقق والتوثيق الخاصة بطلب واحد، وذلك بدلا عن إنشاء واحد لكل منها. بمعنى، أنه لو كنا نقوم بإنشاء مستخدم جديد في التابع store الخاص بالمتحكم UserController وأيضا في التابع store للمتحكم AdminController وتابع آخر في متحكم آخر، سيصبح لدينا الكثير من الشيفرة المتشابهة والمكررة في كل منها، فسنحتاج أن نكتب قواعد التحقق لكل تابع في كل متحكم، وأن نتحقق من صلاحية الطلبية في كل تابع من كل متحكم وهكذا.. هذا بجانب أن الأمر يصبح صعب التعديل لاحقا، ماذا لو قمت بإضافة عمود جديد في قواعد البيانات وأردت تعميم قاعدة التحقق الخاصة به على كامل الطلبات؟ بدلا عن كل هذا يتيح إنشاء صنف مخصص توحيد كل تفاصيل هاته الطلبيات. وبدل أن تبدوا متحكماتك كالتالي: public function update(Request $request, User $user){ if(auth()->user()->is_able_to_update_user){ $validator = Validator::make($request->all(), [ 'username' => 'required|max:8', 'password' => 'required|min:10', 'extra_data' => 'nullable', ]); if($validator->fails()) { return back()->withErrors($validator); }else{ $data = $validator->validated(); $user->update($data); return back()->with('success' ,'تم !'); } }else{ return back()->with('unauthorized' ,'غير مسموح لك !'); } } ستبدوا كـ: public function update(UpdateUserRequest $request, User $user){ $user->update( $request->validated() ); return back()->with('success' ,'تم !'); } مقسمة إلى: // UpdateUserRequest.php <?php /** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return auth()->user()->is_able_to_update_user; } /** * Get the validation rules that apply to the request. * * @return array */ public function rules() { return [ 'username' => 'required|max:8', 'password' => 'required|min:10', 'extra_data' => 'nullable', ]; } وهذا ما تم العمل به في المقال الذي قمت بإرفاقه، وبالتالي فإن عليك بدل تضمين كامل الواجهات التي يقوم صاحب المقال بتضمينها أن تقوم بإنشاء صنف Request المخصص الخاص بك وإستدعاءه متى طلبت الحاجة. تتحدث هاته المقالة عن أفضل التطبيقات وأساسيات التحقق من المدخلات في لارافيل، يوجد من بينها طريقة إنشاء أصناف طلبيات مخصصة: كما يمكنك الإطلاع على التوثيق الرسمي لكامل ما يخص التحقق في لارافيل هنا.

بشكل عام، يمكنك تحويل أعداد صحيحة كالتالي: 20100101 إلى تواريخ datetime وفق الدالة CONVERT التي تي توفرها SQL ، يكون ذلك في إستعلام SQL مثلا كالتالي : select CONVERT (datetime,20100101) كما يمكن استخدامها مع أي استعلام آخر، حيث تقبل كمعاملين: ثابت التحويل (يبقى datetime في حالة التحويل إلى تاريخ) والمعامل الثاني العدد الصحيح. بالإضافة إلى معامل ثالث يعبر عن نمط التاريخ مضبوط افتراضيا. الشكل العام للدالة: CONVERT(datetime, <string parameter>, styleFormat) سنقوم بإختيار رمز التنسيق الأبسط والأكثر شيوعا: mm/dd/yyyy المعبر عنه بالعدد 101. يمكنك توظيف هاته الدالة في استعلام SELECT آخر لجلب اسم القسم واسم المدير: CREATE FUNCTION udf_convert_int_date (@my_integer INT) RETURNS datetime AS BEGIN DECLARE @receving_date datetime SET @receving_date = CONVERT(datetime, CAST(@my_integer AS CHAR(8)), 101) RETURN @receving_date END

كطريقة منظمة أكثر يمكنك إنشاء صنف مساعد بداخل مجلد تنشئه وليكن Helpers داخل App، يقوم هذا الصنف بتوفير تابع يوفر هاته الخدمة ومن ثم بإستدعاء بسيط سيمكن إستدعاءه و العمل عليه في أي مكان في تطبيقك. ليحتوي الملف الشيفرة التالية: <?php namespace App\Helpers; class CountriesHelper{ public static function get() { $filepath = 'path/to/file'; return file_get_contents($filepath); } } لنقم بتسجيل alias لهذا الصنف في ملف app.php في مصفوفة aliases كالتالي: <?php 'aliases' => [ 'Countries' => App\Helpers\CountriesHelper::class, ] يكون الإستدعاء والإستعمال كالتالي: <?php use Countries; ... public function someMethod() { $countries = Countries::get(); } أو في أحد ملفات العرض لخدمة غرضك مثلا كالتالي: <select name="nationalty" id=""> @foreach(\Countries::get() as $country) <option value="{{$country}}">{{$country}}</option> @endforeach </select>