Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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.
7149
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.