Home > Courses > Flask: Python Web Development > Render Templates in Flask

Render Templates in Flask

Subject: Flask: Python Web Development
With time you will find it more convenient to separate your frontend code (HTML, CSS, JS) from your backend code (Python and Flask) because it can easily get messy as your project grows.

You may already have your web pages designed with HTML and CSS so Flask comes with Jinja template to allow your app to pass and receive data from your flask (backend) application and this frontend web pages, this is known as "separation of concern".

Templates and Static folder
Flask expect us to create some folders with some specific names to handle the structure of our web application. So to use templates to achieve separation of concern we will need to create this two folders inside our web app folder.

Step 1.
Create a folder called “templates” in the current folder which will have all our .html templates.

Step 2.
Create another folder called "static" also to hold our CSS and JS files

Step 3. Open the templates folder and create an index.html file inside:
templates\index.html

then let it's content be this simple HTML structure: 

 <!DOCTYPE html>
<html>
<head>
    <title>TEA Learn</title>
</head>
<body>
    <h2>Welcome to Flask class</h2>
    <p>This course is about building web application using Python and Flask</p>
 </body>
 </html>

 
Step 4. In the app.py file we can then have the following code: 


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)


Note that we have imported the render_template function from the Flask module.

And the index function return using the render_template to renders the index.html to our web browser.

Note: Flask goes to the "templates" folder to look for the index.html file by default to render it, if the folder does not exist or spelt incorrectly it will throw an error.

Dynamic route to pass data
We can also use the dynamic route to pass or send data from Flask to our html template and render it using Jinja (a templating engine use by Flask).

In this example we continue with the example 1 by adding the team route and function.

Example 2 

....
app = Flask(__name__)
@app.route("/")
def index():
    return render_template("index.html")

@app.route('/team/<name>')
def team(name):
       return render_template("about.html", myname=name)


The function render_template provided by Flask integrates the Jinja2 template engine
with the application. This function takes the filename (about.html) of the template as its first argu‐
ment while any additional arguments are key/value pairs (myname=name). In this example, the “myname” on the left side represents the argument name, which is used in the placeholder written in the
template. The “name” on the right side is a variable in the current scope that provides
the value for the argument of the same name.

Using the Jinja template to render data
From example 2 create another html file (about.html) in the templates folder:
templates\about.html

then let it's content be this simple HTML structure: 

 <!DOCTYPE html>
<html>
<head>
    <title>TEA Learn Team</title>
</head>
<body>
     <h2>Welcome, {{ myname }}!</h2>
 </body>
 </html>


The {{ myname }} construct used in this about.html template references a
variable that that was retire with the file:

return render_template("about.html", myname=name) in example 2.

The value that goes in
that place will be obtained from data provided at the time the template is rendered. i.e
When accessing such route, the name is added to the end of the URL:

@app.route('/team/')

For example if you enter the URL as such:

http://127.0.0.1:5000/team/Emeka

The browser will render the view as shown in the attached picture below.

http://127.0.0.1:5000/



http://127.0.0.1:5000/team/Emeka




By: Benjamin Onuorah

Comments

No Comment yet!

Login to comment or ask question on this topic

Previous Topic Next Topic


Supported by