1
00:00:01,200 --> 00:00:03,310
‫Let's now do the first part

2
00:00:03,310 --> 00:00:06,860
‫of building the dynamic node farm website

3
00:00:06,860 --> 00:00:08,830
‫with just building the templates

4
00:00:08,830 --> 00:00:11,083
‫that will hold the actual data.

5
00:00:12,890 --> 00:00:15,590
‫And remember that our goal is to build this kind

6
00:00:15,590 --> 00:00:19,260
‫of dynamic website where we have an overview

7
00:00:19,260 --> 00:00:21,130
‫where we have all the products,

8
00:00:21,130 --> 00:00:24,060
‫and then each product has its detail page

9
00:00:24,060 --> 00:00:25,700
‫just like I showed you before.

10
00:00:25,700 --> 00:00:29,780
‫And this data here is of course read from the json file,

11
00:00:29,780 --> 00:00:32,660
‫so if we change the json file, for example,

12
00:00:32,660 --> 00:00:36,140
‫deleting one of these products then reloading this page,

13
00:00:36,140 --> 00:00:38,920
‫then that product should be gone from here.

14
00:00:38,920 --> 00:00:42,340
‫Or if we changed some of this data here or the name,

15
00:00:42,340 --> 00:00:45,600
‫well, then, that should update here on the site.

16
00:00:45,600 --> 00:00:47,940
‫Again because it's a dynamic website

17
00:00:47,940 --> 00:00:51,073
‫built from the data that's in the json file.

18
00:00:51,930 --> 00:00:52,830
‫So as I mentioned,

19
00:00:52,830 --> 00:00:55,540
‫the first step is to actually build these templates,

20
00:00:55,540 --> 00:00:57,930
‫one for this overview page,

21
00:00:57,930 --> 00:01:00,960
‫and one for the product detail page.

22
00:01:00,960 --> 00:01:03,773
‫And we're gonna start with the detail page,

23
00:01:04,990 --> 00:01:06,540
‫and I'm gonna build these templates

24
00:01:06,540 --> 00:01:09,250
‫based on these data web pages that we have here

25
00:01:09,250 --> 00:01:11,220
‫in the templates folder.

26
00:01:11,220 --> 00:01:12,850
‫So let's take a look at them.

27
00:01:12,850 --> 00:01:16,030
‫So we have overview and product, and again,

28
00:01:16,030 --> 00:01:19,610
‫we're gonna start with the product.html.

29
00:01:19,610 --> 00:01:22,950
‫So we have here the product name then this image here

30
00:01:22,950 --> 00:01:26,923
‫which is actually an emoji, but that doesn't really matter.

31
00:01:27,880 --> 00:01:30,210
‫So instead of having to request the real images

32
00:01:30,210 --> 00:01:33,000
‫for all of these different products,

33
00:01:33,000 --> 00:01:34,590
‫I chose to just go with emojis.

34
00:01:34,590 --> 00:01:36,210
‫That's much easier.

35
00:01:36,210 --> 00:01:37,860
‫The same actually for the style.

36
00:01:37,860 --> 00:01:42,040
‫So I have all the CSS style inlined into the html pages

37
00:01:42,040 --> 00:01:44,470
‫so that we don't have to make multiple requests

38
00:01:44,470 --> 00:01:47,500
‫to getting these different data, right?

39
00:01:47,500 --> 00:01:48,450
‫Because actually,

40
00:01:48,450 --> 00:01:53,144
‫each different file will trigger a different request, okay?

41
00:01:53,144 --> 00:01:55,860
‫Remember before where we had the request

42
00:01:55,860 --> 00:01:58,090
‫for the five icon, right?

43
00:01:58,090 --> 00:02:02,160
‫So we saw one request for the root, so for the main page,

44
00:02:02,160 --> 00:02:05,640
‫and then one request for that image, and what that means

45
00:02:05,640 --> 00:02:06,920
‫is that each asset,

46
00:02:06,920 --> 00:02:09,600
‫so each piece that is part of the website,

47
00:02:09,600 --> 00:02:10,670
‫will get its own request,

48
00:02:10,670 --> 00:02:13,540
‫and we will then have to handle that,

49
00:02:13,540 --> 00:02:14,970
‫and we don't want to do that,

50
00:02:14,970 --> 00:02:19,533
‫and so I simply inlined the style into these html pages.

