1
00:00:00,260 --> 00:00:01,390
Hey, welcome back.

2
00:00:01,400 --> 00:00:07,280
When we visit the home page of our app, for now, we see some dummy data here.

3
00:00:07,280 --> 00:00:13,340
So in this video, what we want to do is we want to display the actual data here.

4
00:00:13,340 --> 00:00:18,920
And the actual data are those which we entered in the admin interface.

5
00:00:18,920 --> 00:00:27,080
So when you go to the home page slash admin and you go to items, you see all the data here which we

6
00:00:27,080 --> 00:00:29,180
inserted in the previous video.

7
00:00:29,180 --> 00:00:38,270
So these data now have to be displayed for the users here on the users side of things on the front end.

8
00:00:38,690 --> 00:00:39,890
So let's do that.

9
00:00:39,890 --> 00:00:41,600
Let's go to our project.

10
00:00:46,530 --> 00:00:51,480
And so we're working on the HTML templates, right?

11
00:00:51,480 --> 00:00:59,190
So let's go to index.html, which is the template that is rendered when the user visits the home page

12
00:00:59,460 --> 00:01:00,420
this year.

13
00:01:00,450 --> 00:01:08,850
And currently we have some dummy data, some meals, ingredients of this come from Views.py.

14
00:01:08,970 --> 00:01:15,240
You see, this context variable contains a dictionary, so that dictionary has meals and ingredients

15
00:01:15,240 --> 00:01:18,810
as keys, so meals, ingredients.

16
00:01:19,410 --> 00:01:27,780
Now, instead of having those hard coded data here, we want to start with an empty dictionary like

17
00:01:27,780 --> 00:01:32,190
this and then we can add keys.

18
00:01:34,620 --> 00:01:36,300
Like so.

19
00:01:37,260 --> 00:01:41,550
So that would be equal to meal times, for example.

20
00:01:42,460 --> 00:01:48,160
Now, meal times is something we need to get from models.py from this.

21
00:01:48,160 --> 00:01:53,500
So meal type is this variable, which is a tuple of tuples.

22
00:01:53,500 --> 00:02:00,760
It contains the meals categories because we want to start by displaying the categories.

23
00:02:01,990 --> 00:02:07,840
So for that we need to import from dot models, import item, meal type.

24
00:02:07,960 --> 00:02:08,560
Right.

25
00:02:08,560 --> 00:02:18,310
So meal type without the s, that will create a key in the dictionary and the value for that key will

26
00:02:18,310 --> 00:02:24,610
be this tuple with these values and we return the context.

27
00:02:24,610 --> 00:02:32,020
So if we go to index here and let me delete ingredients and this will be.

28
00:02:33,050 --> 00:02:33,650
Meals.

29
00:02:33,650 --> 00:02:35,660
So it's the same meals.

30
00:02:35,660 --> 00:02:36,470
Meals.

31
00:02:36,500 --> 00:02:39,110
Let me open this to the right here.

32
00:02:39,260 --> 00:02:43,100
So meals, meals and my app is running.

33
00:02:43,100 --> 00:02:46,070
So if I go to the home page, refresh it.

34
00:02:47,150 --> 00:02:51,410
We're going to see those meals now.

35
00:02:51,680 --> 00:02:57,140
So a tuple of tuples, but this is not the best representation.

36
00:02:57,800 --> 00:03:01,330
We want to show only these.

37
00:03:01,340 --> 00:03:07,480
So starters with a capital S salads, this one, not this one.

38
00:03:07,490 --> 00:03:10,040
So not this one, but this one.

39
00:03:10,040 --> 00:03:12,350
Not this one, but this one.

40
00:03:12,560 --> 00:03:15,620
Let's try to do that in the index.html.

41
00:03:18,040 --> 00:03:21,100
So we need to write a for loop here.

42
00:03:21,130 --> 00:03:23,170
Using this syntax.

43
00:03:23,860 --> 00:03:25,930
So this is jinja2 syntax.

44
00:03:25,930 --> 00:03:32,450
So you can say for meal in meals and then you display the meal here.

45
00:03:32,470 --> 00:03:37,300
So that's, that is a variable which will iterate over all these.

46
00:03:37,660 --> 00:03:39,790
Let's see how that changes things.

47
00:03:39,790 --> 00:03:43,450
But first we want to close that loop somewhere in here.

48
00:03:43,840 --> 00:03:50,290
So with curly brackets, percentage symbols and then end for.

49
00:03:51,860 --> 00:03:53,720
Go to here refresh.

50
00:03:53,720 --> 00:03:56,690
So now it's looking better.

