روز ۸: آشنایی کامل با Template Engine در جنگو و کار با HTML
یکی از مهم‌ترین بخش‌های هر فریم‌ورک وب، سیستم نمایش خروجی به کاربر است و در جنگو این وظیفه بر عهده Template Engine قرار دارد. Template Engine در جنگو به شما اجازه می‌دهد کدهای HTML را به شکلی تمیز و ساخت‌یافته با داده‌های سمت سرور ترکیب کنید، بدون اینکه منطق برنامه‌نویسی با لایه نمایش قاطی شود. در روز هشتم دوره آموزش جنگو، تمرکز ما روی درک عمیق Template Engine و نحوه استفاده صحیح از HTML در قالب‌های جنگو است. اگر این بخش را درست یاد بگیرید، صفحات سایت شما هم خواناتر می‌شوند و هم نگهداری پروژه در آینده بسیار ساده‌تر خواهد شد.
Template Engine چیست و چه نقشی در معماری جنگو دارد؟
Template Engine در جنگو ابزاری است که داده‌های ارسال‌شده از View را گرفته و آن‌ها را داخل فایل‌های HTML قرار می‌دهد تا خروجی نهایی به کاربر نمایش داده شود. جنگو از معماری MVT استفاده می‌کند و Template دقیقاً همان بخش View در معماری MVC محسوب می‌شود که وظیفه نمایش را بر عهده دارد. این جداسازی باعث می‌شود طراح رابط کاربری بتواند روی HTML و ظاهر سایت کار کند و برنامه‌نویس بک‌اند روی منطق برنامه تمرکز داشته باشد. همین تفکیک مسئولیت‌ها یکی از دلایل محبوبیت جنگو در پروژه‌های تیمی و بزرگ است.
ساختار فایل‌های Template در جنگو
برای استفاده از Templateها در جنگو، معمولاً داخل هر اپلیکیشن یک پوشه به نام templates ایجاد می‌شود. داخل این پوشه، بهتر است یک فولدر هم‌نام با اپلیکیشن بسازید تا از تداخل Templateها در پروژه‌های بزرگ جلوگیری شود. این ساختار به جنگو کمک می‌کند تا قالب‌ها را راحت‌تر پیدا کند و پروژه شما نیز حرفه‌ای‌تر به نظر برسد. رعایت این استاندارد در ابتدای کار، جلوی بسیاری از مشکلات آینده را می‌گیرد و باعث می‌شود کدها نظم منطقی داشته باشند.
نوشتن اولین Template HTML در جنگو
یک Template در جنگو در اصل یک فایل HTML معمولی است که می‌تواند شامل تگ‌های مخصوص جنگو نیز باشد. این تگ‌ها به شما اجازه می‌دهند داده‌های داینامیک را نمایش دهید، شرط بنویسید یا روی لیست‌ها حلقه بزنید. برای مثال، یک Template ساده می‌تواند عنوان صفحه و یک متن توضیحی را که از View دریافت کرده نمایش دهد. همین قابلیت ساده پایه‌ی ساخت تمام صفحات داینامیک در جنگو است.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</body>
</html>
در این مثال، متغیرهای title و description از View به Template ارسال شده‌اند و جنگو آن‌ها را در زمان اجرا جایگزین می‌کند.
ارتباط Template با View در جنگو
Templateها به‌تنهایی اجرا نمی‌شوند و همیشه از طریق View به کاربر نمایش داده می‌شوند. View داده‌ها را آماده می‌کند و با استفاده از تابع render، Template موردنظر را به همراه context به جنگو تحویل می‌دهد. این ارتباط باعث می‌شود منطق برنامه در View باقی بماند و Template فقط وظیفه نمایش را انجام دهد. این رویکرد هم امنیت پروژه را افزایش می‌دهد و هم خوانایی کدها را به شکل چشمگیری بهتر می‌کند.
from django.shortcuts import render
def home_view(request):
context = {
'title': 'صفحه اصلی',
'description': 'به سایت آموزشی Django خوش آمدید'
}
return render(request, 'app/home.html', context)در این کد، View اطلاعات لازم را آماده کرده و به Template ارسال می‌کند تا خروجی نهایی ساخته شود.
استفاده از Template Tags در جنگو
Template Tags یکی از قدرتمندترین بخش‌های Template Engine در جنگو هستند. این تگ‌ها به شما اجازه می‌دهند منطق ساده‌ای مانند شرط‌ها و حلقه‌ها را داخل HTML پیاده‌سازی کنید، بدون اینکه وارد دنیای پیچیده پایتون شوید. استفاده درست از Template Tags باعث می‌شود صفحات شما کاملاً داینامیک باشند و بتوانند با داده‌های مختلف سازگار شوند. این ویژگی در سایت‌های خبری، فروشگاهی و آموزشی اهمیت بسیار زیادی دارد.
{% if user.is_authenticated %}
<p>خوش آمدید {{ user.username }}</p>
{% else %}
<p>لطفاً وارد حساب کاربری خود شوید</p>
{% endif %}این مثال نشان می‌دهد چگونه می‌توان بر اساس وضعیت کاربر، محتوای متفاوتی را نمایش داد.
مفهوم Template Inheritance و اهمیت آن
Template Inheritance یا ارث‌بری قالب‌ها یکی از مفاهیم کلیدی در جنگو است که باعث می‌شود کدنویسی HTML بسیار بهینه‌تر و حرفه‌ای‌تر شود. با استفاده از این قابلیت، می‌توانید یک قالب پایه بسازید و قالب‌های دیگر از آن ارث‌بری کنند. این روش به‌شدت از تکرار کد جلوگیری می‌کند و مدیریت تغییرات ظاهری سایت را ساده‌تر می‌سازد. در پروژه‌های واقعی، استفاده از Template Inheritance تقریباً اجتناب‌ناپذیر است.
<!-- base.html -->
<html>
<body>
{% block content %}{% endblock %}
</body>
</html><!-- home.html -->
{% extends "base.html" %}
{% block content %}
<h1>صفحه اصلی</h1>
{% endblock %}با این ساختار، هر تغییری در قالب پایه روی تمام صفحات اعمال می‌شود.
بهترین روش‌ها در کار با HTML و Template در جنگو
برای اینکه Templateهای شما تمیز، قابل نگهداری و سئوپسند باشند، بهتر است از تگ‌های HTML استاندارد، ساختار معنایی مناسب و نام‌گذاری واضح استفاده کنید. همچنین توصیه می‌شود منطق پیچیده را به View منتقل کرده و Template را تا حد ممکن ساده نگه دارید. این کار هم سرعت توسعه را بالا میبرد و هم باعث می‌شود تیم‌های مختلف راحت‌تر روی پروژه کار کنند. رعایت این اصول، تفاوت یک پروژه حرفه‌ای با یک پروژه آماتور را مشخص می‌کند.
جمع‌بندی روز هشتم دوره جنگو
در روز هشتم یاد گرفتیم Template Engine در جنگو چیست، چگونه با HTML کار می‌کند و چطور داده‌ها از View به Template منتقل می‌شوند. همچنین با Template Tags و مفهوم Template Inheritance آشنا شدیم که نقش مهمی در ساخت صفحات داینامیک و قابل توسعه دارند. تسلط بر این مباحث، پایه‌ی طراحی رابط کاربری حرفه‌ای در جنگو است و بدون آن، ساخت پروژه‌های واقعی تقریباً غیرممکن خواهد بود.