‫So now that we understand the basics of PUG,
‫it's time to do some refactoring and to
‫fit our code better into the NVC architecture.
‫And so that after that, we can finally
‫start building the website itself.
‫And just like we did with our resources,
‫I'm also going to create a router
‫and a controller for the views.
‫So basically a file where I can put all the routes
‫that we need in order to build our dynamic website.
‫So let's call this the view
‫routes.
‫Okay.
‫And let's start by requiring express.
‫Okay.
‫And so this is going to work the exact
‫same way as the other routers.
‫So creating a router
‫express dot.
‫A router and then by the end, we export it.
‫And so now, lets actually get these routes here
‫and copy them into the routes file.
‫Now here it's of course, no longer app, but router.
‫So let's replace that.
‫Alright.
‫And so that's actually okay.
‫So in the other routes, we used to use d dot route
‫where we then specified the route itself
‫and then after that, we used like get, post, patch,
‫or delete, so all these http methods.
‫But in this case, that's not going to be necessary
‫because all we're ever going to do is to use get.
‫And so it's good like this.
‫Next up, we actually need to mount this
‫router to our application.
‫So here, in the app, and so just like we did before,
‫we start by requiring it.
‫So, view router.
‫And now, let's actually mount it,
‫here right past the first one.
‫So view router, but the difference of this one
‫is that this is actually mounted right on the route URL.
‫Okay, so whenever a URL looks like this,
‫it will go straight into the view router.
‫And I'm not sure if that's going to work.
‫Maybe we will have to put it here at the end.
‫But let's see, once we test that.
‫Okay.
‫Now just as a final step, let's, just like before,
‫actually export these functions here into a controller.
‫And so, just like before,
‫let's create a views controller.
‫Alright.
‫And so that's copied and stuff.
‫So this one here is going to be called the get overview.
‫So export dot get overview
‫equals this function, okay.
‫For now at least.
‫So of course all of this here,
‫we're going to be replaced with the real controller
‫which is actually going to get the data for the overview
‫and then render that data.
‫Okay, but for now, we just have this very simple
‫controller function just to see if everything works.
‫Alright, so lets now actually go
‫add and import that controller here.
‫So controllers and then views controller.
‫Okay, and so here, we will have views controller
‫dot get overview, alright.
‫And now, here the same.
‫Export dot get tour.
‫Okay.
‫And this one here was actually just a test.
‫So lets get rid of it.
‫And now, finally we actually do not want a route
‫called overview but instead,
‫we want to show the overview right when we open the page.
‫Okay, so just like we have it here.
‫So this is the route page and whenever that is requested,
‫it will serve this overview page.
‫Okay, and so that's exactly what we want in our application.
‫Alright, so lets test it out.
‫And so this one here should now be the overview page.
‫And indeed, it is, okay.
‫And now here, lets reload this one as well
‫just to see if everything still works.
‫And it does, great.
‫And of course, we could still access our API as well.
‫So lets say API, V1,
‫slash tours.
‫And that should then give us all of our tours
‫and that we return for this endpoint.
‫Okay.
‫Fantastic, so with this,
‫we're actually ready to really start building
‫this overview page in the next lecture.
‫So I can't wait to see you there.