How To Create Python Web Application Using Flask

August 7, 2020

How To Create Python Web Application Using Flask

Flask

Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.

Let’s get started

First you have to create a folder called flask_examples.
Inside that folder you have to save your all python files
Inside flask_examples folder create a templates folder so that you can save HTML file inside that folder.
Create another folder inside flask_examples called static to save all the images inside that folder

Let’s get started by building our first flask application. This is the simplest site possible. It will simply return Hello World on a webpage.

Make sure you have installed flask

pip install Flask
conda install Flask

Syntax

from flask import Flask
app = Flask(__name__)
@app. route ('/')
def index ():
    return "<h1>Hello World</h1>"
if __name__ == '__main__':
    app.run ()

Let’s go line by line and discuss what the above code means.

from flask import Flask

This line means that from flask package import Flask class. Take care of the capitalization in package it’s small f and in class it’s capital F.

app = Flask(__name__)

Essentially what this line doing is creating an application object on the left-hand side as an instance of class Flask. __name__ variable is passed to Flask is a python predefined variable.

@app. route ('/')

This is a route decorator which directly links the page to your web application. ‘/’ indicates your home page.

def index ():
    return "<h1>Hello World</h1>"

This line defining a page index which is going to return string Hello World.

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

This line indicates if you are running the script, run your application.

When you run the program, you will see a link in the output shown below.

Copy that link and paste it in your browser to see your program.

Remember, do not use CTRL+c to copy because it will quit from the server. Before running the program again make sure that you quit first otherwise it will not run.

OUTPUT

So far, we have only returned back HTML manually through a python string.
Realistically we will want to connect a view function to render HTML templates.
Flask will automatically look for HTML Templates in the templates folder.
We can render templates simply by importing the render_template
Let’s see an example

First create your .py file and write the code shown below

Syntax

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

As you can see, we have used render_template function to create a webpage and we have passed the name of the HTML file in which we have written our code.

Let’s create basic.html

<html>
<head>
<title></title></head>
<body>
<h1>Welcome to the site</h1>
</body>
</html>

Make sure that you have saved the basic.html file inside templates folder. Otherwise it will give you an error.

When you run the program, you will see a link then copy and paste that link in your browser to see the output.

OUTPUT

URL_FOR () HELP FUNCTION

Flask comes with a very convenient url_for () helper function that allows us to easily connect other template pages or files within our templates

Let’s explore how it works

First create your .py file

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

Now Let’s create our basic.html file

<html>
<head>
<title></title>
</head>
<body>
<a href="{{url_for('second')}}">second</a>
<h1>Welcome to the site</h1>
</body>
</html>

Now Create index.html file

<html>
<head>
<title></title>
</head>
<body>
<a href="{{url_for('index')}}">Home</a>
<h1>Second Page</h1>
</body>
</html>

OUTPUT

This is your home page as you can see, we have created a navigation bar at the top name as second. Once you click on the second button you will be taken to the second page that we have created.

This is our second page and you can see that now we have another link at the top called home which will take us back to the home page as soon as you click on that link.

This is the use of url_for () function which connects other template pages. This function is used in our HTML file and the name you passed inside the url_for () must be same as the name of your function in which you want to go when you click onto that link.

Another point to be remember is that, if you want to assign a variable inside the HTML FILE that should be inside double curly brackets and if you want to use control flow statement then you should define it inside a pair of curly brackets and a percentage symbol. Let’s see the syntax for both.

Syntax for variable

{{variable name}}

Syntax for control flow statement

{% for in X %}
Body of loop
{% end for %}

INHERITANCE

We know we can create view functions that directly link to an HTML template
But that still means we need to make an HTML template for every page.
Usually pages across web application already shares a lot of features (e.g. navigation bar)
For that a great solution is a template inheritance.
We set up html template file with the re-usable aspects of our site
Then we use {% extend “base.html” %} and {% block %} statements to extend the re-usable aspects to other pages.

Let’s create .py file

Syntax

from flask import Flask, render_template
app = Flask(__name__)
@app. route ('/')
def index ():
    return render_template("home.html")
@app. route('/second')
def second ():
    return render_template("first.html")
if __name__ == '__main__':
    app.run (debug = False)

Now Create basic.html from which we have to inherit.

<html>
<head>
</head>
<body>
<a href = "{{url_for('index')}}">Home</a>
{% block contents %}
{% end block %}
</body>
</html>

Let’s create home.html and inherit the properties of basic.html.

{% extends "basic.html"%}
{% block contents %}
<h1>Welcome to the site</h1>
{% end block %}

Now create first.html

{% extends "basic.html"%}
{% block contents %}
<h1>Welcome to the site</h1>
{% end block %}

OUTPUT

How To Create Python Web Application Using Flask

We are in our second page right now and as you can see the navigation bar home; we have inherited from basic.html file is successfully inherited in our other template pages.

In this way you can create python web application using flask.