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.