51
00:03:57,500 --> 00:04:07,100
But if you want to keep only the second item of the tuple, then you need to do here dot one.

52
00:04:07,700 --> 00:04:08,180
Right?

53
00:04:08,180 --> 00:04:10,700
So the first one has an index of zero.

54
00:04:10,730 --> 00:04:13,880
The second item of each tuple has an index of one.

55
00:04:13,880 --> 00:04:22,070
So in meal you do meal dot one refresh and then you have starters salads, main dishes and desserts

56
00:04:22,550 --> 00:04:24,680
if you want to make this an H2.

57
00:04:24,710 --> 00:04:33,230
So if you want them bigger, you could do that H2 here, H2 here, refresh and they look bigger.

58
00:04:33,500 --> 00:04:39,740
Now, next is we need to display here the actual meals.

59
00:04:39,740 --> 00:04:47,840
So under starters, we want to display all the database records which have meals that are in the category

60
00:04:47,840 --> 00:04:48,860
of starters.

61
00:04:49,340 --> 00:04:56,490
Because just to refresh your memory, if you go to admin and you go to items and you go, for example,

62
00:04:56,490 --> 00:05:02,340
to beans two, we selected a category for beans two So main dishes here.

63
00:05:02,340 --> 00:05:11,160
So the meal type of beans two which you can also see in modules, you see meal type is a database field,

64
00:05:11,160 --> 00:05:14,730
one of the fields of the item table actually.

65
00:05:15,420 --> 00:05:17,460
So this has.

66
00:05:20,370 --> 00:05:22,650
Choices from mealtime.

67
00:05:22,680 --> 00:05:24,420
This tuple of tuples.

68
00:05:25,470 --> 00:05:33,240
So now we can apply a second for loop here and a conditional block as well.

69
00:05:33,630 --> 00:05:43,860
So you could say this symbol again for M in item list.

70
00:05:43,890 --> 00:05:45,750
What is item list?

71
00:05:46,500 --> 00:05:52,890
Item list now comes from the item class in models.py.

72
00:05:53,220 --> 00:06:02,940
So our class is named item and when you do item with lowercase letters followed by an underscore followed

73
00:06:02,940 --> 00:06:06,180
by list, this is like a special variable name.

74
00:06:06,180 --> 00:06:11,160
So Django is looking for this type of naming convention.

75
00:06:11,160 --> 00:06:22,770
So the name of the class in Models.py followed by an underscore list that will give you the list of

76
00:06:22,770 --> 00:06:24,570
database records.

77
00:06:24,720 --> 00:06:31,410
So you do for M in item list and you want to close that somewhere in here.

78
00:06:31,410 --> 00:06:33,660
So let's do this first.

79
00:06:35,510 --> 00:06:36,800
And four.

80
00:06:36,830 --> 00:06:38,090
And then in here.

81
00:06:38,090 --> 00:06:41,260
So that's for this.

82
00:06:41,270 --> 00:06:43,250
And that is for that.

83
00:06:43,790 --> 00:06:47,570
So the inner for loop and the outer for loop.

84
00:06:47,720 --> 00:06:55,400
And inside here you could do something like with double curly brackets.

85
00:06:55,400 --> 00:07:07,820
So this will contain a variable such as m dot meal and same goes in here m dot description.

86
00:07:08,900 --> 00:07:16,790
So meal and description are coming from Models.py meal description.

87
00:07:16,790 --> 00:07:21,290
This one here you can add more like m price etcetera.

88
00:07:22,100 --> 00:07:25,250
This m here is this one in here.

89
00:07:25,250 --> 00:07:31,340
You can also say for row in item list and you could do here for row meal row dot description.

90
00:07:31,490 --> 00:07:38,930
So I just change this to row and I use row row since this represents a database records.

91
00:07:38,930 --> 00:07:41,750
So one row in the table.

92
00:07:43,250 --> 00:07:50,480
Now if we go to the home page and we refresh it will not see anything new here.

93
00:07:50,480 --> 00:07:54,290
So this are not being displayed.

94
00:07:54,470 --> 00:08:02,930
The reason for that is because we haven't completed the get context data methods here.

95
00:08:03,290 --> 00:08:11,630
You see there, there's no item context being sent to the index.html page.

96
00:08:11,660 --> 00:08:12,260
Right.

97
00:08:12,260 --> 00:08:14,750
So we do have.

98
00:08:15,610 --> 00:08:23,860
The meals variable, which is this one here, but there is no item list yet.

99
00:08:23,890 --> 00:08:26,380
To do that, you need to change something.

100
00:08:26,410 --> 00:08:32,380
First, you need to give a parameter here, which is a special parameter.

