آموزش ساخت وب‌سایت ساده با Django

سلام رفیق برنامه‌نویس! اگه دنبال یه راه ساده و در عین حال قدرتمند برای ساخت وب‌سایت هستی، درست اومدی. جنگو (Django) یکی از محبوب‌ترین فریم‌ورک‌های پایتون برای توسعه وب هست که باهاش می‌تونی خیلی سریع و با کیفیت، از یه وبلاگ ساده تا یه اپلیکیشن پیچیده رو پیاده‌سازی کنی. تو این مقاله، قراره قدم به قدم با هم یه وب‌سایت خیلی ساده با جنگو بسازیم؛ از صفر تا صد. پس اگه آماده‌ای که دنیای جنگو رو کشف کنی، بزن بریم!

تماس برای مشاوره و ابزارهای توسعه |
ابزارهای کاربردی برنامه‌نویسی رو اینجا ببین!

چرا جنگو برای شروع خوبه؟

جنگو یک فریم‌ورک “باتری همراه” (Batteries Included) هست. این یعنی چی؟ یعنی خیلی از قابلیت‌های پایه که برای هر وب‌سایتی نیاز داری، از مدیریت دیتابیس گرفته تا احراز هویت کاربر، همین الانشم توش گنجونده شده. دیگه لازم نیست برای هر بخش کوچیک بری سراغ پکیج‌های مختلف. این موضوع باعث میشه سرعت توسعه‌ات حسابی بره بالا و کمتر تو جزئیات گیر کنی.

مزایای کلیدی جنگو:

• سرعت بالا در توسعه: با الگوهای طراحی مشخص و ابزارهای داخلی، خیلی سریع می‌تونی ایده‌هات رو تبدیل به واقعیت کنی.
• امنیت: جنگو به صورت پیش‌فرض مکانیزم‌های امنیتی خوبی در برابر حملات رایج مثل XSS، CSRF و SQL Injection داره. خیالت از بابت امنیت سایتت راحته.
• اسکال‌پذیری: از سایت‌های کوچیک گرفته تا اپلیکیشن‌های بزرگ و پربازدید، جنگو قابلیت رشد و توسعه رو بهت میده.
• مستندات عالی: هر جا سوالی داشتی، مستندات رسمی جنگو مثل یک گنجینه عظیم از اطلاعات در کنارت هستن.
• جامعه کاربری فعال: هزاران برنامه‌نویس در سراسر دنیا از جنگو استفاده می‌کنن و می‌تونی همیشه کمک و راهنمایی پیدا کنی.

پیش‌نیازها و آماده‌سازی محیط

قبل از هر کاری، باید مطمئن بشیم که ابزارهای لازم رو در اختیار داریم. نگران نباش، کار سختی نیست و فقط چند دقیقه وقت می‌گیره.

1. نصب پایتون

جنگو با پایتون کار می‌کنه، پس اولین قدم اینه که پایتون رو روی سیستمت نصب کنی. اگه هنوز پایتون نداری، می‌تونی آخرین نسخه پایدار رو از وب‌سایت رسمی python.org دانلود و نصب کنی. موقع نصب، حواست باشه که تیک گزینه “Add Python to PATH” رو بزنی تا پایتون به درستی تو محیط سیستمت شناخته بشه.

2. ساخت محیط مجازی (Virtual Environment)

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

اول، یک پوشه برای پروژه‌ات بساز:

mkdir my_django_project
cd my_django_project

حالا، محیط مجازی رو بساز و فعالش کن:

python -m venv venv

این دستور یک پوشه به اسم `venv` (مخفف virtual environment) تو ریشه پروژه‌ات می‌سازه.

برای فعال کردن محیط مجازی:

* **در ویندوز (Command Prompt):**

venvScriptsactivate

* **در لینوکس/مک (Bash/Zsh):**

source venv/bin/activate

بعد از فعال شدن، اسم `(venv)` رو کنار خط فرمانت می‌بینی که نشون میده تو محیط مجازی هستی.

3. نصب جنگو

حالا که محیط مجازی فعال شده، می‌تونیم جنگو رو نصب کنیم.

pip install Django

همین! جنگو نصب شد. می‌تونی از لینک‌های مفید ما برای یادگیری بیشتر در زمینه اسنیپت‌های پایتون و کدهای آماده استفاده کنی.

شروع پروژه جنگو

