Creating a Web Application Using Python Flask

Technical writer

Python

23.10.2024

Reading time: 14 min

In this tutorial, we will write a simple web application in Python with a database for user authentication. We will use Windows 10 and work in PyCharm using pipenv. The website will be built with HTML and CSS. The installation of Flask, PyCharm, and pipenv is described in detail in this article.

Throughout this article, we will use testing and educational examples that are not suitable for production implementation. For instance, to verify passwords in the database, you need to store password hashes and compare hashes, not plaintext passwords. Additionally, when working with databases, you should use an ORM rather than writing "raw" SQL (for more on ORM, see here).

To get started, we will create a project directory called Hostman. Within this directory, we will place the templates and static directories, and within the static directory, we will create a css directory. The project structure will look like this:

Hostman
|— templates
|— static
|    — css

Database for Logins and Passwords

Once you have installed Flask and the other tools, you can proceed to work. We will use the SQLite database management system (DBMS) to store user data. It is well-suited for small projects, and its main advantage is its standalone nature: it does not require a server to operate. Additionally, Python includes a built-in module, sqlite3, for working with SQLite. However, if you decide to work with a server-based DBMS, consider using cloud servers like Hostman.

In the project directory, we create a file named db.py. In this file, we will import the sqlite3 module and create a database and a table for logins and passwords:

import sqlite3
db_lp = sqlite3.connect('login_password.db')
cursor_db = db_lp.cursor()
sql_create = '''CREATE TABLE passwords(
login TEXT PRIMARY KEY,
password TEXT NOT NULL);'''

cursor_db.execute(sql_create)
db_lp.commit()
cursor_db.close()
db_lp.close()

Let’s break down what this code does:

We connect to the database using the connect() method. This method will look for the file login_password.db in the project directory. If it does not find it, it will create one automatically.
We create the cursor_db object for interacting with the database.
sql_create is the SQL query for creating the table that holds the logins and passwords.
We execute sql_create using the execute() method.
We save changes to the database with the commit() method.
Finally, we close the cursor_db and db_lp objects to avoid any database issues.

To create the database, run the command:

python db.py

Authentication

Now let’s work on the authentication for our Flask application.

Main Form

First, we will create a form that will be used for authentication into an abstract service. In the templates directory, we create a file named authorization.html with the following content:

<form method="POST">
  <div class="container">
    <label for="Login"><b>Login</b></label>
    <input type="text" placeholder="" name="Login" required>
    <label for="Password"><b>Password</b></label>
    <input type="password" placeholder="" name="Password" required>
    <button type="submit">Login</button>
    <div class="container">
      <span class="reg"><a href="/registration">Registration</a></span>
    </div>
  </div>
</form>

<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">

Here, there are three important points:

<form method="POST"> — we indicate that we will be using POST requests.
<label for="Login"> and <label for="Password"> — we mark the Login and Password fields that we will process later using the get() method from the request module.
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}"> — we inform HTML where the CSS file is stored.

In the /static/css directory, we create a file named auth.css:

form {
    font: 14px Stem-Regular, arial, sans-serif; /* Choose font */
    border: 1px solid black; /* Color, size, and type of border */
    -webkit-border-radius: 20px; /* Round corners */
    color: #777991; /* Label color */
    width: 50%; /* Form width */
    margin-right: auto; /* Form positioning */
    margin-left: auto; /* Form positioning */
    text-align: center; /* Center text */
}


input[type=text], input[type=password] {
    text-align: center; /* Center text */
    -webkit-border-radius: 4px; /* Round corners */
    width: auto; /* Width */
    padding: 15px 20px; /* Internal padding size */
    margin: 10px 0; /* External margin size */
    margin-right: auto; /* External right margin size */
    margin-left: auto; /* External left margin size */
    display: block; /* Display type */
    border: 1px solid #050c26; /* Color, size, and type of border */
    box-sizing: border-box; /* Size of object relative to parent */
    font: 14px Stem-Regular, arial, sans-serif; /* Choose font */
    color: #777991; /* Text color in input */
}


button {
    font: 16px Stem-medium, arial, sans-serif; /* Choose button font */
    background-color: #454cee; /* Choose background color */
    -webkit-border-radius: 8px; /* Round edges */
    color: white; /* Choose text color */
    padding: 16px 20px; /* Internal padding size */
    margin: 8px 0; /* External margin size */
    border: none; /* No border */
    cursor: pointer; /* Change cursor on hover */
    width: auto; /* Width */
}


button:hover { 
    opacity: 0.9; /* Change button brightness on hover */
}


.container {
    padding: 20px; /* Internal padding size of the container */
}

As a result, our form will look like this:

Message for Successful Authentication

If the user enters the correct username-password pair, we will display a corresponding message. In the templates directory, we create a file named successfulauth.html with the following content:

<form method="POST">
  <div class="container">
    <label><b>You have successfully logged in</b></label>   
  </div>
