1
00:00:00,980 --> 00:00:01,960
Hey, welcome back.

2
00:00:01,970 --> 00:00:07,550
In this video, you will learn how to add a navigation bar to your Django website.

3
00:00:07,580 --> 00:00:10,670
The navigation bar is also responsive.

4
00:00:10,670 --> 00:00:17,450
So if I minimize if I reduce the size of the window, you'll see this button shows up.

5
00:00:17,720 --> 00:00:20,090
So it's a hamburger button.

6
00:00:20,090 --> 00:00:26,180
You can click it and it will show you the rest of the menu items here.

7
00:00:26,450 --> 00:00:29,600
So the site is quite responsive, as you can see.

8
00:00:29,600 --> 00:00:33,020
And yeah, let's see how we can build this.

9
00:00:33,020 --> 00:00:37,010
So this was from another pie chart project.

10
00:00:37,010 --> 00:00:40,670
So let me close that and focus in our project.

11
00:00:40,670 --> 00:00:43,760
So let's implement that menu in our project.

12
00:00:44,150 --> 00:00:53,750
So we want to focus on the templates directory, right, which is here and in the index.html file.

13
00:00:53,750 --> 00:01:01,440
So I'll just close everything else, right click here, close other tabs, minimize this and let's get

14
00:01:01,440 --> 00:01:02,070
to work.

15
00:01:02,070 --> 00:01:05,340
So we have this index.html file.

16
00:01:05,340 --> 00:01:15,870
I want to duplicate this, so copy it and then paste it here again and change the name to base dot html.

17
00:01:18,260 --> 00:01:22,400
I will explain more why I duplicated the file.

18
00:01:22,400 --> 00:01:25,250
Then we want to create another file.

19
00:01:26,600 --> 00:01:28,880
About.html.

20
00:01:34,060 --> 00:01:38,410
So just leave the default code as it is.

21
00:01:38,440 --> 00:01:48,910
You can set a name for the title and then in the body let's just create something like H1 tag.

22
00:01:51,630 --> 00:01:52,800
About us.

23
00:01:53,340 --> 00:02:00,460
So we have an about page and an index.html page and also this base.html.

24
00:02:00,480 --> 00:02:09,990
Now Base.html will behave as a template, so that means you don't need.

25
00:02:13,240 --> 00:02:14,560
These things.

26
00:02:14,560 --> 00:02:19,840
So delete from the body, tag up to the very top.

27
00:02:20,320 --> 00:02:28,050
Delete those lines and also delete the closing tag and the closing body tag.

28
00:02:28,060 --> 00:02:31,030
So you want to keep only this here.

29
00:02:33,160 --> 00:02:36,850
And then you want to go to index.html.

30
00:02:38,260 --> 00:02:45,220
And again, you want to delete everything from the body tag up to the top.

31
00:02:49,510 --> 00:02:50,830
And also.

32
00:02:52,340 --> 00:02:56,180
Here from the body tag up to the end.

33
00:02:57,320 --> 00:03:02,000
Plus you want to delete these two script tags.

34
00:03:02,270 --> 00:03:03,590
So there we go.

35
00:03:03,620 --> 00:03:05,660
We have a div tag now.

36
00:03:06,420 --> 00:03:08,790
And also this closing div tag.

37
00:03:08,820 --> 00:03:12,180
And we also want to delete these two div tags as well.

38
00:03:12,180 --> 00:03:14,280
So only keep.

39
00:03:17,270 --> 00:03:18,800
The H1 tag.

40
00:03:19,340 --> 00:03:26,570
So the H1 tag opens here, closes in here, and then the form opens here and closes in here.

41
00:03:26,600 --> 00:03:29,520
That's all we need to have here.

42
00:03:29,540 --> 00:03:37,760
Then press on control A or command A and then press shift tab to unindent this here.

43
00:03:37,760 --> 00:03:43,400
So press it several times until it matches with the left side border.

44
00:03:44,750 --> 00:03:45,230
Right.

45
00:03:45,230 --> 00:03:47,330
So what I'm doing here is that.

46
00:03:48,600 --> 00:03:54,450
I'm keeping only the contents of each individual page.

47
00:03:54,450 --> 00:04:04,650
So our website will have multiple pages about index and instead of having repetitive code in these files.

