1
00:00:02,290 --> 00:00:05,950
So in order to make these dynamic routes

2
00:00:05,950 --> 00:00:09,050
really useful, we need unique IDs

3
00:00:09,050 --> 00:00:10,930
for all our restaurants

4
00:00:10,930 --> 00:00:13,520
so that we can load the different restaurants

5
00:00:13,520 --> 00:00:16,990
by IDs with help of the dynamic routes.

6
00:00:16,990 --> 00:00:17,950
Now, the restaurants

7
00:00:17,950 --> 00:00:22,190
which we created thus far have no unique IDs.

8
00:00:22,190 --> 00:00:26,690
They have names but those are not necessarily unique.

9
00:00:26,690 --> 00:00:28,860
They are here in my example

10
00:00:28,860 --> 00:00:33,090
but you could add two restaurants with the same name.

11
00:00:33,090 --> 00:00:35,450
Even the website could be duplicated

12
00:00:35,450 --> 00:00:39,270
if multiple users add the same restaurant.

13
00:00:39,270 --> 00:00:41,160
And therefore, I wanna have a way

14
00:00:41,160 --> 00:00:44,480
of assigning a truly unique ID.

15
00:00:44,480 --> 00:00:46,180
And we can achieve this

16
00:00:46,180 --> 00:00:48,700
by adding another third-party package

17
00:00:48,700 --> 00:00:51,110
that helps us with that problem.

18
00:00:51,110 --> 00:00:54,410
We could also try writing some custom code

19
00:00:54,410 --> 00:00:56,500
that produces unique IDs

20
00:00:56,500 --> 00:00:58,580
but that would be some extra work,

21
00:00:58,580 --> 00:01:00,853
which I don't necessarily wanna have.

22
00:01:02,240 --> 00:01:05,090
That's why there is another third-party package,

23
00:01:05,090 --> 00:01:08,810
which we can install into this project with npm install

24
00:01:08,810 --> 00:01:12,023
and that is the uuid package,

25
00:01:13,400 --> 00:01:16,610
which simply stands for uniform unique ID,

26
00:01:16,610 --> 00:01:19,050
but in the end, it's just a package name chosen

27
00:01:19,050 --> 00:01:22,110
by the developers of that package.

28
00:01:22,110 --> 00:01:24,960
We can install it with npm install though,

29
00:01:24,960 --> 00:01:27,090
and if you execute this command,

30
00:01:27,090 --> 00:01:30,210
you will see that in your package.json file,

31
00:01:30,210 --> 00:01:32,490
this is added as a dependency,

32
00:01:32,490 --> 00:01:34,560
and, of course, it was also added

33
00:01:34,560 --> 00:01:37,380
to this node_modules folder

34
00:01:37,380 --> 00:01:39,533
if you scroll down to u.

35
00:01:41,570 --> 00:01:44,420
Now, with that added, we can use it

36
00:01:44,420 --> 00:01:49,230
and I wanna use it whenever we store a new restaurant.

37
00:01:49,230 --> 00:01:53,140
So in app.js, in this post route,

38
00:01:53,140 --> 00:01:56,510
which is executed whenever a request is sent

39
00:01:56,510 --> 00:01:59,580
with some data about a new restaurant,

40
00:01:59,580 --> 00:02:03,320
I now don't just wanna take that request.body,

41
00:02:03,320 --> 00:02:06,140
so that user-submitted data,

42
00:02:06,140 --> 00:02:08,190
but instead, I wanna take it

43
00:02:08,190 --> 00:02:12,310
and enrich it with a extra unique ID.

44
00:02:12,310 --> 00:02:14,770
Now, thankfully, JavaScript makes

45
00:02:14,770 --> 00:02:18,360
that really, really simple and easy.

46
00:02:18,360 --> 00:02:20,540
We have this restaurant,

47
00:02:20,540 --> 00:02:22,560
and that contains an object

48
00:02:22,560 --> 00:02:24,950
because request.body is an object,

49
00:02:24,950 --> 00:02:28,900
and we store what's in request.body in that constant.

50
00:02:28,900 --> 00:02:32,530
Hence this restaurant constant contains this object,

51
00:02:32,530 --> 00:02:36,970
which is that object full of the data submitted by the user,

