In previous video, we already learned about bootstrap. Now, in this video, we are going 2
to learn about extends. Okay let’s start. 3
Here we can see that we 4
have 3 url, which is hello_world, a, and b. And each url using different function in views. 5
If we check in views.py, here we can see three different function, and each function returning 6
different template files, which is hello_world.html, a.html, and b.html. 7
Now, we have a problem. Let’s say we want to have a navbar in each page, 8
so we need to put a navbar script in each template. Now let’s open the browser, if we open hello_world 9
page, we will have a navbar. But if we try to access a page, we don’t have a navbar here 10
And if we access b page, we also don’t have a navbar here. Why? Because we just have navbar 11
script in hello_world.html, we don’t have navbar script in a.html and b.html. 12
If we want to have a navbar in all of page, so we need to add navbar script in each html file. 13
This is not best practice. Let’s say in the future, we want to change the navbar menu, 14
and we already have many html file, let’s say 10 html file. So we need to edit 15
10 file to change the navbar menu. That’s only 10 html file, but how if we have 50 html file? 16
That’s will be absolutely wasting time. 17
To solve this problem, we can create one file named base.html, and then the others html 18
will extends to the base.html. We will only need to put navbar script in the base.html 19
Let’s start coding! In the templates directory, create a new file, the name will be base.html. 20
Now let’s move bootstrap script in hello_world.html to base.html. 21
We can remove this line, because this is the part of hello_world.html. 22
Now let’s add block script here. Later this block script will be replaced by unique script 23
in each html file. 24
Now let’s edit hello_world.html, here we don’t need to write full html script anymore, 25
why? Because the complete html script already in base.html, so we just need to extends from that file. 26
Here we can put block content, 27
don’t forget to always put endblock in the end. 28
Inside this block content, we can put whatever we want. Here I will put Hello World 29
and the variable from our context, which is name and age. 30
Let’s go to browser, go to app1/hello_world. And here we can see that we still have a navbar, 31
and we also get Hello World and Ahmad - 21 But if we try to access b, we still don’t 32
have a navbar, and also if we try to access a, we also don’t have a navbar yet. 33
Now let’s try to edit a.hml & b.html. 34
Let’s remove all of the script, and copy paste from hello_world.html. 35
Let’s change this to This is A, 36
and remove this one. 37
Let’s copy this script for B. 38
Let’s edit this to B. Now let’s back to browser 39
refresh 40
and here, we can see that we have a navbar in a. Let’s try to access b. 41
Here we can see that we also have a navbar in b. 42
So in the future, if we want to change the navbar, we only need to edit base.html file. 43
Okay, I hope you guys understand about extends in Django. If you have any questions, 44
feel free to ask me, and I will do my best to answer all of your questions. 45
Thankyou for watching and see you on the next video.