October 19, 2026

Django Templates and Template Language: Complete Beginner's Guide with Practical Examples

1. Introduction to Django Templates

Django Templates का उपयोग website के user interface को बनाने के लिए किया जाता है। HTML से हम webpage का structure बनाते हैं, CSS से design करते हैं और Django Template Language (DTL) से HTML के अंदर dynamic data दिखाते हैं।

उदाहरण के लिए, किसी Student Management System में हर student का नाम manually HTML में लिखने के बजाय database से प्राप्त करके दिखाया जा सकता है।

Django Templates के मुख्य फायदे:

• Dynamic data display करना।

• Python से HTML को अलग रखना।

• Conditions और loops का उपयोग करना।

• Common header, footer और navbar को reuse करना।

• एक ही template को अलग-अलग data के साथ उपयोग करना।

2. Django App में Templates Folder बनाना

मान लीजिए आपके Django project का नाम school_project है और app का नाम students है।

App के अंदर इस प्रकार folder बनाएं:

school_project/
├── manage.py
├── school_project/
│   ├── settings.py
│   └── urls.py
└── students/
    ├── views.py
    ├── urls.py
    └── templates/
        └── students/
            └── home.html

students/templates/students/home.html file बनाएं।

इसमें HTML लिखें:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Home</title>
</head>
<body>
    <h1>Welcome to Student Management System</h1>
    <p>This page is rendered using a Django template.</p>
</body>
</html>

3. View से Template को Display करना

students/views.py में लिखें:

from django.shortcuts import render

def home(request):
    return render(request, 'students/home.html')

अब students/urls.py बनाएं या पहले से है तो update करें:

from django.urls import path
from . import views

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

Project की school_project/urls.py file में app का URL include करें:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('students.urls')),
]

Server चलाएं:

python manage.py runserver

Browser में http://127.0.0.1:8000/ खोलें।

Process: Browser request → URL pattern → View function → Template rendering → HTML response.

4. Django Template Variables

Template variables का उपयोग view से भेजे गए data को HTML में दिखाने के लिए होता है।

students/views.py:

from django.shortcuts import render

def home(request):
    context = {
        'student_name': 'Rahul',
        'course': 'Django Development',
        'city': 'Raipur',
    }

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

home.html:

<h1>Student Details</h1>

<p>Name: {{ student_name }}</p>
<p>Course: {{ course }}</p>
<p>City: {{ city }}</p>

यहाँ {{ student_name }} एक template variable है। Django इसे view से मिले वास्तविक value से replace करता है।

ध्यान दें: {{ }} के अंदर सामान्यतः variable या filter expression लिखा जाता है, Python statement नहीं।

5. Django Template Filters

Filters का उपयोग template में value का presentation बदलने के लिए किया जाता है।

Common filters

<p>{{ student_name|upper }}</p>
<p>{{ student_name|lower }}</p>
<p>{{ student_name|title }}</p>
<p>{{ description|truncatewords:5 }}</p>
<p>{{ student_name|default:"Guest" }}</p>

यदि student_name की value rahul kumar है, तो upper इसे RAHUL KUMAR दिखाएगा।

कुछ उपयोगी filters:

• upper — text को uppercase में दिखाता है।

• lower — text को lowercase में दिखाता है।

• title — शब्दों के पहले अक्षर को uppercase करने में मदद करता है।

• default — value खाली या false मानी जाने पर fallback value देता है।

• date — date को चुने हुए format में दिखाता है।

• length — list या string की length देता है।

• truncatewords — text को निर्धारित शब्दों तक सीमित करता है।

Date filter का उदाहरण:

<p>{{ today|date:"d-m-Y" }}</p>

यह तभी काम करेगा जब view से today नाम का date value भेजा गया हो।

6. Django Template Tags

Template tags {% %} syntax का उपयोग करते हैं। इनसे conditions, loops, inheritance और दूसरे template operations किए जा सकते हैं।

Variable और tag में अंतर:

{{ student_name }}

यह variable display करता है।

{% if student_name %}
    <p>Student name is available.</p>
{% endif %}

यह condition check करता है।

7. If-Else Condition

जब data के अनुसार अलग content दिखाना हो, तब if, elif और else उपयोग करें।

{% if marks >= 80 %}
    <p>Grade: A</p>
{% elif marks >= 60 %}
    <p>Grade: B</p>
{% elif marks >= 40 %}
    <p>Grade: C</p>
{% else %}
    <p>Needs Improvement</p>
{% endif %}

