All language subtitles for 009 Building the Tour Overview - Part 1_Downloadly.ir_en

In this lecture,

we're going to start to really build the tour overview page.

And remember, that this is how

the overview page looks like right now.

So it doesn't have any real content,

and so that's what we're gonna add in this video.

So we're here in this root route, and so again,

that's where the overview will be, okay?

So in our view router,

it is then of course this route, okay?

And so the controller that is in charge

of rendering this page is the getoverview controller, okay?

And so let's first go to here,

and lay out the steps that we're going to take

in order to render this page.

So, the first thing that we need to do

is to actually get all the tour data

from our collection, right?

So get tour data

from collection.

Then second, we're going to build our template

and we're not going to do that here

in this controller function of course.

But, let's still write it here.

So, build template, and then finally render that template,

using the tour data from step one.

So, starting with the first step here

get the tour data from the collection,

that means then of course

we first need to actually import the tour model.

So, that's something that we already did

a lot of times before.

That's actually one level up,

and then in models.

and tour model.

And then we're also going to need

or catchAsync function,

because then of course

this get overview will become an asynchronous function.

All right, so let's mark this one as async.

We now also need next here in order to make

the catchAsync function actually work.

Okay, and so I hope that now you actually

start to see the value of us having built

all the api stuff and all the codes that we

have did up to this point, so that all we need to do now

is to really plug all these pieces together, okay?

So, we already know now how to do all of this stuff.

We already have our tour model working correctly.

So now all of this is very easy.

So const tours is equal to await.

So again, nothing new at this point.

And find, all of them basically, all right?

And now what are we actually going to do

with this tours data?

Well, we're going to have to paste all this tour data

into the template, so that in there we can actually use

and display it on the website, right?

And so, that's actually very easy to do.

All we need to do is to put it here in this object

that is going to get pasted into the overview template

in this case, okay?

So, very easy, all we need to say is tours.

So, that's the same as tours equals to tours

and again you already know that starting with ES 6

it's enough to do it like this.

Great, so whenever there is now a request

for the overview page, so basically our homepage

of our dynamically rendered website, all the tour data

will be retrieved from our database here

and then that data will get pasted into our template.

And so now all we need to do

is to actually build that template, right?

So let's move over to overview.pug.

Here we can actually get rid of this h1 placeholder here.

And, now I want to take a look actually

at the static html file here again.

So, that's in the public folder,

and then overview.html, okay?

So, we already built the header

in one of the previous lectures

and so now it's time to build that part here.

Now, when we first built the template,

I actually had it wrong in my html file

and I had section class overview,

but in your starter file you should have had

this main with the class main.

And, so I believe in your file there's actually

a small text explaining that, okay?

But, anyway, we actually deleted that part

from our base template.

So, remember that,

that here in the content we actually have no html.

So that main element that in the html

is right now, nowhere to be found.

And so now we need that in our overview, okay?

So, let's create this part of the html in the overview

because after that we then have all these repeating cards.

So, let's take a look at that as well

before copying the code.

So, you see that we have these cards here

and so basically, each of these cards,

so each of these elements here,

is what I call one card.

And, so basically we're going to have nine cards.

So, these nine cards on this overview page.

And it's nine cards because right now we have nine tours,

but of course, it could be less

or more of these cards, right?

But anyway, what's important to note here

is that these cards actually repeat themselves

over and over again.

So we have this huge card element here.

And so there's the first one,

and then there are many equal repeating elements afterwards.

Okay?

And so, actually I went ahead and created a pug template

for this card only,

so that we don't have to write it manually now

and waste a bunch of time doing that, all right?

So that would just make the course unnecessary long

and so I decided to create this template beforehand

for us to use now.

Now of course if you want to practice your pug skills

a bit more, then just feel free to pause the video

at this point and then translate all of this code into pug.

All right?

And when you're done, you can then come back.

But now I will actually go ahead and use that template.

And that's here in dev data and then templates

and tour cards template, okay?

And so that's the entire card for one card,

basically translated to pug code, okay?

So let's copy all of that,

put it here in the overview, okay?

And then let's keep in mind, that before that,

we also need this main and this card container

so let's just copy this as well.

So just here as a reference,

so that we can now write main main

and in there we have a dev called card container.

Okay?

And then as the name says, that container

is going to contain the card.

So now let's indent this, because right now

it's not really inside of the card container.

So right now it would be inside of main

but that's not what we want.

And so, I select everything and hit tab.

I hit tab again, and so now we see

it's at the correct level.

It's inside of the card container.

But actually it's still not 100% correct

because this element

should also be inside of the card element.

And for some reason, copying this template

from one file to the other,

kinda messed this code up a little bit.

And so be careful with that when you paste the code

around like this.

So in our original template, it was all correct

as you see, but then when we copied it,

it kind of messed up.

So, let's close that.

We can actually also close this,

we don't need it anymore, and in fact,

also the base template and the tour template.

So we're only working with the overview now.

And so right now we have this one card here.

And now as you see, it's also a completely static card.

So it doesn't yet use the data

that we pasted into the template, right?

So it has this static image, it has all of this text here,

and it doesn't use the variable at all.

Okay, because that part, I actually wanted

to do together with you.

Because in fact that is the most important part.

So creating all of this template like this

is not difficult and what really matters

is how to actually fill it up with data, okay?

And so that's what we're going to do next.

But for now let's take a look

at how this looks like right now.

Then keep in mind that we should only have one card,

and not nine, okay?

Because again, we have only one static card element

at this point.

Reload this, and that doesn't look so right.

So, let's try to figure out what's going on here.

So we have our main element as we created,

then we have our card container as well.

But then for some reason,

there is a main in there again.

Umm ah okay, I of course need to delete

this original html element that we have there.

So, let's try that again.

And now, now that looks better, okay?

Now the image here is still missing

but never mind about that for now.

What's important is that we got

this nice looking card here, okay?

Now, the thing is that of course we want

to have one card for each of the tours, right?

And so basically, what we want to do now

is to loop through that tours array that we pasted

into the template, right?

So, basically this tours variable.

And keep in mind, that this is an array

because it contains multiple tour documents in it.

And so let's now loop over this array

and create one card for each of the tour documents, okay?

And luckily, that's very easy to do in pug

because basically pug comes with built in loops, okay?

And so now we can do

each tour in tours, okay?

And so tours here is the variable that we pasted in

and then in each iteration

the current variable will be called tour.

We could call it x or x y z or whatever

but it makes sense to just call it tour, okay?

And so in each iteration what comes then in there

is what will be printed basically.

So this again needs to be indented one more level.

So that basically it is inside

of this loop declaration here.

Great, so let's see how that looks like now.

And so we should now get nine identical cards.

And indeed, that's exactly what happened, all right?

Now of course this data here

is still not created dynamically.

And that is actually exactly what we're going

to fix in the next video.