ورود به پنل کاربری

Template و رابط کاربری در Django

  • فریبا محمدی
  • مرداد 1405
  • آموزش جنگو
  • 25 دقیقه

در سه درس قبلی، با ساخت پروژه، ساختار Django، URL و View آشنا شدیم. حالا می‌خواهیم کاری کنیم که به‌جای اینکه View فقط یک متن ساده به مرورگر برگرداند، یک صفحه HTML واقعی به کاربر نمایش دهد.

فهرست مطالب

Template چیست؟

Template همان بخشی است که ظاهر و محتوای صفحه‌ی وب را مشخص می‌کند. مثلاً فرض کنید می‌خواهیم صفحه‌ای برای سایت آزمون پلاس داشته باشیم که بنویسد:

به آزمون پلاس خوش آمدید

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

ساخت اولین Template

ابتدا در پروژه‌ی خودمان یک پوشه به نام templates می‌سازیم. یعنی در کنار فایل manage.py؛ و داخل این پوشه یک فایل با نام home.html ایجاد می‌کنیم. حالا داخل home.html فعلاً یک HTML ساده می‌نویسیم:

				
					<!DOCTYPE html>
<html>
<head>
    <title>آزمون پلاس</title>
</head>
<body>

    <h1>به آزمون پلاس خوش آمدید</h1>
    <p>مرجع آموزش و آزمون</p>

</body>
</html>

تا اینجا فقط یک فایل HTML ساخته‌ایم. اما Django هنوز نمی‌داند این فایل کجاست. باید به جنگو بگوییم که پوشه‌ی templates را پیدا کند.

معرفی Template به Django

فایل setting.py پروژه زیر را باز کنید. در آن قسمت TEMPLATES را پیدا کنید. بخش مهم آن چیزی شبیه این است:

TEMPLATES = [
{
‘BACKEND’: ‘django.template.backends.django.DjangoTemplates’,
‘DIRS’: [],
‘APP_DIRS’: True,
…
},
]

ما باید مسیر پوشه‌ی templates را در DIRS قرار دهیم. پس آن را به این شکل تغییر می‌دهیم:

‘DIRS’: [BASE_DIR / ‘templates’],

این خط به به Django می‌گوید که اگر دنبال Template هستی، داخل پوشه‌ی templates در ریشه‌ی پروژه جستجو کن.

تغییر دادن View

اگر یادتان باشد در درس گذشته در اپلیکیشنمان در فایل view.py یک ویو به نام home ایجاد کردیم:

from django.http import HttpResponse
 
def home(request):
return HttpResponse(“Welcome to Azmoon Plus”)
 

حالا می‌خواهیم به‌جای HttpResponse، فایل home.html را نمایش دهیم. برای این کار از تابع ()render استفاده می‌کنیم:

from django.shortcuts import render
 
def home(request):
return render(request, ‘home.html’)
 

خط آخر یعنی فایل home.html را پیدا کن، آن را پردازش کن و نتیجه‌ی HTML آن را به مرورگر برگردان. حواستان باشد render از django.shortcuts ایمپورت شده باشد.

اجرای پروژه

سرور را اجرا کنید:

python manage.py runserver

بعد در مرورگر وارد شوید:

http://127.0.0.1:8000/
 

اگر همه‌چیز درست باشد، باید این صفحه را ببینید:

ارسال اطلاعات از View به Template

تا اینجا Template ما فقط اطلاعات ثابت داشت. اما در سایت واقعی، اطلاعات معمولاً باید از View بیاید. مثلاً View می‌تواند نام سایت را مشخص کند:

from django.shortcuts import render
 
def home(request):
name = “آزمون پلاس”
return render(request, ‘home.html’)
 

اما یک سؤال مهم: چطور name را از View به Template بفرستیم؟

برای این کار از چیزی به نام Context استفاده می‌کنیم.

Context چیست؟

Context در جنگو اطلاعاتی است که از View به Template ارسال می‌شود. برای مثال:

				
					def home(request):
    name = "آزمون پلاس"

    context = {
        'name': name
    }

    return render(request, 'home.html', context)
با مفهوم دیکشنری در پایتون در دوره جامع پایتون سایت آزمون پلاس آشنا شده‌اید. همانطور که می‌بینید در اینجا یک Dictionary ساخته‌ایم:
context = {
‘name’: name
}

