لوحة المتصدرين

ثبّتنا في الدرس السابق من هذه السلسلة إطار Laravel وأعددناه. سنستخدم تلك الإعدادات كقاعدة لبناء تطبيق صغير عليها؛ ونرى العناصر الأساسية لتطبيق يعمل على إطار العمل Laravel. هذا الدرس جزء من سلسلة تعلم Laravel والتي تنتهج مبدأ "أفضل وسيلة للتعلم هي الممارسة"، حيث ستكون ممارستنا عبارة عن إنشاء تطبيق ويب للتسوق مع ميزة سلة المشتريات. يتكون فهرس السلسلة من التالي: مدخل إلى Laravel 5.تثبيت Laravel وإعداده على كلّ من Windows وUbuntu.أساسيات بناء تطبيق باستخدام Laravel. (هذا الدرس)إنشاء روابط محسنة لمحركات البحث (SEO) في إطار عمل Laravel. نظام Blade للقوالب.تهجير قواعد البيانات في Laravel.استخدام Eloquent ORM لإدخال البيانات في قاعدة البيانات، تحديثها أو حذفها.إنشاء سلة مشتريات في Laravel.الاستيثاق في Laravel.إنشاء واجهة لبرمجة التطبيقات API في Laravel.إنشاء مدوّنة باستخدام Laravel.استخدام AngularJS واجهةً أمامية Front end لتطبيق Laravel.الدوّال المساعدة المخصّصة في Laravel.استخدام مكتبة Faker في تطبيق Laravel لتوليد بيانات وهمية قصدَ الاختبار. يشمل الدرس المواضيع التالية: مفهوم التوجيه Routing وآلية عمله.أداة Artisan التي تعمل على سطر الأوامر.استخدام أداة Artisan لتوليد شفرة مصدرية نمطية للمتحكّمات Controllers (وهي المسؤولة عن الإجابة على الطّلبات التي تردها Requests).إنشاء نداء لمتحكّم في مسار Route.تمرير المتغيّرات من متحكّم إلى عرض View.أساسيات التوجيه في Laravelعند وصول طلب إلى تطبيق Laravel تتلقى آلية التوجيه الطلب ثم تختار طريقة التعامل معه. سنرى في هذه الفقرة كيفية عمل هذه الآلية. أول ما سنفعله هو إنشاء مسار جديد؛ لذا افتح ملف routes.php الموجود على المسار app\Http بمحرّر النصوص المفضّل لديك. ملحوظة1: جميع المسارات المذكورة في الدرس هي بالنسبة لمجلد تطبيق Laravel. يعني هذا أن المقصود بالمسار (على افتراض أنك اتبعت خطوات الإعداد في الدرس السابق) app/Http هو المسار C:\laragon\www\larashop\app\Http على وندوز و /var/www/html/larashop/ على لينكس. ملحوظة2: انتبه لحالة الأحرف، كبيرة أو صغيرة. أضف المحتوى التالي إلى الملف routes.php : Route::get('/hello',function(){ return 'Hello World!'; });تعرّف الشفرة السابقة مسارًا لتلقي الطلبات من نوع GET (الدّالة get الموجودة في الصنف Route). المعطى الأول للدّالة هو الرابط المعني بالمسار (أي /hello) أما الثاني فهو دالة مجهولة الاسم Anonymous function تعرّف طريقة التعامل مع الطلب. يعني هذا أنه عند تلقي طلب على العنوان http://larashop.dev/hello فإن التطبيق ينفذ الدالة مجهولة الاسم والتي تُرجِع العبارة: Hello World!. احفظ الملف ثم اذهب إلى المتصفح وأدخل العنوان: http://larashop.dev/helloيجب أن تظهر صفحة بيضاء مطبوعة عليها عبارة: Hello World!. ربما تكون لاحظت وجود الشفرة التالية في الملف routes.php: Route::get('/', function () { return view('welcome'); });تتبع هذه الشفرة نفس المبدأ حيث تعرّف مسارا للطلبات الآتية على الرابط / أي رابط الصفحة الرئيسية (http://larashop.dev) وتحيلها إلى عرض باسمwelcome بدلا من طباعة عبارة مباشرةً (سنرى في ما بعد كيفية ذلك). أداة ArtisanArtisan عبارة عن أداة تُستدعى من سطر الأوامر لأتممة تنفيذ أنشطة اعتيادية على Laravel. يمكن استخدام أداة Artisan لتنفيذ الأنشطة التالية من بين أخرى: توليد شفرة نمطية: إنشاء المتحكّمات، النماذج Models، وغيرها بيُسر.تهجير قواعد البيانات Database migrations: وهو نظام لإدارة الإصدارات الخاصة بقواعد البيانات يجعل من التعامل مع الكائنات في قواعد البيانات (إنشاء جداول أو حذفها مثلا) أسهل عبر وصفها دون الحاجة للتعديل عليها مباشرةً.بذر قواعد البيانات Database seeding: وهو مصطلح يشير إلى إضافة بيانات وهمية للتسجيلات Records في جداول قاعدة البيانات لأغراض الاختبار.التوجيه: وهي الآليّة المسؤولة عن تلقي الطلبات ثم اختيار طريقة التعامل معها (عادةً بإرسالها إلى متحكّم).ضبط التطبيق.تشغيل الاختبارات الأحاديّة Unit tests.كيف تستخدم أداة Artisanافتح سطر الأوامر ثم انتقل إلى مجلد التطبيق. على افتراض أنك موجود في أصل المستند (C:\laragon\www على وندوز أو /var/www/html/ على لينكس): cd larashopثم نفّذ الأمر التالي: php artisan listملحوظة: تأكّد من وجودك في مجلّد التطبيق (أي المجلّد larashp) قبل تنفيذ الأمر artisan. تظهر أوامر artisan المتاحة للتنفيذ. مثال على النتيجة: Laravel Framework version 5.1.26 (LTS) Usage: command [options] [arguments] Options: -h, --help Display this help message -q, --quiet Do not output any message -V, --version Display this application version --ansi Force ANSI output --no-ansi Disable ANSI output -n, --no-interaction Do not ask any interactive question --env[=ENV] The environment the command should run under. -v|vv|vvv, --verbose Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug Available commands: clear-compiled Remove the compiled class file down Put the application into maintenance mode env Display the current framework environment help Displays help for a command inspire Display an inspiring quote list Lists commands migrate Run the database migrations optimize Optimize the framework for better performance serve Serve the application on the PHP development server tinker Interact with your application up Bring the application out of maintenance mode أمر Artisan لتوليد شفرة متحكمسنستخدم Artisan لتوليد متحكم بسيط يجيب على طلب Http ويحمّل عرضا باسم hello. افتح سطر الأوامر ونفذ الأمر التالي (تأكد من وجودك في مجلّد التطبيق قبل تنفيذ الأمر): php artisan make:controller Helloاستخدمنا أمر make:controller الذي توفره أداة Artisan لتوليد شفرةِ متحكّم ومررنا له اسم المتحكم الذي نريد توليده Hello. يُنشئ الأمر أعلاه ملفا باسم Hello.php على المسار app/Http/Controllers. يجب أن تظهر رسالة في سطر الأوامر تفيد بنجاح توليد المتحكم. نفتح ملف Hello.php لرؤية محتواه: <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\Requests; use App\Http\Controllers\Controller; class Hello2 extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { // } /** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */ public function create() { // } /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function store(Request $request) { // } /** * Display the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function show($id) { // } /** * Show the form for editing the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function edit($id) { // } /** * Update the specified resource in storage. * * @param \Illuminate\Http\Request $request * @param int $id * @return \Illuminate\Http\Response */ public function update(Request $request, $id) { // } /** * Remove the specified resource from storage. * * @param int $id * @return \Illuminate\Http\Response */ public function destroy($id) { // } }يعرف الملف فضاء اسم Namespace خاصًّا بالمتحكم: namespace App\Http\Controllers.تستورد التعليمات التالية (use Illuminate\Http\Request; use App\Http\Requests; use App\Http\Controllers\Controller;) الأصناف Classes المطلوبة لتشغيل المتحكم.الصنف Hello هو تمديد للصنف Controller الذي يعرّفه إطار العمل.بالنسبة للدوال التي يعرفها المتحكم فاستخدامها يكون كالآتي: الدالة index هي الدالة الافتراضية للمتحكم: تتعامل مع الطلبات الموجهة للرابط الجذر الذي يجيب عنه المتحكم.الدالة create: إنشاء موارد جديدة مثل تسجيلة في جدول قاعدة البيانات.الدالة store: تخزين مورد جديد مُنشَأ بالدالة السابقة.الدالة show: العثور على مورد اعتمادا على المعرِّف ID الممرَّر للدالة.الدالة edit: تتيح إمكانية التعديل على المورد الممرّر للدالة.الدالة update: تحديث مورد مخزّن.الدالة destroy: حذف مورد مخزَّن.سنأتي تباعا لتفصيل استخدام هذه الدوال في الوقت المناسب. توجيه طلب إلى متحكمفي المسار الذي عرفناه سابقا تُطبع العبارة مباشرة من داخل دالة التوجيه، وهذا خلط بين عناصر نموذج MVC، لذا سنضع المسار بين علامات تعليق لتجاهله: /* Route::get('/hello',function(){ return 'Hello World!'; }); */ثم نضيف شفرة مصدرية جديدة تنشئ مسارا لنفس الرابط hello/ ولكنها بدلا من طبع سلسلة محارف ترسل نداءً إلى المتحكم Hello وبالتحديد دالة index: Route::get('hello', 'Hello@index');نفتح ملف المتحكم لتحرير الدالة index لتأخذ المحتوى التالي: public function index() { return 'hello world from controller : )'; }احفظ الملف. افتح الآن الرابط http://larashop.dev/hello، وستجد أن الرسالة التالية تظهر في الصفحة: hello world from controller :)ما حدث هنا هو أن المسار الخاص بالرابط hello تلقى الطلب من المتصفح ثم أحاله إلى المتحكم Hello الذي طبع سلسلة محارف على الشاشة. تحميل عرض View انطلاقا من متحكماحترام مبادئ MVC يقضي بألا يتداخل عمل المتحكمات والعروض؛ فتنسيق ما يراه الزائر من مسؤولية العروض، ولذا فعلى المتحكم توكيل عرض بهذه المهمة مع إمداده بما يحتاجه من متغيرات. وهو ما سنفعله في الفقرات التالية. سيتلخص عملنا في ثلاث نقاط: إنشاء مسار لتلقي الطلب على الرابط hello/ وإرساله إلى المتحكم المناسب (تم هذا الأمر).إنشاء متحكم للإجابة عن الطلب (تم).إنشاء عرض لتنسيق ما سيظهر على شاشة الزائر.تغيير المتحكم لإرسال نداء إلى العرض وتمرير المتغيرات المناسبة إليه.أنشئ ملفا باسم hello.blade.php في المسار resources/views/ وأضف إليه المحتوى التالي: <!DOCTYPE html> <html> <head> <title>Laravel</title> <link href="//fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css"> <style> html, body { height: 100%; } body { margin: 0; padding: 0; width: 100%; display: table; font-weight: 100; font-family: 'Lato'; } .container { text-align: center; display: table-cell; vertical-align: middle; } .content { text-align: center; display: inline-block; } .title { font-size: 96px; } </style> </head> <body> <div class="container"> <div class="content"> <div class="title">Hello {{$name}}, welcome to Laraland! : )</div> </div> </div> </body> </html>يحوي الملف كما يظهر شيفرة HTML عادية مع تغييرين أساسيين، هما لاحقة اسم الملف (blade.php) واستخدام المتغير name في الملف. تشير اللاحقة إلى أن العرض يستخدم نظام Blade للقوالب الذي يأتي مضمّنا في Laravel (سنخصص درسا للعروض والقوالب). نكتفي الآن بالقول إن {{$name}} تطبع قيمة المتغير name. افتح الملف app/Http/routes.php وأضف الشفرة التالية: Route::get('/hello/{name}', 'Hello@show');يعمل هذا السطر على إنشاء مسار للروابط ذات الصيغة /hello/value حيث value قيمة ما، تخزن هذه القيمة في المتغير name ثم تمرّر إلى الدالة show الموجودة في المتحكم Hello. نفتح ملف المتحكم Hello ونعدّل الدالة show($id) لتصبح على النحو التالي: public function show($name) { return view('hello',array('name' => $name)); }نعرف الدالة show التي تقبل المعطى name.تحمِّل الدالة عرضا باسم hello.blade.php (يُكتفى بذكر اسم العرض دون اللاحقة blade.php) ثم تمرر له مصفوفة تحوي متغيراتٍ وقيمَها. في حالتنا يوجد متغير واحد باسم name وقيمته هي المعطى الممرَّر للدالة show.احفظ التعديلات التي أجريناها في الفقرات السابقة ثم افتح الرابط http://larashop.dev/hello/HsoubAcademy في المتصفح. يمكن أن نلاحظ هنا أن HsoubAcademy هي قيمة المتغير name الموجود في تعريف المسار التالي: Route::get('/hello/{name}', 'Hello@show');إذن: طلب الزائر العنوان http://larashop.dev/hello/HsoubAcademy في المتصفح.وجد التطبيق أن المسار الموافق لهذا الرابط هو المسار /hello/{name{ وأعطى القيمة HsoubAcademy للمتغير name ثم وجّه الطلب إلى الدالة show في المتحكم Hello.تلقت الدالة show الطلب ثم أرسلته إلى العرض hello مع إنشاء متغير جديد بنفس الاسم المستخدم في العرض وحددت قيمته بالمعطى الذي تلقته من المسار. كان بإمكان الدالة show إجراء عمليات على المعطى قبل تمريره.بدأ نظام القوالب العمل ووجد أن العرض hello يحوي متغيرا باسم name وأن قيمة هذا المتغير كما مررها له المتحكم هي HsoubAcademy، فوضعها مكان المتغير وأرسل النتيجة إلى المتصفح.خاتمةتعرفنا في هذا الدرس على الآلية الأساسية التي تعمل بها تطبيقات Laravel. من المهم جدّا فهم محتويات هذا الدرس قبل الانتقال إلى الدروس الموالية. ترجمة -وبتصرّف- لمقال Laravel 5 Hello World لصاحبه Rodrick Kazembe.

