Templates and Jinja2: Making Dynamic Web Pages

Hey there, future web wizards! 🌟

So far, we’ve been building the skeleton of our web app. Today, we’re going to dress it up! Imagine being able to change the look of your app or add dynamic content like user names, book titles, or today’s date. Sounds like magic, right? Well, it’s not—it’s Jinja2!

What is HTML?

Before we talk about Jinja2, let’s get to know HTML a little better. HTML stands for HyperText Markup Language. Imagine you’re building a LEGO castle. The individual LEGO blocks are like HTML elements—they’re the building blocks of a webpage. These blocks can be things like paragraphs, images, or headers.

What is Jinja2?

Now, meet Jinja2, our magical toolbox that lets us change our LEGO castle’s colors, add a drawbridge, or even a dragon—all without taking it apart. In simple terms, Jinja2 allows us to inject Python-like code into our HTML, making our web pages dynamic.

Your First Flask Template

In the world of Flask, a “template” is like a reusable LEGO structure. You can use the same structure but decorate it differently each time.

Here’s how to make your first template:

Create a Folder: In your project directory, create a new folder and name it templates.

Create an HTML File: Inside the templates folder, create a new file called home.html.

Add HTML Code: Open home.html and write the following code:

<!DOCTYPE html>

<html>

<head>

    <title>Home</title>

</head>

<body>

    <h1>Welcome to our Bookstore!</h1>

</body>

</html>

Linking Template to Flask

Open your Flask app file (e.g., app.py) and modify the home route like so:

from flask import render_template

@app.route("/")

def home():

    return render_template("home.html")

The render_template function is like a bridge that connects your HTML file to your Flask app.

Making Pages Dynamic with Jinja2

Imagine if your LEGO castle could greet everyone by name as they walked by. With Jinja2, it can!

Here’s how:

Update HTML: Open home.html and change the <h1> line to:

<h1>Welcome to our Bookstore, {{ name }}!</h1>

The `{{ name }}` part is like a placeholder. Jinja2 will replace it with an actual name.

Update Flask Route: Now let’s tell Flask to replace {{ name }} with an actual name. Modify your app.py like this:

@app.route("/<name>")

def home(name):

    return render_template("home.html", name=name)

If you visit http://localhost:5000/Emily, your browser will display “Welcome to our Bookstore, Emily!”

Practical Example: Dynamic Bookstore Pages

Remember our simple bookstore app? How about we add book titles and descriptions that change based on the book ID? Here’s how:

Create a New Template: In your templates folder, create a file called `book.html`.

Add Dynamic Content: Open book.html and write:

<h1>{{ book_title }}</h1>

<p>{{ book_description }}</p>

Update Flask Route: Open app.py and modify the book route:

@app.route("/book/<int:book_id>")

def book(book_id):

    book_title = f"Book {book_id}"

    book_description = f"Details about book {book_id}."

    return render_template("book.html", book_title=book_title, book_description=book_description)

Now, if you visit http://localhost:5000/book/1, it will display details for Book 1.

Conclusion

Bravo! 🎉 You’ve just turned your static web pages into dynamic masterpieces using Jinja2. Now your web app can greet people by name, show different book details, and much more.

Next time, we’ll talk about forms and user input, another cornerstone of web development.