‫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.