</form>

<link rel="stylesheet" href="{{ url_for('static', filename='css/successfulauth.css') }}">

In the /static/css directory, we create a file named successfulauth.css:

form {
    font: 14px Stem-Regular, arial, sans-serif; /* Choose font */
    border: 1px solid black; /* Color, size, and type of border */
    -webkit-border-radius: 20px; /* Round corners */
    color: #777991; /* Label color */
    width: 40%; /* Form width */
    margin-right: auto; /* Form positioning */
    margin-left: auto; /* Form positioning */
    text-align: center; /* Center text */
}
.container {
    padding: 30px; /* Internal padding size of the container */
}

Message for Unsuccessful Authentication

In the templates directory, we create a file named auth_bad.html with the following content:

<form method="POST">
  <div class="container">
    <label><b>Incorrect username or password</b></label>   
  </div>
</form>  

<link rel="stylesheet" href="{{ url_for('static', filename='css/auth_bad.css') }}">

In the /static/css directory, we create a file named auth_bad.css:

form {
    font: 14px Stem-Regular, arial, sans-serif; /* Choose font */
    border: 1px solid black; /* Color, size, and type of border */
    -webkit-border-radius: 20px; /* Round corners */
    color: #777991; /* Label color */
    width: 40%; /* Form width */
    margin-right: auto; /* Form positioning */
    margin-left: auto; /* Form positioning */
    text-align: center; /* Center text */
}

.container {
    padding: 30px; /* Internal padding size of the container */
}

Now, we will create a registration form.

Registration

With the registration form, users will be able to create their own accounts. In the templates directory, create a file named registration.html with the following content:

<form method="POST">
  <div class="container">
    <label for="Login"><b>Username</b></label>
    <input type="text" placeholder="" name="Login" required>


    <label for="Password"><b>Password</b></label>
    <input type="password" placeholder="" name="Password" required>   


    <button type="submit">Register</button>
  </div>
</form>  

<link rel="stylesheet" href="{{ url_for('static', filename='css/regis.css') }}">

In the /static/css directory, create a file named regis.css:

form {
    font: 14px Stem-Regular, arial, sans-serif; /* Choose font */
    border: 1px solid black; /* Color, size, and type of border */
    -webkit-border-radius: 20px; /* Round corners */
    color: #777991; /* Label color */
    width: 50%; /* Form width */
    margin-right: auto; /* Form positioning */
    margin-left: auto; /* Form positioning */
    text-align: center; /* Center text */
}

input[type=text], input[type=password] {
    text-align: center; /* Center text */
    -webkit-border-radius: 4px; /* Round corners */
    width: auto; /* Width */
    padding: 15px 20px; /* Internal padding size */
    margin: 10px 0; /* External padding size */
    margin-right: auto; /* External padding size on the right */
    margin-left: auto; /* External padding size on the left */
    display: block; /* Display type */
    border: 1px solid #050c26; /* Color, size, and type of border */
    box-sizing: border-box; /* Size of the object relative to the parent */
    font: 14px Stem-Regular, arial, sans-serif; /* Choose font */
    color: #777991; /* Text color in input */
}

button {
    font: 16px Stem-medium, arial, sans-serif; /* Choose button font */
    background-color: #454cee; /* Choose background color */
    -webkit-border-radius: 8px; /* Round corners */
    color: white; /* Choose text color */
    padding: 16px 20px; /* Internal padding size */
    margin: 8px 0; /* External padding size */
    border: none; /* No border */
    cursor: pointer; /* Change cursor when hovering over the button */
    width: auto; /* Width */
}

button:hover { 
    opacity: 0.9; /* Change button brightness when hovering */
}

.container {
    padding: 20px; /* Internal padding size of the container */
}

The registration form will look like this:

Upon successful registration, the user will see a message like this:

To create this message, in the templates directory, create a file named successfulregis.html with the following content:

<form method="POST">
  <div class="container">
    <label><b>You have successfully registered</b></label>    


    <div class="container">
      <span class="reg"> <a href="/authorization">Return to login</a></span>
    </div>
  </div>
</form>  

<link rel="stylesheet" href="{{ url_for('static', filename='css/successfulregis.css') }}">

In the /static/css directory, create a file named successfulregis.css:

form {
    font: 14px Stem-Regular, arial, sans-serif; /* Choose font */
    border: 1px solid black; /* Color, size, and type of border */
    -webkit-border-radius: 20px; /* Round corners */
    color: #777991; /* Label color */
    width: 25%; /* Form width */
    margin-right: auto; /* Form positioning */
    margin-left: auto; /* Form positioning */
    text-align: center; /* Center text */
}

.container {
    padding: 20px; /* Internal padding size of the container */
}

Authorization Decorator

After creating all the forms and the database, we can start developing the Flask web application. To send an HTML document in response to a client request in Flask, the render_template() method must be used. This function from the Flask module is used to display templates from the templates folder.