ووردبريس هو منصة رائعة لإدارة المحتوى. إذا كنت تملك أيّ محتوى يأتي في شكل وحدات شبيهة بالمقالات (أو ما شابهها مثل منتجات) فلا أجد سببا يدفعك لعدم استخدام ووردبريس. قد يكون التعاون باستخدام سكربت ميديا ويكي سهل أيضا، واستخدام دروبال مع أنظمة الشركات يعد أمرا سهلا وشائعا، لكن ووردبريس له مكانته أيضا في هذا المجال، وهو في رأيي، يوفر تجربة تحرير أفضل. أحد الطرق لجعل المحتوى في ووردبريس يعمل بشكل أفضل هو إضافة معلومات إضافية له (metadata). قد يكون الأمر على شكل تصنيفات خاصة (taxonomies) أو على شكل بيانات تستخدم لهدف واحد (custom fields). ماهو الحقل المخصص في ووردبريس؟إذا أردت أن تستخدم معلومات محددة متغيرة لكل مقال ما (أو شيء شبيه بمقال كمنتج)، هنا تستطيع استخدام الحقول المخصصة في ووردبريس. "الحقول المخصصة" لها تسميتان مختلفتان في ووردبريس، غالبا ما يطلق عليها خصائص المنشور أو المعلومات الجانبية (post metadata) أو post_meta وعادة ما يطلق عليها باسم الحقول المخصصة، وهذه الترجمة الرسمية التي يستخدمها فريق ترجمة ووردبريس العربي. نحن نضيف الحقول المخصصة عندما نريد أن نخزن خصائص إضافية لمنشور ما. منشورات ووردبريس تأتي بالعديد من الخصائص الإضافية بشكل مسبق: تاريخ النشر، كاتب الموضوع، آخر وقت تّم التعديل عليهم. لكنك قد تريد المزيد، مثلا تريد أن تضيف عنوانا ثانويا للمنشور، أو تريد أن تضيف ملخص المنشور تصميم منفرد. ووردبريس يقوم بتخزين هذه المعلومات في قاعدة البيانات، وباستخدام دوال معينة نقوم بتحديدها وتخزينها واسترجاعها. الحقول المخصصة تنفرد عن خيارات الموقع site_settings حيث أنّ لهم علاقة بالمنشور وليس بالموقع ولكن كلاهما يعملان بنظام عنوان وقيمة key/value pair يتم استخارجهم من قاعدة البيانات عبر دوال محددة، لذا إن كانت لك تجربة بنظام خيارات الموقع Settings API فلن تواجه مشكلة في فهم الحقول المخصصة. كيف أضيف الحقول المخصصة لمنشور؟هناك العديد من الطرق التي تستطيع استخدامها لإضافة الحقول المخصصة، الواجهة الافتراضية للتعامل مع الحقول الخاصة في ووردبريس قديمة ولم يتم تحديثها منذ مدة، ورغم أنها تخدم الهدف إلا أنها بعيدة عن المثالية. الجزء المضاف في الأسفل "ما بعد الأساسيات" سيدخل في التفاصيل حول خيارات أخرى تستطيع اللجوء لها من أجل التحكم في الحقول الخاصة، لكن سنقوم الآن بفهم الواجهة الأصلية فحسب، لأنها ستكون موجودة دوما في كل المواقع. في شاشة التعديل على منشور ستجد صندوق "خصائص إضافية"، وستقوم أنت بتعديل الحقول المخصصة فيه. لا داعي لنمر على كامل معلومات تكوين الصندوق، ستقوم ببساطة باختيار الاسم (أو تضيف واحدا جديدا في حال لم تقم بالأمر من قبل). من ثم تقوم بإضافة القيمة، إضغط على الزر ولقد قمت بإضافة الحقل إلى منشورك، محفوظا مع بقية عناصرك. إظهار الحقول المخصصة في منشوراتكلتستخدم الحقول الخاصة في منشوراتك أمامك عدة دوال، وتسمياتهم تختلف حسب طريقة تكلم الناس عنهم، الدوال الأساسية هي كالتالي: ()the_meta: مثل كل دوال ووردبريس التي تبدأ بـ _the فدالة ()the_meta الهدف منها طبع المعلومات (echo) حتى لا تقوم بالأمر يدويا. تستطيع استخدامها عندما لا تريد أن تغير أيّ شيء بالمعلومات التي تريد طباعتها. لكنها تبدو لي غبر مفيدة لأنها لا تتيح لك أيّ تحكم بهيكلة المعلومات التي تحصل عليها، كما أنها تقوم بطبع كل المعلومات للصفحة.()get_post_meta: هي الدالة التي أستخدمها أنا طوال الوقت، المتغير الأول (parameter) الذي تحتاجه هو معرف (ID) المنشور، المتغير الثاني هو اسم الحقل الذي تريد جلبه، والثالث هو Boolean في حال كنت تريد القيمة على شكل string أو array مصفوفة (true من أجل string وfalse ل array).()get_post_custom: عمل بشكل شبيه جدا لـ ()get_post_meta لكنها تختلف في التسمية، الفرق أنك تقوم بتمرير ID المنشور له فحسب (بشكل اختياري أيضا) وسيقوم بإرجال كل القيم المخصصة للمنشور على شكل array.ما بعد الأساسيات: كيفية تحسين واجهة الحقول المخصصةأحد نقاط ضعف ووردبريس من ناحية الحقول المخصصة هو الصندوق الذي تستخدمه للتعديل عليها، فكما أسلفنا الذكر، الصندوق ليس مفيدا لتلك الدرجة، لذا أنت تملك الفرصة لتحسين التجربة لمستخدميك وزبائنك. الدوال التي تحتاجها للتعامل مع الحقول الخاصةحتى الآن، فقد تعلمنا كيف نسترجع الحقول الخاصة فحسب، مهمة أخرى ستقوم بها عند التطوير هي تعديل أو حذف المعلومات. من أجل هذه المهمة يقدم ووردبريس 3 دوال بسيطة للقيام بالأمر وهي: ()add_post_meta : هي الطريقة التي تستخدمها لإنشاء الحقل لأول مرة، تقوم بتمرير ID المنشور لها واسم الحقل المخصص (meta_key) والقيمة التي تريدها، وبشكل اختياري تستطيع تحديد أن يجعل ووردبريس تلك القيمة فريدة من نوعها. addpostmeta($postid, $metakey, $meta_value, $unique = false) ()update_post_meta : يمكن أيضا استخدام هذه الدالة لإنشاء حقل مخصص جديد، لذا هي تملك القدرة لتحل مكان ()add_post_meta في حال لم تكن واثقا أن الحقل جديد أو لا فتستطيع استعمالها، أول ثلاث خيارات هم نفس خيارات ()add_post_meta والخيار الأخير هو القيمة السابقة، وهو أمر لم استخدمه من قبل حقا ولكن قد يكون مفيدا في حال كنت تملك الكثير من القيم لاسم واحد (key). updatepostmeta($postid, $metakey, $metavalue, $prevvalue='') ()delete_post_meta : هي كما تتوقع تماما، وخياراتها مثل البقية تماما، عدى أن الخيار الأخير (قيمة الحقل) هي قيمة اختيارية تستطيع أن لا تحددها. deletepostmeta( $postid, $metakey, $meta_value = '' ) شرح كيفية استخدام هذه الدوال داخل لوحة التحكم هو خارج نطاق المقال، لكنك تستطيع استعمالها عبر إنشاء صندوق جديد، واستخدام الدوال اللازمة وحفظ المعلومات أثناء حفظ المنشور. استخدام إضافات مصممة لتحسين تجربة الحقول الخاصةهناك العديد من الإضافات الرائعة التي تقوم بتحسين واجهة الحقول الخاصة، أشهرها في نظري هي Pods و Advanced Custom Fields. تقوم هذه الإضافات باستخدام custom post type لإنشاء حقول جديد تعمل بمثابة حقل مخصص. أداة أبسط وأقوىالطريقة التي استخدمها عادة والتي تختلف عن البقية هي إضافة CMB2 فهي تتيح لك تحكم عبر الشفرة البرمجية (عكس الإضافات الأخرى التي تتطلب منك إنشاء الحقول عبر واجهة). استخدام هذه الطريقة للبناء بدل الطريقة التقليدية الذي يوفرها ووردبريس هو أمر مختلف تماما وتجربة رائعة. لن تحتاج لكتابة دوال كبيرة لبناء صناديق لحقول مخصصة ثم محاولة حفظها فهي تقوم بكل شيء بشكل أوتوماتيكي. كل ما عليك القيام به هو وضع الملفات في قالبك أو إضافتك أو تنصيب الإضافة والعمل مع دوالها من قالبك، لشرح أكبر لها اقرأ التوثيق المرفق لها. يجدر الذكر أنّ الإضافة مترجمة للعربية بنسبة 93% (بتاريخ هذا اليوم) ويعتبر هذا دعما ممتازا للعربية لذا الشكر لكل من ساهم في ترجمتها (تستطيع الانضمام لهم عبر موقع Transifex). قوة الحقول المخصصة في ووردبريسكما أسلفنا الذكر، الحقول المخصصة تعتبر جزءا مهما في تطوير استخدامك لووردبريس. استخدام الأمور المبنية في ووردبريس لنشر المحتوى أمر جيد، ولكن الحقول المخصصة هي ما تسمح لإضافات مثل WooCommerce و Easy Digital Downloads بإضافات مميزات قوية لووردبريس. ترجمة -وبتصرف- للمقال: Everything You Should Know about WordPress Custom Fields لصاحبه: DAVID HAYES.