Django Templates

Welcome to The Coding College, where we simplify programming and web development! In this tutorial, we’ll dive into Django Templates, the core feature for rendering dynamic content in Django web applications.

By the end of this guide, you’ll understand how Django templates work and how to use them effectively in your projects.

What Are Django Templates?

In Django, templates are files that define the structure and layout of the content presented to users. They typically contain HTML with placeholders for dynamic data rendered by Django views.

Django’s template engine makes it easy to separate presentation logic (what users see) from business logic (how data is processed).

Features of Django Templates

  • Dynamic Content: Use variables to display dynamic data.
  • Template Tags: Add logic such as loops and conditionals in your HTML.
  • Template Inheritance: Define a base template and extend it for consistent layouts.
  • Reusable Components: Include reusable blocks like headers and footers.

Setting Up Django Templates

Step 1: Create a templates Directory

  1. In your app directory, create a folder named templates.
  2. Inside templates, create another folder with the same name as your app (e.g., myapp). This is for better organization.

The structure should look like this:

myapp/  
    templates/  
        myapp/  
            home.html

Step 2: Configure Template Settings

Django automatically looks for templates in each app’s templates folder if the app is listed in INSTALLED_APPS. To add custom locations, update settings.py:

TEMPLATES = [  
    {  
        'BACKEND': 'django.template.backends.django.DjangoTemplates',  
        'DIRS': [BASE_DIR / "templates"],  # Custom global templates folder  
        'APP_DIRS': True,  
        'OPTIONS': {  
            'context_processors': [  
                'django.template.context_processors.debug',  
                'django.template.context_processors.request',  
                'django.contrib.auth.context_processors.auth',  
                'django.contrib.messages.context_processors.messages',  
            ],  
        },  
    },  
]

Step 3: Create and Render a Template

  • Create a Template: Inside myapp/templates/myapp/, create a file named home.html: 
<!DOCTYPE html>  
<html>  
<head>  
    <title>Welcome</title>  
</head>  
<body>  
    <h1>{{ title }}</h1>  
    <p>{{ message }}</p>  
</body>  
</html>
  • Update the View: Modify views.py to render the template: 
from django.shortcuts import render  

def home(request):  
    context = {  
        'title': "Welcome to Django Templates",  
        'message': "This is your first dynamic web page!",  
    }  
    return render(request, 'myapp/home.html', context)
  • Add a URL: Update urls.py to include the view: 
from django.urls import path  
from . import views  

urlpatterns = [  
    path('', views.home, name='home'),  
]
  • Test the Setup: Run the server and visit http://127.0.0.1:8000/. You should see your dynamic web page!

Django Template Tags

Django provides powerful template tags for adding logic to templates.

Commonly Used Template Tags

  • Variables: 
{{ variable_name }}
  • Conditionals: 
{% if condition %}  
    <p>Condition is True!</p>  
{% else %}  
    <p>Condition is False!</p>  
{% endif %}
  • Loops: 
{% for item in items %}  
    <p>{{ item }}</p>  
{% endfor %}
  • Include Tag:
    For reusable components like headers and footers: 
{% include 'myapp/header.html' %}

Template Inheritance

To maintain consistent layouts, use template inheritance.

  • Create a Base Template: 
<!DOCTYPE html>  
<html>  
<head>  
    <title>{% block title %}Django App{% endblock %}</title>  
</head>  
<body>  
    <header>{% block header %}Default Header{% endblock %}</header>  
    <main>{% block content %}{% endblock %}</main>  
    <footer>{% block footer %}Default Footer{% endblock %}</footer>  
</body>  
</html>
  • Extend the Base Template: 
{% extends 'myapp/base.html' %}  

{% block title %}Home Page{% endblock %}  

{% block content %}  
    <h1>Welcome to the Home Page!</h1>  
{% endblock %}

Best Practices for Django Templates

  1. Use Template Inheritance: Avoid repeating common elements like headers and footers.
  2. Keep Logic Minimal: Place complex logic in views or models, not templates.
  3. Organize Templates: Use app-specific folders to keep templates well-structured.
  4. Avoid Hardcoding: Use {% url %} for links and {% static %} for assets.

Why Learn Django Templates with The Coding College?

At The Coding College, we focus on delivering practical and beginner-friendly tutorials. Our step-by-step guides empower you to create professional-grade applications using Django.

Final Thoughts

Mastering Django templates is crucial for building dynamic and scalable web applications. By learning the fundamentals of template rendering, template tags, and inheritance, you’ll be well-equipped to design user-friendly web pages.

Stay tuned to The Coding College for more tutorials and resources. Let us know in the comments if you found this guide helpful or have suggestions for future topics!

Leave a Comment