1
00:00:07,460 --> 00:00:08,780
Welcome back.

2
00:00:08,810 --> 00:00:17,810
In the previous video, we able to implement the model part of our design pattern and you can see that

3
00:00:17,810 --> 00:00:27,230
we wrote everything inside the silver dot case file, but the responsibility of the server file is to

4
00:00:27,230 --> 00:00:31,010
run our application, meaning to start our server.

5
00:00:31,460 --> 00:00:37,190
So it means that we should keep less code on the server dot js file.

6
00:00:37,400 --> 00:00:41,900
And this one is for only one model that is employees.

7
00:00:42,170 --> 00:00:48,890
Let's say that we are building a complex application where we have multiple model.

8
00:00:48,920 --> 00:00:55,910
Let's take block application, for example, for block application at least we need more than three

9
00:00:55,910 --> 00:01:02,570
model that is the host model, user model, comment model and many more.

10
00:01:02,660 --> 00:01:09,710
So if we are trying to keep all the code on the server file, this file will be bloated.

11
00:01:09,710 --> 00:01:13,430
In that way our code will not be all that readable.

12
00:01:13,460 --> 00:01:19,910
That is why we need to move some part of application to use MVC design pattern.

13
00:01:20,000 --> 00:01:22,270
So let me show you where our logic lies.

14
00:01:22,290 --> 00:01:25,130
Remember, this is a route, right?

15
00:01:25,130 --> 00:01:28,760
And inside this route we have a couple of sections.

16
00:01:29,090 --> 00:01:34,640
One is the end point and then the other one is our handler.

17
00:01:34,640 --> 00:01:39,230
And this is where our business logic lies, this handler.

18
00:01:39,650 --> 00:01:43,220
So we are going to put this handler on each file.

19
00:01:43,220 --> 00:01:48,500
And to be able to achieve that, we have what is called express routing.

20
00:01:48,500 --> 00:01:49,670
So what does it mean?

21
00:01:49,670 --> 00:01:53,870
We are going to move this one to a file called routing.

22
00:01:54,110 --> 00:02:00,590
So we inside our project, we are going to create one folder for route.

23
00:02:01,220 --> 00:02:01,820
Great.

24
00:02:02,150 --> 00:02:06,710
And for this, let's create one file for employee route.

25
00:02:06,710 --> 00:02:12,920
Or I can call this one as route dot because I already have one module.

26
00:02:13,340 --> 00:02:21,080
So the next step is that we need to require express because we need the routing from Express.

27
00:02:21,730 --> 00:02:28,670
When you say routing, it simply means that how we can navigate inside our server to consume or use

28
00:02:28,670 --> 00:02:31,130
some resources in our application.

29
00:02:31,370 --> 00:02:34,610
So here sorry I missed some typo mistake here.

30
00:02:34,610 --> 00:02:36,830
You're going to be as ex press.

31
00:02:37,010 --> 00:02:37,580
Great.

32
00:02:37,580 --> 00:02:45,140
So here we make instance of router from express dot router.

33
00:02:45,440 --> 00:02:53,570
So on the instance of this express router, which is this one, we have all the HTTP method.

34
00:02:53,570 --> 00:02:54,800
So check it out.

35
00:02:54,800 --> 00:03:05,780
When I make use of router dot gates we have it dot post we have it dot put we have it, dot delete we

36
00:03:05,780 --> 00:03:06,350
have it.

37
00:03:06,350 --> 00:03:14,270
So for this one we can extract this handler from here and then place it inside our router.

38
00:03:14,840 --> 00:03:17,150
So the first one is for the creation, right?

39
00:03:17,150 --> 00:03:23,450
So I will select this one and I will come here and now place it here.

40
00:03:23,630 --> 00:03:26,450
So the first one is going to be great.

41
00:03:26,450 --> 00:03:27,470
So here we go.

42
00:03:27,500 --> 00:03:35,540
Our MC is of post and here our pass in the first argument and that is the end point and next one is

43
00:03:35,540 --> 00:03:37,490
going to be our handler.

44
00:03:37,520 --> 00:03:43,340
So let's get back to the server file and now let's select the handler which ends here.

45
00:03:43,610 --> 00:03:44,150
Right?

46
00:03:44,150 --> 00:03:51,680
So let's cut it and now let's get back to the router and now let's place it inside as a second element

47
00:03:51,680 --> 00:03:53,270
to this function call.

48
00:03:53,270 --> 00:03:54,980
And here we go.

