Why templates separate presentation in Django - See It in Action

Why Templates Separate Presentation in Django

📖 Scenario: You are building a simple website that shows a list of books with their titles and authors. You want to keep the way the data looks separate from the data itself. This helps you change the look later without touching the data or the code that gets the data.

🎯 Goal: Build a Django project that uses templates to separate the data (in views) from the presentation (in templates). You will create a list of books in the view and display them in the template.

📋 What You'll Learn

Create a list of books as dictionaries in the Django view

Create a template to display the list of books

Pass the list of books from the view to the template

Use Django template syntax to loop over the books and show their details

💡 Why This Matters

🌍 Real World

Websites often need to show data like products, articles, or user info. Separating data from design helps teams work together and keeps code clean.

💼 Career

Understanding how to use templates in Django is essential for web developers building maintainable and scalable web applications.

1

Create a list of books in the Django view

In your Django view file, create a variable called books that is a list of dictionaries. Each dictionary should have the keys title and author with these exact entries: {'title': 'The Hobbit', 'author': 'J.R.R. Tolkien'} and {'title': '1984', 'author': 'George Orwell'}.

Django

# Your code here

Hint

Use a list with two dictionaries inside. Each dictionary has keys 'title' and 'author'.

2

Add a context dictionary to pass books to the template

Below the books list, create a variable called context that is a dictionary with the key 'books' and the value books. This will send the books data to the template.

Django

def book_list(request):
    books = [
        {'title': 'The Hobbit', 'author': 'J.R.R. Tolkien'},
        {'title': '1984', 'author': 'George Orwell'}
    ]
    # Create context dictionary here

Hint

Use a dictionary with key 'books' and value books.

3

Render the template with the context

At the end of the book_list view, return the result of render(request, 'books.html', context). This will show the template books.html with the books data.

Django

def book_list(request):
    books = [
        {'title': 'The Hobbit', 'author': 'J.R.R. Tolkien'},
        {'title': '1984', 'author': 'George Orwell'}
    ]
    context = {'books': books}
    # Return render here

Hint

Use the render function with request, template name, and context.

4

Create the template to display the books list

In the books.html template file, use Django template syntax to loop over books and display each book's title and author inside <li> tags. Use {% for book in books %} and {{ book.title }}, {{ book.author }}. Close the loop with {% endfor %}.

Django

{% for book in books %}
    
{% endfor %}

Hint

Use a for loop in the template to show each book's title and author inside a list item.

Practice

1. Why do Django templates separate presentation from business logic?

easy

A. To make the server run faster

B. To speed up the database queries

C. To reduce the size of the HTML files

D. To make the website easier to build and maintain

Solution

1. Step 1: Understand the role of templates

   Django templates handle how the page looks, separate from how data is processed.

2. Step 2: Recognize benefits of separation

   This separation makes it easier to build, change, and maintain the website without mixing code and design.

3. Final Answer:

   To make the website easier to build and maintain -> Option D

4. Quick Check:

   Separation of concerns = easier maintenance [OK]

Hint: Templates separate look and logic for easier updates [OK]

Common Mistakes:

• Thinking templates speed up database queries
• Believing templates reduce HTML file size
• Assuming templates make server faster

2. Which of the following is the correct way to extend a base template in Django?

easy

A. {% include 'base.html' %}

B. {% extends 'base.html' %}

C. {% import 'base.html' %}

D. {% load 'base.html' %}

Solution

1. Step 1: Identify the template inheritance tag

   Django uses the {% extends %} tag to inherit from a base template.

2. Step 2: Confirm correct syntax

   The syntax is {% extends 'base.html' %}, which tells Django to use the base template as a parent.

3. Final Answer:

   {% extends 'base.html' %} -> Option B

4. Quick Check:

   Template inheritance uses extends [OK]

Hint: Use {% extends %} to inherit templates [OK]

Common Mistakes:

• Using include instead of extends for inheritance
• Confusing load or import with extends
• Wrong syntax with missing quotes

3. Given this base template snippet:

{% block content %}Base Content{% endblock %}

And this child template snippet:

{% extends 'base.html' %}{% block content %}Child Content{% endblock %}

What will be displayed when rendering the child template?

medium

A. Base Content

B. Base ContentChild Content

C. Child Content

D. Error: block content redefined

Solution

1. Step 1: Understand block overriding in templates

   The child template overrides the 'content' block defined in the base template.

2. Step 2: Determine rendered output

   Because the child block replaces the base block, only 'Child Content' is shown.

3. Final Answer:

   Child Content -> Option C

4. Quick Check:

   Child block overrides base block [OK]

Hint: Child blocks replace base blocks in templates [OK]

Common Mistakes:

• Thinking base and child content combine
• Expecting an error on block redefinition
• Assuming base content shows instead

4. What is wrong with this Django template code?

{% extends 'base.html' %}{% block content %}Hello{% endblock %}{% endblock %}

medium

A. There is an extra {% endblock %} tag

B. The extends tag is missing quotes

C. The block name is invalid

D. The template is missing a load tag

Solution

1. Step 1: Check block tags pairing

   There is one {% block content %} but two {% endblock %} tags, causing mismatch.

2. Step 2: Identify syntax error

   Extra {% endblock %} causes a template syntax error.

3. Final Answer:

   There is an extra {% endblock %} tag -> Option A

4. Quick Check:

   Block tags must match exactly [OK]

Hint: Count block and endblock tags carefully [OK]

Common Mistakes:

• Ignoring extra endblock tag
• Thinking quotes are missing in extends
• Assuming block name is wrong

5. You want to reuse a header and footer on multiple pages in Django. Which approach best uses templates to separate presentation?

hard

A. Use template inheritance with a base template containing header and footer blocks

B. Write header and footer HTML inside each view function

C. Copy header and footer HTML into every page template

D. Load header and footer HTML using JavaScript after page loads

Solution

1. Step 1: Identify best reuse method in Django templates

   Template inheritance allows common parts like header and footer to be defined once in a base template.

2. Step 2: Understand separation of concerns

   This keeps presentation consistent and easy to update without repeating code in every page.

3. Final Answer:

   Use template inheritance with a base template containing header and footer blocks -> Option A

4. Quick Check:

   Template inheritance enables reuse [OK]

Hint: Use base template for common page parts [OK]

Common Mistakes:

• Copy-pasting header/footer in every template
• Mixing HTML into view functions
• Relying on JavaScript for static page parts