Welcome back to Flask Fridays, where we explore different aspects of building web applications with Flask, a popular web framework for Python. In this week’s edition, we will dive into using Jinja2, a powerful and feature-rich template engine, to render dynamic content on a web page using Python.
Jinja2 is a template engine that allows you to write dynamic web pages with Python code embedded in it. It helps in separating design or layout code from business logic and makes it easier to manage and maintain web applications. Jinja2 is the default templating engine that comes with Flask. You can easily integrate Jinja2 with Flask to render HTML templates with dynamic content generated by Python code.
To get started with using Jinja2 in a Flask web application, you will first need to install Flask and Jinja2. You can do this by using pip, the Python package installer. Run the following command to install Flask and Jinja2:
pip install Flask Jinja2Next, create a new Python file for your Flask application. Let’s call it app.py. In this file, import Flask and Jinja2 and create a new Flask application instance:
from flask import Flask, render_template
app = Flask(__name__)Next, create a route in your Flask application that will render an HTML template using Jinja2. You can define a route using the @app.route() decorator. In this example, we will render a simple HTML template that displays a message with the current date and time:
@app.route('/')
def index():
import datetime
now = datetime.datetime.now()
return render_template('index.html', current_time=now)In this route, we import the datetime module to get the current date and time. We pass the current_time variable to the render_template() function, which will render the index.html template and inject the current_time variable into the template.
Next, create an index.html file in a new folder called templates in the same directory as your app.py file. In the index.html file, write the HTML code with Jinja2 template syntax to render the current date and time:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask Fridays - Using Jinja2</title>
</head>
<body>
<h1>Welcome to Flask Fridays</h1>
<p>The current date and time is: {{ current_time }}</p>
</body>
</html>In this HTML template, we use double curly braces {{ }} to embed Python code (in this case, the current_time variable passed from the Flask route) into the HTML content. Jinja2 will replace these placeholders with the actual values at runtime.
Finally, run your Flask application by adding the following lines at the end of your app.py file:
if __name__ == '__main__':
app.run()Now, navigate to the folder containing your app.py file in your terminal and run the Flask application by executing the following command:
python app.pyOpen your web browser and navigate to http://127.0.0.1:5000/ to see the rendered HTML page with the current date and time displayed. Congratulations! You have successfully used Python on a web page with Jinja2 in a Flask application.
In this tutorial, we covered the basics of using Jinja2 with Flask to render dynamic content on a web page using Python. Jinja2 provides a powerful and flexible way to generate HTML content with Python code, making it easier to build dynamic web applications. Experiment with Jinja2’s features and functionalities to create more dynamic and interactive websites. Stay tuned for more Flask Fridays tutorials on building web applications with Flask.
still extremely useful thank you
Incredibly helpful to me as I start working on a new team. Thanks for the great work!
That helped quite a bit actually. Thank you
You're very amazing teacher, thanks for these lessons
How do I use jinja template in javacsript for xeample the {{user.name}} in html but I want to do it in javascript
hello Mr John, I didn't understand why you type this(<br><br/>. Can you please reply and tell me what is it ? Thank you
man you are great:) thank you alot!!!!
your playlist is great, I hope you don't stop uploading such great playlists
Amazing lesson. Love it
Reviewing all classes. These tutorials are very good!!!
What if i would like to extend from a parent folder? '../' is not working
I went to school with a kid who was Jinja.
I love this video…you explained it very well.
so cool
You look like Walter white from breaking bad
Great video, thanks a lot! Do you know how I could insert a dict value into the src of an html img tag please??? I tried this but it is not
working <img class=" " src={{ dict["value"]}}.png" alt="Icon">
good presentation !!
im looking for this kind of video
how can i import a class method or an already created custom function, and render its results on webpage?
I was hoping to get an answer for how can Python native function such as len(list) be called inside an HTML using Jinja formatting?