49
00:03:55,130 --> 00:04:04,880
So when I save it, now we have extracted the logic on our file to a separate file called Express Routing.

50
00:04:05,030 --> 00:04:08,150
So it is what we call express routing.

51
00:04:08,150 --> 00:04:10,550
So let's get continue on.

52
00:04:10,610 --> 00:04:13,400
So now how can we use this file?

53
00:04:13,430 --> 00:04:13,880
Great.

54
00:04:13,880 --> 00:04:15,230
So now let's save this one.

55
00:04:15,230 --> 00:04:17,480
And now this one doesn't exist.

56
00:04:17,480 --> 00:04:21,230
So it means that our application has been broken.

57
00:04:21,230 --> 00:04:26,810
If I go ahead and then make a request to create employee, let's have a look.

58
00:04:26,810 --> 00:04:28,100
You can see that.

59
00:04:28,100 --> 00:04:29,960
Well, it's supposed to be.

60
00:04:30,860 --> 00:04:34,130
Posts and here there is no ID here.

61
00:04:34,730 --> 00:04:35,930
So let me save it.

62
00:04:35,930 --> 00:04:37,430
And now let me send.

63
00:04:37,460 --> 00:04:43,940
You can see that there is no route for that because on a server file, we don't have any route that

64
00:04:43,940 --> 00:04:50,880
matches this one because we have extracted the function on this file to this file.

65
00:04:50,900 --> 00:04:53,630
So how are we going to make use of it?

66
00:04:53,660 --> 00:04:55,460
Now, here we go.

67
00:04:55,490 --> 00:05:03,990
The next step is that we need to export module dock's export and is equal to the router.

68
00:05:04,010 --> 00:05:07,190
So here we go on a server file.

69
00:05:07,190 --> 00:05:12,670
We are going to require the router and here you go.

70
00:05:12,680 --> 00:05:14,770
I have the auto import.

71
00:05:14,780 --> 00:05:15,350
Perfect.

72
00:05:15,350 --> 00:05:17,360
So how are you going to use it?

73
00:05:17,510 --> 00:05:23,450
Now we are going to use the router as a middleware.

74
00:05:23,630 --> 00:05:30,080
Remember for upload use we can also pass in any route.

75
00:05:30,500 --> 00:05:35,000
For this one, it can accept any HTTP method.

76
00:05:35,090 --> 00:05:36,500
Before we continue.

77
00:05:36,530 --> 00:05:38,240
Let me show you something here.

78
00:05:38,270 --> 00:05:47,870
Let's say we have this route for a slash I we say anything great and I'll pass in my callback function,

79
00:05:47,870 --> 00:05:50,870
which request and then the response.

80
00:05:51,020 --> 00:05:54,410
And let me send some text by saying that.

81
00:05:55,680 --> 00:06:00,270
I will match any endpoint.

82
00:06:02,090 --> 00:06:04,090
Great for this one.

83
00:06:04,100 --> 00:06:13,400
It supports any kind of HTTP method, whether posts, request, delete, pulls or gets.

84
00:06:13,400 --> 00:06:21,350
So let's see if I go to the tender client and let me add a new request so I can duplicate this one and

85
00:06:21,350 --> 00:06:24,440
let's rename this one to anything.

86
00:06:27,760 --> 00:06:31,390
So now let's select any of this HTTP method here.

87
00:06:31,390 --> 00:06:32,620
Let me collapse it.

88
00:06:32,680 --> 00:06:33,340
And this.

89
00:06:33,380 --> 00:06:35,710
I'm going to be forced slash anything.

90
00:06:35,980 --> 00:06:44,110
Now when I hit st you can see that I go back the response if I change to post and I send you can see

91
00:06:44,110 --> 00:06:48,430
I go back the response if I change to delete.

92
00:06:49,210 --> 00:06:53,740
I would get back their response if I change to, let's say, Patch.

93
00:06:53,770 --> 00:06:55,400
I'll get back their response.

94
00:06:55,420 --> 00:07:01,420
So the take away here is that app dot use matches any HTTP method.

95
00:07:01,630 --> 00:07:08,800
If that's the case, then we can use our function here and pass in here so we can now remove this one.

96
00:07:08,800 --> 00:07:15,850
And here you go, you pass in the end point and you bring in our router as that.

97
00:07:16,000 --> 00:07:19,450
So with this one, everything remains the same.

98
00:07:19,570 --> 00:07:24,670
So back to my collection here or my request here, let me make a request.