جنگو یک ساختار مشخص برای پروژه‌هاش داره. هر پروژه جنگو می‌تونه شامل یک یا چند “اپلیکیشن” باشه. هر اپلیکیشن یک ماژول جداگانه برای انجام یک کار خاص تو وب‌سایت شماست (مثلاً یک اپ برای وبلاگ، یک اپ برای فروشگاه).

1. ساخت پروژه (Project)

داخل پوشه `my_django_project` و در حالی که محیط مجازی فعال هست، دستور زیر رو بزن:

django-admin startproject mysite .

نقطه (.) آخر دستور مهمه، چون باعث میشه پروژه تو همین پوشه فعلی ساخته بشه و یک پوشه اضافی تو در تو ایجاد نکنه.

حالا ساختار پروژه‌ات باید شبیه این باشه:

my_django_project/
├── venv/
├── mysite/
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

* `manage.py`: فایل اصلی برای تعامل با پروژه‌ات.
* `mysite/settings.py`: تنظیمات اصلی پروژه.
* `mysite/urls.py`: مسیردهی URLهای کلی پروژه.

حالا می‌تونی سرور توسعه جنگو رو راه‌اندازی کنی:

python manage.py runserver

اگه همه چی درست پیش رفته باشه، تو خروجی آدرس `http://127.0.0.1:8000/` رو می‌بینی. این آدرس رو تو مرورگرت باز کن. باید صفحه تبریک پیش‌فرض جنگو رو ببینی.

2. ساخت اپلیکیشن (App)

همونطور که گفتیم، پروژه از اپلیکیشن‌ها تشکیل شده. بیا یک اپلیکیشن ساده به اسم `blog` بسازیم:

python manage.py startapp blog

ساختار پروژه حالا باید شبیه این باشه:

my_django_project/
├── venv/
├── blog/
│   ├── migrations/
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── mysite/
│   ├── ...
└── manage.py

برای اینکه جنگو اپلیکیشن `blog` رو بشناسه، باید اون رو تو فایل `mysite/settings.py` اضافه کنیم. فایل `settings.py` رو باز کن و `blog` رو به لیست `INSTALLED_APPS` اضافه کن:

# mysite/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',  # <-- اپلیکیشن جدید شما
]

مدل‌ها: اسکلت داده‌های شما

مدل‌ها (Models) تو جنگو، ساختار دیتابیس شما رو تعریف می‌کنن. هر مدل یک کلاس پایتون هست که از `django.db.models.Model` ارث‌بری می‌کنه و هر ویژگی (Attribute) تو این کلاس، یک ستون تو جدول دیتابیس میشه.

بیا یک مدل ساده برای پست‌های وبلاگمون تو فایل `blog/models.py` بسازیم:

# blog/models.py
from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()
    pub_date = models.DateTimeField('date published')

    def __str__(self):
        return self.title

اینجا یک مدل `Post` با سه فیلد `title`، `content` و `pub_date` تعریف کردیم.

متد `__str__` برای نمایش بهتر آبجکت‌های مدل تو پنل ادمین جنگو کاربرد داره.

مایگریشن‌ها (Migrations)

بعد از تعریف یا تغییر مدل‌ها، باید به جنگو بگیم که این تغییرات رو تو دیتابیس اعمال کنه. این کار با “مایگریشن” انجام میشه:

python manage.py makemigrations blog
python manage.py migrate

* `makemigrations`: فایل‌های مایگریشن رو بر اساس تغییرات مدل‌هات می‌سازه.
* `migrate`: این فایل‌های مایگریشن رو روی دیتابیس اعمال می‌کنه و جداول جدید رو می‌سازه.

برای دیدن جزئیات بیشتر در مورد ساختار دیتابیس و مدل‌ها، می‌تونی از ابزارهای دیتابیس ما در اسنیپت‌های وردپرس (البته اگر مربوط به دیتابیس بود) یا کلی اسنیپت‌های کد استفاده کنی.

ویوها: منطق پشت پرده

ویوها (Views) همون توابع پایتون هستن که منطق اصلی اپلیکیشن شما رو مدیریت می‌کنن. وقتی یک کاربر درخواستی رو به وب‌سایت شما میفرسته (مثلاً آدرس `/blog/` رو باز می‌کنه)، یک View این درخواست رو دریافت می‌کنه، اطلاعات لازم رو از دیتابیس می‌گیره (با کمک مدل‌ها) و یک پاسخ (مثلاً یک صفحه HTML) رو برمی‌گردونه.

