Flask SQLite Web Application Step by Step Tutorial – HTML, Jinja, CSS, JavaScript, Python

Channel Avatar
Comment
X
Share
Flask SQLite Web Application Step by Step Tutorial - HTML, Jinja, CSS, JavaScript, Python
Flask SQLite Web Application Step by Step Tutorial – HTML, Jinja, CSS, JavaScript, Python
In this tutorial we will see how to create a web application using Flask and SQLite. Flask is a web framework using Python for the backend, HTML and Jinja for templating, CSS for styling and JavaScript for client side interactions.
So today, will not only connect databases to a Flask server – but we will also learn how to use all the perks of this framework.

Please note: Wayscript is no longer with us! RIP!
Please refer to the Github repo instead!

Clone Starter Files and Complete Groceries App from Github:
https://github.com/MariyaSha/groceriesList

TIME STAMPS
—————————————————————
00:00 – Intro
00:48 – starter files walkthrough
02:31 – connect SQLite database to Flask
04:16 – deploy app to development environment
05:18 – preprocess database data
07:08 – HTML template
08:04 – Jinja2 templating
09:44 – database entries as form options
15:39 – database entries as checkbox elements
18:08 – Flask Session (global data)
24:48 – CSS styling
33:14 – connect JavaScript to Flask
34:46 – JavaScript client side interactions
38:43 – testing the app
39:26 – deploy app to production with Wayscript
41:01 – challenge!
41:17 – thanks for watching!

run Flask locally on Windows machine
—————————————————————
navigate to project directory:
cd path/to/my_directory
if the name of your Flask Python file is /”my_app.py/”
set FLASK_APPmy_app
set FLASK_ENVdevelopment
flask run
in your browser navigate to:
localhost:5000

run Flask locally on Linux machine
—————————————————————
navigate to project directory:
cd path/to/my_directory
if the name of your Flask Python file is /”my_app.py/”
export FLASK_APPmy_app
export FLASK_ENVdevelopment
flask run
in your browser navigate to:
localhost:5000

IMPORTANT LINKS
—————————————————————
Github Logo from tutorial:
https://raw.githubusercontent.com/MariyaSha/groceriesList/main/logo_black.png
my previous Flask tutorial:
https://youtu.be/6plVs_ytIH8
my previous SQLite tutorial:
https://youtu.be/Ohj-CqALrwk

Connect with me
—————————————————————
Github:
https://github.com/mariyasha
Discord:
https://discord.com/invite/wgTTmsWmXA
LinkedIn:
https://ca.linkedin.com/in/mariyasha888
Twitter:
https://twitter.com/mariyasha888
Blog:
https://www.pythonsimplified.org

THANK YOU
—————————————————————
Thank you so much for watching!
Thank you to Flaticon for the notes icon: www.flaticon.com

Take the opportunity to connect and share this video with your friends and family if you find it useful.

Read Also

Leave a Reply

Your email address will not be published. Required fields are marked *