99
00:07:24,910 --> 00:07:26,860
Well, we got four or four.

100
00:07:26,860 --> 00:07:29,770
It means that we are not doing something correct.

101
00:07:29,770 --> 00:07:36,340
So let's get back to the router here and let's look at the path this one is forward slash and inside

102
00:07:36,340 --> 00:07:42,280
the server is also for a slide because there is no endpoint like forward slash employees.

103
00:07:42,280 --> 00:07:46,630
So in that way, let's bring it here as employees.

104
00:07:48,440 --> 00:07:49,060
Great.

105
00:07:49,070 --> 00:07:49,720
Save it.

106
00:07:49,730 --> 00:07:52,010
And now let's go ahead and make the request.

107
00:07:52,010 --> 00:07:55,310
And now you can see that everything works fine.

108
00:07:56,120 --> 00:07:59,620
So next step is that let's work on the get all employee.

109
00:07:59,630 --> 00:08:06,920
So our cut this one from here and now inside the router here, I will paste it here and so I'm going

110
00:08:06,920 --> 00:08:11,210
to be as router don't get.

111
00:08:12,110 --> 00:08:13,310
And for slash.

112
00:08:13,310 --> 00:08:15,860
And here you're going to be our callback function.

113
00:08:15,860 --> 00:08:25,490
So here let's cut the callback function from here and cut it and let's place it inside the router and

114
00:08:25,490 --> 00:08:26,360
that is it.

115
00:08:26,360 --> 00:08:29,450
So let's go ahead and then remove this one.

116
00:08:30,020 --> 00:08:32,780
You can see how we are cleaning up our file.

117
00:08:32,809 --> 00:08:35,720
The next one is going to be our update.

118
00:08:35,720 --> 00:08:44,120
So I'll cut this one from here and now inside the router here, let's paste it down here and now let's

119
00:08:44,120 --> 00:08:47,810
bring in router dot put.

120
00:08:50,190 --> 00:08:55,650
Then you pass in for a slash, and here is our callback handler.

121
00:08:55,860 --> 00:08:57,360
So let's expand it.

122
00:08:57,360 --> 00:09:00,000
And now let's select everything from here.

123
00:09:00,180 --> 00:09:03,450
Cut it and let's place it here.

124
00:09:03,690 --> 00:09:04,420
Great.

125
00:09:04,440 --> 00:09:07,590
So now we are done with the input requests.

126
00:09:07,620 --> 00:09:12,300
The next one is going to be the gate requests.

127
00:09:12,420 --> 00:09:15,780
So back here, I can now remove this one.

128
00:09:16,200 --> 00:09:17,520
Next one is delete.

129
00:09:17,520 --> 00:09:17,970
Sorry.

130
00:09:17,970 --> 00:09:24,960
So I'll cut it and here let me pass it here and going to be router dot delete.

131
00:09:25,740 --> 00:09:26,550
Great.

132
00:09:26,760 --> 00:09:29,910
And for this one is for slash ID.

133
00:09:30,390 --> 00:09:33,840
I will show you how I'm implementing the path very soon.

134
00:09:34,110 --> 00:09:39,810
So here, let's cut the callback handler from here and inside the router.

135
00:09:39,810 --> 00:09:42,930
I will place it here as a second argument to that.

136
00:09:43,650 --> 00:09:48,810
The last one is going to be the gate, a single employee.

137
00:09:48,810 --> 00:09:52,020
So it's supposed to be ID but not die.

138
00:09:53,140 --> 00:09:54,850
Okay, so don't worry.

139
00:09:54,870 --> 00:10:04,470
Let's come here and let's pass it here and let's copy or cut the handler from here and let's place it

140
00:10:04,470 --> 00:10:05,130
inside.

141
00:10:05,160 --> 00:10:05,580
No.

142
00:10:05,580 --> 00:10:15,990
So here, NCP router, dirt gate and going to be forward slash some ID and I will page that.

143
00:10:16,230 --> 00:10:22,620
Now we have cleaned up our server to just file how easy it is, guys.

144
00:10:24,600 --> 00:10:25,040
Good.

145
00:10:25,080 --> 00:10:30,810
So next step is that let's test all this endpoint, make sure that everything is working fine.

146
00:10:31,320 --> 00:10:33,690
For this rule, I think I have to move it right.

147
00:10:33,690 --> 00:10:38,010
So let's go ahead and then delete this root or this request.

148
00:10:39,090 --> 00:10:43,800
So now let's test the create employees and it works fine.

