Why templates separate presentation in Django

Introduction

Templates keep the look of a website separate from its data and logic. This makes it easier to change how things look without breaking how they work.

When you want designers to work on the website look without touching the code.

When you need to show the same data in different styles or layouts.

When you want to keep your code clean and organized by separating logic and design.

When you want to reuse the same page structure with different content.

When you want to update the website appearance quickly without changing backend code.

Syntax

Django

{% block content %}
  <!-- HTML and template tags here -->
{% endblock %}

Templates use special tags like {% block %} and {{ variable }} to insert data.

The template files usually end with .html and contain mostly HTML with some template code.

Examples

This example shows how to insert variables into HTML using double curly braces.

Django

<h1>{{ title }}</h1>
<p>Welcome, {{ user_name }}!</p>

This example shows how to use a condition to show different content based on user login status.

Django

{% if user.is_authenticated %}
  <p>Hello, {{ user.username }}!</p>
{% else %}
  <p>Please log in.</p>
{% endif %}

Sample Program

This example shows two templates: a base template with the page structure and a home page that fills in the content and title. This separation helps keep design and content organized.

Django

{# 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 %}My Site{% endblock %}</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
  </header>
  <main>
    {% block content %}
    <!-- Content will go here -->
    {% endblock %}
  </main>
  <footer>
    <p>© 2024 My Website</p>
  </footer>
</body>
</html>

{# home.html #}
{% extends "base.html" %}

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

{% block content %}
  <h2>Welcome to the Home Page</h2>
  <p>Hello, {{ user_name }}!</p>
{% endblock %}

Important Notes

Templates help teams work better by letting designers and developers focus on their parts.

Changing the look is safer and faster because you do not touch the backend code.

Using template inheritance avoids repeating the same HTML in many files.

Summary

Templates separate how a page looks from how it works.

This makes websites easier to build, change, and maintain.

Template inheritance helps reuse common page parts like headers and footers.

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