This is the second post of flask web framework. In the previous post of flask we discussed basics of flask web frameworks. In this blog we will discuss the flask template and what are the use of templates in flask projects.
What are templates?
Flask is a lightweight python web framework which provides very useful tools and features for web development in python language.
Templates are the files that contain the static data as well as dynamic data. Templates are rendered with specific data to make a final document. Flask uses the jinja template library to render templates.
In the flask project we will use templates to render HTML which will display in the browser page. When the user request to something from your application for example html web page home page, login page then jinja allow you to respond html templates, where you can get many features to use that are not available in standard html, like for loop statements, if statements, variable and templates inheritance. With the help of these features and tools you can easily maintain html pages. Jinja autoescape any data that is rendered in HTML templates, hence it is safe to render user input.
In this blog we will small web applications and show you how to render the html files.
If you dont know how to create and run simple flask project you can read old blog of flask "Introduction to flask". In that bog we will explained how to create simple flask project and how to run it.
Now here we are going to show how to render the templates in the flask project. We are using the python 3.8 version for building this project. Before starting make sure you have activated the virtual environment and installed flask.
Here we will write a python code for the flask project. We use render_template function to serve the html files as the response.
python code file path : Flask_project1/app.py
In the following code first, we import flask and render_template functions from the flask package, then use the flask class to create a flask application whose name is app. After that, define a function hello() which returns HTTP response, and use app.route() decorator, which converts the regular function to a view function. This view function renders the template named index.html.
Add the following code in the app.py file. which is located in Flask_project1/app.py.
from flask import Flask, render_template
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hello():
return render_template('index.html')Now here we have created an index.html file and saved it in the location : Flask_project1/templates/index.html.
Add the following code in the index.html file. which is located in Flask_project1/templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FlaskApp</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Welcome to FlaskApp!</h2>
</body>
</html>If you run flask project, you will get the output as shown in the screenshot.
Output :
In the web application, we can also pass the data from the application to your html templates. In the following code we can see that we will pass the two variables first is utc for current date and time and second is datetime to the template index.
path Flask_project1/app.py
import datetime
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hello():
return render_template('index.html',utc_dt=datetime.datetime.utcnow(), datetime='date and time' )path : Flask_project1/templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask Application</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Welcome to CodersArts!</h2>
<h3>{{ datetime }}</h3>
<h3>{{ utc_dt }}</h3>
</body>
</html>
Template inheritance
In the template inheritance we will make a base template with content and that content can be shared with the other templates. We will edit the index template to inherit the base template.
Base template contains html components that are shared with all other templates like header title, footer navigation bar etc.
path : Flask_project1/app.py
import datetime
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hello():
return render_template('index.html',utc_dt=datetime.datetime.utcnow(), datetime='date and time' )
path : Flask_project1/templates/base.htmlpath : Flask_project1/templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %} {% endblock %} - FlaskApp</title>
<style>
nav a {
color: #d65161;
font-size: 4em;
margin-left: 70px;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<a href="#">CodersArts</a>
<a href="#">About</a>
</nav>
<hr>
<div class="content">
{% block content %} {% endblock %}
</div>
</body>
</html>path : Flask_project1/templates/index.html
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} Index {% endblock %}</h1>
<h1>Hello World!</h1>
<h2>Welcome to Flask Project!</h2>
<h3>{{ datetime }}</h3>
<h3>{{ utc_dt }}</h3>
{% endblock %}Output
How Codersarts can Help you in Flask?
Codersarts provide:
Flask Assignment help
Flask Error Resolving Help
Mentorship in Flask from Experts
Flask Development Project
If you are looking for any kind of Help in Flask Contact us