روز ۱۲: ساخت یک صفحه وب کامل در جنگو (تمرین پروژه‌ای)

یکی از بهترین روش‌های یادگیری جنگو، تمرین عملی و ساخت صفحات وب واقعی است. تا اینجا با مفاهیم پایه مانند Views، Templates، Template Inheritance و Static Files آشنا شدیم و اکنون زمان آن رسیده که همه این موارد را در قالب یک پروژه عملی به کار ببریم. ساخت یک صفحه وب کامل به شما کمک می‌کند تا دانش تئوری خود را به مهارت عملی تبدیل کنید و با چالش‌های واقعی طراحی سایت آشنا شوید. این تمرین پروژه‌ای پایه‌ای برای پروژه‌های بزرگ‌تر و حرفه‌ای‌تر در آینده خواهد بود و یادگیری آن باعث می‌شود بتوانید صفحات وب استاندارد و قابل توسعه بسازید.

انتخاب پروژه و طراحی ساختار

برای این تمرین، یک صفحه وب ساده با عنوان «صفحه معرفی دوره آموزشی جنگو» طراحی می‌کنیم. این صفحه شامل هدر، منو، بخش معرفی دوره، لیست مزایا، تصاویر و فرم تماس خواهد بود. ساختار صفحه به گونه‌ای طراحی شده که از Template Inheritance برای مدیریت Layout استفاده شود و فایل‌های CSS و JS به صورت استاتیک اضافه شوند. این طراحی باعث می‌شود پروژه استاندارد، قابل توسعه و سئوپسند باشد و همچنین مهارت‌های عملی شما در استفاده همزمان از تمام مفاهیم جنگو تقویت شود.

ساخت Base Template و Layout اصلی

ابتدا یک Base Template ایجاد می‌کنیم تا ساختار کلی صفحه شامل هدر، منو و فوتر را در آن تعریف کنیم. همچنین blockهای title و content برای صفحات فرزند ایجاد می‌کنیم تا محتوای اختصاصی هر صفحه در آن‌ها قرار گیرد. این روش باعث می‌شود صفحات فرزند بدون تکرار بخش‌های ثابت طراحی شوند و مدیریت تغییرات ساده‌تر شود.

<!-- base.html -->
{% load static %}
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}دوره آموزشی Django{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <header>
        <h1>سایت آموزشی Django</h1>
        <nav>
            <a href="/">خانه</a>
            <a href="/about/">درباره ما</a>
            <a href="/courses/">دوره‌ها</a>
        </nav>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        <p>تمام حقوق محفوظ است © 2026</p>
    </footer>
    <script src="{% static 'js/main.js' %}"></script>
</body>
</html>

ایجاد صفحه فرزند با محتوای اختصاصی

اکنون یک صفحه فرزند به نام home.html ایجاد می‌کنیم و محتوای اختصاصی صفحه معرفی دوره را در block content قرار می‌دهیم. این صفحه شامل توضیحات دوره، مزایا، لیست موضوعات و تصویر مرتبط است. با استفاده از Template Tags و متغیرهای Context، محتوای داینامیک صفحه نیز قابل مدیریت است.

{% extends "base.html" %}
{% block title %}صفحه اصلی - دوره Django{% endblock %}
{% block content %}
<section>
    <h2>معرفی دوره آموزشی Django</h2>
    <p>این دوره به شما کمک می‌کند تا از پایه با فریم‌ورک Django آشنا شوید و مهارت‌های طراحی وب حرفه‌ای کسب کنید. شما یاد خواهید گرفت چگونه پروژه‌های واقعی بسازید و صفحات داینامیک با قابلیت تعامل کاربر ایجاد کنید.</p>
    <ul>
        <li>آموزش کامل MVT در Django</li>
        <li>مدیریت Template و Static Files</li>
        <li>ساخت فرم‌های وب و دریافت داده از کاربر</li>
        <li>ایجاد صفحات کاملاً داینامیک و حرفه‌ای</li>
    </ul>
    <img src="{% static 'images/django-course.png' %}" alt="دوره آموزشی Django">
</section>
<section>
    <h3>ثبت‌نام و تماس با ما</h3>
    <form method="post" action="/contact/">
        {% csrf_token %}
        <label>نام: <input type="text" name="name"></label><br>
        <label>ایمیل: <input type="email" name="email"></label><br>
        <label>پیام: <textarea name="message"></textarea></label><br>
        <button type="submit">ارسال</button>
    </form>
</section>
{% endblock %}

در این صفحه، تمام مفاهیم قبلی مانند Template Inheritance، Static Files و Context ترکیب شده‌اند و یک صفحه عملی و کاربردی ساخته شده است.

اتصال View به صفحه وب

برای نمایش این صفحه به کاربر، یک Function Based View در فایل views.py ایجاد می‌کنیم و آن را به URL مربوطه متصل می‌کنیم. این View می‌تواند داده‌های داینامیک را نیز به Template ارسال کند و عملکرد صفحه را تعاملی‌تر نماید.

from django.shortcuts import render

def home_view(request):
    context = {
        'course_name': 'دوره آموزشی Django',
        'description': 'یادگیری Django از پایه تا پروژه‌های واقعی'
    }
    return render(request, 'app/home.html', context)

سپس در urls.py مسیر صفحه را تعریف می‌کنیم:

from django.urls import path
from .views import home_view

urlpatterns = [
    path('', home_view, name='home'),
]

مزایای ساخت پروژه عملی

ساخت یک صفحه وب کامل به شما کمک می‌کند تا مهارت‌های عملی خود را تقویت کنید و مفاهیم قبلی مانند Template، View، Static Files و فرم‌ها را در عمل تجربه نمایید. این تمرین پروژه‌ای، پایه‌ای قوی برای پروژه‌های بزرگ‌تر و حرفه‌ای فراهم می‌کند و یادگیری آن باعث می‌شود صفحات وب شما ساختاریافته، قابل توسعه و سئوپسند باشند. همچنین ترکیب HTML، CSS و JS با مفاهیم جنگو تجربه عملی ارزشمندی برای بازار کار ایجاد می‌کند.

نکات حرفه‌ای برای طراحی صفحه کامل

برای طراحی صفحات حرفه‌ای، توصیه می‌شود از Template Inheritance برای مدیریت Layout استفاده کنید، فایل‌های CSS و JS را بهینه و سازماندهی شده قرار دهید، از تصاویر با حجم مناسب استفاده کنید و فرم‌ها را با امنیت بالا پیاده‌سازی نمایید. همچنین رعایت استانداردهای HTML و استفاده از alt برای تصاویر و ساختار معنایی صفحات باعث بهبود سئو و تجربه کاربری می‌شود.

جمع‌بندی روز دوازدهم

در روز دوازدهم، یک صفحه وب کامل ساختیم و تمام مفاهیم قبلی را در یک پروژه عملی ترکیب کردیم. یاد گرفتیم چگونه Base Template ایجاد کنیم، صفحات فرزند بسازیم، فایل‌های استاتیک را اضافه کنیم و داده‌ها را از View به Template ارسال کنیم. همچنین نحوه ایجاد فرم و بخش تعاملی صفحه را بررسی کردیم. این تمرین پروژه‌ای پایه‌ای برای توسعه صفحات حرفه‌ای و قابل توسعه در جنگو فراهم می‌کند و مهارت‌های عملی شما را به سطح بالاتری می‌رساند.