1 00:00:05,290 --> 00:00:09,820 Welcome back in this lecture we're going to talk about your own links with templates. 2 00:00:10,930 --> 00:00:16,600 Flast comes from a very convenient your URL for help function or helper function that allows us to easily 3 00:00:16,600 --> 00:00:20,640 connect other template pages or files within our templates so far. 4 00:00:20,640 --> 00:00:26,110 If we wanted to actually connect one HDMI file to another we would have had to have hard coded in that 5 00:00:26,110 --> 00:00:30,040 path to the html file instead of the URL for function. 6 00:00:30,070 --> 00:00:34,160 We're going to be able to easily just pass in the string name of that view and connect it. 7 00:00:34,360 --> 00:00:38,710 Let's see how this works with both HTL templates as well as static files. 8 00:00:38,710 --> 00:00:40,310 Let's head over to our text editor. 9 00:00:40,570 --> 00:00:45,580 All right here we have opened the Web site we worked on last time we were talking about template inheritance 10 00:00:45,960 --> 00:00:53,220 we remember back at the actual base studies team l file if we take a look at it it had a ref anchor 11 00:00:53,240 --> 00:00:59,140 tag which right now just has a empty hash tag there basically meaning it's actually going to link to 12 00:00:59,140 --> 00:00:59,900 anything. 13 00:01:00,060 --> 00:01:08,920 All we can do is inside of this we set up two sets of curly braces and then use the function Yoro underscore 14 00:01:09,270 --> 00:01:15,970 for and then imprint sees what you do is you actually pass in the view name that you want to link to. 15 00:01:15,970 --> 00:01:20,590 So you come back here to basic that pie or and every happened to be calling your application that PI 16 00:01:20,590 --> 00:01:21,370 file. 17 00:01:21,370 --> 00:01:25,270 And you notice here we have function names index up name. 18 00:01:25,270 --> 00:01:31,530 What you do is you choose one of these functions such as index and then you come back here and say x 19 00:01:31,540 --> 00:01:32,250 4. 20 00:01:32,480 --> 00:01:35,610 And as the string here you pass an index save. 21 00:01:35,830 --> 00:01:42,240 And what that's going to do is now that is your link in this anchor tag and you can do a similar thing 22 00:01:42,570 --> 00:01:46,590 using your L4 wherever you are able to pass that link in. 23 00:01:46,590 --> 00:01:47,580 H tim L. 24 00:01:47,760 --> 00:01:51,970 So we're going to do now is run our file. 25 00:01:51,990 --> 00:01:55,620 Let's head over to the browser or just bring the browser in. 26 00:01:55,620 --> 00:01:58,680 So right now I have puppies rock. 27 00:01:58,680 --> 00:01:59,810 This is the home page. 28 00:01:59,940 --> 00:02:06,380 If I go to like we did last time forward slash puppie slash rufous it says this is the page for rufous. 29 00:02:06,390 --> 00:02:10,860 Now last time if I click puppies rock nothing would happen but this time I'm on another page and if 30 00:02:10,860 --> 00:02:14,510 I click puppies rock it takes me back to the home page. 31 00:02:14,550 --> 00:02:16,710 All right so it looks like that worked. 32 00:02:16,710 --> 00:02:23,620 Notice again the syntax is just if we zoom in here is your URL underscore for then you're going to pass 33 00:02:23,620 --> 00:02:25,100 in the name of the view function. 34 00:02:25,140 --> 00:02:26,190 You want to connect to. 35 00:02:26,440 --> 00:02:30,860 And then what's going to happen is automatically Jinja is going to say OK you want the URL for index. 36 00:02:31,000 --> 00:02:36,610 I'm going to go over to your flossed file figure out where indexes and then render that template for 37 00:02:36,610 --> 00:02:37,120 it. 38 00:02:37,120 --> 00:02:40,120 Or just do whatever the index function actually does. 39 00:02:40,120 --> 00:02:40,470 OK. 40 00:02:40,690 --> 00:02:43,030 So that's how we can link to another template. 41 00:02:43,180 --> 00:02:46,170 Let's not show you how we could link to a static file. 42 00:02:46,660 --> 00:02:47,840 As a quick reminder. 43 00:02:48,210 --> 00:02:52,930 I have another folder called static right above my templates folder and inside it that I have this nice 44 00:02:52,930 --> 00:02:57,380 Papy underscore picked up peg what I going to do is now show you how you can use that. 45 00:02:57,460 --> 00:03:04,020 Underscore for help function in order to actually link a static file such as the picture of this puppy. 46 00:03:04,150 --> 00:03:09,590 We're going to do is let's go ahead and our puppy thought age Tim L file. 47 00:03:09,620 --> 00:03:12,040 Right now we're just saying this is the page. 48 00:03:12,050 --> 00:03:20,490 Let's add an encrypted that's going to reference that actual picture. 49 00:03:20,500 --> 00:03:28,710 It's sort of say ref and again another little braces and we say your all four. 50 00:03:29,140 --> 00:03:34,960 And then if you want to pasan a link for a file and set up a template what you do is you passen as a 51 00:03:34,960 --> 00:03:38,890 stream the name of the actual folder that it's located in. 52 00:03:38,950 --> 00:03:40,780 In most cases this will be static. 53 00:03:40,930 --> 00:03:44,400 If it's a video or something you probably have it in a folder called media. 54 00:03:44,520 --> 00:03:46,410 The free now we're just dealing of static files. 55 00:03:46,540 --> 00:03:47,510 So I'll say it's static. 56 00:03:47,680 --> 00:03:51,090 And then the second parameter pass in here is called file name. 57 00:03:51,310 --> 00:03:53,890 And here you can pass in the name of the file. 58 00:03:53,980 --> 00:03:55,840 In our case is called Puppy underscore. 59 00:03:55,840 --> 00:03:58,110 Pick that up. 60 00:03:58,540 --> 00:04:01,990 And then let's add in some text here so we can link it we'll just say here. 61 00:04:02,140 --> 00:04:07,150 So then when a user clicks on here they should be able to see then the link to that puppy pic underneath 62 00:04:07,150 --> 00:04:08,770 the static folder. 63 00:04:08,770 --> 00:04:17,140 So let's go ahead and start our script non-basic the pie will bring in over our browser to the puppy 64 00:04:17,140 --> 00:04:19,470 page. 65 00:04:19,750 --> 00:04:20,370 Here we have it. 66 00:04:20,380 --> 00:04:25,600 And so when I click here I now get to see I'm really zoomed in right now but this cute picture of the 67 00:04:25,600 --> 00:04:26,360 pup. 68 00:04:26,500 --> 00:04:26,880 OK. 69 00:04:26,920 --> 00:04:31,780 And that's the main use cases for that you are L4 are going to be having a lot more practice with it 70 00:04:31,900 --> 00:04:33,370 as our projects get larger. 71 00:04:33,430 --> 00:04:38,530 It's going to be a really convenient one as a way to connect to your static files in another as a way 72 00:04:38,530 --> 00:04:41,130 to link to your other views. 73 00:04:41,230 --> 00:04:43,770 So this is the main way we're going to be using it for. 74 00:04:43,940 --> 00:04:45,840 And in the name of that view function. 75 00:04:45,850 --> 00:04:47,410 Thanks and we'll see at the next lecture.