[ دورة ] [الدرس الرابع-دورة الحياة البرمجية]برمجة الصفحة الرئيسية [ 2]
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
في هذا الدرس سندخل في الشرح بدون اي مقدمات ، ولكن يجب التأكد من تشغيل السيرفر الشخصي ، وتشغيل المحرر والتأكد من الترميز وفتح مجلدات العمل ،،
العمل : سنقوم في هذا الدرس ببرمجة الجزء الأيسر من الموقع
-- محرك البحث
-- جديد الكتـاب
نبدأ على بركة الله :
- اولا نقوم بفتح ملفات الصفحة الرئيسية :
1- ملف index.php
2- ملف index.tpl [ الموجود في مجلد القالب ]
الان سنقوم بعمل نموذج البحث [ Search Form ] ، وسنوجهه إلى صفحة search.php ،
فنقوم بفتح ملف index.tpl ، ونبحث عن الكود الخاص بصندوق البحث ، كالتالي :
http://www.life5.net/Smarty's/4/3.png
ونبدأ فنقوم بإضافة الـ action + method لكود فتح النموذج <form>
فيصبح كالتالي :
http://www.life5.net/Smarty's/4/4.png
وبالتالي اصبح الان البحث يقوم بإرسال القيم إلى صفحة search.php والتي سوف نقوم بعملها ان شاء الله وايضا من خلال نفس الصفحة سنقوم بعرض النتائج الخاصة بالبحث
سؤال : لماذا استخدمنا في الطريقة [ method ] >> قمنا باستعمال GET عوضا عن POST ؟!
جـواب : الجواب بكل بساطة لأنه الـ get تقوم بإظهار القيمة بالعنوان ، فيصبح باستطاعة الباحث الاحتفاظ برابط البحث لاستعماله في الزيارات المقبلة او نشره او مشاركته ،، اما لو استعملنا POST فالقيمة سترسل بداخل الصفحة ولن تظهر للمستخدم !
----------------- انتهى البحث -----------------
الان ننتقل للجزء الاهم والاكبر ، وهو [ جديد الكتاب ] ، وهنا سيتم عرض
-- صورة الكاتب
-- اسم الكاتب
<< وسيتم عرض احدث 4 كتاب فقط !
ندخل على ملف index.php بواسطة المحرر ونضع المؤشر في مكان ما انتينا ، ولكن يكون المؤشر اعلى دالة عرض القالب ،، اي نكتب مباشرة فوق هذه الاكواد :
http://www.life5.net/Smarty's/4/1.png
نبدأ الان كما تعودنا بوضع تعليق بداية وتعليق بالنهاية للتعريف ببدء العمل بالمنطقة التالية ، ولكن في هذه المرة سنكتب التعليقات بطريقة اخرى غير الطريقة الماضية ،
قلكتابة التعليقات سنستخدم في هذا الدرس طريقة الشرطتين المائلتين [ // ]
نكتب التعليق البداية والنهاية كالتالي :
http://www.life5.net/Smarty's/4/2.png
ثم نضع المؤشر بالوسط بين التعليقين ، ونبدأ على بركة الله ،
اولا : نحدد ما هو المطلوب :
1- إضافة حقل جديد في جدول الكتاب [ users ] في داخل قاعدة البيانات وذلك لإضافة رابط الصورة بداخله ..
2- استعلام [ query ] يقوم بجلب جديد الكتاب من جدول [ users ] ، وتحديد 4 كتاب فقط ، وايضا الترتيب من الاحدث للاقدم
3- جلب البيانات [ fetch ] ، وتكون بداخل حلقة تكرار
4- تخزين داخل حلقة التكرار متغير كمصفوفة ، ونعطيه قيمة جلب البيانات
ثانيا : نبدأ بالعمل خطوة خطوة :
1- طبعا سيتم الشرح على الطريقتين :
1-1 - لمستخدمين برنامج MySql - Front
اتبع الصور
1-
[ http://www.life5.net/Smarty's/4/1-1.png ]
2-
[ http://www.life5.net/Smarty's/4/1-2.png ]
3-
[ http://www.life5.net/Smarty's/4/1-3.png ]
2- استعلام [ query ] يقوم بجلب جديد الكتاب من جدول [ users ] ، وتحديد 4 كتاب فقط ، وايضا الترتيب من الاحدث للاقدم
طبعا سنقوم باستعمال الصنف الان ، ونقوم بعمل استعلام ، كالتالي :
http://www.life5.net/Smarty's/4/5.png
في الصورة قمنا بعمل استعلام ، طبعا في بداية الاستعلام بدأنا باختار [ select ] أحد اوامر قواعد بيانات Mysql ، وهو يقوم باختيار الصفوف ، وبعدها قمنا بالاستعلام بهذه الطريقة :
انه قمنا بتحديد اسماء الحقول اللتي ستفيدنا فقط ، ولهذه الحركة فوائد عديدة فهي تقوم بتسريع عمل السكربت وذلك لأنها تاخذ وقت اقل في الاستعلام ...
وبعدها قمنا بكتابة [ FROM ] وبعدها حددنا اسم الجدول المطلوب وهو [ users ]
ومن ثم قمنا بترتيب الكتاب بواسطة [ ORDER BY ] ، وحددنا الحقل [ Id ] وطريقة الترتيب هي [ DESC ] وهو الترتيب التنازلي ، والسبب في ترتيبنا للنتائج تنازليا حسب الـ Id ، وذلك لأن الـ Id يزداد بمقدار 1 كل اضافة سجل وهو تلقائي ، فالاجدد يكون رقم معرفه اكبر من القدامى
وبعدها قمنا بتحديد عدد السجلات المطلوبة بواسطة [ LIMIT ] ، وقمنا بتحديد [ 0,4 ] وذلك للبدء من بداية السجلات إلى ويعد حتى 4 سجلات
وهكذا انتهى الاستعلام
3- جلب البيانات [ fetch ] ، وتكون بداخل حلقة تكرار
ونبدأ الان بعمل حلقة تكرار ، وبداخلها نعرف متغير وقيمته الجلب من نتائج الاستعلام ، فيكون كالتالي :
http://www.life5.net/Smarty's/4/6.png
4- تخزين متغير داخل نظام القوالب قيمته النتائج المجلوبة
وهذه الخطوتين الاخيرتين ابسط ما يمكن ، فالصور تغني عن الشرح
http://www.life5.net/Smarty's/4/7.png
/// 5- الان ننتقل إلى العمل داخل القالب ، فنقوم بالانتقال إلى صفحة index.tpl ، ونبحث عن القائمة اليسرى ، وبداخلها نبحث عن صندوق جديد الكتاب ،
http://www.life5.net/Smarty's/4/8.png
5-1 -- نقوم بإزالة جميع الصفوف الخاصة بالقائمة ، ونبقى على واحدة فقط ، فيصبح كالتالي :
http://www.life5.net/Smarty's/4/8-1.png
5-2 -- الان نقوم باستعمال دالة التكرار داخل نظام القوالب Smarty ، ونبدأ بكود الدالة قبل الصف [ <li> ] وننتهي نهاية الدالة بعد [ </li> ]
http://www.life5.net/Smarty's/4/8-2.png
5-3 -- الان لم يتبقى امامنا سوى القيام بعمل المتغيرات كل متغير بمكانه + إزالة بعض الزوائد ، فيصبح الكود بالكامل كالتالي :
http://www.life5.net/Smarty's/4/8-3.png
وهكذا انتهى الدرس بحمد الله تعالى ، صحيح انه درس بسيط وصغير ، وقد يستغرب الجميع لماذا اخذ كل هذا الوقت في اعداده ، ولكن الدرس بسيط صحيح لكني حاولت عدة محاولات بائت بالفشل بالشرح بعدة طرق ، وهذه هي الطريقة الاخيرة والتي رأيت انها افضل شيء وافضل حل للشرح والفهم ...
وبالنهاية ، هناك استبيان بسيط :
- هل أعجبك أسلوب الشرح ؟! وهل تفضل الاستمرار عليه ؟!
تحياتي للجميع
عبدالله
Life
