1

00:00:00,660  -->  00:00:06,960
In the previous video, we already start building
our new project. Now, in this video,

2

00:00:06,960  -->  00:00:09,960
we are going to add bootsrap to our project.

3

00:00:09,960  -->  00:00:14,060
Let’s just start, open the visual studio
code.

4

00:00:16,220  -->  00:00:21,460
First we need to configure template directory in the settings.py file.

5

00:00:23,900  -->  00:00:27,000
Here let’s define templates directory.

6

00:00:28,180  -->  00:00:34,000
Now let’s create the templates directory.
Remember that the templates directory must

7

00:00:34,000  -->  00:00:37,100
in the same level with our project directory.

8

00:00:43,620  -->  00:00:53,040
Now let’s edit views.py inside our app.
Here let’s change HttpResponse with render.

9

00:00:55,680  -->  00:00:59,420
And the name of template file is home.html

10

00:01:00,480  -->  00:01:07,320
Next, we need to create a template file. In
this case, we will need 2 file, base.html

11

00:01:07,360  -->  00:01:15,700
and home.html. I already upload two of them
in the resource section. So you can just download it.

12

00:01:26,980  -->  00:01:36,320
Okay, here we have base.html and home.html,
next we need to put this file to our templates directory.

13

00:01:36,320  -->  00:01:40,060
We can just drag and drop the file
to visual studio code.

14

00:01:45,680  -->  00:01:51,640
Okay now we have base.html and home.html in the templates directory.

15

00:01:52,520  -->  00:02:03,280
Now let’s understand the code. In the base.html,
here we define the bootstrap script for css.

16

00:02:04,580  -->  00:02:12,140
The title is Django Network Automation. Here
we can see that we have a navbar.

17

00:02:15,160  -->  00:02:22,560
And here we define block content. Later this block
content will be replaced by another html file.

18

00:02:22,660  -->  00:02:26,740
And here we also have bootstrap script for
javascript.

19

00:02:28,040  -->  00:02:37,760
In the home.html, first we extend to base.html.
Here in block content, we have a card.

20

00:02:37,760  -->  00:02:46,820
This card will show us the graph about total devices,
cisco devices, and mikrotik devices.

21

00:02:48,020  -->  00:02:53,740
This is just a dummy data, later after we
create a database, we will change this total

22

00:02:53,740  -->  00:03:01,900
by data in the database. Next, in the buttom,
we have a table. This table will show us the

23

00:03:01,900  -->  00:03:08,920
10 last event. Here we can see that this is
still a dummy data. Later we will change this

24

00:03:08,920  -->  00:03:11,760
data using data from database.

25

00:03:12,140  -->  00:03:18,360
Okay now let’s open the browser and go to
127.0.0.1:8000.

26

00:03:24,080  -->  00:03:30,780
Here we can see that now we have a beautifull page. The title is Django Network Automation.

27

00:03:31,720  -->  00:03:33,760
And we have a navbar here.

28

00:03:33,880  -->  00:03:41,000
We also have a graph that show the total devices.
And here we also have a table that show us

29

00:03:41,000  -->  00:03:43,320
the last event of the application.

30

00:03:43,800  -->  00:03:51,540
Okay, this is the end of this video. In the
next video, we are going to create a models in our project.

31

00:03:51,540  -->  00:03:54,720
Thankyou for watching and
see you on the next video!