The project directory now has the following structure:

Hostman
|— db.py
|— login_password.db
|— templates
|     — authorization.html
|     — auth_bad.html
|     — successfulauth.html
|     — successfulregis.html
|     — registration.html
|— static
|    — css
|         — auth_bad.css
|         — auth.css
|         — successfulauth.css
|         — regis.css
|         — successfulregis.css

In the /Hostman project directory, create a file named main.py, where we will import the necessary modules from Flask and add the code for user authorization. For more details on authentication, we recommend reading here.

from flask import Flask, request, render_template
import sqlite3


@app.route('/authorization', methods=['GET', 'POST'])
def form_authorization():
   if request.method == 'POST':
       Login = request.form.get('Login')
       Password = request.form.get('Password')


       db_lp = sqlite3.connect('login_password.db')
       cursor_db = db_lp.cursor()
       cursor_db.execute(('''SELECT password FROM passwords
                                               WHERE login = '{}';
                                               ''').format(Login))
       pas = cursor_db.fetchall()


       cursor_db.close()
       try:
           if pas[0][0] != Password:
               return render_template('auth_bad.html')
       except:
           return render_template('auth_bad.html')


       db_lp.close()
       return render_template('successfulauth.html')


   return render_template('authorization.html')

Here is the logic of how it works:

The user navigates to /authorization — this is a GET request, and the decorator returns authorization.html.
When the user enters their username and password and clicks the "Login" button, the server receives a POST request, which the decorator will handle. The decorator will retrieve the username and password entered by the user.
Next, we connect to the database and execute an SQL query. Using cursor_db.execute() and cursor_db.fetchall(), we get the row with the password (which may be empty) corresponding to the entered username.
We "extract" the password from the row, and:

If the row is empty, it will raise an error (array index out of bounds), which we handle with a try-except block, notifying the user of invalid input. The decorator completes its work.
If the password in the database does not match the received password, it simply returns a message about incorrect data and ends the operation.
If the password is correct, we display a message about successful authorization and conclude the work of the Flask decorator.

Registration Decorator

Users can access the /registration page from the authorization form. Here is the code for the decorator, which we will add to the end of main.py:

@app.route('/registration', methods=['GET', 'POST'])
def form_registration():
   if request.method == 'POST':
       Login = request.form.get('Login')
       Password = request.form.get('Password')


       db_lp = sqlite3.connect('login_password.db')
       cursor_db = db_lp.cursor()
       sql_insert = '''INSERT INTO passwords VALUES('{}','{}');'''.format(Login, Password)


       cursor_db.execute(sql_insert)
       db_lp.commit()


       cursor_db.close()
       db_lp.close()


       return render_template('successfulregis.html')


   return render_template('registration.html')

Initially, the GET request for /registration is processed, returning registration.html. When the user enters their data and clicks the "Register" button, the server receives a POST request, which extracts the Login and Password.

Next, we connect to the database. The sql_insert variable holds the SQL query for adding a new row with the user's data. We execute sql_insert and save the changes. Finally, we close the cursor_db and db_lp objects, returning a message indicating successful registration.

Full Program Code

from flask import Flask, request, render_template
import sqlite3


app = Flask(__name__)


@app.route('/authorization', methods=['GET', 'POST'])
def form_authorization():
   if request.method == 'POST':
       Login = request.form.get('Login')
       Password = request.form.get('Password')


       db_lp = sqlite3.connect('login_password.db')
       cursor_db = db_lp.cursor()
       cursor_db.execute(('''SELECT password FROM passwords
                                               WHERE login = '{}';
                                               ''').format(Login))
       pas = cursor_db.fetchall()


       cursor_db.close()
       try:
           if pas[0][0] != Password:
               return render_template('auth_bad.html')
       except:
           return render_template('auth_bad.html')


       db_lp.close()
       return render_template('successfulauth.html')


   return render_template('authorization.html')


@app.route('/registration', methods=['GET', 'POST'])
def form_registration():
   if request.method == 'POST':
       Login = request.form.get('Login')
       Password = request.form.get('Password')


       db_lp = sqlite3.connect('login_password.db')
       cursor_db = db_lp.cursor()
       sql_insert = '''INSERT INTO passwords VALUES('{}','{}');'''.format(Login, Password)

This completes the implementation of the user registration decorator and the overall application.

Conclusion

In this tutorial, we covered the essential steps to create a simple web application for user authentication and registration using Python framework Flask. We began by setting up the project structure and configuring SQLite for user data storage. We then developed HTML forms for authorization and registration, styling them with CSS. Through decorators, we implemented the logic to handle user input and interact with the database, ensuring secure processing of credentials. Finally, users receive feedback on successful or failed actions. This foundational knowledge equips you to build more complex Flask applications while enhancing user experience and security.

On our app platform you can deploy Flask and other Python applications.

Python

23.10.2024

Reading time: 14 min

Similar

Microservices