101
00:08:32,380 --> 00:08:39,140
We have covered this before and then the context has to be equal to super.

102
00:08:39,159 --> 00:08:47,620
So you call the parent class, the parent class, which is list view, and then you access get context

103
00:08:47,620 --> 00:08:49,930
data using.

104
00:08:51,800 --> 00:08:55,200
That parameter here as an argument.

105
00:08:55,220 --> 00:09:05,360
So basically we are getting some actual value, an existing dictionary from the list view class to get

106
00:09:05,360 --> 00:09:08,460
some default values already.

107
00:09:08,480 --> 00:09:14,030
So this will be a dictionary and then we can add more keys to that dictionary.

108
00:09:14,030 --> 00:09:21,260
So instead of starting with an empty dictionary like this, we do this instead, right?

109
00:09:21,290 --> 00:09:25,400
Now save this and go to the page refresh.

110
00:09:25,400 --> 00:09:28,310
And this time we're going to see this.

111
00:09:28,640 --> 00:09:30,980
So we do have the data here.

112
00:09:30,980 --> 00:09:36,950
You see seafood, pasta, that's the meal.

113
00:09:36,950 --> 00:09:40,400
So the name of the meal followed by the description.

114
00:09:40,430 --> 00:09:42,350
You see, pasta, seafood.

115
00:09:42,350 --> 00:09:43,430
It's a bit of a mess.

116
00:09:43,460 --> 00:09:44,840
We can fix that.

117
00:09:44,960 --> 00:09:54,410
And one simple way to fix that would be to put this into paragraph tags like this open and close that

118
00:09:54,410 --> 00:09:55,600
paragraph tag.

119
00:09:55,610 --> 00:09:58,160
Same for this other one.

120
00:10:00,740 --> 00:10:02,060
So like that.

121
00:10:02,480 --> 00:10:04,820
Let's go to the page refresh.

122
00:10:04,820 --> 00:10:10,040
And now we see seafood, pasta and the ingredients.

123
00:10:10,040 --> 00:10:12,140
So the description basically.

124
00:10:12,320 --> 00:10:20,210
Or you could also do HH3 tags for the meal name to make it more clear.

125
00:10:21,140 --> 00:10:23,000
And it's going to look like this.

126
00:10:23,960 --> 00:10:29,720
We can of course improve this further with bootstrap.

127
00:10:29,720 --> 00:10:32,270
So that's something we're going to do in the next videos.

128
00:10:34,230 --> 00:10:38,400
And you can also see now we have some duplicate data here.

129
00:10:38,520 --> 00:10:48,270
So, for example, seafood pasta shows with starters, but then it also shows with salads under salads

130
00:10:48,630 --> 00:10:52,400
and again under main dishes.

131
00:10:52,410 --> 00:10:58,000
So that's because we haven't applied any conditionals here.

132
00:10:58,020 --> 00:11:02,970
It is possible to apply conditionals inside the index.html template.

133
00:11:03,000 --> 00:11:10,500
So besides for loops, we can also apply conditions to filter those data, because currently what's

134
00:11:10,500 --> 00:11:15,630
happening actually is that we iterate over the meals, right?

135
00:11:15,630 --> 00:11:23,670
So for each meal, so for each records in the database table, I can show you that using DB browser

136
00:11:23,670 --> 00:11:28,110
for SQLite just to visualize what's going on here.

137
00:11:34,340 --> 00:11:39,620
So if we go to browse the restaurant menu table.

138
00:11:41,390 --> 00:11:48,290
So what's happening here is that this loop here, the first loop is going through each of these rows.

139
00:11:48,290 --> 00:11:56,540
So it goes through the first row, which is the pizza meal with its description and meal type and so

140
00:11:56,540 --> 00:11:57,070
on.

141
00:11:57,080 --> 00:12:08,090
And then for that loop, we are displaying the meal that one value, which is the meal type, remember.

142
00:12:08,450 --> 00:12:14,660
So meals represents that tuple of tuples, this tuple of tuple.

143
00:12:14,900 --> 00:12:19,190
And so we display meal one on the web page.

144
00:12:19,190 --> 00:12:29,930
But then while in this row we iterate again over the items list and we display all all the meals again.

145
00:12:30,830 --> 00:12:39,410
And then we go to the second row in the meal types, we display all those rows again and so on.

146
00:12:39,410 --> 00:12:42,290
So we're doing everything multiple times.

147
00:12:42,770 --> 00:12:45,950
We can do that again, as I said, using if conditionals.

148
00:12:45,950 --> 00:12:47,470
So let's do that in the next video.

149
00:12:47,480 --> 00:12:47,900
See you there.