name سمت چپ نامی است که Template با آن به اطلاعات دسترسی پیدا می‌کند. و name سمت راست متغیری است که در View داریم.

نمایش Context در Template

حالا در home.html می‌نویسیم:

<h1>به {{ name }} خوش آمدید</h1>

 

علامت‌های {{}} در Template برای نمایش مقدار متغیرها استفاده می‌شوند. بنابراین {{name}} یعنی اینکه مقدار متغیر name را نمایش بده. در نتیجه مرورگر نمایش می‌دهد: به آزمون پلاس خوش آمدید

ارسال چند متغیر

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

نکته مهم درباره نام متغیرها

نامی که داخل Context قرار می‌دهیم، همان نامی است که در Template استفاده می‌کنیم. 

context = {
    'site_name': name
}

در Template باید بنویسیم: 

{{ site_name }}

نه: 

{{ name }}
چون کلید Context، site_name است.

Template Language در Django

Django فقط HTML معمولی را نمایش نمی‌دهد؛ بلکه داخل Template می‌توانیم از دستورات مخصوص Django هم استفاده کنیم. به این قابلیت می‌گوییم: Django Template Language (DTL)

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

شرط if {% %}

حالا فرض کنیم می‌خواهیم فقط در صورتی پیام خاصی را نمایش دهیم که کاربر وارد سایت شده باشد. در Template از این ساختار استفاده می‌کنیم:

{% if condition %}
…
{% endif %}

مثلاً:

				
					{% if is_login %}
    <p>به آزمون پلاس خوش آمدید.</p>
{% endif %}

ارسال شرط از View

در views.py:

				
					def home(request):

    is_login = True

    context = {
        'is_login': is_login
    }

    return render(request, 'home.html', context)

و در home.html:

				
					{% if is_login %}
    <h2>به آزمون پلاس خوش آمدید</h2>
{% endif %}

چون مقدار is_login برابر True است، پیام نمایش داده می‌شود.

استفاده از else

می‌توانیم حالت دیگری هم مشخص کنیم که در صورت لاگین نبودن کاربر، پیغام دهد که به حساب کاربری خود وارد شوید:

				
					{% if is_login %}
    <p>خوش آمدید.</p>
{% else %}
    <p>لطفاً وارد حساب کاربری خود شوید.</p>
{% endif %}

استفاده از elif

مثل Python، می‌توانیم چند حالت داشته باشیم:

				
					{% if score >= 90 %}
    <p>عالی</p>

{% elif score >= 70 %}
    <p>خوب</p>

{% elif score >= 50 %}
    <p>قابل قبول</p>

{% else %}
    <p>نیاز به تلاش بیشتر</p>
{% endif %}
یک نکته مهم

Template Language شبیه Python است، اما Python نیست. یعنی نباید انتظار داشته باشیم هر چیزی که در Python می‌نویسیم، مستقیماً در Template هم قابل استفاده باشد.

حلقه for

فرض کنید در سایت آزمون پلاس چند دوره داریم که در ویو تعریف شده است. در اینصورت برای نمایش لیست آنها در تمپلیت از دستور for به شکل زیر استفاده می‌کنیم:

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

فرض کنید سایت آزمون پلاس ۲۰ صفحه داشته باشد. اگر در همه‌ی صفحات این قسمت‌ها (یعنی هدر و فوتر و محتوای صفحه) را تکرار کنیم:

<html>
<head>...</head>
<body>

    <header>...</header>

    <!-- محتوای صفحه -->

    <footer>...</footer>

</body>
</html>
کد خیلی تکراری می‌شود.  جنگو برای حل این مشکل قابلیتی به نام Template Inheritance دارد. در این حالت یک Template اصلی به نام base.html بسازیم و صفحات دیگر از آن استفاده کنند.

ساخت base.html

تا به اینجا پروژه ما فقط یک app  با نام courses دارد. داخل پوشه templates که در پوشه courses قرار دارد، یک فایل با نام base.html بسازید و داخل آن کد زیر را بنویسید:

				
					<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
</head>

<body>

    <header>
        <h1>آزمون پلاس</h1>
    </header>

    {% block content %}
    {% endblock %}

    <footer>
        <p>آزمون پلاس</p>
    </footer>

