1 00:00:00,950 --> 00:00:04,120 ‫So now that we understand the basics of PUG, 2 00:00:04,120 --> 00:00:06,620 ‫it's time to do some refactoring and to 3 00:00:06,620 --> 00:00:10,160 ‫fit our code better into the NVC architecture. 4 00:00:10,160 --> 00:00:12,490 ‫And so that after that, we can finally 5 00:00:12,490 --> 00:00:14,603 ‫start building the website itself. 6 00:00:16,140 --> 00:00:18,790 ‫And just like we did with our resources, 7 00:00:18,790 --> 00:00:20,680 ‫I'm also going to create a router 8 00:00:20,680 --> 00:00:23,030 ‫and a controller for the views. 9 00:00:23,030 --> 00:00:26,210 ‫So basically a file where I can put all the routes 10 00:00:26,210 --> 00:00:29,123 ‫that we need in order to build our dynamic website. 11 00:00:31,520 --> 00:00:34,340 ‫So let's call this the view 12 00:00:35,980 --> 00:00:37,610 ‫routes. 13 00:00:37,610 --> 00:00:38,443 ‫Okay. 14 00:00:40,650 --> 00:00:43,423 ‫And let's start by requiring express. 15 00:00:50,630 --> 00:00:51,463 ‫Okay. 16 00:00:51,463 --> 00:00:52,960 ‫And so this is going to work the exact 17 00:00:52,960 --> 00:00:55,023 ‫same way as the other routers. 18 00:00:56,270 --> 00:00:57,790 ‫So creating a router 19 00:01:01,260 --> 00:01:02,533 ‫express dot. 20 00:01:03,538 --> 00:01:07,083 ‫A router and then by the end, we export it. 21 00:01:16,220 --> 00:01:19,460 ‫And so now, lets actually get these routes here 22 00:01:21,300 --> 00:01:25,710 ‫and copy them into the routes file. 23 00:01:25,710 --> 00:01:29,210 ‫Now here it's of course, no longer app, but router. 24 00:01:29,210 --> 00:01:30,553 ‫So let's replace that. 25 00:01:32,910 --> 00:01:33,800 ‫Alright. 26 00:01:33,800 --> 00:01:35,990 ‫And so that's actually okay. 27 00:01:35,990 --> 00:01:39,610 ‫So in the other routes, we used to use d dot route 28 00:01:39,610 --> 00:01:42,130 ‫where we then specified the route itself 29 00:01:42,130 --> 00:01:45,720 ‫and then after that, we used like get, post, patch, 30 00:01:45,720 --> 00:01:48,900 ‫or delete, so all these http methods. 31 00:01:48,900 --> 00:01:51,320 ‫But in this case, that's not going to be necessary 32 00:01:51,320 --> 00:01:54,810 ‫because all we're ever going to do is to use get. 33 00:01:54,810 --> 00:01:57,200 ‫And so it's good like this. 34 00:01:57,200 --> 00:01:59,620 ‫Next up, we actually need to mount this 35 00:01:59,620 --> 00:02:01,423 ‫router to our application. 36 00:02:02,780 --> 00:02:06,830 ‫So here, in the app, and so just like we did before, 37 00:02:06,830 --> 00:02:09,573 ‫we start by requiring it. 38 00:02:13,280 --> 00:02:14,803 ‫So, view router. 39 00:02:16,690 --> 00:02:18,438 ‫And now, let's actually mount it, 40 00:02:18,438 --> 00:02:20,938 ‫here right past the first one. 41 00:02:22,719 --> 00:02:25,822 ‫So view router, but the difference of this one 42 00:02:25,822 --> 00:02:30,822 ‫is that this is actually mounted right on the route URL. 43 00:02:31,280 --> 00:02:34,350 ‫Okay, so whenever a URL looks like this, 44 00:02:34,350 --> 00:02:37,110 ‫it will go straight into the view router. 45 00:02:37,110 --> 00:02:38,650 ‫And I'm not sure if that's going to work. 46 00:02:38,650 --> 00:02:41,770 ‫Maybe we will have to put it here at the end. 47 00:02:41,770 --> 00:02:43,723 ‫But let's see, once we test that. 48 00:02:44,770 --> 00:02:46,010 ‫Okay. 49 00:02:46,010 --> 00:02:49,600 ‫Now just as a final step, let's, just like before, 50 00:02:49,600 --> 00:02:53,540 ‫actually export these functions here into a controller. 51 00:02:53,540 --> 00:02:56,640 ‫And so, just like before, 52 00:02:56,640 --> 00:02:58,623 ‫let's create a views controller. 53 00:03:03,720 --> 00:03:05,310 ‫Alright. 54 00:03:05,310 --> 00:03:07,543 ‫And so that's copied and stuff. 55 00:03:09,610 --> 00:03:14,303 ‫So this one here is going to be called the get overview. 56 00:03:17,000 --> 00:03:19,800 ‫So export dot get overview 57 00:03:22,240 --> 00:03:26,210 ‫equals this function, okay. 58 00:03:26,210 --> 00:03:27,410 ‫For now at least. 59 00:03:27,410 --> 00:03:29,230 ‫So of course all of this here, 60 00:03:29,230 --> 00:03:31,890 ‫we're going to be replaced with the real controller 61 00:03:31,890 --> 00:03:35,220 ‫which is actually going to get the data for the overview 62 00:03:35,220 --> 00:03:37,030 ‫and then render that data. 63 00:03:37,030 --> 00:03:39,410 ‫Okay, but for now, we just have this very simple 64 00:03:39,410 --> 00:03:42,963 ‫controller function just to see if everything works. 65 00:03:44,290 --> 00:03:46,300 ‫Alright, so lets now actually go 66 00:03:46,300 --> 00:03:48,273 ‫add and import that controller here. 67 00:04:00,570 --> 00:04:04,223 ‫So controllers and then views controller. 68 00:04:05,100 --> 00:04:09,230 ‫Okay, and so here, we will have views controller 69 00:04:10,090 --> 00:04:14,320 ‫dot get overview, alright. 70 00:04:14,320 --> 00:04:15,913 ‫And now, here the same. 71 00:04:19,610 --> 00:04:22,543 ‫Export dot get tour. 72 00:04:26,056 --> 00:04:26,889 ‫Okay. 73 00:04:35,010 --> 00:04:38,100 ‫And this one here was actually just a test. 74 00:04:38,100 --> 00:04:40,220 ‫So lets get rid of it. 75 00:04:40,220 --> 00:04:44,150 ‫And now, finally we actually do not want a route 76 00:04:44,150 --> 00:04:45,950 ‫called overview but instead, 77 00:04:45,950 --> 00:04:49,040 ‫we want to show the overview right when we open the page. 78 00:04:49,040 --> 00:04:52,380 ‫Okay, so just like we have it here. 79 00:04:52,380 --> 00:04:55,920 ‫So this is the route page and whenever that is requested, 80 00:04:55,920 --> 00:04:58,570 ‫it will serve this overview page. 81 00:04:58,570 --> 00:05:02,343 ‫Okay, and so that's exactly what we want in our application. 82 00:05:03,950 --> 00:05:08,290 ‫Alright, so lets test it out. 83 00:05:08,290 --> 00:05:11,083 ‫And so this one here should now be the overview page. 84 00:05:12,700 --> 00:05:16,230 ‫And indeed, it is, okay. 85 00:05:16,230 --> 00:05:18,930 ‫And now here, lets reload this one as well 86 00:05:18,930 --> 00:05:21,420 ‫just to see if everything still works. 87 00:05:21,420 --> 00:05:24,400 ‫And it does, great. 88 00:05:24,400 --> 00:05:28,723 ‫And of course, we could still access our API as well. 89 00:05:30,640 --> 00:05:33,403 ‫So lets say API, V1, 90 00:05:34,290 --> 00:05:35,293 ‫slash tours. 91 00:05:36,289 --> 00:05:38,860 ‫And that should then give us all of our tours 92 00:05:38,860 --> 00:05:40,963 ‫and that we return for this endpoint. 93 00:05:41,832 --> 00:05:42,665 ‫Okay. 94 00:05:44,010 --> 00:05:45,690 ‫Fantastic, so with this, 95 00:05:45,690 --> 00:05:48,070 ‫we're actually ready to really start building 96 00:05:48,070 --> 00:05:50,450 ‫this overview page in the next lecture. 97 00:05:50,450 --> 00:05:52,183 ‫So I can't wait to see you there.