Welcome back.
In the previous video, we able to implement the model part of our design pattern and you can see that
we wrote everything inside the silver dot case file, but the responsibility of the server file is to
run our application, meaning to start our server.
So it means that we should keep less code on the server dot js file.
And this one is for only one model that is employees.
Let's say that we are building a complex application where we have multiple model.
Let's take block application, for example, for block application at least we need more than three
model that is the host model, user model, comment model and many more.
So if we are trying to keep all the code on the server file, this file will be bloated.
In that way our code will not be all that readable.
That is why we need to move some part of application to use MVC design pattern.
So let me show you where our logic lies.
Remember, this is a route, right?
And inside this route we have a couple of sections.
One is the end point and then the other one is our handler.
And this is where our business logic lies, this handler.
So we are going to put this handler on each file.
And to be able to achieve that, we have what is called express routing.
So what does it mean?
We are going to move this one to a file called routing.
So we inside our project, we are going to create one folder for route.
Great.
And for this, let's create one file for employee route.
Or I can call this one as route dot because I already have one module.
So the next step is that we need to require express because we need the routing from Express.
When you say routing, it simply means that how we can navigate inside our server to consume or use
some resources in our application.
So here sorry I missed some typo mistake here.
You're going to be as ex press.
Great.
So here we make instance of router from express dot router.
So on the instance of this express router, which is this one, we have all the HTTP method.
So check it out.
When I make use of router dot gates we have it dot post we have it dot put we have it, dot delete we
have it.
So for this one we can extract this handler from here and then place it inside our router.
So the first one is for the creation, right?
So I will select this one and I will come here and now place it here.
So the first one is going to be great.
So here we go.
Our MC is of post and here our pass in the first argument and that is the end point and next one is
going to be our handler.
So let's get back to the server file and now let's select the handler which ends here.
Right?
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
to this function call.
And here we go.
So when I save it, now we have extracted the logic on our file to a separate file called Express Routing.
So it is what we call express routing.
So let's get continue on.
So now how can we use this file?
Great.
So now let's save this one.
And now this one doesn't exist.
So it means that our application has been broken.
If I go ahead and then make a request to create employee, let's have a look.
You can see that.
Well, it's supposed to be.
Posts and here there is no ID here.
So let me save it.
And now let me send.
You can see that there is no route for that because on a server file, we don't have any route that
matches this one because we have extracted the function on this file to this file.
So how are we going to make use of it?
Now, here we go.
The next step is that we need to export module dock's export and is equal to the router.
So here we go on a server file.
We are going to require the router and here you go.
I have the auto import.
Perfect.
So how are you going to use it?
Now we are going to use the router as a middleware.
Remember for upload use we can also pass in any route.
For this one, it can accept any HTTP method.
Before we continue.
Let me show you something here.
Let's say we have this route for a slash I we say anything great and I'll pass in my callback function,
which request and then the response.
And let me send some text by saying that.
I will match any endpoint.
Great for this one.
It supports any kind of HTTP method, whether posts, request, delete, pulls or gets.
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
let's rename this one to anything.
So now let's select any of this HTTP method here.
Let me collapse it.
And this.
I'm going to be forced slash anything.
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
I go back the response if I change to delete.
I would get back their response if I change to, let's say, Patch.
I'll get back their response.
So the take away here is that app dot use matches any HTTP method.
If that's the case, then we can use our function here and pass in here so we can now remove this one.
And here you go, you pass in the end point and you bring in our router as that.
So with this one, everything remains the same.
So back to my collection here or my request here, let me make a request.
Well, we got four or four.
It means that we are not doing something correct.
So let's get back to the router here and let's look at the path this one is forward slash and inside
the server is also for a slide because there is no endpoint like forward slash employees.
So in that way, let's bring it here as employees.
Great.
Save it.
And now let's go ahead and make the request.
And now you can see that everything works fine.
So next step is that let's work on the get all employee.
So our cut this one from here and now inside the router here, I will paste it here and so I'm going
to be as router don't get.
And for slash.
And here you're going to be our callback function.
So here let's cut the callback function from here and cut it and let's place it inside the router and
that is it.
So let's go ahead and then remove this one.
You can see how we are cleaning up our file.
The next one is going to be our update.
So I'll cut this one from here and now inside the router here, let's paste it down here and now let's
bring in router dot put.
Then you pass in for a slash, and here is our callback handler.
So let's expand it.
And now let's select everything from here.
Cut it and let's place it here.
Great.
So now we are done with the input requests.
The next one is going to be the gate requests.
So back here, I can now remove this one.
Next one is delete.
Sorry.
So I'll cut it and here let me pass it here and going to be router dot delete.
Great.
And for this one is for slash ID.
I will show you how I'm implementing the path very soon.
So here, let's cut the callback handler from here and inside the router.
I will place it here as a second argument to that.
The last one is going to be the gate, a single employee.
So it's supposed to be ID but not die.
Okay, so don't worry.
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
inside.
No.
So here, NCP router, dirt gate and going to be forward slash some ID and I will page that.
Now we have cleaned up our server to just file how easy it is, guys.
Good.
So next step is that let's test all this endpoint, make sure that everything is working fine.
For this rule, I think I have to move it right.
So let's go ahead and then delete this root or this request.
So now let's test the create employees and it works fine.
Next one is going to be single.
It works fine.
Delete works fine.
Update or update is not working fine.
Oh.
Supposed to be forward slash id and I'll explain to you how I'm making the path in or the path.
So here let's say and I got it.
Lastly, it's going to be fetch or and also I got it.
So now let's explain one important thing when it comes to express routing.
So let's open the router and then the server file together.
Great.
You can see that for slash employees is common to all the endpoint, whether creating file chain deleting
the all end with what employees with exception of updating and then deleting where we need to extend
with some dynamic ID.
So the take away here is that we need to bring the common endpoint to the app dot use.
So anything that we pass in here, for example, let's say for the post, if I make use of create now
the full you are URL has become something like this.
It's going to be HTTP for slash employees that is inside our server.
It will come here first and now it's going to run our function here.
So in the function we have a path which is great.
So going to be forced slash creates and that is it.
So for this one, the one with the IDs, it looks like this one.
First of all, the base you are l is employees.
And then first slice I'm IED, right?
So that is how it works.
And again, let me tell you how express routing works and this how it works always it looks for the
matching route.
The one that matches is going to what run it first.
So let's say that we have the same route down here.
It's going to be for a slash.
For a slash with the same end point, for slash, for slash and for this one, I'll make use of create
employee second when I save this one.
And now let's make the request and check it out for create.
When I hit Send, you can see that the first matching route has been called, which is the first one,
which is this one.
This one didn't call.
But if I change the order to this side like that and now let's make the request.
And you can see that now the first route with the message called Create Employee two has been called
because this one is the first route that express routing matched.
That's why it's being called.
So take note about how express routing works.
So let me bring it back to normal and let me remove this one.
Great.
So my takeaway here I want to give to you is that try to bring the endpoint with some dynamic ID below
the main end.
This kind of design pattern works fine, and this is what most instructors use.
But in this video I will show you how we are going to make a complete MVC design pattern by making use
of the controllers.