52
00:02:36,970 --> 00:02:39,580
a object, which has this shape,

53
00:02:39,580 --> 00:02:41,070
because that's what we store

54
00:02:41,070 --> 00:02:43,993
in this restaurants.json array in the end.

55
00:02:44,970 --> 00:02:46,890
So we get this kind of object.

56
00:02:46,890 --> 00:02:49,720
That's what's inside of request.body,

57
00:02:49,720 --> 00:02:54,630
and now in JavaScript, we can easily add an extra field,

58
00:02:54,630 --> 00:02:57,690
a extra property to that object

59
00:02:57,690 --> 00:03:01,000
by using that dot notation, which you already know,

60
00:03:01,000 --> 00:03:06,000
but now I don't access a property, a field

61
00:03:06,140 --> 00:03:09,360
that already exists in that object

62
00:03:09,360 --> 00:03:13,090
but instead, I will access one that doesn't exist.

63
00:03:13,090 --> 00:03:15,350
For example, id.

64
00:03:15,350 --> 00:03:17,500
But this name is up to you.

65
00:03:17,500 --> 00:03:19,200
It just is a property,

66
00:03:19,200 --> 00:03:22,103
which is not part of that incoming object.

67
00:03:23,410 --> 00:03:25,633
Now, there are programming languages

68
00:03:25,633 --> 00:03:28,820
where this would not be allowed.

69
00:03:28,820 --> 00:03:31,770
But in JavaScript, this is allowed,

70
00:03:31,770 --> 00:03:35,200
and if you access a property that doesn't exist

71
00:03:35,200 --> 00:03:36,640
in an object yet,

72
00:03:36,640 --> 00:03:40,200
JavaScript will simply create it for you.

73
00:03:40,200 --> 00:03:44,250
So we can assign a value to this nonexistent property,

74
00:03:44,250 --> 00:03:47,480
and once that was done, the property will exist

75
00:03:47,480 --> 00:03:52,480
because it was added with that value that we assign here.

76
00:03:52,500 --> 00:03:56,550
And here I now wanna assign my unique ID.

77
00:03:56,550 --> 00:03:59,840
Now, for that we installed that third-party package.

78
00:03:59,840 --> 00:04:01,530
Now in order to use it,

79
00:04:01,530 --> 00:04:04,400
we just need to reference it

80
00:04:04,400 --> 00:04:06,410
inside of this app.js file,

81
00:04:06,410 --> 00:04:08,960
just as we are referencing Express

82
00:04:08,960 --> 00:04:11,133
or these built-in packages here.

83
00:04:12,110 --> 00:04:14,980
So here maybe below Express,

84
00:04:14,980 --> 00:04:17,495
though the exact position doesn't matter,

85
00:04:17,495 --> 00:04:21,610
I will now include my uuid package

86
00:04:21,610 --> 00:04:25,653
with help of that require function here, like this.

87
00:04:27,320 --> 00:04:30,880
And this thing, which we reference here,

88
00:04:30,880 --> 00:04:32,773
turns out to be an object.

89
00:04:33,650 --> 00:04:37,210
I know that because I looked up the official documentation

90
00:04:37,210 --> 00:04:39,420
of that package.

91
00:04:39,420 --> 00:04:41,080
And whilst in there,

92
00:04:41,080 --> 00:04:44,750
you see a slightly different syntax here,

93
00:04:44,750 --> 00:04:48,000
in the end, that's just some advanced JavaScript

94
00:04:48,000 --> 00:04:50,290
into which we'll dive a little bit later

95
00:04:50,290 --> 00:04:51,650
but this just means

96
00:04:51,650 --> 00:04:53,400
that we get an object here.

97
00:04:53,400 --> 00:04:54,940
It just looks a bit strange

98
00:04:54,940 --> 00:04:59,230
but we will learn more about this syntax later.

99
00:04:59,230 --> 00:05:00,290
But long story short,

100
00:05:00,290 --> 00:05:02,350
what we get here will be an object

101
00:05:02,350 --> 00:05:04,400
with different methods.

102
00:05:04,400 --> 00:05:06,870
We can call these methods in the place

103
00:05:06,870 --> 00:05:08,783
where we wanna generate an ID.

104
00:05:09,620 --> 00:05:12,830
So here I will reference this uuid object,

