1 00:00:00,600 --> 00:00:04,240 OK in this lecture I'll continue working on the website. 2 00:00:04,620 --> 00:00:11,390 Specifically I'll be adding a navigatin menu so that the user can easily navigate through the pages. 3 00:00:11,610 --> 00:00:15,370 Let me illustrate the idea first. 4 00:00:15,450 --> 00:00:21,760 First I would like to execute what we have so far so Python script1. 5 00:00:22,800 --> 00:00:24,820 So the application is running. 6 00:00:25,450 --> 00:00:33,520 And you could go to your browser local host the default port is 5000 and this is the Web site. 7 00:00:33,530 --> 00:00:33,890 8 00:00:34,140 --> 00:00:40,940 And we also have two pages. About page. Good. So about page and home page. 9 00:00:40,950 --> 00:00:46,240 Now what I'll be building in this lecture is this thing here. 10 00:00:46,380 --> 00:00:48,270 I have a screen shot. 11 00:00:48,990 --> 00:00:53,100 So the home page and the about page, home page and the about page. 12 00:00:53,100 --> 00:01:02,010 So what we have is a navigation menu here which if you click one of these text here you go to the specific 13 00:01:02,010 --> 00:01:02,830 page. 14 00:01:03,210 --> 00:01:10,650 And we also have a heading and something you should notice now which is important to know this is that 15 00:01:11,100 --> 00:01:11,880 this part 16 00:01:11,880 --> 00:01:16,020 here is the same in both pages. 17 00:01:16,050 --> 00:01:21,720 That means we will add to this part here, the code of this part in each HTML page. 18 00:01:21,780 --> 00:01:22,950 How does that sound. 19 00:01:23,220 --> 00:01:26,400 Well it doesn't sound very smart to me. 20 00:01:26,400 --> 00:01:33,810 A smarter way to do this would be to actually create a separate HTML page for this part here and then 21 00:01:33,810 --> 00:01:38,240 link the about page and the home page to this page. 22 00:01:38,280 --> 00:01:40,730 So that's what we'll be doing in this lecture. 23 00:01:40,770 --> 00:01:48,210 So we need to have the HTML code for this header and the navigation menu and I already have that 24 00:01:48,240 --> 00:01:49,240 code. 25 00:01:50,040 --> 00:01:55,600 So I'll not go and type down all the HTML code. 26 00:01:57,150 --> 00:02:02,140 Here, alright but I'll explain to you what the HTML does. 27 00:02:02,400 --> 00:02:07,910 So first of all I'd like to actually double click this and just show it locally. 28 00:02:07,950 --> 00:02:10,470 So we are not running this on a server. 29 00:02:10,560 --> 00:02:12,510 Just double click it. 30 00:02:12,540 --> 00:02:19,020 So we have the header here in the navigation menu which if you click you don't go anywhere because we 31 00:02:19,020 --> 00:02:24,230 haven't yet linked the layout at the HTML page with the about 32 00:02:24,250 --> 00:02:33,120 and the home page and as you can see I put these inside the templates folder so every HTML page 33 00:02:33,120 --> 00:02:34,820 goes through the template folder. 34 00:02:35,070 --> 00:02:42,390 So what we have here is we have the document declaration and we have the HTML tags there closing here. 35 00:02:42,390 --> 00:02:50,610 Then we have a header element and this contains a div here and we will be using this class name 36 00:02:50,610 --> 00:02:54,130 later to refer from CSS code. 37 00:02:54,300 --> 00:03:00,840 Then we have a function here we say URL four and what this does is that this will trigger the 38 00:03:00,840 --> 00:03:05,370 home function, the Python function which we have here. 39 00:03:05,430 --> 00:03:11,550 So this one here. This function will be triggered when the home link will be clicked by the user. 40 00:03:11,560 --> 00:03:12,140 41 00:03:12,690 --> 00:03:14,800 So this one here. 42 00:03:15,150 --> 00:03:17,290 And so the same for the about. 43 00:03:17,310 --> 00:03:24,390 So when an user clicks about the Python function will be executed and the about.html file will 44 00:03:24,390 --> 00:03:29,160 be rendered through the rendered template method. 45 00:03:29,160 --> 00:03:34,720 So I hope that is clear. If you're lazy like me or you don't want to type every line of this file, 46 00:03:34,890 --> 00:03:41,400 you can find this file in the resource section which is the right of the screen. 47 00:03:41,430 --> 00:03:48,540 No we need to figure out a way to link this layout.html file with the home and the about HTML pages. 48 00:03:48,570 --> 00:03:49,380 49 00:03:49,410 --> 00:03:53,000 I'll quickly go back to how the page looks like. 50 00:03:53,290 --> 00:03:59,460 And so as you see here we have the header and just down the header we have the about HTML page. 51 00:03:59,850 --> 00:04:07,230 So just here. That means just under the header we will enter some code that will link to the home.html 52 00:04:07,230 --> 00:04:13,090 page or about.html page depending on what the user will click. 53 00:04:13,220 --> 00:04:19,570 And so we do have a different division here closing it. 54 00:04:22,460 --> 00:04:28,220 And I'll give it a class name so that I can refer later to the CSS code. 55 00:04:28,350 --> 00:04:29,980 Then you have curly brackets. 56 00:04:30,030 --> 00:04:36,170 So that's the syntax and you also have to use percentage signs there then you write the block tag and 57 00:04:36,180 --> 00:04:38,670 then you give a name to the block. 58 00:04:38,880 --> 00:04:42,300 And what we're doing here is actually template inheritance. 59 00:04:42,300 --> 00:04:49,140 So we lay out dot HTML page which we are modifying right now is a base template. The child template 60 00:04:49,170 --> 00:04:55,740 will be the home.html page or the about.html page these child templates will fill in this 61 00:04:55,740 --> 00:05:03,520 block here and there is another line inside the brackets and percentage signs as well. 62 00:05:03,630 --> 00:05:08,240 That is the end block keyword which indicates the end of the block. 63 00:05:08,400 --> 00:05:13,070 And we are done with the layout dot HTML page. 64 00:05:13,080 --> 00:05:17,020 What I'll do here is go to panes and split the window right. 65 00:05:17,040 --> 00:05:23,670 So I have the layout dot HTML page here. Close it here and I'll go to the home.html now. 66 00:05:24,030 --> 00:05:30,630 And because this will be a child's template I don't need the declaration here and the HTML tag. 67 00:05:30,900 --> 00:05:32,860 And I don't even need the body tag. 68 00:05:32,880 --> 00:05:35,240 I'll replace this with a div. 69 00:05:35,910 --> 00:05:36,470 Let's see. 70 00:05:36,480 --> 00:05:43,240 Class equals home. Close it here. 71 00:05:43,980 --> 00:05:45,750 And delete this too. 72 00:05:46,020 --> 00:05:54,030 And what you have to do now is use the templating syntax again like that and use a keyword extents and 73 00:05:54,030 --> 00:05:56,160 then you declare what you want to extend. 74 00:05:56,370 --> 00:06:01,240 So lay out dot HTML file. 75 00:06:01,650 --> 00:06:04,920 Then you also need to add another line. 76 00:06:04,920 --> 00:06:08,960 And here you need to specify the name of a block. 77 00:06:09,060 --> 00:06:13,360 So this needs to correspond with this on here. 78 00:06:14,190 --> 00:06:15,470 So what's going on here. 79 00:06:15,750 --> 00:06:20,550 Well let's go to the script, to the Python script. 80 00:06:20,580 --> 00:06:23,790 What happens is that when the user visits this URL, 81 00:06:23,900 --> 00:06:26,060 so the home page or this one, 82 00:06:26,110 --> 00:06:32,120 let's say this one, Python will execute the home function because the home function is mapped to this URL. 83 00:06:32,140 --> 00:06:32,900 84 00:06:33,150 --> 00:06:36,980 And the home function will render the home.html template. 85 00:06:37,170 --> 00:06:44,660 So Python will go to the home.html page and it will see you that home.html page extends 86 00:06:44,890 --> 00:06:46,880 to the layout dot HTML. 87 00:06:47,160 --> 00:06:48,510 So this one here. 88 00:06:49,110 --> 00:06:57,540 So what it will do is that you will send this code in this blck in here and then this page will be 89 00:06:57,540 --> 00:06:59,680 rendered in the home URL. 90 00:06:59,970 --> 00:07:06,380 So as simple as that the user will see the layout.html page with it's child content. 91 00:07:06,690 --> 00:07:07,940 So this is the base template. 92 00:07:07,950 --> 00:07:09,340 This is the child template. 93 00:07:09,510 --> 00:07:16,050 And we also have another child in this case which is the about.html. 94 00:07:16,050 --> 00:07:29,550 So let me bring this here and I'll just copy this and put this here and this is well Control C and yeah. 95 00:07:29,880 --> 00:07:36,990 Make sure you have saved all the files and this one. 96 00:07:37,240 --> 00:07:37,820 Yeah. 97 00:07:38,270 --> 00:07:39,140 And let's take a look. 98 00:07:39,150 --> 00:07:41,020 The app is running. 99 00:07:41,160 --> 00:07:45,100 Yeah, it looks live. 100 00:07:45,110 --> 00:07:49,000 And I'll go to the home page. 101 00:07:49,650 --> 00:07:51,070 Yeah, looks good. 102 00:07:51,150 --> 00:07:52,580 We have home and about. 103 00:07:52,620 --> 00:07:54,350 Let's go to about. Click. 104 00:07:54,870 --> 00:07:58,640 Yep we have seemed to have lost the heading here. 105 00:07:58,640 --> 00:08:00,090 The format of this line. 106 00:08:00,120 --> 00:08:01,060 Let's have a look 107 00:08:01,110 --> 00:08:02,530 at the about page. 108 00:08:02,910 --> 00:08:08,530 Yeah, I forgot to close the div here. Save again. Go to the browser. 109 00:08:09,150 --> 00:08:11,830 Reload and it's fine. 110 00:08:13,170 --> 00:08:14,480 So that's about it. 111 00:08:14,490 --> 00:08:16,380 I hope things are working on your side. 112 00:08:16,410 --> 00:08:19,050 If not please feel free to ask a question. 113 00:08:19,230 --> 00:08:24,570 Or you can even check my files which I'm putting in the resource section on the right of your screen. 114 00:08:24,580 --> 00:08:24,920 115 00:08:25,000 --> 00:08:29,250 And yeah, I think our application is ready for more. 116 00:08:29,250 --> 00:08:32,040 So let's move on and see you in the next lecture.