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

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.
And the crème de la crème?
We will deploy our application to production directly from our IDE! 😱😱😱

Speaking of my IDE, I’m using a brand new version of Wayscript, which is now available for the wide public. You can get here: https://app.wayscript.com

⭐ Clone Complete Groceries App: ⭐
https://app.wayscript.com/lairs/8efe30b2-17c0-4b0f-8c51-5852891b723c/public/

⭐ Clone Starter Files from Wayscript: ⭐
https://app.wayscript.com/lairs/3042f3c6-03ec-4afe-9a6c-bc8c8d981363/public/

⭐ Deployed Groceries App ⭐
https://splendid-serpent-island-dev.wayscript.cloud

⭐ Clone Starter Files 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_APP=my_app
set FLASK_ENV=development
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_APP=my_app
$ export FLASK_ENV=development
$ 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

πŸ™ THANK YOU πŸ™
**********************************
Thank you so much for watching! πŸ˜€
Thank you to Flaticon for the notes icon: www.flaticon.com

Comments are closed.