105
00:05:12,830 --> 00:05:14,480
which we required,

106
00:05:14,480 --> 00:05:17,760
and there indeed we have a v4 method

107
00:05:17,760 --> 00:05:19,830
that we should execute.

108
00:05:19,830 --> 00:05:21,340
There are different methods

109
00:05:21,340 --> 00:05:25,200
but v4 will give us a good unique ID,

110
00:05:25,200 --> 00:05:27,260
which is randomly generated

111
00:05:27,260 --> 00:05:29,623
but guaranteed to be unique.

112
00:05:31,140 --> 00:05:33,470
And it will give us a string actually,

113
00:05:33,470 --> 00:05:36,480
so what we get here will be some text, a string,

114
00:05:36,480 --> 00:05:41,343
and that will add such a ID to this restaurant object.

115
00:05:42,240 --> 00:05:44,520
And then we'll just save that as before,

116
00:05:44,520 --> 00:05:47,400
and hence, any new restaurants that we add

117
00:05:47,400 --> 00:05:50,090
should have such a unique ID.

118
00:05:50,090 --> 00:05:51,770
Now, of course, that doesn't help us

119
00:05:51,770 --> 00:05:53,700
with the existing restaurants,

120
00:05:53,700 --> 00:05:56,470
so we could delete all of them

121
00:05:56,470 --> 00:05:59,640
and recreate them or what I will do here,

122
00:05:59,640 --> 00:06:03,250
we simply add an ID field manually here

123
00:06:03,250 --> 00:06:05,150
in the restaurants.json file

124
00:06:05,150 --> 00:06:09,190
and just add some made-up unique IDs here,

125
00:06:09,190 --> 00:06:14,190
like r1, r2, and then maybe here r3.

126
00:06:15,460 --> 00:06:16,293
Like that.

127
00:06:17,140 --> 00:06:19,830
Now these existing restaurants have IDs

128
00:06:19,830 --> 00:06:22,300
and any newly added restaurants

129
00:06:22,300 --> 00:06:23,943
will also have IDs.

130
00:06:25,900 --> 00:06:30,900
And with that, we now can use these newly added ID fields

131
00:06:31,460 --> 00:06:34,490
to also fix our templates

132
00:06:34,490 --> 00:06:36,650
because there in restaurants.ejs,

133
00:06:36,650 --> 00:06:40,860
we are using that restaurant-item include

134
00:06:40,860 --> 00:06:42,840
and in that included file,

135
00:06:42,840 --> 00:06:44,110
we have that link,

136
00:06:44,110 --> 00:06:48,370
which is important once we click View Restaurant.

137
00:06:48,370 --> 00:06:53,370
And at the moment, this always points at /restaurants/r1

138
00:06:53,560 --> 00:06:56,190
but that was only a placeholder.

139
00:06:56,190 --> 00:06:59,540
Here instead of having always r1,

140
00:06:59,540 --> 00:07:02,807
I, of course, wanna use the specific unique ID

141
00:07:02,807 --> 00:07:06,310
of the restaurant item that is being displayed here,

142
00:07:06,310 --> 00:07:08,530
just as I'm using the specific name,

143
00:07:08,530 --> 00:07:11,440
and cuisine, and address, and description

144
00:07:11,440 --> 00:07:13,473
of a specific restaurant.

145
00:07:14,920 --> 00:07:17,040
Now, we learned how we can get

146
00:07:17,040 --> 00:07:19,480
some restaurant-specific data here,

147
00:07:19,480 --> 00:07:22,380
and put that into the HTML code.

148
00:07:22,380 --> 00:07:26,150
We just need to use some EJS syntax again.

149
00:07:26,150 --> 00:07:31,150
So we again use this smaller percentage equal sign tag here,

150
00:07:31,410 --> 00:07:32,890
and then the closing tag,

151
00:07:32,890 --> 00:07:37,590
and between that, we can now access some field,

152
00:07:37,590 --> 00:07:39,810
some property in our restaurant,

153
00:07:39,810 --> 00:07:42,580
and when EJS then parses this template,

154
00:07:42,580 --> 00:07:44,690
it will get the concrete value

155
00:07:44,690 --> 00:07:48,140
and put that into the rendered HTML content,

156
00:07:48,140 --> 00:07:50,263
and therefore, also into that link.

