Made withDjangoClip

Django Tutorial for Beginners - 14 - Templates

T

thenewboston

Creator on the Django channel

Watch on YouTube ↗

234K viewsMar 23, 201610:58 runtime

Learn how to effectively separate your Django backend logic from your front-end presentation by using templates. This tutorial demonstrates how to create and manage HTML template files within your Django app structure. You'll see how to load templates in your views, pass data…

Chapters

#django#clip#frameworks

What are Django Templates?

Templates are generic HTML files that separate your application's presentation layer from the Python backend logic. This allows web designers to create the structure and layout (the "blueprint") of a page with placeholder content, which developers can then dynamically populate with real data from the database.

Setting Up and Using Templates

The process involves creating the template file, loading it in the view, and passing data to it for rendering.

1. File Structure

By convention, Django looks for templates inside a templates directory within each app.

Create a folder named templates in your app's root directory (e.g., music/templates/).
Inside that, create another folder with the same name as your app (e.g., music/templates/music/).
Place your HTML template files inside this nested directory (e.g., music/templates/music/index.html).

Note
This namespacing (app/templates/app/) prevents template name collisions between different Django apps in the same project.

2. Loading the Template in a View

In your views.py, use the loader to get a reference to your template file.

from django.template import loader
from .models import Album

def index(request):
    all_albums = Album.objects.all()
    # 1. Load the template
    template = loader.get_template('music/index.html')

3. Passing Data with Context

Data is passed from the view to the template using a context dictionary. The keys in the dictionary become variable names accessible within the template.

    # 2. Create the context dictionary
    context = {
        'all_albums': all_albums,
    }

4. Rendering the Final HTML

The final step is to render the template with the context and the request, then return it in an HttpResponse.

from django.http import HttpResponse

# ... in the view function ...
    # 3. Render the template with context and return it
    return HttpResponse(template.render(context, request))

Django Template Language (DTL)

DTL provides syntax for embedding logic and variables directly into your HTML.

Variables

Variables are enclosed in double curly braces: {{ variable_name }}.
You can access object attributes using dot notation: {{ album.album_title }}.

<a href="/music/{{ album.id }}/">{{ album.album_title }}</a>

Tags

Tags provide logic like loops and conditionals, enclosed in {% ... %}.
Common tags include for/endfor and if/else/endif.

For Loops: To iterate over a list (like a QuerySet):

<ul>
{% for album in all_albums %}
    <li><a href="/music/{{ album.id }}/">{{ album.album_title }}</a></li>
{% endfor %}
</ul>

Important
Remember to close your block tags, for example, {% for ... %} requires a corresponding {% endfor %}.

Conditional Logic: To check if data exists before displaying it:

{% if all_albums %}
    <ul>
        {% for album in all_albums %}
            <li>...</li>
        {% endfor %}
    </ul>
{% else %}
    <h3>You don't have any albums</h3>
{% endif %}