كيفية إنشاء عرض Django لتطوير الويب

مقدمة

إذا كنت تتابع سلسلة تطوير Django، فقد نجحت في إنشاء تطبيق Django يتيح للمستخدمين ذوي صلاحيات المسؤول إضافة تعليقات ومنشورات عبر لوحة معلومات واجهة إدارة Django. كما قمتَ بإعداد ثبات البيانات باستخدام نماذج حلول تعيين العلاقات الكائنية من Django وMySQL.

في هذا البرنامج التعليمي، سننشئ عروض Django التي تُمكّن تطبيق الويب الخاص بنا من معالجة طلبات الويب بشكل صحيح وإرجاع استجابات الويب المطلوبة. وكما هو مُعرّف في وثائق Django، يمكن أن تكون استجابة الويب محتوى HTML لصفحة ويب، أو إعادة توجيه، أو خطأ HTTP (مثل 404). يمكن أن يوجد كود دوال العرض في أي مكان في مشروعك، طالما أنه موجود في مسار Python. ومع ذلك، هناك بعض القواعد الشائعة لتسمية ووضع الملف الذي يحتوي على دوال العرض هذه، وسنتبع الخطوات التالية.

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

المتطلبات الأساسية

يعد هذا البرنامج التعليمي جزءًا من سلسلة تطوير Django ويعد استمرارًا لهذه السلسلة.

إذا لم تكن تتابع هذه السلسلة، فإننا نفترض ما يلي:

• لقد قمت بتثبيت Django الإصدار 4 أو أعلى.
• لقد قمت بتوصيل تطبيق Django الخاص بك بقاعدة البيانات.
• أنت تعمل مع نظام تشغيل قائم على Unix، ويفضل أن يكون خادم سحابي Ubuntu 22.04 لأن هذا هو النظام الذي قمنا باختباره.
• لقد قمت بإعداد واجهة إدارة Django الخاصة بك.

نظرًا لأن هذا الدليل يتعامل بشكل أساسي مع وجهات نظر Django، فقد تتمكن من متابعته حتى إذا كان لديك إعداد مختلف.

الخطوة 1 - إنشاء وظائف العرض

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

cd ~/my_blog_app
. env/bin/activate

الآن بعد أن تم تمكين البيئة الافتراضية الخاصة بك، دعنا ننتقل إلى دليل المدونة الخاص بالموقع، حيث سنفتح ملف Python وننشئ وظيفة العرض الأولى الخاصة بنا.

cd ~/my_blog_app/blog/blogsite

افتح ملف views.py لتحريره باستخدام nano أو محرر النصوص المفضل لديك.

nano views.py

بعد فتح الملف، يجب أن يتم ملؤه بالكود المشابه لهذا:

from django.shortcuts import render
# Create your views here.

نحتفظ بعبارة الاستيراد التي تستورد دالة render() من مكتبة django.shortcuts. تتيح لنا دالة render() دمج قالب ونص لإرجاع كائن HttpResponse المناسب. تذكر هذا، لأنه مع كل عرض نكتبه، نكون مسؤولين عن إنشاء مثيل HttpResponse وتعبئته وإرجاعه.

بعد ذلك، سنضيف أول عرض يرحب بالمستخدمين في صفحة الفهرس. سنستورد دالة HttpResponse() من مكتبة Django http. باستخدامها، سنرسل نصًا لعرضه عند طلب صفحة الويب.

from django.shortcuts import render
from django.http import HttpResponse
def index(request):
return HttpResponse('Hello, welcome to the index page.')

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

...
def individual_post(request):
return HttpResponse('Hi, this is where an individual post will be.')

سيبدو ملف views.py النهائي الخاص بنا الآن بهذا الشكل.

from django.http import HttpResponse
from django.shortcuts import render
def index(request):
return HttpResponse('Hello, welcome to the index page.')
def individual_post(request):
return HttpResponse('Hi, this is where an individual post will be.')

عند الانتهاء من تحرير الملف، تأكد من الحفظ والخروج. في نانو، يمكنك الضغط على CTRL وX، ثم Y، ثم ENTER.

حاليًا، لا يوجد عنوان URL محدد تشير إليه هذه الدوال، لذا نحتاج إلى إضافته إلى كتلة أنماط عناوين URL في ملف تكوين عناوين URL. بعد إضافة العروض، لنربطها بعناوين URL عبر ملف التكوين هذا لنتمكن من عرض الصفحات التي أنشأناها.

الخطوة 2 – إظهار عناوين URL للمشاهدات

باستخدام Django، يمكننا تصميم عناوين URL خاصة بنا لاستخدامها في تطبيقنا. يتم ذلك بلغة بايثون الصرفة باستخدام ملف يُعرف عادةً باسم URLconf أو ملف "تكوين عنوان URL".

