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:

⏰ 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
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
$ export FLASK_APP=my_app
$ export FLASK_ENV=development
$ flask run
⭐ in your browser navigate to:
localhost:5000

🔗 IMPORTANT LINKS 🔗
---------------------------------------------------------------
⭐ Github Logo from tutorial:
⭐ my previous Flask tutorial:
⭐ my previous SQLite tutorial:

🤝 Connect with me 🤝
---------------------------------------------------------------
🔗 Github:
🔗 Discord:
🔗 LinkedIn:
🔗 Twitter:
🔗 Blog:

🙏 THANK YOU 🙏
---------------------------------------------------------------
Thank you so much for watching! 😀

[zaheer]

I love the way you build onto your code. A lot of people who have a lot of experience just jump to the end product of what the code should ultimately look like with some explanation. But I really like how you start with something basic, code it, , and then go back and change the code to add more complexity. It really levels up the understanding of us beginners.

[TheLtrance]

You've bridged so many learning gaps I've had. I'm a network engineer so I don't get to touch much of this stuff, but when I need a solution, I usually have to write it myself. The little examples you give helps out a lot. Wishing you 200k subs soon

[vladk]

I like how this channel fills the gap between intermediate and advanced, other content is usually either very basic or too advanced for me

[freedtmg]

Mariya! I love your tutorials. You truely simplify python! I have learnd so much from watching! Thanks for inspiring me to branch out and be a better dev!

[humbertorodriguez]

This girl is making the world a better place. Thanks for sharing!

[MegaJohn]

I was desperate to find a way using Python to query a local SQLite database in a desktop application. Thanks to your very clear explanations, I know I can do it.

[naseemsultana]

Hands down, one of the best channel for Python !

[CatIcarus]

This video was so helpful to me. Thank you for explaining it all! 😊
I'm a Data Engineer by day and a curious front end learner by night! Hoping to build something cool with your tutorials help!

[alyssarschaefer]

amazing tutorial!! thank you for clarifying so much for me about flask and databases

[balazsberes]

Very helpful tutorial!
It was easy to understand even if you are new to flask!
Just what i needed for my next project with python. Thank you!
וגם תודה רבה! ראיתי שהגבת בעברית לחלק מהתגובות 😀

[ZurioSi]

First time I hear about Jinja and honestly I like it. Amazing video as always! 100k soon, I can't wait so happy for you.

[zahraraza]

This was a really well made video!! Your way of explaining everything was really helpful concise

[alexhall]

Had an moment where my 6th item kept overwriting, then noticed between 20:44 and 21:19, line 18 sneakily changed to include "session.modified=True" :)

[Programmer_pk]

Finally, Wait is over! Thanks, Maria

[VenomRaiders]

As someone who loves using flask, Great tutorial. Well explained concepts

Edit: one tiny suggestion, with js it's a good practice to use let and const especially since it's easier to manipulate DOM elements and due to the es6 rules.... but great tutorial

[anderslindstrom]

I was just thinking how do I get my python skills to the web and this showed up :-) . Awesome that you explain why you do certain things and how it goes together. Thank you so much!

[contentwhre]

Great tutorial, but I'm always mesmerized by your fashion sense! A+++

[mauriciograsso]

¡Buenisimo! muchas gracias me super sirvio ademas de que aprendi un monton.
¡abrazos!😃

[danyvalcal]

Excellent video. One flaw I had to fix is that after check some items and then uncheck all of them, the style of remove button does not change. So, to improve this, I get all checked inputs and check its length to get the number of checked inputs. If his length is 0 means there is no checked input so the style does not change. Otherwise, it changes. Other detail that I improved is that after select an item that is already in the shopping list, the item should not be added. I made this by checking this and rendering the same page.

[CameronSouthall]

Great tutorial ! Just wondering if I am missing something ? At 20:51, The add_items function doesn't appear to have "session_modified = True". When I ran the code, my list wasn't appending properly. However, when I added "session_modified = True" and re-run it. It started working as expected. It looks like it might have been added later ?