البدء مع Django: بناء أول تطبيق ويب

دليل تفاعلي خطوة بخطوة للمبتدئين تمامًا

الوقت المقدر: 90 دقيقة

1. مقدمة إلى Django

ما هو Django؟

Django هو إطار عمل ويب عالي المستوى بلغة Python يشجع على التطوير السريع والتصميم النظيف العملي. إنه يهتم بالكثير من متاعب تطوير الويب، مما يتيح لك التركيز على كتابة التطبيق دون الحاجة لإعادة اختراع العجلة.

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

لماذا Django؟

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

هيكلية Django

يتبع Django نمط العمارة Model-View-Template (MVT)، وهو نسخة معدلة من نمط Model-View-Controller (MVC):

Model

هيكل البيانات وقاعدة البيانات

View

منطق العمل ومعالجة البيانات

Template

منطق العرض وإظهار المحتوى

URLs

التوجيه والتعيين

اختبار سريع: أساسيات Django

اختبر فهمك لأساسيات Django:

ما هو النمط المعماري الذي يتبعه Django؟

Model-View-Template (MVT)
Model-View-Controller (MVC)
View-Template-Controller (VTC)
Template-Model-View (TMV)
صحيح! يتبع Django نمط MVT (Model-View-Template) وهو مشابه لـ MVC مع بعض المصطلحات الخاصة بـ Django.
ليس تمامًا. يتبع Django نمط MVT (Model-View-Template) وهو مشابه لـ MVC مع بعض المصطلحات الخاصة بـ Django.
ما سنقوم ببنائه: في هذا الدرس، سننشئ تطبيق تدوين ملاحظات بسيط حيث يمكن للمستخدمين إنشاء وعرض وقائمة للملاحظات. كل ملاحظة ستحتوي على عنوان ومحتوى.

2. إعداد بيئة العمل

قبل بدء بناء تطبيق Django، نحتاج إلى إعداد بيئة التطوير. يشمل ذلك تثبيت Python، إنشاء بيئة افتراضية، وتثبيت Django.

تثبيت Python

Django هو إطار عمل Python، لذا نحتاج أولاً إلى تثبيت Python. يتطلب Django 4.0+ Python 3.8 أو أعلى.

  • قم بتنزيل Python من python.org/downloads
  • أثناء التثبيت، تأكد من تحديد "Add Python to PATH"

تحقق من التثبيت بفتح الطرفية أو موجه الأوامر وكتابة:

python --version

يجب أن ترى شيئًا مثل Python 3.10.0 (قد يختلف الإصدار لديك).

إنشاء بيئة افتراضية

تتيح لك البيئات الافتراضية وجود بيئات Python معزولة لمشاريع مختلفة حتى لا تتداخل تبعياتها مع بعضها البعض.

افتح الطرفية وانتقل إلى المجلد الذي ترغب في إنشاء مشروعك فيه:

cd path/to/your/projects/folder

قم بإنشاء مجلد جديد لمشروعك:

mkdir mynotes
cd mynotes

قم بإنشاء بيئة افتراضية:

Windows
Mac/Linux
python -m venv venv
python3 -m venv venv

قم بتفعيل البيئة الافتراضية:

Windows
Mac/Linux
venv\Scripts\activate
source venv/bin/activate

ستعرف أن البيئة الافتراضية مفَعلة عندما ترى (venv) في بداية موجه الأوامر.

تثبيت Django

مع تفعيل البيئة الافتراضية، قم بتثبيت Django:

pip install django

تحقق من التثبيت:

python -m django --version

يجب أن ترى رقم إصدار Django، مثل 4.2.1 (قد يختلف الإصدار لديك).

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

اختبار سريع: البيئات الافتراضية

لماذا يجب عليك استخدام بيئة افتراضية لمشاريع Django الخاصة بك؟

لتسريع تشغيل الكود الخاص بك
لعزل تبعيات المشروع وتجنب التعارضات
لجعل مشروعك متوافقًا مع جميع أنظمة التشغيل
لتفعيل ميزات الأمان في Django
صحيح! تعزل البيئات الافتراضية التبعيات لمشاريع مختلفة، مما يمنع التعارض بينها.
ليس تمامًا. تُستخدم البيئات الافتراضية لعزل تبعيات المشروع ومنع التعارض بين المشاريع المختلفة التي قد تحتاج إلى إصدارات مختلفة من نفس الحزم.

