Website Development With Python & Flask

1. Welcome: Hello, Ron, and thank you for checking out my website development course on skill share at with python and flask. Now, if you haven't heard of flash before, don't worry. That's what this tutorials about. We're going toe work through creating website and take you everything you need to know, including CSS hate email on a little bit of JavaScript. We're going to end up creating a to do list website where you can log in and register. So we haven't accounts, page and everything as part of that, as well as a database on the back end. So if you haven't used are the base before, don't worry. We are going to walk through it all together and it's just under four hours. So it's nice and quick, and hopefully it's packed full of information s so that you can learn everything you need to know about creating a website. So we start with introducing the course and then going through a bit of basic HTML as well as learning to style our page and will explain what that means, including changing elements, color in position in that kind of thing that we then begin creating our initial to do list form. Ah, reorganizing a project and then setting up out database. All of this completely free. And all you need is just a a access to the internet and access to certain and websites. So once you've done that, ah, once we've set up our database, you can then start adding to Alice and using Ajax and forms. And if you've never heard of these things, don't worry. We will walk through it all together. So, please, if you enjoy the course, follow me and leave a review and otherwise head on over to the next episode. 2. Course Introduction: Hello, everyone. And thank you for checking out this course. So things we need to run through first, you're gonna be creating a to do list website where you can create you to do this. That's gonna have a database back. And you can then view these. You can add things like wash dog or etcetera. You can add these items to you to do this. Ah, and you can edit them circuit changes to, um All right, get a bed. I don't know what it is, except maybe that's on his realist. And we have a whole back end with logging in and looking out and registration. We used data bases for this on, and it's all written in python. There isn't that much code. Only 105 lines. They go. We also. So we do. Um, I do expect you to know a bit about python, if you don't know anything that python I recommend checking out my python beginners programming guide, which loads Students are enjoying eso You can check that also on my skill ship age. Eso If you do know python that I don't worry. You don't need no anything else. We go through the basics of hate email and CSS and JavaScript. If those words mean nothing to you, that's all right. We will go through it together and we'll end up doing cranial site in the end. Now, if you do have any issues throughout at your welcome to email me, my email will be on the course page as well as the support discord. So if you use discord, you can message me on there. Also, I'm doing something different where all of the code for every single different episode will be up so you can copy and paste it. If you having issues, see what particular went wrong on each part without having only seeing the final product. So you can go into this home page, which again will be linked down there in this description on the video here. Ah, and you can select the branch eso You have part one all the way through the part 17 and you can see things like the different files have stoked to see assess, and you can click on it and view what is in them. So this is exactly to help if you have any issues or that kind of thing. Ah, were you missing a semi colon or something like that? You can't figure out what's wrong. You can check out this page and you'll have all of the code up there for you, Otherwise you can get right into it in the next episode. 3. Setting Up Our First Page: Hello, everyone. And welcome back to these first episode off the python flask in website tutorial. So we're going to jump right into it. So to begin with, unlike my previous python tutorials, we would have used download a program to run a python. But we're going to be using ah website. It's called Repel. It s so that's our e p l dot i t. And you just can access that through a Web browser. You just open new tab and go to this website and you should be greeted with a similar page like this. Now this is a website that allows us to run our python code. Ah, online. And this is very good because it configures a lot of the back end stuff that we don't really need to worry about too much. With the website hosting where is it's a bit more difficult and in depth. If you were to do it on your computer, it also means that we can create a website that will be up permanently with a few tricks. Uh, that you can always access. Where is normally you'd have to have the python always running on your home computer, which isn't always ideal because you might want to turn it off. So ah, to create our first project, we just hit this new repel button in the top right hand corner. I recommend you create an account with them. It allows you to save all your code, which I would like toa happen. If you don't, you might have a few issues. Ah, and then it will give you a random name here. I'm just gonna name it something a bit more appropriate. So we'll say, um, fighting website tutorial. And you can choose whether to make it visible by everyone or just you. I'm gonna leave it on public. There won't be too much of an issue with that. And then we just hit, create, repel. And you should get navigated to this new screen here, so I'm gonna quickly guide you through. How work, sir? On our left hand side here, we could have fall Explorer. Eso That's just where all of our files more be. Ah, here is the editor for whatever far we've got selected to at the moment, we're opening this main dot pie file. Remember, Doc Pie means it can run python in it Ah, And then on the right hand side here we have our console as it is, like the output of the program. So just to check that it's all working weekend Just put our print statements in remembering from our other tutorials that this allows us to, um, put code in the console or display something to the user s. So we'll just say print, um, hello, world. Okay. And if we hit the run button up here, you'll see that it runs your program. And we have hello world printed into the console. Eso That means everything's working properly on we shouldn't have any issues. Ah, so if, um, you have if you want to configure things there's also the settings menu here. I have my theme on dark, and I also have my indentation to be taps. Please don't use spaces. Nobody likes using spaces. It's just a pain. You can also just the Indian size, so you may only want to be at two or even a If you want that, it doesn't really matter. Its whatever suits you python will read it. You just have to make sure you edit these settings here, so if you have any issues that will be where it is. I also have, um, code intelligence enabled. And this allows, um, order complaint, like we saw when we were using pie chart. So that's really helpful. And you may I suggest turning that on eso. We'll go back 12 files. Many here. These other tabs we won't worry about for now. Uh, everything should be fine. So to begin with. Ah, we're going to be using library to host out website. Um, and it's gonna be called flask. So when we are importing libraries or bits of code from other programs, uh, we begin with using this from keyword, as so we say from and then we get the library name. Now, this has to be accurate. Otherwise you'll get errors. So we're gonna get the flask library. And so, from this flask library, the things they want to import is a sizzle. The functions and methods in that library, we choose what ones we want from it. Hens. It's a bit counterintuitive, but the function name we want is class with a capital F. You have to make sure that that line is correct. So it's from lower case flask import capital flask eso. Once you've done that, your library should be successfully imported. If you are going to do this on your desktop computer and northern repellent, you will have to install this library. So that was really good about, um, repel It is. We have this package manager where we can search for packages and install them out really easily. So against they are here, we search for flask, and we can just select flask and hit the package button, and you should stay on the right hand side. It automatically installs it. And once that's done, just installing it, okay, It's all done, and we can now run our program and we weren't getting the errors. But if you do get an error saying something along lines of flash cannot be found, you will need to install flask like I just did that. So, to begin with, we have to create a we have toe you create a variable that contains our website in memory. Eso did this. I'm just gonna call mine app. You can call it whatever you want, as he could call it like web app or something like that. I'm just gonna leave it is up equals and then we're going to use this front function we have imported. So we safe last and the, um, parameters orbits were going to give to it is just gonna be in name. And python has this special variable that we're going to use Ah, that it will automatically set this to be whatever the fire name is here, plus the directory. So just make sure it should work for everybody, but just to underscore, underscore name, underscore, underscore, And imagine that allow that saying is actually flask. And it's just a string off main. DuPuy is what it's doing there. But there's a few other things it does that means that it works. So once you've done that ah, all we have to do is say amp don't run host equals 0.0 dot 0.0. So what this does is it starts the website and we just say we want it to be hosted on 0 to 0.0, which is this'll computer or in this case, repellents, computers s. So that's needed if you if for to work eso now if we hit run here we see that repeller automatically opens up this other window force at the displays. Our website s So this is really helpful on one or something repellent us. Um is it will automatically bringing up for U s. So you can see here we have this girl Eso This will be whatever you named the project. Plus your repellent user name. Add dot Repel Rocco. Ah, and you can open this in new tab. If you want to view your website at the moment we're getting for four not found. I'll explain what that does in a minute, But for now, we actually have a basics of a website started. So at the moment, it's not showing anything at to add pages to it, we simply just do that. And then we have to put whatever variable we name this. Here's why name went app at dot, route or route, Harvey said, and brackets. And inside these brackets, we give it a string or word or text. And for the moment, we're just going to do with slash back slash story. So what this means is, ah, create a page on the first your well, so essentially it means created a page at this link here. If we did something along the lines of slash test here that we'd have to navigate to this euro plus slash test for that toe work. So you can name this whatever you want, you will just have to make sure that you go to that. You are well. And underneath this we create our function that it's gonna call when someone goes to this page. So we do death for defining a function or a block of code that runs. And I'm gonna call this Ah, home page, uh, and would do out brackets here and house semi colon. So inside here this will run out code and return the result to the Web browser to display. At the moment, we're just going to return some text on would just return Hello, the world. So what we should say here is that when we go to our just remove this slash test when we go to our main page, it'll it'll show hello world. So we'll just restart the servant. You have to do that every time. And you see it's automatically done. It says hello. What? Which is exactly what we want. Ah, So this is running on and you can see in the console here it's saying, Get at slash and it's using http, which don't wear it too much, and 200 means it's a status code. So here we have four or four not found. That's a bad one. 200 means everything happened correctly and the server responded at. So this is or working properly and we will move on to adding more things in the next episode. 4. HTML Basics: we're going to be learning about hate email. Now, Uh, if you already know the basics of hte email, then I suggest skipping this first section of it, Ah, of the power point because it's just going over the basics. So hasty. Mel is, um, hypertext markup language. That's just what it stands for. Ah, and it is used to describe the structure of a Web page. Essentially, it tells the browser what to display on the screen for people to see. Ah, and it's made up of elements, and I'll explain what they are. And these elements ah, shown in code by tax again. We'll move on to those. Um so we kind of described to the browsers because you have a lot of difference, like chrome edge Firefox, etcetera. Um, they all have to use some standard form of code like to be out of display them. And you noticed that some websites look slightly different in different browsers, and also, some browsers support different parts of Haiti. They don't also like work with the same code, so you may need to adjust it for different browsers. For the purposes of this tutorial, we won't be using advanced things like that anyway, eso everything will work across browsers. Um, but essentially, it allows browsers straight. Okay, this has to be a text. Okay, I'm gonna render a text. This is an image of a show. An image here. Ah, and it's a way for them to all work together and show webpage as similarly as possible. Um, so they don't actually display these tags. This is more for us as a programmer. And, um, it's so that it knows what to show, but it doesn't actually show any of this extra formatting that we put in for it. Ah. So, um, tags they had defined by two errors. Eso you have the left our at and then you have the tag name s. So this is the set of tags that will work with hate email eso You'll put something like P tag for paragraphs. Eso you do our the tag name and the new clothes. Our now every tag will have a start attack, which is this 1st 1 here and in intact, which is Ah, this one here. Um and they need a have the exact same tag. Name. Ah, and you always mask close it otherwise your hate mail won't show properly. S so an example of this is you have to pee tag and then to close that you have the back slash p tech. So the end one always has a slash in front of it. Uh, that's how you know it's closing, closing tack eso Then inside it, you can put whatever you want, You can have more tags inside of it, and we'll explain that as we go on. So here's our basic web page what it looks like and will run through what each of these things does. But essentially, you can see here we have the different tags defined by the arrows and you'll see that we have HTML tag here. But it always closes down here in the same boat with the body, which opens here and closes here and head so all of them must close. And you can see an example of how tags can be within tax. So the first part of that, um, Kurds name, but we showed you that was doc type html. That's what this does is it literally just tells the browser that this file this text file is going to be html code inside of it, and it should all work properly and they're able to display it. So you need to have this on the front of every HTML far you use. Otherwise it won't do. It's a lot of the brothers automatically put it in. But it's, um, good practice to make sure that your files have this at the front of it. Ah, and that's not case sensitive. He couldn't have capital Haiti Mel there as well. But lower case is standard. And hey, html five is the most up to date. One are we don't extra specify virgin. We just say, Hey, each team mail eso Now we have the hate email tag on this goes directly under the dog type and just another known that Dr One it doesn't actually have an end. Uh, that's one of the special cases where you don't have an intact, so just be careful of that eso. Then we have the html tag on and this goes directly under the dock type one and all of you hate to milkers in here. Eso this always will be at the start and the ending of this will be at the very bottom of your coat. As so you could always should end in Haiti, Mel, and start with hate email as well. Eso Then we have the heading element, Uh, and this contains the information specifically for the browsers rather than what is going to show on this. Ah, it's more information about the page, Uh, and you might say something like It's got a different links and images and stuff. It should like pre load and that kind of thing rather than actual displaying. So that's more. I will talk about it further on, but for now, I just know that you don't put any information about how it looks, uh, rendering it's elements on the screen in here. Eso. Then we have the title tag. So this is an example of in crime and what browser? You have the title of the page when you hover over the euro and this is what this tag defined. So you have title and then the whatever it's called and the end of the title tack on, and this goes inside the head element because it's not necessarily about displaying. But it's more about information about the page as such, uh, And then the next tag we have is the body tack. So this is where we put all of our displaying code inside. Ah, so you this will contain majority of your hate email. Uh, OK, so he is an actual displaying element or attack element. Tack interchangeable. And it's called a hate one s. So I believe from memory. This goes all the way up to hate seven Eso hate One is the biggest heading and hate seven is the smallest heading. So this is used for your titles on your actual page. Uh, and you don't use it for, like, regular paragraphs and that kind of thing as so If you want to put a heading, you do hate one, and then you put whatever you want the heading due to show. So in this example, we put this is a large heading and this is in between these two tags, so it would sure heading That says, this is large heading eso We also have the paragraph or text element tag and this is used for just showing your general smaller font size information on the page and you use this fair bit. So another example, you put whatever you want, it show in between, and it would show the text. This is a paragraph in this example. So we're now going to jump into a flask in our application and start actually trying to render this code on the using flask. Okay, so now that we are in our python web up here ah, we're going to start using hedge tomorrow. So the way that we're going to do this is we're going to use this render template function that flask gives us. And to do this, we need to in our library here in port last and we put a comma to import more functions, and we want to import render underscored Templar. And you say the order complaint is helping me there. So then what we want to do is, um we need to create a special folder to put all of our hey html. It s so I'm going to click this add folder button here, and it needs to be called templates within this, Otherwise, you have issues, so make sure it's called templates. And inside this, we're gonna create a hay html page. So we're gonna do our home page file here, so I'm just gonna call it. You can call it whatever you want. This doesn't matter anymore. Eso It's called home page dot html at some making sure Add that dot html onto the end of it , um, and then hit. Enter and it will create it and you'll see ah repellent recognizes hated him of five foul and inside it we're going to start putting a hate email here sort of game with, as we discussed earlier, we have to open up our tag and you see the repels actually suggesting a lot of different tags that we could have where nor going you they're anywhere near all of these, But just it will help you If you have any errors, there s So we have an exclamation mark you because we're doing the doc type. Let's remember, this is just telling, ah, the Web browser that this is a hate email page on. We're just having hitched to Melbourne and ending that tag with a narrow bracket. And this is a special one that doesn't actually need an intact. And then at next thing we always do is we open up a hate email tag and one whenever I open a tag I like to hit, enter and closed the tag just so that I, um have it there. And I'm always I won't run into errors if you follow that practice, which is really, really good. So now inside this hate email, we have our head. So again, this is for the information that we give to the browser rather than actual display information. And inside here, you'll see we're going to put out titled Attack, which is, whatever the page is gonna be caught s So we're going to disk all this home page and, of course, ending that title element. Now, one thing you notice is I am in denting H element. This is really useful. You really should do it. It helps reading the codes so much better and making a lot easier to work with. Otherwise, when you get really big files, it's very, very difficult. Eso We're gonna exit out of his head element here, and we're gonna do our body one. So this is where we put all of our displaying information s This is what we're actually rendering to the page. And when I say rendering, it just means showing on the browser in term or whatever you're using. So we've opened up our body tags here and inside here, we can put whatever we want. And I am going to do our heading here and we will say, uh, what is going to call this? The home page heading. And, of course, ending that tag there. You can put whatever you want in there. It should display it as long as you've got the tags. Correct. Um and I might actually just zoom in here so you can see a bit easier now we're going to do , Ah, a pitak for our paragraphs s. So I'm just going to put this'll is some random text on the main home page off Oh, custom uh, website. And we'll close that with a P tech. Now, if we go to amend a pipe file, you'll see we haven't actually change anything in this home page code that gets called Ah, in this return, it still returning. Hello, world. We're going to changes. So what is going to get rid of that Harlow world there and what we're instead going to return is rendered template in these brackets Here. We're going to do home page dot html This needs to be the same fall name as this Over here , this file you just created otherwise it will not work. So if we restart here, you'll see repel it automatically loaded the page me on we see home page heading this Simran in Texas, the main home page of our custom class website And if we go over this other tab and we refresh it, you'll see at title is also working. So we have home page here, which is really awesome and what we want to see. And now one thing I've got to mention in the last episode is that these routing functions need to be run being need to be before you call this app dot run. You can't. It will not work if you have it like this because it needs to load those pages first to be able to then run the website properly, so make sure you always do that out when we're creating more routes. Otherwise you'll run into some issues. Eso that's it for this episode, and we'll move on to more things in the next one 5. Styling Our Page: Hello. Run and welcome back to this flask website to toil. So we're going to jump back in, and today we're gonna be talking about CSS or cascading style sheets. It's very similar to hate email. And when we made our Web page in the last absurd Ah, we weren't able to do things like change the color or give this text underline or bold or those kind of things are end. To do that, we're going to try and use a language called CSS. That's is very similar to hate email in the fact that, um, it's up to the browsers to use it and that kind of thing. But I'll show you what we kind of mean by that s So if we go into our temple T in our homepage, we can actually stick, um, styling or CSS information directly on Element or tag itself. Eso an example that is in this heading tack before we actually closed this bracket. What we can do is we can use this keyword style eso this uses their CSSC on. We can say style equals and then we open to court. You could also use single quotes. It doesn't really matter. Ah, and inside here there's a list of different things CSS properties. There's millions of them that you can set on, and the one specifically for changing this heading color is the word color. So we used the color keyword and then we said, Colon and I'm going Teoh, go with the color red, but you could use yellow if you wanted. Either one would work that you could also use a hex color code so you could do something like whatever that color code is. I don't know, um, or you could do like why I think that one is or might be on. Ah, but yet you can put your color in here And what we should find is that when we restart this web page, we see the heading is changed red. Now, Ah, One thing with this is when you're styling your Web page and that kind of thing, it can be tedious to have to repair delivery. Start each time to see changes at what you can do is if you would open up the word page here. Uh, specifically chrome is really, really good at it is if you right, click and go inspect or press control shift, I it'll bring up this developer tools. And what you can do is see all the different elements and how they're aligned and that kind of thing. And you can select the body. You see where outlines heading the paragraph, etcetera. And you could say we actually have another paragraph down here. Uh, for some reason, her I'm not too sure why that is. Did we not close our paragraph tags off? That's why we have that eso again. I didn't even get caught in. That is That's why we have the second paragraph here. But if we really fresh that page now at that fixed, um, guess what I was afraid to is the You see the styling information, you can see the color red here. You can actually use chrome and change it like almost instantly. And this gets rid of the whole having jury fresh. But the issue with this is, if you were to change it. So, for example, the green here as soon as you breathe fresh, the page at that change is gone at, so you have to copy it over to your style sheet and then restart the page once you've done once, you don't. Sorry, but I like to use chrome for experimenting and seeing what things look good and doing on the flight and that kind of thing. Other examples of, um, styling eyes say we select this paragraph one and we go out of style. We just click here and we could say at font dash size colon, Uh, we could say 30 and we have to set it in pixels. So what you do P x and you say that it's now really big paragraph text. Um, And if you're not using chrome or you don't have inspect element of that kind of thing that you could do this directly in the coat and refresh your present and it should work straight away. But you see the changes go away if you don't save them. Eso It's all on well to put styling on the elements and cells. But we're actually gonna get rid of that on and you feel refreshed. You see, it goes back to black here, and we're going to use a CSS sheet or, um, cascading style sheets. And to do this, we need to set up a few things for flask. Um, so one of the main ones is we're going to have to create a static photo. And what is this use for? Well, it's for accessing or images. CIA says Java script Those kind of things those jobs will get into later. Um, but it's used for storing as static files. Essentially, where's our templates? Is for our HTML and dynamic fast dynamic. Meaning they change, Sadiq, meaning they don't at. So we'll create the static photo here as not meant to be inside templates. So they're supposed to be separate like this. Ah, And inside this static photo, we're going to create a C. S S folder. And inside this CSS photo, we're going to create out Caesar's file at. So we're going to call this one home page dot CSS and you can have different pages sharing the same CSS file or different ones. You can have ones using multiple CSS files. Um, and essentially all of these is just a collection of all of our like setting font sizes, colors and that kind of thing for the different elements and that kind of thing in this how you dio positioning and those kind of vigil. This Alvaro jewel is what this is for on displaying eso inside here. We could Ah, we have to. There's a few different ways we can do this. Eso we could give the element and I date, for example because they hate one. And we could do space I d equals, um main heading. And because we're trying to set the CSS for this element by its i d. We used the hashtag case. That means by going use an i d. And we just put whatever we called the idea. And then we distrust curly braces eso inside these curly braces, you just put whatever CSS you want eso, for example weakened color read and we could do Ah font Desh wait at Cole and 500. Ah, And what this is is this will make this is how fat the text is a bold ends color And of course, we're using the i d. Here. Now, this isn't gonna work straight away. We have to set up a few things first. So in this main dot pie file at what we need to do for flashed to use, our static follow probably is. We put a common up here when we're creating a lost object and we're gonna use a parameter called static u R L path and we're going to set that equal to nothing. So to empty quotes there. And we're going to say another prominent static on the school folder equals and the name of this photo recorded static eso that's just some initialization. Things are to get this to work properly, and now we need to actually go over this page and get it to use this series as far now to do that, um, we have to put it in our head element. So this is what I mean about linking documents, that kind of thing. It's not visual, but it's gathering the knees together those files, And because of that, we put it in the head. Souto add a style sheet. We use a link attack. So we do out all right here and we call, We write Link. Uh, and we need to set a few special settings for this. So we say rail or relationship equals on, and this is a style shade, and we need to say, Okay, where we gonna find it? So we say hatred. So hatred is also used for links, and that kind of thing will use it later on. But just imagine, it's for, um, hyperlink reference or just you. RL's eso we to quote him and we're not gonna put anything in there for now. I'll explain why. And of course, we just close it off. So this is one of those special ones that doesn't actually have an ending tag. Uh, so that's why we don't need to bother with that. So ah, with flask, there's a special syntax that allows us to put our python code into this. Hey, html file. If you're using other languages, that kind of thing, you wouldn't be out of do this. But because we're using flask and python, we can use this ginger true syntax, which is not another language, but it's still pretty at similar python. And to do it, we just do a two curly braces on to finish it. We do another two curly braces. And inside this what this means is gonna, um, run python code. And whatever the output is, it'll just stick it in this hate ref resource. And we're gonna use this u R l under school full our function and what this does is it actually gets the full u R l toe. Whatever the file, we have trying to find its. So in this case, it's home page dot CSS and it will stick it in this hatred. I'll show you what? What you mean once we run it? Um, but essentially it means that if you change the Urals on your website, if a song, you don't hard code them in the visual for this should work. But if you were to go and change like domain names and that kind of thing, it would you have to fix everything if it was hard coded. So inside this euro four, we say the photo, we want it to be an aesthetic photo and we do a comma, and we say file name equals CSS. So that's this photo here slash at that means inside of it. And then we go home page I don't see says or whatever you named it. And what you should find is that, um when we refresh this page here over he started out style sheet has been applied to home page heading its red at this font weight hasn't worked as much. So what we can do, actually is change it to something more like 800 which is thicker, and you'll see that it has gotten thicker. I could even make it higher to something like 1500 just a really over exaggerate it and you see that is thick of their. It's partly due to the front eso. That's how we link our style sheets, other ways. Teoh link element because the point of a starship is, um, that it's really efficient. We don't want to have to. For example, if we have lots of heading elements, we don't wanna have to copy and paste the styling information for all of them because one it makes a file size bigger. And two, if we go, want to change something and keep the euro like the website the same, all the heading elements red, for example. We want to change to yellow. Then we'd have to go through an edit, every single one of them. To fix this, we could actually set style sheeting bike class, so you can see we changed about this idea here for class, and we're going to call this main. I'm gonna call the class main heading. And what this means is we Because it's a class. Now we swapped this hashtag which was for ideas to a dot, which is four arm classes. And will Reese start page And you see, it isn't working because I misspelled something. Have I? I probably have, um I will just say What if I can find it in the second? Okay, that actually was working. It just appeared to be a bug in repelled. But you can see on this other page here we when we refresh it, it is red and using at the class main heading. Ah, And you see that in this home page? What? CSS uh it is remembering the color. It's actually yelling at me about the frump. Wait. And that's probably because of, um, 1500 is a lot is bigger than the value expects. So if we go and change the font, wait to something more reasonable like 800 and restart it, um, you'll see that if we refresh the page here, it's not complaining about the frump. Wait anymore on. And that is telling you, actually, that that's coming from the dot main heading. Um, CSS page and to see the sea says in crime, you just simply click on it and will take you straight to it. Which is really, really useful for finding different things on and you can actually do is on any website is you can inspect element and see how they have done the CSS as well. Um, So what we're going to do now is I am going to just empty this is as here and raised. Put it back to normal. And ah, for the purposes of this soil, you're welcome to use your own success and that's kind of thing. But we're gonna use, um, a standardized see assessing library that lots of different websites will use. And you'll see the elements look very similar because a lot of websites uses library and it's free. And it's called bootstrap on, and I believe it was developed by Twitter, and you can get it at a bootstrap cdn dot com. And, um, there is a whole documentation site for it as well, but added, We simply scroll down here since quick start, um, button and we have to add a few things to our HTML for it to work and you'll see first we just get the complete CSS eso we open the are here and click to copy the hate email. Ah, section. And this is just a link to this success. Eso we go to our page again and in our header element, I'm going to just put this one above the CSS here. I'm going to paste in that value we just copied s, um, making sure that's in the header element underneath the title. We're also gonna need the complete job script bundle, not just complete javascript. Um, so to fix that, we just go down here, copy and paste this and this can go underneath this CSS script here. So you should have the link to the CSS for bootstrap, and then you should have the JavaScript, which we won't go on a ballot moment, but just know that it should work on. What you'll find is that when you restart your page, things start looking different. Bootstrap or manically has fonts chosen for different heading elements and that kind of thing that will work. Um, and you'll see that different elements as we add them further on, will look mawr common are and fitting a lot better on. And you see here that we can apply CSS on top of it. If I still did color colon red here and restarted it. It's probably not going to let me in this one, but if we open up here, you'll see that it is using the red color for the heading, which is awesome to see. So that's it for ah, this tutorial. Just remove that color here and we will work on adding more phages to our website in the next episode. 6. Todo List Page Setup: Hello, everyone. And welcome back. Um, so now we're going to be moving on and creating our to do list. PH um, most basic one. And we'll try and get that at visually looking correctly, and we will talk about passing variables into our templates. So to begin with. Ah, one thing I forgot to mention last time was there was one more thing we need to add up for our bootstrap to work properly. Ah, and we would have seen his air later on when we went to use other parts off the CSS collection. Um, so to do this to fix this, we need ah, J query, which is another, um, it's a language built on top of javascript, which is like, ah, programming language that runs on the browser as a crime would run it, um, as opposed to you actually running it on the service side. It's run on the client site on the actual machine doing it. Eso You need to be very careful with that because, for example, mobile phones have less computing power than, say, desktop Would eso it may slide down your site if you have too much javascript running, but anyway eso to get j query. We just go to code dot jake weary dot com and we will done at the J Coury version. And I'm actually going to click see or versions of Jake Weary Core because there is currently a bug in Jake Weary 3.5 at to Do with the knave bar in but traps. So we're not going to use at that version. So we're gonna click seal versions today, create core, and we're going to scroll down to Jake Weary Core 3.4 point one. And I would like to get the unified vision, which means that it shrunk down in terms of false eyes, which is good. Ah, and we're gonna copy this code here, and we're gonna make sure that this goes right above the script tag from bootstrap. It needs to be above it, Otherwise it won't work in the future. Eso We need to be careful of that. Okay, so to move on. Ah, What we're going to do now is we're going to start styling l home page, hates female. Uh, And to do that, we're gonna change our headings here. As for the first things first, we're gonna change this heading to something more appropriate, such as my to do list. And we can also change the paragraph text here and we will say something along the lines of add some things to your list, exclamation mark. And if we restart the patriot, we will see that it's got this text. Now one of the things with it is that this text is in the top left hand corner, which isn't very good. So we're going to fix this on to do this. We're going to use a DIV element, so we just simply typed if and making sure that exit that now this is gonna be start above the heading and end after the paragraph. And I'm just gonna indent this to show what that development does. As so, essentially, division element is just a way of grouping things together and applying CSS toe all of thm s. So what we're gonna do is you say that it makes no stylistic differences, but it's more of a ease of use thing and you'll see that if we highlight over this Div, it actually is the area of the things that are inside it. Eso you can see, it's actually both the header and the paragraph in terms of the blue that's highlighted here. Um, and what we're gonna use this for is actually centering these texts cause we could apply it to these elements individually. But we're gonna have more elements on this page at, so it's centering that away in the DIV is the easiest solution at so To do this, I'm just gonna demonstrated in the editor. What we're gonna do is we're going to give it the class attribute, and we do that. But having class equals in the empty quotation marks and off course is what we use replying styles. Now, Bootstrap has some special ones that we can use. Ah, and the one we're going to use for this is container at dash as M s. So if we hear under here at what you'll see, it does, is it actually, um creates a container that will resize depending on the page size, and it will make sure that's always going to be in the center. Now you see that the text doesn't actually and by the way, at the sm sense, a small you could also do M day or large, which have different connotations. But essentially, it just is, ah, talking about how big the potential maximum width of this box could get. So we're going to stick with small for now, ends. One of the issues here is, um, the distance from the tech from the top and fixes we can put a margin, which is like spacing. Ah, and we can usually you'd use the styles here for you could do margin dash top and you could say like 10 pixels, for example, and you say it moves it down. You can also see the margins of an element here in chrome. It'll highlighted in orange at 42nd. See, it's got 6.7 pixels on left and right margins and a 10 pixel margin on the top. So this is how use spacing. Ah, but big trip actually has a nice class added in where you go I m for Martin, at T for top and dash for the size of one so we could do empty that four. And I think that probably looks appropriate and you'll see it automatically as the margin top here at 1.5 r e m Essentially, this R E M unit. Unlike Pixels, it's based on the screen size. I'm not going to get into it too much, but that's how that works at. So we'll move over to our file here, and we'll add those changes. So in our defeat, class equals container dash as m like we did before, empty four for our margin top. And the last thing we're gonna do is actually centre our stuff s So we're gonna add our own scented class because bootstrap doesn't have one of those yet eso to do this, to use the center class, we're going to open up, out CSS. And we're going to get rid of this main heading we have here. And because it's a class, we started with a full stop and we talked class name, which is centered. And then we do our curly braces, calibrates our curly braces, so making sure you have a start and an end curly brace. Ah, and the thing the style we're going to apply for elements that use this class is going to be text that a line colon and we're going to choose center. And, of course, making shorter finished that line off with a semi colon. I don't know if I mentioned that before. Ah, and we can restart and you will see that it won't away. It will, um, center it for you now. Ah, One thing I forgot to mention as well is that if your arm CSS isn't applying, sometimes your browser will keep a temporary copy of the CSS so that it isn't constantly getting a new one from the Web server for, like, efficiency. Otherwise, it would slow down page loads to force it to get a new version on in chrome, you would right, click and go inspect. And once you get this open that you can right click the refresh bar and click empty cash and hard reload. I probably did in the last episode automatically cause I'm used to it, ibid. That's something you'll find that you should be doing, because otherwise you will get weird issues where it doesn't, um, load Sears has properly or changes you've made. Ah, and this is how you fix that? So it will work on any new device. It will get a fresh your newest CSS. But for ones that have visited the paid before, it will use the cash ones, and there are ways of getting around that later on. But we won't deal with that in this tutorial. Okay, so inside this to do list, we're gonna add some things eso inside. This did begin will at some space here, and we're gonna have a place to enter an item to add to your to do list. And to do this, we're going to use an input element s Oh, that's just simple. Open the arrow input and we're going to give it a placeholder, which is like the text it's on there. If you don't haven't talked anything in it yet and will say add at open me item to your to do list, okay? And we're making sure that we close off that input element now, this doesn't actually need a backslash input because it's all just one element. So, again, that's one of their special ones at that. Doesn't need that. So you see, if we restart the what Pecchia you can see we've got our input element right there. That which is good. Ah, and the next thing we're gonna do is at a button that actually adds that item on and you simply just start your arrow here and we're gonna use the button tack, and we're gonna make sure to give it a class. And this class, actually, I'll leave that class out for now, and I'll show you what it does. Eso just leave that class empty and thats button does use a closing tag. Eso you get used to the different elements that do and don't use it. Um, in this case, Button uses it because there's Texas displayed inside the button. Um, so we could say add item is probably an appropriate thing to put. And if we restart the page, you'll see that we have the ad item button right there and those Teoh working properly. But we're gonna add some bootstrap that looks to it s So this is where that CSS comes into play and we're going to give it the class button so big t n and we can actually give it a special color, and we're going to choose a green bun s. So we want button death success, which will give us agreement. And another thing we might want to do is add a margin. So again, a space at the left hand side of that button. Just so we have a bit more of a space between at the input and the bun in itself. So we do margin left on dash for you could do this. Three ds. True that one for the different sciences. So we'll just raced out there and you can see the actual at changes that has here. And if we put on the website, you can see we've got at item, but and we can type in our to do list NL input field, we added, which is good. So the next thing we're going to work on is actually displaying out up to do items that we have to do once we've added them. And to do what to do the to do list, we're gonna add a, um list. Hetch. Timo has a at list element that you can use, and we're gonna use the unknown ordered list. So that means the items won't be alphabetically sorted or something like that. And there will be given dot points. Whereas if you do ordered lis, they'll have like, the numbers 12345 at to the left inside or a B C D. We don't want that s o to do this. We open up the element and we do you else standing for a non ordered list And of course, making sure to close that tag so we don't make any mistakes like I did earlier. And inside of this, um, we're going to put our list items or the actual docked points themselves as surgery issue. Just do l I standing for list item making sure to close that again. And then in between these, you just put whatever you want the text to be. So this might be something on lines of dinner, and then you can just add as many list items you want s so you could say something like wash up and every startup hee you see that we actually have out dot points, although they are looking a bit disgusting in the moment. So to fix that, what's actually happening is the A new ordered list. The dot points are on the left hand side of the div, whereas the text is currently aligned in the center eso We're gonna fix it. Ah, And to do that, we're going to get this on order list. Ah, here and add a i d to it so we can apply CSS to it because this on ordered list element, as you can see here when I hover over that covers everything underneath it and the whole of this blue, orange and green area at the green being petting and the orange being a margin. So with this one ordered list, we're gonna given I d and we'll just call it a to do list. Now, the reason we're giving an I d. And no, A class is because, unlike this centered class up here, we might problem we would. Normally, we might use it again somewhere else in the program. Where is we're probably not going to use this to do list. Ah, Clark, this to do list element more than once in a page. Whereas we might use this centered element more than once in a page. So I desire only for a unique twitch element, whereas classes you can put as many on as many different elements as you want. So that's why we're going to be using an I. D. For this part because we're only ever gonna have one per page in this home page. Jesus, We're going to add to this, uh, style sheet for this element we've just put the I d to do list on. And because it's an i d. We use hashtag, and then we do the i D name, which is to do list, making sure it's case sensitive semi colons. And then we're going to add a few different, uh, stylings to it. The first thing we're gonna do is text a line left, and what you'll find is that when we do this ah, it does a line to the left. But there is a large space between the If I actually closes here, it's There's a big space between the actual dot points and the important doesn't look very good at to fix that. I'm going to add some more lines were going to say with calm, 75%. I'm going to state margin water. No, I'll show you what this does if we raced up this survey here, um, cash and hard reload. When we hover over this, you'll see that it's actually, um it says the width to be 75% of whatever it was before, and then the margins without margin. Autor, you say that it actually doesn't center it. So margin auto will evenly distribute the left and right margins at which will, in turn center the element s so you can actually a justice. Which fair with variable. Sorry at to be whatever you think works properly. If you want it closer or further away, it's up to you. I'm gonna leave it at 75% because I think that works. Um, the best. And you have to remember that you want to design your web pages at so that they work on mobile and different size screen. So that's why actually making your screen size something like this is a good way to check that your wife is responsive. I changes to different screen sizes because you don't wanna hard code things because otherwise it may work on your screen, but not on others. So, um, what we're going to do last but not least, is we're going to start passing variables into this template we've created. And to do that, we're gonna create a variable without listen. It s a dot point. Sorry. And we're gonna call this I don't know, something along the lines of probably would just call it items. So these are our individual items in the to do list that we want to display, and for now, we're just gonna hard code them and there's gonna be equal to a list. And I'm just gonna hit enter here so I could space it across multiple lines and the looks of it NATO. So we do list with square brackets and we can add some string items to it. So we do strings with ackwards and we'll add cook dinner and we do commerce for every new element in them. I'm gonna put him on a new line. You can put him on one if you want wash up. Ah, do laundry account spell today and plain room is probably enough. So what this allows us to do is we can actually pass variables into this render template. So to do this, we just simply put a comma after we specify the template file. And here we can give the variables for passing in name of whatever it is. This name is then used in the template. So, um, you'll see what I mean. In a minute, as of Now, where is gonna called available to do list and we're gonna set it equal to items. So we're setting illegal items, which is our list we've made here. And we're calling the variable to do list that you could say like you could name is whatever it doesn't really matter. But for the purposes of it, we'll try and name them meaningful variable names. Eso now weaken movinto hate email page. And what we're able to do now is we can remove, um, the lists items here and inside this on ordered list, much like we did for the u. R l four. We can use some special syntax that runs python in this hate email page. So for this particular one ah, we do some curly braces and we have to use thes percent signs. And in the center of these percent signs weaken, do a four loop. So remember our loops allow us run code multiple times, and we're just going to say for it item in to do list. So this to do list is that list we get past, and we're going to say OK for each thing in it. We're gonna do whatever is between these Kelly braces. So to finish off the full of that, you just do again. Kelly braces with percentage science and end for in the centre at making sure to put those spaces to either side as well. So it should be calibrates percentage sign at Sorry, curly brace percent space and then the actual code. So this will run everything in here the free for every item that's in that list. It'll run this line or whatever is underneath it. And what we want to do is we want to create a list island out Likely much did before eso, of course, opening and closing those tags and inside it like, whatever the value of going to displace, we just want to display the item. Ah, and to actually win my printing things to the hate mail, we use double curly braces, and we would just we just want to print whatever the value of item is. So again, um, if we restart, I'll show you what this is doing. So it's, um, going so where you know, python fall. We're creating a list. A vow to do so in the very item were then setting for this template in the HTML file. The variable to do list Equilar items say this is this what to do list is currently equal to. Then we're going okay for each item in that to do list. So for each thing in it, we're going to create a list element. And the text on that list element is going to be whatever that current item is, and you'll see that this doesn't actually appear in The Hague. HTML This actual special syntax, it just sends it purely as hate smelt. So if we inspect element here, you'll see what it's actually done is it's just created the list items with the values in it. None of that gender to syntax. Is there much like that? Ah, euro for is set to slash syriza slash home page. That's it is that it automatically generated that with this euro for up here. Eso That's how to do list visuals working. Ah, and we'll move on to doing a bit more programming in the next episode. 7. Organising Our Project: Okay, guys, in this episode, it's just gonna be a quick one. And we're gonna be just moving some things around. Ah, so that it's the application is structured to be better. Ah, so that we can work on adding out database back into it s so to start with, What we're gonna do is we're gonna separate things out into a few different files. Uh, and right now, we're going to add a new farm in this root directory here, and we're gonna call it a program. DuPuy. Now, this is where we're gonna put our actual, like flask, um, initialization codes. And ah, this is where we're eventually going to be, adding our libraries in that kind of thing that need to use flask. That's what we're gonna do is go to the main DuPuy and we're just going Teoh, copy everything in here and move it over to this program pie far. So that should be right for now. And then we can just delete it from here. Eso what? This man up I file is going to do all it's going to do is just run the flask app eso to do this? Uh oh. We're going to say is from program imports, and we're gonna create a function eventually. Ah, and it's called Crate from Square. And we will do that now, So we'll go to a programming and, uh, where we've got this at being made out. What we're gonna do is we're gonna actually create a function. So to do that, we do death for defining and function here and functions just away. We group code together, gonna give it a name, we're gonna call it, create up the same as what we imported earlier. And we are going to do our call on here, and we're just going to indent everything except for this app. Rum bit. Now what we're gonna do is just above this app dot crap. We're going to type return, So this is just going to create the last gap and is going to return it, Uh, and we can get rid of this bottom line here, and we will move this route out of here in a minute. Eso heading back over to this main dupuy file. I will just have one more line and it's going to call that crate app function, and then it's gonna call that run. Eso will say don't run. And of course, needing to set that host equal to zero dot 0.0 dot zero. Ah, and everything should work properly if we do that. But we're just gonna move the's right out of here. Eso we're gonna create one more file court main routes stockpile Because eventually, when we want to add lots of different web pages, this fire is gonna get quite big. So we're going to try and move it out of here, and we're just gonna copy this route code on and remove it from his program for and copy and paste it into here, making sure that indentation is right. Uh, it should look something along the lines of this eso We've got a few errors here that will fix up as supposed, double its complaining that it doesn't have it doesn't know app is Ah, and we're gonna actually change this a minute. So we're gonna add, um, variable appear called routes or roots equals Ah, a new blueprint. Ah, and you need to make sure that's case sensitive and weight is gonna call it routes. I'll explain what this means in a minute. and just give it a name of whatever this file is, which is main routes stockpile. And then we're just gonna change whether says appear two rounds and it's complaining. It doesn't know what blueprint is that. So we can say from flask imports blueprint and we also want to import render template as well, because we are using that and what we should find is in our program, we don't need rendered template anymore s so we can just get rid of that and we first. So Ah, this blueprint essentially just makes a copy of all the different routes in here. And what we want to do is in this program add the blueprint to this flask app. That's so to do that, we have to ah, do a special loop here which flask handles a lot of. So we say we've ap don't app underscored talk context. So this essentially run Ah, when the flask app is created or in that creating phase we say from and we choose the far name which is main routes. So we type main routes imports and we want to import that fair. But we made of that blueprint which is called roots, and then we simply just say, amp. Register blueprint roots, and that will add everything we need to them. And we can just in Denton, that return. And what we should say is that when we run this program, our website, our web pages working properly and we don't have any issues, so ah, it doesn't We didn't actually add anything, but it was more just a restructuring to make things more easier for our next, um, part of this series so you can move on to next episode now. 8. Database Setup: clever and welcome bank Teoh this plus to toil, and we're going to be adding a database behind our application. As so essentially a database is another separate program at that allows us Teoh a python to interact with it and store information that we want and easily access it quickly. Eso you can imagine it as just a whole bunch of it's daughters text files and stuff. Ah, and where just sending requests and that kind of thing to get that information and send it to store it as well. And for this I'm going to be using a free database, um, website that automatically sets it up in does it for you. Ah, and if you want to set up your own database, you can run on your computer as well. But I'm just going to be using a website because easier and unfortunately repel it does not do databases yet. Eso We're going to go to this website if you want to. Ah, it's called DB for free dot net and it sounds a bit dodgy, but it works fine. We're gonna go to the starter based, have and we're going Teoh click. I get your own free my score. Database account. Now, this information you put in here, please write it down because you will need it. This your user name password in that kind of thing? Eso festival you have. Ah, you have to give it your database. A name. I I am going to call it a Jack flask project. I recommend putting your name in front of it just to make it easier to remember. Ah, and your use name. I'm just gonna again caught Jack Devi. User name at this Doesn't matter too much, but just make sure again you're keeping track of what you're entering here because you won't be at access this information again. And then possibly, uh, I'm going Teoh, Just write down something long lines of DB password. Uh, and just typing it again. Remember, again right down this possible and she email address. Tick the box and hit. Sign up and you will receive an email with the link to confirm the creation of database. Just click on that. And once you've done that, you can click this PHP my admin button, which should take you to a page that looks like this Eso PHP is my admin is a software that allows you to see what's in tied the database visually, that. So it's really helpful if you're learning and that kind of thing to see how that information has been stored in stuff. Eso just enter your user name and password here that you, um, registered with and you should be on log in tow a screen that looks very similar to this. Ah, and don't worry too much, but you should see on the left hand side here, you have your database name at that you can click on, and it will take you to that database page which shouldn't have anything in another moment s. So this means it's all working properly. And you don't need do anything further on this website for now. Eso we'll head back over to our flask application and what we're going to do is start setting up this database connection between your application and this Web server. So to do this, we're going to go to our program. Dupuy file. We made last episode. Ah, and we're going to set a few things. First of all, of the top here, flask has a wonderful library for interacting with data bases on its called S Huo alchemy. Don't worry about too much what that means, but we're gonna type from flask under school s Q L Alchemy, import And now all capitals here SQL Alchemy. So that's importing that library again. If you're on your own computer out, you will have to install that library where appellate doesn't automatically. And then we simply say DB equals SQL alchemy. So this act creates a variable called DB, which has a new copy of this database connection. Ah, and then in this laptop contacts just above it here, we're going to say devi dot in it underscore apso. This, sir, creates our app connection here. Everything's working. Ah, and we're just gonna pass in which, of course, is this variable here that we created with us. So that way, importing this library for connecting to the database at where saying Okay, we will want to create one. Then when we call this function, we linked that database to our application. Ah, And then just before we return here, what we want to say is db dot create on school or so what this does is it says Okay, um, now I want you to connect to that database and anything that we want to put in it at. Do that straight away. So any of the defaults we set, which we'll talk about a minute without models, um, it will automatically add, So that's nice and easy. So now what we're gonna do is we're actually going to try and figure out something to put in this database. Eso we needed credit. You file here on gonna call it models. DuPuy. I can call it whatever you want, but I recommend just keeping it same so that you don't have any issues. Eso now that we created this model stop I file What this allows us to do is create tables which ah, essentially like, imagine, Excel just a regular table with rows and columns and that's where we store the information in. So you'll see at what we're gonna do is ah type from that program. So this is our program file here. We're gonna import that d be variable we created because we will need to access it at for something and we're going in order to Ah, great tables in, um this out donna base at Deh are written in Python is classes. So don't worry too much about how this works, but out we're gonna type class end, first table. We want a great is at her duelist table. So this is going to contain all of our to do lists that we have registered on the sites and we just do our brackets here and inside this. We want to say that this class is actually going to be a special one, and it's gonna be a model, so he type db dot model there. So, um, now, inside this class, we define the different columns. What is going to be an eight column, and in the first column, we're going to give it an I. D. Because we need a way of different sharing, all the to do lists and if to do lists that if two to do lists have the same name, we won't be out to tell them apart. So we need to give him a random number that will always be different. So to do this, we say I d equals db. Don't call him. So what? Creating and you call him here and it's going to be of type of DVD or interject. And if you remember from a python course on Inter Joe is just a whole number. So 123456 etcetera. And it can't be negative. Um, And then what we're going to say is common primary K equals trip. What this end bit does is it says to the database, Okay, this needs to, um the number needs to go up each time you create a new road on and they can't be the same . Eso Don't worry too much about that, but it's a database terminology that you get used to eventually on and for age to do list. We want to give him a name. Uh, see, at the moment we got my to do list. We don't really like that. As I would have saying, Name equals. DP DOT column. And we can say it's going to be of type db dot string. So against the text. And we do too brackets here because we're actually going to give it a size, Um, which is really important in databases because you need toe know the software needs to know how much room in storage each row is going to need Aurich to do list in this case, Skinny. And for this case, um, the name we're just going to say, OK, we'll set a max of 50 characters, which seems to be enough. But you can always change this later on. It doesn't matter too much. And we're going to say Nahla ble equals church ankles. False story on what this basically says is it can't be equal to nothing. It has toe have some value. We don't know what that value is. Ah, but we could actually say default equals my to do list. So that will say company would anything if it is, then we'll set a goal of my to do list. And now what we have to do is ah, each to do list has a list of I am. So you see, on the right hand side here, we have cooked in and wash up, do laundry, clean room on, and we're going to create another table here. So we're gonna do class and we're gonna call it to do item. So this is going to contain or are different items that will be in the list. And I'll kind of explain how this works, but essentially, we're going to create a relationship between these two tables s so that we can access all of the items in eight list easily. Eso this to do item. Of course, it's going to be a DVD model like our to do list on. We're going to give it again and I d here. So you can just actually copy this life that you find that you write this line on pretty much every, um, model that you make and we're going to give it a list I d. So this is going to be, um, the list I d that it's linked to. So each item I will say, for example, cook Dinner might be linked to the first to do list washout might be first rule is do laundry. The idea might be to So it's actually linked to the second to do list. And we want to be out of access this because we want to know we will only want to show the items that air fare each list. We don't want to share every single item in every single list as it is gonna be a DVD dot column, and it's gonna be a interject again, making sure it's identical to make. And we're gonna say db dot foreign k and we're gonna do to brackets here, and we're going to say its to do list dot fighting. So what this is saying is it's going to be equal to, um, the class to do list. So this will be whatever name you have here to lower cases. And if there is a capital here, it will automatically in certain under school between it just keep it the same as May. And just this to do on the school list is referencing this to do list table him. And we're saying OK, in this to do list table, I want you just get the value set this list I d to be the value of the dot de at, which is just this special number that we give it. And now we're going to say, um, maybe give the, ah to do item a description or a name. Um, just gonna call it description. Uh, so, for example, that could be cooked in or something. And it's gonna be equal to a DVD column and we'll say, db dot string and will say Okay, Item can maybe be a max over 100 characters Change that. However, you wish. We don't set it too high or you might have issues. Ah, and it can't be equal to nothing. And we will default it to just be an empty string if it is set to nothing. Eso Whenever you said nothing equal to false, it's always good to give it a day Felt um that will mean you won't run into any errors. Eso now actually need to link these two things together. And it's quite simple to do this ends. To do this class always say is OK items, So this to do list has items on And that's gonna be eagle to a db dot relationship and we will say, OK, the class is called to do underscore item. That's just referencing this here and we're gonna say back rift equals list and lazy equals dynamic. Okay, don't worry. Too much about with this lady equals dynamic does back ref equals list. Essentially, all that means is, um when we have a copy of a to do item class, we can just say, um to item dot list and it will get us that will be automatically set toe whatever its parent listers. So it's really helpful. Um, and that's why we had that relationship there. Now we're almost done with this. Modeling him just in a main routes. We're gonna say up the top here from models. So that's the name it is. Follow him. Import to do list, comma. We also want to import to do item, and we should just be able to actually restarts the program him and you'll say that we will have to add a few things. Um, so we'll see how that turned out. I do believe I have miss one thing them and it's yelling at me right now. Um, because of it. So the first thing we have to do is in this program file. We have to say, app dot com fig, and we didn't actually tell it where. The dad databases. Eso app dot com fig Is this special thing special k words that you can put in and the one we're gonna uses? SQL Alchemy all in capital letters. Underscore database underscored Yuri's or your URL Universal resource indicator. And that's gonna be equal to eso. We're going to be using the my SQL Plus Apply Maya's pie my SQL at libraries to access it Coal and slash, slash. And here is where you need to get that information you had earlier today. Database Use the name. So in my case, that was Jack Devi. Use name Colon. Your database password. In my case, that was DB password at. I used, um db for free dot Net. If you want are hosting this on your own computer, you could do local host or 0000 on that should work ford slash the database name. And I said as Jack Flask project. Okay, now, if we hits where you have to do one more thing Ah, in Python it's complaining it can't find SQL acne, and that's because we need to install that package. So just click over here at to that package window and we're going to search for flask SQL alchemy, and you should say that might have automatically installed for us. We'll see how we go. If I go to start this now, is it gonna work for me? And no, it's not OK. Um, we would just try and I refresh this repellent him because It's not wanting toe work for me . Okay? Plus, ask your alchemy. Search for it and click at packaging. There we go. Is it going to want to? Okay. It's not going to want to work, okay? Because it doesn't want to work. There's another way. Weaken stores. We simply click this question mark in click Works based Shortcuts and you concert show. And this will actually open a command line into this over here. And we can just type pip in store flask dash SQL alchemy. And it'll force install that for us. And you should say that it does it'll very quickly on when you start. There's one more thing we needed install. Um, cannot import. Let's go up meat from flask. Underscore s Q l alchemy. Okay. Why is that yelling import? Sq. Ah, sorry about that. I've missed voted him. It's not all in capitals. That should be right to make sure you change that at to be SQL in capitals plus alchemy. And if we hit, start here. Okay. This is what we were actually expecting is it's asking for my Maya's kuo. So this is another package we need to install. So we search pie My SQL Ah! And it should come up here. We hit Plus and they go, You see, It's adding it properly there and then we hit Start and we should see that it's hopefully loading, but it's not wanting to, uh because we need flask. Does Sq Oh, uh, lost touch My ask your Sorry. Um OK, why are you know money? I've misspelled it. I'm sorry. That should be Pai Mei. Ask you. Are you okay? Now? If we hit stop, that would get That's what you want to say. Okay? Eso the issue I had there was I misspelled this and it was It should be my scroll plus pipe my ask you welfare eso making sure you change that to be import escrow alchemy and this database theory to pay my school plus pi my SQL Ah, And now you see that it takes second as it connects to the database for the first time. And then you say the flask APs running, which is what we want to see. And now, if we if you hit structure up here, it'll brief fresh this database table and you'll see we actually have our to do item table and to do list table. So just visually, so you can see what's happening here. If we click on this to do list table, you can see that has an idea in a name. Sir, if we actually want to insert something here, we could click this insert tab on and we could say, OK, I want to create a new to do list and it's gonna be called chores and we hit Go. It will automatically insert this for us that we will add, like a webpage that does this for us. But just for an example. And you see, we have a new role here where the idea is one and the name is equal to choice. Ah, And then once we worked with python weakened. Then start adding items to it which will be stored in this, um to do under school items database, which will be autumn eso. We'll work on that in the next episode. 9. Adding Information To Our Database: run and welcome back. Now we are going to be moving on and actually adding some information to a database. So we're gonna have Page, which displays at all of our to do lists and also one that that will allow us to add once to the database without having to go into this. PHP my admin, Zoff, eso the way we're going, Teoh, begin doing this is we're going to head on over to our main routes file here and we're gonna add a few new you are else, uh, eventually will add NEP, uh allows us to get between them quickly, but, um, we won't do that for now. Eso will rewrite a new it hits. So I'm gonna do type at root start round. And after this slash we're gonna do a newer that a new your l slash lists, which is going to be our one where we can view all of our to do to a swift credit on and eventually click and view them and edit them eso underneath this wud to find a function with deaf. And we'll just call this one show. This is probably appropriate. You can name it whatever you want, but it's probably easier You keep it the same as sir underneath this. We're going to, uh, just at return Orender on school template. And it's going to be a show list dot html or show list start html We'll probably know that . And now we have to actually make this hate email fall eso We'll get our templates here. Ah, well at a fall and we'll call it shirtless dont html like we've typed in this friend of temple him and I'm actually just going Teoh copy over this home bitch here. And we'll just change a few things, which is probably easier. That's the first thing we're gonna do is change the title That will change it to something online of, uh mm. Your my to do lists page, or we'll get really page them at making sure to keep these scripts here. Ah, we need those for bootstrap to load properly. Ah, and we're gonna change this CSS file here, Teoh. Probably something a bit more appropriate. So we'll change to view or shoeless start CSS Ah, and then will actually just make this see so CSS far, quickly. So now static CSS follow. Oh, out of file show list starts here, says making sure that that is the same here. Sambar name here as it is over here. And we're actually going to be using a few of these two assists. Eso will copy the home page over. Did this show this CSS here? Ah, and more edited later Run at the reason I'm no importing this home page one because we still want to keep them separate. Um, eventually when we do make a sight more pretty, we will not want to be importing everything from home page Eso Now over in the Shirley CSS will modify a few more things. We might change his title. Teoh available to do this? There we go. Ah, and we can get rid of this paragraph underneath it as well. Aziz, Input and button eso We still have this on ordered list here with the idea of to do list. Ah, we'll leave that there. And instead of this for it item into delis. Ah would just change it to be for each item in to do lists at which will be a variable that will pass in when we're rendering this template. Eso will make that in a minute. Ah, And in this list element, what we're gonna do is we're gonna make a link at which will eventually be at a click on which will take us to these through lists on to do a link. We used the attack. Um, a bit counterintuitive, but that's what we use. And to set the link it goes. Do we use this hate ref attribute? Like, we've been doing all style sheets? And what is going to get this toe hashtag for now? Which means nothing. Um, while eventually at that later on, um and of course, closing Miss Tag. And inside these tags, we will write some text here at. So what we want to do is, um when we look to do lists, I will be equal to every single list we have in this database. Him on item will be equal to the current when we're going through, so item will be equal Teoh one of these classes so we can then do items or i d item that name and items or items which actually contains a to do list items that we want to print the name here, which is probably the easiest one. So all we have to do is say, um in between this attack, we're going to print Soto print things with ginger. We used to, uh, killer braces and inside this will just say item dot name. So we need to actually pass to do lists into this. Um, but we'll do that right now, then. So heading over to our main routes Stop. I hear in this list, we want to be able to get all of our to do lists. And to do this, we use a search or a query, which is essentially are sending, um, a request to the database saying, Hey, we want this and it returning. It s o flash handles all this forest so that we just simply have to create a variable. So just call this list. Um, and this will contain all the to do list. And to do this, we just say whatever the model name is. So in this case, we want the to do list, doc query dot All so this will return Oh, of the models which are of the tart in the table to do list, which is this table here. So the moment there's nothing on. And of course, we want to pass this into our rendered template here. So the hitch email far can access it. So we'll say to do list, which is what we named the variable is just equal to this here eso that's passing all of those that we've gathered from the database into this hate email file here. And then we're looping through them and we're just going to create a dot point for each of the things in it. What you should find here is that if we started and head over to this euro, it's actually, um so actually see, we have an internal server again. We need to quickly fix one thing in the models at DOT pie, which I forgot to do. Last time is when we see this items equals db dot relationship that we need to change us to do item here to be the name of this class. So this actually needs to be to dio item out with a Capital T and I and no space for these two need to be the same. Now if we restart this repellent that we should find their that is hopefully working properly and we can go to this girl and it won't have any errors. So I'm just waiting for it to start here. It's a little bit slow as it tries to connect to the database. Obviously, this you wouldn't use in a production environment this just for testing and that kind of thing. So you say it started here and we can refresh the page and we don't have any avail. Shoeless, but the pages loaded properly. Eso we now need a way to show added to do list s So what we're gonna do is in our route. Stop. I hear we're gonna add a new u R. L on this is gonna be at roots dot route and we're going to use a slash and we're gonna name this euro. Add less So we will go to this euro whenever we want to add a new list or create and you want and what is called defining function, anything I would score at least, and we do our empty brackets and colon. So Ah, what we're going to do here is we need to tell the database can you please create a new empty list acidity? This will credit available new list and then we say, Ok, what is the model you want us to create? And much like our query up here, we want to create a to do list and you can do empty brackets here. Ah, but I'm going to say, OK, I want to set the new list dot name equal to new to do list. So that will set that variable for us. And then what we have to say is, OK database we want you to add at these variable to the daughter vice and then we call db dot session dot Commit, which will tell the daughter ways. Okay, um, here, All the things I want Ad Can you played at them for us? Eso up here? It's complaining. We don't know what d B is in a program file. We'll just say we have DB here. As so we just go from program imports db and that should fix up that arrow we're getting. And last but not least, we won't need to return something to display to the page. We're actually going to use something special here, and we're gonna return a redirect to our list page here So what this will do is you go to this euro, it will run this code, and then we'll actually send you to another girl for us. And we'll send you back to this list euro. It means that we don't have toe bother making a paid for this. And it's nice and simple. So do this. We just return. We need Teoh, the top u. We need to import a special function. We're gonna call it redirect, and we will also need to import our You're all four, which is what we use for getting the hay http URLs for different pages on the website. So we need to return a redirect. And in here you put, um, the link that you want to send the person to that's connecting and where it's going to use euro for and now I'm with the euro. Ford's we have to change. It s so that it works a bit better and we use roots dot whatever the name of the function is so the function we want to go to is shown lists. So you need to make sure that that is identical that those two things will both highlight when you click on them that we don't use? Rocketed. Um, that's just the way that this syntax for this particular thing works. And now what we would like to do is probably at a button that takes us to this euro from the list page eso were discovered. Our show list dot html here and right underneath it's a Norden list. We will do another link. So using the attack Ah, and will set its hatred, Which again is the location is going to send you to when you click on it. And we use curly braces because we want to print something in python to the hate email. Um, we're gonna use this euro for that we use before, and we say roots dot add list. So this is the name of the function we defined here in Maine route. So it's add less to these two need to be identical. Otherwise, you haven't issued there, says the hate rips it. Ah, and we would like to also set the, um, we can end the attack him and inside the text we're gonna have on the button will probably say is create new to do list. Now. You noticed that Ah, we haven't used. But in here, that's because I wanted to actually dis link you to another page. I have buttons he used for submitting information and stuff or not necessarily linking. You can use them for links, but it's easier to use an attack for that. And we're going to use, um, bootstrapped to make it look like a button because you'll see at the moment if we restart the page when we actually go to this list you Earl, the button does appear licked. Sorry, the link appears. Abbott. It doesn't look like a button to fix that. We can use our special bootstrap classes and we're gonna use the button class, and we're gonna do a bun dash success, which again is a green bottom for adding in that kind of thing. And you should see that actually wants we refresh the page when the servers loaded. It looks very identical, pretty much to this ad item button over here, even though this one's using in a tag. And this at item over here in the homepage is using a button eso that's the power of boot shop and it allows you to really it really helps a lot at this, taking forever to load. And there we go. It's loaded now. Fresh page creating a to do list. Now, if we click this button, what we should see is it takes us temporarily to the ad server. We didn't even see it was that quick. Ah, and it has redirected us back to this list page at so we currently appear tohave A It's no actually showing at this list. If we check in here, you say that we actually do have it added that road to this record to this table forests Eso You can say this new to do list is here, and it's got I d four because I was playing around with the earlier and testing to ensure it works. Ah, the moment Ah, this is no showing the, um to do list like we expected it to. And you can see here in this you Oh, there's nothing inside of it as over some reason this to do list variable isn't being set. Probably so we'll move over to our main routes here, and that's because we an appear we're supposed to be causing it. Uh, I used a Capital Elder rather than locate. So so again, that's a lesson in making sure that you, ah, use the rights the same variable names between your hasty mill and Python because it won't pick it up for you. Which is one unfortunate thing. So we'll just restart this over here again, restarting it for any changes in the python. All the hate to melt, and it's going to load in a minute. One other thing I noticed that if you do change the CSS, you don't actually need to restart a server to see those changes. A. That you can just empty the cash. Okay, now that it's loaded him, you'll see that we have and new to do list that we added. And if we're creating you to do lose, it adds another one s. So this is exactly what we want we got after treeless appearing at end, it's automatically adding them to the database forests, which is awesome. So we'll work on actually viewing these two lists and editing them in the next part 10. Reading From The Database: a run and welcome back. So now we're going to be working on implementing viewing our individualists because the moment we just have a static, um, one that is, like, hard coded. Ah, with the item list that we're giving it. You can see this here with Tim List. So what we're going to do is at a new would change up a few of our pages to begin with, we're gonna rename a few things. So we're gonna rename this home page toe, actually be something on lines of your list, makes more sense and will also change the title page of this page to something like that. It list again, making more sense there so that when we view the picture So what we need to do is we need toe change up this route function here. Ah, we need Teoh. Be able to identify what's least we want to show. And to do this, we're going to use the euro parameters. Ah, the way we're gonna do this is we're gonna change your role here to slash list. So you have to go to slash list of you list and we're also gonna add another slash and we're going to use these. Our notation here and what we're gonna put in here is list I d. So what this means is that in order to view the list we go Teoh slash list. It won't work that way. We have to put slash and then you put a number here and this will Ah, well, said it so that this is actually the idea the list Because remembering h of l at lists here used ah, special I d. If we go into our to do list here, each of them have the different I d. So that's a way that we're gonna be able to figure out which one to grab and which want to display at just a side note quickly. I've change to my personal database because it was a bit quicker, but it will make no difference to you guys. So now that we've got this list I d prominent here, we need to tell the function to pass that to it as well. And we might as well rename this function to something more accurate, like view list while at it on. And we can get rid of these items because we no longer need to hunt. Put those you see we're getting our there. But we'll fix that in a minute. That's the first thing you want to say is if list I If I spell that right? If list I d is none, well, would just return some text that says error at the moment later. We'll do error handling in that kind of thing. Abbott. For the moment, it doesn't really matter. So that's just saying checking that it's in the euro and that it's not nothing at the moment, because otherwise you'd get in ERA in this next step where we say, Ah, we're gonna create our list Variable says this, and we're going to try and get it from the database. So the way we do this is we use the class name eso to do list are very similarly with the query here we say Doc query, which means I send it a search quest, and we want to filter it by, and we want to say where the lists I D is equal to the list idea that we've shown. So I imagine this to be like where list I use two or three or so on. Ah, but in this case, it's just whatever they put in the u r l that we want to see if we can find that in the database and we want to get the first occurrence. Then we want to check if list is none. Because if we didn't get anything when we tried to ask the database to find a list first again, we want to return an error. And if that ah does work, then it will return this render template and we consider the truest to the list we passed here and that should effectively act, search for the list and get it for us. Now we will have to change a few things here in this view list. Html Pedj First things first. Ah, we weren't hard curd maestri list here anymore. We want to use the name of this realist at sort of do this week issues out to do this, which is the same as at this year. And we want to get the name so we just do to do list dot name here, of course, using the curly braces because we have printing something using, um, printing a python, putting pricing Kurds or Ah, and we can leave that paragraph there. And the next thing you want to do is at the moment we're looking for each item to do list that we want to look for each item into the list of items because before to do list was an array. Now it's that class. And to get each thing in, its, um we get the island. And now I This item is actually set to this class so we can say we want to get the description of the item is what we want to put on the dot point eso we just say item dot description And what you should find is that we can restart the server here quickly, and we no longer ever home page. But that's right. On we go toe list. Yes, we probably should make these girls go to the right pages s so we can fix it out quickly if we head over to our show. Lis. Hey, html page him, uh, where we have our hate draft. We've current got it set to a hashtag. So to fix that, we're going to use this euro for him. Eso again using co braces cause putting something with Python and we say euro on It's got four and we do routes that whatever the function name is, we renamed it to view list. And we also need to past in that list i d. So we say list I d equals in this case, It would be item I don't I d. Because we are living through each of the duelists and we want the idea of h two b in the u R L. So now if we restart this, you should do when we hover over this in the bottom left hand corner, it's that one. That's 23 Accenture, And if we click on them, we currently get an internal server error up. Why is that? OK? Saying template. All found we didn't rename the template here, So instead of home page, it's now view list HTML. So restarting that going back to this page and click on the link again at you See that we have new to do list on to prove that it's actually grabbing that from the database. Ah, we could say OK, number two, we're going to name you two at Jack's chores and If we go back to a list here, refresh the page. You see that updates dextrose click on it. Jack's choices Now the title. So is successfully grabbing from the database, and at the moment there aren't any items in it. That's why they're not displaying. But when we eventually do, I get it at item, but in tow work. It will add them and display them properly. Eso we will work on that in the next episode. 11. Adding To Our Lists: Hello. Run and welcome back. So now we're going to be working on adding items to Ellis, and we're also going to bay cleaning things up a little bit, using Cem Mawr functionalities that junior rights, which is awesome. So let's get right into it. The first thing we're gonna do is we need to have a girl that the A person will go to, which will add a item to a specified list. So the way that we're gonna do this is we're gonna use our root function again that so we'd say, ACH, routes don't root. And we are going to say slash now, I'm going to use a P I in front of it because I don't I There will be certain things that we will want to call with JavaScript eventually. And this is one of them. Eso We don't actually want regular users to be like seeing this page in that kind of thing . So this will eventually be asynchronous, which means that they click the button and it doesn't have to reload the page. It'll that's why we're using this ap I prefix. So this is just a temporary solution, but we'll see how we go again. So slash ap I slash add item. And again we're gonna use this can be anything prefix So we're gonna use a list I d. So we won't know what list is and we're gonna have another slash and we're gonna call this next one item, So this is going to be at the list, I d and we're gonna have the items. So the name of that we want ad and we'll just to find a function here will call it add item , and it needs to be passed in the list. I d and the item, and then we would just check if list I d is none or item is none. Then we're gonna use this aboard, keyword. So from flask up here, we have to add another important. So we had a common up here and type abort. What this does is it spends sends ah, special Eric owed to the page. And eventually, when we using javascript will be able to see if we did get that era at rather than just returning text like, um, like we did earlier with era. Uh, this is the proper way to do. It s So you just type returned aboard here. And while we're at it, we might as well replace these error messages up here with a board had just so it's more professional and you weren't encounter as many issues. Ah, so now we want to see if we can get the list. So it's just copy and paste from this line up here. At list equals to do list are querido filter by our I D equals list. I did dot first and then again, just checking if the list is none. And if that's case, we just returned and abort message, I hope. And of course, making sure that that does have at the parentheses around that otherwise you may encounter some issues S So now we need to create the item and added to the database eso Similarly, our we'll just create a variable court new item and this is gonna be equal to, um, we're gonna connect. The class in this case is a to do item and not the list, because we're creating actual item. So now there's ah kee would hear that we have to set when we're creating it. Otherwise we'll get era and that keyword is going to be list. So we need actually tell the item which ah, list is owning it. And we called Ah, this variable list in this back graph here. So if you change if back graph is able to something else, make sure it's you type the same there as you do. Ah, here. But for us, we've got it said his list Eso we'd say list equals list because we're saying, OK, that the items parent or list is the one that we've been given in this girl. And we also I can set the description through here. Or you could set it like we did up here where you say new item dot name or description doesn't really matter. Description equals item again. Whatever was passed into that girl and then we just add it to the database by saying, db dot session dot ads and then we've passed in the new item, and then we make sure to update the database by saying, db dot session don't commit. And of course, we need to return something. When people view this page at that, it worked. And for now, we're just gonna, um, return a redirect so again sending him to another girl out. Just the editing list euro for that particular. So we say euro four and I'll show you what this means in minute if I'm going to quickly, we want roots stop view list. So we wanna send them to the euro, where they can see the list that they've added the item properly. En we say list, I d equals the list I d that we were given eso now they should redirect him to the proper euro on everything should hopefully work properly. Now, at the moment, we don't have a way of actually getting to this euro s. So we're gonna go to our view list, hitch mail here and scroll down. So what we're gonna do is add some JavaScript. So JavaScript is a language that can be run in the browser, and it's similar. It's a mix and mash between a lot of different languages were actually going to use an add on for jobs. Get Jake weary, which just makes it easier. Uh, so there's a bit of Syntex we've already added Jake weary because we need that for bootstrap as well. So ah, the way that we write Job script is we add this script tagging the browser so this again doesn't need a closing tax. Otherwise, you're getting error, so it should look like this and we can invent ourselves him. So what we want to do is we use this special dollar sign at to symbolize where, using j query. And we're gonna do parentheses here. And what we're gonna do is we need to set, um, some code to run when we click this ad item button. And first of all, we need to give be out, access this button and true that we need to give it an I. D. So we're just going to set this buttons I d attribute at two. Just something like add items so we can get it easily. And in Jake, weary at to get an object by its i d. Similarly to CSS we use the hashtag and we put the name of it so this will actually get us at that element. This button element here and then we want to say is ok dot Click to this run. Ah, function here. Ah, when we click this button and Jake Weary and job script use, uh, curly braces at rather than tap. So that's what they've curly braces doing and essentially says, OK, we're gonna run everything in between these two curly braces s. So what we need to do first is gets the new item description that we want. Answer Will store this in a variable would save far for very built for creating one. And we will say We'll just call it new item description and it's gonna be equal to So we want to get this input object and we want to get its value. So to get this input object, we again need to give a 90 that's so well said its i d to something along the lines of new item input and again to get a element in Jacob. Very little sign rockets quotes hashtag because by I d, you could use a dot if it was through the class, that that would return a list because you can have multiple things of the class. Ah, and we us. We don't just want to get the object. We want to get its value. So to get that an input objects value, we just type dot valve on and then do some brackets there. Okay, on the next line, we want to read it. We want to change the Earl of Page at to be out at item. You are old that we just created. So we just simply say window dot location. Hey, treff equals on then we do support team has to be a string and we're going to use, uh, we're gonna run some pipe in here because we want to get the u R L at finish ap I link. So we say you're Ellen school full, and we say roots don't add item now, making sure that you're using single quotes here and double quotes in the outside. Otherwise, it will not work as so. It needs to be, um, double courts on the outside and single quotes on the inside when using euro for in JavaScript. Okay, s. So now we will just do another quick here, and we need to pass it the list I d. So the list idea in this case is going to be to do list idea because we already getting to do list as passenger this hate email template when we're loading that list earlier. So that's how we get the items in the name. It was similar to say to list dot fighting and we also need a pass it it's item value. Ah, what doing a bit of ah different approach for the mom was sitting item Ekelund none. And what that's gonna do is I'll show you. I'll demonstrate it right now is if we restart this page and we go over to here and we click on, say, Jack's chores, we've got an error expected out expecting, um know why is that giving you an hour? Unexpected bracket expected that That's why we are missing a regular bracket them now for related. Lets pledge again. So if we have a look in this inspect element here in the script ah, hard codes the location to be sachet p i slash at item slash to slash. That's what happens when we set um, Jamaican, Nothing. It doesn't put anything after that Final slash, and we need a put ah item in there. Otherwise it'll yellow does cause it expects an item toe. Add this the name of the item we want to add on to the end. We just simply use the plus simple and we just say Plus, uh, new item, new item description. And what you should say is that if we restart, uh, survey here and we refresh the page, you can see that it's added that there, and we should be out of say, Okay, I want to add, um, do laundry. And there you go. It added, Do laundry as a chore, we could say Wash up wash dishes. Yeah, and what it's actually doing is going to that at a p I. U R o quickly adding it. And then it's redirecting us back to our view list page. So we now have adding items to Alice, which is nice and simple, so we'll continue working on this in the next episode. 12. Using Templates: Okay, everyone, welcome back. Ah, what we're going to be working on quickly in this episode is just formatting some of al pages a bit better, because in the moment you'll notice that when we've created these two pages were having to copy and paste a lot of information, which just isn't really a good idea. And what, particularly with things like these links for bootstrap and that kind of thing. Ah, what we can do is put it all in one spot and have it. So we just have to change it in one location. Where is so you want to update the bootstrap version? You have to go through every single hey html file and change this one line, which could be quite tedious. And you'd miss something and you might have errors just because of that. That's what we're gonna do is use more of our templates and what you're gonna create a base template. So did you do this? We're gonna in a topless photo gonna click add file. I'm gonna name it based dot html to this base dot Hates himelfarb is actually going to be like our initial most basic file, and we can add special things for each different page on top of it. Yes, sir. Of course. To create our Haiti, my files, we set the doc type off the top. I had to be hasty male. And then we do our hate email tax. Like so And inside this hitching Not like we have our head. And we also have our body. I'll invent that in a second. Okay, so now that we have those tags right there, what we can do is entire this head tag. We can actually just put all these links here. So if we come in basic, be careful. Not Teoh. Probably that style sheet link. Because we want that to be unique for each page, and then you can just delete it and well, paced it over into these helmet head element over here at which should work properly. You can also remove it from the view list dot Asian male. You follow him and we remove those links. Uh, which is all good now in this based on hedge melt, we need a way of inserting a title into it s so we can use these things called blocks. So again, we use our single curly braces with percentage science to do this and we call, we can name our blocks whatever we want. But I'm just gonna call this blockhead and of course and block so you can create as many of these boxes you want. And essentially, it means that you can put any information you want in between these two lines, and we're also going to do the same for the body. So we're gonna create a block or body and then end Look, which there's nothing more we need do on this based on HTML page, which is awesome eso Now, over here in this regular page, we can get rid of this. Hey, html up here, we can get rid of this head. We can also get rid of the's head and body tags like so, until you left with something similar to this Now we need to tell it. Okay, we want you to use the based on hate email so up the top of each file, we have to write extends, and then we do single quotes or double quotes. Doesn't matter based dot html and making sure to finish that off with this percentage, son and now where we want to put the title in the sell sheet, we just simply say block, head and oh, wrong, not presented signs and we say en bloc. So now this will insert whatever we put in here into this area on the base that hate email , and we can do the exact same thing with the body. And you can see how this will ah, greatly improve, like your design and that kind of thing. When you're managing your files particularly, it makes hates easier, particularly if you want to add like a file to every single page or a style sheet or something like that. You might have universal style shaped Ah, and now we'll just go and do the exact same thing in our view list page. So get rid of those hates team on head elements. Ah, and of course, putting those and blocks and start blocks in getting rid of the body and the hate she melt them. Of course, that ah script tag needs to be left in the body that can't be outside. Anything outside of this will not run properly. So just be wary off that and what you should find is that if we restart the page him and we get what you are else, everything is loading properly. Um, and we can get on this page and that's working good as well at what this allows us to do is really easily at a never barter, each page of which will be doing in the next episode. But we're also quickly just gonna rename some things like this style sheet here. It's no longer home page at this gonna be a view list, and the other one's going to be sure, Lis And of course, we will just make sure to change the at style sheet name in the view list of html here as well at two beef Ulis dot CSS s o. That was very quick, but it was just formatting. And it will really help us out. Women at our never bar in the next episode 13. Navigation Bar: Hello, everyone. And welcome back to this episode. We're currently going to be adding a never bar at the top Eso we can never get between your pages which will be helpful for when we eventually at a look in system. So as we've just formatted Alaa pages with the base, it's really easy to add a member to all of our pages. So we're going to go to well, based on html and start adding it. So I'm gonna add some comments in hate mail. To do that, you just do a roos mish mark and two doctors and I'm just gonna right now bar start and I'll do another comment that says never uh, and just so looks a bit neater. Eso We're putting it above our body block, but still in our body block. So before we do, all of our pay changed a male. But it still needs to be in the body, and it can't be in the head because head doesn't do display. So inside here, we're going to create a never element, and there's gonna be a fair bit of typing here, so it might be easier for you to copy and paste off, Get hub. So the class for this is gonna be never bar. We're also gonna give it never Bart, Dutch, expand, dash launch, and we're going to give it a dark color. You can also use light here at plus a dark background. Um, so that's what that first he does. Ah, and I'll explain what they expand does once we've got it working out. But we're going to do a linke and this the class is gonna be never bar dash brand. So this is gonna be whatever you want to call the site or something like that. I'm just gonna call it our to do list crater and you'll say how um this will be a ah, you can offer images here if you want. Abbott, this will be where your most your name of this idol company would go. Ah, and we're gonna do I bought in here. The class is gonna be never Bob Dash Tokelo and this Baden again. I'll explain, But what it does the types gonna be button Donna Taco is gonna be collapse and daughter target is going to be an i d here. So we're going to give it hashtag never bar and have, uh, bolts mark up and we're going to give it some aria controls. Ah, you probably don't need to do this, but it's good for ah screenwriters. As so you should always ah, give aria labels to all of you elements if you can, because as screenwriters will use those to explain more than imager, Element does to a blind or a person with disabilities. Eso again. I am just typing here whilst I'm talking, you can cover it off the screen or the have is probably easiest. Uh, all these elements this is gonna create a bottom that when our screen size gets at two small, it will actually allow you to do a horizontal never bar as opposed to a vertical notes. It will allow you to a vertical never as a place to hers onto one. Ask her way, just ending off that one there out with the span and the icon in the center there. So if you don't, if you don't want it to do that, you can just remove this button element, and you wouldn't have an issue also removed. That's what this nap bar expanded Large also is required for that to work. So we're now going to do I give with the actual links. So the class of this is gonna be collapsed. Never. Bar dash collapse. This allows it to do the vertical collapse. If this grain size just more on the I d here is gonna be the same as what we set for that buttons data target. So it'll be never bar now. Old markup. You can change it to whatever you want at that sport Bootstrap recommends. Okay. And inside of this, we're gonna do another class, and it's going to be and neck bodice now is the cause of it. And we're going to stop putting on links, so ah will do for links. We used a tag and we're gonna set the clause to be now dash autumn and now dash link. So, of course, putting spaces in the class means you can have multiple glasses to an object, which is really, really helpful. And the hatred for this we're just gonna said it to a hashtag now, which means nothing. But we will change that later. M will use this. The 1st 1 could be home, and we can just copy and paste this again, and we'll name the 2nd 1 of you, Lis. So you can see the, uh Now what we can do is, with this view, less hatred. We can change that from hashtagged bae slash lists. That was which is extremely helpful because I'm not gonna use euro focus. It's simply Ural, But you probably should Ah, sorry slash list will make you go to that list page. And if we re started here, what we should find is that, um when we go to here and refresh the page, we have been fr appearing eso it appears that we haven't exited a divot some point, and that's because we haven't done al Final slash now, um, which was what was giving us that ever there. So I just reached out it. Refresh the page And there you go. This is what it should have looked like. And now you say that if we click realist, it takes to this page, we can go to Jack's chores. Fearless. Expect this page at home doesn't do anything a moment cause we don't have a home page. Now, one thing you can do is make it so the page Iran has, like a different color in the Knepper. So you know which one you're on end. We're going to do that. Ah, the way we're going to do that is in this class, you can I'll show you in, Um, Chrome first is if I look at this view lives here, if we give it the class active that you said actually highlights and makes the color white . So we're gonna write Cem Ginger cohere, using out to, ah, curly braces. And we're going to say, um, active. So there's a single quotes if active under school page double equals single quotes home for this one. And then we can copy and paste this same code into this class here and change if active page equals this. And then if we go into our two pages here up the top, we will say, set active page equal to lists. And on this one, we will take actors page cool to name this one view list. So what this is doing is it's going to add the active class to this object. If active page is equally list in this case, or if it's a good a home. So now Fleury start. We should find that we refresh the page and it automatically is set to active. But if we go to say Jack Straw's here, it's no longer active because they don't actually haven't have by item for the single at list because we're not going to do it that way. So you say that everything should be working fine. Ah, we shouldn't have any Bergen. Things will find that we could add a chore here, and it still works properly because of the way we've done that based on HTML. And we can still add new, treeless if we need to, as you can see just that. So that's it for this episode, and we will move on to more things in the next. 14. Editing Our Items: Hello, everyone. And welcome back to this episode eso. Now what we're going to be working on is a bit of JavaScript because we want to try and make it so we can edit thes lists or chores all of your nickel that we added to our to do list. Um, because moment we, Adam and then they're static. And if we wanted to change the name or something like that that we can't do that. So we're going to implement some inputs that we can change them, and then X episode will use some Ajax, which we'll talk about later. So first things first, we need to make some input elements that we can talk to and that kind of thing. Eso we'll go over to our view list, uh, html file. And one thing we're gonna do is we're going to start naming our inputs, that kind of thing. So inside this for Lou, we're going to change. A few things were going to get rid of this and just add some list elements for the moment, getting rid of that item description that was in there before, because we're going to start splitting things up into different parts. So the first thing we're gonna do is we're gonna make it give which is gonna be showing our original input before any changes. Eso would just give it a class. Ah, and we're gonna make a custom classy. So we'll just call it something along the lines of item value should work. Eso This will just allow us to access it in our job script later on. And I'll explain why we need to do that. Ah, and will give it an I d. As well. Ah, and the idea of this is going to be at the idea of the item we're going to use that to be overdue, differentiate between the different items and their individual DIV elements as well eso We'll just close that off here and inside it. We're going to stick our item description and we'll disclose active. So this Dave isn't actually, um, changing any the layout of anything. It's just allowing us to easily hide and show item at using some custom styling. Later on, I will do our second if initiative is going to contain our editing, uh, input boxes and that kind of thing, you know, saving cancel buttons and this div is going to default to be hidden eso To do that, we can use this style attribute which we looked at to begin with, and we're going to sit display to be none. So you do display at Colon none, and that will make it invisible to the user. We're also gonna give it a class so we can show and hide it easily. I would just call this one edit item because this will contain all the items editing tools , and we're gonna give it an ideas. Well, now all of these elements are gonna be referenced by a special name and then the idea of the list star kind of explain how that works a bit later on. But for now, the idea of this one is going to be edit and the motive dish, and then we will put the item i d here as well. So, for example, this could be at one and a 2 83 84 Allow us to access the specific edit for that text in our job script, and we can just close off that David There now, inside the stiff, we're gonna have an input element and this idea is gonna be similarly to the edit. One is gonna input dash item, don't I? D And we will give it a class as well. Something along lines of to do, uh, item should work and we will give it a value. So the default value of this is going to be whatever the item ISS So actually, we don't need this is not necessarily required, so we'll just leave that blank Finance of value equals nothing. And we also want to put our buttons in so it would do a sudden elements. So the i d for this one is gonna be a safe one. To save Desh item ideas is to be saved one safety, etcetera, and we'll give it our button formatting class. So this is BT in and then Bt and Dash primary, which will give us a nice blue button which will be for our safe. So we'll just close it off here, type whatever we want it to say so safe in this case, and we will end that bottom tag. Now we're going to do another one very similar, except this one's gonna be canceled, so we'll give it that idea of cancel dash, whatever. That's the Ahmadi. And for this was a button bun dash danger which will give us a red button because we're going to use that for mating colors. And the text on this one can just be canceled. So that's actually it for these particular, um, like the HTML. The only other thing we will want to do is set the width for this input element. And to do that would is going to our CSS file here, and we will add a dot to do. I don't ah, class. So what this will do is apply styling to anything with the to do item class on that door at the front tells us that it's gonna be a class here, so set the width to be 100% so that'll make it so the input element stretches all the way from left to right as virus that Ken and of course, a semi colon on the end. So moving back to this view list, you see that we have ah, I'll script here from before, and what we can do is we can either add another script tag or we can use the existing one. I'm just going to use the existing one. It doesn't really matter what we're gonna do, but for now, we're going to first things first going to make it. So when you click on the, um text, it will show the input elements. And right now, if we're actually to restart the server and to load this list page here this view that Jack Straw's nothing should have changed. If it did, then you've done something wrong. It should all still be invisible because you can see if we inspect elements here. What's happened is we've got at it one and you'll see how these other ones have at it, too, because they're depending on the idea of the item. And we have input once a one cancer one. And if we actually wanted it until this display, none here. You'd say we have the input element showing with the save and cancel buttons. Now it'll format a bit more nicely in a minute, but we'll work on that now. So over here, we need to do ah J query event for when we click on our text. That's here. So, for example, when we click on test we wanted to show the input. To do that, we will get a test element which has the at class of item desh value. So we want to apply Every time I'm on a element with the class item dish value, we want to run some code. So to do that, we just do Ah, dollar sign for Jake weary. Ah, And inside this, we're going to apply to the class item dash value. Then we say, Doc, click very similar to the lines above a sin when we added the ad item bottom and then we want to do a function. And of course, we do out curly braces with that to make. Define what? What coats going to run. So the first thing first is we are going to create available. This one's going to be caught item description Parliament. I'm just gonna use Ellie for short, and this is gonna be equal to for this. So essentially what happens is this is whatever object we clicked on eso in this case, we would be clicking on test or Jalloh or do laundry washers or dish wash dishes or tour etcetera. So that's what this special keyword Jake weary will set this variable too. Other variables we want to do is the item number. Because we want to be an access only that items things and that's equal to the item description element. Don't attribute and I d Because remember, the i d of these objects with Ireland s value is actually eager to the item i t which is what we want to try and get. And the last variable we're gonna set is item change, And that's gonna be equal to, um this is the element. The input element eso we're going to use hashtag input dash plus item number. So remember, over here how input element has the idea of import dashed the item i d And that's what we're doing here. We're getting the item number And what propel? It's just reloading quickly. We're getting item number here. And then we're searching for the element with the i d import dash 1234 etcetera. So that's those variables defined, and I'm just gonna put a bit of spacing there now. Next thing we want to do is hide the bullet point and show the editing pain produce we say item description, element don't CSS So this sets the styling cause, Remember, this has the styling of display, Colin. Then, uh, we're gonna change that. So that had the item value one has, despite colon. None as the, um, So it's not shine. Essentially. So did it. This we use curly braces, uh, with two former dictionary or a list. Um, and we're going to use the K display and then make sure this is two separate things for the colon. Goes outside of those quotes there, and then we do another strength. None. So it should be brackets semi colons and then quote display colon quote. Not that. That's what you need to do for this, Intacs, for this particular setting, the CSS in J quit. And what we want to do is make sure that this input element that we've now shown what Sorry we haven't shown yet, but the input element that we're gonna show has the right text in it, because at the moment it would be empty. So we want to send it to test whatever the current one is, so we can edit it. And to do that, we just simply say item change element dot Vow and we're going to say Ah, it's way setting the value of it to be item description l a dot text. So that's getting the text here and setting the input element to that. And we might as well just show it because we really should. And it's the element we want to show is edit plus item number. So that's this Steve here, which contains the input in the button. So you want to show that, And to do that, we just do a CSS with semi colons and display in line. Dash block is the one we're gonna be using for this. There's multiple different display options. That's the one we're using for now. And if we restart it, what you should find is that we can now actually click on our uh huh text, and it's disappearing it, but it doesn't appear to be showing the right elements. See, that's still good. That display slash none. So why is that? Because we haven't put a hashtag in front of this. That's why it wasn't searching it by the idea and they got. You can say that we now can edit these texts and it's being set to whatever input element is eso That's exactly what you want to happen now. Ah, what we would like to do is you're gonna only at one at a time. So to do that, we simply just make sure that whenever we click on one, we close all of the offers to do that. We just simply say dot edit dash item. So that's, um, all of the editing windows. I don't see it. This display colon and we will do the same thing for the item value, making sure that that's always shown display colon in line, dash block and know what you should find once we restart it is that we can only ever open one at a time. Eso we just refresh the page him and you'll say that clicking on these I only ever Let's you to one. Now, at the moment we can type in these works. Good late, Abbott. These buttons don't do anything now. You could hard code the functions that they call in the hates email, as in you would type something along the lines of from memory. I believe it is on click equals and then you call my function something like that. But the issue with that is that people can just inspect element change. Whatever function caused the value that passes itself, it isn't exactly. It isn't secure. Ah, what's this? Other medicine isn't still with 100% secure. It is a lot better. It's just bad practice to be hard coating your functions in like that. So to set the buttons functions that they're gonna call, we simply we need create these functions first. So outside of this click event, we need to create two functions. One of them is gonna be called close up and way. I've got a passing, an event perimeter and of course, doing curly braces here. So this is gonna be run when we hit the close button, and we'll just put in a lot that says running close function. But now that we contest, it works and we will do another function. Just copy and paste it there and change the name to save at it. And it will change that message to running save function Now to tell these bottoms what happens when we click on them. We have to use a bit of J coury. So in here we will search for any elements that start with Cancel Dash And then they have that item number and we just simply say Click and we will call close Edit for the cancel button and we will do the other line for the save on, which is very similar. Just don't click and save at it. And if we restart the server here, we should find that we can refresh the page. And once we click on one of these buttons running, close function and running, say function and that works for all of face. So at the moment we have no way of knowing what ah item we have opened. We could do some checks through the elements and see which ones hidden in that kind thing. But the easiest way is just to parse, um, variables when we actually click the buttons. And to do that in our clicking mints here, we simply add a dictionary or using curly braces and make sure to put a comma after it, and we just pass whatever parameters we want. So we can say this parameter number is going to be equal to three item number. And when I see eagle too, I mean putting a colon there. Um, it's just this in tax that this year's end copy base that into the save and close that one . And now we can change these alert functions to be to display. The idea is that we can say running close function for I D was event Dr Data don't know and I'll do the same thing here. And if we restart this ever, What we should see is that when we actually click on the different buttons so bc running for I d one and this one's running Friday four, etcetera. So they're all unique numbers, so we can easily access thumb and the clothes and save buttons are both working now what to do in these? So we'll just get rid of this. Close it at one for now. And what we're gonna do to save our item numb equals event data dot number and below this we're going to say, OK, we just wanna hide that element and show that text. We're not even going to change any of anything because we're using close buttons that removes any changes were made. So we say hashtag edit, and we want the edits. Whatever number. It is so plus item there. And we'll set the CSS to be display colon none because we want to remove that editing window. And we want to in turn show the old text value of what it was. So we set the atom numb CSS display to be in line block, which again will show that element for us. And that should be all we need for the clothes that it section and for the save that we're actually going to write a similar piece of code. But we're gonna say, I don't know. Michael's event dot died at number like the other one, but blow this were actually going Teoh hide the edit window like the other one, using the same methods Edit dash plus item. Numb doctor says splay colon none. And what we then want to do is say, OK, the dog point, Um, with the i d item number, text is going to be set to new value and where, and we need to actually declare this new value. So up here was Hey, bar you value equals get the important so hashtag input dash. Plus the item numb Could be anyone to get input of the A number were looking for and we just want to get its value. So that should set the value, and then we just want to show it. So we just simply say cash. I got him numb dot CSS display Karlan in line block, and we re stop that server. And what we should find is that if we refresh the page Ah, if we were to types and things in here, it's safe. It edits that Ah, listing for us. Probably air. But if we would say try and remove everything here and he canceled, it puts it back to what it was before s So that's our simple edging of the difference. Jaws and that kind of thing. The listings in this tree list at the moment, we aren't updating the database yet. Eso we're going to do that in the next episode using Ajax. As I said so you'll notice that if we were to refresh the page, everything gets reset. So we're gonna be updating the database in the next episode. 15. Saving Our Edits: Hello, everyone, and welcome back. So now we're going to be working on actually updating the database when we make these changes. Because at the moment, if we were toe change one of these chores here after we've just implanted that editing feature, um, you will find that we can save it and it visually shows up. But as soon as we refresh the page, it disappears because the actual data base behind it we can view that appear to be my admin doesn't get the updates. So to do that Ah, we're going to create a new route or page for R A p I. Because we're going to do this without actually refreshing the page, which is really, really useful, and I'll show you how we're going to do that and explain a bit more. Once we get into that, the first thing we'll do is create this page that the JavaScript is going to go to, um, behind the scenes to update and item. And to do this, we're gonna similarly do at Roots dot Route and the rap boost one is going to be slash ap i slash edit item slash Now what we would like to do here is we need to know the item I d We don't need no the list I d because we can just search purely by the item i d. And we want to know the new value so we can use these again. These are a notation to substitute for anything in the URL. And we just defined a function underneath so well defined. We'll call this one edit item and making sure that you pass in the item I d and new value to this function. These parameters need to be identical. Otherwise you won't be getting the values passed in and you will get an error. The first thing we're gonna check when this page loads is ah that these two things have value. So we'll say if out of my day is none or new value, he is none. Then we just want to return an era. And to do this, we're going to use a special type of error return using Jason if I which Jason is a special Ah, it's ah, like a formatting set of formatting rules for text documents and sending between servers and different programming languages. And javascript uses that and a lot of different things. We use Jason, and essentially, we need to send back adjacent response because that's what is expecting to say that not we don't Actually, it didn't work properly at to do this at the top of our, uh, where we're importing on libraries, we need to add from flask import Jace on if I and down the bottom here, we can replace this with a return. Jason, If I success equals false now that needs to be spelled identically and false needs to have a capital F, Otherwise it won't work. And then what we would try to do is get the item so we'll say item equals to do items. So again, the class for searching in the dark db to say we're initiating a search, we use the doc weary and we want to filter by at ones where the I d. Is equal to the item i d. That was passed into the URL, and we want to get the 1st 1 in case there's multiple with the same idea. It shouldn't happen, but we're just doing it to make sure. And then we say if item is none again, we just want to return that error message in the Jason format. Don't worry too much heart about how Jason works when not going to be touching it in this Siri's very much anyway. Eso at this point Ah, the item exists and we're ready to change it. Ah, so let's do that will just simply say item dot description equals the new value that was passed in. And then all we have to do is just say to the database, can you please update it and send some requests and that kind of thing behind and and flask will do that And then we can just simply return J. Son, if I and this time we're gonna say success equals true so that our program can read and check that everything worked out like it was supposed to. And that's all we need to do for this ed item page. Now we're actually going to start using it in this viewed list, HTML and we're going to go down to the bottom here where we have our current job script set up. So it's actually quite simple sending a request using Ajax, which is just a library that will it makes it so you can send request pages in the browser without having to reload it. And you can also update the browser accordingly. So we only want to add a in this safe edit function and just above where we're actually finalizing things we need to do a get request. Now, I'm not gonna get into I'm not going to explain them. Http methods yet. I will do that in a lady video, But just remember that get is the most common one. And it's what your browser does when it loads a your role. Ah, and the other common one you'll find is post, which is where you're sending information to a page. So get is where your reading information post is. Where you're sending information for this case, we're just gonna use get We could use post if restructured our route in a different that way. But we're gonna use get So just think of it as we're trying to get information from a page , and then we ah, the page borrow we're gonna get is slash ap I'm slash at item. I'm not using euro four here because with the way we've got it set up it's difficult to generate it using that you are a four year old that I said you are right. Me too many times there. Ah, and normally, best practice would be the use post. But we're going to use get for now just because it will work very similarly. And the first thing we want to give it is the item number in the URL. Remember, we expect that is a prominent and we also want to give it the new value. So just putting those slashes in between indicate that they're separate variables and that should be all we need. Now we put a common here, so this first parameter we're passing in is the girl we want to go to. And this next one we're passing in is the actual function that gets called. Once we have sent that request ends, we've gotten a response. So what we say here is function brackets Datta, and then we do our curly braces. Eso data will automatically be set toe whatever the response we get from the pages. Ah, and essentially, this just runs when the request is completed in javascript. Comments we used to slash is, by the way, that's different to python and repel. It will recognize that for you. So now what we're gonna do is this simply copy and paste this code down here into this function and we will just indented their jealousy. It doesn't matter. Worry too much about indentation because it uses credit braces. The last thing we want to do is add a condition that if it doesn't work, eso we just put dot fail onto the end of here and pass another function. And I'm not gonna wide about putting daughter in here and we're gonna do is just do an alert that says era said that us as a person gets, we get notified when something isn't working. If you are getting this error, then you probably typed you are all wrong or you haven't set it up properly in the roots because you shouldn't actually ever get this error as long as their website is loaded properly s so we could just restart the patriot. And if we refresh it, What we should find is that if we change our wash dishes to maybe at wash clothes and save it, it takes a second to safe. If you have a slower db. Um, but once we've saved it and we refresh the page, we should see, There we go. It's actually still saved as wash clothes. Okay, so now that we have our editing working properly, it's a like walk cat. If you walk you cats, I don't know, I could save it. Refresh it. And you'll also see that when we actually browse this database And if we would go to our other table, which I believe we can click here for it and then go to a to do item is that when we want you'll see here we have the different items as a list there associated with. So if we would actually go to view lists here and changed this one to be, um, uh cook, you know, and at it refreshing the page. And we browse here. You say that has a differently study because it's associated with a different list. And it's them having unique I d. Because that but you see, if we were to change this cooked into him to, um walk dog. Sorry, Capitalization. Save it. Refresh this page. You'll see that it automatically updates that they're so our db is getting updated properly on, and this is what we should be doing. Another thing, if you are inclined, is we could use that same get request method for automatically adding the item without refreshing the page at which is extremely useful. And you might be interested in doing that. They'd run eso That's it for this episode. 16. Login & Register Pages: Hello, everyone and welcome back. So now we're going to be working on our log in and registration page, because use is it gonna be over to create counts. And at their own lists, it's not gonna be at the moment anyone convert you all the lists and edit them freely. Eso We're going to change that so that you can only edit your own Lis. To do this, we're gonna first create our longing and registration HTML pages. This is gonna probably take over a few episodes. Sorry to begin with, we're just going to be riding the brutes and the basic forms. So in our main route stop, I we're gonna got the top here and we'll add some new routes are at roots, don't root. And the 1st 1 we're gonna add is register making sure to put a slash at the front of that eso this euro I will allow users to register an account with us. Ah, and first we're gonna define a function. We'll just call it register. And inside this organ today is just returned a render template off the file that register dot html and we're just going to simply at do a very similar thing for the log in page as changing the URL, Teoh slash log in and the function name to just be re loving as well. And of course, that's just gonna return. I render template of log in haste email. That's what we need to on the routing side. It's fairly support. For now, I will deal with the actual forms mission and later, And in this templates photo we're going to create this log in Haiti Mill as well as the register dot html. So in ah, this will start with the login form. And what we're gonna do is we're going to first make sure that we extend our base template by writing extends based on html. And we're also gonna make sure that we set the active page equal to log in s so that we can eventually use this without nephi and add a logging and registration button. But for now, we're not gonna add it to the never. I will do that later, once if implemented longing in Esso first with this head block, we are going to at the title of the page making sure to do that blockhead and in block and inside here, we're just gonna name it Logan. At the moment when I'm going to use a star sheet. If we need one, we can add one later. But for now, most of it's going to be done in bootstrap at which is great for us because it means we don't have to do as much work. So ah, body blocks here. First, we're gonna add out. Centering container without deficit was at the class here equal container at Dutch, Assemble small. Give it a bit of a margin so that it doesn't bump up against the, um and never about too much. And that should be all we need for that part of it. So Ah, Now what we're gonna be doing is creating a form ah, which is a special type of element. So we do hours and then form. And the method for this one is going to be equal of post. So we need to make sure we set that attribute that will explain what that does later. For now, we're not gonna worry too much about that. On the form is a HTML element that allows you to fill in information in import fields and that kind of thing and submit it to your pages with a button. Ah, so it's really helpful, and it doesn't loaded to work for us. Eso Right now we'll just add a title to the top of it on will use a bit of bootstrap here so we'll do it. Give the class can be text at center. I will give it a bottom margin of four so that it doesn't brush up against anything. Block. And inside this div, we will do a heading element with a class of head of three or hedge, three margin bottom of three. And the funds front dash weight dash normal at these roll bootstrap classes. And I'm just using this because this is what I found works and looks nice. So we'll set the ah text of this heading to be loving to your account, and we'll just end that heading element there. So what we should find is that we can restart the server and we can never get over to slash log in and it should work probably any. So we have the heading element log into your account. They're working as everything appears, be working and we can add the rest off the parts of this form eso for each different element in a form of were using bootstrap. We need to encompass it in a div with a class of formed as group. That's just the bootstrap thing and will make it look a lot nicer than the default html uh , pages. We'll give it a label eso this first one's gonna be used name. So we have to specify the element that this label's gonna before. Ah, and more just cool It used name and the label that this is gonna show is gonna be user name . So we need to also put the input element here, and the type of this input element is going to be. You can see there's lots of different ones that we're just going to set it to text, and we can set the class here, be equal to form dash control and the place actually don't need a placeholder for this because we're doing it separately. And we will use the required attribute, which means that there needs to be something in him. And because it's the first element on the page, we consent, order, focus equal toe nothing. And what we'll do is we'll mean that that's automatically selected Whenever you visit a page which is extremely helpful and will service a lot of work, we can actually set a place holder as well. Placeholder can't just be using him, and I'll explain what all these different parts do in a second. If we refresh the page, we can see we have our user name element here. So this label is this text up here. This use name, text and the four attribute allows screen readers to figure out what that label is connected to. Ah, and at the moment we're saying it's connected to this import elements and for the four element toe work, actually, we have to set the i d here be equal to use the name and being named equally used name as well eso Now screen readers will recognise that this is the user name input element and will work properly with. That s so we're setting input type equals text. There's different ones. You could say a password, I believe is one and you say that does the doctor automatically for you and went make copy and paste it at the form control classes required. Otherwise, it looks disgusting. Like this, Uh, for supplies that will reappear required means that when we have the submit button, it'll Warner's that if we don't have anything in there and you can see that if we actually refresh the page at automatically Ferguson implements there, it's got the blue border, which is exactly what we want. It makes it easier for people start typing. And this place holder used name is actually what in this input element before we start typing. So if I write test here, you can see why I felt a test. But you can see that's what the place orders therefore. So all these elements, I just work to making the form look a lot nicer. That's the next thing we can do is you can actually just copy in pace this whole Dave here moving down a few lines and will change the four to be password that changed the label to be password. And the type for this one is gonna be password. And we can remove auto focus because we don't need that. The i d. For this is gonna be possible. The name password in the placeholder password does seem to be redundant. But you have to do it, particularly the i d name, because that's going to be what we need for these forms. Toe work, with way we're doing it. And if we just restart here, you see that refreshing The page actually put the password and retyping it, and it's got the password type as well. So the other thing we need for this long in paid is a bun at the class of these buttons Gonna be butting and will do Bund s large, which makes it to be bigger than the regular one and will do button dash success for submitting it. Actually, we might do bundle Primary probably makes more sense it, and we will say button that block to get it to do the whole width and center itself. I've spelt button wrongly. So, uh, other things going to say is we need to set the type of this button to be submit s so that it does submit the form when we click on it. And the name of it has to be some as well as the I d. Much like the other element. And then we can close off this button here, and the text we won't have set to be in this button is just gonna be lock in. And if we restart, refresh the page. You say that we have the log in button here, and when we click it, it actually yells it as peaceful in this field. We feel that in place, fill in this field, etcetera. And what you should find is that when you click the log in button, you go to the log in page still, but it says method not allowed. That's what we want. Despite it, not working at the moment will work on fixing that later. Another nice thing we might want to put down the bottom here is maybe a paragraph tag. Was that the class equal to a text Ash muted. I'll show you what this doesn't minute and maybe text ash center as well, and we'll give it a margin at the top of five and a marching down the bottom off. Three and the text we can put ears don't have an account question mark. We will put a link here to the registration page. So we do that with a tag and the hate drift tells us where it's going to show the hyperlink reference. And we'll say using out to Curly Brace here was a euro underscore Full roots don't register . And that should do the hyping for us and that are playing. And the text we want to put in it is just register here and the hyperlink and end the paragraph. So if we reached out this here, you'll see that refreshing. The page actually does. Don't have an account register hear clicking on that takes us to the registration page, which currently has nothing on it, which is actually exactly what we want to do. So ah, now we will work on the registration html page. So I'm just gonna copy the log in one over here, and we can just change a few things would change the active page to be register. That would change the title of it to be register. And we can change the heading up here to be create and accounts and use the name. We can keep that there at the password. We're gonna have to adds a we're gonna have to Adam another element appear we want users to be out of enter their email address so we can just say give class equals formed that group because we need this for every single element in the form. And inside of this, we're going to say a label for email and the label of this is gonna be email and we're going to do an input where the type is email. The idea cause email the name it was a male. The class equals form control and the placeholder equals email. Now, also, be aware of which, ah, idea name and that kind of thing, of how I'm not giving it capitalization. But the play told, Write em at the placeholder. We could even change your email address if it makes more sense. And of course it needs to be required as we just bear that in mind and restarting this page . That should mean that if we click on register here, it takes us to the create an account page. We have used name, email and password, and what we should find is that if we type, write something random in these two will be in place. Fill in this field and every type something here and click Logan. It'll say please, including at in the U address, so actually automatically checks that it's a valid email. To a certain extent, I believe different browsers to different checks so that one doesn't even require full stopping it. So is in dot com or anything where some do so Some have more rigorous checks. Others don't like crime, But it doesn't matter because we're going to do some checks on the service side as well. Later, Ron. And the last thing we're gonna do is actually another field will copy and paste his past. What one? And what we're gonna do is have a repeat password because you can actually see at what you're typing. I you need toe added check toe ensure that they put the past what they actually want to put in there on. They don't get looked out of their accounts. So in order to do this, we're also gonna have to change somebody. I ds here, so the i d. For this one is password to as well name and the placeholder can be repeat password, and we should be a restarts the, um, paint chip and say that working in action now at the moment we can submit whatever we want and click moving. And it lets us, um What we need to do is make it so that these have to be the same. And juice. We're gonna use a bit of JavaScript in the hate email itself. So this will just type on change equals and then to ah, quote to now, this is the first password. And what we have to say is, if rockets this dog check validity So if it's checking, deceive too right then we say form duck password to dot pattern has a cool this don't value . And then we can put a semi colon at the end them. And now in this repeat parceled, we say on changes Well, using those quotes there and then we say this dot set custom validity validated Fallujah teas. Hey said, Ah hum. And in the brackets here we say this doc validity dot pattern mismatch Question mark. So and then we will print the message we want to show So we'll say please enter the same password as above. Ah, nice and simple. And we do a colon here and we just do an empty string with an bracket and colon. So what is this doing? So first of all, the 1st 1 is saying, OK, if we're checking the validity Ah, the password pattern has to be the same as this value for the 2nd 1 We say Okay, Whenever we want to check the validity, we say, if the pattern mismatches which will get fired if things 1st 1 is wrong, then we say so. If it mismatches, we say, please enter. The same password is above the colon, symbolizes or or else print. Nothing is the way that's rate permanently as we can restart the page and will say that if we put in random emails here and if I type 1234 here five and I took five or 54321 log in plays into the same passages above. And now if I do 12345 let's be looking So it does now check. If it isn't doing that, then you probably misspelled something in amongst this on change section off it. The last thing we didn't do that was changed, but in text to be registered and we can say don't weaken, say already have an account down here. I already have an account and we can change routes. Two roots start logging and will say it. Look in here. So now, restarting the page and refreshing it a war Me, that former submission. Don't worry about that. And we can switch quickly between them by pressing lovin and register here, which is exactly what he wants. You can see yet the name, email and password fields, and we have the same password for locking in. So I will work on making these interact with the data base in the next episode. 17. Finishing Our Login System: Hello, everyone. And welcome back to this episode off our flask website tutorial series. We're gonna be working on the actual logging system and getting that toe work. Hopefully by the end of this episode, it probably it might be a long one. Because of that, we've got a lot to get through. So the first thing we're gonna do is we're gonna use another library, likely used the library for interacting with a database. We're gonna use another flask library for managing our log in systems and sessions, which makes it a lot easier. So to do that, we're gonna head over 12 programmed up I file and up the top here. We're going to add some new imports from this new library. So we say from flask underscore. Log in and we're going to import log in manager, making sure that that's a capital M and l. So this will allow us to actually create our flask long in system and use it without app. So the first thing we're gonna do is we're gonna create a variable much like with DB variable. We're gonna create a log in variable, and that's gonna be equal Teoh new instance of logging manager officers. Doing that without equal sign and make should put the brackets on the end there. Eso The next thing we need to do is specify at what is going to be a log in page eso drew this. We just say log in dot logging underscore view equals And for us it's if we head over to our root file that will see its roots dot log in is the foul we're looking for here because this is elegant page eso we'll set it equal to roots dot logging. And that should be or we need at the next thing we're gonna do is we need to initialize the log in tow underneath this db dot Any m scrap we need to log in dotnet underscore out and of course, passing, you know, up there. And we also will need a secret key for different libraries. Will use this to encrypt things, and for us, it's gonna be used when encrypting the password. As so you really want to make sure this is unique random number and that you don't tell anyone about it. If you were going to use this in a production environment as so for to set this week to say app dot secret honest, okay, equals and I'm going to say a very a very secret. Okay, that nobody will guess. But of course, you're replacing this with a random string of some kind with lots of different characters and that kind of thing, because it is extremely important when maintained security off the accounts. So that's it for this program. Uh, file. Ah, we're gonna jump into our roots file again here, and we're gonna start setting up some of this back end system using our Loggins and to do that way are going to use this another library called flask forms at, which allows us to easily check that the user is imported. The information we want in our form. So do that. We're gonna use it without long in and register forms, and we're gonna create a new far file here called forms. Stop. I s O. Making sure that you remember the name of that. And it's the same. And in this forms of pipa, we're going to import this flask forms library. So we say Flom from flask. If I spell it right flask, underscore W t F import flask form, and then we can just go down here and start writing this form. So the 1st 1 we're gonna do is our log in form so we can say class log in form and in brackets here, it needs to be a type fast film. And here is where we specify the different things that we're gonna put in. Now, this, um the first thing we're gonna say is the user name. We're gonna set that equal to a string field. So capital s and F and we do too. Brackets here. Now, this variable here it used name. If we hop into our log in Haiti Male page that needs to be the exact same is the I. D and the name of your elements. And make sure that used a matches and the same with password when we do that. Otherwise, you will have issues where it's not recognizing those forms of submitted and that kind of thing and the same we do submit button that needs to be named submit. Okay, so this use name inside this drink filled the label we're gonna give. It is just using name, and we're going to give it some validators as to the ventilator for this use name Field is we're going to say Validators fell. It data's equals an empty list. And inside this list, we're gonna put data required at two bracket E. Now, you see, we got a whole bunch of underlines at that because we need to import a few of these things so we can say from WTI forms import Stringfield and whilst where at it will import the other fields. We're gonna need a password field, boolean field and submit field. And the other thing we're going to say is from wt forms dot validators import data required validation error e mail equal to and length eso There's all gonna be used as we progress. So now you see, we don't have any red lines anymore because we have imported all the things we were quite Ah, the other thing we need in this log inform is a password. And that's just gonna be equal to a password field. Giving the label of password and the validators for this one is going to be the same so daughter required. And what this will do is a little check If the string is empty and other n If it is, then it'll returning era If you want actually set the error, it will print. You can say in this daughter of quite he gets a message equals and then a string and you could say something like, uh, no password I was given. And we can eventually output this to the users so that they know what was wrong. And we can do the same thing here for the use name so we can say no use. The name was given, and the last thing we need with this form is there Submit fund that's equal to a submit filled with the label just being signing or log in or something like that. It doesn't really matter because we're using our own labels with trip on and will also do the register for marks around it. So it was a class register form. This is of type flask form, and the things we need in here is his name, um, and password. So we can actually just copy these three things here for now, So use names right underneath issues name. We want to do email e mails equal to a string field and the label for this gonna email. And for this one, we say validated equals at data required. And we can do it. Come in here. And we say it needs to be of type email, and that will automatically do that for you. And both these can you can give the cost a message. Chicken. So here you have no enter Neymar and Vicky and say the email address you entered was not valid or something like that. So that isn't too difficult as we have the password here, which works, And underneath this, we need to also have room for password to which is where they re type it. So he's a password to equals password field. And for this label would to say repeat password. And the validators for this one is going to be equal to a daughter or quite s. So, of course we need to import something here, and we do a common and we can say equal to, and we need a pass in the variable name here. So that's password. So it needs to be equal to at this field. So that's nice and simple to do and isn't too difficult. And then we have our submit here, and we can just rename that label to be register or something along those lines. It's much easier. And we will do, Ah, some other validation in here in a minute at once. We move over to our models here and we need to actually create a table which is gonna hold our accounts in, um, the database as to do that, we're gonna need it. Import a few things as so. The first thing we need to import is from a flask. Underscore logging, import, user mixing. So what this is, is it's like our db dot model here and has a few properties that accounts require in order to be used with flash looking as truce, we'll create our new table. So class account is what we'll call it, and it needs to have the properties of user mixing. And so we use our common here, and it's a DVD dot model, so that should work perfectly fine. Now it's gonna have a few different properties here. The 1st 1 being an I d. Much like this. So we can make you just copy this idea goes prime Mickey. True the next thing is gonna need It is a user name which is gonna be equal to DB Column. And inside here we're gonna say db dot string and we can actually give it a length. So we're going to say 100 characters is the maximum for the using it, and we'll say Nahla ble equals false. They have to have used the name. We can also say email it was davey column db dot string in for an email. We can will give it a max characters of 120 and, of course, setting novel to fall. So they're knowable, equal false means It just can't be equal. Nothing. I just misspelled using mix in here as well. That's what's yelling at me, okay? And the last thing we need is a password hash, and I'll explain how this works in a minute. So this password hash variable is equally db DOT column, and it's gonna be of type string and a max of 128 characters that needs to be 128. Otherwise, you have issues. That, and we could just say indelible equals. True, because they can in some cases not have a password hash because we need to set it after we've created the account and we will. Each account needs to have lists. Eso we all have will link this to do list like we did with the relationship for the true items. Every account can have multiple to do lists, so we'll give it a variable of lists. And that's gonna be eagle two db dot relationship. And we need to specify the class name, which is to do list, and we set the back reference equal to owner. So what this means is, we could say to do is start owner, and that would return us this account model much like how he can say to do item at dot list would give us the list. That sensor. It's just a helpful features add and lazy equals dynamic. We're not worrying about what that does it the moment. Okay, so a password hash. Using that secret key we put into our program for every password get encrypted with a random, um, set of values and that kind of thing, which means that we can't actually read it as a human ends. It's stored in the database donors the actual password, but is the hash or as the encrypted at Kay used to access it. So you require the actual password and the K plus out Secret que in order to check that what? The user and industry. And it's a really secure way of dealing and storing passwords because if, for example, our, um, database got broken into and all the password hashes relate that they would have to have the secret que and the original password to be out of work out those hashes because every entry has a different unique hash. So it's very difficult to trace, and it's quiet, secure. So, um, that's why you need to ensure that this Secret K is also, um, probably set. And we're gonna credit to some functions inside of this model account here. We're gonna create a defined a function called set password, and that's gonna take in itself, which we need to do because it's a function inside a class so we can access it, and it's also going to be given a password to set it to. Now, Um, we need to import one more thing here. So at the top, we say, from and then work, sir dot Security. So that's the name of the flask. Author is work. So So you say works dot security, import, generate password hash and checked password hash. So inside this set password method at what we're gonna type is self dot password hash so that that self is just used access. This incidence of the class ah is equal to generate password hash and will pass in the password so that will actually set the hash for us. And then we can define another function called check password, uh, self self and the password we're checking against. And then we can say if self password hash is not equal and none, because if it's being set essentially at will return check, password, hash of week, passing the password hash and the password we're trying to check against. If it is none, we would just return false, because it's obviously not gonna be correct if we don't even have a password set. So that's all we need to do for this model section. Eso. Now we'll move over to our routes and actually start writing at the code to interact between our forms and our models. One other thing we will have to do is never get over to our database and delete all of our tables which, because we've modified the way the models will work. But we'll do that in a minute at servicing first over, in our register page in ah, we need to do a few things. Festival. We need to put a calmer up here. What? We're defining the root and say methods with a cap with an s so plural there equals a list with two things in it, we need to say get all in capitals as well as post all in capitals making sure to put their common between them. Otherwise you'll get errors. Essentially, what this means is we can use get requests and post requests. Get weeks kind of Explain this when using JavaScript before I get is for retrieving information from page. So that's what at your browser performs whenever it goes to a euro and post is used for sending information to a server or two or page eso where essentially saying OK, this register page can accept get requests and post requests on. We're gonna actually have to do the same thing for this long in page because when a form is submitted, it tries to send information to the girl. And if we don't say we're accepting Post requests, that will give us an era which we don't want s Oh, that's what that does Now there's a few things that flask allows us to do. We have access to this current user variable, which is extremely helpful. But to do that, we actually have to import it from flats logging. So up the top here, we can say from flask, underscore logging important current user Emma Lawson et import. Our function, called Long in Newser for later on, which is nice and easy, as in this register method at what we can say is if current user dot is underscore, Authenticated indicated Return a redirect for the U. R L for roots dot show list so that what this says is okay, If someone goes the register page and they're logged in, we will just send them to their lists page because we don't want people to register accounts if they're already locked in on, there's no reason to allow that. Otherwise, what will say is form equals register form. So this is creating a copy of that formally defining models on. We actually have to import that. So again, say, from at forms import register form as well as the log inform we created eso this ah hit. Create a copy of one of those forms of blank copy and then we can say if formed, don't validate on submit. Then we can just, uh, someone is trying to register. I can't. So what this is saying is, ah, when we use the post, request it automatically. Ah, search through that post request and fill out the information If we've got it and then this form validate onto Mitt will go through each of these different parts and check that the validators are right and that everything the doctors have been given and then it's the right type, for example, his email and that both the passwords of the same eso whilst we did check this on the browser side as well, using our HTML and JavaScript. We're also checking it on the service site at to be extra safe and sure that it is what we want to be given on that people aren't trying to put in wrong information on that kind of thing. And we won't get any hours later on because of that, as if they tried to submit a form. We can say user equals a new a new account. And the name is going to be called a form. Don't use the name dot Donna. So to get any of the information in the form you just say formed dot Whatever the field is , Doc Donna and we can all say email equals form dot email dot darla and you can see it selling it. It's about account here that's comes from our models. We haven't actually imported it. So it would just add that up here that way, important account from my models funnier. And it's no longer young of this. And then what we can say is we can fill in the rest of the information. So it s a user dot set password that so calling that function again. And the fastweb we're gonna put in here is formed a passport data that you can use password to It doesn't matter because they both the same Ah, and then we can say, um, db dot session don't add user. So this adds this account to the database and then we say, db dot session don't commit, which will send all of our changes to the database and update ensure everything is right in that kind of thing. And then we're gonna use a new method here called Flash On. And we need to import this from flashed up here where you have Jason if I how we just had a comma and take flash. And now what we're gonna do is flash is gonna be how we're going to show any notifications to the user. Ah, and we just simply say flash m will say something along the lines of successfully created your account. And what's it going to do a common here and say success? Because we're gonna be using bootstrap special colors for this? So success means green Or there's primary, which blew danger, which is red warning, which is yellow dark, which is black light, which is white. Doesn't really matter. But the main ones who uses success and danger and occasionally warning or primary. And once we've loved them in, I would just say returner, redirect. Sorry. Not look them in. Once we've created their account will return of redirect to Ah, the at roots don't log in page so that they can actually log in there. Otherwise, if they haven't submitted a form, what we can say its four h ah problem in form, toe errors, flash formed or errors problem at dash zero and it's gonna be a red, so we'll put danger there. So what this is saying is for each when it tries to validate the form, if there is an error without messages here, it will tell us what the problem is, and we can loop through each of these errors and we will print a notification to the user with whatever the error messages, and it's gonna be red for danger. And then we'll simply just render this register page. And we also need to make sure we pass in at whatever form is because we need to add one more line to a register page, actually, which I forgot to put in last time. Eso up the top here underneath this form attribute we need to say form dot hidden underscored tag s So what this does is it generates a special random number automatically is part of last forms and it stops cross site scripting. So what that means is that someone could embed your page into their website or that kind of thing. And this will stop that from working, which is really helpful because it's often used by a lot of, um, social engineering and trying to trick people and that kind of thing into thinking it's your website when it's not. So that's one of these ways that we stop that from happening. So what we should actually find is that if we restart the page here, we hopefully might actually be out of register. How accounts if it works, probably at one thing we've got to do is heading over to a database, see if I hit Browse. Ah, and we go to our database table databases. Jack Flash project. You can see my other ones there. I'm just going to select all these were selected. We will drop them, Which just means delete eso once was deleted them. You then just simply have to restart it on and you see, we're getting error saying installing email validator for email validation support. So we just have to head over to our packages here. It's an email dash fallow data. And the 1st 1 here, we just hit the plus and repel. It will automatically install it for us. Nice and simple and just hit Start and hopefully we should see that it all works properly. And I'm sure that once we get its registration page, we're not gonna get narrow her like we did. Okay? Missing use a loader or quests? Load of love. I OK, so one more thing that flashed logging needs is a way to get the figure out. What? Ah, model. The user is linked to eso. From this, we just we need to import our log in variable. We made in our program this Logan variable here as up here when we say from program import db weaken just Atacama and say log in as well. And then we simply need to say at log in, don't use our underscore loader, and we'll do define a function needs called load account on. We're passing the idea here. So each of the way flat slogan works is each user gets given her unique i d. And with this current news available, we can actually make that be set to our model of whatever the user is looking as though we're gonna do that. So we simply just say at return account Don't query at dog. Get into I did. So what this does? Is it just such the account and returns the one with that i d. And now we should be on a restart it. And hopefully when going to this registration page, it doesn't fresh, which is a good start. Ah, and weaken. Simply typing a user name here and jacket. Jack don't come past. So it could be 123 finding it having 1123456 123456 Regista internal sever. Okay. Where are we yelling at? Could not determine Drink a dish between parent child relationship encounters In our foreign case linking these tables, That's how he fix it. So over in our to do list here, we forgot to add the owner I d table that will value eso. We simply say owner Oh, no, I d equals DV dot column and it's gonna be of type into Joe. And it's a foreign K which is set to account Di di. So essentially I like we did with the to do item where we have the least idea. We just need to have the owner i d which will link it to the account we want. It's refreshing this on what? You'll actually find it if we hit the refresh button losses to submit the form. So we have to ranch or any of that information after hit. Continue here. Hey, it actually looks like it worked. No, we didn't get to see any of our messages to say this has worked and that kind of thing. So we're gonna work on that now. The way we're gonna do this is we're actually gonna use a template like we did for our base so that we can easily add this Hey, html code in python. Go at all of our pages so that we can show notifications on them easily. Eso adding, you follow. He could notified hate email. And inside here, what we're gonna say is we're gonna use a lot of this special syntax. So he said with messages equals, get flashed messages and we can use brackets here Will say we're with under school categories equals true. So that's a lower case T for true there. So what this will do is it calls get flash messages which will turn any of the messages were trying to display when we use that flash function. And then we can say if messages on we need to do and if toe in that and also ending that with statement as well and with okay, and inside this if statement, we will say four h category message common message in messages So that, um, what I was saying is, when we put success ing, that would be the category or danger. And the message is, whatever we specified in that string there so successfully created the account would be one of them. That will also make sure that in that fall up there and inside here, we're gonna print somehow html code. So bootstrap has a nice formatting for alerts and that kind of thing, that so we just do a dip here. We said a class is equal to alert, and then we say, alert dash success. Danger, etcetera. So we just put the category whatever that is. A warning primary, etcetera. And it can be dismissible. So alert dash dismissible. Which means you can close it on, we can say its get when you close It's a fade and it's shown by default. Roll equals alert as so this will automatically put some job script in as well, which will make it look good on the message inside of it. We'll just print here message using those two curly braces, and we also need to have a button that you can close. It s so we just start out button element here type equals button. So we don't want to submit a form or anything accidentally. Ah, and the classes we're gonna give it is close and dotted. Dash dismiss equals alert. So they closed the alert Aria dash label equals close, and we're gonna use a span element here to show on X that you compress as a spin. Our yard dash hidden equals true eso span is like, um, just empty space Kind of thing is how that works and is used for showing text in that kind of thing separately from like wherever the rest of the Davis eso inside this ban that we can put like an X here. If you want to use just the letter x I but hates him actually has a special character for, like, a special X that you can ah will look more like a close button on. And we just display that by saying End times s So what this is doing is it's getting all the messages, checking that we have some looping through them and it's creating a div or just a bit of space. Ah, with whatever the color it is. And it has the message inside of it, plus a button in the top right hand corner, which with this ban has an X that you can press that will close it. And you see what I mean when we actually officially do it and to add it to any of our pages . It's very simple s so we can just go under this container def here and we can say include. And we do, Ah, single quote, sort double quotes there and notify dot html. And I'm actually gonna copy and paste that on the register page and I might actually put it on the shoulders page as well as her. We can put it under him, and I will put it on the view list page because we might as well right under there. And we can simply restart here. And what we should find is if we would acquit register here. We're getting an error. OK, we've misspelled something you notify here. Heavenly, undefined error. Get flash messages is undefined. Okay, get flash. It's supposed to be flashed, not flash messages. So now if we refresh this page, it's working properly on what we could say is, if we want to do another account, we can call this one. Um, Jeff, as the email is gonna be Geoff Geoff dot com apostle. It can just be Jeff. And if we hit register now, you'll see that it hasn't decided to flash message because it doesn't want to. So let's see if we can figure out why that is. Okay, So the issue appears again. One minus tick. We said with message. It was meant to be with messages as to now for restarted. We should find that when we actually register all user. Yes, I will go to this registration page here. I will say this using there could be no, uh, no, no, I don't come. No. Is the password know what is the password? And there we go successfully created your account If you wanted that to be under the title at you to simply move where you're putting that include statement at nice and easy. And you say that this X here are working this presser and it'll actually minimize it for us . Eso now will quickly get this slogan function done eso scrolling down here and we will start doing that now at Sergio's first thing First, we're gonna do a similar thing where we say if current user dot is, uh, north indicated so if our the user is currently locked in, we'll just return a redirect for the euro for, um, roots start to show this As to that, I just read rectum. If they're already logged in because we don't want them Teoh be at Logan again. If they're already locked in, You see what I mean? Then we can say form equals log in form that creating that variable again and then we just check if they tried to Smith so formed up. Validate. Ah, on submit. Making sure to include those brackets after it. Ah, and if they're submitting the log inform we try and get the user so we say, user, it was account, doc. Query filter by and we say use name equals the years name they put in. So we say form Don't use the name Dr Data, and we'll get the 1st 1 just in case there's multiple which there shouldn't be. But anyway ah, and then we say if user is none not user dot check underscore password and then we pass in the password here. So what this is doing is it's actually, um, checking. Okay, if the user name is correct, So if there is no user because they used names wrong or the password, they've entered his wrongs or not. So if we said ah uses a check password if it's right, uh, it would return true. And we want to say only if it's false. We want to flash something along the lines of invalid user name or password, and it's gonna be read so we'll just write danger. Sorry about this. This needs to be formed. A password data. That's where that error is coming from. And we can just simply return a redirect the euro for roots. Start looking at because it supposed request. We want to empty that form again so that I can fix it up. Otherwise we would just look in the user and we need to give them. The user will have any enemies that just that one on. And we can also set something along lines of Remember at what? This To do it. Okay, Been locked in between like closing the browser window using cookies. But obviously you might want a box that says, like, remember me or something along Those aren't if you because it's storing cookies and that kind of thing. So So I remember it was true. Speak easy. First and move. Return a redirect for the girl. Our roots dot shirtless eso. When they log in, they'll be out of you or their lists. It'll take him to that. You are Oh, and what we should find. Hopefully as long as we just part in this form. Very what's hurting for Mikel's form at the restarting? This allows us looking as you see, if we're looking at baby here we have accounts and we have the three that we've created. And now we're gonna remember the passenger. I'm pretty sure the password for no was no, but you can see. There's also this hash here at which is completely random. And you can actually see the password as the owner of the site either. Which is extremely helpful on we could say Use Name is no. And I think the party I was Noah again. Okay. Don't believe that was correct. All we've done something wrong here. Eso we'll just try at that one time, Noah. Noah. It should have given us a error. Saying that he used was not locked in as I was ever gonna regret. Why, that is in a second are quickly one thing we can do to check what the problem is. It is also had this else time in here. And we can just copy from him where we actually print any of the errors with the form which is probably issue. And I bet it's got something to do with the hidden tags that we didn't add so far as to try and signing. But no, uh, no sister of token is missing, right? That's what it was. Eso we just simply underneath Here in the Logan form, we say form dot hidden on score tag on. And then we should be out of restart it. Refresh the page here. I can just refresh without submitting. Okay. User name. No password? No. A internal. Several. That's what we want to say. It's something better there. Okay. Unknown column to do list on already in field list. So, uh, the era we're having here is because when we added that under I d tag here, we didn't actually update the database. So there's two things we could do. We could use my scroll to insert it. Ah, and we might actually just do that just to see what it liked. What it's like eso weaken. Go here. And if we go to the table, Ah, to do list, I believe is the one we're looking for. And we need at owner idea of type into job right here. And it might actually be easier if the database sets it up for us. So we can just actually drop these tables and we'll do it automatically for us. When we refresh the server, we start up, we see it loads properly. Ah, And now if we go to slush register now, cause that account those accounts have been deleted. We'll just quickly registered Nor, again, Noah know dot com. It's remembering things for me. Chrome will automatically remember things that have the same I D, which is extremely helpful. That's wanting me to change your password. But that's right at the user name and password. So you see, it actually did the credit account notification. If you log in here, we see, yes, it's taken us to our to do this page. And that's exactly what we want. In the next episode will be working on making the NAB our shirt like log in and that kind of thing and log out. But for now, the log in functionality is actually working. It's just not displaying it too well. 18. Dynamic Navbar: Hello, everyone and welcome back. So now we're gonna be working on fixing up that you're about to help us understand, Like whether we're locked in on on that kind of thing, s so we're just gonna head over to this basic HTML phone A nice and easy, and we're going to change a few things up s so the first thing we're gonna do is underneath this home. But we only want to view a list button toe work at when they are locked in, because otherwise there's no point they can't view lists of other people, that kind of thing. Eso to fix that. We're just going to say if current user dot is unscored anonymous equals false. So if they are logged in, then we will display that so and then end if below that Now, the other thing winner is outside of this, um, both these gifts, we're gonna actually only underneath outside of this name positive we're gonna add a new diff which has some classes. So the classes were going together is never bar debt collapse and more beautiful justifying dash content. Dash end. This is going to move some of our links to the right hand side of the net. But which is generally where you have the log in, log out parts of it on. We also need another Devyn here with the class and never bar Dash Never, Uh, this is just a bootstrap. Think So, uh, now we'll just simply say, if current user, that is underscore anonymous. Ah, and then else eso if they're not and ending that if statements as well. Okay, So if they aren't loved in, ah, we need to display a link with the never item class as well as the novel in class. And the URL for this one is going to be your on its before at roots dot at log in. That is gonna be to the log in page in closing those curly braces as well on, we'll just type, make sure it displays the text log in, and we will make sure to, um, that should be over need for that section. And we can just copy in paste this link into else here as well. And we're gonna change the text to be Look out and we're going to change the euro to be log out as well. Eso before we run this. When you actually create this log out euro, it's nice and simple. Oh, we need to do is define a route. So we say at roots dot root slash Look out and we'll find a function underneath It called Look out and only need a court is looking out. Underscore user and we need to import it from frost from flask logging. That's well, and we'll just return a redirect to the URL for the log in page, I'd say nice and simple, so we should actually be out of restart. He seven l And if we look in or first page, we should find that we're currently looking. You can tell that by the log out text here. And if we click log out. Uh, we are loved out. You can see that the view list button is no longer bed and ah, the logging buns here, which takes us here and again. We're being back in. We'll show that for us now. One of the issues is that if we were to be looked out and we will never get to slash lists , it shows it to us. So there is some nice handy functions. That flat slogan provides us toe automatically. Make sure that we use is logged in in order to visit page that we just need to import the log in underscored required function from this. And then for any page we want users to be logged in enabled review. So, for example, this list one underneath around, we just say at Logan underscore required on will also add that for the viewing the list as well. So restarting this page should mean that yeah, we get automatically kicked out, says please log in to access his page. That's exactly what we want to heaven. And so that's out logging in ah and never updating force, which is extremely helpful. Now. One of the things we didn't do last time is in our forms. Eso at the moment, Ah, users can enter the same email address or the same user name. Ah, and it could cause issues. So to fix this, we can use custom validation, particularly in this registration form. So what we're gonna do is define a function and this one's called validate school using it now. This has to be, um, validate followed. It has to start with validate, and it has to have the name of the variable. So in this case, it's using them. And we passed himself and the user name that was inputted. And we simply say, User equals account. Don't query, don't filter underscored by use. The name equals user name dot data don't first. And then we say, if user is is not none so that so there's use that already has that user name. We can raise a validation error and we can say something along lines of that user name already taken nice and simple. So you see that we are getting error because we need Teoh Import, um, the account model from models from models import account. And we're also gonna add one more custom validations that would save validate email. And we want to check that there is no accounts with that email already. So it's a user equals account of query. Don't filter underscored by email because email doctor data dot first, if user is not none, raise validation error. That email address is already in use, So what we should find is that going to ensure that we don't have a duplicate use names or emails and you might want to do it for other parts as well. You might also want to do a velvet on school password to check their the password. Strength is good enough. So it's not like password one or something along those lines at which you would do in production to make sure that people have weak passwords. S O, for example, if we try toe, do a new user with the user name? No. And the email nor it noted, Come was that your name is already taken. The email address is already in use, so that shows that that's working properly. Eso That's it for valuing those emails. Ah, and we can now look in probably. Ah, and we can add less and edit them as we see fit. Eso Adam wash dog and everything and saving works properly. Uh, clean dish, clean carpet or something right now, Save and Deb ago, we've got it working at. One more thing we might want to do is just fix this editing up to the moment. It's kind of looks a bit Jackie, uh, so we can fix it so that the same buttons and that kind of thing on the right spots. Ah, and to do that, it's quite simple. So what we need to do is navigate over to our, um, show Ah, you list Hey, ht mofo. And we're going to add some custom CSS, which isn't too difficult. So in this CSS photo at just checking that we're using the view list that success so we can help over here. And what we can do is in this, um, section we can add some margins to the left of the months so you can see that there's not very much space there at the moment. As who can say, Dr Baden Dash primary, which would be the save button primary as well as the bun in danger. So we can use commas to apply CSS to the same, um, elements. And you should find that if we restart the several, both things ah, got some space between him and now this will be more notable when we change the display. The display, um, we're using for certain parts of it, so you can see at the moment we're using in line block for everything, and we're gonna try and change that. So for where we have this editor. Ah, we want to set a displayed actually reflex, which should mean that if we restart the seven angry fresh page that we have the buttons on the right side and you can see that that spacing didn't actually apply. We need to empty the cash and reload. And now we get it. We have the spacing there, which is exactly what we wanted. Said that looks a lot nicer. You might also want to add a margin top s so that we don't end up with this so we can go to the view list here. Ah, and I believe we can probably add a margin top somewhere along the line of the to do list. It was a margin dash top call in 20 pictures should be fine. Important out. We're gonna add that just because if there's something else setting the margin top, we won't over override. That s so that's what the important attribute does. So just emptying that cash there and now we should find that there's a space between him at it. Looks a lot uniter. I think eso wash dog as well. And you can say that the other items I'm gonna interfere too much with them. It gets that and that looks a lot nicer, I think eso you can really customize this however you want. So that's it for this episode, Uh, and you can see me in the next? 19. Main Page & Always Online: Hello, everyone and welcome back. So now we're going to be, Ah, just adding a basic home page, and I'm gonna let you customize it. How have you wish? As But we're just gonna add that route so that when people actually visit the main Earl oversight, they actually can see the home page properly. And we don't just get a era as to do this or we have to say is and routs dot route and we can say slash. And that's when you do for the homepage at def humpy or home probably works fine. I will just return Orender template of home dot html selections quickly create that home female, and I'm just gonna goes to something like the register pay. Just copy it, paste it in and delete everything off this form. Here we can change the name to become and so active page equal to him. And if we raced up, what we should find is that this home button actually does work. Probably, except we need to set the euro in our search bar eso to do this. We just said ted trough here, including your own for and we say roots don't home nice and simple and restarting this should hopefully make that work now. And there you go. We go blank homepage that you can add whatever you want here. I'm not gonna put too much on Abbott. It's up to you to do it. Okay, so now that we've done that, the one of the things I want to cover is how these repels work. So at the moment, repels will automatically switch off after about hours, half on hour to an hour of not being used at. What we can do, however, is use a site to ping it or visit the Web page every 10 minutes or so, which will mean that it automatically stays online 24 7 Now, you I only suggest doing this floor like development, testing and that kind of thing just so you can show friends in that kind of thing. At what will happen is if it does go offline and someone visits the euro, it will try to turn itself on. But there's a few things in this Where, uh, cause you have to rein store the libraries every time the website needs to get turned back on again. Kang sometimes error because it can't find the library in need to manually fix it. Ah, and that's why I keep you on 24 7 can mean that you don't run into the issue. I would only advise it for just so you can link people to check it out in that kind of thing. But no, don't use repellent as a production server for a proper website on that kind of thing. You should use your own dedicated host. Ah, and I don't advise against doing it. So one of the website I particularly enjoy is a timer, but and is meant for checking, like if your websites online and if it has any issues of that kind of thing. Ah, but what I am going to do is repurpose it and you click Add new monitor here, and I'm gonna select emerged hype off http s and we'll get a friendly name of Nathan to Tory. Oh, Siri's and the girl I want to put in here is this one that I visit to view the website. You can get that by clicking this button open in new tab here. And was that the monitoring interval to every five minutes? That's the shortest we could get it. I'll select my email because it requires one and create monitor. And what this will not do is mean that this website is currently available. Ah, and shouldn't go down if does go down might, after a few months on the work that but it shouldn't Ah, which is awesome. Eso You can show your website to your heart's content. Ah, and you can also view it here in the brother as well, which is awesome, as everything should be working on, and you can now customize it as you wish. 20. Project Wrap Up: Hello, everyone, and thank you for finishing this course. I really appreciate it a lot, and I hope you have learnt the basics of flask as well as some hasty male CSS and JavaScript. I know there was a lot in it and it's went very, very quickly. It's a lot to fit in in just a few hours. Ah, and and we really did go very quickly. But it's a good experience and really awesome tour to use, and I have created at many sites with it, and you really can quickly make them and make them responsive and work on mobile devices as well as desktops. And it's a great library to use as well as great for beginners to get used to websites and Web development in that kind of thing, cause usually could be quite scary. The biggest issue, the most difficult thing with it, is, of course, the lots of different languages get him thrown at you and having to use them and figure out everything in the big bad world. But it's all right, and I really appreciate you viewing this course. The hoi through supports me on It's really awesome. Now what you can do. Obviously, there's lots of room for extensions and improvements and that kind of thing, And I would love to see you take this. As so, things you can do is the leading to do lists. At the moment, we don't have weight doing that. It would be very similar to just creating a route for delete and then using DVD dot session dot removed or which just removed it. So you know how when you add it, you do. Db dot session dot I believe we have an example of Here you go give you dot session. Don't add your All you'd have to do is do db dot session. Don't remove n pass in the list, and that would remove it. So just adding that toe a route and then using Ajax. If you want to do that or you could just do, ah, get that euro when you click about it goes that link and deleted for you, which is really simple and easy. Uh, other things we can do is editing. The name is ju list. All you'd have to do is similar to the way this code works away. Click on the items you just do the exact same thing. But for the name, uh, also maybe make it so when you set when you don't have anything in it, save it. Deletes the list item as well. We don't have options for that. That's very easy to do. You just modify that added item route and delete it, and you have to make sure that on the JavaScript side, if you were using Ajax, you have to dilate that element as well. So you can't see other things you can do is you need make home page love to see that, Um, I I want to see what you guys end up doing with it. Maybe even making it so you can share your to do list. That quite thing. That's not too difficult just getting your role and sending it. Ah, but what you can do is really awesome. Is go to get bootstrap dot com, and the documentation for bootstrap is amazing. There's so many different examples, and you could see along the left hand side. Here is all the different utilities and everything. That ad there's lots of different things we haven't even explored that are really awesome. They have loads of examples on here of different pages at using their products and that kind of thing at all free, designed by Twitter. And it's really, really helpful as a framework on that kind of thing. So even there's Jumbotrons, which you could use on your home page had to make it look something like this. It's up to you how you want to do it. You can even have it. So it displays like the most popular lists or something like that. It's up to you, but you can really expand this to whatever you want your site to be. The basics are all the same you have at your database back end you tables and you're querying, searching, adding, removing etcetera. Now I I haven't actually put the page up on school. Shake it. Uh, my currently in the process of doing it, I recorded our first, but what would be awesome is if you did enjoy this course. You can head over to, um, the page, and I want to see what you guys have done. Eso If you head to the Projects and Resources page, you can hit this create project button and what you're allowed to do then is it'll ask you to choose an image you project title and you can link other content. And I want to see links to your repels so that I can visit it and see what you guys have done and give feedback and stuff. Also, if you have any questions or problems throughout you remember you can always visit the get hub page, which has all of the coat. Eso This is taking its time to load. But this get help page, you can go to the different branches and it has all of the different parts on here that will with all the files and having issues. That's awesome. Ah, so I'd love to see a projects here. Other things you can do is if you are interested in more courses like this and want to receive updates, you can view my profile and follow me. Uh, the moment we have a fair few people following me, and it's great, you can check out my other games, of course, is on, and we will be definitely doing a lot more with python in the future. I have some interesting projects plant, and we will see how they end up So again. Thank you for checking out this course. Really? Share your projects. I'd love to see what you do. You can change colors. Sears says everything. Another awesome website is W three schools, which has loads of information on hasty melt. Eso really check those out on Thank you again for watching.