Mastering Jinja2 Templates in Flask

Introduction

In this lab, you will learn how to use Jinja2 templates in Flask. Jinja2 is a powerful template engine that allows you to generate dynamic HTML pages in your Flask application. Templates are a great way to separate the presentation logic from the business logic of your application.

Note: You need to create the code file yourself and run it in the environment. You can preview the Flask service status on Web 5000.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL flask(("`Flask`")) -.-> flask/CoreConceptsGroup(["`Core Concepts`"]) flask(("`Flask`")) -.-> flask/DevelopmentToolsGroup(["`Development Tools`"]) flask(("`Flask`")) -.-> flask/DataHandlingGroup(["`Data Handling`"]) flask/CoreConceptsGroup -.-> flask/application_object("`Application Object`") flask/DevelopmentToolsGroup -.-> flask/blueprint_objects("`Blueprint Objects`") flask/DataHandlingGroup -.-> flask/incoming_request_data("`Incoming Request Data`") flask/CoreConceptsGroup -.-> flask/sessions("`Sessions`") flask/CoreConceptsGroup -.-> flask/useful_internals("`Useful Internals`") subgraph Lab Skills flask/application_object -.-> lab-136107{{"`Flask Jinja2 Templates`"}} flask/blueprint_objects -.-> lab-136107{{"`Flask Jinja2 Templates`"}} flask/incoming_request_data -.-> lab-136107{{"`Flask Jinja2 Templates`"}} flask/sessions -.-> lab-136107{{"`Flask Jinja2 Templates`"}} flask/useful_internals -.-> lab-136107{{"`Flask Jinja2 Templates`"}} end

Install Flask and Jinja2

Before we begin, make sure you have Flask and Jinja2 installed in your Python environment. You can install them using pip:

pip install Flask
pip install Jinja2

Create a Flask Application

Create a new file called app.py and import the necessary modules:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

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

In this code, we create a new Flask application and define a route for the root URL ("/"). When a user visits the root URL, the index() function will be called and it will render the index.html template.

Create a Jinja2 Template

Create a new directory called templates in the same directory as your app.py file. Inside the templates directory, create a new file called index.html. This file will contain the HTML code for your template.

<!doctype html>
<html>
  <head>
    <title>Flask Jinja2 Templates Lab</title>
  </head>
  <body>
    <h1>Welcome to Flask Jinja2 Templates Lab</h1>
    <p>This is a simple Flask application using Jinja2 templates.</p>
  </body>
</html>

In this template, we have a simple HTML structure with a heading and a paragraph. You can customize the content of the template to fit your needs.

Run the Flask Application

Save the app.py file and run it using the following command:

python app.py

Open your web browser and visit http://localhost:5000. You should see the content of the index.html template rendered in your browser.

Summary

Congratulations! You have successfully created a Flask application that uses Jinja2 templates. Templates are a powerful tool for generating dynamic HTML pages in your Flask application. You can now use templates to separate the presentation logic from the business logic of your application and create more flexible and maintainable code.

Flask Jinja2 Templates