1 00:00:07,960 --> 00:00:09,040 In this video. 2 00:00:09,070 --> 00:00:17,080 Let's see how we can make post requests from the client that is a browser and send into our server. 3 00:00:17,560 --> 00:00:23,470 What we have been doing is to use Postman to send data into our server. 4 00:00:23,710 --> 00:00:29,140 By this time around, let's see how we can make use of a form from the client. 5 00:00:29,470 --> 00:00:31,930 Let's look at the flow first. 6 00:00:31,930 --> 00:00:36,310 A user will be presented with a form like this one. 7 00:00:36,460 --> 00:00:39,730 So with this one the user will enter the details. 8 00:00:39,730 --> 00:00:46,990 So after the user hit enter, the data will now be sent into the server for processing. 9 00:00:47,290 --> 00:00:51,340 So how can we implement this one using the form? 10 00:00:51,340 --> 00:00:54,880 And this is what we are going to do in this video. 11 00:00:55,120 --> 00:00:59,350 So back to our file, that is the server file. 12 00:00:59,350 --> 00:01:06,580 We need to know the endpoint that we are going to hit and what is this endpoint. 13 00:01:06,700 --> 00:01:14,950 So inside this endpoint or the route, we have access to the data the user is sending from the form. 14 00:01:15,160 --> 00:01:19,300 So how can we get the data from the form inside our route? 15 00:01:19,330 --> 00:01:21,580 Let's look at the flow first. 16 00:01:21,580 --> 00:01:26,920 We need to have the endpoint where we can receive the data from the form. 17 00:01:27,160 --> 00:01:34,150 And lucky for us, this is the endpoint of the route where we want to have access to the data from the 18 00:01:34,150 --> 00:01:34,780 user. 19 00:01:34,930 --> 00:01:46,060 So inside here we have access to the data from the browser or from the client. 20 00:01:46,060 --> 00:01:51,850 So how are we going to do it unless we configure the form and a little bit? 21 00:01:52,030 --> 00:01:54,910 So now let's open the output form. 22 00:01:54,940 --> 00:01:59,650 Now let's locate the form syntax and this is the form. 23 00:01:59,980 --> 00:02:04,060 The first step is we need to provide additional attribute. 24 00:02:04,060 --> 00:02:06,430 The first one is the action. 25 00:02:06,610 --> 00:02:10,330 The action simply means the path or the endpoint. 26 00:02:10,330 --> 00:02:14,020 We need to make a request to meaning where we want to go. 27 00:02:14,020 --> 00:02:20,140 When we click on Submit Button here and we want to go and post. 28 00:02:21,520 --> 00:02:25,510 And which is this end point over here. 29 00:02:25,750 --> 00:02:33,190 So for form, we can also pass in the HTTP method attribute core method. 30 00:02:33,310 --> 00:02:38,230 And here we have gates and post, so let's provide post requests. 31 00:02:38,470 --> 00:02:46,720 Now, this means that when I hit send, I'm making post request to this endpoint with a HTTP method 32 00:02:46,720 --> 00:02:47,710 called post. 33 00:02:47,980 --> 00:02:56,890 So with this one, when I go to my forum and I hit send, now we see that this post route has been called 34 00:02:56,890 --> 00:03:00,550 called Create Post, which is this one. 35 00:03:01,940 --> 00:03:02,740 This one. 36 00:03:02,750 --> 00:03:06,620 So how can I have access to the data from the form? 37 00:03:06,650 --> 00:03:15,320 So let's get back to the form and we have access on that on rec dot body as we did when we're using 38 00:03:15,320 --> 00:03:16,120 postman. 39 00:03:16,130 --> 00:03:18,080 So now we have this one. 40 00:03:18,080 --> 00:03:23,120 So let's try to console dot log rec party. 41 00:03:23,150 --> 00:03:28,400 Let's try to hit send or enter anything here and let's hit send. 42 00:03:28,400 --> 00:03:30,440 Now back to our terminal. 43 00:03:30,470 --> 00:03:34,640 You can see that I see undefined again. 44 00:03:34,670 --> 00:03:43,040 Do you remember when we are trying to receive a data from Postman unless we configure express to pass 45 00:03:43,040 --> 00:03:45,290 in incoming JSON data. 46 00:03:45,680 --> 00:03:54,260 So the same thing as we are getting data from the form unless we configure our express to receive a 47 00:03:54,260 --> 00:03:56,180 data from a form. 48 00:03:56,180 --> 00:03:58,100 So here is a clue. 49 00:03:58,400 --> 00:04:02,390 Let me provide a command says that configure. 50 00:04:03,580 --> 00:04:06,640 Express to pass. 51 00:04:08,010 --> 00:04:10,950 Data from form. 52 00:04:11,430 --> 00:04:12,640 So here we go. 53 00:04:12,660 --> 00:04:17,230 So you provide it as a middleware by making use of app dot use. 54 00:04:17,490 --> 00:04:23,100 And on express we have a method called you are error encoded. 55 00:04:23,400 --> 00:04:31,380 And this one has a function call and you provide additional configuration which object with a property 56 00:04:31,380 --> 00:04:32,370 and a value. 57 00:04:32,520 --> 00:04:36,930 The property here is extended and a value here meaning true. 58 00:04:36,960 --> 00:04:44,280 So this line of code simply means that we want to receive data from the front end using a form. 59 00:04:44,400 --> 00:04:50,870 So now with this one being in place, let's try to go to the form and let's enter anything here. 60 00:04:50,880 --> 00:04:53,120 Hit send and let's check it out. 61 00:04:53,130 --> 00:04:59,640 And now I see objects meaning from undefined to object to. 62 00:04:59,640 --> 00:05:01,740 Why are you not receiving the data? 63 00:05:01,950 --> 00:05:08,310 Simply because on the ATM form we need to provide additional attributes. 64 00:05:08,310 --> 00:05:17,850 So on each of these input fields here, we need to give it an identifier with attribute called name 65 00:05:17,850 --> 00:05:22,610 to the name here is going to be mapped on the vector body. 66 00:05:22,620 --> 00:05:31,590 So the first one, if I provide a name of title now I've made a connection with this input inside my 67 00:05:31,590 --> 00:05:34,470 server with the red dot body. 68 00:05:34,470 --> 00:05:43,080 So now with this one, if I refresh it and I enter anything here and hit send now it could say that 69 00:05:43,080 --> 00:05:48,360 I have a title value here because it has a name attribute. 70 00:05:48,360 --> 00:05:53,910 So let's go ahead and provide the attribute for each of the input field. 71 00:05:53,940 --> 00:05:55,710 So I'll copy this one. 72 00:05:55,890 --> 00:06:01,950 The next one I'm going to be the you are, so I will change this one to you URL then that's why I'm 73 00:06:01,950 --> 00:06:10,290 going to be the body or description I make use of DHC now with this one, when I save it, whatever 74 00:06:10,290 --> 00:06:13,680 I type in here, I'll be able to receive it. 75 00:06:13,680 --> 00:06:22,320 So let me say a HTML here the you are or let me say some you are and then description. 76 00:06:22,320 --> 00:06:25,320 Let's say some description. 77 00:06:25,350 --> 00:06:33,360 Let me hit send now back to my terminal and we have the values inside our server. 78 00:06:33,360 --> 00:06:35,190 How are some edits? 79 00:06:35,460 --> 00:06:43,710 So with this values we can do a lot of manipulation like data validation or trimming, or even use a 80 00:06:43,710 --> 00:06:47,460 module to check if there is a title or description. 81 00:06:47,460 --> 00:06:51,090 So this is how we be using as you move on in this course. 82 00:06:51,090 --> 00:06:57,780 So the take away here is how we can get the data from the front end and then receive it inside a server 83 00:06:57,780 --> 00:07:00,270 or route, which is really crucial. 84 00:07:00,510 --> 00:07:10,050 So with this one, we can send the data to the browser so we can send the rec dot body to the browser. 85 00:07:10,050 --> 00:07:12,570 So let's see what we are going to get. 86 00:07:13,820 --> 00:07:16,790 And you can see that I have the data. 87 00:07:17,060 --> 00:07:19,430 Is that how awesome it is? 88 00:07:19,550 --> 00:07:27,920 So when we get back to MongoDB, we can take this data to the post here and then save it into our database. 89 00:07:28,100 --> 00:07:35,750 But one caveat thing with this kind of implementation that is using raw HTML for rendering is that one 90 00:07:35,750 --> 00:07:41,090 I can able to receive data from a form inside our server. 91 00:07:41,360 --> 00:07:49,930 But what about if I want to make a request from the server and send it to our A.T.M.? 92 00:07:50,030 --> 00:07:57,880 Unless we implement what is called client side JavaScript, which is going to make our life difficult. 93 00:07:57,890 --> 00:08:05,270 So inside the public here we can create a folder called JavaScript, and here we can make this offset 94 00:08:05,270 --> 00:08:08,280 client dot JavaScript. 95 00:08:08,300 --> 00:08:13,560 So what this one going to do is that it's going to make a request. 96 00:08:13,580 --> 00:08:20,210 So after we get it, we will take that data and then use JavaScript and display it into the DOM. 97 00:08:20,210 --> 00:08:24,620 You can see you're going to be a little bit difficult, not difficult, but going to be more work to 98 00:08:24,620 --> 00:08:25,100 do. 99 00:08:25,550 --> 00:08:29,420 That is why we have what is called template engine. 100 00:08:29,690 --> 00:08:36,289 And for template engine is a combination of JavaScript and HTML, meaning that you can write JavaScript 101 00:08:36,289 --> 00:08:38,240 inside the template engine. 102 00:08:38,270 --> 00:08:45,110 In that way we can pass data from the server onto the template to be displayed very easily as compared 103 00:08:45,110 --> 00:08:47,090 to using normal HTML. 104 00:08:47,120 --> 00:08:52,760 So what we are going to do, the next video called Rendering Template Engine is going to follow the 105 00:08:52,760 --> 00:08:54,440 same ideology. 106 00:08:54,440 --> 00:08:58,430 So take note about how we are able to render those templates. 107 00:08:58,430 --> 00:09:03,680 How we pass in data from the front end to the server are going to be the same thing. 108 00:09:03,710 --> 00:09:05,540 The difference is about a syntax. 109 00:09:05,540 --> 00:09:08,390 So let's get into that in the next video.