Flask SQLite Web Application Step by Step Tutorial - HTML, Jinja, CSS, JavaScript, Python
Vložit
- čas přidán 25. 07. 2024
- 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:
github.com/MariyaSha/grocerie...
⏰ 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:
raw.githubusercontent.com/Mar...
⭐ my previous Flask tutorial:
• Simple Web App with Fl...
⭐ my previous SQLite tutorial:
• SQLite Backend for Beg...
🤝 Connect with me 🤝
---------------------------------------------------------------
🔗 Github:
github.com/mariyasha
🔗 Discord:
/ discord
🔗 LinkedIn:
/ mariyasha888
🔗 Twitter:
/ mariyasha888
🔗 Blog:
www.pythonsimplified.org
🙏 THANK YOU 🙏
---------------------------------------------------------------
Thank you so much for watching! 😀
Thank you to Flaticon for the notes icon: www.flaticon.com - Věda a technologie
manbearpig is awesome!
Half man, half bear and half pig - I'm super serial 🤪 hahahah South Park is probably my favourite cartoon since childhood!! 😉
@@PythonSimplified for sure, and the app is awesome too.
I think she was talking about me! ^.^
I like how this channel fills the gap between intermediate and advanced, other content is usually either very basic or too advanced for me
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.
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
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!
This girl is making the world a better place. Thanks for sharing!
Hands down, one of the best channel for Python !
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!
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.
amazing tutorial!! thank you for clarifying so much for me about flask and databases
Easy deployment. BEAUTIFUL!
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.
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
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" :)
Right ! I have also spotted this ... and lost 15 minutes of my life on it.
Gosh thank you a lot! you saved me lots of time!
Thanks a lot alexhall27
This was a really well made video!! Your way of explaining everything was really helpful concise
Great tutorial, but I'm always mesmerized by your fashion sense! A+++
Finaly Wait is over ! Thanks Maria
Finally, Wait is over! Thanks, Maria
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!
וגם תודה רבה! ראיתי שהגבת בעברית לחלק מהתגובות 😀
You're absolutley welcome and thank you so much for the lovely comment! 😃
אני ממש שמחה שהוידיאו עזר לך וזה תענוג לקרוא תגובות מארץ הקודש!
אני גרה בקנדה כבר שנים, אבל גדלתי בקריית שמונה... לכן העברית! 😉
¡Buenisimo! muchas gracias me super sirvio ademas de que aprendi un monton.
¡abrazos!😃
Wow!!!! That's amazing tutorial!!!! Thanks, my dear teacher and friend. Flask never ends!!!! Greetings and its a good moment to thinking about a Wordle Clone in Flask!!!! :8)
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.
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!
Thank you so much for the lovely comment Anders! 😃
Excellent! Thanks. Love Flask
Thank you so much! Super happy you liked it! 😃
Really brillient and great excercise , Thanks Mariya.
This is awesome video!!! thank you very much!!
Wooow, this tutorial was amazing Mariya.
Congrats.
Thank you so much for your lovely comment Ezequiel! 😃😃😃
Wow, the tutorial is really useful, but I must also say I love your make up!
Very nice, well delivered. You are a sweetheart. Smart too.
Thank you for your clear easy to follow tutorials
תודה!
תודה רבה על התגובה המהממת ארז! 😃
ד״ש חם מוונקובר!
great content!
Amazing video I comment before this is starting because I know you are amazing thou! XD 💪🤝 that's how it's done!
I can always count on you Udbhav!! 😁😁😁 Thank you so much my friend!
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
Thanks for video, very very useful
Your picture quality is incredible
Great and simplified explanation for a complex task
Thank you so much Chaitanya! I'm super happy you found this tutorial helpful! 😁
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 ?
Lots of love from India
Video with full of energy. I love your sprite of explanation. You are amazing thou! XD 🔥🔥
Thank you so so much! I was super happy to chat with you earlier, thanks for sticking around for the entire premiere!! 😃😃😃
Today was definitely a long one, I really appreciate your support! :)
@@PythonSimplified 🙂
Very nice tutorials 👌
Wow your better then half the university teach in usa
inside de add_iten function:
if request.form["select_items"] in session["shopping_items"]:
pass
else:
session["shopping_items"].append(request.form["select_items"])
session.modified = True
now it is complited!
wow this has to be one best informative flask tutorial i ever watch. my question if the user wanted to buy those items, will there be order sql table to received the data items
I was looking forward this one. Thanks a Lot Mariya
Yeeey, super happy to hear it!! 😊
I hope you like it! 😃
@@PythonSimplified I love it!
Hi, first of all thanks for the great job you are doing, I really appreciate it. Is it possible, without using js, to automatically update a page with data (from query) that has been added / modified by other users in the meantime? Thank you very much, greetings from Italy.
Another great video. You are a great inspiration.
perfect! :)
good job !
Great vid thank you.
Lol man bear pig. Love the reference
just watched. i think i found the problem you mentioned.
haven't checked if it was mentioned in the comments,
+ i've skipped through a couple of chapters.
to it, we did not close the connection to the database although we made a function for it.
id fix it by adding that function call somewhere hehe, maybe after we make the initial query.
but now that i think about it had a parameter called exception (not used though..
starting to se a pattern here :p ) so perhaps wrapping the get_db() in a try/except that passes
the exception to our orphan function. thus if an exception occurs, we close the database
connection and do something with the exception, maybe logging it or printing.
my 2 cents. be nice peeps
Beautiful
Oh, you're Russian! I couldn't place the accent. You just got way more interesting. Bingeing your videos now :)
your really amazing great tutorial
Thank you so much!! I'm super glad you like it! 😃
Awesome job. One question. How can import triggers to my ide?
Thank you in advanced
Hello, interesting tutorial for this app, could you do a tutorial on how to make a login form using flask and mysql (not sqlite) and how to restrict pages if you are not logged in.
Problem : limited items in drop-down menu
Solution : instead of using drop down menu we use input box
Comment : very amezing and understandable video keep it up 🥰
Good and informative video, my only question is, can you somehow make it that the sound of the keys being hit is not present in the final cut of the video? maybe it is just a me problem :)
Thank you for the informative video.
how do you find out or choose your port number (@4:58) and host? I know what ports are open on my computer, do I use one that's not one of them?
hi, I just saw the video, what is another platform we can use instead of wayscript to host the app for free?
Very very very very good 🥰🥰🥰🥰🥰
hello 👋👋
just got in!
if i want to see the list one by one like slider. can we show list elements one by one in 2 seconds?
?
With Typescript you have fewer errors at runtime because it catches them early. I like that about TS
M, you are the best and the beast ..
Maria Intenational
@@elenanes4084 what?
How would you do this if you have a database and want to save your users info?? ALSO how do you keep users logged in through the use of "session"??
Thanks!
cool.
Hey great video. Just a question: wouldn't enumerate give you the same idx instead of index(item) ?
Hey, I did the same. I used enumerate() method as it is more efficient and fun to work with.
I had a problem to deploy site
sqlite3.OperationalError: unable to open database file
any idea?
Большое спасибо
בכיף זכריה! תודה רבה על התגובה! 😃
@@PythonSimplified תודה רבה בכיף
Nice video . I have 1 problem at 21:15 in appending items in shopping_items, it wont append rather it replaces the newly added one. I am using SQLAlchemy , maybe this is the problem.
I think you're right! 😃
It seems that SQL Alchemy has a special way of opening and closing sessions, check out their docs:
docs.sqlalchemy.org/en/latest/orm/session_basics.html#basics-of-using-a-session
So instead of using Flask sessions - you'd have to use SQL Alchemy sessions (and I believe it's a .add() and .delete() situation rather than .append() and .pop()... but I'm not too sure, I haven't experimented much with SQL Alchemy yet 😅)
I hope it helps! Please let me know if you were able to figure ot out (other folks might have the same issue, so it would be really awesome if you can share your solution! 😊)
Mariya, could you please copy start files to some cloud, WayScript give an error while cloning? It would help a lot...
Possible ajout images et des catégories dans bd SQLite , possibilité application Android avec base SQLite
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...
Just a curiosity: Why sqllite3 rather then MySQL? Does MySQL not working well with Flask?
MySQL works perfectly with Flask! 😊
I just haven't had a chance to cover it on my channel, while folks are already familiar with SQLite from my previous tutorials:
⭐Sqlite for Beginners:
czcams.com/video/Ohj-CqALrwk/video.html
⭐Web Scraping SQLite Databases with Mechanical Soup:
czcams.com/video/MkGQmZoMuRM/video.html
Other than that you can use many other DB management systems with Flask such as PostgreSQL and even MongoDB. It's entirely up to you (and the task you're handling) 😀
@@PythonSimplified Nice! good to know. I will check the other videos. By the way, I didn’t expected is it YOU answer my question. thanks for that! 🙂
What is the monitor model :)?
Commenting for CZcams algorithm. I will watch it later. :)
Hahahahaha thank you so much! I really appreciate it!! 😁😁😁
Hey, How can i get in touch with you? I feel there's some mistake with codes..i need to talk about
Just When I Think You Have Hit The Apex; BLAM; You Fucking Amaze Me, Sweetie ~
Love You and Your Channel ~
hahahaha thank you so much for the incredible comments! always a pleasure to see you!! 😁😁😁
Good Day,! I have some questions. Is there a chance to web scrape the reactions of the post on Facebook? Because our thesis adviser wants to do "social media mining" by using web scraping. Thankyou in advanced!
Yup! absolutely! Social media is extremally scrapable and you would rarely encounter blockers that I didn't show you how to bypass 😊
I have a Facebook scraping tutorial, you can apply the same techniques on text rather than images:
⭐ Web Scraping Facebook with Selenium:
czcams.com/video/SsXcyoevkV0/video.html
I also discuss bypassing blockers in my LinkedIn tutorial:
⭐ Web Scraping LinkedIn with Selenium:
czcams.com/video/7aIb6iQZkDw/video.html
Also, you might want to do the same with Instagram - I have a super detailed blog about it:
www.mariyasha.com/post/web-scraping-instagram-thumbnails-with-selenium
In either case - I highly recommend Selenium! it's one of the most powerful scraping libraries and it's perfect for dynamic language sites, not only HTML/XML 😉
(and also - it's my all times favorite! hahaha)
Do you know how to make a flask register?
mam I watch your videos only because of you , you are damn pretty. I know all this stuff but still watch just to see you. Your big fan
Nice video... But I would like if you would adapt the new Typed Function Definition Syntax and also I would like if you adapt TDD, too... Reason: Most of your audience are Novice, I assume, so as a good Parent or Teacher, you should show them how it should be done instead it "only" make it work... Never the less I'm as an experienced Python Programmer watch other Pythonistas how they code, maybe I can learn something new... ;-)
👍
Please, can you show, how create desktop app with help Flask for Windows, Linux and Mac ? Spasiba you much for you many useful videos with positive and energy atmosphere... ivo
Hi Ivo 😃
Flask is a web application framework, so it unfortunatley can't be used to create a desktop app.
Apps created with Flask are meant to run in a browser program (therefore the combination of HTML/CSS/JavaScript which are web languages 😉)
The good news is - because it's a web application, as soon as you deploy it to production everybody can use it! Regardless of what OS you run on your computer 😊
If you want to try a nice desktop GUI library, I have a very quick and simple Kivy tutorial which you might really like:
czcams.com/video/YDp73WjNISc/video.html
Good luck and I hope it helps! 😁
@@PythonSimplified 🤔yeah of course... I mean some service which "pack" Flask web app to standalone desktop app with help Chrome/Chromium. Exist some tutorials, but I don't know if are actual and most exists only simple app without SQLite... And your tutorial are amazing and detailed and with great explanation and accurate speed - you have talent and much precision hard work to every tutorial. Really!
@@ivokoubek7683 hmmm... I'm not really femilliar with something of that kind 🤔
Sorry I'm often getting questions from beginners so I'm overexplaining by default 😅 hahahaha
I believe you're talking about PWAs? (Progressing web apps) you should be able to combine it with Flask, I don't see a reason why an SQLite database would be a problem... I've seen a bunch of Github repositories providing PWA Flask source code, this one looks very promising:
github.com/umluizlima/flask-pwa
If I'll get more requests on it - I'll definitley make a tutorial, for now ai'll stick to what I'm femilliar with 😁
Thank you so much for clarifying and my apologies for not getting your original question... I hope I was able to help somehow 😊
@@PythonSimplified thank a lot ... I haven't experience with it also, I used console for input and XLS output still for my projects (work with account data from DB and XML files), and then pack to exe, but I want be prepare for more possibilities (forms, pretty GUI, live table with JS etc.)... I will explore your link and I stay tune in your chanell... bye from Czech rep.
@@PythonSimplified I think he's referring to Electron, where the app is completely done on the client side and the server side just handles API calls. But that's more web dev than python, so might be out of scope. Maybe you could just show how to do a web service with Flask ajax.
😊👍🌹
My new response to ppl when they ask me anything. "zero, zero, zero, zero... , four zero's."
any update about our CodeJam
When did you start learning programming? 😊😊
When I was 12! When my parents finally got a broadband internet connection - I've started to learn HTML/CSS and build my own super girly websites! 😃
(before that I was only allowed 1 hour of internet per day, so there wasn't enough time to learn anything - but I would if I could! 😉 hahaha)
How about you?
@@PythonSimplified I guess I'm bit too late I've just started to learn programming at 16 gdscipt for Godot and then started python at 17.
I'm bit worried I didn't start before :(
Now I'm 18 and I still know only python.
Big sister please and please help me do a video on how to add a search system to flask app whereby if you search for something you can get the feedback displayed
Hi Mariya!!!
Hello my friend!!! 😃 what do you think about this tutorial? did you like it?
@@PythonSimplified Great Tutorial.
I play by myself. I drink every time she says "Core Sore" or "Sore Sore" :)
I don't like the look of those check boxes. I think they are better if aligned vertically by giving them the same className and putting them inside container DIV then style them float:left; centering the containing DIV
wayscrpt links are dead
3:35
38:49 AAAAAAAAA. ahahahaha . Queen.
hi !
Thank you for the explanation and the step by step tips... simply awesome _0/ \0/ /0/ 0_ \o_ /o_
lol, you can add the same food by refreshing the page with add_items/ route lol and removing too hahah
Hahahaha that's the beauty of a "post" request! Actually, if we were to use "get" instead you could have added items that do not even exist in the databse! 😉 as "get" sends information via the URL - you could have entered any item and it would just show up in your shopping list! 🤪
"post" on the other hand sends information via the body of the request - so it's not as easy to trick 😃
Hmmm... Intelligence! let's get married already :)
Use pre tag to align checkbox. They look ugly.