48
00:04:05,810 --> 00:04:14,390
Such as the things I've just deleted instead of having those lines repeated in every HTML page index

49
00:04:14,390 --> 00:04:15,680
about etcetera.

50
00:04:15,800 --> 00:04:20,709
We want to keep those lines only in baz dot html.

51
00:04:20,720 --> 00:04:21,420
Right.

52
00:04:21,440 --> 00:04:25,370
So we deleted the body tag up to here.

53
00:04:25,370 --> 00:04:27,140
So I'm in base dot html.

54
00:04:27,170 --> 00:04:27,730
Right.

55
00:04:27,740 --> 00:04:31,850
So here is where we want to keep these lines.

56
00:04:32,750 --> 00:04:38,650
And then so remember that this was a duplicate of index.html.

57
00:04:38,660 --> 00:04:48,310
So then we want to delete everything starting from H1 here, job application form which belongs to index.html.

58
00:04:48,320 --> 00:04:52,040
So just go to the number area here and drag your cursor.

59
00:04:54,390 --> 00:05:00,660
You want to delete everything up to this div?

60
00:05:00,690 --> 00:05:01,440
No, sorry.

61
00:05:01,440 --> 00:05:02,520
This one here.

62
00:05:03,380 --> 00:05:05,780
So up to the form, Right.

63
00:05:06,170 --> 00:05:07,430
So again.

64
00:05:09,150 --> 00:05:12,960
H1 don't include the div class container.

65
00:05:12,960 --> 00:05:18,540
So from H1 to the closing form, tag and press.

66
00:05:19,450 --> 00:05:20,710
The delete button.

67
00:05:22,380 --> 00:05:25,860
Then in between these two div tags.

68
00:05:26,850 --> 00:05:34,230
You want to write some jinja2 code such as curly brackets, curly brackets, percentage, percentage.

69
00:05:34,230 --> 00:05:36,390
And inside you do block.

70
00:05:39,130 --> 00:05:40,090
Content.

71
00:05:40,840 --> 00:05:52,060
And then again, the same symbols and block make sure to have some space been between the words and

72
00:05:52,060 --> 00:05:53,740
the percentage symbols.

73
00:05:53,740 --> 00:05:58,930
So and block is without spaces block content is with a space here.

74
00:06:00,740 --> 00:06:07,340
And then you want to connect the index.html page with the base dot html page.

75
00:06:08,060 --> 00:06:10,450
And then we'll do the same with a boat.

76
00:06:10,460 --> 00:06:20,030
So how do you connect index.html with base.html in index.html at the very top here you want to use again

77
00:06:20,030 --> 00:06:31,940
jinja2 curly brackets, percentage symbols and in between you say extends single quotes base dot html.

78
00:06:34,020 --> 00:06:39,810
So which means index extends base dot HTML.

79
00:06:41,170 --> 00:06:46,600
You also need to add some other jinja to code.

80
00:06:47,080 --> 00:06:50,620
So that would be block content.

81
00:06:51,850 --> 00:06:57,700
In here and then you want to close that block at the very end here.

82
00:07:03,740 --> 00:07:05,090
And block.

83
00:07:07,670 --> 00:07:11,410
Let's do the same with About.html.

84
00:07:11,420 --> 00:07:16,370
So go here and enter those lines.

85
00:07:17,560 --> 00:07:19,720
And here we say.

86
00:07:20,970 --> 00:07:22,230
And block.

87
00:07:23,280 --> 00:07:26,040
Let's see what we have on the website.

88
00:07:26,040 --> 00:07:28,560
So make sure that the app is running here.

89
00:07:28,830 --> 00:07:29,940
It's running.

90
00:07:29,940 --> 00:07:33,390
The about URL is not found at the moment.

91
00:07:33,390 --> 00:07:40,590
We will fix that later, but let's see what we've got so far.

92
00:07:44,590 --> 00:07:48,520
So that's our home page, as you can see.

93
00:07:50,940 --> 00:07:53,850
The page still looks good.

94
00:07:53,910 --> 00:07:54,360
Right.

95
00:07:54,360 --> 00:08:01,470
So we were able to inherit from base dot HTML.

