Full Notes: Python + SQLite + Flask + HTML Form (With Explanations)
This guide will help you build a simple web app where:
- Users submit their name and age through an HTML form.
- The data is stored in an SQLite database.
- You can view all submitted records in a table on another web page.
1. Setting Up the SQLite Database
---------------------------------
SQLite is a lightweight, file-based database. You don't need to install a server.
import sqlite3
# Connect to SQLite database (creates the file if it doesn't exist)
conn = sqlite3.connect("mydatabase.db")
cursor = conn.cursor()
# Create a table if it doesn't exist
cursor.execute('''
CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
age INTEGER NOT NULL
''')
conn.commit()
conn.close()
2. Creating a Flask Application
-------------------------------
Flask is a web framework that allows you to create web apps using Python.
from flask import Flask, request, render_template
import sqlite3
app = Flask(__name__)
# Database connection function
def get_db_connection():
conn = sqlite3.connect('mydatabase.db')
conn.row_factory = sqlite3.Row # allows us to access columns by name
return conn
3. HTML Form Template (save as templates/form.html)
----------------------------------------------------
You need a folder named "templates" in the same location as your Python file.
Inside it, create a file called form.html with the following code:
<html>
<body>
<h2>Add User</h2>
<form action="/add_user" method="post">
Name: <input type="text" name="name" required><br><br>
Age: <input type="number" name="age" required><br><br>
<input type="submit" value="Submit">
</form>
<br>
<a href="/users">View All Users</a>
</body>
</html>
4. Displaying the Form (Flask Route)
-------------------------------------
@app.route('/')
def form():
return render_template('form.html')
Explanation:
When you visit http://127.0.0.1:5000/, this function runs and displays the HTML form.
5. Inserting Form Data into SQLite
----------------------------------
@app.route('/add_user', methods=['POST'])
def add_user():
name = request.form['name']
age = request.form['age']
conn = get_db_connection()
conn.execute("INSERT INTO users (name, age) VALUES (?, ?)", (name, age))
conn.commit()
conn.close()
return "User added successfully! <a href='/'>Add Another</a>"
Explanation:
- The form sends the data using POST method.
- Flask reads it using request.form.
- Data is inserted into the database with parameterized SQL to prevent injection.
6. Viewing All Users in a Table
-------------------------------
@app.route('/users')
def users():
conn = get_db_connection()
rows = conn.execute("SELECT * FROM users").fetchall()
conn.close()
html = "<h2>All Users</h2><table border='1'><tr><th>ID</th><th>Name</th><th>Age</th></tr>"
for row in rows:
html += f"<tr><td>{row['id']}</td><td>{row['name']}</td><td>{row['age']}</td></tr>"
html += "</table><br><a href='/'>Back to Form</a>"
return html
Explanation:
- This route fetches all user data from the database.
- It builds an HTML table and displays it in the browser.
7. Running the Flask App
------------------------
if __name__ == '__main__':
app.run(debug=True)
Visit http://127.0.0.1:5000/ in your browser.
Conclusion:
-----------
- You now have a working web app that uses HTML + Python to input and store data.
- Flask handles routing and logic.
- SQLite stores the data.
- You can expand this with update/delete functions and even user login.
