WEBVTT 0 00:00.780 --> 00:04.290 So now that we've seen some of the things that we can do with templating and 1 00:04.290 --> 00:08.010 Jinja, I want to talk to you about something called URL building. 2 00:08.910 --> 00:13.910 And this is a way that allows us to direct the user to a specific page in our 3 00:15.830 --> 00:20.540 website and web app. Now, what that means is that for example, 4 00:20.720 --> 00:22.730 on our main homepage, 5 00:23.000 --> 00:26.210 we could actually have a link to the blogs page. 6 00:27.200 --> 00:32.200 The way that we would do that is in our index.html here, we could create a 7 00:34.220 --> 00:38.270 anchor tag, for example, in the body here. And we could say 8 00:38.300 --> 00:39.950 Go to blog. 9 00:40.550 --> 00:43.580 And then for the Href of this anchor tag, 10 00:43.850 --> 00:48.850 this is where we're going to use the Jinja template to build out the href. 11 00:50.630 --> 00:55.630 So we're going to add the curly braces in and dynamically work out the href. And 12 00:57.140 --> 00:58.730 in every Jinja template, 13 00:58.790 --> 01:03.790 we have access to a method called url_for. 14 01:04.460 --> 01:09.080 So we can say url_for, and then because this is Python, 15 01:09.170 --> 01:12.470 we can add some parameters when we call this method. 16 01:13.130 --> 01:18.050 And what it's expecting is the name of a function in your Flask server. 17 01:18.800 --> 01:20.030 So you could, for example, 18 01:20.030 --> 01:24.410 hit up home or guess or blog. 19 01:24.890 --> 01:27.680 And in our case, this blog is what we want. 20 01:27.950 --> 01:29.780 So to make it right a little bit more clear 21 01:29.780 --> 01:33.380 because we've got the route which is called /blog, and we've 22 01:33.380 --> 01:35.810 got the function which is called blog. 23 01:35.990 --> 01:38.450 I'm going to change this to get_blog. 24 01:39.140 --> 01:43.880 So once you render this blog page, we can call this method 25 01:43.910 --> 01:48.680 get_blog by saying URL for, and then passing a string. 26 01:49.130 --> 01:53.120 So because we've got some quotation marks around the outside, 27 01:53.480 --> 01:58.480 we're going to use some single quotes on the inside. And in between a single 28 01:58.520 --> 02:02.120 quotes is the name of that method, get_blog, 29 02:03.980 --> 02:06.140 like this. Now, 30 02:06.140 --> 02:10.250 what it's going to do is it's going to generate a hyperlink 31 02:10.550 --> 02:13.130 that's going to be based on what it takes 32 02:13.130 --> 02:18.130 to get to this particular route and call this particular method. 33 02:18.860 --> 02:23.860 So now if I go ahead and update this and go to my homepage here, 34 02:24.380 --> 02:28.970 you'll see there's a new link that says go to blog. And when I click on it, 35 02:29.150 --> 02:32.330 it takes me to the blog page. Now, 36 02:32.390 --> 02:37.390 another thing that you might want to do is when you navigate to a URL inside 37 02:38.030 --> 02:41.390 your web app, you might want to add in some parameters. 38 02:41.840 --> 02:46.840 You can add parameters when you are using url_for in the same way that you did it 39 02:47.450 --> 02:51.800 when you did render_template. So that you can create the name of the parameter 40 02:52.070 --> 02:53.060 and the value 41 02:53.390 --> 02:57.350 and it is a keyword argument that comes after the first parameter. 42 02:58.160 --> 03:02.230 So here we could say, for example, url_for get_blog, 43 03:02.680 --> 03:06.070 and then we could just say a number equals three. 44 03:07.060 --> 03:10.120 So now when the user clicks on this anchor tag, 45 03:10.450 --> 03:14.860 it's going to look for a method called get_blog on our server.py 46 03:14.860 --> 03:15.940 which is right here, 47 03:16.480 --> 03:21.480 and then it's going to pass over any subsequent keyword arguments as parameters. 48 03:22.180 --> 03:26.440 So we can catch those parameters inside the app route. 49 03:26.590 --> 03:30.460 So we can say / and then we can use our angle brackets 50 03:30.490 --> 03:34.990 which we've always done to give parts of the URL a identifier, 51 03:35.410 --> 03:38.650 and we can call this num or number, whatever you like. 52 03:39.430 --> 03:43.660 And we'll also need to add that to the input to this method 53 03:43.960 --> 03:46.810 and just to prove that it works, I'm going to print it out. 54 03:47.890 --> 03:50.440 So now let's go ahead and rerun our code. 55 03:51.280 --> 03:55.990 And if we go back to our homepage and I click on go to blog and it goes to the 56 03:55.990 --> 04:00.990 blog website and it inserts that three into that part of the URL, 57 04:01.750 --> 04:05.650 and if I take a look in the console, you can see it printed out that number 58 04:06.070 --> 04:10.780 which got passed all the way from the index.html to the server. 59 04:11.320 --> 04:13.720 And finally, inside this method 60 04:13.720 --> 04:18.010 it was caught and it could be printed. And it could also be further propagated 61 04:18.040 --> 04:20.590 into another template if need be. 62 04:22.570 --> 04:25.840 So now that we've done all the theory, in the next lesson, 63 04:25.870 --> 04:30.340 it's time to tackle the final project and we're going to be building out our 64 04:30.350 --> 04:34.300 blog website with styling and also with templating. 65 04:35.080 --> 04:37.900 So for all of that and more, head over to the next lesson.