51
00:02:20,560 --> 00:02:25,560
‫All right, so here's a bunch of style, style, style,

52
00:02:26,210 --> 00:02:29,073
‫and then here we have the,

53
00:02:29,980 --> 00:02:33,053
‫well, the name of the product somewhere.

54
00:02:33,053 --> 00:02:35,090
‫Oh yeah, here, so it's the name of the product.

55
00:02:35,090 --> 00:02:38,270
‫Here is the product image, which again is just an emoji,

56
00:02:38,270 --> 00:02:42,930
‫but it comes here from this image field.

57
00:02:42,930 --> 00:02:44,693
‫So we have this field called image.

58
00:02:46,740 --> 00:02:47,630
‫Right?

59
00:02:47,630 --> 00:02:51,780
‫Then we have where it comes from, some of the ingredients,

60
00:02:51,780 --> 00:02:56,257
‫and price, and also the description down here, okay?

61
00:02:56,257 --> 00:02:59,000
‫But again, all of this comes from these different fields.

62
00:02:59,000 --> 00:03:01,310
‫So let's take a look at the fields we have.

63
00:03:01,310 --> 00:03:06,037
‫So product name, image, from, nutrients, quantity, price,

64
00:03:07,280 --> 00:03:10,323
‫whether it's organic or not, and the description.

65
00:03:11,630 --> 00:03:14,890
‫So what we're gonna do now is to basically replace

66
00:03:14,890 --> 00:03:18,460
‫all of these pieces that we want to add dynamically

67
00:03:18,460 --> 00:03:21,260
‫with a placeholder, and we're then later

68
00:03:21,260 --> 00:03:24,320
‫with our code replace that placeholder

69
00:03:24,320 --> 00:03:27,750
‫with the real piece of data, okay?

70
00:03:27,750 --> 00:03:30,700
‫So let's start here with the product name,

71
00:03:30,700 --> 00:03:32,887
‫and so I'm gonna go ahead and delete that

72
00:03:32,887 --> 00:03:35,330
‫and then put a placeholder here.

73
00:03:35,330 --> 00:03:38,560
‫And I can do anything that I want for a placeholder.

74
00:03:38,560 --> 00:03:42,730
‫I just like to go in this case with something like this.

75
00:03:42,730 --> 00:03:43,563
‫So...

76
00:03:45,930 --> 00:03:50,930
‫Product name, and then percentage and then the curly braces.

77
00:03:51,050 --> 00:03:53,740
‫So again, this could be anything that we wanted,

78
00:03:53,740 --> 00:03:55,270
‫but we want to find something

79
00:03:55,270 --> 00:03:57,660
‫that is probably not on the page

80
00:03:57,660 --> 00:04:00,620
‫so that we don't replace anything wrong

81
00:04:00,620 --> 00:04:05,120
‫so anything that we actually don't want to replace, okay?

82
00:04:05,120 --> 00:04:08,570
‫And I could put something like this here, okay?

83
00:04:08,570 --> 00:04:12,260
‫And then replace all of that, but I think, like this,

84
00:04:12,260 --> 00:04:15,383
‫it looks nice, and it's easy to recognize.

85
00:04:16,460 --> 00:04:19,550
‫And so all we have to do is to go ahead and

86
00:04:21,290 --> 00:04:23,630
‫put this all over here,

87
00:04:23,630 --> 00:04:28,050
‫and I'm then going to replace, of course, these names.

88
00:04:28,050 --> 00:04:29,963
‫So here we have the nutrients.

89
00:04:32,750 --> 00:04:35,133
‫Here we have the quantity.

90
00:04:37,380 --> 00:04:39,293
‫And here I have the price.

91
00:04:41,450 --> 00:04:43,673
‫Down here we have the price again, you see.

92
00:04:45,410 --> 00:04:48,380
‫And the price is just the number, okay?

93
00:04:48,380 --> 00:04:51,280
‫The euro sign here just stays right there

94
00:04:51,280 --> 00:04:55,630
‫because the price that we have is actually just a number.

95
00:04:55,630 --> 00:04:59,470
‫Let's take a look at that right here in json.

96
00:04:59,470 --> 00:05:02,840
‫So we have just 6.50 but not the currency.

97
00:05:02,840 --> 00:05:07,240
‫And actually the same here, so let's grab that

98
00:05:07,240 --> 00:05:10,510
‫and copy it here very quick, and yeah,

