درک لایه template از مدل MVT در جنگو

Please login to bookmark

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

اگر بخواهیم همین متن را بسیار جذاب تر به نمایش بگذاریم باید از لایه template کمک بگیریم. این لایه به ما اجازه می‌دهد تا خروجی لایه view را به شکلی که user friendly تر باشد نمایش دهیم.

ایجاد لایه template و اتصال به view

برای ایجاد لایه template و اتصال آن به لایه view مراحل زیر را انجام می‌دهیم.

۱. ایجاد اولین App

برای استفاده از امکانات لایه template ابتدا لازم است یک app بسازیم. اینکه app چیست و به چه دردی می‌خورد را در آموزش های بعدی توضیح خواهم داد.

برای ساخت app ابتدا cmd یا Terminal را باز کرده، به مسیر پروژه ای که در بخش قبل ساخته بودیم رفته، محیط مجازی را فعال کرده و سپس دستور زیر را وارد کنید.

Linux/macOS
Windows

python startapp app_hello_django

py manage.py startapp app_hello_django

دستور فوی یک اپ به نام app_hello_django می‌سازد. بعد از اجرای این دستور، ساختار پروژه باید مشابه تصویر زیر باشد.

۲. نوشتن view

در بخش قبل، برای سادگی بیشتر، view را داخل hello_django ساختیم. این کار درست نیست و من صرفا برای سادگی بیشتر این کار را کردم. اکنون می‌خواهیم جایش را درست کنیم.

فایل views را از داخل hello_django پاک کنید و آن را در app_hello_django قرار دهید. مشابه زیر

اکنون چون فایل view.py را به app_hello_django منتقل کردیم، باید مسیر آن را در فایل urls.py اصلاح کنیم.

"""
URL configuration for hello_django project.

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/5.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from app_hello_django.views import hello_django

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello-django', hello_django)
]

"""
URL configuration for hello_django project.

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/5.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from app_hello_django.views import hello_django

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello-django', hello_django)
]

۳. ایجاد لایه template

در app_hello_django یک پوشه به نام templates بسازید. دقت کنید که s را در انتهای آن قرار داده باشید.

۴. ایجاد اولین template

یک فایل به نام hello_django.html در پوشه templates بسازید و کد زیر را در آن قرار دهید.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Django</title>
    <!-- فونت زیبای Poppins از گوگل -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0b0c10; /* پس‌زمینه تیره برای کنتراست بیشتر */
            font-family: 'Poppins', sans-serif;
            overflow: hidden;
        }

        .hello {
            font-size: clamp(3rem, 10vw, 6rem); /* اندازه واکنش‌گرا */
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3rem;
            /* گرادیان متحرک برای متن */
            background: linear-gradient(270deg, #0f0, #00ff88, #0f0, #00cc44);
            background-size: 800% 800%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent; /* متن شفاف برای نمایش گرادیان */
            color: transparent; /* fallback */
            /* دو انیمیشن همزمان: حرکت گرادیان + ورود */
            animation: gradientShift 4s ease infinite, fadeInScale 1.5s ease-out;
        }

        /* حرکت گرادیان و تغییر سایه درخشان */
        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
                text-shadow: 0 0 20px rgba(0, 255, 136, 0.7),
                             0 0 40px rgba(0, 255, 100, 0.5);
            }
            50% {
                background-position: 100% 50%;
                text-shadow: 0 0 30px rgba(0, 255, 200, 0.9),
                             0 0 60px rgba(0, 255, 136, 0.7);
            }
            100% {
                background-position: 0% 50%;
                text-shadow: 0 0 20px rgba(0, 255, 136, 0.7),
                             0 0 40px rgba(0, 255, 100, 0.5);
            }
        }

        /* انیمیشن ورود: محو شدن و بزرگ شدن */
        @keyframes fadeInScale {
            0% {
                opacity: 0;
                transform: scale(0.5);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <h1 class="hello">Hello Django</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Django</title>
    <!-- فونت زیبای Poppins از گوگل -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0b0c10; /* پس‌زمینه تیره برای کنتراست بیشتر */
            font-family: 'Poppins', sans-serif;
            overflow: hidden;
        }

        .hello {
            font-size: clamp(3rem, 10vw, 6rem); /* اندازه واکنش‌گرا */
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3rem;
            /* گرادیان متحرک برای متن */
            background: linear-gradient(270deg, #0f0, #00ff88, #0f0, #00cc44);
            background-size: 800% 800%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent; /* متن شفاف برای نمایش گرادیان */
            color: transparent; /* fallback */
            /* دو انیمیشن همزمان: حرکت گرادیان + ورود */
            animation: gradientShift 4s ease infinite, fadeInScale 1.5s ease-out;
        }

        /* حرکت گرادیان و تغییر سایه درخشان */
        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
                text-shadow: 0 0 20px rgba(0, 255, 136, 0.7),
                             0 0 40px rgba(0, 255, 100, 0.5);
            }
            50% {
                background-position: 100% 50%;
                text-shadow: 0 0 30px rgba(0, 255, 200, 0.9),
                             0 0 60px rgba(0, 255, 136, 0.7);
            }
            100% {
                background-position: 0% 50%;
                text-shadow: 0 0 20px rgba(0, 255, 136, 0.7),
                             0 0 40px rgba(0, 255, 100, 0.5);
            }
        }

        /* انیمیشن ورود: محو شدن و بزرگ شدن */
        @keyframes fadeInScale {
            0% {
                opacity: 0;
                transform: scale(0.5);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <h1 class="hello">Hello Django</h1>
</body>
</html>

۵. اتصال view به template

برای اینکه templage به view وصل شود، محتوای فایل views.py را به شکل زیر تغییر دهید.

from django.http import render

def hello_django(request):
    return render(request, "hello_django.html")

from django.http import render

def hello_django(request):
    return render(request, "hello_django.html")

با استفاده از کد بالا، تابع hello_django در لایه viewمی‌فهمد که باید به فایل hello-django.htm در لایه template وصل شود.

۶. مشاهده خروجی

اکنون آدرس http://127.0.0.1:8000/hello-django را در مرورگر خود باز کنید. خروجی ارور خواهد داشت و مشابه زیر خواهد بود.

در این ارور django می‌گوید که نتوانسته فایل hello-django.html را پیدا کند. درواقع جنگو در مسیر هایی که در کادر قرمز مشخص کرده ام به دنبال این فایل گشته ولی آن را پیدا نکرده است. دلیل این ارور این است که app را نصب نکرده ایم. برای نصب app کافیست عبارت app_hello_django را به INSALLED_APPS در settings.py اضافه کنیم.

# settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app_hello_django',
]

# settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app_hello_django',
]

