How To Make a Web Application Using Flask in Python
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
after filling the details First Name and Last name and click on submit button you reach on the next page.
In the upcoming blog, we will be discussing How to connect our project to the database.