انطلاقة سريعة مع محرك القوالب تويغ

سوف نتحدث في هذا المقال عن طريقة تثبيت تويغ وعن الصيغ الثلاث المستخدمة في بناء قوالب تويغ بالاضافة إلى عدد من المفاهيم الأساسية

متطلبات تويغ للعمل

يمكن استعمال بيئة عمل سحابية على الويب أو بيئة عمل محلية على الحاسوب مباشرة:

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

تثبيت تويغ

يتوفر خياران لتثبيت تويغ وهو إما التثبيت المباشر من خلال تنزيله وتركيبه يدويًا أو من خلال كومبوزر composer وسنشرح كلا الطريقتين تاليًا.

التثبيت المباشر

1. تحميل الإصدار الأخير من تويغ وذلك من خلال الرابط التالي أو من خلال GitHub
2. فك المجلد المضغوط السابق على الحاسوب المحلي ثم افتح المجلد الناتج وهو Twig-3.x في حالتي الآن أثناء كتابة المقال
3. في داخل المجلد السابق يوجد مجلد اسمه src أعد تسميته إلى Twig ثم قم برفعه إلى المجلد العام www أو public_html في الاستضافة الخاصة بك.
4. في المجلد public_html لموقعك أنشئ ملفًا باسم index.php وأضف له النص التالي

ini_set('display_errors',1); # comment if you do not need debugging
spl_autoload_register(function ($classname) {
    $dir = '.';
    $filename = $dir . str_replace('\\', '/', $classname) .'.php';
    if (file_exists($filename)) require_once $filename;
});
require_once '\Twig\Loader\FilesystemLoader.php';

كل ما سبق من خطوات يمكن اختصارها في حال التركيب من خلال composer

التثبيت بواسطة composer

ثبت Composer وشغل الأمر التالي في الطرفية من أجل الحصول على الإصدار الأخير:

composer require "twig/twig"

البدء باستخدام تويغ

أصبح تويغ جاهز الآن ويمكنك تجريبه بالشكل التالي، أضف السطور التالية على ملف index.php الذي أنشأته عند تركيب تويغ بدون استخدام composer أو على ملف index.php فارغ في حال استخدام composer:

$loader = new \Twig\Loader\FilesystemLoader('.');
$twig = new \Twig\Environment($loader);
echo $twig->render('template1.twig', [‘name’ => 'سامر']);

في ذات المجلد public_html أنشئ ملفًا آخر باسم template1.twig واكتب العبارة التالية فيه:

مرحبا بالطالب المجد {{ name }}

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

مرحبا بالطالب المجد {{ name }}

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

بنية قالب تويغ وصيغ التعبيرات فيه