عمدا این بخش را طوری پیش بردم که این ارور رخ بدهد زیرا بسیاری از افراد به این ارور بر می‌خورند اما نمی‌دانند که چیست و چطور باید آن را حل کرد.

اکنون دوباره سعی کنید آدرس http://127.0.0.1:8000/hello-django را باز کنید. این بار باید خروجی مشابه زیر باشد. در اینصورت به شما تبریک می‌گویم. اولین تمپلیت خود را با موفقیت در جنگو ایجاد کردید.

تعامل template و view

تا اینجا صرفا template را به view وصل کردیم اما کنترل خاصی روی آن نداشتیم. اکنون برای اینکه درک کنید که در پروژه های تجاری، این تعامل چطور بین view و template برقرار می‌شود، views.py را مطابق زیر تغییر دهید.

from django.shortcuts import render
from datetime import datetime

def hello_django(request):
    now = datetime.now()
    context = {
        'now': now
    }
    return render(request, "hello_django.html", context)

from django.shortcuts import render
from datetime import datetime

def hello_django(request):
    now = datetime.now()
    context = {
        'now': now
    }
    return render(request, "hello_django.html", context)

بیایید ببینیم در کد بالا چه اتفاقی افتاده است.

در خط ۲ ماژول datetime را ایمپورت کردیم.
در خط ۵ تا ۸ زمان کنونی را در یک دیکشنری ذخیره کرده ایم.
در خط ۹ آن دیکشنری را به سمت template ارسال کرده ایم.

در کد بالا امکان ارسال زمان کنونی را به تمپلیت فراهم کردیم. حالا باید کاری کنیم که تمپلیت بتواند آن را نمایش دهد. بدین منظور در فایل hello_django.html عبارت hello django را با {{ now }} جایگزین کنید.

<body>
    <h1 class="hello">{{ now }}</h1>
</body>

<body>
    <h1 class="hello">{{ now }}</h1>
</body>

خروجی چیزی شبیه زیر خواهد بود. هر بار که صفحه را رفرش کنید، زمان کنونی نمایش داده خواهد شد.

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

Please login to bookmark

پیشرفت شما در «دوره آموزش هسته جنگو (درک مدل MVT)» (75%)

بعدی

درک لایه model

قبلی

درک لایه view

نظرات

دیدگاهتان را بنویسید لغو پاسخ

You must be logged in to post a comment.

تمرین

پاسخ

پیشرفت

درک لایه template از مدل MVT در جنگو

ایجاد لایه template و اتصال به view

۱. ایجاد اولین App

۲. نوشتن view

۳. ایجاد لایه template

۴. ایجاد اولین template

۵. اتصال view به template

۶. مشاهده خروجی

تعامل template و view

دیدگاهتان را بنویسید لغو پاسخ

سرفصل دوره

سرفصل دوره

تمرین

پاسخ تمرین ها

اشتراک گذاری

چرا بهتره از فیلترشکن استفاده کنید؟

تنظیمات