1 00:00:00,780 --> 00:00:04,290 So now that we've seen some of the things that we can do with templating and 2 00:00:04,290 --> 00:00:08,010 Jinja, I want to talk to you about something called URL building. 3 00:00:08,910 --> 00:00:13,910 And this is a way that allows us to direct the user to a specific page in our 4 00:00:15,830 --> 00:00:20,540 website and web app. Now, what that means is that for example, 5 00:00:20,720 --> 00:00:22,730 on our main homepage, 6 00:00:23,000 --> 00:00:26,210 we could actually have a link to the blogs page. 7 00:00:27,200 --> 00:00:32,200 The way that we would do that is in our index.html here, we could create a 8 00:00:34,220 --> 00:00:38,270 anchor tag, for example, in the body here. And we could say 9 00:00:38,300 --> 00:00:39,950 Go to blog. 10 00:00:40,550 --> 00:00:43,580 And then for the Href of this anchor tag, 11 00:00:43,850 --> 00:00:48,850 this is where we're going to use the Jinja template to build out the href. 12 00:00:50,630 --> 00:00:55,630 So we're going to add the curly braces in and dynamically work out the href. And 13 00:00:57,140 --> 00:00:58,730 in every Jinja template, 14 00:00:58,790 --> 00:01:03,790 we have access to a method called url_for. 15 00:01:04,459 --> 00:01:09,080 So we can say url_for, and then because this is Python, 16 00:01:09,170 --> 00:01:12,470 we can add some parameters when we call this method. 17 00:01:13,130 --> 00:01:18,050 And what it's expecting is the name of a function in your Flask server. 18 00:01:18,800 --> 00:01:20,030 So you could, for example, 19 00:01:20,030 --> 00:01:24,410 hit up home or guess or blog. 20 00:01:24,890 --> 00:01:27,680 And in our case, this blog is what we want. 21 00:01:27,950 --> 00:01:29,780 So to make it right a little bit more clear 22 00:01:29,780 --> 00:01:33,380 because we've got the route which is called /blog, and we've 23 00:01:33,380 --> 00:01:35,810 got the function which is called blog. 24 00:01:35,990 --> 00:01:38,450 I'm going to change this to get_blog. 25 00:01:39,140 --> 00:01:43,880 So once you render this blog page, we can call this method 26 00:01:43,910 --> 00:01:48,680 get_blog by saying URL for, and then passing a string. 27 00:01:49,130 --> 00:01:53,120 So because we've got some quotation marks around the outside, 28 00:01:53,480 --> 00:01:58,480 we're going to use some single quotes on the inside. And in between a single 29 00:01:58,520 --> 00:02:02,120 quotes is the name of that method, get_blog, 30 00:02:03,980 --> 00:02:06,140 like this. Now, 31 00:02:06,140 --> 00:02:10,250 what it's going to do is it's going to generate a hyperlink 32 00:02:10,550 --> 00:02:13,130 that's going to be based on what it takes 33 00:02:13,130 --> 00:02:18,130 to get to this particular route and call this particular method. 34 00:02:18,860 --> 00:02:23,860 So now if I go ahead and update this and go to my homepage here, 35 00:02:24,380 --> 00:02:28,970 you'll see there's a new link that says go to blog. And when I click on it, 36 00:02:29,150 --> 00:02:32,330 it takes me to the blog page. Now, 37 00:02:32,390 --> 00:02:37,390 another thing that you might want to do is when you navigate to a URL inside 38 00:02:38,030 --> 00:02:41,390 your web app, you might want to add in some parameters. 39 00:02:41,840 --> 00:02:46,840 You can add parameters when you are using url_for in the same way that you did it 40 00:02:47,450 --> 00:02:51,800 when you did render_template. So that you can create the name of the parameter 41 00:02:52,070 --> 00:02:53,060 and the value 42 00:02:53,390 --> 00:02:57,350 and it is a keyword argument that comes after the first parameter. 43 00:02:58,160 --> 00:03:02,230 So here we could say, for example, url_for get_blog, 44 00:03:02,680 --> 00:03:06,070 and then we could just say a number equals three. 45 00:03:07,060 --> 00:03:10,120 So now when the user clicks on this anchor tag, 46 00:03:10,450 --> 00:03:14,860 it's going to look for a method called get_blog on our server.py 47 00:03:14,860 --> 00:03:15,940 which is right here, 48 00:03:16,480 --> 00:03:21,480 and then it's going to pass over any subsequent keyword arguments as parameters. 49 00:03:22,180 --> 00:03:26,440 So we can catch those parameters inside the app route. 50 00:03:26,590 --> 00:03:30,460 So we can say / and then we can use our angle brackets 51 00:03:30,490 --> 00:03:34,990 which we've always done to give parts of the URL a identifier, 52 00:03:35,410 --> 00:03:38,650 and we can call this num or number, whatever you like. 53 00:03:39,430 --> 00:03:43,660 And we'll also need to add that to the input to this method 54 00:03:43,960 --> 00:03:46,810 and just to prove that it works, I'm going to print it out. 55 00:03:47,890 --> 00:03:50,440 So now let's go ahead and rerun our code. 56 00:03:51,280 --> 00:03:55,990 And if we go back to our homepage and I click on go to blog and it goes to the 57 00:03:55,990 --> 00:04:00,990 blog website and it inserts that three into that part of the URL, 58 00:04:01,750 --> 00:04:05,650 and if I take a look in the console, you can see it printed out that number 59 00:04:06,070 --> 00:04:10,780 which got passed all the way from the index.html to the server. 60 00:04:11,320 --> 00:04:13,720 And finally, inside this method 61 00:04:13,720 --> 00:04:18,010 it was caught and it could be printed. And it could also be further propagated 62 00:04:18,040 --> 00:04:20,589 into another template if need be. 63 00:04:22,570 --> 00:04:25,840 So now that we've done all the theory, in the next lesson, 64 00:04:25,870 --> 00:04:30,340 it's time to tackle the final project and we're going to be building out our 65 00:04:30,350 --> 00:04:34,300 blog website with styling and also with templating. 66 00:04:35,080 --> 00:04:37,900 So for all of that and more, head over to the next lesson.