لعرض صفحة ويب، يجب على Django أولاً تحديد وحدة URLconf الجذرية المُراد استخدامها، ثم البحث عن أنماط عناوين URL، وهي عبارة عن قائمة بيانات تحتوي على جميع أنماط عناوين URL. بعد ذلك، يفحص Django كل نمط عنوان URL حتى يجد أول تطابق. عند العثور على تطابق، يبحث Django عن العرض المرتبط به، وتستقبل دالة العرض هذه بيانات نمط عنوان URL وكائن HttpRequest. في حال حدوث أي عطل في أي مرحلة من هذه العملية، يتم عرض عرض لمعالجة الأخطاء بدلاً من ذلك.

في هذا القسم، سنعمل مع ملفين مختلفين من نوع urls.py في دليلين مختلفين من تطبيقنا.

بعد الوصول إلى المجلد ~/my_blog_app/blog/blogsite، افتح ملف urls.py - المعروف أيضًا باسم ملف URLconf - لتحريره. هنا سنستخدم nano لتحرير الملف.

nano urls.py

قم بتعديل الملف بحيث يبدو مثل الملف أدناه مع قائمة أنماط عنوان URL.

from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('post/', views.individual_post, name='individual_post')
]

بمجرد الانتهاء من إضافة الأسطر أعلاه، احفظ الملف وأغلقه.

عند تحديث ملف URLconf الخاص بمجلد المدونة، نضعه في مجلد المدونة، وإلا فلن يتم التعرف عليه. نحتاج إلى القيام بذلك لأنه مُعيَّن كـ ROOT_URLCONF في ملف التكوين. هذا يعني أن Django سيبحث في مجلد المدونة عن أنماط عناوين URL.

لتضمين URLconf للمدونة الخاصة بك في URLconf للمدونة الخاصة بك، تحتاج إلى الانتقال إلى هذا الدليل.

cd ~/my_blog_app/blog/blog

بمجرد وصولك إلى هناك، يمكنك فتح ملف URLconf باستخدام nano أو أي محرر نصوص آخر من اختيارك.

nano urls.py

في هذا الملف، نضيف الأسطر التالية لتضمين الملف /blogsite/urls.py الذي عملنا عليه للتو، والذي يظهر في السطر الثاني.

from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('blogsite.urls'))
]

احفظ الملف وأغلقه.

الآن، لنفتح متصفح ويب للوصول إلى عناوين URL التي أنشأناها، والتأكد من أنها تعرض النص الذي أضفناه إلى العروض. نحتاج إلى الانتقال إلى المجلد الرئيسي للوصول إلى ملف manager.py الذي يوفر تطبيق Django.

cd ..

أصدر الأمر التالي. يمكنك استبدال 0.0.0.0 بعنوان IP الخاص بك أدناه.

python manage.py runserver 0.0.0.0:8000

في متصفح الويب الخاص بك، انتقل إلى عنوان IP الخاص بك، المنفذ 8000:

your-server-ip:8000

ستحصل على صفحة ويب مشابهة لما يلي:

ثم اذهب إلى العنوان التالي:

your-server-ip:8000/post/

من هنا يجب أن تظهر صفحة الويب التالية:

الآن بعد أن تأكدنا من أن ملفي urls.py يعملان وأن البيانات تُظهر لنا بالضبط ما نتوقعه، فلنضف بعض البيانات الحقيقية إلى مدونتنا.

الخطوة 3 – إنشاء منشور مدونة

الآن بعد أن فهمت أساسيات كيفية عمل أنماط عناوين URL وعرضها، دعنا نضيف منشور مدونة ونعرضه على صفحة ويب بدلاً من النص الذي قمنا بترميزه في ملفات Python.

سننشئ منشورًا عبر صفحة الإدارة التي أنشأناها سابقًا. أثناء تشغيل خادمك لتطبيق Django، استخدم متصفح الويب للانتقال إلى صفحة إدارة المدونة على العنوان التالي:

your-server-ip:8000/admin/blogsite/

في الواجهة، انقر فوق الرابط + إضافة الموجود في صف المنشورات لملء قاعدة البيانات بمنشور مدونة نموذجي.

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

لإضافة منشور، تفضل بزيارة هذه الصفحة. كما يمكنك تعديل المنشورات باستخدام رابط التعديل.

في النموذج، يمكنك تحرير الحقول التالية:

• عنوان:أضف عنوان تدوينة مدونتك المفضل هنا، على سبيل المثال تدوينتي الأولى.
• SLUG: يشير هذا إلى جزء عنوان URL الذي يُحدد عنصر عنوان ويب صالحًا يحتوي على كلمات رئيسية سهلة القراءة. عادةً ما يُؤخذ هذا من عنوان الصفحة، لذا في هذه الحالة، يمكننا استخدام my-first-blog-post.
• المحتوى: هذا هو نص تدوينتك. سنضيف فقط عبارة "أهلاً بالعالم!" لأغراض هذا المثال، ولكن هنا يمكنك الإطالة.
• المؤلف: أضف اسمك أو اسم المستخدم هنا. سنستخدم سامي.

قم بملء نموذج تدوينة المدونة بالشكل الذي تراه مناسبًا لأغراض الاختبار الخاصة بك.

بعد إضافة بيانات العينة إلى الصفحة، انقر على زر "حفظ". ستظهر لك صفحة التأكيد التالية:

مبروك! لقد أنشأت أول تدوينة لك!

الآن، دعنا نتحقق من إضافة صف إلى قاعدة بيانات MySQL يحتوي على البيانات التي أدخلناها للتو في واجهة الإدارة.

الخطوة 4 - عرض بيانات قاعدة البيانات

في هذه المرحلة، نحتاج إلى الانتقال إلى MySQL، لذا أوقف عملية الخادم الحالية عبر الطرفية بالضغط على CTRL + C، ثم افتح مُفسّر MySQL. اسم المستخدم لقاعدة بيانات تطبيق Django هو djangouser، ولكن تأكد من استخدام اسم المستخدم المناسب لمشروعك.

mysql -u djangouser

بمجرد وصولك إلى موجه MySQL، انتقل إلى قاعدة بيانات blog_data (أو أي قاعدة بيانات مناسبة لمشروعك):

use blog_data;

ثم قم بعرض محتويات جدول blogsite_post.

select * from blogsite_post;

سوف تحصل على إخراج مشابه للإخراج الموضح أدناه، والذي يجب أن يعرض المعلومات التي أضفتها إلى واجهة المسؤول.

Output
+----+--------------------+--------------------+---------------+----------------------------+--------+
| id | title | slug | content | created_on | author |
+----+--------------------+--------------------+---------------+----------------------------+--------+
| 1 | My First Blog Post | my-first-blog-post | Hello, World! | 2020-05-14 00:30:03.186564 | Sammy |
+----+--------------------+--------------------+---------------+----------------------------+--------+
1 row in set (0.00 sec)

كما هو موضح في المخرجات، يوجد صفٌّ ببيانات المنشور التي أضفناها. الآن، لنُرجع هذه البيانات إلى دالة عرض المنشورات. استخدم CTRL + D للخروج من مُفسِّر MySQL.

انتقل إلى موقع ملف views.py داخل تطبيق مدونة موقعك.

cd ~/my_blog_app/blog/blogsite

الآن افتح الملف حتى نتمكن من إضافة معلوماتنا الجديدة.

nano views.py

قم بتعديل الملف مثل الملف الموضح أدناه.

from django.shortcuts import render
from django.http import HttpResponse
from .models import Post
def index(request):
return HttpResponse('Hello, welcome to the index page.')
def individual_post(request):
recent_post = Post.objects.get(id__exact=1)
return HttpResponse(recent_post.title + ': ' + recent_post.content)

في الكود أعلاه، أضفنا عبارة استيراد إضافية للمنشور. كما حذفنا السلسلة المقتبسة من استجابة HttpResponse واستبدلناها ببيانات منشور المدونة. للإشارة إلى بيانات كائن محدد، نستخدم مُعرّف منشور المدونة المرتبط بالكائن الذي نريد عرضه، ونخزنه في متغير يُسمى last_post. يمكننا بعد ذلك استرداد حقول محددة من هذا الكائن بإضافة فاصل نقطي إلى الحقل.

بعد حفظ الملف وإغلاقه، انتقل إلى موقع ملف manager.py لتشغيل تطبيق Django.

cd ~/my_blog_app/blog
python manage.py runserver 0.0.0.0:8000

من متصفح الويب، انتقل إلى العنوان التالي:

your-server-ip:8000/post/

هنا، سنرى التغييرات التي أجريناها. ستبدو الصفحة مشابهةً لهذا، وستعرض النص الذي أضفته إلى المنشور.

عند الانتهاء من فحص الصفحة، اضغط على CTRL + C في المحطة الطرفية لإيقاف عملية التنفيذ.

لتعطيل بيئة التطوير الخاصة بك، يمكنك كتابة الأمر disable ثم تسجيل الخروج من الخادم.

نتيجة

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

سيتناول الدرس التالي كيفية إنشاء قالب Django أكثر جمالاً باستخدام HTML. حتى الآن، تناولت هذه السلسلة نماذج Django وعروض Django. تُعد القوالب آخر جزء مهم في بناء تطبيقات Django.