3. إنشاء مشروع وتطبيق Django

في Django، يمثل المشروع التطبيق الويب بأكمله، بينما يمثل التطبيق وحدة داخل المشروع تتولى وظيفة محددة. يمكن أن يحتوي المشروع على عدة تطبيقات.

إنشاء مشروع Django

مع تفعيل بيئتك الافتراضية، نفذ الأمر التالي:

django-admin startproject mynotes .

لاحظ النقطة . في النهاية التي تخبر Django بإنشاء المشروع في الدليل الحالي بدلاً من إنشاء مجلد جديد.

إنشاء تطبيق Django

الآن، دعونا ننشئ تطبيقًا داخل مشروعنا:

python manage.py startapp notes

تسجيل التطبيق

افتح ملف mynotes/settings.py وأضف تطبيقك إلى قائمة INSTALLED_APPS: 

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'notes',  # Add this line
]

تشغيل الترحيلات الأولية

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

python manage.py migrate

يقوم هذا الأمر بتطبيق الترحيلات المدمجة للتطبيقات الافتراضية المذكورة في INSTALLED_APPS.

بدء خادم التطوير

دعونا نتأكد من أن كل شيء يعمل عن طريق تشغيل خادم التطوير:

python manage.py runserver

افتح متصفح الويب وانتقل إلى http://127.0.0.1:8000/. يجب أن ترى صفحة ترحيب Django.

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

ملاحظة: لا تستخدم خادم التطوير في بيئة الإنتاج، فهو غير مصمم ليكون آمنًا أو مستقرًا أو فعالًا.

اختبار سريع: المشاريع مقابل التطبيقات

ما العلاقة بين مشاريع Django والتطبيقات؟

المشاريع والتطبيقات هما الشيء نفسه
تتألف المشاريع من عدة مواقع ويب، كل منها يحتوي على تطبيق واحد
يمكن للمشروع أن يحتوي على عدة تطبيقات، كل منها يتولى وظيفة محددة
التطبيقات مستقلة ولا يمكن أن تكون جزءًا من مشروع
صحيح! يمثل مشروع Django التطبيق الويب بأكمله، ويمكن أن يحتوي على عدة تطبيقات تتولى كل منها وظيفة محددة.
ليس تمامًا. يمثل مشروع Django التطبيق الويب بأكمله ويمكن أن يحتوي على عدة تطبيقات تتولى كل منها وظيفة أو ميزة معينة في الموقع.

5. إنشاء نموذج وترحيل قاعدة البيانات

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

تعريف نموذج Note

افتح ملف notes/models.py وأضف الشيفرة التالية:

from django.db import models
from django.utils import timezone

