Python Flask Beginner Tutorial - Todo App - Crash Course

hey guys welcome to a new Python tutorial today I want to show you how you can get started with flask we will write a simple to-do app to manage tasks so you will learn how to install and use flask how to handle different droughts how to use a database and also a little bit how we can style our app at the end so if you don't know flask flask is one of the most popular web frameworks in Python and what's nice about flask is that it's a lightweight framework so it allows us to get started quick and easy so you will see in a minute how easy it is to setup our first app but with flask it's also possible to write very complex web apps so yeah it's really great and now before we get started let me show you the final at first so the final app looks like this here we have our to-do app and here we have our list of to-do items so I already edit one then here up here we can add another to-do item so for example simply you say to do two and then click on add and this will add the item to the list and then we see a status not complete and then we can click on update and this will change it to complete it then it if we click update again it will change back to not complete and of course we can delete items again so yeah so that's the app we are going to implement and now let's get started so let me stop this app here first so now let's create a new empty directory so let's call this flask to do and then let's go into this directory flask to do and then let's open my editor so I'm using Visual Studio code and here we can use the integrated terminal and now we go to the official website so the official flask website and follow the installation guide so it's not to accomplish complicated the first thing we want to do is to create an a virtual environment so it's always recommended to use this and so I'm grabbing this command and if you're on Windows it's slightly different so you have to use this syntax then let's paste this and create our environment so this will take a few seconds and now it's done so now if we go back the next thing we want to do is we want to activate our environment so I'm using this command again if you're on Windows then you have to use this command so paste the actuate command in here so now our environment is actuated and we can see this because we see the name of our environment in the beginning and now we want to install flask so we say pip install flask and this will take a few seconds and now it's installs and now we can start using it so now let's create a new file so let's call this F dot PI and here we say from flask import flask and then we create an F equals flask and this has to get underscore name so this is just a convention and now and what we want to do is we also want to define the index page first so define index and here for this example we simply return a string hello world and now for each page or each route we have to decorate this by saying app dot route and then here we specify the URL so for this it's just a forward slash so this is our index page so now this is the all the code we need to have a first app so now let me show you how we can run this app so there are two ways the first thing for this we have to set some environment variables so we have to say X port and then we say flask F flask underscore app equals and then our file name F dot PI and I also want to set the flask environment by saying flask F equals develop men so this makes it easier during implementation because then we don't have to restart our server each time we modify it the files so we also set this environment and then we can say flask run and then it says serving our flask app it's running here at localhost port 5000 so if we go to this URL then we see we it shows hello world so this is what we specified for the index page and now we have our first app up and running so this is the first way to start it so now if I hit ctrl + C then it will stop the server again so the second way to do it is to say if name equals equals double underscore main I'm sorry this was autocomplete then we simply say F dot run and we set debug equals true so we are in development mode and then in our environment we start our script like we start every Python script by saying Python F dot PI and this will do the same thing so now again if we go to this where else to our localhost then we have our app here up and running so yeah so now if you want to add different site so for each site or or L we have to add a new function so let's for example show an about page so we define our method about and here we return about and then we specify the route is at forward slash about now if we hit safe then it's restarting our server and now if we go to the index page we see the same thing and now we can also go to slash about and then we get the about string so this is how we define difference who are else for our web app and now of course we don't simply want to return a string here so the common way to do this is to render a template here so we say from flask import render template and then let me remove this one then we want to return this template so we say return render template then the name of our file so we call this base dot HTML and of course we have to create this so in our top folder we create a new directory and call this templates so this has to be this name because flask is looking for the templates directory then inside this directory we create our file based of HTML and here we can write some HTML code so some boilerplate and let's give this a title to do app and then let's simply for now at an h1 tag and say also to do app and now if we reload this so I'm saving the file then this should be should reload so now if we go back to our index page and hit enter then we see that it's ran during this template so it's showing our h1 tag so this is working and now we can for example continue to implement our HTML so for example if you have a look at the final app up here we want to have a forum to enter a new to-do item so let's do this so in our base HTML let's add a forum and for now I will leave the action blank so I will explain this in a second so our forum first let's add a div tag then our forum should have a label for let's call this title and then the label says to do title then we want to have a input and this is of type text then it also should get a name equals title and it also has to or should have a placeholder ENTER to do dot dot and we also want to have a button here and the button says add and this should test type equals submit so sorry and quotes submit so when we click on the button then it should submit the form so now if we save this and reload our app again then we see we have our form here so let me add a quick change so let's add a new line before our button so let's add a br tag and then again if we reload the page then it should show the new HTML so this is working and now of course right now this button isn't doing anything so now the next thing we want to do is to add our database and for this I want to stop the server again so for this we have to install another module and this is called a flask SQL alchemy so we say pip install flask - SQL owl okay me so I'm just checking if I didn't have a typo so yeah should be fine and hit enter so this module makes it easy for us to work with SQL databases so now it's installed so now we can import this so we say from flask SQL alchemy we import SQL alchemy and then we create our app and now what we want to do or what we have to do is to set a config variable by saying F dot config and this is a dictionary so this has to get a key and the key is called SQL SQL alchemy all in capital letters underscore database underscore worry so this is the name or the path to our database and in this example we are simply using a SQLite database for now so the syntax is SQLite colon and 3 forward slashes this means that it's a relative path so in this directory here and then we can give it the name we want so we call this D P dot SQLite so now we have a the path to the database then I also want to set a second conflict variable and this is called s ul alchemy underscore track modifications equals false oh don't worry about this if you don't set this to false and we will get a warning with the current flask version so that this will be removed in the future anyway so I'm setting this so now I create or we create the actual database by saying DB equals SQL alchemy and this gets the app and now of course before we run our code again we also have to create our database first so for this we say DB dot creates all and now if we run our code again then this should work if we did everything correctly and then you will see that in our folder this file DB dot SQLite should appear so let's run this and oh yeah it worked so here's our database so now we can start working with this so inside our database we want to have one model so we create a class for our to-do items by saying class and let's call this to do and this has to inherit D P dot model and here we want to specify all the entries for this model in our database so our model has to have three things one is an ID for our item one is the title of the to-do item to the the task and then it also has a boolean value if it is completed or not so let's do this so we say ID equals DB dot column so for each entry we create a column and for the column we have give it a data types in this case it's a DB dot integer and for this we also set primary key equals true this means we want to have a unique value for each to do item that we want to create and SQL alchemy automatically manage these manages these keys for us so we have the ID then we also want to add the title by saying DB top column and in this case this should be a string and this should also get a length of 100 so the maximum possible characters then we can type in and then we also give it a tag complete equals D P dot column and this should be a boolean so DB dot pool in so now this is the complete class we need and for now for a simple for simple demonstration let me create one here for you so when we the next time let me stop this again and the next time we run our app here it should create one new item so we say new to do equals and then we create our to-do item and this gets the title equals so for now let's simply say to do one and complete equals false then we say DB dot sessions for the current session we want to add our items so we say add new to do and we also have to commit this so we say DB session dot commit so now this should be added to our database so now in our index page here we want to show all to dues so we want to query the database so we say our to do list equals and then we use to do dot query dot all this will return a list of all the items so for now we simply print this so now let's run our app again and now if we go to our home page again and reload this and then go back to the terminal then we see we have the list of to do so I guess it's reloaded again that's why we have two items here so but we see that it works so we added some items so now let's delete this again and let's so it's restarting and then for example if we hit enter on this page again we see we still have the items in our database and now the next thing we want to do is we want to of course show these items and we can do this by passing these items to our template so we say we give this a parameter name and say to do list equals our to-do list and then inside our HTML we can access these items so this is called ginger templating engine so if you go back to the flask site here on the front page we see flask depends on the ginger template engine so I will show you how this looks in a second so inside our HTML we can now use the special syntax and this is a little bit similar to Python code but not exactly like Python so what we can do here for example is we have to use curly braces and then percent and then we can do a for loop like in Python we can say for to do in to do list and then we also have to end this so somewhere we have to write and for and now this will do a for loop and then for each to-do item we want to render it so let's simply create a P tag and here if you want to access the single to-do item we use double sorry double curly braces and then we can for example say to do dot ID and so we can access all the variables so let's use this let's use this a separator and then for example we also want to show that to do dot title so now this should work so if we go back to our app and reload this then we see this is working so it the for loop is generating a P tag for each of the items and we have two items right now in our list so this is working so now we also if we have a look at the final app so we want to add the complete tag or complete or not complete then the Update button and the delete button so for this let's go back to the HTML code then inside here what we want to do is first we want to check if the to do is complete it so for this we can again let's use curly braces and then % and then we can use if sent if syntax we say if to do dot complete equals equals false so again this looks like Python code if this is true and then again we somewhere have to define the ends if and we also can use we copy this again we can use a else statement and then so if this is a not completed then let's hear let's use a span and say not complete then else if it is completed we say come pleat or complete it then we have our end if so now if we reload this then this should show not completed for each of the items so yeah this is working not complete yeah not complete not completed doesn't matter so this is working so then let's add the update and delete button so for this we are using a a tag so and I will leave the H ref blank for now so again I will explain this in a second how this is working so this is called update and then here let's use another one with by saying sorry not at delete and for now you're simply so this has to get the URL which our tag leads her so for now let's simply say this should go to our home page again so now if we reload this then this is working we see our to update and delete buttons and if we click on this then this is reloading the index page so this is working and now what is left to do is to add the actual functionality whenever we click on the Add button the Update button order delete button so now for each of these operations we want to add a route again so let's define a function and call this at and here for now let's say pass or let's write a comment at new item so here we are using oh I already deleted this so let's say let's write this again so let's say new to do equals to do and then it will get that title so title equals so first we have to get the title and we get the title from the form and so we get this if we have a look we get this from this input field with the name title so let's say title equals request dot form dot get and then the name of this form is title so we also have to import request from flask and now it stopped my server because it's detected this syntax error here so it doesn't matter for now so now we get the title so we put this into our to-do item and we say complete equals false in the beginning then we add this to our database so we say DB dot session dot at our new to do then we have to commit this by saying DB that session dot commit and then after we added the new item we want to refresh our index page so for this we also import tomb of things so the one is called redirect and the other one is called URL for and then we want to return the redirect return we read I wrecked and then here URL for and then it has to get the name of this function so this is called index so this will redirect the user to this page and so because this should be a route that is never be shown so this only has the purpose to add the new item and then redirect this URL but still we have to define it as a route so we have to say or decorate it by saying F dot route and then here we give it the URL and this is slash at and then we also say methods methods equals and this is an array and here we simply say post so this should be a post method so now if we go back to our base HTML in our form action here should be the same route that we just defined so here we say /at so this is the action that happens so this will execute this code here so now the adding should already work so now if we go back and now if we hit a to do so let's say to do three and now if we click Add then this should add a new item and then redirect or refresh the home page so we still or we have an arrow here so let's have a look oh our sorry of course the flask app is not running so we say Python app dot PI so now we don't get an error it looks good so now go back to our home page and now let's try it again so to do three and click on add then we get an error here so oh I think we also have to specify here that the method should be a post method so now if we go back and then enter a new to do three and let's try again so oh I'm having a typo here and let's check where is it think during the ad or in the add method at complete so now one more time let's go back to our index page let's add a new to do and click on ads and now it worked so now we see or we know how we can add things so now we still have to update and delete our things so now this should be fairly easy zand now we know how we do this so we define a new function like let's copy this or no let's better copy this sorry let's copy and paste this and here let's call this this should be a at slash update and then of course we also have to know which which to do isin we want to update so we use another slash and then we can use this syntax this is an integer and then a colon and then if we call this to do ID and we don't need this and then let's call this update and then inside this function we want to query our database for this ID and then modify the complete variable so let's do this so here instead of adding this what we want to do is we want to query our database so we say our to do that we want to update equals to do dot query and now we don't query also but instead we can use query dot filter underscore by and then here we say ID equal equals to do I D and then only this should only return one so we say first so this is our to do so now for our to-do item we want to set the to do dot complete equals to the opposite so we say not to do dot complete and then we commit this again and redirect to the home page so this is all we need here and now as a last thing we need the syntax to delete our item so here we specify the route delete and then our ID and we call this delete and here we do the same thing we query the database to get this item and then we say DB DB dot session dot the lead our to do then we commit this and redirect to the home page so now we have these two routes and now the only thing left to do is to go to this route when we click on the update or the delete button so here we say we go to update and then we go to slash and here as I said we want to give it the ID so again we used the templating syntax like here so double curly braces and then the to do ID and the same same thing for the delete and button but instead here we are going to delete slash our to do ID so this should work now so let's refresh our page again and then we will we get an error here so now I just had to restart the service and now if we click on update and then we get an error update got an unexpected keyword argument to do ID and this is because of course I also have to add this as a parameter so also to do ID so the same thing is in the same name as we were using here and here and also our delete function has to get this parameter so now it should be fine so now if we go to our home page again now if we click on update then this should change to complete it so this is working click update again let's check this so this is working let's click on delete so this is working delete again let's add another one to do for and it's adding this this is working so now we have all the functionality we need and now the last thing we can do is to style our app a little bit so for this in this example I want to use semantic UI so this is really nice framework to rapidly at nice styling to our app so for this we only have to change things in our eighth HTML file and don't have to worry about the CSS so in order to add the semantic UI we go to the official home page and get started and then we can go to the CDN recipes and we want to add this so let me search this so CD n so there it is so we have to grab these two things so we want to add the a link to the stylesheet and also the script so we add this to our base HTML in our head up here let's copy and paste this now what we can do is we only have to add classes to our different tags for example so for this you have to check out the official documentation there you can see for example we have a header we have a input so for example this is what we are using and yeah so check that out for yourself so for now I'm just showing you how this is done so it's it's pretty straightforward so for example for each to-do item here in our for loop we want to add a div and so let's grab the closing tag and put it down here and then we give it a class and now we have to use the classes from the semantic UI CSS for example here we say this is UI segment so this is a segment and then our p-tech gets the class equals and here we say for example this is a UI big header then here in our H tag for example we say this should be a button so here we say this is class UI and then blue button so this is a really nice syntax so just like we would call it anyway so here class equals this and then for our delete button we use a UI ret buttons and now if we refresh this let me quickly check if this is working already so yeah so our semantic UI CSS gets applied and it's looking a little bit more nice now so now let's continue with some styling so now for the span we also use a class so here we say class equals so if it's not completed we say this is a gray label and if it is completed then we say it is a UI green label so now let's go back and let's refresh this this is working if we click update then we have a green label and now let's also style these two things so here we say our header equals of class UI and then we say a center-aligned header then for our form we can also simply say class equals and here we say UI form this will already make it much nicer so now if you reload this then our header is centered and here we have a form so now let's also let's add some March into our header so here I add a style for myself because I couldn't figure it out how we can do this with semantic ai so here we say style equals and then March in top and let's use 50 pixels for example this should work so if we go back and reload then we see we have a Martian here then for our form here for we have to add the class equals fields then for our button we also want to say class equals u I let's use a blue button and now if we reload this then it looks almost as our app that I showed you in the beginning so one more thing that is missing is a container so we add a div here so a div tag and then the closing text should be at the very bottom so here and this should get the class equals UI container and now I made a mistake so I want to have this style for the container and not for our h1 tag so here I put this style in here so now save it and reload this and now we are done so this is our final app so yeah so I hope you enjoyed this and now know how you can use flask to write your own web apps and if you like this tutorial please hit the like button and subscribe to the channel and see you next time bye

Channel: Patrick Loeber

Views: 81,411

Keywords: Python, Flask, Flask Crash Course, Flask Tutorial

Id: yKHJsLUENl0

Length: 42min 57sec (2577 seconds)

Published: Sun Jun 28 2020