1 00:00:00,860 --> 00:00:07,620 In previous video, we already learned about bootstrap. Now, in this video, we are going 2 00:00:07,620 --> 00:00:11,380 to learn about extends. Okay let’s start. 3 00:00:14,580 --> 00:00:16,420 Here we can see that we 4 00:00:16,420 --> 00:00:26,260 have 3 url, which is hello_world, a, and b. And each url using different function in views. 5 00:00:26,620 --> 00:00:35,980 If we check in views.py, here we can see three different function, and each function returning 6 00:00:35,980 --> 00:00:44,600 different template files, which is hello_world.html, a.html, and b.html. 7 00:00:45,120 --> 00:00:51,900 Now, we have a problem. Let’s say we want to have a navbar in each page, 8 00:00:52,740 --> 00:01:01,480 so we need to put a navbar script in each template. Now let’s open the browser, if we open hello_world 9 00:01:01,480 --> 00:01:09,360 page, we will have a navbar. But if we try to access a page, we don’t have a navbar here 10 00:01:09,520 --> 00:01:16,800 And if we access b page, we also don’t have a navbar here. Why? Because we just have navbar 11 00:01:16,800 --> 00:01:25,280 script in hello_world.html, we don’t have navbar script in a.html and b.html. 12 00:01:26,860 --> 00:01:33,940 If we want to have a navbar in all of page, so we need to add navbar script in each html file. 13 00:01:34,480 --> 00:01:41,640 This is not best practice. Let’s say in the future, we want to change the navbar menu, 14 00:01:41,780 --> 00:01:49,500 and we already have many html file, let’s say 10 html file. So we need to edit 15 00:01:49,500 --> 00:01:59,600 10 file to change the navbar menu. That’s only 10 html file, but how if we have 50 html file? 16 00:01:59,800 --> 00:02:02,780 That’s will be absolutely wasting time. 17 00:02:03,320 --> 00:02:12,200 To solve this problem, we can create one file named base.html, and then the others html 18 00:02:12,200 --> 00:02:21,080 will extends to the base.html. We will only need to put navbar script in the base.html 19 00:02:21,760 --> 00:02:33,620 Let’s start coding! In the templates directory, create a new file, the name will be base.html. 20 00:02:34,280 --> 00:02:41,000 Now let’s move bootstrap script in hello_world.html to base.html. 21 00:02:47,040 --> 00:02:53,080 We can remove this line, because this is the part of hello_world.html. 22 00:02:53,800 --> 00:03:00,500 Now let’s add block script here. Later this block script will be replaced by unique script 23 00:03:00,500 --> 00:03:02,760 in each html file. 24 00:03:07,000 --> 00:03:15,320 Now let’s edit hello_world.html, here we don’t need to write full html script anymore, 25 00:03:15,520 --> 00:03:24,820 why? Because the complete html script already in base.html, so we just need to extends from that file. 26 00:03:36,900 --> 00:03:40,060 Here we can put block content, 27 00:03:43,160 --> 00:03:46,680 don’t forget to always put endblock in the end. 28 00:03:46,920 --> 00:03:54,480 Inside this block content, we can put whatever we want. Here I will put Hello World 29 00:04:01,540 --> 00:04:07,300 and the variable from our context, which is name and age. 30 00:04:14,860 --> 00:04:27,800 Let’s go to browser, go to app1/hello_world. And here we can see that we still have a navbar, 31 00:04:27,960 --> 00:04:37,460 and we also get Hello World and Ahmad - 21 But if we try to access b, we still don’t 32 00:04:37,460 --> 00:04:44,300 have a navbar, and also if we try to access a, we also don’t have a navbar yet. 33 00:04:44,780 --> 00:04:50,400 Now let’s try to edit a.hml & b.html. 34 00:04:55,460 --> 00:05:01,900 Let’s remove all of the script, and copy paste from hello_world.html. 35 00:05:04,540 --> 00:05:07,640 Let’s change this to This is A, 36 00:05:10,420 --> 00:05:12,240 and remove this one. 37 00:05:14,840 --> 00:05:17,460 Let’s copy this script for B. 38 00:05:21,860 --> 00:05:27,720 Let’s edit this to B. Now let’s back to browser 39 00:05:29,580 --> 00:05:30,800 refresh 40 00:05:31,640 --> 00:05:38,900 and here, we can see that we have a navbar in a. Let’s try to access b. 41 00:05:39,260 --> 00:05:43,920 Here we can see that we also have a navbar in b. 42 00:05:44,300 --> 00:05:51,440 So in the future, if we want to change the navbar, we only need to edit base.html file. 43 00:05:51,760 --> 00:05:59,020 Okay, I hope you guys understand about extends in Django. If you have any questions, 44 00:05:59,020 --> 00:06:04,380 feel free to ask me, and I will do my best to answer all of your questions. 45 00:06:04,460 --> 00:06:07,840 Thankyou for watching and see you on the next video.