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

سلام رفیق برنامه‌نویس! 👋 دنبال یه راه سریع و کارآمد برای راه‌اندازی وب‌سایت خودت هستی؟ جَنگو (Django) یکی از قوی‌ترین و محبوب‌ترین فریم‌ورک‌های پایتونه که بهت کمک می‌کنه سریع و باکیفیت یه وب‌سایت کامل بسازی. اینجا قراره گام به گام با هم یه پروژه ساده جنگو رو بالا بیاریم، از صفر تا صد. اگه دنبال ابزارها و اسنیپت‌های پایتون کاربردی برای پروژه‌هات هستی، حتما یه سر به مخزن اسنیپت‌های پایتون ما بزن تا کلی کد آماده پیدا کنی و کارت رو راه بندازی! همینطور می‌تونی برای مشاوره یا کمک بیشتر همین الان با ما تماس بگیری: 09202232789

—

✨ نقشه راه سریع شما برای ساخت وب‌سایت با Django ✨

یه نگاه سریع به مراحلی که قراره با هم طی کنیم:

🎯 هدف	🚀 مراحل کلیدی
⚙️ آماده‌سازی محیط	نصب پایتون، Pip و محیط مجازی (Virtualenv)
🏗️ راه‌اندازی پروژه	ایجاد پروژه و اپلیکیشن جنگو
📊 معماری وب	آشنایی با Views، URLs و Templates
🎨 طراحی ظاهر	مدیریت فایل‌های استاتیک (CSS, JS)
💾 ذخیره اطلاعات	پیکربندی دیتابیس و مدل‌ها (اختیاری)
✅ اتمام و عیب‌یابی	اجرای سرور و حل مشکلات رایج

—

چرا اصلا جنگو؟ یه مرور سریع!

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

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

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

گام اول: آماده‌سازی محیط کار

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

۱. نصب پایتون و Pip

جنگو به پایتون نیاز داره. اگه پایتون ۳ رو روی سیستمت نصب نداری، از وب‌سایت رسمی python.org دانلود و نصبش کن. Pip هم که ابزار مدیریت پکیج‌های پایتونه، معمولاً با پایتون نصب میشه. برای چک کردن نصبشون، ترمینال یا CMD رو باز کن و این دستورات رو بزن:

python --version
pip --version

اگه نسخه‌ها رو دیدی، یعنی همه‌چی اوکیه.

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

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

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

mkdir mydjango_project
cd mydjango_project

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

python -m venv venv

برای فعال کردنش:

• ویندوز:

  .venvScriptsactivate

• مک/لینوکس:

  source venv/bin/activate

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

۳. نصب جنگو

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

pip install Django

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

گام دوم: ایجاد پروژه و اپلیکیشن

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

۱. ساخت پروژه جنگو

توی پوشه `mydjango_project` (همون جایی که محیط مجازی رو فعال کردی)، دستور زیر رو اجرا کن تا پروژه‌ات ساخته بشه. اسم پروژه رو می‌ذاریم `mywebsite`:

django-admin startproject mywebsite .

نقطه آخر دسترو خیلی مهمه! این باعث میشه پوشه پروژه داخل `mydjango_project` ساخته بشه، نه یه پوشه دیگه. الان ساختار فایل‌هات اینجوریه:

mydjango_project/
├── venv/
├── mywebsite/
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py
    

`manage.py` یه فایل جادوییه که باهاش کارهای مدیریتی پروژه مثل اجرای سرور، ساخت اپلیکیشن و کار با دیتابیس رو انجام میدی.

۲. ساخت اپلیکیشن

حالا یه اپلیکیشن داخل پروژه‌مون می‌سازیم. اسمش رو می‌ذاریم `blog`. برای این کار، باید توی پوشه اصلی پروژه (جایی که `manage.py` هست) باشی:

python manage.py startapp blog

الان یه پوشه جدید به اسم `blog` کنار `mywebsite` اضافه شده.

۳. رجیستر کردن اپلیکیشن

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

# mywebsite/settings.py
...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',  # اینجا اپلیکیشن خودت رو اضافه کن
]
...

گام سوم: ساخت اولین صفحه وب

حالا که پروژه و اپ رو ساختیم، وقتشه اولین صفحه وب‌مون رو نشون بدیم. این کار با سه تا مفهوم اصلی در جنگو انجام میشه: `Views`، `URLs` و `Templates`. این سه تا با هم معماری MVT (Model-View-Template) جنگو رو تشکیل میدن که خیلی شبیه MVC (Model-View-Controller) هست.

۱. تعریف View

`View` در جنگو یه تابع پایتونه که وقتی یه درخواست وب میاد، جواب مناسب رو برمی‌گردونه. فایل `blog/views.py` رو باز کن و این کد رو توش بذار:

# blog/views.py
from django.shortcuts import render
from django.http import HttpResponse

