Variable substitution syntax in Flask - Mini Project: Build & Apply

Variable substitution syntax in Flask templates

📖 Scenario: You are building a simple Flask web page that greets users by their name. The name will be passed from your Flask app to the HTML template.

🎯 Goal: Create a Flask app that sends a variable called user_name with the value "Alice" to an HTML template. In the template, use Flask's variable substitution syntax to display the greeting: Hello, Alice!

📋 What You'll Learn

Create a Flask app with a route for the home page

Pass a variable named user_name with value "Alice" to the template

Create an HTML template that uses Flask's variable substitution syntax to show the greeting

The greeting text must read exactly: Hello, Alice!

💡 Why This Matters

🌍 Real World

Web developers use Flask and variable substitution to create dynamic web pages that show personalized content to users.

💼 Career

Understanding how to pass data from backend to frontend templates is essential for backend web development roles using Flask.

1

Set up the Flask app and data

Create a Flask app instance called app and define a route for "/". Inside the route function home(), create a variable called user_name and set it to "Alice".

Flask

# Your code here

Hint

Remember to import Flask and create the app instance first.

2

Pass the variable to the template

In the home() function, return render_template with the template file name "greeting.html" and pass the variable user_name to it.

Flask

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    user_name = "Alice"
    # Return render_template with user_name
    # Your code here

Hint

Use render_template and pass user_name=user_name as an argument.

3

Create the HTML template with variable substitution

Create a file named greeting.html. Inside it, write HTML that uses Flask's variable substitution syntax {{ user_name }} to display the text Hello, Alice! inside a <h1> tag.

Flask

Hint

Use double curly braces {{ }} to insert the variable in the HTML.

4

Run the Flask app with debug mode

Add the code to run the Flask app with debug=True when the script is executed directly. Use if __name__ == '__main__': and call app.run(debug=True).

Flask

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    user_name = "Alice"
    return render_template("greeting.html", user_name=user_name)

# Add code to run the app with debug=True
# Your code here

Hint

This code lets you run the Flask app and see changes immediately.

Practice

1. In Flask templates, which syntax correctly inserts the value of a variable named username into the HTML?

easy

A. [[ username ]]

B. {{ username }}

C. {% username %}

D. <% username %>

Solution

1. Step 1: Understand Flask template syntax

   Flask uses Jinja2 templating where variables are inserted using double curly braces {{ variable }}.

2. Step 2: Identify correct variable substitution

   The correct way to show the value of username is {{ username }}.

3. Final Answer:

   {{ username }} -> Option B

4. Quick Check:

   Variable substitution = {{ username }} [OK]

Hint: Use double curly braces {{ }} for variables in Flask templates [OK]

Common Mistakes:

• Using {% %} which is for control statements
• Using brackets like [[ ]] which is not Flask syntax
• Using <% %> which is from other template engines

2. Which of the following is the correct syntax to display a variable age inside a Flask template?

easy

A. {{ age }}

B. {% age %}

C. <%= age %>

D. [[ age ]]

Solution

1. Step 1: Recall Flask variable syntax

   Flask templates use Jinja2 syntax where variables are shown with double curly braces {{ variable }}.

2. Step 2: Match the correct option

   Only {{ age }} correctly shows the variable value.

3. Final Answer:

   {{ age }} -> Option A

4. Quick Check:

   Variable display = {{ age }} [OK]

Hint: Remember: {{ variable }} shows variable value in Flask templates [OK]

Common Mistakes:

• Confusing {% %} for variables instead of control blocks
• Using syntax from other template engines like <%= %>
• Using brackets [[ ]] which Flask does not recognize

3. Given this Flask template snippet:

Hello, {{ user }}!

And the Flask code:

return render_template('template.html', user='Alice')

What will be the rendered output?

medium

A. Hello, {{ user }}!

B. Hello, user!

C. Hello, Alice!

D. Hello, !

Solution

1. Step 1: Understand variable substitution in template

   The template uses {{ user }} which will be replaced by the value passed from Flask code.

2. Step 2: Check the passed variable value

   The Flask code passes user='Alice', so {{ user }} becomes 'Alice'.

3. Final Answer:

   Hello, Alice! -> Option C

4. Quick Check:

   Variable user = Alice [OK]

Hint: Variables in {{ }} show passed values, not literal text [OK]

Common Mistakes:

• Thinking {{ user }} prints literally
• Ignoring the passed variable value
• Confusing variable name with string

4. Identify the error in this Flask template snippet:

Hello, {% user %}!

What will happen when rendering this template?

medium

A. TemplateSyntaxError due to wrong tag usage

B. SyntaxError: invalid syntax

C. It will display the literal text '{% user %}'

D. It will display the value of user variable

Solution

1. Step 1: Understand {% %} usage in Flask templates

   The {% %} syntax is for control statements like loops or conditions, not for variable substitution.

2. Step 2: Identify the error type

   Using {% user %} is invalid and causes a TemplateSyntaxError because 'user' is not a valid control tag.

3. Final Answer:

   TemplateSyntaxError due to wrong tag usage -> Option A

4. Quick Check:

   Wrong tag usage = TemplateSyntaxError [OK]

Hint: Use {{ }} for variables, {% %} only for control blocks [OK]

Common Mistakes:

• Using {% %} for variables instead of {{ }}
• Expecting literal output from {% %} tags
• Ignoring template error messages

5. You want to display a user's full name in a Flask template using two variables: first_name and last_name. Which template code correctly combines them with a space?

hard

A. {{ first_name }} + ' ' + {{ last_name }}

B. {{ first_name, ' ', last_name }}

C. {{ first_name & ' ' & last_name }}

D. {{ first_name ~ ' ' ~ last_name }}

Solution

1. Step 1: Recall string concatenation in Jinja2 templates

   Jinja2 uses the tilde (~) operator to join strings inside {{ }}.

2. Step 2: Evaluate each option

   {{ first_name ~ ' ' ~ last_name }} uses ~ correctly to join first_name, a space, and last_name. {{ first_name }} + ' ' + {{ last_name }} treats + as literal text. {{ first_name, ' ', last_name }} creates a tuple with comma. {{ first_name & ' ' & last_name }} uses invalid & operator.

3. Final Answer:

   {{ first_name ~ ' ' ~ last_name }} -> Option D

4. Quick Check:

   String join in Jinja2 = ~ operator [OK]

Hint: Use ~ to join strings in Flask (Jinja2) templates [OK]

Common Mistakes:

• Placing + outside {{ }} so it prints literally
• Using invalid operators like & or commas
• Trying Python code directly in templates