Redirecting with URL Arguments
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 /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 I'll just type admin like that with an exclamation point, and this means now what's gonna actually happen is when I go to the /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!!". 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!!". 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 to an error here, like nothing's loading up because there's no route for admin/. But once I add this slash here, this will actually allow me to access the page with either a slash after or no slash. Just, you know, an interesting thing in case you guys wanted to know that, in case you're wondering why your thing is not working.
Setting Up the Templates Directory
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_template. Now what this function is gonna allow us to do is actually grab an HTML file and render that as our web page. So right now we've just been rendering inline, you know, HTML where I just write H1... someone noticed that I forgot the /h1 on the tag. There you go, I added it for you 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 Flask 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 Sublime 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 .html. So I'll add .html now.
Rendering Your First HTML Template
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, because 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 that 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 or 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_template. Oops, if I can spell 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.html or index.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 /admin, we're just gonna go to / 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.
Passing Variables to Templates
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, 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, what 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_template function and type content= 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 going to render this index.html file and we're gonna pass it... pass 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 to, 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 /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 test123, we get test123 showing up. And this works just like it did before, in 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 going to call it r because why not? And then what I can do is say r= you know, 2 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 again, so we get test123 and then 2. And obviously that's because we just passed in the value, you know, r=2 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.
Using Control Flow: For Loops and If Statements
So what's actually really nice about this, and you guys are gonna be like, this is pretty cool if you haven't seen this before in 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, percent, and then percent and 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 _ in, in this case we could say range, maybe you know 0, 10. And if I do something like this and then I end my for loop by doing {% endfor %}, 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 zero. 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 and the curly bracket, do whatever you want inside this for loop, and then end the for loop by just doing endfor.
And the same works for if statements. 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, you probably know how to do that already, but from this we can actually just put an if statement and say if x mod 2 == 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 end our if the same way that we ended the for loop, with {% endif %} like so. Now I don't know where that extra curly bracket came from 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 = name and r = 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, one, two, three 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 as actual text and print out the value of x. So let's run this one more time, which is just going to 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.
Looping Through Data and Advanced Control Flow
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. Well to 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, 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 refresh 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'll just show you a few more different examples to make sure that you guys really understand this. We can do, you know, if, elif, 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 == '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 endif like that. So this is kind of a way that you would do, you know, an if-else. You could also add an elif like you might do in regular Python. So you could just go {% 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.
Conclusion and Next Steps
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 do a lot of things. And 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 statements, how we can pass in 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 forms, post, get, HTTP requests, 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.