149
00:10:44,580 --> 00:10:46,590
Next one is going to be single.

150
00:10:46,800 --> 00:10:48,000
It works fine.

151
00:10:48,030 --> 00:10:50,500
Delete works fine.

152
00:10:50,520 --> 00:10:54,450
Update or update is not working fine.

153
00:10:54,840 --> 00:10:55,230
Oh.

154
00:10:55,230 --> 00:11:02,550
Supposed to be forward slash id and I'll explain to you how I'm making the path in or the path.

155
00:11:03,510 --> 00:11:06,120
So here let's say and I got it.

156
00:11:06,150 --> 00:11:10,560
Lastly, it's going to be fetch or and also I got it.

157
00:11:10,560 --> 00:11:16,660
So now let's explain one important thing when it comes to express routing.

158
00:11:16,680 --> 00:11:21,480
So let's open the router and then the server file together.

159
00:11:21,900 --> 00:11:22,590
Great.

160
00:11:23,040 --> 00:11:31,380
You can see that for slash employees is common to all the endpoint, whether creating file chain deleting

161
00:11:31,380 --> 00:11:39,660
the all end with what employees with exception of updating and then deleting where we need to extend

162
00:11:39,660 --> 00:11:41,550
with some dynamic ID.

163
00:11:41,970 --> 00:11:50,040
So the take away here is that we need to bring the common endpoint to the app dot use.

164
00:11:50,190 --> 00:11:58,800
So anything that we pass in here, for example, let's say for the post, if I make use of create now

165
00:11:58,800 --> 00:12:02,820
the full you are URL has become something like this.

166
00:12:03,210 --> 00:12:08,670
It's going to be HTTP for slash employees that is inside our server.

167
00:12:08,670 --> 00:12:12,900
It will come here first and now it's going to run our function here.

168
00:12:12,900 --> 00:12:16,410
So in the function we have a path which is great.

169
00:12:16,410 --> 00:12:20,210
So going to be forced slash creates and that is it.

170
00:12:20,220 --> 00:12:25,620
So for this one, the one with the IDs, it looks like this one.

171
00:12:25,650 --> 00:12:29,670
First of all, the base you are l is employees.

172
00:12:31,490 --> 00:12:34,550
And then first slice I'm IED, right?

173
00:12:34,550 --> 00:12:36,350
So that is how it works.

174
00:12:36,620 --> 00:12:45,140
And again, let me tell you how express routing works and this how it works always it looks for the

175
00:12:45,140 --> 00:12:47,030
matching route.

176
00:12:47,060 --> 00:12:51,230
The one that matches is going to what run it first.

177
00:12:51,350 --> 00:12:54,770
So let's say that we have the same route down here.

178
00:12:54,770 --> 00:12:56,750
It's going to be for a slash.

179
00:12:57,110 --> 00:13:04,490
For a slash with the same end point, for slash, for slash and for this one, I'll make use of create

180
00:13:04,490 --> 00:13:08,180
employee second when I save this one.

181
00:13:08,180 --> 00:13:12,410
And now let's make the request and check it out for create.

182
00:13:12,410 --> 00:13:19,370
When I hit Send, you can see that the first matching route has been called, which is the first one,

183
00:13:19,370 --> 00:13:20,570
which is this one.

184
00:13:20,570 --> 00:13:22,040
This one didn't call.

185
00:13:22,130 --> 00:13:30,440
But if I change the order to this side like that and now let's make the request.

186
00:13:30,440 --> 00:13:37,850
And you can see that now the first route with the message called Create Employee two has been called

187
00:13:37,850 --> 00:13:42,230
because this one is the first route that express routing matched.

188
00:13:42,230 --> 00:13:44,180
That's why it's being called.

189
00:13:44,180 --> 00:13:48,110
So take note about how express routing works.

190
00:13:48,470 --> 00:13:52,100
So let me bring it back to normal and let me remove this one.

191
00:13:54,570 --> 00:13:55,230
Great.

192
00:13:55,770 --> 00:14:03,600
So my takeaway here I want to give to you is that try to bring the endpoint with some dynamic ID below

193
00:14:03,600 --> 00:14:04,530
the main end.

194
00:14:05,790 --> 00:14:11,130
This kind of design pattern works fine, and this is what most instructors use.

195
00:14:11,250 --> 00:14:17,640
But in this video I will show you how we are going to make a complete MVC design pattern by making use

196
00:14:17,640 --> 00:14:19,290
of the controllers.