كيفية عمل بنية Django MVT: استكشاف عميق في النماذج، والعروض، والقوالب

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

في قلب هندسته، نمط النموذج-العرض-القالب (MVT). فهم جيد لكيفية تفاعل النماذج والعروض والقوالب أمر حاسم إذا كنت تتطلع إلى استغلال كامل قوة ديجانج.

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

لجعل الأمور أكثر فهمًا، سنبني تطبيقًا بسيطًا لمساعدتك في فهم تفاعل هذه المكونات بشكل أفضل.

إذا كنت متحمسًا بالفعل، دعنا ننطلق مباشرة!

إليك ما سنغطيه:

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

• ما هي هندسة MVT؟

• مكون النموذج

• مكون العرض

• مكون القالب

• رسم بياني يظهر سير العمل MVT

• مقارنة واقعية لـ MVT

• دمج كل شيء في مشروع واحد

• الختام

المتطلبات المسبقة

لمتابعة، تحتاج إلى:

• فهم أساسي لكيفية عمل تطبيقات الويب، بما في ذلك هندسة العميل والخادم.

• معرفة أساسية بلغة Python.

ما هو هيكل MVT؟

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

لنلق نظرة سريعة على المكونات مع الوظائف المحددة التي تؤديها:

• النموذج: يُعرف أيضًا باسم طبقة البيانات، يدير البيانات ويتفاعل مع قاعدة البيانات.

• العرض: يُعرف أيضًا باسم طبقة المنطق، يعمل كوسيط، يتعامل مع المنطق، ويدير تدفق البيانات.

• القالب: يُعرف أيضًا باسم طبقة العرض، يقوم بعرض محتوى HTML على واجهة المستخدم.

الآن بعد أن لديك فكرة عن المكونات وأدوارها في تطبيق Django، سننظر بشكل موسع في كل مكون وكيفية تفاعلها في البنية.

مكون النموذج

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

تستخدم نماذج Django ميزة قوية تُعرف باسم Object-Relational Mapping (ORM)، التي تجسر الفجوة بين قاعدة بيانات علاقية وكود Python. تحول الأشياء Python (الفئات) إلى جداول قاعدة بيانات، وسماتها إلى أعمدة، والحالات إلى صفوف داخل تلك الجداول.

إحدى الميزات الهامة لـ ORM هي أنها تسمح لك بالتفاعل مع قاعدة البيانات باستخدام أشياء Python بدلاً من كتابة استعلامات SQL. فكر فيها كمترجم يحول لغة إلى أخرى ليفهم الجمهور. في هذه الحالة، يترجم ORM الكود Python إلى أوامر SQL التي يمكن لقاعدة البيانات تنفيذها، والعكس.

تقوم نماذج Django بتجميع جميع منطق قاعدة البيانات وتحديد هيكل قاعدة البيانات، حيث تعمل كنموذج أساسي للبيانات التي ترغب في تخزينها.

الشكل العام لنموذج Django

في Django، يتبع كل نموذج طريقة معينة للإعلان. إليك الهيكل الأساسي لإعلان النموذج:

class <model_name>(models.Model):
    <field_name> = models.<field_type>(<optional_field_characteristics>)

لنفكك ذلك:

• class: الكلمة الرئيسية المستخدمة لتعريف نموذج في Django.

• model_name: اسم النموذج.

• models.Model: الفئة الأساسية التي يورث منها نموذج الفئة.

• field_name: اسم عمود قاعدة البيانات.

• field_type: يشير إلى نوع البيانات التي يحتويها الحقل مثل charField، BooleanField وما إلى ذلك.

• optional_field_characteristics: تستخدم لتحديد كيفية سلوك الحقل بشكل أعمق، مثل max_length، default، وما إلى ذلك.

مثال على النموذج

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

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    completed = models.BooleanField(default=False)

في هذا النموذج:

• Task هو اسم النموذج.

• نموذج المهمة يحتوي على ثلاثة حقول:

  • title: CharField يحمل نصاً، بحد أقصى 100 حرف.

  • description: TextField لنص أطول.

  • completed: BooleanField يخزن قيمة True أو False، مع افتراضي False.

مكون العرض

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

يمكن كتابة العروض على أنها وظائف أو بناء على الفئات، اعتمادًا على تعقيد ومتطلبات تطبيقك.

الشكل العام لعرض Django

هنا هي الهيكل الأساسي لعرض:

def <view_name>(request):
    # توجد البيانات الخاصة بالعرض هنا...
    return render(request, <template>, <context>)

لنقم بتفكيكه:

