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

Need a 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

Need a 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

Need a 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

Need a hint?

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