All language subtitles for 011 HTML Templating_ Building the Templates_Downloadly.ir_en

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.