how-to-create-view-templates-in-flask

How to create view templates in flask

Hello World, Welcome to my website. Today I am going to discuss how to create view templates in flask. This is a very simple tutorial. In this tutorial, we will create a view template and pass some data to that template.

Please ensure that you have installed python 3 and flask on your system. I am using window so all commands will be according to this OS.

I have divided this tutorial into the following parts.

  • Install Flask
  • Create python(flask) file and load html template
  • Create HTML file show data
  • Run application

Install Flask

Please read my previous tutorial for installing flask.

Create python (flask) file and load html template

  • Create myproject folder
  • Create app.py in this folder and add the following code.
from flask import Flask,render_template
app=Flask(__name__)

@app.route('/')
def index():
    return render_template('home.html', content="This is home content")

@app.route('/about')
def about():
    return render_template('about.html', content="This is about us content")

@app.route('/contact')
def contact():
    return render_template('contact.html', content="This is contact us content")

if __name__=='__main__':
    app.run(debug=True)

Create HTML files to show data

  • Create templates directory in myproject folder.
  • Create base.html in templates directory and add the following code.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% block title %} {% endblock %}</title>
    <link rel="stylesheet" href={{ url_for('static',filename='style.css') }} />
</head>
<body>
    <div class="container">
        <ul>
            <li><a href={{ url_for('index') }}>Home</a></li>
            <li><a href={{ url_for('about') }}>About</a></li>
            <li><a href={{ url_for('contact') }}>Contact</a></li>
        </ul>
        <hr />
        {% block content %} {% endblock %}
    </div>
</body>
</html>
  • Create home.html in templates directory and add the following code.
{% extends "base.html" %}
{% block title %}
Home
{% endblock %}

{% block content %}
<h1>{{ content }}</h1>
{% endblock %}
  • Create about.html in templates directory and add the following code.
{% extends "base.html" %}
{% block title %}
About Us
{% endblock %}

{% block content %}
<h1>{{ content }}</h1>
{% endblock %}
  • Create contact.html in templates directory and add the following code.
{% extends "base.html" %}
{% block title %}
Contact
{% endblock %}

{% block content %}
<h1>{{ content }}</h1>
{% endblock %}

Flask comes with jinja template engine. I am using extending template concept in this tutrial. Please read more about jinja template engine here.

Run the application

  • Open command prompt.
  • Go into the myproject folder.
  • Run the following command.
python app.py

After running the above command you will see the following messages in command prompt

run flask application

Open the 127.0.0.1:5000 in your browser. You will see the following screen.

How to create view template in flask