‫Let's now do the first part
‫of building the dynamic node farm website
‫with just building the templates
‫that will hold the actual data.
‫And remember that our goal is to build this kind
‫of dynamic website where we have an overview
‫where we have all the products,
‫and then each product has its detail page
‫just like I showed you before.
‫And this data here is of course read from the json file,
‫so if we change the json file, for example,
‫deleting one of these products then reloading this page,
‫then that product should be gone from here.
‫Or if we changed some of this data here or the name,
‫well, then, that should update here on the site.
‫Again because it's a dynamic website
‫built from the data that's in the json file.
‫So as I mentioned,
‫the first step is to actually build these templates,
‫one for this overview page,
‫and one for the product detail page.
‫And we're gonna start with the detail page,
‫and I'm gonna build these templates
‫based on these data web pages that we have here
‫in the templates folder.
‫So let's take a look at them.
‫So we have overview and product, and again,
‫we're gonna start with the product.html.
‫So we have here the product name then this image here
‫which is actually an emoji, but that doesn't really matter.
‫So instead of having to request the real images
‫for all of these different products,
‫I chose to just go with emojis.
‫That's much easier.
‫The same actually for the style.
‫So I have all the CSS style inlined into the html pages
‫so that we don't have to make multiple requests
‫to getting these different data, right?
‫Because actually,
‫each different file will trigger a different request, okay?
‫Remember before where we had the request
‫for the five icon, right?
‫So we saw one request for the root, so for the main page,
‫and then one request for that image, and what that means
‫is that each asset,
‫so each piece that is part of the website,
‫will get its own request,
‫and we will then have to handle that,
‫and we don't want to do that,
‫and so I simply inlined the style into these html pages.
‫All right, so here's a bunch of style, style, style,
‫and then here we have the,
‫well, the name of the product somewhere.
‫Oh yeah, here, so it's the name of the product.
‫Here is the product image, which again is just an emoji,
‫but it comes here from this image field.
‫So we have this field called image.
‫Right?
‫Then we have where it comes from, some of the ingredients,
‫and price, and also the description down here, okay?
‫But again, all of this comes from these different fields.
‫So let's take a look at the fields we have.
‫So product name, image, from, nutrients, quantity, price,
‫whether it's organic or not, and the description.
‫So what we're gonna do now is to basically replace
‫all of these pieces that we want to add dynamically
‫with a placeholder, and we're then later
‫with our code replace that placeholder
‫with the real piece of data, okay?
‫So let's start here with the product name,
‫and so I'm gonna go ahead and delete that
‫and then put a placeholder here.
‫And I can do anything that I want for a placeholder.
‫I just like to go in this case with something like this.
‫So...
‫Product name, and then percentage and then the curly braces.
‫So again, this could be anything that we wanted,
‫but we want to find something
‫that is probably not on the page
‫so that we don't replace anything wrong
‫so anything that we actually don't want to replace, okay?
‫And I could put something like this here, okay?
‫And then replace all of that, but I think, like this,
‫it looks nice, and it's easy to recognize.
‫And so all we have to do is to go ahead and
‫put this all over here,
‫and I'm then going to replace, of course, these names.
‫So here we have the nutrients.
‫Here we have the quantity.
‫And here I have the price.
‫Down here we have the price again, you see.
‫And the price is just the number, okay?
‫The euro sign here just stays right there
‫because the price that we have is actually just a number.
‫Let's take a look at that right here in json.
‫So we have just 6.50 but not the currency.
‫And actually the same here, so let's grab that
‫and copy it here very quick, and yeah,
‫actually, I forgot to replace this one,
‫so this is the from.
‫And let's actually write out from, not in uppercase,
‫so that this text makes a bit more sense.
‫So for example, from Portugal or from Spain or whatever.
‫Oh, what's that here?
‫Okay, I guess I just wrote in the middle of product name.
‫So nutrients.
‫Okay.
‫Oh, and down here we have, of course, the description,
‫so let's replace that as well.
‫Oh, of course I need to get this one back
‫and
‫so description.
‫Next up we have these images, so the avocado,
‫and so I'm hitting a couple of command V's,
‫pasting this here, and so I can edit these here
‫all at the same time.
‫Okay, then image and, oh, something here in the title.
‫We also want to replace the image up here
‫and the product name also.
‫So.
‫Product name here
‫and here the image
‫so that this one as well will get replaced dynamically.
‫All right, now just one more thing
‫which is a bit more complex.
‫Where is it?
‫All right, it's here.
‫So some products are organic, and some are not.
‫And so there is a class in the CSS that will get added
‫to all of these elements when they are not organic, okay?
‫So that is this class here.
‫So when it's not organic, then it should not be displayed,
‫so this organic badge here.
‫And just to show you what I'm talking about,
‫the organic badge is this thing here, okay?
‫So we do not want to display that
‫in case it is false in the json, so what we're gonna do here
‫is to actually add another placeholder here
‫or actually inside of the class,
‫and so I'm gonna call this one not
‫organic.
‫And you will see why a bit later, okay?
‫When we replace this, it will make a bit more sense to you.
‫All right, so I think this one is done,
‫and I simply overwrote everything that we had.
‫So let me now just call this template
‫product, okay?
‫So this one is done.
‫Let's move on to the next one, the overview.
‫And this one is actually gonna be a bit different,
‫and let me show you why that is.
‫So again, we have all the SCC inlined here,
‫and now we have this cards container,
‫and then for each of the products, we have one card.
‫So each of these cards here has this figure tag, right?
‫Now we actually do not know how many
‫of these cards will be here in this overview, right?
‫Imagine we have 10 products in the json.
‫Then we need 10 of these cards.
‫But imagine that we only have one or two.
‫Well then, we do not want all the 10 cards but only two.
‫So how are we gonna do that?
‫Well, we will actually create just another template
‫where there's only one card in there,
‫and we will then include one of these templates
‫for each of the cards that we want,
‫so each of the products in the json file.
‫All right, make sense?
‫So let's call this here the template overview.
‫And I'm gonna go ahead and create the template card.
‫So what I'm gonna do here is to now, as I mentioned,
‫now it's back at the top,
‫so I'm go ahead and grab one figure.
‫That was too much.
‫And paste it here.
‫So bring this down a little bit.
‫Okay, so each card now gets its own figure.
‫Okay, and so now what I'm gonna do
‫is to delete all of the cards from here
‫and create a placeholder here as well.
‫Product
‫cards.
‫Okay?
‫So again, later on in our code,
‫we will then create as many cards as we need here.
‫For example, if we have five products,
‫we create five cards like this.
‫We will then put them together into one string
‫and then replace product cards with that string
‫which contains all of these different cards, all right?
‫So actually, we are done with this one.
‫Okay?
‫Because most of the stuff happens
‫inside of the template card.
‫So nothing else to replace here.
‫I'm just coming down here to copy this here,
‫and now it's very simple for us
‫to replace what we need here.
‫So this here is the image, and we actually have it twice.
‫Okay, that makes it look a bit nicer.
‫Image, image, then here we have the product name, remember?
‫Here in this place,
‫we will have again the not organic placeholder,
‫and again, this one will make more sense to you a bit later.
‫More organic, then the quantity here.
‫Then the price.
‫So we need to also actually build the link here.
‫So this one here, so the A element,
‫in case you're not really familiar with html,
‫the A element is for a link.
‫So let me actually show it to you in a real working example.
‫So when we hover here on this link,
‫down there in the left bottom corner,
‫so down here, you will see that it is slash product
‫and then ID equals to zero.
‫And this one is ID equals to one, ID equals two.
‫Okay, and if we click on that, we see it actually here.
‫So slash product and then ID equals to zero,
‫and this ID here is exactly the ID that we have in the json.
‫Okay, so this one here.
‫So the avocado is one, the goat cheese has one.
‫Sorry, the avocado has zero, of course.
‫The broccoli has two and so on and so forth.
‫And so here actually we need to build the link.
‫So product, and of course, not in uppercase.
‫So product, and the ID is
‫ID.
‫Okay?
‫So then we have to replace this ID placeholder here
‫with the correct number.
‫So zero, one, two, three, four, five, and so on and so forth
‫depending on how many products there are.
‫So suppose that we have a cheese here, okay?
‫Let's go back here.
‫Well, then the image will be this here,
‫the product name will be this, and the ID will be one.
‫Okay, and so this here will then translate
‫to ID equals to one and our handler here.
‫So this server handler here will then take care
‫of going to the right page when the product ID is one, okay?
‫So that logic is not yet implemented, but of course,
‫we're gonna do that in the next couple of lectures.
‫So we have now the templates actually built,
‫and so let's move on to the next video
‫where we will actually start to fill out the templates
‫and send back the final page to the browser.