اصبح هناك عدد لا بأس به من المقالات في هذا التدريب ولم نبدأ بعد ببناء الصفحة الرئيسية!
والحال اننا لن نبدأ بذلك بعد. فالصفحة الرئيسية في الموقع هي اصعب ما يجب تحقيقه رسومياً ويجب على واجهتها ان تعرض اهم المعلومات بطريقة منطقية ومتماسكة (فلا يجب الاكثار او التقليل من المعلومات). وقبل الشروع في بناء الصفحة الرئيسية، يجب معرفة كل انواع المعلومات الموجودة في الموقع وانظمة التصفح المختلفة. بالتالي يبقى انشاء الصفحة الرئيسية هو آخر ما نقوم به.
سنبدأ اذاً باستغلال المعلومات الموجودة في موقعناً فعلياً لإنشاء عدة انواع من «الصفحات الرئيسية». فمواقع الالعاب تحتوي عادة على الكثير من هذه الصفحات التلخيصية التي تعرض الالعاب حسب معايير مختلفة مثل روزنامة صدور الالعاب او اعلى العلامات...
جدول اعلى العلامات
ننشئ زوج من الملفات لعرض لائحة بأفضل الالعاب.
نعطي صفحة النداء اسم «rating.php3» وتحتوي:
<?
$fond = "rating";
$delais = 24 * 3600;
include ("inc-public.php3");
?>
يمكننا الآن المباشرة بالصفحة النموذجية «rating.html»:
<html>
<title>[#NOM_SITE_SPIP] أفضل الالعاب</title>
</head>
<body>
<blockquote>
<h2>أفضل الالعاب</h2>
<BOUCLE_rating(MOTS){type=علامة}{par titre}{inverse}>
<h1>#TITRE/10</h1>
</BOUCLE_rating>
</blockquote>
</body>
</html>
لقد ادخلنا حلقة اولى هي «BOUCLE_rating» تعرض كل المفاتيح من نوع «علامة» (اي «01»، «02»،...، «10») بالترتيب العكسي (اي «10» في الاعلى).
سنعرض عناوين المقالات المناسبة لكل علامة (اي المقالات المرتبطة بالمفاتيح التي استرجعتها الحلقة BOUCLE_rating):
<BOUCLE_rating(MOTS){type=علامة}{par titre}{inverse}>
<B_articles>
<h1>#TITRE/10</h1>
<BOUCLE_articles(ARTICLES){id_mot}{par date}{inverse}>
<li>#TITRE
</BOUCLE_articles>
</BOUCLE_rating>
الامر الدقيق الوحيد هنا هو: المفتاح (اي العلامة) يظهر الآن في الجزء الشرطي قبل من الحلقة BOUCLE_articles. هكذا، لن تُعرض الا العلامات التي تم اعطاؤها فعلياً لمقالات.
نعرض هنا عنوان المقال. ولكن ليس هذا ما يهمنا، فنريد عرض:
– اسم اللعبة اي اسم القسم الذي يحتوي المقال
– البيئة او البيئات التي تدعمها اللعبة
– تاريخ او تواريخ صدور اللعبة.
كل هذا سهل، فقد نفذنا هذه العمليات في صفحات اخرى (في ما يتعلق بتاريخ الصدور، ننسخ مباشرة ما طورّناه في صفحة «article.html»):
<BOUCLE_rating(MOTS){type=علامة}{par titre}{inverse}>
<B_articles>
<h1>#TITRE/10</h1>
<ul>
<BOUCLE_articles(ARTICLES){id_mot}{par date}{inverse}>
<BOUCLE_section_game(RUBRIQUES){id_rubrique}>
<li><b><a href="#URL_ARTICLE">#TITRE</a></b>
</BOUCLE_section_game>
<BOUCLE_platform_game(MOTS){id_article}>
#LOGO_MOT
</BOUCLE_section_game>
<BOUCLE_plat2(MOTS){id_article}{type=البيئة}>
<BOUCLE_out(ARTICLES){id_rubrique}{titre_mot=تاريخ_الصدور}>
<BOUCLE_verify_key(ARTICLES){id_article}{id_mot}>
<br> تاريخ الصدور
<BOUCLE_platform_out(MOTS){id_article}{type=البيئة}{", "}>#TITRE</BOUCLE_platform_out> :
[<b>(#DATE|affdate)</b>]
</BOUCLE_verify_key>
</BOUCLE_out>
</BOUCLE_plat2>
</BOUCLE_articles>
</ul>
</B_articles>
</BOUCLE_rating>
هناك امر واحد دقيق: اننا نستخدم العلامة URL_ARTICLE# داخل حلقة من نوع RUBRIQUES، بحيث تؤدي الوصلة الى صفحة الاختبار بدلاً من الصفحة العامة لقسم اللعبة. هذا الاستخدام لعناصر خاصة بالمقالات ARTICLES ممكن هنا لأن عنوان URL_ARTICLE# يتحدد بالاعتماد على المتغيّر «id_article». وتقوم حلقة BOUCLE_articles بإعطائنا هذا المتغيّر ولا تغير حلقة BOUCLE_section_game قيمته (لأنها حلقة من نوع RUBRIQUES). وهو المبدأ نفسه الذي يتيح استخدام «id_mot» في الحلقة BOUCLE_verify_key.
آخر مشكلة علينا حلها: هذه الصفحة تعمل بشكل مرض في بداية حياة الموقع خلال التجارب عندما لا تتعدى المقالات العشرة، لكن عندما يصبح عمر الموقع اطول ويصبح عدد مقالات الاختبارات فيه يقدر بالآلاف (على الاقل) تصبح اللائحة طويلة جداً. في جميع الاحوال ليس من المفيد عرض العاب صدرت منذ اسبوع واخرى صدرت منذ اشهر بالطريقة نفسها: فلا شك ان اللعبة التي حصلت على علامة 9\10 منذ سنة، ستحصل على علامة اقل اليوم. يجب علينا اذاً ادخال حد على اللائحة يعتمد على الوقت وذلك بتعديل حلقة BOUCLE_articles:
<BOUCLE_articles(ARTICLES){id_mot}{age<90}{par date}{inverse}>
ويعني المعيار {age<90} المقالات المنشورة منذ اقل من ثلاثة اشهر.
روزنامة الصدور
صفحة لا غنى عنها من بين صفحات العاب الفيديو هي الصفحة التي تعرض الالعاب التي صدرت حديثاً وتلك التي ستصدر قريباً.
ستحمل صفحة النداء اسم «releases.php3»:
<?
$fond = "releases";
$delais = 24 * 3600;
include ("inc-public.php3");
?>
ويأتي في اول ملف «releases.html» التالي:
<html>
<title>[#NOM_SITE_SPIP] الاصدارات</title>
</head>
<body>
<blockquote>
<h2>الاصدارات المقبلة</h2>
<BOUCLE_out(ARTICLES){titre_mot=تاريخ_الصدور}{par date}{age < 0}>
<p> #TITRE - [(#DATE|affdate)]
</BOUCLE_out>
</blockquote>
</body>
</html>
العنوان TITRE# هو عنوان المقال الذي يحتوي تاريخ الصدور وهو عنوان وهمي يستخدم لتسهيل التصفح في المجال الخاص. يجب اذاً استبداله بإسم اللعبة اي عنوان القسم الذي يحتوي هذا المقال. وهذه نفس العملية التي نفذناها سابقاً. اضافة الى ذلك نريد عرض شعارات البيئات المرتبطة بهذا الصدور. هنا ايضاً العملية سهلة:
<BOUCLE_out(ARTICLES){titre_mot=تاريخ_الصدور}{par date}{age < 0}>
<p>
<BOUCLE_section_game(RUBRIQUES){id_rubrique}>
<b><a href="#URL_RUBRIQUE">#TITRE</a></b>
</BOUCLE_section_game>
<BOUCLE_platform_game(MOTS){id_article}>
#LOGO_MOT
</BOUCLE_platform_game>
- [(#DATE|affdate)]
</BOUCLE_out>
يوجد هنا عيب مهم في التصفح: يوجد دائماً وصلة الى قسم اللعبة. الا انه من الممكن ان لا توجد اية معلومات منشورة عن اللعبة عدى تاريخ صدورها، خاصة اذا كانت لم تصدر بعد. بالتالي، قد تدل هذه الوصلة الى قسم لا يقدم اية معلومات.
لنعدل هذا البرنامج مرة اخرى بحيث يعرض وصلة الى كل نوع من المقالات بدلاً من وصلة الى القسم نفسه.
وللحصول على عرض اكثر تماسكاً، لنبدأ بإنشاء واجهة على شكل سطور واعمدة (ونغتنم الفرصة لإلغاء وصلة هايبرتكست غير المرغوبة):
<B_out>
<table cellpadding="4">
<BOUCLE_out(ARTICLES){titre_mot=تاريخ_الصدور}{par date}{age < 0}>
<tr>
<BOUCLE_section_game(RUBRIQUES){id_rubrique}>
<td><b>#TITRE</b></td>
</BOUCLE_section_game>
<td align="center">
<BOUCLE_platform_game(MOTS){id_article}>
#LOGO_MOT
</BOUCLE_platform_game>
<//B_platform_game>
</td>
<td>[(#DATE|affdate)]</td>
</tr>
</BOUCLE_out>
</table>
</B_out>
لا تشكل هذه الاوامر اي صعوبة. سنشرح بسرعة كيفية وضع حلقات الجدول:
– تم وضع العلامتين <table> و</table> كنص اختياري في حلقة BOUCLE_out. بهذه الطريقة، اذا كانت لائحة الالعاب القادمة فارغة، لن يتم عرض <table></table>.
– توجد علامات <tr> و</tr> داخل الحلقة BOUCLE_out وتشمل كامل محتوى الحلقة، وتستخدم لإنشاء سطور الجدول.
– نضع في الحلقة BOUCLE_section_game علامات <td> و</td> مباشرة حول العنوان TITRE#. والحال اننا نعرف، كون المقال موجوداً داخل قسم، اننا سنحصل على نتيجة واحدة لا غير في الحلقة BOUCLE_section_game (فليس من الضروري وضع هذه العلامات في نص اختياري، وبما اننا لن نحصل على اكثر من نتيجة واحدة، يمكننا ان نكون داخل الحلقة).
– الامر يختلف بالنسبة للحلقة BOUCLE_platform_game: فعلامات <td align=”center”> و</td> توجد خارج الحلقة ولم يتم وضعها حتى في النص الاختياري. والسبب: (1) انها خارج الحلقة لأنه قد توجد اكثر من بيئة مناسبة لتاريخ الصدور (اي عدة مفاتيح بيئة مرتبطة بالمقال). فإذا وضعنا هذه العلامات داخل الحلقة كما فعلنا بغيرها، يفقد الجدول محاذاته لأننا هكذا ننشئ «خلايا» اضافية لدى كل شعار مفتاح جديد. (2) لم يتم وضع العلامات في النص الاختياري لأنها ليست علامات اختيارية، فإذا نسينا ذكر بيئة معينة لتاريخ الصدور يبقى وجود «الخانة» المناسبة لها ضروري حتى لو كانت فارغة للحفاظ على محاذاة الجدول. اخيراً، وضعنا علامة في النص الاختياري البديل: فإذا لم يكون هناك مفتاح بيئة مناسب لتاريخ الصدور، نعرض هذه المسافة الثابتة لكي نخلق محتوى في «الخانة» (ففي عدد من برامج التصفح، لن يتم عرض <td></td> مثل عرض <td> </td>.
سنعرض الآن، لكل لعبة لائحة باختباراتها (ندخل ذلك مباشرة قبل علامة </tr>):
<td>
<B_tests_game>
<b>الاختبار :</b>
<BOUCLE_tests_game(ARTICLES){id_rubrique}{titre_mot=إختبار}>
<br><a href="#URL_ARTICLE">#TITRE</a>
</BOUCLE_tests_game>
<//B_tests_game>
</td>
تستخدم الحلقة اساليب سبق وتم شرحها.
الا ان النتيجة لا تزال غير مرضية: فنعرض هنا كل الاختبارات لكل البيئات مع ان تاريخ الصدور لا يناسب بالضرورة كل اصدارات اللعبة (يمكننا هنا عرض تاريخ صدور نسخة دريم كاست بينما نكون قد نشرنا اختبارات لنسخات دريم كاست وويندوز وماكنتوش...).
بالتالي، نريد عرض الاختبارات التابعة للاصدارات المناسبة لتاريخ الصدور فقط. لقد نفذنا مهمة مشابهة في صفحة «article.html» لنعرض تواريخ الصدور للبيئات المناسبة للمقال المعروض فقط (حلقة BOUCLE_plat2):
<td>
<BOUCLE_plat2(MOTS){id_article}{type=البيئة}>
<BOUCLE_tests_game(ARTICLES){id_rubrique}{titre_mot=إختبار}>
<BOUCLE_verify_key(ARTICLES){id_article}{id_mot}>
<li><a href="#URL_ARTICLE">#TITRE</a>
</BOUCLE_verify_key>
</BOUCLE_tests_game>
</BOUCLE_plat2>
</td>
تسترجع الحلقة BOUCLE_plat2 لائحة ببيئات تاريخ الصدور. اما الحلقة BOUCLE_tests_game، فتسترجع مجمل اختبارات لعبة القسم (مهما كانت البيئة). بدورها تتأكد حلقة BOUCLE_verify_key ما اذا كان كل اختبار مسترجع بواسطة حلقة BOUCLE_tests_game مرتبطاً بالبيئة التي استرجعتها حلقة BOUCLE_plat2.
لقد حذفنا موقتاً كلمة «الاختبارات:» في النص الشرطي طلباً للوضوح. وهنا نعرض الفقرة البرمجية التي تتيح عرض هذه المعلومة (بالإضافة الى علامة ):
<td>
<B_plat2>
<b>الاختبارات:</b>
<BOUCLE_plat2(MOTS){id_article}{type=البيئة}><BOUCLE_tests_game(ARTICLES){id_rubrique}{titre_mot=إختبار}><BOUCLE_verify_key(ARTICLES){id_article}{id_mot}>
<li><a href="#URL_ARTICLE">#TITRE</a>
</BOUCLE_verify_key></BOUCLE_tests_game></BOUCLE_plat2>
<//B_plat2>
</td>
لاحظ ان الحلقات BOUCLE_plat2 وBOUCLE_tests_game وBOUCLE_verify_key صارت «ملتصقة» ببعضها ولم يعد يفصل بينها رجوع الى السطر او مسافات. والحال اننا نختبر «محتوى» حلقة BOUCLE_plat2 للتقرير ما اذا كنا نعرض عبارة «الاختبارات:» او مجرد مسافة ثابتة (النصوص الشرطية). فإذا كنا قد احتفظنا بالعودة الى السطر او بالمسافات بين الحلقات، فمهما كانت نتيجة حلقتي BOUCLE_tests_game وBOUCLE_verify_key، سيعتبر النظام ان هناك محتوى في حلقة BOUCLE_plat2 بسبب هذه العودة الى السطر او المسافات.
ولعرض لائحة بالاستعراضات، سنكرر هذه الفقرة البرمجية ونغيّر فقط اسماء الحلقات ونستبدل titre_mot=إختبار بـtitre_mot=إستعراض فنحصل على:
<td>
<B_plat3>
<b>الاستعراضات :</b>
<BOUCLE_plat3(MOTS){id_article}{type=البيئة}><BOUCLE_preview_game(ARTICLES){id_rubrique}{titre_mot=إستعراض}><BOUCLE_verify_key3(ARTICLES){id_article}{id_mot}>
<li><a href="#URL_ARTICLE">#TITRE</a>
</BOUCLE_verify_key3></BOUCLE_preview_game></BOUCLE_plat3>
<//B_plat3>
</td>
نضيف اخيراً حلقة للأخبار المتعلقة باللعبة. هنا لن نهتم بالبيئة لأن كل الاخبار معروضة في صفحة واحدة. لن نعرض اذاً عنوان TITRE# بل عبارة «الاخبار» مباشرة. وتربط وصلة هايبرتكست في الاخبار بالصفحة المحددة التي انشأناها لهذه اللعبة. لاحظ اخيراً المعيار {0,1} الذي يسمح باسترجاع خبر واحد فقط لخلق وصلة واحدة.
<td>
<BOUCLE_news_game(ARTICLES){id_rubrique}{0,1}{titre_mot=أخبار}>
<br><a href="news_game.php3?id_rubrique=#ID_RUBRIQUE">الاخبار</a>
</BOUCLE_news_game>
<//B_news_game>
</td>
لنكون شاملين، يجب تكرار هذه العمليات لإنشاء الحلول والنصائح. ولكن بما انه من المطلوب هنا عرض لائحة اصدارات، نعتبر ان هذه المعلومات غير مناسبة هنا . حتى لو من الناحية التقنية، استطعنا عرضها بسهولة، يبقى ان الخيار تحريري: هذه المعلومات غير مهمة هنا وقد تثقل الواجهة وبالتالي نفضل عدم عرضها (ولكن اذا اردت العكس، يمكنك ادخالها بنفسك).