How to Build a Web App using Flask and SQLite in Python

Last Updated : 25 Mar, 2025

Flask is a lightweight Python web framework with minimal dependencies. It lets you build applications using Python libraries as needed. In this article, we’ll create a Flask app that takes user input through a form and displays it on another page using SQLite.

Run the following commands to install Flask and SQLite:

pip install flask
pip install db-sqlite3

Building an App Using Flask and SQLite

Prerequisites – Create and setup virtual environment and Flask app

After setting up the virtual environment and flask app, we can start building the application.

File Structure

This is how the file structure of our app will look like after completion.

File structure of Flask app

index.html

The index.html file will contain two buttons, one button to check all the participant’s lists (taken from the database). And the other button to create a new entry.

<!DOCTYPE html>
<html>
    <head>
        <title>Flask and SQLite </title>
    </head>
    <body>
        <h1>Build Web App Using Flask and SQLite</h1>
        <button class="btn" type="button" onclick="window.location.href='{{ url_for('join') }}';">Fill form to get updates</button><br/>
        <button class="btn" type="button" onclick="window.location.href='{{ url_for('participants') }}';">Check participant list</button>
    </body>
</html>

join.html

Create join.html file in the templates folder, it will contain a form to collect Name, Email, City, Country, and Phone. Use the POST method to submit the data, then insert it into the database and commit the changes.

<!DOCTYPE html>
<html>
    <head>
        <title>Flask and SQLite </title>
    </head>
    <body>
        <form method="POST">
            <label>Enter Name:</label>
            <input type="name" name="name" placeholder="Enter your name" required><br/>
            <label>Enter Email:</label>
            <input type="email" name="email" placeholder="Enter your email" required><br/>
            <label>Enter City:</label>
            <input type="name" name="city" placeholder="Enter your City name" required><br/>
            <label>Enter Country:</label>
            <input type="name" name="country" placeholder="Enter the Country name" required><br/>
            <label>Enter phone num:</label>
            <input type="name" name="phone" placeholder="Your Phone Number" required><br/>
            <input type = "submit" value = "submit"/><br/>
        </form>
    </body>
</html>

participants.html

Use table tag and assign the heading using <th> tag. To auto increment, the table row on the new entry, use a For loop jinja template. Inside For loop add <tr> and <td> tags.

<!DOCTYPE html>
<html>
    <head>
        <title>Flask and SQLite </title>
    </head>
    <style>
        table, th, td {
          border:1px solid black;
        }
        </style>
    <body>
        <table style="width:100%">
            <tr>
              <th>Name</th>
              <th>Email</th>
              <th>City</th>
              <th>Country</th>
              <th>Phone Number</th>
            </tr>
            {%for participant in data%}
               <tr>
                 <td>{{participant[0]}}</td>
                 <td>{{participant[1]}}</td>
                 <td>{{participant[2]}}</td>
                 <td>{{participant[3]}}</td>
                 <td>{{participant[4]}}</td>
                </tr>
            {%endfor%}
          </table>          
    </body>
</html>

app.py

Create a new file named app.py and render HTML templates to build the front end.

To insert data, first create a database table with Name, Email, City, Country, and Phone Number columns.
Connect to the database using sqlite3.connect(“database.db”). If the table doesn’t exist, create it.
A button in index.html navigates to the participant list, retrieving data from the existing database.
Use a Jinja template loop in HTML to dynamically display database entries.
The participants function selects all columns from the table and retrieves data using fetchall().

from flask import Flask, render_template, request
import sqlite3

app = Flask(__name__)

@app.route('/')
@app.route('/home')
def index():
    return render_template('index.html')

connect = sqlite3.connect('database.db')
connect.execute(
    'CREATE TABLE IF NOT EXISTS PARTICIPANTS (name TEXT, \
    email TEXT, city TEXT, country TEXT, phone TEXT)')

@app.route('/join', methods=['GET', 'POST'])
def join():
    if request.method == 'POST':
        name = request.form['name']
        email = request.form['email']
        city = request.form['city']
        country = request.form['country']
        phone = request.form['phone']
        with sqlite3.connect("database.db") as users:
            cursor = users.cursor()
            cursor.execute("INSERT INTO PARTICIPANTS \
            (name,email,city,country,phone) VALUES (?,?,?,?,?)",
                           (name, email, city, country, phone))
            users.commit()
        return render_template("index.html")
    else:
        return render_template('join.html')

@app.route('/participants')
def participants():
    connect = sqlite3.connect('database.db')
    cursor = connect.cursor()
    cursor.execute('SELECT * FROM PARTICIPANTS')

    data = cursor.fetchall()
    return render_template("participants.html", data=data)


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