Serving HTML Files

From Python Strings to HTML Templates

Writing HTML inside your Python code gets messy very quickly. It mixes the logic of your application (the Python part) with the presentation of your application (the HTML part). The standard practice in web development is to keep these separate.

Flask helps us do this by using a powerful templating engine called Jinja. A template is just an HTML file that contains special placeholders for dynamic data. Your Flask application can then "render" this template by filling in the placeholders with actual values before sending the final HTML page to the user's browser.

As you saw in the last lesson, Flask has a strict rule for this to work: all your HTML template files must be stored in a folder named templates, located in the same directory as your main app.py file.

Passing Data from Python to a Template

Let's upgrade the login application from the last lesson. Instead of returning an f-string after a successful login, we will render a new welcome.html page and pass the user's name to it.

The core of this process is the render_template() function. You've used it before, but now we'll use it with extra arguments.

To get a clear understanding of how this works, let's start with a foundational article.

Now let's see this in action. The following video demonstrates exactly how to pass a variable from your Flask backend to the HTML template.

Let's Apply It

Here’s how we can update our app.py from the previous lesson.

1. Create a welcome.html file:
First, create a new file named welcome.html inside your templates folder.

my-ai-app/templates/welcome.html:

<!DOCTYPE html>
<html>
<head>
    <title>Welcome!</title>
</head>
<body>
    <!-- The placeholder 'user' will be replaced by the value from Python -->
    <h1>Welcome, {{ user }}!</h1>
    <p>Your form was submitted successfully.</p>
</body>
</html>

Notice the {{ user }}. This is a Jinja placeholder. It tells Flask, "Put the value of the variable named user right here."

2. Update app.py:
Now, modify the login function in your app.py file.

my-ai-app/app.py:

from flask import Flask, render_template, request

app = Flask(__name__)

# The home route is not used in this example, but it's good to have.
@app.route('/')
def home():
    # Let's render a simple homepage template now
    return render_template('home.html')

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        # Get the username from the form data
        username = request.form['username']
        # Instead of an f-string, render a template and pass the username to it.
        # The variable name in the template ('user') is set here.
        return render_template('welcome.html', user=username)

    # For a GET request, show the login form as before.
    return render_template('login.html')

# Don't forget to create a simple home.html
# and update your login.html from the last lesson.

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

You'll also need a home.html and a login.html in your templates folder.

my-ai-app/templates/home.html:

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
</head>
<body>
    <h1>My AI Writing App</h1>
    <p><a href="/login">Click here to log in.</a></p>
</body>
</html>

The login.html remains the same as in the previous lesson.

Now, run python app.py, go to http://127.0.0.1:5000/login, enter a name, and submit. You should see your new welcome.html page with your name dynamically inserted!

Adding Logic to Templates

Jinja can do much more than just insert variables. It allows you to use programming logic like loops and conditional statements directly inside your HTML. This is incredibly powerful for displaying lists of data or showing different content based on certain conditions.

There are two main types of Jinja syntax:

• {{ ... }}: For expressions, used to print a variable's value to the template.
• {% ... %}: For statements, used for control flow like for loops and if statements.

The video you just watched continues to explain this perfectly.

Example: Displaying a List

Let's create a new route that displays a list of features for our future app.

Add this to app.py:

@app.route('/features')
def features():
    # A list of features we want to display
    feature_list = [
        "Text Summarization",
        "Grammar Correction",
        "Style Improvement",
        "Word Count"
    ]
    return render_template('features.html', features=feature_list)

And create features.html in your templates folder:

<!DOCTYPE html>
<html>
<head>
    <title>App Features</title>
</head>
<body>
    <h1>Our App's Features</h1>
    <ul>
        <!-- This is a Jinja for loop -->
        {% for item in features %}
            <li>{{ item }}</li>
        {% endfor %}
    </ul>
</body>
</html>

Now, if you run the app and navigate to http://127.0.0.1:5000/features, you will see an unordered list (<ul>) where each feature from the Python list has been turned into a list item (<li>).

@app.route('/users')
def user_list():
    users = [
        {'name': 'Alice', 'active': True},
        {'name': 'Bob', 'active': False},
        {'name': 'Charlie', 'active': True}
    ]
    return render_template('users.html', user_data=users)

<!DOCTYPE html>
<html>
<head>
    <title>Active Users</title>
</head>
<body>
    <h1>Active Users</h1>
    <ul>
        {% for user in user_data %}
            {% if user.active == True %}
                <li>{{ user.name }}</li>
            {% endif %}
        {% endfor %}
    </ul>
</body>
</html>

Conclusion

Congratulations! You've taken a massive step forward in building web applications. By separating your presentation (HTML) from your logic (Python) and learning how to dynamically pass data between them, you now have the tools to build clean, scalable, and powerful web pages.

Key Takeaways:

• Separation of Concerns: Keep your Python logic separate from your HTML structure for cleaner, more maintainable code.
• templates Folder: Flask requires all HTML templates to be in a folder named templates.
• Passing Data: Use keyword arguments in render_template() to pass Python variables to your HTML file (e.g., render_template('page.html', my_var=value)).
• Jinja Syntax:
  • Use double curly braces {{ variable }} to display the value of a variable.
  • Use curly braces with percent signs {% ... %} to use logic like for loops ({% for item in list %}...{% endfor %}) and if statements ({% if condition %}...{% endif %}).

In our next lesson, we will shift focus slightly. Instead of rendering full HTML pages, you will learn how to create an API endpoint. This is a special type of route that returns raw data in a format called JSON, which is essential for making your web page interactive without needing to reload it every time. This will be the bridge that connects your user interface to the backend AI processing.