Flask Tutorial #2 - HTML Templates

Key Takeaways

hello everyone and welcome back to the second flask tutorial so what we're gonna be doing in this video is actually talking about templates and how we can use our own HTML Javascript CSS all of that with this kind of Python back-end before I get into that though I just want to quickly show you something I forgot in the last video which is how we can redirect to specific functions that take arguments so you might have noticed that you know if I want to redirect say from this admin page to maybe a hello page that maybe says hello admin or something like that when they type slash admin well how can I do that because if I just put in you know user like this well this isn't gonna give me a proper you know path to this user function it's not gonna give me an argument for name and it's not gonna know what to print name for and therefore we're gonna get an error so how can I actually pass through a value for name when I'm redirecting to a specific URL which is what you're gonna actually want to do a lot of times so to do that it's pretty actually it's pretty straightforward you're just gonna type the name of the parameter and then equals and then whatever you want to pass through so in this case all this type admin like that with an exclamation point and this means now what's gonna actually happen is when I go to the slash admin page it's gonna return the URL for user and it's gonna pass through the argument admin which means it will print you know hello admin exclamation point exclamation point so to prove to you that I'm not making this up I will run this let's open up our command prompt or here we go and if I actually go to not test I go to admin then we get hello admin exclamation point exclamation point and you can see in the console here you know we went to admin and then we were redirected to that actual page where we had you know admin exclamation point and that showed that for us okay so that's all for that just want to show you guys quickly that you know you can do that and also another point here just if you are wondering if you could put another slash after the URL like this well this actually allows you to do is access the page by having so let's actually change this now by having a slash afterwards or by having no slash so right now if I put another slash you can see we're actually running in and to an error here like nothing's loading up because there's no route for admin slash but once I add this slash here this will actually allow me to access the page with either slash after or no slash just you know an interesting thing in case you guys want it to know that in case you're wondering why your thing is not working okay so let me just close this for now like that and now let's actually start doing some templates so what I'm gonna do is actually just remove some of this for now and you know we'll just leave the home page because this is gonna be pretty straightforward and I'm gonna import something called render underscore template now what this function is gonna allow us to do is actually grab a DML file and render that as our web page so right now we've just been rendering inline you know HTML where I just write each one someone noticed that I forgot the slash h1 on the tag there you go I add a few guys but anyways how do we do that so what we need to do is start by actually creating an HTML file and we need to put that in a specific directory so here I'm gonna open up my Windows Explorer and you can see this is where I have my two Python files for this specific tutorial for this flask website so what I'm gonna do is just create a new folder and I'm gonna call it templates now it's very important that you name your folder templates and that it's sitting beside or in the same directory as your Python script that's running the website so whatever that Python script is that you're writing that has flasks in it that's what you need so I'm gonna make a folder called templates and just hit enter there and now I'm gonna create a new HTML file I can call it whatever I want and I'm gonna put it inside of that folder so to do that from subline at least here I'm just gonna save a new file I'm gonna go inside templates and I'm just gonna call mine index.html which usually stands for you know the first HTML file we're gonna use the home page whatever it is but you can call this whatever you want but make sure you have dot HTML so why add dot HTML now and now I'm just gonna create a very basic HTML file I'll go through this kind of quickly I'm not really gonna explain what you know how HTML works cuz it's a fairly basic language and then we will actually just render that template and then see what this looks like so for the head I'll just add you know a basic title tag here it just says home page like this and then for my body so let's body tags like this what I'll do is just add a paragraph tag that just says you know hello and then we'll add a h1 tag here that just says home page or something like that okay wonderful so this is my basic HTML file you know I could add this doctype HTML because some people like to do that I honestly don't know if this makes a difference not when I do this but you know we'll add doctype HTML okay so now we have our index.html file so how can we actually render this HTML file that I've just created and show that well to do that is very easy all we're gonna do is return from this home function render oops if I get Sibel render correctly and then here we're just gonna put the name of that HTML file so in this case it's gonna be home dot HTML or index dot HTML whatever I called it so let's do that and now if I run this we can actually load that file so let me show you let's rerun this here give this a second go back instead of going to slash admin we're just gonna go to slash for the home page and you can see that now we actually get that HTML that we've created and we have home page hello showing up on the screen wonderful awesome that's how you render HTML templates but now I'm going to show you a lot more cool things that we can do with this that actually make it pretty useful so first of all what if I want to show you know dynamic information on the screen so like I had before if I add for example and say a name tag here to the home page let's do that and I want to display the user's name on the home page how do I go about doing that well what I can actually do is pass information from here the back end of flask to the front end in my HTML template now the way that I do that is inside my HTML template I can use a few different kind of expressions or statements that just work with flask now the first one is by doing two sets of curly braces like this now whenever I do this but this is actually gonna allow me to do is type any variable or any information that's gonna be passed into this template so for example I could type something like content now I know this kind of seems like random like what is this it doesn't make sense I'm gonna show you guys in a second but when I define content inside this HTML template like this what I can actually do to pass a value that will replace content is go in here to my render HTML function and type content equals and then in this case whatever I want to show up so here maybe I want it to be the name that the user typed in here so what's essentially happening is we're render this index dot HTML file and we're gonna pass it past the variable content the you know value of name so what's gonna happen is this content will be replaced with whatever name that we had passed in there and then it's actually gonna show us the name so let me show you this too you know prove that I'm not making this up so let's run this and let's go now you know slash home hmm what was the issue here all right so I realized that I didn't save that file so I'm just gonna rerun this and show this to you guys one more time because this should actually be working so you can see I have slash test up here and when I do that we get home page and then it shows test now you know if I do something like test one two three we get test one two three showing up and this works just like it did before and that we get the argument passed through the parameter but now we're just gonna pass it one more time into this HTML template now we can also pass multiple values as well so you know if we go P and we'll add another P tag and now instead of content maybe we'll just do like you know actually let's not call it random I'm just gonna call it R because why not and then what I can do is say R equals you know to something like that and now if I rerun this we should get the same thing working so apparently I keep forgetting to save my files but anyways I just reran it and now it's working against we get test one two three and then two and obviously that's because we just passed in the value you know R equals two in here now you might be asking the question well what if I want to pass you know a ton of different values I don't have variable names I want to pass a list I want to do something like that I'm gonna show you exactly how we can do that now so what's actually really nice about this and you guys gonna be like this is pretty cool if you haven't seen this before and Django is inside these templates we can actually write Python code and we can do that using what we call the I think it's like the expression statement or something like that I don't know what the actual name of it is but essentially by doing a curly brace % and then % in a closing curly bracket we can actually write like somewhat native Python code within our HTML to do specific things so for example I can actually write a for loop in here I could do you know for underscore in in this case we could say range and maybe you know 0 10 and if I do something like this and then I end by for loop by doing % % and for this is just kind of the basic syntax of it inside here I could actually put some h2 I could do P and I could just say you know hello 10 times if I wanted to do that so actually let's just make range 10 we don't need that 0 but this is kind of how this works whenever you want to declare an expression what you can do is use this percent sign and then write some Python code close it with the percent sign in the curly bracket do whatever you want inside this for loop and then end the for that by just doing end for and the same works for if statement so maybe we change this to actually be a variable X and we only want to print you know hello or X if it's an even number well to do that we probably know how to do that already but from this we can actually just put an if statement and say if X mod 2 equals equals 1 so I guess that's actually gonna give it to us only if it's odd then what we'll do is just print X like that and then we can simply and our if the same way that we ended the for loop wedged in and if like so now I don't know where that extra curly bracket came for but there we go this is completely valid and we're able to do this and I'll show you this actually working right now so let's go and actually get rid of content equals name and R equals 2 because we don't need that anymore let's rerun this let's make sure that I've saved both these files and let's see what we get so refresh and now you can see we get X X X X X and the reason we get X X X X rather than getting you know 1 2 3 or whatever those numbers are is because I didn't put this inside of a statement so what I was doing there was just printing out the value X but if I want to actually print out the variable X I can put it inside these double curly braces like this and now this is going to interpret this as a variable rather than an actual text and print out the value of x so let's run this one more time which is just gonna entail re running this server so load this up and now we get 1 3 5 7 9 and that's really cool it's really awesome and this kind of dynamic way of displaying things and being able to write code inside of your HTML file really makes things a lot easier and much more simple now I'll show you a few more examples just to make sure that everyone kind of gets the hang of this because there is a few different things that you can do here so let's say I actually want to pass in for example a list to my index and maybe I want to just show all of the elements of that list will the do that is pretty basic I could do something like you know content we'll call that our variable equals maybe we have a list of names or something like that we'll just say it Tim Joe bill my go-to names and then here what I can do now you just get rid of some of the stuff in the for loop change this to say for X in in this case content just like we would do in regular Python code and then inside this expression I'll just put some P tags so that we get these you know showing up on different lines I'll just put X now what this is going to do is loop through all the elements in content and simply print that out to the screen for us so let's show how this works if we restart and fresh this and now we get Tim Joe and Bill and those names are showing up in the HTML file for us so this actually allows you to kind of you know avoid having to do some really complicated things to get some functionality like this and this is really nice and will save you a lot of time now I just show you a few more different examples to make sure that you guys really understand this we can do you know if elif's else it's kind of something where you're just going to experiment with it and you're gonna see how this works but I can say you know if x equals equals Tim then I could do something here and I can also add for example an else statement like this and then at the very end after the if and after the else I'm gonna end my if statement by just going and if like that so this is kind of a way that you would do you know an if-else you could also add an L if like you might do in regular Python so you could just go percent percent Elif and then do whatever your condition is here and this would work fine and you only end the if statement at the end of the entire block hopefully that makes sense so I will say that in this kind of templating language where you can write this code you can't do necessarily everything that you can usually do in Python code but you can't do a lot of things in the majority of the time what you're gonna be doing is just referencing a specific variable or you're just gonna be printing things you know using a for loop or looping through something like that so that is kind of how this templating works I mean I guess I could put this back we'll get rid of these if statements here and that's really all I have to show you guys in this specific video how we can actually render HTML templates how we can mess with them with for loops and if loops how we can pass in from variables and then how we can redirect to pages using arguments you know that might come in our function like that so in the future videos what I'm gonna be doing is showing you guys some stuff with forums post gets HTP TTP requests I'm just kind of getting you with the basics here so you understand you know how you can actually build the website and then we get into some more specific and detailed things later on so as always if you guys enjoyed the video make sure you leave a like and hit the subscribe button for more videos like this