1 00:00:07,740 --> 00:00:08,880 In this video. 2 00:00:08,880 --> 00:00:12,930 Let's get started with MVC design pattern. 3 00:00:13,200 --> 00:00:19,680 Because of that, we are going to build a complete API for employees database. 4 00:00:19,710 --> 00:00:25,930 In that way, you better understand how the MVC component come into play. 5 00:00:25,950 --> 00:00:27,660 So let's get started. 6 00:00:27,810 --> 00:00:34,710 Well, I'll provide the starter file for you and it contains a simple express server. 7 00:00:34,710 --> 00:00:42,840 And inside the utils I have connected my application to MongoDB and I advise you to use your own connection 8 00:00:42,850 --> 00:00:43,560 string. 9 00:00:44,130 --> 00:00:48,740 Next thing is that we are going to use the MongoDB extension. 10 00:00:48,750 --> 00:00:54,690 If you don't have it, go ahead and then install the extension and that is MongoDB. 11 00:00:54,930 --> 00:01:03,390 After installation, click on the icon and add new connection and then click on Connect and here add 12 00:01:03,390 --> 00:01:05,390 your connection string for this one. 13 00:01:05,400 --> 00:01:09,130 We have done it many times, so let's move on. 14 00:01:09,150 --> 00:01:12,480 I assume that you have your connection string ready. 15 00:01:12,510 --> 00:01:17,300 Otherwise, there's a video to show you how you can get your own connection string. 16 00:01:17,310 --> 00:01:19,350 So let me click on that to connect. 17 00:01:19,350 --> 00:01:21,690 And indeed it has been connected. 18 00:01:22,050 --> 00:01:22,500 All right. 19 00:01:22,500 --> 00:01:25,890 So let's get started with the MVC design pattern. 20 00:01:26,220 --> 00:01:31,650 First, we need to have the component that makes up the MVC design pattern. 21 00:01:31,650 --> 00:01:34,650 And the first one is going to be the model. 22 00:01:35,550 --> 00:01:38,700 And after that, we need the controller. 23 00:01:39,960 --> 00:01:46,620 And lastly, they're going to be the view meaning how we are going to present data to the user. 24 00:01:46,680 --> 00:01:52,020 For this particular application, we are not going to render the data to the user. 25 00:01:52,560 --> 00:01:55,470 Because for this one, we have done it before. 26 00:01:55,500 --> 00:01:59,250 That is how to render template engine in Node.js. 27 00:01:59,550 --> 00:02:05,510 So let's see how we are going to develop this application using the MVC design pattern. 28 00:02:05,700 --> 00:02:09,090 So we need to have the data inside the model. 29 00:02:09,090 --> 00:02:14,130 So let's go ahead and then create our model and our code, this one as employee. 30 00:02:15,250 --> 00:02:15,890 Don't. 31 00:02:16,460 --> 00:02:17,320 Jess. 32 00:02:18,190 --> 00:02:22,510 So let's go ahead and then have our schema for our employees. 33 00:02:22,540 --> 00:02:29,740 If you use my setup code, you have Mongoose being installed already, but in case you are using your 34 00:02:29,740 --> 00:02:34,090 custom server, you need to install Mongoose Express and Node one. 35 00:02:34,780 --> 00:02:43,750 So first thing is that we need to bring in the mongoose and here we go require mongoose. 36 00:02:45,010 --> 00:02:45,580 Perfect. 37 00:02:45,580 --> 00:02:49,900 And here is our simple schema for our employees. 38 00:02:50,440 --> 00:02:53,020 Cost employees. 39 00:02:54,530 --> 00:02:55,580 Schema. 40 00:02:57,560 --> 00:03:02,450 Is equal to new mongoose dart schema. 41 00:03:03,770 --> 00:03:07,400 And for this we need the name of the employee. 42 00:03:07,400 --> 00:03:10,940 And the type is going to be. 43 00:03:11,990 --> 00:03:19,550 Our string and then is required, we will say is true. 44 00:03:21,590 --> 00:03:22,010 Great. 45 00:03:22,010 --> 00:03:23,150 And I've tried a name. 46 00:03:23,150 --> 00:03:24,680 Let's copy this one. 47 00:03:24,680 --> 00:03:32,210 And we want the city about the employee and also a string. 48 00:03:32,210 --> 00:03:34,820 And we provide is married. 49 00:03:40,510 --> 00:03:43,420 And you're going to be a Boolean value. 50 00:03:44,050 --> 00:03:47,890 And by default, let's give it force. 51 00:03:49,860 --> 00:03:54,480 And let's also add the salary about the employee. 52 00:03:54,660 --> 00:03:57,510 And we're going to be of type number. 53 00:03:58,170 --> 00:04:05,560 Let's maintain these properties because we are focusing on how we can make use of NVQ design pattern. 54 00:04:05,580 --> 00:04:12,300 So lastly, let's pass in some additional configuration like timestamp and going to be true. 55 00:04:12,810 --> 00:04:17,130 So lastly, let's compile our schema to form a model. 56 00:04:26,040 --> 00:04:26,760 Great. 57 00:04:27,420 --> 00:04:35,490 So the next step is that let's go ahead and then handle all the logic on the server file and then we 58 00:04:35,490 --> 00:04:39,500 move everything to use the MVC design pattern. 59 00:04:39,510 --> 00:04:42,210 So here let's add our middleware. 60 00:04:42,210 --> 00:04:49,610 And the first one that we need is what we call express JSON and going to be as Express DOT. 61 00:04:49,620 --> 00:04:50,490 Jason. 62 00:04:50,580 --> 00:04:57,570 And that's what this one going to help us to pass the incoming data and for this one to we have done 63 00:04:57,570 --> 00:04:58,320 it many times. 64 00:04:58,320 --> 00:04:58,760 Yeah. 65 00:04:59,070 --> 00:05:03,090 So next step is that let's create our route to create employee. 66 00:05:03,090 --> 00:05:05,160 So here we go for this one. 67 00:05:05,310 --> 00:05:07,920 We're going to maintain only two route here. 68 00:05:07,950 --> 00:05:11,580 One is to create and one is to fetch all and that is it. 69 00:05:11,580 --> 00:05:17,100 Because I just play around how we are going to use what is called the MVC design pattern. 70 00:05:17,100 --> 00:05:18,630 So here are going to be. 71 00:05:46,200 --> 00:05:49,770 The next one going to be the fetching of employees. 72 00:05:49,770 --> 00:05:57,330 So let's add this one and here are going to be get requests and here are going to be get requests and 73 00:05:57,330 --> 00:06:00,210 here are going to be as the same as employees. 74 00:06:00,210 --> 00:06:07,620 And then the response going to be, gets employees, gets employees. 75 00:06:07,830 --> 00:06:08,310 Great. 76 00:06:08,310 --> 00:06:10,440 So let's collapse this one also. 77 00:06:10,950 --> 00:06:13,950 So let's handle all the code operation, right? 78 00:06:13,950 --> 00:06:21,300 So let's paste that one and now let's change this one to put requests and then going to be forward slash 79 00:06:21,300 --> 00:06:22,530 some ID. 80 00:06:24,430 --> 00:06:34,690 And here we're going to be put request and forward slash some ID and going to be as update great and 81 00:06:34,690 --> 00:06:41,200 let's collapse eighths and next end points is going to be and here is going to be delete. 82 00:06:42,190 --> 00:06:50,590 And here are going to be four like some ID and forward slash some ID and here you're going to be as 83 00:06:50,620 --> 00:06:52,480 deletes employee. 84 00:06:52,960 --> 00:06:53,410 Right. 85 00:06:53,410 --> 00:07:01,160 And lastly, let's handle for a single employee, you're going to be get requests and then force leave 86 00:07:01,210 --> 00:07:06,190 some ID and then here I would say fetch single. 87 00:07:07,370 --> 00:07:10,610 Employee and now we are set. 88 00:07:10,940 --> 00:07:16,700 So now let's test this endpoint by using this tool called ten dot line instead of postman. 89 00:07:16,700 --> 00:07:22,250 So if you don't have it, go ahead and then install this extension called ten lines. 90 00:07:22,490 --> 00:07:23,060 Right? 91 00:07:23,060 --> 00:07:24,260 So let's see. 92 00:07:25,310 --> 00:07:27,080 And this is extension. 93 00:07:27,080 --> 00:07:29,780 So after that, you click on this icon. 94 00:07:29,780 --> 00:07:32,400 And here let's add our first request. 95 00:07:32,420 --> 00:07:36,370 Make sure that you add the part which is 3000. 96 00:07:36,380 --> 00:07:40,220 So in here, let's go ahead and then add our requests. 97 00:07:54,920 --> 00:07:55,660 Great. 98 00:07:55,670 --> 00:07:58,700 So this I'm going to be as post requests. 99 00:07:59,060 --> 00:07:59,450 All right. 100 00:07:59,450 --> 00:08:03,890 So let's hit st and indeed we have the post requests. 101 00:08:04,130 --> 00:08:09,710 So let's duplicate this request or we can rename this one and I'll call this one as. 102 00:08:11,340 --> 00:08:13,680 Great employee. 103 00:08:15,150 --> 00:08:24,750 So the next step is let's duplicate this one and let's rename this one to our employees. 104 00:08:25,860 --> 00:08:26,520 Great. 105 00:08:27,660 --> 00:08:29,130 And next one, I'm going to be. 106 00:08:29,130 --> 00:08:35,549 So let's try to fetch when I get requests and let's fetch all and I have the route. 107 00:08:35,880 --> 00:08:39,289 Then this one is going to be updated. 108 00:08:39,299 --> 00:08:45,480 So here is going to be as update employee. 109 00:08:46,890 --> 00:08:47,280 Great. 110 00:08:47,280 --> 00:08:50,900 So here is going to be put request and going to be forced life. 111 00:08:50,940 --> 00:08:54,090 Some ID it's st and we have it. 112 00:08:54,390 --> 00:08:56,010 So let me save this one. 113 00:08:56,010 --> 00:08:58,110 And next one I'm going to be the. 114 00:08:59,530 --> 00:09:00,300 Delete. 115 00:09:00,310 --> 00:09:10,570 So here is going to be delete employee and here is going to be delete requests and here we pass in some 116 00:09:10,570 --> 00:09:11,740 ID it's sent. 117 00:09:11,770 --> 00:09:14,350 Well, this route doesn't exist. 118 00:09:14,560 --> 00:09:19,420 So let's check our server file if you have a route for deleting. 119 00:09:20,110 --> 00:09:20,700 Oh, sorry. 120 00:09:20,730 --> 00:09:22,430 Supposed to be delete here. 121 00:09:22,450 --> 00:09:27,100 I believe you guys saw it back on my site. 122 00:09:27,130 --> 00:09:29,950 So let's hit send, and now we have it. 123 00:09:30,160 --> 00:09:30,820 Great. 124 00:09:30,970 --> 00:09:40,550 So the next one is going to be as let me check all the endpoint delete update or create the last one 125 00:09:40,570 --> 00:09:42,580 going to be as first single. 126 00:09:43,420 --> 00:09:48,880 So here, let's rename this one as single employee. 127 00:09:49,210 --> 00:09:49,810 Great. 128 00:09:49,840 --> 00:09:55,660 Then here are going to be Gates, and he are going to be forced to have some ID and hit send. 129 00:09:55,690 --> 00:09:58,570 Well, also, this one doesn't exist. 130 00:09:58,840 --> 00:10:01,750 So where do I have first single? 131 00:10:02,440 --> 00:10:02,860 Yeah. 132 00:10:02,860 --> 00:10:03,510 Sorry. 133 00:10:03,520 --> 00:10:04,620 It's supposed to be. 134 00:10:04,630 --> 00:10:06,760 Gets better. 135 00:10:06,760 --> 00:10:07,570 My site. 136 00:10:08,260 --> 00:10:10,720 So let me see this one. 137 00:10:10,720 --> 00:10:14,620 Let's get signed and everything works fine. 138 00:10:14,920 --> 00:10:16,090 Onto this point. 139 00:10:16,090 --> 00:10:18,220 This is a normal way we have been using. 140 00:10:18,220 --> 00:10:18,880 Right. 141 00:10:19,030 --> 00:10:25,900 In the next video, let's continue to implement our application using the MVC design param. 142 00:10:26,650 --> 00:10:27,280 All right. 143 00:10:27,320 --> 00:10:32,980 In this video, let's continue our implementation to use MVC design pattern.