def home(request):
    return HttpResponse("
سلام جنگو! این اولین صفحه وب شماست.
")

def about(request):
    return render(request, 'blog/about.html', {'title': 'درباره ما'})

اینجا دو تا `view` تعریف کردیم: `home` که یه متن ساده برمی‌گردونه و `about` که قراره یه فایل HTML رو رندر کنه.

۲. پیکربندی URLها

جنگو باید بدونه که هر URL به کدوم `View` مربوط میشه. این کار توی فایل‌های `urls.py` انجام میشه. ما دو تا فایل `urls.py` داریم: یکی برای پروژه (`mywebsite/urls.py`) و یکی برای اپلیکیشن (`blog/urls.py`).

اول، یه فایل `urls.py` جدید توی پوشه `blog` بساز (اگه وجود نداره) و این کد رو توش بذار:

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

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

اینجا گفتیم که اگه کسی به آدرس روت (`”`) رفت، `views.home` صدا زده بشه و اگه به `about/` رفت، `views.about` صدا زده بشه. `name` هم برای ارجاع دادن به URL توی کدهای دیگه استفاده میشه.

حالا باید `urls.py` اپلیکیشن `blog` رو به `urls.py` اصلی پروژه وصل کنیم. فایل `mywebsite/urls.py` رو باز کن و این تغییرات رو اعمال کن:

# mywebsite/urls.py
from django.contrib import admin
from django.urls import path, include # include رو اضافه کن

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

`path(”, include(‘blog.urls’))` یعنی هر درخواستی که به آدرس روت (`”`) اومد، به فایل `blog/urls.py` ارجاع داده بشه.

۳. ساخت Template (فایل HTML)

برای اینکه `views.about` بتونه یه صفحه HTML رو نشون بده، باید یه پوشه `templates` داخل پوشه `blog` بسازیم و بعد یه پوشه دیگه به اسم `blog` داخلش. اینجوری جنگو راحت‌تر می‌تونه تمپلیت‌ها رو پیدا کنه و از قاطی شدن اسم‌ها جلوگیری میشه.

ساختار پوشه‌ها:

blog/
├── migrations/
├── templates/
│   └── blog/
│       └── about.html
├── __init__.py
├── admin.py
├── apps.py
├── models.py
├── tests.py
└── views.py
    

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

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>درباره ما - {{ title }}</title>
    <!-- اینجا می‌تونی فایل‌های CSS رو اضافه کنی -->
    <link rel="stylesheet" href="{% static 'blog/style.css' %}">
</head>
<body>
    <h1>این صفحه {{ title }} است!</h1>
    <p>این یک پروژه ساده جنگو است.</p>
    <a href="{% url 'home' %}">بازگشت به صفحه اصلی</a>
</body>
</html>

نکته: `{{ title }}` داده‌ای هست که از `views.py` به تمپلیت فرستادیم. `{% url ‘home’ %}` هم راهی برای ارجاع به URL به صورت دینامیک هست.

گام چهارم: مدیریت فایل‌های استاتیک (CSS, JS, Images)

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

۱. ساخت پوشه Static

داخل پوشه `blog`، یه پوشه به اسم `static` بساز و داخلش یه پوشه دیگه با اسم `blog` (مثل تمپلیت‌ها، برای جلوگیری از تداخل اسم).

ساختار پوشه‌ها:

blog/
├── migrations/
├── static/
│   └── blog/
│       └── style.css
├── templates/
│   └── blog/
│       └── about.html
...
    

حالا فایل `blog/static/blog/style.css` رو بساز و یه استایل ساده بهش بده:

/* blog/static/blog/style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 20px;
    text-align: center;
}

h1 {
    color: #2c3e50;
}

a {
    color: #3498db;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

۲. بارگذاری فایل‌های استاتیک در Template

برای اینکه تمپلیت `about.html` بتونه فایل `style.css` رو پیدا کنه، باید توی خط اول تمپلیت، تگ `{% load static %}` رو اضافه کنی:

{% load static %} <!-- این خط رو اضافه کن -->
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>درباره ما - {{ title }}</title>
    <link rel="stylesheet" href="{% static 'blog/style.css' %}">
</head>
<body>
    <h1>این صفحه {{ title }} است!</h1>
    <p>این یک پروژه ساده جنگو است.</p>
    <a href="{% url 'home' %}">بازگشت به صفحه اصلی</a>
</body>
</html>

حالا CSSت باید روی صفحه `about` اعمال بشه.

گام پنجم: راه‌اندازی دیتابیس و پنل ادمین (اختیاری اما مفید!)

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

۱. اجرای مهاجرت‌های دیتابیس (Migrations)

جنگو یه سری مدل پیش‌فرض (مثل مدل کاربران، گروه‌ها و …) داره که برای اینکه توی دیتابیس ایجاد بشن، باید دستور `migrate` رو اجرا کنی. اول باید مطمئن بشی که توی پوشه `mydjango_project` (جایی که `manage.py` هست) قرار داری:

python manage.py makemigrations
python manage.py migrate

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

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

برای اینکه بتونی وارد پنل ادمین بشی، به یه سوپریوزر (کاربر با دسترسی کامل) نیاز داری:

python manage.py createsuperuser

اسم کاربری (Username)، ایمیل (Email – اختیاری) و رمز عبور (Password) رو وارد کن.

۳. تعریف مدل ساده (اختیاری)

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

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

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    date_posted = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

بعد از اضافه کردن مدل، دوباره باید `makemigrations` و `migrate` رو اجرا کنی:

python manage.py makemigrations blog
python manage.py migrate

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

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

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

admin.site.register(Post)

گام ششم: اجرای سرور و دیدن نتیجه!

بالاخره رسیدیم به شیرین‌ترین قسمت! الان می‌تونی سرور توسعه جنگو رو اجرا کنی و نتیجه کارت رو ببینی. مطمئن شو که محیط مجازی فعال و توی پوشه `mydjango_project` (کنار `manage.py`) هستی:

python manage.py runserver

اگه همه چی درست باشه، توی ترمینال یه پیام می‌بینی که سرور روی `http://127.0.0.1:8000/` اجرا شده.

حالا مرورگرت رو باز کن و به آدرس `http://127.0.0.1:8000/` برو. باید صفحه “سلام جنگو! این اولین صفحه وب شماست.” رو ببینی.
اگه به `http://127.0.0.1:8000/about/` بری، صفحه “درباره ما” با استایل CSSی که تعریف کردی رو می‌بینی.
و برای پنل ادمین، برو به `http://127.0.0.1:8000/admin/` و با اطلاعات سوپریوزری که ساختی وارد شو. اونجا می‌تونی مدل `Post` خودت رو ببینی و پست‌های جدید اضافه کنی.

اینجا یه مقایسه سریع از کاربرد سرور توسعه و سرور پروداکشن داریم:

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

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

۱. خطای “ModuleNotFoundError: No module named ‘django'”

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

۲. خطای “KeyError: ‘wsgi.input'” یا مشکل در اجرای `runserver`

* **مشکل:** این خطا گاهی به خاطر تداخل پکیج‌ها یا مشکلات نصب پیش میاد.
* **راه حل:**
1. مطمئن شو که آخرین نسخه `pip` و `setuptools` رو داری: `pip install –upgrade pip setuptools`
2. محیط مجازی رو پاک کن و دوباره بساز: `deactivate`، بعد پوشه `venv` رو پاک کن و از اول مراحل ساخت محیط مجازی و نصب جنگو رو طی کن.

۳. صفحه ۴۰۴ (Not Found) یا URL کار نمی‌کنه

* **مشکل:** URLهای شما درست پیکربندی نشده‌اند.
* **راه حل:**
1. فایل `mywebsite/urls.py` رو چک کن که `include(‘blog.urls’)` درست اضافه شده باشه.
2. فایل `blog/urls.py` رو چک کن که `path(”, views.home, name=’home’)` و `path(‘about/’, views.about, name=’about’)` رو درست نوشتی.
3. حتماً توی `mywebsite/settings.py` اپلیکیشن `blog` رو به `INSTALLED_APPS` اضافه کرده باشی. یه بار دیگه اسم `blog` رو چک کن که درست باشه.

۴. استایل‌های CSS اعمال نمیشن یا عکس‌ها لود نمیشن

* **مشکل:** فایل‌های استاتیک درست پیدا و سرو نمیشن.
* **راه حل:**
1. مطمئن شو که `{% load static %}` رو در ابتدای فایل `about.html` گذاشتی.
2. مسیر `href=”{% static ‘blog/style.css’ %}”` رو دقیقاً چک کن. باید با ساختار پوشه `blog/static/blog/style.css` مطابقت داشته باشه.
3. در حالت توسعه (با `runserver`) جنگو خودش فایل‌های استاتیک رو سرو می‌کنه. اما اگه تغییرات جدید دادی و نشون نمیده، کش مرورگرت رو پاک کن یا با Ctrl+Shift+R رفرش کن.
4. پوشه `static` و زیرپوشه `blog` رو دقیقاً با همین اسم‌ها ساخته باشی.

۵. خطای “TemplateDoesNotExist”

* **مشکل:** جنگو نمی‌تونه فایل HTML رو پیدا کنه.
* **راه حل:**
1. مسیر پوشه `templates` رو دقیقاً چک کن: `blog/templates/blog/about.html`.
2. اسپِلینگ (املاء) اسم فایل `about.html` رو چک کن.
3. توی `views.py` مطمئن شو که `render(request, ‘blog/about.html’, …)` رو درست نوشتی.

اگه به مشکلی خوردی که اینجا نبود، سرچ کردن پیام خطا توی گوگل و Stack Overflow معمولاً راه چاره‌ست. جامعه جنگو خیلی قوی و پاسخگو هست.

کلام آخر

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

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