1
00:00:00,410 --> 00:00:04,430
Hey, in this video you will learn how to transform the meals.

2
00:00:04,430 --> 00:00:09,530
So seafood, pasta, Greek salad, bean stew into links.

3
00:00:10,070 --> 00:00:16,490
When the user clicks any of these links, they will be brought to the corresponding page of each meal

4
00:00:16,490 --> 00:00:19,190
where they can see the ingredients or more information.

5
00:00:19,190 --> 00:00:22,820
If you want to add more info, let's do that.

6
00:00:22,820 --> 00:00:27,140
Let's go to index.html which corresponds to this.

7
00:00:27,140 --> 00:00:31,360
And so this is the meal and that's the description.

8
00:00:31,370 --> 00:00:33,620
So meal description.

9
00:00:33,620 --> 00:00:40,130
We want to turn the meal into a link to do that in HTML you use a tag.

10
00:00:41,630 --> 00:00:42,530
Like that.

11
00:00:42,560 --> 00:00:44,660
So open and close it.

12
00:00:46,450 --> 00:00:47,560
Just like that.

13
00:00:48,100 --> 00:00:50,100
So opening a tag.

14
00:00:50,110 --> 00:00:51,820
Closing a tag.

15
00:00:51,970 --> 00:01:02,230
And then inside the opening, a tag you need to add an h ref property which will be equal to the URL

16
00:01:02,320 --> 00:01:07,130
where you want the user to go when they click that link.

17
00:01:07,170 --> 00:01:11,520
For for now, let's just do something like https

18
00:01:12,640 --> 00:01:14,800
example.com.

19
00:01:14,920 --> 00:01:16,110
Just an example.

20
00:01:16,120 --> 00:01:24,520
Refresh the page and you will see that Greek salad and panacotta have been updated to links.

21
00:01:24,520 --> 00:01:26,260
We can do the same for.

22
00:01:27,780 --> 00:01:31,170
They are the ones which is under the else condition.

23
00:01:31,500 --> 00:01:34,830
So that was for those unavailable items.

24
00:01:35,160 --> 00:01:37,130
They can have links as well.

25
00:01:37,140 --> 00:01:39,240
So let's do that for this.

26
00:01:39,750 --> 00:01:44,340
A tag here, closing a tag here as well.

27
00:01:44,340 --> 00:01:47,700
Let's select it and indent it.

28
00:01:50,370 --> 00:01:55,830
So somewhere here, let's close that refresh again.

29
00:01:56,040 --> 00:02:02,970
So all the meals now have links, but if you click them they will take you to example.com.

30
00:02:02,970 --> 00:02:06,570
So which is a website and that's the link we defined here.

31
00:02:06,570 --> 00:02:09,270
But of course that's not what we want.

32
00:02:09,300 --> 00:02:12,810
We want to have a local link of our own web app.

33
00:02:12,810 --> 00:02:20,100
So that would be a relative link and we should use Jinja syntax here again.

34
00:02:20,100 --> 00:02:22,500
So you should keep the quotes.

35
00:02:22,530 --> 00:02:30,580
But inside the quotes you enter curly brackets followed by two percentage symbols and then you say URL,

36
00:02:30,580 --> 00:02:41,050
which is a keyword single quotes, and inside the single quotes you want to define the name of the URL.

37
00:02:41,050 --> 00:02:42,850
What is the name of the URL?

38
00:02:42,970 --> 00:02:48,550
Well, if you go to the urls.py file under restaurant menu.

39
00:02:48,580 --> 00:02:54,670
So under the restaurant menu not under my site under restaurant menu urls.

40
00:02:54,670 --> 00:02:57,430
In here we have a URL already.

41
00:02:57,430 --> 00:03:00,460
So that's the URL and its name is home.

42
00:03:00,460 --> 00:03:03,520
Now we want to add another URL here.

43
00:03:03,520 --> 00:03:08,410
So to do that you need to add a comma here because this is a list of different items.

44
00:03:08,410 --> 00:03:13,480
So that's the first item, a comma press enter path to add another item.

45
00:03:13,480 --> 00:03:15,970
So that would be another URL, right?