بیا یک View ساده تو فایل `blog/views.py` بسازیم که لیست پست‌ها رو نمایش بده:

# blog/views.py
from django.shortcuts import render
from .models import Post

def post_list(request):
    posts = Post.objects.all().order_by('-pub_date')
    context = {'posts': posts}
    return render(request, 'blog/post_list.html', context)

این View همه پست‌ها رو از دیتابیس می‌گیره، اون‌ها رو بر اساس تاریخ انتشار مرتب می‌کنه و بعد با استفاده از تابع `render`، یک فایل HTML به اسم `blog/post_list.html` رو به همراه لیست پست‌ها به کاربر نمایش میده.

تمپلیت‌ها: رابط کاربری زیبا

تمپلیت‌ها (Templates) فایل‌های HTML هستن که با استفاده از سینتکس خاص جنگو، می‌تونن اطلاعاتی که از View دریافت می‌کنن رو نمایش بدن. جنگو از یک زبان تمپلیتینگ قدرتمند استفاده می‌کنه که بهت اجازه میده با تگ‌ها و فیلترها، محتوای داینامیک بسازی.

ساختار پوشه تمپلیت‌ها

جنگو به صورت پیش‌فرض دنبال پوشه `templates` تو هر اپلیکیشن می‌گرده. پس یک پوشه `templates` داخل پوشه `blog` بساز و یک پوشه دیگه به اسم `blog` داخل اون: `blog/templates/blog/`. این کار برای جلوگیری از تداخل اسم تمپلیت‌ها بین اپلیکیشن‌های مختلف مفیده.

