Flask Template Variables Tutorial 🎯

Welcome to our comprehensive guide on Flask Template Variables! In this tutorial, we'll learn how to use template variables to dynamically generate HTML content based on Python code. This is a crucial concept for anyone looking to build dynamic web applications using Flask.

By the end of this tutorial, you'll be able to:

Understand what Flask template variables are
Learn how to use template variables in your Flask applications
Practice with real-world examples

What are Flask Template Variables? 📝

Flask template variables are a way to insert dynamic content from Python into your HTML templates. They allow you to generate customized HTML pages based on user input, database queries, or other data sources.

Getting Started 💡

Before we dive into template variables, let's make sure you have Flask installed. If you haven't already, follow our Flask Setup guide to get started.

Creating a Simple Flask App 🎯

Let's create a simple Flask app that uses template variables to display a personalized greeting.

Create a new file called app.py and add the following code:

python

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    name = 'World'
    return render_template('home.html', name=name)

if __name__ == '__main__':
    app.run(debug=True)

Create a new folder called templates and inside it, create a new file called home.html. Add the following HTML code:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Template Variables</title>
</head>
<body>
    <h1>Hello, {{ name }}!</h1>
</body>
</html>

Run your Flask app by executing python app.py in your terminal. Navigate to http://127.0.0.1:5000/ in your web browser, and you should see the personalized greeting.

Using Template Variables 💡

Now that we have a basic Flask app, let's make it more interesting by using template variables to display dynamic content.

Update your home() function in app.py to accept a user's name as an argument:

python

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    name = 'World'
    if 'name' in request.args:
        name = request.args['name']
    return render_template('home.html', name=name)

if __name__ == '__main__':
    app.run(debug=True)

Modify the home.html file to include a form that allows users to enter their name:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Template Variables</title>
</head>
<body>
    <h1>Enter your name:</h1>
    <form action="/">
        <input type="text" name="name">
        <input type="submit" value="Submit">
    </form>
    <h1>Hello, {{ name }}!</h1>
</body>
</html>

Run your Flask app again and navigate to http://127.0.0.1:5000/. You should now see a form where you can enter your name. Once submitted, the greeting will be personalized based on your input.

Quiz Time 🎯

Conclusion ✅

In this tutorial, you learned about Flask template variables and how to use them to dynamically generate HTML content based on Python code. You also created a simple Flask app that displays a personalized greeting using template variables.

By now, you should have a good understanding of template variables and how they can be used in real-world Flask applications.

Stay tuned for more Flask tutorials at CodeYourCraft! 🎉