46
00:03:16,000 --> 00:03:21,100
And here is where the relative path goes.

47
00:03:21,100 --> 00:03:25,060
So for example, let's say item, right?

48
00:03:25,060 --> 00:03:26,530
Let's leave it for now.

49
00:03:26,530 --> 00:03:28,870
Like that item and slash.

50
00:03:29,050 --> 00:03:32,890
And then you say that views dot.

51
00:03:35,630 --> 00:03:38,320
Menu item detail.

52
00:03:38,330 --> 00:03:40,040
So put that in here.

53
00:03:40,070 --> 00:03:40,790
Menu item.

54
00:03:40,790 --> 00:03:42,500
Detail View.

55
00:03:42,830 --> 00:03:50,630
So what I'm trying to go to here is that in views we had two classes, one class that handles the views

56
00:03:50,630 --> 00:03:56,570
for the home page, the home page, this here and now.

57
00:03:56,570 --> 00:04:04,430
We had another view for handling the individual pages, this one here, right?

58
00:04:04,430 --> 00:04:09,350
So I'm specifying that in here and give it a name.

59
00:04:09,350 --> 00:04:17,360
For example, let's say item or perhaps another name like menu item to distinguish it from this name.

60
00:04:17,360 --> 00:04:18,980
So not to confuse you.

61
00:04:19,640 --> 00:04:25,550
This is the URL name and this is the URL subdirectory right now.

62
00:04:25,550 --> 00:04:31,850
This URL name should be given in here in index.html menu item.

63
00:04:31,850 --> 00:04:33,140
So that means.

64
00:04:34,050 --> 00:04:46,170
When the user clicks in seafood pasta or any of these URLs, they will be taken to the URL that has

65
00:04:46,170 --> 00:04:48,180
this name menu item.

66
00:04:48,180 --> 00:04:51,540
That URL is this here.

67
00:04:51,750 --> 00:05:00,960
So which means sort of your domain name, dot com slash item.

68
00:05:01,740 --> 00:05:04,360
So the user will be taken to this page.

69
00:05:04,380 --> 00:05:11,310
In our case, this is something like 127 .0.0 and the port name and so on.

70
00:05:12,190 --> 00:05:16,800
Um, so let's see how that goes.

71
00:05:16,830 --> 00:05:18,840
Let's refresh this.

72
00:05:19,500 --> 00:05:21,540
Click on seafood pasta.

73
00:05:22,650 --> 00:05:30,930
Actually, we should have clicked to one of the unavailable items because I implemented this for those

74
00:05:30,930 --> 00:05:31,860
with status zero.

75
00:05:31,860 --> 00:05:38,320
So for unavailable items because the available items still have the example.com URL attached to them.

76
00:05:38,320 --> 00:05:40,270
So let's try Greek salad here.

77
00:05:40,630 --> 00:05:41,140
Yeah.

78
00:05:41,140 --> 00:05:42,160
So there we go.

79
00:05:42,160 --> 00:05:44,040
We have an error.

80
00:05:44,050 --> 00:05:52,180
It says that this should be called with either an object PK, PK, it's a primary key or a slug.

81
00:05:52,390 --> 00:05:57,910
So in other words, this URL here should be more dynamic.

82
00:05:57,910 --> 00:06:05,410
To make it more dynamic, we can add like this syntax int, which means an integer.

83
00:06:05,500 --> 00:06:14,920
PK So we will expect an integer from the primary key of the database.

84
00:06:14,920 --> 00:06:18,160
So we have the table with data, right?

85
00:06:18,310 --> 00:06:22,870
Each of them has a primary key attached to them.

86
00:06:23,080 --> 00:06:27,580
And so let's see what's going to happen if we have this.

87
00:06:27,580 --> 00:06:34,810
So that's like the syntax of Django to handle dynamic URLs when you have multiple elements.

88
00:06:35,530 --> 00:06:37,090
So let's go back.

89
00:06:39,230 --> 00:06:41,240
Let's click on Greek salad.

90
00:06:42,840 --> 00:06:43,830
We've got an error.