157
00:07:51,900 --> 00:07:54,790
So here we can now access restaurant.id,

158
00:07:54,790 --> 00:07:57,040
which is that newly added field,

159
00:07:57,040 --> 00:08:00,390
and that will then generate different links,

160
00:08:00,390 --> 00:08:05,363
different ref attribute values for different restaurants.

161
00:08:07,240 --> 00:08:09,000
And with all of that done,

162
00:08:09,000 --> 00:08:11,320
if you save all those files,

163
00:08:11,320 --> 00:08:13,600
and you start your server,

164
00:08:13,600 --> 00:08:15,870
or you already have it running probably,

165
00:08:15,870 --> 00:08:18,720
so then it's enough if you just save,

166
00:08:18,720 --> 00:08:20,480
if you go back to your page

167
00:08:20,480 --> 00:08:22,620
and you browse those restaurants,

168
00:08:22,620 --> 00:08:26,930
you will see that these different view restaurant links lead

169
00:08:26,930 --> 00:08:29,840
to different detail pages.

170
00:08:29,840 --> 00:08:34,270
And you see that here I'm outputting a different ID

171
00:08:34,270 --> 00:08:37,179
for those different restaurants.

172
00:08:37,179 --> 00:08:39,403
So that is working.

173
00:08:40,520 --> 00:08:43,830
Now, we can also test adding a new restaurant,

174
00:08:43,830 --> 00:08:48,830
and for that, I'll add the Munich Fines Restaurant here

175
00:08:49,850 --> 00:08:54,850
in the Greatstreet 5 in Munich,

176
00:08:56,110 --> 00:08:58,210
and that's some German food, let's say,

177
00:08:58,210 --> 00:09:03,150
and the website is munich-awesome.com, whatever.

178
00:09:03,150 --> 00:09:05,770
And it's in Munich.

179
00:09:05,770 --> 00:09:08,640
That's where I live.

180
00:09:08,640 --> 00:09:09,920
So that's what I'll add here,

181
00:09:09,920 --> 00:09:14,040
and if we now click share restaurant, that works.

182
00:09:14,040 --> 00:09:15,930
And if we now browse restaurants,

183
00:09:15,930 --> 00:09:17,570
we see that restaurant here,

184
00:09:17,570 --> 00:09:19,654
and if I click on View Restaurant,

185
00:09:19,654 --> 00:09:21,750
we see that indeed here,

186
00:09:21,750 --> 00:09:24,640
we also got this ID now

187
00:09:24,640 --> 00:09:28,920
and that's now one of these auto-generated unique IDs.

188
00:09:28,920 --> 00:09:32,170
It's pretty cryptic but it's random and unique,

189
00:09:32,170 --> 00:09:33,433
which is pretty good.

190
00:09:35,160 --> 00:09:37,000
Now, of course, we also wanna work

191
00:09:37,000 --> 00:09:39,010
on that restaurant-detail page

192
00:09:39,010 --> 00:09:42,360
and output concrete restaurant data here,

193
00:09:42,360 --> 00:09:45,363
not just some placeholders and the ID.

194
00:09:46,230 --> 00:09:48,700
And therefore, what we should do next

195
00:09:48,700 --> 00:09:50,210
is we should make sure

196
00:09:50,210 --> 00:09:53,750
that we get the complete restaurant object

197
00:09:53,750 --> 00:09:55,460
into this template here

198
00:09:55,460 --> 00:10:00,000
so that in there, we can do something like this,

199
00:10:00,000 --> 00:10:04,520
and access restaurant.name here, for example.

200
00:10:04,520 --> 00:10:07,143
That's probably what we wanna do there.

201
00:10:08,160 --> 00:10:13,160
And for this, we'll need a way of turning this ID,

202
00:10:13,430 --> 00:10:16,020
which we get here in this route,

203
00:10:16,020 --> 00:10:17,930
this ID parameter,

204
00:10:17,930 --> 00:10:22,930
into a restaurant object from our restaurants.json file.

205
00:10:23,450 --> 00:10:27,200
Now, maybe you find a way of achieving this on your own.

206
00:10:27,200 --> 00:10:29,170
Otherwise, we'll do that together

207
00:10:29,170 --> 00:10:30,633
in the next lecture.