99
00:05:10,510 --> 00:05:12,960
‫actually, I forgot to replace this one,

100
00:05:12,960 --> 00:05:14,763
‫so this is the from.

101
00:05:16,920 --> 00:05:21,440
‫And let's actually write out from, not in uppercase,

102
00:05:21,440 --> 00:05:23,850
‫so that this text makes a bit more sense.

103
00:05:23,850 --> 00:05:28,320
‫So for example, from Portugal or from Spain or whatever.

104
00:05:28,320 --> 00:05:29,643
‫Oh, what's that here?

105
00:05:30,970 --> 00:05:35,380
‫Okay, I guess I just wrote in the middle of product name.

106
00:05:35,380 --> 00:05:36,363
‫So nutrients.

107
00:05:39,861 --> 00:05:40,694
‫Okay.

108
00:05:40,694 --> 00:05:44,030
‫Oh, and down here we have, of course, the description,

109
00:05:44,030 --> 00:05:45,320
‫so let's replace that as well.

110
00:05:45,320 --> 00:05:49,020
‫Oh, of course I need to get this one back

111
00:05:49,980 --> 00:05:50,820
‫and

112
00:05:51,850 --> 00:05:53,573
‫so description.

113
00:05:55,210 --> 00:05:58,963
‫Next up we have these images, so the avocado,

114
00:06:00,070 --> 00:06:03,050
‫and so I'm hitting a couple of command V's,

115
00:06:03,050 --> 00:06:07,060
‫pasting this here, and so I can edit these here

116
00:06:07,060 --> 00:06:08,363
‫all at the same time.

117
00:06:11,660 --> 00:06:16,660
‫Okay, then image and, oh, something here in the title.

118
00:06:16,680 --> 00:06:20,500
‫We also want to replace the image up here

119
00:06:20,500 --> 00:06:22,083
‫and the product name also.

120
00:06:23,030 --> 00:06:23,963
‫So.

121
00:06:27,510 --> 00:06:28,650
‫Product name here

122
00:06:29,930 --> 00:06:31,640
‫and here the image

123
00:06:31,640 --> 00:06:36,640
‫so that this one as well will get replaced dynamically.

124
00:06:36,840 --> 00:06:39,550
‫All right, now just one more thing

125
00:06:40,890 --> 00:06:42,563
‫which is a bit more complex.

126
00:06:43,870 --> 00:06:44,980
‫Where is it?

127
00:06:44,980 --> 00:06:46,290
‫All right, it's here.

128
00:06:46,290 --> 00:06:49,860
‫So some products are organic, and some are not.

129
00:06:49,860 --> 00:06:53,210
‫And so there is a class in the CSS that will get added

130
00:06:53,210 --> 00:06:58,200
‫to all of these elements when they are not organic, okay?

131
00:06:58,200 --> 00:07:00,430
‫So that is this class here.

132
00:07:00,430 --> 00:07:03,680
‫So when it's not organic, then it should not be displayed,

133
00:07:03,680 --> 00:07:05,383
‫so this organic badge here.

134
00:07:06,460 --> 00:07:08,930
‫And just to show you what I'm talking about,

135
00:07:08,930 --> 00:07:12,790
‫the organic badge is this thing here, okay?

136
00:07:12,790 --> 00:07:14,830
‫So we do not want to display that

137
00:07:14,830 --> 00:07:19,530
‫in case it is false in the json, so what we're gonna do here

138
00:07:19,530 --> 00:07:22,660
‫is to actually add another placeholder here

139
00:07:22,660 --> 00:07:25,433
‫or actually inside of the class,

140
00:07:26,360 --> 00:07:29,410
‫and so I'm gonna call this one not

141
00:07:30,370 --> 00:07:31,203
‫organic.

142
00:07:32,340 --> 00:07:34,280
‫And you will see why a bit later, okay?

143
00:07:34,280 --> 00:07:38,650
‫When we replace this, it will make a bit more sense to you.

144
00:07:38,650 --> 00:07:41,890
‫All right, so I think this one is done,

145
00:07:41,890 --> 00:07:45,313
‫and I simply overwrote everything that we had.

146
00:07:46,260 --> 00:07:48,180
‫So let me now just call this template

147
00:07:50,690 --> 00:07:53,110
‫product, okay?

148
00:07:53,110 --> 00:07:54,360
‫So this one is done.