class Note(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()
    created_at = models.DateTimeField(default=timezone.now)

    def __str__(self):
        return self.title

تقوم هذه الشيفرة بـ:

  • إنشاء نموذج Note يحتوي على حقول العنوان (title)، المحتوى (content)، ووقت الإنشاء (created_at)
  • تعيين حقل created_at ليأخذ القيمة الافتراضية وهي الوقت الحالي
  • تعريف دالة __str__ التي تُعيد العنوان عند تحويل الكائن إلى سلسلة نصية

إنشاء وتطبيق الترحيلات

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

python manage.py makemigrations notes

ينشئ هذا الأمر ملف ترحيل في مجلد notes/migrations/. الآن، قم بتطبيق الترحيل لتحديث قاعدة البيانات:

python manage.py migrate

تسجيل النموذج في لوحة الإدارة

يأتي Django مع واجهة إدارة مدمجة يمكننا استخدامها لإدارة بياناتنا. دعونا نسجل نموذجنا فيها.

افتح ملف notes/admin.py وأضف الشيفرة التالية: 

from django.contrib import admin
from .models import Note

admin.site.register(Note)

إنشاء حساب مدير (Superuser)

للوصول إلى واجهة الإدارة، نحتاج إلى إنشاء حساب مدير:

python manage.py createsuperuser

اتبع التعليمات لإنشاء اسم مستخدم، بريد إلكتروني، وكلمة مرور.

استكشاف واجهة الإدارة

قم بتشغيل خادم التطوير:

python manage.py runserver

زر http://127.0.0.1:8000/admin/ وسجّل الدخول باستخدام بيانات مدير الحساب التي أنشأتها.

يجب أن ترى واجهة إدارة Django مع نموذج Notes مدرج. جرب إضافة بعض الملاحظات للاختبار.

العلاقة بين النموذج وقاعدة البيانات

models.py

تعريف نموذج Note

makemigrations

إنشاء ملفات الترحيل

migrate

تطبيقها على قاعدة البيانات

Database

إنشاء/تحديث الجداول

اختبار سريع: نماذج Django

بعد تغيير نموذج، ما الأمران اللذان يجب تشغيلهما لتحديث قاعدة البيانات؟

python manage.py createsuperuser and python manage.py runserver
python manage.py makemigrations and python manage.py migrate
python manage.py startapp and python manage.py makemigrations
python manage.py migrate and python manage.py createsuperuser
صحيح! قم أولاً بتشغيل makemigrations لإنشاء ملفات الترحيل، ثم migrate لتطبيقها على قاعدة البيانات.
ليس تمامًا. التسلسل الصحيح هو: أولاً تشغيل makemigrations لإنشاء ملفات الترحيل، ثم migrate لتطبيقها على قاعدة البيانات.

6. إنشاء العروض، القوالب، وروابط URLs

الآن بعد أن قمنا بإعداد النموذج، نحتاج إلى إنشاء العروض (views)، القوالب (templates)، وروابط URL لعرض الملاحظات للمستخدمين.

إنشاء دليل القوالب

أولاً، قم بإنشاء هيكل دليل للقوالب:

mkdir -p notes/templates/notes

يبحث Django عن القوالب في مجلد "templates" داخل كل تطبيق. نضيف مجلد "notes" إضافي داخل مجلد القوالب لتفادي التعارض مع قوالب تطبيقات أخرى.

إنشاء القالب الأساسي

قم بإنشاء قالب أساسي في notes/templates/notes/base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Notes App{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{% url 'home' %}">My Notes</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'home' %}">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'note_list' %}">All Notes</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'note_new' %}">New Note</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        {% block content %}
        {% endblock %}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

يتضمن هذا القالب الأساسي Bootstrap للتنسيق ويعرّف الكتل التي ستملأها القوالب الفرعية.

إنشاء قالب الصفحة الرئيسية

قم بإنشاء الملف notes/templates/notes/home.html:

{% extends 'notes/base.html' %}

{% block title %}Home | My Notes App{% endblock %}

{% block content %}
<div class="jumbotron">
    <h1 class="display-4">Welcome to My Notes App</h1>
    <p class="lead">A simple Django application to manage your notes.</p>
    <hr class="my-4">
    <p>Get started by creating a new note or viewing your existing notes.</p>
    <a class="btn btn-primary btn-lg" href="{% url 'note_new' %}" role="button">Create New Note</a>
    <a class="btn btn-secondary btn-lg" href="{% url 'note_list' %}" role="button">View All Notes</a>
</div>
{% endblock %}

إنشاء قالب قائمة الملاحظات

قم بإنشاء الملف notes/templates/notes/note_list.html:

{% extends 'notes/base.html' %}

{% block title %}All Notes | My Notes App{% endblock %}

{% block content %}
<h1>All Notes</h1>

{% if notes %}
    <div class="row">
        {% for note in notes %}
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{{ note.title }}</h5>
                        <p class="card-text">{{ note.content|truncatechars:100 }}</p>
                        <p class="text-muted">Created: {{ note.created_at|date:"F j, Y" }}</p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% else %}
    <p>No notes yet. <a href="{% url 'note_new' %}">Create one</a>!</p>
{% endif %}
{% endblock %}

إنشاء العروض (Views)

افتح الملف notes/views.py وأضف الشيفرة التالية:

from django.shortcuts import render
from .models import Note

def home(request):
    return render(request, 'notes/home.html')

def note_list(request):
    notes = Note.objects.all().order_by('-created_at')
    return render(request, 'notes/note_list.html', {'notes': notes})

تُنشئ هذه الدوال عرضين: واحد للصفحة الرئيسية وآخر لقائمة الملاحظات.

إنشاء روابط URLs للتطبيق

قم بإنشاء ملف جديد notes/urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('notes/', views.note_list, name='note_list'),
]

إدراج روابط URLs للتطبيق في روابط URLs للمشروع

افتح الملف mynotes/urls.py وعدله كما يلي:

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

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

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

اختبر العروض

قم بتشغيل خادم التطوير:

python manage.py runserver

زر http://127.0.0.1:8000/ لرؤية الصفحة الرئيسية، وhttp://127.0.0.1:8000/notes/ لرؤية قائمة الملاحظات.

