7.4 Fill in website functionality - Video Tutorials & Practice Problems
Video duration:
13m
Play a video:
Video transcript
<v ->Okay, so now that you know a little bit of HTML and CSS,</v> let's look on filling in our website functionality. So this is what our website looks like currently. And I've got some index, I've got some HTML inside of Templates and index.html. So, you can see here we've got inside of our body a div with a class, which we haven't gone over, but I'll do that now. And I've got an h1, an img. Images have a source attribute so you can say where you want, so you can say where to get the image from and then it also has an anchor. I also have style.css here and it's just gonna align things and set the width to format the page. So, in our app.py. Instead of, so I'm gonna change this first of all to just index. Okay. And then, instead of returning just some text, I wanna actually return this html file. So, from flask, I'm gonna import render_template and then in render_template, in the return line, I'm gonna render a template, and I'm gonna, oh yeah, I don't know if I've mentioned this shortcut yet, but if I hold down Command or Control and then click on here, I can go into the file where that code is written and I can look at the documentation. So it takes the name of the template and also some context. So these are the variables that are available from the template. So, it's gonna be called index.html and let's just leave it as that for now. I'll save it. And I'll actually change this. Right now, Debug Mode is off, so I'll stop this, edit the configuration, and then create a new environment variable called FLASK_DEBUG and give that a value of one for true. Press OK, press OK and let's run it again. So now, if I say print hello and then save, I'm saving by pressing Command + S. Then it's going to restart the server, so every time I change this file, I don't have to stop and start the server again so that's great. Let's go back to index, reload, and we have this. So, looking at the HTML here, we've got this title and that's up here. Then we've got this header which has some content and we're going to pass the number in here eventually and it's got an image and it's taking it from this image. This is some special flask stuff to get the URL for a static file with this name, so that's inside of static and it has this file and then we've got a link here. And so I can press this link and it's not found, so let's go back. You can also see that the formatting, the CSS formatting has already been applied and the CSS isn't in here. It's in a different CSS file and we link to it by using this link tag inside of the header. So, same thing as in the image. I'm getting the URL for a static file with the name style.css. So it's inserting it into the HTML page. Or just linking it, actually. Okay, so now we want to be able to pass in a number for how many times it's been clicked. So in app.py, I'm gonna create a new variable and I'm gonna put it outside and it's gonna be called num_clicks. And it's gonna start at zero. So let's print num_clicks, actually, and I'll save this, Command + S, and if I go here and refresh the page, I should see that it tried to access here and then num_clicks is zero. So now I wanna pass it to the template and I can do that by doing this. Num_clicks equals num_clicks so this is a keyword argument with the name num_clicks and I'm passing in this value that's related to this variable. And then inside of index.html, inside of this span, I can use two curly braces and then put num_clicks inside of here and then close it with two more curly braces. So this is the Jinja templating language. It's saying I can use some variables and some data that's passed to me from this server in my HTML file. And it's gonna build the HTML around the context that's been passed to it. And if I refresh this, now I can see that zero is in here. So that's great. Actually, I want to not have this link be the one that you click. I want you to actually click the image so let's change that out a bit, too, first, before we move on. So we can do that by moving this link tag. I'm gonna cut it with Control + X and put it, paste it here outside of this image. So the image is nested within it and then I've gotta close this a tag. So now, we've got a link with an image as its content and this doesn't have a link anymore. It's just inside of header two. So I'm going to refresh. You can see that this is not blue anymore. And that this has a little mouse arrow over it 'cause that's the default mouse pointer for links. And if I click it, then it's trying to go to this click and point, but we haven't filled it out yet. So I can go back. So let's actually fill that out. So go back to app, change this to click, change this to click for consistency, save that, go back, click this, and now it goes to that other page. But I don't actually want it to go to a new page. I want it to to send a request to the server and update this number. So I'm gonna start that process, but in order to finish that process, we're gonna need some JavaScript and jQuery and so we'll finish it in the next lesson. For now, let's just set it up so it's ready to be used. So if you remember, there are different HTTP method types. One is to get information and one is to add or change information. So get in the one to get information and we're gonna actually use POST to say update something on the server. So we can put that inside of our route and say that this accepts only post requests and not get requests. So if I go back to the documentation for flask, I can look down to, oh yeah, here's the stuff about rendering templates which we've already done. Here, HTTP methods. So I can say inside of our route comma methods and say which method that you want to use and then you can have an if statement if you want, if you're accepting multiple methods and you wanna do two different things, depending on the method, you can use the request object that you import from flask, but here we're just going to put POST in and that way, we don't have to check for that. We know that the method is always POST. Method equals POST. Okay, and I actually haven't talked about this yet but this at symbol, at dot route, this is called a decorator and it's a more advanced Python concept. Tutorials will tell you when to use decorators but if you wanna write your own decorators, that's definitely a more advanced tutorial. It mostly adjusts how this function functions. So now we're saying you wanna take a post request. I want to update this num_clicks value. Num_clicks plus equals one and then return num_clicks and that actually has to be inside of a string, so I'll just do a little f string. And now it's giving me an error saying that this reference is unresolved because we're trying to update one like a variable that's defined outside of our function. It's defined here at the very top and that is gonna be called the global variable, so this is a new concept. It's like scopes of what can be accessed where and in order to access and change this global variable instead of just using it like we are in index, I can say that global num_clicks, I'm gonna import the global variable num_clicks and that's the one that I wanna change. So we can't test this yet because we need to make a post request and so in order to do that, we're gonna need to use some JavaScript and I'll show you that in the next lesson.