In this tutorial, we will be creating a Flask web application that uses SQLite as the database. We will be using HTML, Jinja, CSS, JavaScript, and Python to create a fully functional web application.
Step 1: Set up Flask
First, we need to install Flask. Open your terminal and run the following command:
pip install FlaskNext, create a new directory for your Flask application and navigate into it.
mkdir flask_app
cd flask_appCreate a new Python file called app.py to start writing our Flask application.
Step 2: Set up SQLite database
Next, we need to set up a SQLite database. Create a new Python file called database.py in the same directory as app.py.
import sqlite3
conn = sqlite3.connect('data.db')
c = conn.cursor()
c.execute('''
CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY,
username TEXT,
email TEXT
)
''')
conn.commit()
conn.close()This will create a new SQLite database file called data.db and a table called users with columns id, username, and email.
Step 3: Create templates
Create a new directory called templates in your Flask application directory. Inside the templates directory, create a new HTML file called index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask SQLite Web Application</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Step 4: Create routes in Flask
Open app.py and write the following code to create routes for our Flask application.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)This code sets up a basic Flask application with a single route that renders the index.html template.
Step 5: Run the Flask application
In your terminal, run the following command to start the Flask application.
python app.pyVisit http://127.0.0.1:5000/ in your web browser to see your Flask application running.
Step 6: Add Jinja templating
Let’s modify our index.html template to use Jinja templating. Update index.html as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask SQLite Web Application</title>
</head>
<body>
<h1>Hello, {{ name }}</h1>
</body>
</html>Next, update the index route in app.py to pass a name variable to the template.
@app.route('/')
def index():
return render_template('index.html', name='World')Now, when you refresh the page, you should see "Hello, World!" rendered in the browser.
Step 7: Add CSS and JavaScript
Create a new directory called static in your Flask application directory. Inside the static directory, create a new directory called css and a new directory called js.
In the css directory, create a new file called style.css with the following contents:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
color: #333;
}In the js directory, create a new file called script.js with the following contents:
console.log('Hello, World!');To include the CSS and JavaScript files in our HTML template, update index.html as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask SQLite Web Application</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<h1>Hello, {{ name }}</h1>
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>Step 8: Handle form submissions
Let’s create a simple form on our index.html template to allow users to submit their name.
<form action="{{ url_for('submit_name') }}" method="post">
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>Update app.py to add a new route for handling form submissions.
from flask import request
@app.route('/submit_name', methods=['POST'])
def submit_name():
name = request.form['name']
return f'Hello, {name}'Now, when you enter your name in the form and submit it, you should see a message saying "Hello, [your name]" displayed on the page.
Step 9: Store form data in SQLite database
Let’s modify the submit_name route in app.py to store the submitted names in the SQLite database.
import sqlite3
@app.route('/submit_name', methods=['POST'])
def submit_name():
name = request.form['name']
conn = sqlite3.connect('data.db')
c = conn.cursor()
c.execute('INSERT INTO users (username) VALUES (?)', (name,))
conn.commit()
conn.close()
return 'Name submitted successfully'Now, when you submit a name through the form, it will be stored in the SQLite database.
Congratulations! You have successfully created a Flask web application that uses SQLite as the database. You have used HTML, Jinja, CSS, JavaScript, and Python to create a fully functional web application. Feel free to expand on this project by adding more features and functionality.
manbearpig is awesome!
I really like the video but can anyone tell me how to install the triggers for the deployment
perfect! 🙂
3:35
Why when i start a new project i get this error:
(venv)
Usuario@DESKTOP-N7C5T3G MINGW64 ~/Desktop/workspace/todoer (master)
$ flask init-db
Usage: flask [OPTIONS] COMMAND [ARGS]…
Try 'flask –help' for help.
Error: No such command 'init-db'.
Very nice, well delivered. You are a sweetheart. Smart too.
i loveeeeeeeeeeeeeeeeeeeeeeee you girlllllllllllllll 💝💝💝💝💝💝💝💛💝💛
amazing tutorial!! thank you for clarifying so much for me about flask and databases
This girl is making the world a better place. Thanks for sharing!
Hmmm… Intelligence! let's get married already 🙂
wayscrpt links are dead
Hands down, one of the best channel for Python !
How to do if we don't have wayscript x because I tried with Vs code only but I have so mush problems with my browser that doesn't appear etc…
Hey, How can i get in touch with you? I feel there's some mistake with codes..i need to talk about
Another great video. You are a great inspiration.
👍
if i want to see the list one by one like slider. can we show list elements one by one in 2 seconds?
?
Thank you for the explanation and the step by step tips… simply awesome 0/ / /0/ 0 o_ /o_
Hi, and a thousand thanks for this video, and all of the others that answered questions I even didn't know I had ! 😉 You really are a great pedagogue, with an attention to small details, like thinking of making a table of contents for the videos… not everybody does that !
I've quite a lot of experience in (small) projects with Python and was looking to improve my skills to achieve some simple tasks, like building a web interface to update a database, and here it is !
I actually have a little question / suggestion related to my learning curve : are you going to talk of SQLAlchemy in an upcoming video (unless you already did and I missed it) ?
At this time, I am asking myself whether to use it or not in my project, and the pro's and con's are not very clear to me. I understand what it does, I see a lot of people are using it, but well, why not stick to simple SQL…or not ?
And well, I have to say it, I love the very professional way you handle mansplaining in the comments (but being a girl in IT I guess you've got more than enough experience with it 😉 )
Thanks again,
Thierry
great content!