Using Flask Templates with Jinja2

Introduction to Flask and Jinja2

Flask is a lightweight web framework for Python that allows you to build web applications quickly and efficiently. Jinja2 is the templating engine that Flask uses to render HTML. By combining these two, you can create dynamic web pages that update based on the data you provide.

Setting Up Your Flask Project

To get started, you’ll need to have Flask installed. If you haven’t done so already, you can install it using pip:

pip install Flask

Next, create a simple Flask application structure:

/my_flask_app
    /templates
        index.html
    app.py

In this structure, the templates folder will hold your HTML files.

Creating Your First Template

Let’s create a basic HTML template named index.html in the templates folder:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flask App</title>
</head>
<body>
    <h1>Welcome to My Flask App!</h1>
    <p>{{ message }}</p>
</body>
</html>

In this template, {{ message }} is a placeholder that will be replaced with data from our Flask application.

Writing Your Flask Application

Now, let’s write a simple Flask application in app.py:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    message = "This message is rendered using Jinja2!"
    return render_template('index.html', message=message)

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

Here, we define a route (/) that renders the index.html template and passes a message to it. When you run the app and visit localhost:5000, you’ll see the message displayed on the webpage.

Using Jinja2 Features

Jinja2 offers many powerful features. Here are a few examples:

1. Control Structures

You can use control structures like loops and conditionals in your templates. For example, let’s modify index.html to display a list of items:

<ul>
{% for item in items %}
    <li>{{ item }}</li>
{% endfor %}
</ul>

And in your Flask route, you would pass a list:

@app.route('/')
def home():
    items = ['Apple', 'Banana', 'Cherry']
    return render_template('index.html', items=items)

2. Template Inheritance

You can create a base template that other templates can extend. For instance, create a base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Flask App{% endblock %}</title>
</head>
<body>
    <header>
        <h1>My Flask Application</h1>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        <p>Footer information here.</p>
    </footer>
</body>
</html>

Then create another template that extends this base:

{% extends 'base.html' %}

{% block title %}Welcome{% endblock %}

{% block content %}
    <p>Welcome to the extended page!</p>
{% endblock %}

Conclusion

By using Flask templates with Jinja2, you can create dynamic and engaging web applications. With these basic examples, you should feel comfortable getting started. Experiment with more features as you grow your skills, and soon you’ll be building complex web pages with ease!

Mastering Flask Templates with Jinja2