Template variables with double braces in Django - Mini Project: Build & Apply

Template variables with double braces

📖 Scenario: You are building a simple Django web page to show a user's profile information. The data will come from the backend and be displayed in the HTML template.

🎯 Goal: Create a Django template that uses double braces {{ }} to show the user's name and age on the page.

📋 What You'll Learn

Create a dictionary called user with keys 'name' and 'age' and exact values 'Alice' and 30

Create a variable called title with the value 'User Profile'

Use double braces {{ }} in the template to display title in an <h1> tag

Use double braces {{ }} in the template to display user.name and user.age inside <p> tags

💡 Why This Matters

🌍 Real World

Django templates use double braces {{ }} to safely insert data from the backend into HTML pages, making dynamic websites.

💼 Career

Understanding Django template variables is essential for backend web developers working with Python and Django to build interactive web pages.

1

Create the user data dictionary

Create a dictionary called user with these exact entries: 'name': 'Alice' and 'age': 30.

Django

# Create the user dictionary with name and age
# Your code here

Hint

Use curly braces {} to create a dictionary with keys and values.

2

Add a title variable

Create a variable called title and set it to the string 'User Profile'.

Django

user = {'name': 'Alice', 'age': 30}
# Create the title variable
# Your code here

Hint

Use an equals sign = to assign the string to the variable.

3

Write the HTML template with title

Write an HTML template string called template that includes an <h1> tag showing the variable title using double braces {{ title }}.

Django

user = {'name': 'Alice', 'age': 30}
title = 'User Profile'
# Create the template string with  showing {{ title }}
# Your code here

Hint

Use triple quotes ''' to create a multi-line string for the template.

4

Add user details to the template

Extend the template string to include two <p> tags that show user.name and user.age using double braces: {{ user.name }} and {{ user.age }}.

Django

user = {'name': 'Alice', 'age': 30}
title = 'User Profile'
template = '''
  
    {{ title }}
     tags for user.name and user.age here -->
    # Your code here
  
'''

Hint

Use double braces {{ }} to insert variables inside the HTML tags.

Practice

1. What does the double braces syntax {{ variable }} do in a Django template?

easy

A. It displays the value of the variable passed from the view.

B. It runs a Python function inside the template.

C. It comments out the variable so it is not shown.

D. It creates a new variable inside the template.

Solution

1. Step 1: Understand Django template variable syntax

   Double braces {{ }} are used to show variables passed from the view inside the HTML template.

2. Step 2: Identify the purpose of {{ variable }}

   It outputs the value of the variable, making it visible in the rendered page.

3. Final Answer:

   It displays the value of the variable passed from the view. -> Option A

4. Quick Check:

   Double braces show variable value = A [OK]

Hint: Double braces always output variable values in templates [OK]

Common Mistakes:

• Thinking {{ }} runs Python code
• Confusing {{ }} with comments
• Assuming {{ }} creates variables

2. Which of the following is the correct way to display a variable named user_name in a Django template?

easy

A. {% user_name %}

B. <% user_name %>

C. {{ user_name }}

D. [[ user_name ]]

Solution

1. Step 1: Recall Django template variable syntax

   Variables are displayed using double braces {{ variable_name }} in Django templates.

2. Step 2: Match the correct syntax for user_name

   The correct syntax is {{ user_name }} to show the variable's value.

3. Final Answer:

   {{ user_name }} -> Option C

4. Quick Check:

   Use double braces for variables = B [OK]

Hint: Remember: variables use {{ }} not {% %} [OK]

Common Mistakes:

• Using {% %} which is for template tags
• Using <% %> which is not Django syntax
• Using [[ ]] which is not valid

3. Given the view passes {'count': 5} to the template, what will be rendered by this template code?

<p>Total items: {{ count }}</p>

medium

A. Total items: count

B. Total items: 5

C. Total items: {{ count }}

D. Total items:

Solution

1. Step 1: Understand variable substitution in template

   The variable 'count' with value 5 is passed from the view to the template.

2. Step 2: Replace {{ count }} with its value

   The template engine replaces {{ count }} with 5 in the rendered HTML.

3. Final Answer:

   <p>Total items: 5</p> -> Option B

4. Quick Check:

   Variable replaced by value = D [OK]

Hint: Variables inside {{ }} show their values, not names [OK]

Common Mistakes:

• Expecting the variable name to show instead of value
• Thinking {{ count }} stays as is in output
• Leaving the variable empty if not recognized

4. What is wrong with this Django template code if the view passes {'user': {'name': 'Anna'}}?

<p>User: {{ user.name }}</p>

medium

A. The variable name must be capitalized as {{ User.Name }}.

B. Django templates cannot access dictionary keys with dot notation.

C. The variable should be accessed as {{ user['name'] }} instead.

D. The syntax is correct; it will display 'User: Anna'.

Solution

1. Step 1: Check how Django templates access dictionary keys

   Django templates allow accessing dictionary keys using dot notation like {{ user.name }}.

2. Step 2: Confirm the output

   Since user is a dictionary with key 'name', {{ user.name }} will correctly display 'Anna'.

3. Final Answer:

   The syntax is correct; it will display 'User: Anna'. -> Option D

4. Quick Check:

   Dot notation works for dict keys = A [OK]

Hint: Use dot notation for dict keys in templates [OK]

Common Mistakes:

• Trying to use bracket notation in templates
• Assuming dot notation only works for objects
• Capitalizing variable names incorrectly

5. You want to display a user's full name in a template. The view passes {'user': {'first_name': 'John', 'last_name': 'Doe'}}. Which template code correctly shows "John Doe" using double braces?

hard

A. {{ user.first_name }} {{ user.last_name }}

B. {{ user['first_name'] + ' ' + user['last_name'] }}

C. {{ user.first_name | add:' ' | add:user.last_name }}

D. {% user.first_name %} {% user.last_name %}

Solution

1. Step 1: Understand how to access dictionary keys in templates

   Use dot notation {{ user.first_name }} and {{ user.last_name }} to get values.

2. Step 2: Combine variables with a space in between

   Write both variables separated by a space in the template to display full name.

3. Step 3: Check other options for correctness

   {{ user['first_name'] + ' ' + user['last_name'] }} uses invalid syntax for concatenation in templates; {{ user.first_name | add:' ' | add:user.last_name }} uses a wrong filter; {% user.first_name %} {% user.last_name %} uses wrong tag syntax.

4. Final Answer:

   {{ user.first_name }} {{ user.last_name }} -> Option A

5. Quick Check:

   Use dot notation and space for concatenation = C [OK]

Hint: Use {{ var1 }} {{ var2 }} to join values with space [OK]

Common Mistakes:

• Trying to concatenate strings inside {{ }} directly
• Using {% %} tags for variables
• Using filters incorrectly for string join