View में marks भेजना आवश्यक है:

def home(request):
    context = {
        'marks': 85,
    }

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

Django Template Language में सामान्य Python statements सीधे execute नहीं किए जाते। Conditions template की supported syntax में लिखें।

8. For Loop से Data Display करना

यदि कई students की list दिखानी हो, तो हर student का HTML manually लिखने की जरूरत नहीं है।

students/views.py:

from django.shortcuts import render

def student_list(request):
    students = [
        {'name': 'Rahul', 'course': 'Django'},
        {'name': 'Priya', 'course': 'Python'},
        {'name': 'Amit', 'course': 'HTML and CSS'},
    ]

    return render(
        request,
        'students/student_list.html',
        {'students': students}
    )

students/templates/students/student_list.html:

<h1>Student List</h1>

<ul>
    {% for student in students %}
        <li>
            {{ student.name }} - {{ student.course }}
        </li>
    {% empty %}
        <li>No students found.</li>
    {% endfor %}
</ul>

{% empty %} तब चल सकता है जब loop की list खाली हो।

ध्यान दें: इस उदाहरण में data Python list से आ रहा है, database से नहीं। Database integration आगे के modules में सीखी जा सकती है।

9. Template Inheritance क्या है?

एक website के कई pages पर समान navbar, header, footer और layout होता है। हर page में वही HTML दोबारा लिखने से maintenance कठिन हो जाता है।

Template inheritance में हम एक base template बनाते हैं और दूसरे templates उसमें अपना content जोड़ते हैं।

Suggested structure:

students/
└── templates/
    └── students/
        ├── base.html
        ├── home.html
        └── about.html

Step 1: base.html बनाएं

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Student Portal{% endblock %}</title>
</head>
<body>

    <header>
        <h1>Student Management System</h1>

        <nav>
            <a href="/">Home</a>
            <a href="/about/">About</a>
        </nav>
    </header>

    <main>
        {% block content %}
        {% endblock %}
    </main>

    <footer>
        <p>Copyright Student Portal</p>
    </footer>

</body>
</html>

Step 2: home.html बनाएं

{% extends 'students/base.html' %}

{% block title %}
Home - Student Portal
{% endblock %}

{% block content %}
    <h2>Welcome to Home Page</h2>
    <p>This content comes from home.html.</p>
{% endblock %}

Step 3: about.html बनाएं

{% extends 'students/base.html' %}

{% block title %}
About - Student Portal
{% endblock %}

{% block content %}
    <h2>About Us</h2>
    <p>Learn more about our student portal.</p>
{% endblock %}

{% extends %} child template को base template से जोड़ता है। {% block %} उन हिस्सों को define करता है जिन्हें child template override कर सकता है।

इससे header और footer जैसे common parts बार-बार लिखने की जरूरत नहीं रहती।

10. Static Files: CSS और Images

CSS, JavaScript और images जैसी files को Django में static files कहा जाता है।

उदाहरण के लिए app के अंदर यह structure रखें:

students/
├── static/
│   └── students/
│       └── css/
│           └── style.css
└── templates/
    └── students/
        └── home.html

style.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f7fb;
    margin: 0;
    padding: 30px;
}

h1 {
    color: #16324f;
}

Template में CSS load करने के लिए:

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Portal</title>
    <link rel="stylesheet" href="{% static 'students/css/style.css' %}">
</head>
<body>
    <h1>Welcome to Student Portal</h1>
</body>
</html>

{% load static %} static template tag उपलब्ध कराता है। Production deployment में static files की configuration और collection अलग से आवश्यक हो सकती है।

11. Django Templates में Common Errors

Error 1: TemplateDoesNotExist

कारण: Django को मांगी गई template file नहीं मिल रही।

समाधान:

• Folder का नाम templates सही रखें।

• App के अंदर template path verify करें।

• render() में template path सही दें, जैसे students/home.html।

• App को INSTALLED_APPS में शामिल होना चाहिए, यदि app template discovery उसी पर निर्भर है।

Error 2: Variable दिखाई नहीं दे रहा

कारण: View से context में variable नहीं भेजा गया या नाम mismatch है।

समाधान: View और template दोनों में variable का नाम check करें।

return render(request, 'students/home.html', {
    'student_name': 'Rahul'
})