• view_name: اسم وظيفة العرض.

• request: الطلب HTTP الذي يتم إرساله من قبل العميل إلى خادم Django، يمكن أن يتم تنشيطه من تقديم النماذج أو النقر على زر.

• return render: يستخدم لإنشاء استجابة HTML. يأخذ:

  • request: كائن الطلب، الذي يحتوي على معلومات حول الطلب الوارد.

  • template: ملف القالب الذي يجب عرضه.

  • context: يحتوي على المتغيرات التي يجب توفيرها في القالب، عادة ما يأتي في شكل قاموس.

عرض المثال

مواصلين مع قائمة المهام لدينا، هذا هو الشكل الذي ستبدو عليه واجهتنا:

def task_list(request):
    # المنطق هنا...
    return render(request, <template>, {'tasks': tasks})

عنصر القالب

قوالب Django مسؤولة عن تصيير الناتج النهائي بتنسيق HTML في المتصفح. تحدد كيفية عرض البيانات، باستخدام مزيج من HTML ولغة قوالب Django.

تتضمن لغة قوالب Django استخدام علامات القالب {% %} ومتغيرات القالب {{ }} التي تتيح لك الدخول في وضع Django في قالب HTML الخاص بك. في هذا الوضع، يمكنك الوصول إلى المتغيرات المحددة في العروض الخاصة بك واستخدام هياكل التحكم داخل القالب.

يمكن أيضًا تنسيق القوالب باستخدام CSS أو أي من أطر CSS المفضلة لديك لجعل واجهة المستخدم أكثر جاذبية.

مثال على القالب

قالبنا هو ملف HTML عادي مع لغة قوالب Django. إليك كيف ستبدو قالب قائمة المهام لدينا:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Task List</h1>
    <ul>
        {% for task in tasks %}
            <li>{{ task.title }} - {{ task.completed|yesno:"Done,Not Done" }}</li>
        {% empty %}
            <p>No tasks available.</p>
        {% endfor %}
    </ul>
</body>
</html>

في هذا القالب:

• حلقة for تتكرر عبر كل مهمة في قائمة المهام (تذكر أنه تم تمريرها كسياق في العروض الخاصة بنا).

• لكل مهمة، يتم إخراج title للمهمة وحالتها completed (إما “تم” أو “لم يتم”).

• إذا كانت قائمة tasks فارغة، فإن كتلة {% empty %} تعرض رسالة بديلة تقول “لا توجد مهام متاحة.”

رسم توضيحي يوضح سير عمل MVT

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

تشبيه من العالم الحقيقي لـ MVT

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

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

جمع كل ذلك معًا في مشروع

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

تثبيت بايثون

أولاً، تأكد من أنك قد قمت بتثبيت بايثون. يمكنك زيارة الموقع الرسمي لبايثون لتحميل أحدث إصدار من بايثون.

إعداد مشروع ودالة جانغو

بعد ذلك، قم بتثبيت جانغو. يمكنك تثبيته باستخدام pip:

pip install django

أنشئ مجلدًا وافتحه في محرر الشيفرة المفضل لديك.

أنشئ مشروع جانغو ودالة جديدة عن طريق تشغيل الأوامر التالية في الطرفية الخاصة بك، واحدة تلو الأخرى:

django-admin startproject myproject 
cd myproject
django-admin startapp myapp

تعريف النموذج

في ملفك myapp/models.py:

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    completed = models.BooleanField(default=False)

إنشاء نموذج

نحتاج إلى نموذج جانغو يعتمد على نموذج المهمة، لذا سنقوم بإنشاء واحد باستخدام نموذج النموذج الخاص بجانغو.

في myapp، أنشئ ملفًا، وسميه forms.py، وأدخل هذا الرمز:

from django import forms
from .models import Task

class TaskForm(forms.ModelForm):
    class Meta:
        model = Task
        fields = ['title', 'description', 'completed']

في هذا الرمز:

• Task يتم استيراده من .models.

• class TaskForm(forms.ModelForm): هذا ينشئ فئة جديدة تسمى TaskForm، وهي فئة فرعية من forms.ModelForm.

• class Meta:: هي فئة خاصة تستخدمها ModelForm في Django لتوفير تكوين للنموذج. تخبر فئة Meta Django كيفية إنشاء النموذج عن طريق تحديد النموذج المرتبط والحقول المراد تضمينها في النموذج.

• model = Task: تحدد النموذج الذي يستند إليه النموذج. في هذه الحالة، يعتمد النموذج على نموذج Task.