ملاحظة: قد لا يعمل رابط "New Note" بعد لأننا لم ننشئ العرض الخاص به بعد. سنقوم بذلك في القسم التالي.

تدفق نمط MVT في Django

URL

يطلب المستخدم رابط URL

View

يعالج الطلب

Model

يتفاعل مع قاعدة البيانات

Template

يقوم بعرض HTML

Response

يعيد الاستجابة للمستخدم

اختبار سريع: قوالب Django

ما هو الوسم (tag) المستخدم للوراثة من القالب الأساسي؟

{% include 'base.html' %}
{% extends 'base.html' %}
{% load 'base.html' %}
{% inherit 'base.html' %}
صحيح! يُستخدم الوسم {% extends %} للوراثة من القالب الأساسي.
ليس تمامًا. يُستخدم الوسم {% extends %} للوراثة من القالب الأساسي.

7. إضافة النماذج لإنشاء ملاحظات جديدة

الآن، دعونا ننشئ نموذجاً يسمح للمستخدمين بإضافة ملاحظات جديدة إلى التطبيق.

إنشاء نموذج (Form)

قم بإنشاء ملف جديد notes/forms.py:

from django import forms
from .models import Note

class NoteForm(forms.ModelForm):
    class Meta:
        model = Note
        fields = ['title', 'content']
        widgets = {
            'title': forms.TextInput(attrs={'class': 'form-control'}),
            'content': forms.Textarea(attrs={'class': 'form-control', 'rows': 5}),
        }

يُنشئ هذا النموذج نموذجًا مستندًا إلى نموذج Note يحتوي على حقول العنوان والمحتوى، كما يضيف فئات Bootstrap لتنسيق النموذج.

إنشاء قالب للنموذج

قم بإنشاء الملف notes/templates/notes/note_form.html:

{% extends 'notes/base.html' %}

{% block title %}New Note | My Notes App{% endblock %}

{% block content %}
<h1>{% if form.instance.id %}Edit Note{% else %}New Note{% endif %}</h1>

<form method="post">
    {% csrf_token %}
    <div class="mb-3">
        <label for="{{ form.title.id_for_label }}" class="form-label">Title</label>
        {{ form.title }}
        {% if form.title.errors %}
            <div class="text-danger">{{ form.title.errors }}</div>
        {% endif %}
    </div>

    <div class="mb-3">
        <label for="{{ form.content.id_for_label }}" class="form-label">Content</label>
        {{ form.content }}
        {% if form.content.errors %}
            <div class="text-danger">{{ form.content.errors }}</div>
        {% endif %}
    </div>

    <button type="submit" class="btn btn-primary">Save</button>
    <a href="{% url 'note_list' %}" class="btn btn-secondary">Cancel</a>
</form>
{% endblock %}

إضافة عرض لإنشاء الملاحظات

حدث ملف notes/views.py لإضافة عرض لإنشاء الملاحظات:

from django.shortcuts import render, redirect
from .models import Note
from .forms import NoteForm

def home(request):
    return render(request, 'notes/home.html')

def note_list(request):
    notes = Note.objects.all().order_by('-created_at')
    return render(request, 'notes/note_list.html', {'notes': notes})

def note_new(request):
    if request.method == "POST":
        form = NoteForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('note_list')
    else:
        form = NoteForm()
    return render(request, 'notes/note_form.html', {'form': form})

يضيف هذا العرض وظيفة جديدة:

  • يعرض نموذجًا فارغًا عند تحميل الصفحة لأول مرة (GET request)
  • يعالج بيانات النموذج عند الإرسال (POST request)
  • يقوم بإعادة التوجيه إلى صفحة قائمة الملاحظات بعد حفظ الملاحظة بنجاح

تحديث روابط URLs

حدث ملف notes/urls.py لإضافة رابط لإنشاء الملاحظات:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('notes/', views.note_list, name='note_list'),
    path('notes/new/', views.note_new, name='note_new'),
]

اختبر النموذج

شغل خادم التطوير:

python manage.py runserver

زر http://127.0.0.1:8000/notes/new/ للاطلاع على النموذج الخاص بإنشاء ملاحظة جديدة.

جرب إنشاء ملاحظة جديدة وتحقق من ظهورها في قائمة الملاحظات.

أمن نماذج Django: لا تنسَ أن وسم {% csrf_token %} في قالب النموذج مهم للأمان؛ فهو يضيف رمز حماية من هجمات Cross-Site Request Forgery.

