Welcome back! Previously, you learned how to render a simple HTML template using Flask. In this lesson, we’ll go a step further and explore how to render templates with dynamic content. This will enable us to create more personalized and interactive web pages.
Dynamic content is key because it lets us tailor the user experience based on various inputs, such as user data or database queries. By the end of this lesson, you'll learn how to pass data from your Flask application to your HTML templates using Jinja2, allowing for personalized user experiences.
Static content remains unchanged regardless of user interaction. For example, the HTML code you wrote in the welcome.html file provided a static welcome message. While useful, static content doesn't adapt based on user input or data, which can limit its effectiveness.
Dynamic content, however, changes based on factors like user interactions, database entries, or even random events. This type of content is essential for creating personalized and engaging user experiences. In this lesson, we'll learn how to pass variables from our Flask app to our HTML templates, enabling us to render dynamic content.
Flask uses the Jinja2 templating engine to achieve this. A templating engine is a tool that combines templates with data to generate dynamic HTML. Jinja2 allows us to embed Python-like expressions directly within our HTML files. These expressions are evaluated and replaced with actual data at the time of rendering. For example, you can use Jinja2 to insert variables, apply logic, and loop through data structures within your HTML. This makes it easy to create HTML that can dynamically change based on the variables passed from your Flask applications.
In Flask, you can pass variables from your Python code to your HTML templates using the render_template function. For instance, let’s say we want to pass a variable called name to our template to personalize our welcome message.
Here's how we can update our app.py to achieve this:
Python1from flask import Flask, render_template 2 3app = Flask(__name__) 4 5@app.route('/') 6def welcome(): 7 # Define a variable with some value 8 name = "User" 9 # Pass the variable to the 'welcome.html' template 10 return render_template('welcome.html', name=name) 11 12if __name__ == '__main__': 13 app.run(host='0.0.0.0', port=3000, debug=True)
In the welcome function, we assign the value "User" to the variable name and pass it to welcome.html using render_template.
Now, let’s update our HTML template to display this name variable and create a personalized welcome message.
Here’s how to modify your welcome.html file:
HTML, XML1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Welcome</title> 7</head> 8<body> 9 <!-- Render the 'name' variable inside the placeholder --> 10 <h1>Welcome, {{ name }}!</h1> 11</body> 12</html>
In this snippet, {{ name }} is a Jinja2 placeholder that will be replaced by the value of the name variable passed from our Flask app.
To conclude, understanding how to use Jinja2 templates to render dynamic content is crucial for developing web applications that provide customized and interactive experiences for users.
In this lesson, you learned how to render dynamic content using Flask templates. Specifically, we covered:
- The difference between static and dynamic content.
- Passing variables from Flask to HTML templates using Jinja2.
- Rendering a dynamic welcome message in an HTML template.
This knowledge is foundational for creating more interactive and personalized web applications. Next, you will move on to practice exercises where you can experiment with rendering different dynamic content. Happy coding!