لفهم تويغ يتوجب علينا معرفة دلالة ثلاث صيغ فقط هي {{ }}، {% %}، {# #} سنشرحها بالترتيب:

1- صيغة إخراج المتغيرات وإظهار النتائج

الصيغة الأولى المهمة من صيغ Twig التي عليك تعلمها هي:

{{ }}

تستخدم هذه الصيغة لإظهار نتيجة ما للمستخدم مثلا قيمة متغير أو ناتج دالة ما.

المتغيرات في القالب هي أي شيء تريد تريد تبديله حسب إدخالات المستخدم أو حسب البيانات المقدمة للقالب يمكن أن يكون عنوان المقال أو اسم المستخدم أو رقم هاتفه أو أي شيء آخر.

لإخراج أي متغير في القالب يكفي أن يتم وضع اسم المتغير بين قوسين مقوسين على النحو التالي:

{{ name }}
{{ foo.bar }}

انتبه من المثال أنه يمكن استخدام النقطة (.) للوصول إلى عناصر المصفوفة أو خصائص كائن ما.

لمعرفة المزيد عن المتغيرات في تويغ يمكن زيارة قسم المتغيرات من صفحة محرك تويغ لمصممي القوالب في موسوعة حسوب.

2- صيغة التعليقات

من المهم في كثير من الأحيان أن نكتب ملاحظة لكننا لا نريدها أن تظهر في المستند المنسق ولتحقيق ذلك يكفي أن نكتب تلك الملاحظة أو التعليق بالصياغة التالية:

{# ملاحظة #}

لمعرفة المزيد عن الملاحظات في تويغ يمكن زيارة قسم التعليقات من صفحة محرك تويغ لمصممي القوالب في موسوعة حسوب.

3- صيغة افعل شيئا ما

يستخدم التركيب التالي:

`{% ...... %}

للطلب من محرك القالب القيام بشيء محدد مثل التحقق من شرط ما أو تنفيذ تكرار ما. لا يظهر التركيب السابق نتائج للمستخدم لفم التركيب السابق بشكل جيد سوف نأخذ مثالين هما if و for.

الشروط والحالات الشرطية

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

{# كل شرط يبدأ بالتركيب التالي #}
{% if mark > 90 %}
     Hello smart student {{ name }}
    {# كل شرط ينتهي بالتركيب التالي #}
{% endif %}
{# لاحظ أن العبارة الأخيرة هي كلمة واحدة #}

في السطر الأول يتحقق تويغ من علامة الطالب التي يمثلها المتغير mark فإن كانت أكثر من 90 فإنه ينتقل للسطر التالي حيث يظهر رسالة الترحيب أما السطر الأخير endif فهو يغلق الشرط.

كما أنه يمكن أن تتحقق عبارة if في Twig مما إذا كان للمتغير قيمة ما حيث يمكننا إضافة شروط لعرض أي نص. لنفترض أن لدينا متغيرا باسم agent ونريد عرض نص عندما يحتوي على نص، يمكننا تمثل ذلك بالمثال التالي:

{% if agent %}
    We have an agent in your area
    Our agent: {{ agent }}
{% endif %}

مثال آخر؛ دعنا نقول أن لدينا متغير يسمى السعر. نريد عرض نص إذا كان السعر صفرًا.

{% if price == 0 %}
    This product is free 
{% elseif price > 10 %} 
   This product is cheap  
{% else %}
   You have to pay {{ price }}
{% endif %}

يرجى ملاحظة أننا نستخدم العامل التالي == للتحقق من المساواة وأننا يمكننا التحقق من أكثر من حالة للشرط باستعمال elseif ووضع حالة أخيرة للشرط إن لم تتحقق أي حالة من الحالات السابقة عبر else.

استخدم دائمًا {% endif %} لإغلاق شرط if السابق، فكل عبارة if يجب أن تغلقها عبارة endif.

للمزيد من المعلومات عن استخدام اطلع على صفحة الوسم if في توثيق تويغ العربي.

الحلقات التكرارية وتكرار أمر ما

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

{% for name in names_list %}
   Hello: {{ name }}
{% endfor %}

حيث names_list هو اسم المصفوفة أما name فهو اسم تم إطلاقه على كل عنصر من عناصر المصفوفة.

في السطر التالي يتم تنفيذ الأوامر التي بين for وبين edfor على كل عناصر المصفوفة وبالتالي في مثالنا السابق تظهر عبارة ترحيب لكل اسم من الأسماء التي تحتويها المصفوفة، أما السطر الأخير فهو لإغلاق الحلقة وإعلام محرك القالب أن عليه المتابعة بشكل اعتيادي لباقي تعليمات القالب اي أن التعليمات التي تأتي بعد {% endfor %} لن تكون خاصة بالحلقة.

كل عبارة for يجب حتما أن تنتهي بعبارة {% endfor %} ويرجى ملاحظة أن endfor هي كلمة واحدة وليس كلمتين.

ماذا بعد؟

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

نقدم لك فيما يلي نموذج لقالب تويغ لعرض قائمة منتجات مع سعرها:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Products</title>
</head>
<body>
<h1>Products</h1>
{# This is a comment and will not render #}
{% for product in products %}
        Product name: {{ product.name }}<br>
        {% if product.price == 0 %}
              Free 
       {% else %}
             Procust price {{ product.price }}
      {% endif %}
{% endfor %}
</body>
</html>

الخلاصة

لقد تحدثنا في هذا المقال عن طريقة تثبيت تويغ مع وبدون استخدام composer ثم انتقلنا إلى بنية قالب تويغ وصيغ التعبيرات فيه: صيغة إخراج المتغيرات وإظهار النتائج، صيغة التعليقات و صيغة افعل شيئا ما ثم تحدثنا عن العبارات الشرطية وعن حلقات التكرار

في المقال التالي سوف نتعمق أكثر ونتحدث عن الوسوم، المرشحات، والاختبارات.