اختبار سريع: نماذج Django

عند إنشاء نموذج بناءً على نموذج بيانات (Model)، من أي فئة يجب أن ترث؟

forms.Form
forms.ModelForm
models.Form
models.ModelForm
صحيح! عند إنشاء نموذج بناءً على نموذج بيانات، يجب أن ترث من forms.ModelForm.
ليس تمامًا. عند إنشاء نموذج بناءً على نموذج بيانات، يجب أن ترث من forms.ModelForm التي توفر الوظائف اللازمة لإنشاء النماذج مباشرة من النماذج.

8. التنسيق باستخدام Bootstrap

لقد أدخلنا Bootstrap مسبقًا في القالب الأساسي، لكن دعونا نحسن التنسيق أكثر لجعل التطبيق يبدو أكثر أناقة.

تحديث القالب الأساسي

أضف بعض CSS المخصص إلى القالب الأساسي. حدث الملف notes/templates/notes/base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Notes App{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-bottom: 2rem;
            background-color: #f8f9fa;
        }
        .navbar {
            margin-bottom: 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
        }
        .card {
            box-shadow: 0 2px 5px rgba(0,0,0,.1);
            transition: all 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,.15);
        }
        .jumbotron {
            background-color: #ffffff;
            border-radius: 0.5rem;
            padding: 2rem;
            box-shadow: 0 2px 5px rgba(0,0,0,.1);
        }
        .footer {
            margin-top: 3rem;
            padding-top: 1.5rem;
            padding-bottom: 1.5rem;
            background-color: #343a40;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{% url 'home' %}">
                <i class="fas fa-sticky-note me-2"></i>My Notes
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'home' %}">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'note_list' %}">All Notes</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'note_new' %}">New Note</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        {% block content %}
        {% endblock %}
    </div>

    <footer class="footer mt-auto">
        <div class="container text-center">
            <p>My Notes App - Built with Django</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/js/all.min.js"></script>
</body>
</html>

يحتوي هذا القالب الأساسي على Bootstrap ويعرّف الكتل التي سيتم تعبئتها من قبل القوالب الفرعية.

تحديث قالب قائمة الملاحظات

قم بتحسين الملف notes/templates/notes/note_list.html:

{% extends 'notes/base.html' %}

{% block title %}All Notes | My Notes App{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>All Notes</h1>
    <a href="{% url 'note_new' %}" class="btn btn-primary">
        <i class="fas fa-plus me-2"></i>New Note
    </a>
</div>

{% if notes %}
    <div class="row">
        {% for note in notes %}
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                        <span class="text-muted">{{ note.created_at|date:"F j, Y" }}</span>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">{{ note.title }}</h5>
                        <p class="card-text">{{ note.content|truncatechars:100 }}</p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% else %}
    <div class="alert alert-info">
        <i class="fas fa-info-circle me-2"></i>No notes yet. <a href="{% url 'note_new' %}" class="alert-link">Create one</a>!
    </div>
{% endif %}
{% endblock %}

تحديث قالب الصفحة الرئيسية

قم بتحسين الملف notes/templates/notes/home.html:

{% extends 'notes/base.html' %}

{% block title %}Home | My Notes App{% endblock %}

{% block content %}
<div class="jumbotron text-center">
    <h1 class="display-4 mb-4">Welcome to My Notes App</h1>
    <p class="lead">A simple Django application to manage your notes</p>
    <hr class="my-4">
    <div class="row mt-5 justify-content-center">
        <div class="col-md-4 mb-4">
            <div class="card text-center h-100">
                <div class="card-body">
                    <i class="fas fa-plus-circle fa-4x mb-3 text-success"></i>
                    <h3 class="card-title">Create</h3>
                    <p class="card-text">Create new notes with titles and content</p>
                    <a href="{% url 'note_new' %}" class="btn btn-success">New Note</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card text-center h-100">
                <div class="card-body">
                    <i class="fas fa-list-ul fa-4x mb-3 text-primary"></i>
                    <h3 class="card-title">View</h3>
                    <p class="card-text">View all your saved notes in one place</p>
                    <a href="{% url 'note_list' %}" class="btn btn-primary">View Notes</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

تحديث قالب النموذج

قم بتحسين الملف notes/templates/notes/note_form.html:

{% extends 'notes/base.html' %}