96
00:08:01,470 --> 00:08:09,210
So basically now what's happening is that when the user visits this URL, again, the view function

97
00:08:09,210 --> 00:08:10,350
is called.

98
00:08:10,530 --> 00:08:17,460
So in here index, the index function is called index renders index dot HTML.

99
00:08:17,460 --> 00:08:25,770
So this file and this file when it's being called, it also calls the base dot html file.

100
00:08:25,770 --> 00:08:28,890
So it gets the content of base dot HTML.

101
00:08:29,040 --> 00:08:34,830
And so now we want to do the same with with a boat, right?

102
00:08:35,370 --> 00:08:43,370
So just before we create the navigation bar, let's connect the about page with its URL.

103
00:08:43,380 --> 00:08:51,910
So first of all though, you need to go to views and you need to create a new function for the about

104
00:08:51,910 --> 00:08:55,240
page request as input.

105
00:08:57,080 --> 00:09:04,640
Return render request as the first argument and followed by about.html.

106
00:09:05,300 --> 00:09:06,050
Good.

107
00:09:06,140 --> 00:09:10,010
Then you need to go to URLs here.

108
00:09:10,400 --> 00:09:11,420
Make a comma.

109
00:09:12,800 --> 00:09:13,670
In this list.

110
00:09:13,670 --> 00:09:17,210
And we want to add another item to the patterns list.

111
00:09:17,210 --> 00:09:22,370
So we're working on the Urls.py inside job application, right?

112
00:09:22,400 --> 00:09:26,960
Don't confuse that with the other URLs inside my site.

113
00:09:27,470 --> 00:09:35,480
We don't want to change anything in the URLs in the mysite directory and this time this will be about

114
00:09:35,480 --> 00:09:36,590
slash.

115
00:09:37,420 --> 00:09:38,080
Right.

116
00:09:38,350 --> 00:09:47,680
That's the URL of the about page and views about So about is the name of the function in Views.py.

117
00:09:50,250 --> 00:09:51,990
And let's give this a name.

118
00:09:53,340 --> 00:09:54,140
A boat.

119
00:09:54,780 --> 00:09:55,740
A string.

120
00:09:56,310 --> 00:10:07,700
So now if we go to the page and we add slash about, then we will see the contents of the about page.

121
00:10:07,710 --> 00:10:08,180
Right?

122
00:10:08,190 --> 00:10:09,060
That's it.

123
00:10:09,600 --> 00:10:11,220
And yeah, that's about this video.

124
00:10:11,220 --> 00:10:20,250
So in this video we implemented a base template, so which contains code that is distributed across

125
00:10:20,250 --> 00:10:23,450
all other pages of the website.

126
00:10:23,460 --> 00:10:31,770
And so now we have multiple pages and all these pages share the same style, correct?

127
00:10:37,300 --> 00:10:40,290
Let's have the same class as in index.html.

128
00:10:40,300 --> 00:10:46,750
So in index.html the H1 tag job application form has this class.

129
00:10:46,780 --> 00:10:47,410
Right?

130
00:10:47,410 --> 00:10:51,610
So we can get that class and we can apply it in here.

131
00:10:55,010 --> 00:11:02,180
And then refresh the page and about us will get that margin here.

132
00:11:02,180 --> 00:11:06,380
So it will apply that that bootstrap style.

133
00:11:06,380 --> 00:11:08,930
So that is possible because.

134
00:11:10,270 --> 00:11:18,850
A boat inherits from base dot html meaning that in base.html we have the bootstrap link.

135
00:11:18,850 --> 00:11:19,180
Right?

136
00:11:19,180 --> 00:11:25,660
So now we can apply those classes to the elements of the boat.

137
00:11:25,690 --> 00:11:34,420
So basically we can share the style across all the pages of our website by using a base dot HTML template.

138
00:11:34,900 --> 00:11:42,400
Plus also the other benefits which we'll do in the next video is that all these pages will be able to

139
00:11:42,400 --> 00:11:45,110
share the same navigation bar.

140
00:11:45,130 --> 00:11:51,910
So if you don't understand the benefit of Base.html yet, you'll understand it in the next video.

141
00:11:51,910 --> 00:11:53,020
So I'll see you there.