حالا فایل `blog/templates/blog/post_list.html` رو بساز و کد زیر رو توش بنویس:

    
    
    
    
        body { font-family: Tahoma, sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; }
        h1 { color: #d63384; text-align: center; }
        .post-item { background-color: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .post-item h2 { color: #e91e63; margin-top: 0; }
        .post-item p { line-height: 1.6; }
        .post-date { font-size: 0.9em; color: #888; text-align: left; }
    


    
جدیدترین پست‌ها
    {% for post in posts %}
        

            
{{ post.title }}
            
{{ post.content|truncatechars:200 }}
            
تاریخ انتشار: {{ post.pub_date }}
        
    {% empty %}
        
هیچ پستی برای نمایش وجود ندارد.
    {% endfor %}

تو این تمپلیت:
* `{% for post in posts %}`: یک حلقه برای پیمایش روی لیست `posts` که از View اومده.
* `{{ post.title }}`: نمایش عنوان هر پست.
* `{{ post.content|truncatechars:200 }}`: نمایش ۲۰۰ کاراکتر اول محتوای پست (یک فیلتر تمپلیت).
* `{% empty %}`: اگه لیست `posts` خالی بود، این بخش اجرا میشه.
برای زیباسازی بیشتر و یادگیری در مورد CSS می‌تونی از اسنیپت‌های CSS ما دیدن کنی.

URL‌ها: مسیرهای وب‌سایت

URLها یا مسیرها، نحوه دسترسی کاربر به بخش‌های مختلف وب‌سایت شما رو مشخص می‌کنن. تو جنگو، URLها رو تو فایل‌های `urls.py` تعریف می‌کنیم. ما دو نوع فایل `urls.py` داریم: یکی برای کل پروژه و یکی برای هر اپلیکیشن.

1. تنظیم URLها در پروژه (mysite/urls.py)

فایل `mysite/urls.py` رو باز کن و اپلیکیشن `blog` رو بهش اضافه کن. این کار باعث میشه جنگو برای پیدا کردن مسیرهای مربوط به `blog`، به فایل `blog/urls.py` مراجعه کنه.

# mysite/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('blog/', include('blog.urls')), # <-- اضافه کردن مسیرهای اپلیکیشن blog
]

اینجا گفتیم که هر درخواستی که با `/blog/` شروع بشه، به فایل `blog.urls` ارجاع داده بشه.

2. تنظیم URLها در اپلیکیشن (blog/urls.py)

حالا باید یک فایل به اسم `urls.py` داخل پوشه `blog` بسازی (اگه وجود نداره) و مسیر `post_list` رو توش تعریف کنی:

# blog/urls.py
from django.urls import path
from . import views

app_name = 'blog' # برای namespace کردن URLها

urlpatterns = [
    path('', views.post_list, name='post_list'), # آدرس /blog/
]

* `path(”, views.post_list, name=’post_list’)`: یعنی وقتی کاربر به آدرس `/blog/` (که از فایل `mysite/urls.py` ارجاع داده شده) مراجعه می‌کنه، تابع `post_list` از `views.py` اجرا بشه. `name=’post_list’` هم برای ارجاع دادن به این URL تو تمپلیت‌ها و ویوها کاربرد داره.

حالا دوباره سرور رو با `python manage.py runserver` راه‌اندازی کن و به آدرس `http://127.0.0.1:8000/blog/` برو. باید لیست پست‌هات رو ببینی (البته اگه پستی ایجاد کرده باشی).

مدیریت محتوای ادمین جنگو

جنگو یک پنل ادمین فوق‌العاده کاربردی داره که به صورت خودکار با مدل‌های شما کار می‌کنه و بهتون اجازه میده به راحتی محتوای دیتابیس رو مدیریت کنید.

1. ساخت سوپر یوزر (Superuser)

قبل از هر چیزی، باید یک کاربر ادمین برای خودت بسازی:

python manage.py createsuperuser

اطلاعات خواسته شده رو وارد کن (نام کاربری، ایمیل، پسورد).

2. ثبت مدل در پنل ادمین

برای اینکه بتونی پست‌هات رو تو پنل ادمین مدیریت کنی، باید مدل `Post` رو تو فایل `blog/admin.py` ثبت کنی:

# blog/admin.py
from django.contrib import admin
from .models import Post

admin.site.register(Post)

حالا سرور رو دوباره راه‌اندازی کن (`python manage.py runserver`) و به آدرس `http://127.0.0.1:8000/admin/` برو. با نام کاربری و پسوردی که ساختی لاگین کن. باید مدل `Post` رو تو لیست ببینی و بتونی پست جدید اضافه کنی یا پست‌های موجود رو ویرایش کنی. یه چندتا پست اضافه کن تا صفحه `blog/` خالی نباشه.

استاتیک فایل‌ها: CSS و JS

برای زیبایی و تعاملی کردن وب‌سایت، نیاز به فایل‌های CSS و JavaScript داریم. جنگو یک سیستم برای مدیریت این “فایل‌های استاتیک” داره.

1. تنظیمات `settings.py`

تو فایل `mysite/settings.py`، مطمئن شو که `django.contrib.staticfiles` تو `INSTALLED_APPS` هست (که به صورت پیش‌فرض هست). همچنین می‌تونی مسیرهای اضافی برای فایل‌های استاتیکت تعریف کنی:

# mysite/settings.py
import os # این خط رو اگه نیست اضافه کن

# ...
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'), # مسیر اصلی برای فایل های استاتیک پروژه
]

اینجا گفتیم که جنگو علاوه بر پوشه `static` تو هر اپلیکیشن، تو یک پوشه `static` تو ریشه پروژه هم دنبال فایل‌های استاتیک بگرده. پس یک پوشه `static` تو ریشه `my_django_project` بساز: `my_django_project/static/`.

2. استفاده از فایل‌های استاتیک در تمپلیت

برای لود کردن فایل‌های استاتیک تو تمپلیت، اول باید تگ `static` رو لود کنی و بعد از تگ `static` استفاده کنی:

{% load static %}



    
    
    
    
    
    
        /* ... CSS قبلی ... */
    


    

حالا می‌تونی فایل‌های `style.css` رو تو `my_django_project/static/css/` و `script.js` رو تو `my_django_project/static/js/` قرار بدی.
برای اطلاعات بیشتر در مورد JavaScript، اسنیپت‌های جاوا اسکریپت ما رو فراموش نکن! همچنین اسنیپت‌های HTML برای ساختار صفحاتت خیلی کمکت می‌کنه.

جدول مقایسه‌ای: اجزای اصلی جنگو

برای اینکه بهتر بدونی هر بخش تو جنگو چیکار می‌کنه، یه نگاهی به این جدول مقایسه‌ای بندازیم:

عیب‌یابی سریع (Troubleshooting Quick Fixes)

تو مسیر توسعه، حتماً با مشکلاتی روبرو میشی. نگران نباش، این طبیعیه! اینجا به چند مشکل رایج و راه‌حلشون اشاره می‌کنم:

1. مشکل: `ModuleNotFoundError: No module named ‘django’`

* **علت:** جنگو نصب نشده یا محیط مجازی فعال نیست.
* **راه‌حل:**
1. مطمئن شو که محیط مجازی رو فعال کردی (همون `source venv/bin/activate` یا `venvScriptsactivate`).
2. اگه فعال بود، جنگو رو نصب کن: `pip install Django`.

2. مشکل: `AttributeError: type object ‘Post’ has no attribute ‘objects’`

* **علت:** تغییرات مدل رو به دیتابیس اعمال نکردی.
* **راه‌حل:**
1. مطمئن شو که مدل `Post` رو تو `models.py` درست تعریف کردی.
2. دستورات مایگریشن رو اجرا کن: `python manage.py makemigrations blog` و `python manage.py migrate`.

3. مشکل: `TemplateDoesNotExist at /blog/`

* **علت:** جنگو نتونسته فایل تمپلیت رو پیدا کنه.
* **راه‌حل:**
1. مطمئن شو که پوشه `templates` و `blog` داخلش به درستی ساخته شده: `blog/templates/blog/post_list.html`.
2. تو `mysite/settings.py`، مطمئن شو که `APP_DIRS` تو `TEMPLATES` روی `True` تنظیم شده (که به صورت پیش‌فرض هست).

4. مشکل: `Reverse for ‘post_list’ not found.`

* **علت:** مشکل در تعریف URL یا `name` آن.
* **راه‌حل:**
1. مطمئن شو که تو `blog/urls.py`، `name=’post_list’` رو برای مسیرت تعریف کردی.
2. اگه از `app_name` استفاده می‌کنی (که توصیه میشه)، موقع ارجاع به URL تو تمپلیت‌ها یا ویوها، از سینتکس `{% url ‘blog:post_list’ %}` استفاده کنی.

5. مشکل: فایل‌های استاتیک (CSS/JS) لود نمیشن

* **علت:** مسیردهی اشتباه یا فراموش کردن `{% load static %}`.
* **راه‌حل:**
1. مطمئن شو که `{% load static %}` رو بالای تمپلیتت گذاشتی.
2. مسیر فایل‌های استاتیک رو تو `{% static ‘مسیر_فایل’ %}` درست وارد کردی.
3. مطمئن شو که پوشه `static` و فایل‌هاش در مسیرهای تعریف شده تو `settings.py` (مثل `STATICFILES_DIRS`) وجود دارن.
4. در محیط توسعه، جنگو به صورت خودکار فایل‌های استاتیک رو سرو می‌کنه. اگه بعداً تو محیط پروداکشن به مشکل خوردی، باید `python manage.py collectstatic` رو اجرا کنی.

گام‌های بعدی: وب‌سایت تو حالا زنده‌ست!

تبریک می‌گم! تو الان یک وب‌سایت ساده با جنگو ساختی. این فقط شروع راه بود. جنگو دنیای بزرگی داره و کلی قابلیت دیگه هست که می‌تونی کشف کنی:

* **جزئیات بیشتر در مورد مدل‌ها:** روابط یک به چند، چند به چند، فیلدهای مختلف.
* **فرم‌ها:** برای دریافت اطلاعات از کاربر (مثلاً ثبت‌نام، کامنت گذاشتن).
* **احراز هویت:** ساخت سیستم لاگین/لاگ اوت برای کاربران.
* **کلاس‌بیسد ویوها (Class-Based Views):** استفاده از کلاس‌ها به جای توابع برای ویوها که کد رو مرتب‌تر می‌کنه.
* **API ساختن:** اگه می‌خوای اپلیکیشن موبایل برای سایتت بسازی یا با فرانت‌اندهای دیگه ارتباط بگیری، `Django REST Framework` یک انتخاب عالیه.
* **دیپلوی کردن:** بردن سایتت روی سرورهای واقعی (مثل Heroku, PythonAnywhere, Vercel) تا همه بتونن ببیننش.

یادت باشه، مهمترین چیز تمرین و کنجکاوی هست. هر چی بیشتر کد بزنی و با بخش‌های مختلف جنگو ور بری، بیشتر یاد می‌گیری و سریع‌تر پیشرفت می‌کنی. جنگو یک فریم‌ورک عالی برای رسیدن به اهداف وب‌دولاپمنت شماست.

امیدوارم این آموزش برات مفید بوده باشه و باهاش مسیر هیجان‌انگیز توسعه وب با جنگو رو شروع کرده باشی. هر سوالی داشتی، تو مستندات جنگو و جامعه کاربریش حتماً جوابشو پیدا می‌کنی! موفق باشی!