{% block title %}New Note | My Notes App{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h2>{% if form.instance.id %}Edit Note{% else %}New Note{% endif %}</h2>
    </div>
    <div class="card-body">
        <form method="post">
            {% csrf_token %}
            <div class="mb-3">
                <label for="{{ form.title.id_for_label }}" class="form-label">Title</label>
                {{ form.title }}
                {% if form.title.errors %}
                    <div class="text-danger">{{ form.title.errors }}</div>
                {% endif %}
            </div>

            <div class="mb-3">
                <label for="{{ form.content.id_for_label }}" class="form-label">Content</label>
                {{ form.content }}
                {% if form.content.errors %}
                    <div class="text-danger">{{ form.content.errors }}</div>
                {% endif %}
            </div>

            <div class="d-flex mt-4">
                <button type="submit" class="btn btn-primary me-2">
                    <i class="fas fa-save me-2"></i>Save
                </button>
                <a href="{% url 'note_list' %}" class="btn btn-secondary">
                    <i class="fas fa-times me-2"></i>Cancel
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

اختبر التطبيق المُنسَّق

شغل خادم التطوير:

python manage.py runserver

زر http://127.0.0.1:8000/ لرؤية التطبيق المُنسَّق.

نصيحة التنسيق: يوفر Bootstrap العديد من المكونات والأدوات بشكل جاهز، ولكن يمكنك دومًا إضافة CSS مخصص لتكييف الشكل حسب احتياجاتك. أضف أنماطك الخاصة في قسم <style> من القالب الأساسي أو في ملف CSS منفصل.

9. تشغيل واختبار التطبيق

دعونا نتأكد من أن التطبيق يعمل بشكل صحيح ونختبر جميع الميزات التي قمنا بتنفيذها.

تشغيل خادم التطوير

قم بتشغيل خادم التطوير:

python manage.py runserver

سيبدأ الخادم على http://127.0.0.1:8000/

اختبر الصفحة الرئيسية

زر الصفحة الرئيسية وتحقق من عرضها بشكل صحيح مع روابط إنشاء وعرض الملاحظات.

تأكد من أن زري "New Note" و"View Notes" يعملان بشكل صحيح.

اختبر إنشاء ملاحظة

انقر على "New Note" وأنشئ ملاحظة بعنوان ومحتوى.

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

اختبر قائمة الملاحظات

زر صفحة قائمة الملاحظات وتحقق من عرض جميع الملاحظات بشكل صحيح.

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

اختبر التنقل

تحقق من أن روابط التنقل في الرأس تعمل بشكل صحيح وتنقلك إلى الصفحات المناسبة.

اختبر التحقق من صحة النموذج

حاول إرسال نموذج الملاحظة مع ترك الحقول فارغة للتأكد من أن التحقق من الصحة يعمل بشكل صحيح.

تحقق من عرض رسائل الخطأ بشكل مناسب.

Django Admin: لا تنسَ أنه يمكنك أيضًا استخدام واجهة الإدارة على http://127.0.0.1:8000/admin/ لإدارة ملاحظاتك. سجّل الدخول باستخدام بيانات مدير الحساب التي أنشأتها مسبقًا.
الاختبار على متصفحات مختلفة: من الأفضل اختبار تطبيقك على متصفحات مختلفة لضمان التوافق. جرّب فتح التطبيق في Chrome، Firefox، Safari، أو Edge للتأكد من أنه يظهر ويعمل بشكل صحيح عبرها.

10. خيارات النشر (نظرة عامة)

بعد بناء واختبار تطبيق Django الخاص بك، قد ترغب في نشره لجعله متاحًا للآخرين. إليك نظرة عامة موجزة على خيارات النشر.

الاستعداد للنشر

قبل النشر، تحتاج إلى إجراء بعض التغييرات على إعداداتك:

# في settings.py

# اضبط DEBUG على False في بيئة الإنتاج
DEBUG = False

# عيّن ALLOWED_HOSTS إلى نطاقك (أو النطاقات الخاصة بك)
ALLOWED_HOSTS = ['yourdomain.com', 'www.yourdomain.com']

# قم بتكوين قاعدة بيانات للإنتاج (مثال: PostgreSQL)
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'your_database_name',
        'USER': 'your_database_user',
        'PASSWORD': 'your_database_password',
        'HOST': 'localhost',
        'PORT': '',
    }
}