• fields = ['title', 'description', 'completed']: تحدد الحقول التي يجب تضمينها من نموذج Task في النموذج. يتيح لك هذا التحكم في الحقول التي تظهر في النموذج، ويمكن تخصيصه لتضمين فقط بعض الحقول، بدلاً من جميع الحقول في النموذج.

إنشاء العرض

في myapp/views.py الخاص بك، ضع هذا الكود:

from django.shortcuts import render,redirect
from .models import Task
from .forms import TaskForm

def task_list(request):
    tasks = Task.objects.all()    # استرداد جميع المهام

    if request.method == 'POST':    # التعامل مع تقديم النماذج
        form = TaskForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('task_list')  # إعادة توجيه لتجنب تقديمات مكررة
    else:
        form = TaskForm()

    # تمرير المهام والنموذج إلى القالب
    return render(request, 'task_list.html', {'tasks': tasks, 'form': form})

في هذا العرض،

• TaskForm يتم استيراده من forms.

• الكود يتحقق مما إذا كانت طريقة الطلب POST، مما يدل على أن المستخدم قد قدم نموذجًا.

• إذا كانت الطريقة POST، يتم إنشاء نسخة من TaskForm باستخدام البيانات المُقدمة (request.POST).

• ثم يتم التحقق من صحة النموذج باستخدام form.is_valid()، وإذا كان صالحًا، يتم حفظ النموذج في قاعدة البيانات.

• بعد الحفظ، يتم توجيه المستخدم إلى صفحة قائمة المهام لمنع التقديم المكرر.

تعريف النموذج

في دليل myapp الخاص بك، قم بإنشاء مجلد templates. داخل مجلد القوالب، قم بإنشاء ملف واسمه task_list.html. نحتاج إلى إضافة عنصر نموذج يجمع بين مدخلات المستخدم ويعرضها في قائمة على واجهة المستخدم.

في ملف HTML task_list، لدينا:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Task List</h1>
    <ul>
        {% for task in tasks %}
            <li>{{ task.title }} - {{ task.completed|yesno:"Done,Not Done" }}</li>
        {% empty %}
            <p>No tasks available.</p>
        {% endfor %}
    </ul>

    <h2>Add a New Task</h2>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Add Task</button>
    </form>
</body>
</html>

في رمز النموذج المضاف:

• قمنا بإنشاء نموذج HTML بالطريقة POST لتقديم البيانات. يتضمن {% csrf_token %} لحماية ضد هجمات CSRF.

• تم عرض حقول النموذج باستخدام {{ form.as_p }}، الذي يعرض كل حقل ضمن علامة <p>.

• وأخيرًا، تم توفير زر إرسال بعنوان “إضافة مهمة”، مما يتيح للمستخدم تقديم بيانات النموذج.

هيكل المجلدات

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

└── 📁myproject
    └── 📁myapp
        └── 📁__pycache__
        └── 📁migrations
        └── 📁templates
            └── task_list.html
        └── __init__.py
        └── admin.py
        └── apps.py
        └── forms.py
        └── models.py
        └── tests.py
        └── urls.py
        └── views.py
    └── 📁myproject
        └── 📁__pycache__
        └── __init__.py
        └── asgi.py
        └── settings.py
        └── urls.py
        └── wsgi.py
    └── db.sqlite3
    └── manage.py

تكوين عنوان المشروع

في ملف myproject/urls.py الخاص بك، ضمن عنوان الموقع URL في myapp الخاص بك:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls')),
]

أضف التطبيق إلى إعدادات المشروع

أضف myapp الخاص بك إلى قائمة التطبيقات المثبتة في ملف myproject/settings.py الخاص بك:

INSTALLED_APPS = [
    'myapp',      # أضفنا تطبيق myapp الخاص بنا
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

قم بتشغيل الخادم

قم بتطبيق التحويلات وتشغيل الخادم عن طريق إدخال هذه الأوامر:

python manage.py migrate

python manage.py runserver

قم بزيارة http://127.0.0.1:8000/ في متصفحك لاختبار تطبيقك.

المظهر النهائي

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

الاستنتاج

في هذه المقالة، تعرفت على المكونات في تركيبة Django’s MVT، كيف تتفاعل مع بعضها البعض، وكيف تجعل تجربة الويب سلسة. كما بنينا مشروعًا بسيطًا لنرى كيف يعمل عمليًا، وآمل أن تفهمه الآن بشكل أفضل.

إذا استمتعت بقراءة هذه المقالة، يمكنك متابعتي على X أو التواصل معي على LinkedIn لمزيد من المقالات والمشاركات حول البرمجة.

أراك في المقالة القادمة!