149
00:07:54,360 --> 00:07:57,850
‫Let's move on to the next one, the overview.

150
00:07:57,850 --> 00:08:01,040
‫And this one is actually gonna be a bit different,

151
00:08:01,040 --> 00:08:03,053
‫and let me show you why that is.

152
00:08:04,030 --> 00:08:07,690
‫So again, we have all the SCC inlined here,

153
00:08:07,690 --> 00:08:10,510
‫and now we have this cards container,

154
00:08:10,510 --> 00:08:14,640
‫and then for each of the products, we have one card.

155
00:08:14,640 --> 00:08:19,373
‫So each of these cards here has this figure tag, right?

156
00:08:20,640 --> 00:08:23,050
‫Now we actually do not know how many

157
00:08:23,050 --> 00:08:27,280
‫of these cards will be here in this overview, right?

158
00:08:27,280 --> 00:08:30,200
‫Imagine we have 10 products in the json.

159
00:08:30,200 --> 00:08:32,660
‫Then we need 10 of these cards.

160
00:08:32,660 --> 00:08:34,920
‫But imagine that we only have one or two.

161
00:08:34,920 --> 00:08:39,340
‫Well then, we do not want all the 10 cards but only two.

162
00:08:39,340 --> 00:08:42,190
‫So how are we gonna do that?

163
00:08:42,190 --> 00:08:46,350
‫Well, we will actually create just another template

164
00:08:46,350 --> 00:08:49,180
‫where there's only one card in there,

165
00:08:49,180 --> 00:08:51,730
‫and we will then include one of these templates

166
00:08:51,730 --> 00:08:54,230
‫for each of the cards that we want,

167
00:08:54,230 --> 00:08:57,520
‫so each of the products in the json file.

168
00:08:57,520 --> 00:08:59,605
‫All right, make sense?

169
00:08:59,605 --> 00:09:02,693
‫So let's call this here the template overview.

170
00:09:06,480 --> 00:09:09,313
‫And I'm gonna go ahead and create the template card.

171
00:09:14,220 --> 00:09:18,690
‫So what I'm gonna do here is to now, as I mentioned,

172
00:09:18,690 --> 00:09:19,973
‫now it's back at the top,

173
00:09:21,400 --> 00:09:24,023
‫so I'm go ahead and grab one figure.

174
00:09:24,950 --> 00:09:26,153
‫That was too much.

175
00:09:27,290 --> 00:09:29,623
‫And paste it here.

176
00:09:31,120 --> 00:09:32,823
‫So bring this down a little bit.

177
00:09:35,450 --> 00:09:39,493
‫Okay, so each card now gets its own figure.

178
00:09:41,190 --> 00:09:44,280
‫Okay, and so now what I'm gonna do

179
00:09:44,280 --> 00:09:47,380
‫is to delete all of the cards from here

180
00:09:50,610 --> 00:09:53,283
‫and create a placeholder here as well.

181
00:09:57,320 --> 00:09:58,200
‫Product

182
00:10:00,270 --> 00:10:01,360
‫cards.

183
00:10:01,360 --> 00:10:02,430
‫Okay?

184
00:10:02,430 --> 00:10:04,970
‫So again, later on in our code,

185
00:10:04,970 --> 00:10:08,830
‫we will then create as many cards as we need here.

186
00:10:08,830 --> 00:10:10,890
‫For example, if we have five products,

187
00:10:10,890 --> 00:10:13,660
‫we create five cards like this.

188
00:10:13,660 --> 00:10:16,780
‫We will then put them together into one string

189
00:10:16,780 --> 00:10:20,090
‫and then replace product cards with that string

190
00:10:20,090 --> 00:10:24,320
‫which contains all of these different cards, all right?

191
00:10:24,320 --> 00:10:27,563
‫So actually, we are done with this one.

192
00:10:28,870 --> 00:10:29,703
‫Okay?

193
00:10:29,703 --> 00:10:31,440
‫Because most of the stuff happens

194
00:10:31,440 --> 00:10:34,780
‫inside of the template card.

195
00:10:34,780 --> 00:10:36,910
‫So nothing else to replace here.

196
00:10:36,910 --> 00:10:40,113
‫I'm just coming down here to copy this here,

197
00:10:41,780 --> 00:10:44,730
‫and now it's very simple for us

198
00:10:44,730 --> 00:10:48,190
‫to replace what we need here.