# تعيين SECRET_KEY آمن
SECRET_KEY = 'your-secret-key'  # استخدم المتغيرات البيئية لهذا في الواقع

# تكوين الملفات الثابتة
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'

منصات النشر

PythonAnywhere

منصة مناسبة للمبتدئين مصممة خصيصًا لتطبيقات Python و Django.

  • متوفر مستوى مجاني
  • سهل الإعداد
  • مناسب للمبتدئين
تعرف على المزيد

Heroku

منصة كخدمة (PaaS) تتيح للمطورين بناء وتشغيل التطبيقات وإدارتها.

  • متوفر مستوى مجاني (مع بعض القيود)
  • خيارات توسع جيدة
  • وثائق موسعة
تعرف على المزيد

DigitalOcean

مزود خدمة سحابة يقدم Droplets (آلات افتراضية) ومنصة التطبيقات.

  • تحكم أكبر في الخادم الخاص بك
  • يتطلب معرفة تقنية أكثر
  • أسعار معقولة
تعرف على المزيد

AWS, Google Cloud, Azure

منصات سحابية كبرى تقدم خدمات متنوعة لنشر التطبيقات الوب.

  • مجموعة واسعة من الميزات
  • قابلية توسع عالية
  • منحنى تعلم أكثر انحدارًا

خيارات متعددة متاحة

خطوات النشر العامة

  1. قم بإعداد قاعدة بيانات للإنتاج (مثال: PostgreSQL)
  2. قم بتكوين إعداداتك للإنتاج
  3. اجمع الملفات الثابتة: python manage.py collectstatic
  4. اختر وقم بإعداد خادم ويب (مثال: Gunicorn، uWSGI)
  5. قم بتكوين بروكسي عكسي (مثال: Nginx، Apache)
  6. قم بإعداد HTTPS باستخدام شهادة (مثال: Let's Encrypt)
  7. انشر الكود الخاص بك على الخادم
  8. ابدأ تشغيل التطبيق
توصية بالنشر: للمبتدئين، يُعدّ PythonAnywhere أو Heroku خيارات جيدة بفضل سهولة إعدادها وتوفر وثائق مفصلة. مع ازدياد خبرتك، يمكنك استكشاف خيارات أخرى تمنحك سيطرة أكبر على بيئتك.

11. ملخص المشروع النهائي وقائمة المراجعة

ما قمنا ببنائه

تهانينا! لقد قمت ببناء تطبيق ويب بسيط باستخدام Django يسمح للمستخدمين بـ:

  • عرض صفحة رئيسية منسقة مع روابط لإنشاء وعرض الملاحظات
  • إنشاء ملاحظات جديدة بعنوان ومحتوى
  • عرض قائمة بجميع الملاحظات

على طول الطريق، تعلمت:

  • كيفية إعداد بيئة تطوير Django
  • كيفية إنشاء مشروع وتطبيق Django
  • كيفية تعريف النماذج والعمل مع قواعد البيانات
  • كيفية إنشاء العروض والقوالب وروابط URLs
  • كيفية التعامل مع النماذج ومدخلات المستخدم
  • كيفية تنسيق التطبيق باستخدام Bootstrap
  • كيفية اختبار التطبيق
  • نظرة عامة على خيارات النشر

قائمة مراجعة المشروع

استخدم هذه القائمة للتأكد من إكمال جميع الخطوات اللازمة:

الخطوات التالية

لقد بنيت تطبيق Django أساسي، ولكن هناك العديد من الطرق لتطويره:

إضافة مصادقة المستخدم

السماح للمستخدمين بالتسجيل وتسجيل الدخول والحصول على ملاحظاتهم الخاصة.

إضافة عمليات CRUD

تنفيذ وظائف لتحديث وحذف الملاحظات.

إضافة التصنيفات/الوسوم

السماح للمستخدمين بتصنيف الملاحظات وتصفية حسب التصنيف.

إضافة تحرير نص منسق

تنفيذ محرر نص منسق لمحتوى الملاحظة.

إضافة وظيفة البحث

السماح للمستخدمين بالبحث في ملاحظاتهم.

إضافة API

إنشاء واجهة برمجة تطبيقات REST لتطبيق الملاحظات باستخدام Django REST framework.

مصادر للتعلم المزيد

تهانينا!

لقد أكملت درس Django وبنيت أول تطبيق ويب خاص بك!

واصل استكشاف Django وبناء تطبيقات أكثر تعقيدًا لتعزيز مهاراتك.