This will be the followed up article for Setting Up and Running Python Flask Project. If you don't already know how to run Flask then you might consider taking look at it.

Now This will be simple Flask application tutorial to help you with the Templating engine. I will try to keep things simple as possible as this is intended to novice programmers.

 

I will just create two pages web application using flask without putting any extra detail so that you can quickly start to build your own websites using Flask.

 

Folder Structure Creation

You need to prepare following folder and file structure to begin with

project_name
|-------- templates
|           |--------index.html
|           |--------about.html
|           |--------layout.html
|-------- static
|           |--------style.css
|-------- app.py

 

If you like to view GitHub version of code Click Here

Defining app.py

The key file for Flask Project Initialization in this case is app.py. You can use your preferred filename here. All the route processing takes place here. We have imported Flask and render_template to run our project which is important. There are two routes presented here '/' which is index or default route and '/about' for about page. Responsible template is returned with the request based functions.

from flask import Flask, render_template
 
app = Flask(__name__)
 
@app.route('/')
def hello():
return render_template('index.html')
 
@app.route('/about')
def about():
return render_template('about.html')
 
if __name__ == "__main__":
app.run()

 

 

Detrming Structure using layout

It is the part of Jinja templating where we can use base structure to put common html tags. The part where jinga code is used have been highlighted in the code given below.

 

DOCTYPE html>
<html>
<head>
<title>My WebSitetitle>
<link href="{{ url_for('static', filename='style.css') }}"
rel="stylesheet">
head>
 
<body>
<h1>My Website<h1>
{% block content %}
{% endblock %}
body>
html>

 

 

Using Layout to Extend our templates

Here layout.html is extended to create index.html and about.html pages

Index.html

{% extends 'layout.html' %}
 
{% block content %}
  <h3>Index Pageh3>
  <p>Sample Home Pagep>
<a href="/about">Go to About Page a>
{% endblock %}

 

about.html

{% extends 'layout.html' %}
 
{% block content %}
  <h3>About Pageh3>
  <p>Sample About Pagep>
<a href="/">Go to Home Page a>
{% endblock %}

 

 

Completing our project with CSS

Just to show the demonstration of stylesheet a simple css document is created as style.css

h1 {
    color : #FF0000;
}
 
h3 {
    color : #00FF00;
}
 
p {
    color : #0000FF;
}

 

 

Running our project

Now we have completed all code to create simple web application using Jinja2 Templating. You can run the application with code below. You need to be inside the project_name folder.

$ python app.py

if you are using python 3 then,

$ python3 app.py

If you are in Windows then

C:\> py app.py

 

You can view your project in your browser by visiting http://localhost:5000