How To Make a Web Application Using Flask in Python

Published in

Uneritx

4 min readAug 9, 2021

Introduction

Flask is a micro web framework written in Python that provides useful tools and features that make creating web applications in Python easier. It gives developers flexibility and is a more accessible framework for new developers.

Flask uses the Jinja templates to dynamically build HTML pages using familiar Python concepts such as variables, loops, lists, and so on.

Setting Up

Let’s do create a separate folder and initialize our own virtual environment in it.

I’m going to call this directory flaskblog, since that is the name of the application:

$ mkdir flaskblog
$ cd flaskblog

Support for virtual environments is included in all recent versions of Python, so all you need to do to create one is this:

$ python3 -m venv dev

Now you have to tell the system that you want to use this virtual environment, and you do that by activating it.

$ source dev/bin/activate
(dev) $ _

Now that you have a virtual environment created and activated, you can finally install Flask in it:

(dev) $ pip install flask

A “Hello, Uneritx” Flask Application

In your flaskblog directory, open a file named app.py for editing, use nano or your favorite text editor:

(dev) $ nano app.py

This app.py the file will serve as a minimal example of how to handle HTTP requests. Inside it, you’ll import the Flask object, and create a function that returns an HTTP response.

from flask import Flaskapp = Flask(__name__)@app.route('/')
def hello():
    return 'Hello, Uneritx!'if __name__=='__main__':
   app.run()

To run your web application, you’ll first tell Flask where to find the application (the app.py file in your case) with the FLASK_APP environment variable:

(dev) $ export Flask_APP = app.py

run the application using the flask run command:

(dev) $ flask run
* Serving Flask app 'microblog.py' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Using HTML templates

Currently, your application only displays a simple message without any HTML.

Flask provides a render_template() helper function that allows the use of the Jinja templates. This will make managing HTML much easier by writing your HTML code in .html files as well as using logic in your HTML code

In this step, you’ll create your main Flask application in a new file.

(dev)$ nano app.py

In this new file, you’ll import the Flask object to create a Flask application instance as you previously did. You’ll also import the render_template() helper function that lets you render HTML template files that exist in the templates folder you’re about to create. The file will have a single view function that will be responsible for handling requests to the main / route.

from flask import Flask, request, render_template
app = Flask(__name__)@app.route('/', methods =["GET", "POST"])
def index():    
    if request.method == "POST":
       # getting input with name = fname in HTML form
       fname = request.form.get("fname")
       # getting input with name = lname in HTML form
       lname = request.form.get("lname")       
       return "Welcome to Uneritx " + fname + " " + lname       
   return render_template("index.jinja2")if __name__=='__main__':
   app.run()

The index() view function returns the result of calling render_template() with index.html as an argument, this tells render_template() to look for a file called index.jinja2 in the templates folder.

now create a directory called templates inside your flaskblog directory. Then inside it, open a file called index.jinja2

(dev) $ mkdir templates
(dev) $ cd templates
(dev) templates $ nano index.jinja2

Next, add the following HTML code inside index.jinja2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<<for>>, initial-scale=1.0">
    <title>Document</title>
</head><body>
{% block content %}
<form action="{{ url_for("index")}}" method="post">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="fname" placeholder="firstname">
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lname" placeholder="lastname">
<button class="submit"> submit</button>
{% endblock %}
</body></html>

now save and exit this file.

run the application using the flask run command:

(dev) $ flask run
* Serving Flask app 'microblog.py' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

when you run the “ http://127.0.0.1:5000/”, you saw this page