التمرين - إنشاء القوالب
دعنا نقُم بإنشاء قالبين لعرض قائمة من الملاجئ، وصفحة تحتوي على تفاصيل لكل ملجأ. سنقوم أيضاً بإنشاء قالب أساسي لضمان الاتساق عبر تطبيقنا.
إنشاء قالب أساسي
يُعد القالب الأساسي شائعاً لجميع مشاريع Django. سنبدأ بإنشاء واحد.
في Visual Studio Code، قم بإنشاء مجلد جديد داخل dog_shelters باسم القوالب.
قم بإنشاء ملف جديد داخل القوالب باسم base.html.
أضف HTML التالي إلى base.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}Dog shelter site{% endblock %}</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> </head> <body> <article class="container"> <section class="jumbotron"> <h3>Dog shelter application</h3> </section> {% block content %} {% endblock %} </article> </body> </html>إشعار
نحن نستخدم إصدار 4.6 من Bootstrap لموقعنا. نحن لسنا بحاجة هنا إلى دراسة Bootstrap على الرغم من ذلك. نحن نستخدم فئة واحدة فقط، jumbotron. بخلاف ذلك، نحن نستخدم HTML الأساسي.
لاحظ العبارتين {% block %}، إحداهما للعنوان والأخرى للمحتوى الذي ستوفره الصفحات الفرعية. نحن نوفر قيمة افتراضية لـ title، التي تضمن أنه سيكون لدينا دائماً أحد العناوين إذا لم تقم الصفحة الفرعية بتعيينه.
إنشاء قالب قائمة الملاجئ
سنقوم الآن بإنشاء قالب آخر لإدراج جميع الملاجئ. سنقوم بالتكرار الحلقي عبر قائمة الملاجئ وإنشاء روابط لتفاصيل جميع الملاجئ.
في dog_shelters/templates، قم بإنشاء ملف جديد باسم shelter_list.html.
أضف التعليمات البرمجية التالية لإنشاء القالب لقائمة الملاجئ لدينا:
{% extends 'base.html' %} {% block title %} Shelter list {% endblock %} {% block content %} <h2>Shelter list</h2> <div>Here is the list of registered shelters</div> {% for shelter in shelters %} <div> <a href="{% url 'shelter_detail' shelter.id %}"> {{shelter.name}} </a> </div> {% endfor %} </div> {% endblock %}
نحن نستخدم علامات block لتوضيح المكان الذي نريد أن نضع فيه معلوماتنا. نحن نحدد قيمة title لـ Shelter list، وستكون العناصر content هي القائمة الخاصة بالملاجئ.
نستخدم أيضاً علامة جديدة، url. تقوم العلامة url بإنشاء URL ديناميكياً. يتم تسجيل عناوين URL الخاصة بنا في URLconf لدينا، حتى يمكنها أن تتغير. باستخدام العلامة url، يمكننا إخبار Django باستعادة عنوان URL من URLconf بدلاً من التعليمات البرمجية المضمنة في أحد المسارات.
تبحث العلامة url عن الاسم الخاص بالمسار، أي shelter_detail في هذه الحالة، وبعد ذلك قائمة لأي معلمات متوقعة. يحتوي shelter_detail على معلمة واحدة، pk. هذا هو المفتاح الأساسي، أو المعرف الخاص بالملجأ. نحد نحدد المعرف باستخدام shelter.id.
إنشاء قالب تفاصيل الملجأ
نظراً لإنشاء قالب القائمة الخاص بنا، يمكننا الآن إنشاء قالب التفاصيل.
فيdog_shelters/templates، قم بإنشاء ملف جديد باسم shelter_detail.html.
أضف التعليمات البرمجية التالية لإنشاء القالب:
{% extends 'base.html' %} {% block title %} Shelter list {% endblock %} {% block content %} <h2>{{ shelter.name }}</h2> <div>Located in {{ shelter.location }}</div> {% if shelter.dog_set.all %} <div>Here is the list of available dogs</div> {% for dog in shelter.dog_set.all %} <div> <a href=""> {{dog.name}} </a> </div> {% endfor %} </div> {% else %} <div>This shelter has no dogs available for adoption</div> {% endif %} {% endblock %}
لاحظ أن في النص الأساسي، نحن نقوم بالتحقق لمعرفة إذا كان يوجد أي كلاب داخل الملجأ باستخدام if shelter.dog_set.all. إذا كان هناك كلاب، نقوم بعرض القائمة باستخدام for لإجراء التكرار الحلقي عبر جميع الكلاب. بخلاف ذلك، نعرض رسالة تقول إنه لا توجد كلاب متاحة. سنقوم بتحديث الرابط في إحدى الوحدات اللاحقة.
إشعار
قد تلاحظ أننا نقوم بإجراء استدعاءين إلى shelter.dog_set.all. إذا كنت من ذوي الخبرة مع قواعد البيانات وتعيين الكائنات الارتباطية (ORM)، فقد تشعر بالقلق من أننا أجرينا اثنين من الاستدعاءات إلى قاعدة البيانات. عادةً ممكن أن يؤدي إجراء استدعاءين إلى التأثير سلباً على الأداء. يحتوي Django على تخزين مؤقت مضمن، والذي سيضمن إجراء استدعاء واحد فقط إلى قاعدة البيانات.
اختبار الموقع
نظراً لإنشاء القوالب الخاصة بنا، يمكننا أن نرى موقعنا أثناء العمل!
احفظ جميع الملفات.
افتح المستعرض وانتقل إلىhttp://localhost:8000.
ينبغي أن تظهر الآن قائمة الملاجئ.
حدد "Contoso".
تظهر الآن قائمة الكلاب لملجأ Contoso.