91
00:06:43,830 --> 00:06:45,900
It says Page not found.

92
00:06:45,930 --> 00:06:49,770
We can see that the requested URL was this.

93
00:06:49,770 --> 00:06:52,530
So slash item slash.

94
00:06:52,740 --> 00:07:00,840
So that means in index.html we still have to add something.

95
00:07:00,990 --> 00:07:03,810
And that is row.pk.

96
00:07:04,230 --> 00:07:14,970
So row is the variable here which which is iterating over the rows of the table and PK is one of the

97
00:07:14,970 --> 00:07:20,740
fields of the table which holds the primary key of that row.

98
00:07:20,760 --> 00:07:28,440
So with that, we can go back to the home page, refresh, click on Greek Salad and there we go, menu

99
00:07:28,440 --> 00:07:29,170
item.

100
00:07:29,220 --> 00:07:30,930
So we do see a page.

101
00:07:30,930 --> 00:07:42,820
Now, again, the way it works is by adding this in index.html, by adding this line in Urls.py.

102
00:07:43,990 --> 00:07:45,490
And that's about it.

103
00:07:45,640 --> 00:07:52,630
So in two places you have to modify the urls, index.html and urls.py.

104
00:07:53,480 --> 00:07:56,900
You can do the same for the other ones as well.

105
00:07:56,900 --> 00:08:01,520
So here inside the quotes, you want to paste that.

106
00:08:03,410 --> 00:08:04,460
Expression.

107
00:08:06,450 --> 00:08:15,000
So that will implement the same for let's make a refresh here for the other available items such as

108
00:08:15,030 --> 00:08:16,000
seafood pasta.

109
00:08:16,020 --> 00:08:17,790
Now we see menu item here.

110
00:08:17,790 --> 00:08:19,580
So where does this come from?

111
00:08:19,590 --> 00:08:25,050
Well, that comes from the views here from this view.

112
00:08:25,080 --> 00:08:29,160
This is returning this HTML document.

113
00:08:29,550 --> 00:08:38,309
So it is that document which we are seeing here, and that is under templates templates which is here

114
00:08:38,340 --> 00:08:40,760
menu item detail dot HTML.

115
00:08:40,770 --> 00:08:46,410
So you see, we see this menu item, that's the content inside the body tags.

116
00:08:46,590 --> 00:08:49,620
So that's a visible content that we see in here.

117
00:08:49,620 --> 00:08:51,870
We can improve that.

118
00:08:52,440 --> 00:08:56,280
So instead of saying menu item, we can say.

119
00:09:00,330 --> 00:09:01,320
Display here.

120
00:09:01,320 --> 00:09:04,530
Item dot meal, for example.

121
00:09:05,670 --> 00:09:09,800
Refresh this page and we see seafood pasta.

122
00:09:09,810 --> 00:09:14,670
So for each link you click, you see the name of that.

123
00:09:15,060 --> 00:09:24,690
And similarly you can add here perhaps P tags and inside the P tags again, you include a variable.

124
00:09:25,630 --> 00:09:28,570
Such as item dot description.

125
00:09:29,080 --> 00:09:38,470
So as you can see this page menu item detail dot html has access to the item variable because item is

126
00:09:38,470 --> 00:09:45,280
the name of the model and we have declared the model as a variable in this class.

127
00:09:45,280 --> 00:09:52,720
So this class is sending that name to this HTML document.

128
00:09:52,720 --> 00:09:56,620
That's why we have access to that name in here.

129
00:09:57,340 --> 00:10:00,610
So if you refresh here, you see that as well.

130
00:10:02,170 --> 00:10:03,930
And let's add the price as well.

131
00:10:03,940 --> 00:10:08,110
I'm duplicating that and saying price here, refresh.

132
00:10:08,380 --> 00:10:17,620
We see the price as well and we still have to include price in the home page in here and we still have

133
00:10:17,620 --> 00:10:22,510
to include a navigation menu here on top and also add styling.

134
00:10:22,510 --> 00:10:24,040
Let's do all that in the next videos.

135
00:10:24,070 --> 00:10:24,670
See you there.