<p>{{ student_name }}</p>

Error 3: TemplateSyntaxError

कारण: Template tag का syntax गलत है या closing tag missing है।

गलत:

{% if student_name %}
    <p>Hello</p>

सही:

{% if student_name %}
    <p>Hello</p>
{% endif %}

Error 4: CSS Apply नहीं हो रही

समाधान:

• {% load static %} मौजूद हो।

• Static path सही हो।

• CSS file सही directory में हो।

• Browser refresh करके देखें।

• Development और production static-file configuration में अंतर समझें।

12. Frequently Asked Questions (FAQs)

Q1. Django Template क्या है?

Django Template एक HTML-based file है जिसमें variables और template tags के माध्यम से dynamic content दिखाया जा सकता है।

Q2. {{ }} और {% %} में क्या अंतर है?

{{ }} variable या expression का output दिखाने के लिए उपयोग होता है। {% %} conditions, loops, inheritance और अन्य template operations के लिए उपयोग होता है।

Q3. Template filters क्या होते हैं?

Filters data के display format को बदलते हैं, जैसे text को uppercase करना या date को format करना।

Q4. Template inheritance क्यों उपयोग करते हैं?

Common layout को reuse करने और duplicate HTML कम करने के लिए।

Q5. क्या Django Template में Python code लिख सकते हैं?

Django Template Language सामान्य Python execution environment नहीं है। इसमें केवल supported template syntax का उपयोग करना चाहिए। Business logic सामान्यतः views या दूसरे Python modules में रखा जाता है।

Q6. {% empty %} का क्या उपयोग है?

यह for loop की list खाली होने पर वैकल्पिक content दिखाने के लिए उपयोग होता है।

Q7. Static files क्या हैं?

CSS, JavaScript और images जैसी files जो website के design और frontend behavior में मदद करती हैं, static files कहलाती हैं।

13. Important Django Template Interview Questions and Answers

Q1. Django Template Language (DTL) क्या है?

DTL, Django का template syntax है जो HTML में variables, filters, tags, conditions और loops का उपयोग करने देता है।

Q2. Template variable कैसे लिखते हैं?

Double curly braces में:

{{ student_name }}

Q3. Template tag का उदाहरण दें।

{% if student_name %}
    <p>Student exists</p>
{% endif %}

Q4. Template inheritance क्या है?

एक base template में common layout रखकर child templates में अलग content जोड़ने की प्रक्रिया template inheritance कहलाती है।

Q5. {% extends %} का क्या काम है?

यह child template को base template से inherit कराता है। सामान्यतः इसे child template में सबसे पहले रखा जाता है।

Q6. {% block %} का क्या काम है?

यह base template में ऐसा section define करता है जिसे child template अपना content देकर override कर सकता है।

Q7. render() का क्या काम है?

Django का render() shortcut request, template और context data का उपयोग करके rendered HTTP response देता है।

Q8. Template filter का उदाहरण दें।

{{ student_name|upper }}

यह student name को uppercase में दिखाता है।

Q9. Django static files क्या हैं?

CSS, JavaScript और images जैसी frontend assets static files कहलाती हैं।

Q10. TemplateDoesNotExist error क्यों आता है?

जब Django template को locate नहीं कर पाता, तब यह error आ सकता है। Template path, folder structure और app configuration check करनी चाहिए।

14. Practical Assignment

एक छोटा Student Portal बनाएं जिसमें:

1. Home page पर welcome message दिखे।

2. View से student name, course और city भेजें।

3. Template variables का उपयोग करके details दिखाएं।

4. upper और default filters का उपयोग करें।

5. Marks के आधार पर if-else से grade दिखाएं।

6. तीन students की list for loop से दिखाएं।

7. खाली list के लिए {% empty %} का उपयोग करें।

8. base.html में common navbar और footer बनाएं।

9. Home और About pages को template inheritance से जोड़ें।

10. Static CSS file से page का design बदलें।

15. Conclusion

इस module में आपने Django Templates, Template Variables, Filters, Tags, Conditions, Loops, Template Inheritance और Static Files की basics सीखीं। इन concepts की मदद से आप reusable और dynamic web pages बना सकते हैं।

अगले module में हम Django Models and Database Basics सीखेंगे, जिसमें model बनाना, fields समझना और database के साथ Django का connection समझना शामिल होगा।