199
00:10:48,190 --> 00:10:52,373
‫So this here is the image, and we actually have it twice.

200
00:10:54,860 --> 00:10:56,893
‫Okay, that makes it look a bit nicer.

201
00:10:58,270 --> 00:11:03,227
‫Image, image, then here we have the product name, remember?

202
00:11:07,080 --> 00:11:07,990
‫Here in this place,

203
00:11:07,990 --> 00:11:12,670
‫we will have again the not organic placeholder,

204
00:11:12,670 --> 00:11:15,943
‫and again, this one will make more sense to you a bit later.

205
00:11:17,470 --> 00:11:21,143
‫More organic, then the quantity here.

206
00:11:25,540 --> 00:11:27,163
‫Then the price.

207
00:11:30,210 --> 00:11:34,070
‫So we need to also actually build the link here.

208
00:11:34,070 --> 00:11:36,290
‫So this one here, so the A element,

209
00:11:36,290 --> 00:11:39,460
‫in case you're not really familiar with html,

210
00:11:39,460 --> 00:11:42,093
‫the A element is for a link.

211
00:11:43,030 --> 00:11:47,073
‫So let me actually show it to you in a real working example.

212
00:11:48,810 --> 00:11:52,040
‫So when we hover here on this link,

213
00:11:52,040 --> 00:11:54,830
‫down there in the left bottom corner,

214
00:11:54,830 --> 00:11:59,000
‫so down here, you will see that it is slash product

215
00:11:59,000 --> 00:12:01,770
‫and then ID equals to zero.

216
00:12:01,770 --> 00:12:06,760
‫And this one is ID equals to one, ID equals two.

217
00:12:06,760 --> 00:12:09,480
‫Okay, and if we click on that, we see it actually here.

218
00:12:09,480 --> 00:12:13,440
‫So slash product and then ID equals to zero,

219
00:12:13,440 --> 00:12:18,440
‫and this ID here is exactly the ID that we have in the json.

220
00:12:19,970 --> 00:12:22,085
‫Okay, so this one here.

221
00:12:22,085 --> 00:12:25,900
‫So the avocado is one, the goat cheese has one.

222
00:12:25,900 --> 00:12:28,083
‫Sorry, the avocado has zero, of course.

223
00:12:29,110 --> 00:12:33,380
‫The broccoli has two and so on and so forth.

224
00:12:33,380 --> 00:12:36,463
‫And so here actually we need to build the link.

225
00:12:38,420 --> 00:12:42,113
‫So product, and of course, not in uppercase.

226
00:12:43,060 --> 00:12:46,370
‫So product, and the ID is

227
00:12:49,920 --> 00:12:51,360
‫ID.

228
00:12:51,360 --> 00:12:52,280
‫Okay?

229
00:12:52,280 --> 00:12:56,850
‫So then we have to replace this ID placeholder here

230
00:12:56,850 --> 00:12:58,250
‫with the correct number.

231
00:12:58,250 --> 00:13:02,430
‫So zero, one, two, three, four, five, and so on and so forth

232
00:13:02,430 --> 00:13:04,930
‫depending on how many products there are.

233
00:13:04,930 --> 00:13:09,510
‫So suppose that we have a cheese here, okay?

234
00:13:09,510 --> 00:13:11,050
‫Let's go back here.

235
00:13:11,050 --> 00:13:14,440
‫Well, then the image will be this here,

236
00:13:14,440 --> 00:13:18,463
‫the product name will be this, and the ID will be one.

237
00:13:19,400 --> 00:13:21,480
‫Okay, and so this here will then translate

238
00:13:21,480 --> 00:13:26,113
‫to ID equals to one and our handler here.

239
00:13:27,230 --> 00:13:30,950
‫So this server handler here will then take care

240
00:13:30,950 --> 00:13:35,950
‫of going to the right page when the product ID is one, okay?

241
00:13:36,060 --> 00:13:39,220
‫So that logic is not yet implemented, but of course,

242
00:13:39,220 --> 00:13:42,103
‫we're gonna do that in the next couple of lectures.

243
00:13:43,010 --> 00:13:47,456
‫So we have now the templates actually built,

244
00:13:47,456 --> 00:13:50,940
‫and so let's move on to the next video

245
00:13:50,940 --> 00:13:54,440
‫where we will actually start to fill out the templates

246
00:13:54,440 --> 00:13:57,073
‫and send back the final page to the browser.