In the previous video, we already start building our new project. Now, in this video, 2
we are going to add bootsrap to our project. 3
Let’s just start, open the visual studio code. 4
First we need to configure template directory in the settings.py file. 5
Here let’s define templates directory. 6
Now let’s create the templates directory. Remember that the templates directory must 7
in the same level with our project directory. 8
Now let’s edit views.py inside our app. Here let’s change HttpResponse with render. 9
And the name of template file is home.html 10
Next, we need to create a template file. In this case, we will need 2 file, base.html 11
and home.html. I already upload two of them in the resource section. So you can just download it. 12
Okay, here we have base.html and home.html, next we need to put this file to our templates directory. 13
We can just drag and drop the file to visual studio code. 14
Okay now we have base.html and home.html in the templates directory. 15
Now let’s understand the code. In the base.html, here we define the bootstrap script for css. 16
The title is Django Network Automation. Here we can see that we have a navbar. 17
And here we define block content. Later this block content will be replaced by another html file. 18
And here we also have bootstrap script for javascript. 19
In the home.html, first we extend to base.html. Here in block content, we have a card. 20
This card will show us the graph about total devices, cisco devices, and mikrotik devices. 21
This is just a dummy data, later after we create a database, we will change this total 22
by data in the database. Next, in the buttom, we have a table. This table will show us the 23
10 last event. Here we can see that this is still a dummy data. Later we will change this 24
data using data from database. 25
Okay now let’s open the browser and go to 127.0.0.1:8000. 26
Here we can see that now we have a beautifull page. The title is Django Network Automation. 27
And we have a navbar here. 28
We also have a graph that show the total devices. And here we also have a table that show us 29
the last event of the application. 30
Okay, this is the end of this video. In the next video, we are going to create a models in our project. 31
Thankyou for watching and see you on the next video!