</body>
</html>

در اینجا دو block داریم:

{% block title %}{% endblock %}

و:

{% block content %}
{% endblock %}

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

استفاده از base.html در home.html

حالا home.html را به این شکل تغییر دهید:

				
					{% extends 'base.html' %}

{% block title %}
صفحه اصلی
{% endblock %}

{% block content %}

<h2>به آزمون پلاس خوش آمدید</h2>

<p>مرجع آموزش و آزمون</p>

{% endblock %}

خط اول:

{% extends 'base.html' %}

یعنی اینکه این صفحه از base.html استفاده می‌کند. به محتوای فایل base.html در پروژه آزمون پلاس توجه کنید:

حالا توجه کنید که چطور فایل home.html را با همان محتوای قبلی، تغییر دادیم:

فایل ویو view.py به همان شکل باقی می‌ماند.

نکته مهم

از این به بعد برای صفحات مختلف، دیگر لازم نیست html، head، header و footer را تکرار کنیم. مثلاً بعداً می‌توانیم داشته باشیم: 

templates/
├── base.html
├── home.html
├── courses.html
├── about.html
└── contact.html
و همه از base.html استفاده کنند. برای Appهایی که بعدا ایجاد خواهید کرد هم به همین شکل عمل کنید. برای هر App یک پوشه templates خواهید داشت.

📝 تمرین

به عنوان تمرین تمپلیت مربوط به صفحات "لیست دوره‌ها" و "درباره ما" را بسازید.

درس بعدی

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

رفتن به درس بعدی

برای شرکت در آزمون آماده‌اید؟

با ورود به پنل کاربری می‌توانید جهت ثبت نام در آزمون‌ها و دسترسی به منابع آموزشی اقدام نمایید. کارشناسان ما در اسرع وقت با شما تماس می‌گیرند.
اینجا کلیک کنید

شروع کار با Django

شروع کار با Django در دوره آموزش جامع پایتون با مفاهیمی مانند متغیرها، شرط‌ها، حلقه‌ها، توابع، کلاس‌ها، فایل‌ها و کار

ادامه مطلب »
admin آگوست 11, 2026 بدون دیدگاه

عملیات CRUD در SQLite

عملیات CRUD درSQLite در بخش قبل با مفهوم پایگاه داده، SQLite و نحوه اتصال پایتون به پایگاه داده آشنا شدیم.

ادامه مطلب »
admin آگوست 10, 2026 بدون دیدگاه

توابع در پایتون

توابع در پایتون اگر هنگام برنامه‌نویسی مجبور شوید یک قطعه کد را بارها تکرار کنید، برنامه شما طولانی، شلوغ و

ادامه مطلب »
admin آگوست 3, 2026 بدون دیدگاه

مجموعه در پایتون

مجموعه (Set) در پایتون به زبان ساده، Set مجموعه‌ای از عناصر منحصربه‌فرد (Unique) است که ترتیب مشخصی ندارد و اجازه

ادامه مطلب »
admin آگوست 1, 2026 بدون دیدگاه

تاپل در پایتون

تاپل (Tuple) در پایتون بعد از آشنایی با لیست (List)، نوبت به یکی دیگر از ساختارهای داده در پایتون یعنی

ادامه مطلب »
admin آگوست 1, 2026 بدون دیدگاه

لیست در پایتون

لیست (List) در پایتون پرکاربردترین ساختار داده​ تا اینجا یاد گرفتید که هر متغیر فقط یک مقدار را در خود

ادامه مطلب »
admin جولای 29, 2026 بدون دیدگاه

آموزش نصب پایتون

آموزش نصب پایتون و ابزارهای موردنیاز (راهنمای کامل برای ویندوز) اگر تصمیم گرفته‌اید برنامه‌نویسی را یاد بگیرید، احتمالاً نام زبان

ادامه مطلب »
admin جولای 24, 2026 بدون دیدگاه

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

دسترسی سریع

صفحه اصلی آزمون پلاس

کنکور کارشناسی ارشد

کنکور دکتری تخصصی

آموزش برنامه نویسی

وبلاگ مقالات

تماس با ما

نشانی و راه‌های ارتباطی

support@azmoonplus.com
Whatsapp Telegram Youtube Instagram
Enamad