A simple data-driven web application can be built using Flask and SQLite by combining form handling, database operations, and dynamic page rendering. The application collects user information, stores it in an SQLite database, and displays the stored records through Flask templates.
Run the following commands to install Flask:
pip install flask
Building an App Using Flask and SQLite
Prerequisites:
- Create and setup virtual environment and Flask app
- Python installed
- Basic Flask knowledge
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.
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="text" name="name" placeholder="Enter your name" required><br/>
<label>Enter Email:</label>
<input type="text" name="email" placeholder="Enter your email" required><br/>
<label>Enter City:</label>
<input type="text" name="city" placeholder="Enter your City name" required><br/>
<label>Enter Country:</label>
<input type="text" name="country" placeholder="Enter the Country name" required><br/>
<label>Enter phone num:</label>
<input type="tel" 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 file named app.py to define the Flask application, configure the SQLite database, handle form submissions, store participant details, and retrieve records for display in the web interface.
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 NOT NULL,
email TEXT NOT NULL,
city TEXT NOT NULL,
country TEXT NOT NULL,
phone TEXT NOT NULL
)
''')
@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",
message="Registration successful!"
)
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()
connect.close()
return render_template("participants.html", data=data)
if __name__ == '__main__':
app.run(debug=False)
Output:
For route: http://127.0.0.1:5000/join
Here we are adding two new data to the database.
For route: http://127.0.0.1:5000/participants
Explanation:
- Initialize Flask App: Creates the Flask application and defines routes for the home page, registration form, and participant list.
- Create Database Table: Connects to the SQLite database and creates the PARTICIPANTS table if it does not already exist.
- Handle Form Submission: Receives participant details from the form and stores them in the SQLite database using an SQL INSERT query.
- Retrieve Participant Data: Fetches all records from the PARTICIPANTS table using fetchall() and passes them to the template.
- Render Templates: Uses Flask's render_template() function to display HTML pages and dynamically show participant information.