1 00:00:01,150 --> 00:00:02,170 ‫In this lecture, 2 00:00:02,170 --> 00:00:05,883 ‫we're going to start to really build the tour overview page. 3 00:00:07,500 --> 00:00:09,170 ‫And remember, that this is how 4 00:00:09,170 --> 00:00:11,900 ‫the overview page looks like right now. 5 00:00:11,900 --> 00:00:13,790 ‫So it doesn't have any real content, 6 00:00:13,790 --> 00:00:16,860 ‫and so that's what we're gonna add in this video. 7 00:00:16,860 --> 00:00:19,740 ‫So we're here in this root route, and so again, 8 00:00:19,740 --> 00:00:22,803 ‫that's where the overview will be, okay? 9 00:00:23,670 --> 00:00:25,210 ‫So in our view router, 10 00:00:25,210 --> 00:00:28,650 ‫it is then of course this route, okay? 11 00:00:28,650 --> 00:00:30,650 ‫And so the controller that is in charge 12 00:00:30,650 --> 00:00:34,697 ‫of rendering this page is the getoverview controller, okay? 13 00:00:34,697 --> 00:00:37,650 ‫And so let's first go to here, 14 00:00:37,650 --> 00:00:39,840 ‫and lay out the steps that we're going to take 15 00:00:39,840 --> 00:00:41,373 ‫in order to render this page. 16 00:00:42,650 --> 00:00:44,950 ‫So, the first thing that we need to do 17 00:00:44,950 --> 00:00:47,750 ‫is to actually get all the tour data 18 00:00:47,750 --> 00:00:49,273 ‫from our collection, right? 19 00:00:51,120 --> 00:00:52,170 ‫So get tour data 20 00:00:54,740 --> 00:00:56,010 ‫from collection. 21 00:00:56,010 --> 00:00:58,310 ‫Then second, we're going to build our template 22 00:01:00,290 --> 00:01:01,420 ‫and we're not going to do that here 23 00:01:01,420 --> 00:01:03,630 ‫in this controller function of course. 24 00:01:03,630 --> 00:01:05,333 ‫But, let's still write it here. 25 00:01:06,800 --> 00:01:11,800 ‫So, build template, and then finally render that template, 26 00:01:14,210 --> 00:01:18,360 ‫using the tour data from step one. 27 00:01:18,360 --> 00:01:20,350 ‫So, starting with the first step here 28 00:01:20,350 --> 00:01:22,930 ‫get the tour data from the collection, 29 00:01:22,930 --> 00:01:25,013 ‫that means then of course 30 00:01:25,013 --> 00:01:27,413 ‫we first need to actually import the tour model. 31 00:01:31,100 --> 00:01:34,030 ‫So, that's something that we already did 32 00:01:34,030 --> 00:01:35,513 ‫a lot of times before. 33 00:01:36,490 --> 00:01:38,340 ‫That's actually one level up, 34 00:01:38,340 --> 00:01:39,673 ‫and then in models. 35 00:01:41,390 --> 00:01:42,593 ‫and tour model. 36 00:01:45,300 --> 00:01:46,470 ‫And then we're also going to need 37 00:01:46,470 --> 00:01:48,163 ‫or catchAsync function, 38 00:01:51,240 --> 00:01:52,290 ‫because then of course 39 00:01:52,290 --> 00:01:55,513 ‫this get overview will become an asynchronous function. 40 00:02:04,190 --> 00:02:09,190 ‫All right, so let's mark this one as async. 41 00:02:11,340 --> 00:02:14,120 ‫We now also need next here in order to make 42 00:02:14,120 --> 00:02:16,123 ‫the catchAsync function actually work. 43 00:02:22,690 --> 00:02:25,770 ‫Okay, and so I hope that now you actually 44 00:02:25,770 --> 00:02:28,020 ‫start to see the value of us having built 45 00:02:28,020 --> 00:02:29,850 ‫all the api stuff and all the codes that we 46 00:02:29,850 --> 00:02:33,380 ‫have did up to this point, so that all we need to do now 47 00:02:33,380 --> 00:02:37,680 ‫is to really plug all these pieces together, okay? 48 00:02:37,680 --> 00:02:40,530 ‫So, we already know now how to do all of this stuff. 49 00:02:40,530 --> 00:02:44,060 ‫We already have our tour model working correctly. 50 00:02:44,060 --> 00:02:46,033 ‫So now all of this is very easy. 51 00:02:47,460 --> 00:02:51,880 ‫So const tours is equal to await. 52 00:02:51,880 --> 00:02:54,620 ‫So again, nothing new at this point. 53 00:02:54,620 --> 00:02:58,423 ‫And find, all of them basically, all right? 54 00:02:59,310 --> 00:03:01,700 ‫And now what are we actually going to do 55 00:03:01,700 --> 00:03:03,960 ‫with this tours data? 56 00:03:03,960 --> 00:03:06,510 ‫Well, we're going to have to paste all this tour data 57 00:03:06,510 --> 00:03:09,700 ‫into the template, so that in there we can actually use 58 00:03:09,700 --> 00:03:12,610 ‫and display it on the website, right? 59 00:03:12,610 --> 00:03:14,910 ‫And so, that's actually very easy to do. 60 00:03:14,910 --> 00:03:18,300 ‫All we need to do is to put it here in this object 61 00:03:18,300 --> 00:03:22,200 ‫that is going to get pasted into the overview template 62 00:03:22,200 --> 00:03:24,770 ‫in this case, okay? 63 00:03:24,770 --> 00:03:28,960 ‫So, very easy, all we need to say is tours. 64 00:03:28,960 --> 00:03:32,050 ‫So, that's the same as tours equals to tours 65 00:03:32,050 --> 00:03:35,910 ‫and again you already know that starting with ES 6 66 00:03:35,910 --> 00:03:37,460 ‫it's enough to do it like this. 67 00:03:40,100 --> 00:03:42,810 ‫Great, so whenever there is now a request 68 00:03:42,810 --> 00:03:45,860 ‫for the overview page, so basically our homepage 69 00:03:45,860 --> 00:03:49,290 ‫of our dynamically rendered website, all the tour data 70 00:03:49,290 --> 00:03:52,070 ‫will be retrieved from our database here 71 00:03:52,070 --> 00:03:55,210 ‫and then that data will get pasted into our template. 72 00:03:55,210 --> 00:03:56,920 ‫And so now all we need to do 73 00:03:56,920 --> 00:04:00,150 ‫is to actually build that template, right? 74 00:04:00,150 --> 00:04:03,560 ‫So let's move over to overview.pug. 75 00:04:03,560 --> 00:04:08,270 ‫Here we can actually get rid of this h1 placeholder here. 76 00:04:08,270 --> 00:04:10,410 ‫And, now I want to take a look actually 77 00:04:10,410 --> 00:04:12,683 ‫at the static html file here again. 78 00:04:13,950 --> 00:04:18,320 ‫So, that's in the public folder, 79 00:04:18,320 --> 00:04:22,120 ‫and then overview.html, okay? 80 00:04:22,120 --> 00:04:24,370 ‫So, we already built the header 81 00:04:24,370 --> 00:04:26,000 ‫in one of the previous lectures 82 00:04:26,000 --> 00:04:29,780 ‫and so now it's time to build that part here. 83 00:04:29,780 --> 00:04:31,670 ‫Now, when we first built the template, 84 00:04:31,670 --> 00:04:34,450 ‫I actually had it wrong in my html file 85 00:04:34,450 --> 00:04:37,010 ‫and I had section class overview, 86 00:04:37,010 --> 00:04:38,950 ‫but in your starter file you should have had 87 00:04:38,950 --> 00:04:41,410 ‫this main with the class main. 88 00:04:41,410 --> 00:04:43,430 ‫And, so I believe in your file there's actually 89 00:04:43,430 --> 00:04:46,240 ‫a small text explaining that, okay? 90 00:04:46,240 --> 00:04:49,050 ‫But, anyway, we actually deleted that part 91 00:04:49,050 --> 00:04:50,720 ‫from our base template. 92 00:04:50,720 --> 00:04:52,480 ‫So, remember that, 93 00:04:52,480 --> 00:04:55,370 ‫that here in the content we actually have no html. 94 00:04:55,370 --> 00:04:57,800 ‫So that main element that in the html 95 00:04:57,800 --> 00:05:00,510 ‫is right now, nowhere to be found. 96 00:05:00,510 --> 00:05:05,500 ‫And so now we need that in our overview, okay? 97 00:05:05,500 --> 00:05:09,790 ‫So, let's create this part of the html in the overview 98 00:05:09,790 --> 00:05:12,923 ‫because after that we then have all these repeating cards. 99 00:05:14,200 --> 00:05:15,770 ‫So, let's take a look at that as well 100 00:05:15,770 --> 00:05:17,380 ‫before copying the code. 101 00:05:17,380 --> 00:05:19,450 ‫So, you see that we have these cards here 102 00:05:19,450 --> 00:05:23,340 ‫and so basically, each of these cards, 103 00:05:23,340 --> 00:05:24,990 ‫so each of these elements here, 104 00:05:24,990 --> 00:05:27,000 ‫is what I call one card. 105 00:05:27,000 --> 00:05:29,813 ‫And, so basically we're going to have nine cards. 106 00:05:30,650 --> 00:05:34,490 ‫So, these nine cards on this overview page. 107 00:05:34,490 --> 00:05:37,560 ‫And it's nine cards because right now we have nine tours, 108 00:05:37,560 --> 00:05:39,080 ‫but of course, it could be less 109 00:05:39,080 --> 00:05:42,780 ‫or more of these cards, right? 110 00:05:42,780 --> 00:05:45,540 ‫But anyway, what's important to note here 111 00:05:45,540 --> 00:05:48,150 ‫is that these cards actually repeat themselves 112 00:05:48,150 --> 00:05:49,890 ‫over and over again. 113 00:05:49,890 --> 00:05:52,263 ‫So we have this huge card element here. 114 00:05:54,240 --> 00:05:56,340 ‫And so there's the first one, 115 00:05:56,340 --> 00:06:01,083 ‫and then there are many equal repeating elements afterwards. 116 00:06:01,940 --> 00:06:02,820 ‫Okay? 117 00:06:02,820 --> 00:06:05,920 ‫And so, actually I went ahead and created a pug template 118 00:06:05,920 --> 00:06:07,460 ‫for this card only, 119 00:06:07,460 --> 00:06:10,020 ‫so that we don't have to write it manually now 120 00:06:10,020 --> 00:06:12,900 ‫and waste a bunch of time doing that, all right? 121 00:06:12,900 --> 00:06:15,660 ‫So that would just make the course unnecessary long 122 00:06:15,660 --> 00:06:18,540 ‫and so I decided to create this template beforehand 123 00:06:18,540 --> 00:06:20,010 ‫for us to use now. 124 00:06:20,010 --> 00:06:22,970 ‫Now of course if you want to practice your pug skills 125 00:06:22,970 --> 00:06:26,010 ‫a bit more, then just feel free to pause the video 126 00:06:26,010 --> 00:06:30,040 ‫at this point and then translate all of this code into pug. 127 00:06:30,040 --> 00:06:30,873 ‫All right? 128 00:06:30,873 --> 00:06:33,410 ‫And when you're done, you can then come back. 129 00:06:33,410 --> 00:06:36,400 ‫But now I will actually go ahead and use that template. 130 00:06:36,400 --> 00:06:39,680 ‫And that's here in dev data and then templates 131 00:06:39,680 --> 00:06:43,630 ‫and tour cards template, okay? 132 00:06:43,630 --> 00:06:46,404 ‫And so that's the entire card for one card, 133 00:06:46,404 --> 00:06:50,333 ‫basically translated to pug code, okay? 134 00:06:51,210 --> 00:06:52,773 ‫So let's copy all of that, 135 00:06:54,090 --> 00:06:58,830 ‫put it here in the overview, okay? 136 00:06:58,830 --> 00:07:01,700 ‫And then let's keep in mind, that before that, 137 00:07:01,700 --> 00:07:05,030 ‫we also need this main and this card container 138 00:07:05,030 --> 00:07:06,630 ‫so let's just copy this as well. 139 00:07:10,440 --> 00:07:12,570 ‫So just here as a reference, 140 00:07:12,570 --> 00:07:15,840 ‫so that we can now write main main 141 00:07:16,720 --> 00:07:21,567 ‫and in there we have a dev called card container. 142 00:07:23,870 --> 00:07:24,703 ‫Okay? 143 00:07:24,703 --> 00:07:27,100 ‫And then as the name says, that container 144 00:07:27,100 --> 00:07:29,533 ‫is going to contain the card. 145 00:07:30,610 --> 00:07:33,240 ‫So now let's indent this, because right now 146 00:07:33,240 --> 00:07:35,720 ‫it's not really inside of the card container. 147 00:07:35,720 --> 00:07:38,490 ‫So right now it would be inside of main 148 00:07:38,490 --> 00:07:39,930 ‫but that's not what we want. 149 00:07:39,930 --> 00:07:42,450 ‫And so, I select everything and hit tab. 150 00:07:42,450 --> 00:07:44,770 ‫I hit tab again, and so now we see 151 00:07:44,770 --> 00:07:45,950 ‫it's at the correct level. 152 00:07:45,950 --> 00:07:47,693 ‫It's inside of the card container. 153 00:07:49,310 --> 00:07:51,820 ‫But actually it's still not 100% correct 154 00:07:51,820 --> 00:07:52,995 ‫because this element 155 00:07:52,995 --> 00:07:56,540 ‫should also be inside of the card element. 156 00:07:56,540 --> 00:07:58,780 ‫And for some reason, copying this template 157 00:07:58,780 --> 00:08:00,600 ‫from one file to the other, 158 00:08:00,600 --> 00:08:03,050 ‫kinda messed this code up a little bit. 159 00:08:03,050 --> 00:08:07,270 ‫And so be careful with that when you paste the code 160 00:08:07,270 --> 00:08:08,830 ‫around like this. 161 00:08:08,830 --> 00:08:11,490 ‫So in our original template, it was all correct 162 00:08:11,490 --> 00:08:13,870 ‫as you see, but then when we copied it, 163 00:08:13,870 --> 00:08:15,023 ‫it kind of messed up. 164 00:08:16,160 --> 00:08:17,760 ‫So, let's close that. 165 00:08:17,760 --> 00:08:19,340 ‫We can actually also close this, 166 00:08:19,340 --> 00:08:21,800 ‫we don't need it anymore, and in fact, 167 00:08:21,800 --> 00:08:25,030 ‫also the base template and the tour template. 168 00:08:25,030 --> 00:08:27,580 ‫So we're only working with the overview now. 169 00:08:27,580 --> 00:08:30,377 ‫And so right now we have this one card here. 170 00:08:30,377 --> 00:08:33,990 ‫And now as you see, it's also a completely static card. 171 00:08:33,990 --> 00:08:35,593 ‫So it doesn't yet use the data 172 00:08:35,593 --> 00:08:38,750 ‫that we pasted into the template, right? 173 00:08:38,750 --> 00:08:42,180 ‫So it has this static image, it has all of this text here, 174 00:08:42,180 --> 00:08:44,660 ‫and it doesn't use the variable at all. 175 00:08:44,660 --> 00:08:46,960 ‫Okay, because that part, I actually wanted 176 00:08:46,960 --> 00:08:48,660 ‫to do together with you. 177 00:08:48,660 --> 00:08:51,440 ‫Because in fact that is the most important part. 178 00:08:51,440 --> 00:08:53,730 ‫So creating all of this template like this 179 00:08:53,730 --> 00:08:56,370 ‫is not difficult and what really matters 180 00:08:56,370 --> 00:09:00,140 ‫is how to actually fill it up with data, okay? 181 00:09:00,140 --> 00:09:02,290 ‫And so that's what we're going to do next. 182 00:09:02,290 --> 00:09:03,760 ‫But for now let's take a look 183 00:09:03,760 --> 00:09:06,409 ‫at how this looks like right now. 184 00:09:06,409 --> 00:09:09,370 ‫Then keep in mind that we should only have one card, 185 00:09:09,370 --> 00:09:11,070 ‫and not nine, okay? 186 00:09:11,070 --> 00:09:14,240 ‫Because again, we have only one static card element 187 00:09:14,240 --> 00:09:15,083 ‫at this point. 188 00:09:16,760 --> 00:09:21,690 ‫Reload this, and that doesn't look so right. 189 00:09:21,690 --> 00:09:24,833 ‫So, let's try to figure out what's going on here. 190 00:09:25,920 --> 00:09:28,083 ‫So we have our main element as we created, 191 00:09:29,020 --> 00:09:31,940 ‫then we have our card container as well. 192 00:09:31,940 --> 00:09:32,970 ‫But then for some reason, 193 00:09:32,970 --> 00:09:34,723 ‫there is a main in there again. 194 00:09:36,230 --> 00:09:40,180 ‫Umm ah okay, I of course need to delete 195 00:09:40,180 --> 00:09:43,223 ‫this original html element that we have there. 196 00:09:44,150 --> 00:09:45,563 ‫So, let's try that again. 197 00:09:46,920 --> 00:09:50,460 ‫And now, now that looks better, okay? 198 00:09:50,460 --> 00:09:52,020 ‫Now the image here is still missing 199 00:09:52,020 --> 00:09:54,340 ‫but never mind about that for now. 200 00:09:54,340 --> 00:09:55,930 ‫What's important is that we got 201 00:09:55,930 --> 00:09:59,570 ‫this nice looking card here, okay? 202 00:09:59,570 --> 00:10:01,360 ‫Now, the thing is that of course we want 203 00:10:01,360 --> 00:10:04,940 ‫to have one card for each of the tours, right? 204 00:10:04,940 --> 00:10:07,220 ‫And so basically, what we want to do now 205 00:10:07,220 --> 00:10:10,343 ‫is to loop through that tours array that we pasted 206 00:10:10,343 --> 00:10:13,070 ‫into the template, right? 207 00:10:13,070 --> 00:10:14,950 ‫So, basically this tours variable. 208 00:10:14,950 --> 00:10:17,250 ‫And keep in mind, that this is an array 209 00:10:17,250 --> 00:10:20,400 ‫because it contains multiple tour documents in it. 210 00:10:20,400 --> 00:10:22,410 ‫And so let's now loop over this array 211 00:10:22,410 --> 00:10:26,641 ‫and create one card for each of the tour documents, okay? 212 00:10:26,641 --> 00:10:29,420 ‫And luckily, that's very easy to do in pug 213 00:10:29,420 --> 00:10:33,860 ‫because basically pug comes with built in loops, okay? 214 00:10:33,860 --> 00:10:34,960 ‫And so now we can do 215 00:10:36,130 --> 00:10:40,530 ‫each tour in tours, okay? 216 00:10:40,530 --> 00:10:43,970 ‫And so tours here is the variable that we pasted in 217 00:10:43,970 --> 00:10:45,460 ‫and then in each iteration 218 00:10:45,460 --> 00:10:47,830 ‫the current variable will be called tour. 219 00:10:47,830 --> 00:10:52,210 ‫We could call it x or x y z or whatever 220 00:10:52,210 --> 00:10:55,790 ‫but it makes sense to just call it tour, okay? 221 00:10:55,790 --> 00:10:58,810 ‫And so in each iteration what comes then in there 222 00:10:58,810 --> 00:11:01,800 ‫is what will be printed basically. 223 00:11:01,800 --> 00:11:05,363 ‫So this again needs to be indented one more level. 224 00:11:06,450 --> 00:11:08,740 ‫So that basically it is inside 225 00:11:08,740 --> 00:11:11,380 ‫of this loop declaration here. 226 00:11:11,380 --> 00:11:14,753 ‫Great, so let's see how that looks like now. 227 00:11:15,800 --> 00:11:19,380 ‫And so we should now get nine identical cards. 228 00:11:19,380 --> 00:11:24,380 ‫And indeed, that's exactly what happened, all right? 229 00:11:24,400 --> 00:11:25,730 ‫Now of course this data here 230 00:11:25,730 --> 00:11:28,870 ‫is still not created dynamically. 231 00:11:28,870 --> 00:11:30,760 ‫And that is actually exactly what we're going 232 00:11:30,760 --> 00:11:32,373 ‫to fix in the next video.