1 00:00:00,150 --> 00:00:06,510 All right, and once we have the basic setup in place now, let's take a look at our two flavors when 2 00:00:06,510 --> 00:00:09,150 it comes to the post method. 3 00:00:09,510 --> 00:00:13,860 And I want you to navigate to index HMO. 4 00:00:14,160 --> 00:00:23,040 And in there you'll find pretty typical index while we add some styling with NAV as well as the form 5 00:00:24,180 --> 00:00:24,690 in the form. 6 00:00:24,690 --> 00:00:26,130 We have two attributes. 7 00:00:26,430 --> 00:00:27,410 We have action. 8 00:00:27,420 --> 00:00:27,660 One. 9 00:00:28,710 --> 00:00:35,970 As well as the method and as you can clearly see, the value for the method is post an actual one just 10 00:00:35,970 --> 00:00:41,140 says where we're going to send it and notice how we have forward slash login. 11 00:00:41,580 --> 00:00:45,750 So that means that this URL, this path is on our server. 12 00:00:46,050 --> 00:00:50,040 But of course, we know that in the IMGs, we're not handling that. 13 00:00:50,550 --> 00:00:52,860 So for the form, there's going to be one path. 14 00:00:53,040 --> 00:00:58,050 And then for the second example, when we use straight up JavaScript and of course, there's going to 15 00:00:58,050 --> 00:01:00,970 be a different path for that. 16 00:01:01,290 --> 00:01:06,090 So this is going to be the URL or path where we're submitting the form and instead of the form, we 17 00:01:06,090 --> 00:01:07,590 have a label, we have input. 18 00:01:08,400 --> 00:01:11,940 So basically we have name attribute for this one. 19 00:01:11,940 --> 00:01:15,200 We have the ID as well as the autocomplete. 20 00:01:15,480 --> 00:01:25,230 So we'll type in some kind of value and then we will send this to Fort Localhost and then forward slash 21 00:01:25,230 --> 00:01:25,560 login. 22 00:01:25,590 --> 00:01:28,830 And of course we also have a submit button. 23 00:01:29,280 --> 00:01:35,720 So now let's start by taking a look what happens when we simply submit this form. 24 00:01:36,090 --> 00:01:38,710 So go here, type some kind of gibberish. 25 00:01:38,730 --> 00:01:42,720 In my case, I'm going to go with John bravely, press enter. 26 00:01:43,080 --> 00:01:46,560 And of course, we do have kind of post login. 27 00:01:46,840 --> 00:01:48,080 OK, that's fine. 28 00:01:48,240 --> 00:01:49,860 We're not expecting anything anywhere. 29 00:01:49,860 --> 00:01:50,080 Right. 30 00:01:50,250 --> 00:01:56,340 We know that there is no route that handles the post for the login. 31 00:01:57,090 --> 00:02:05,940 But what's really interesting here is in the network tab, of course, I can see my request in this 32 00:02:05,940 --> 00:02:06,300 case. 33 00:02:06,360 --> 00:02:07,560 This is login. 34 00:02:07,830 --> 00:02:09,210 Now this is four or four. 35 00:02:09,449 --> 00:02:15,000 And again, I'm going to repeat this 20 thousand times, but check out the method so Matthew does not 36 00:02:15,360 --> 00:02:21,930 get my first post and then we're going to localhost five thousand and then forward slash login. 37 00:02:22,380 --> 00:02:27,840 Now, what's also really interesting all the way in the bottom, what do you see here? 38 00:02:28,290 --> 00:02:32,640 You see this form data and then we have key value pair. 39 00:02:33,000 --> 00:02:35,330 We have a name and John. 40 00:02:35,670 --> 00:02:36,960 And if you remember. 41 00:02:37,890 --> 00:02:43,890 When we talked about HTP messages, I said that the body is optional, so, for example, when we're 42 00:02:43,890 --> 00:02:49,840 sending a request, we're not sending a body, but when we're sending a post request, it's very crucial. 43 00:02:50,310 --> 00:02:56,700 So if I want to add something on to the server, of course I want to get the data. 44 00:02:57,210 --> 00:03:02,600 I mean, otherwise, how I'm going to know what to add to the server does not make sense. 45 00:03:02,940 --> 00:03:03,720 I hope it does. 46 00:03:04,110 --> 00:03:05,440 So let's go back. 47 00:03:05,460 --> 00:03:08,100 OK, I see this name and I see John. 48 00:03:08,310 --> 00:03:15,600 And if you're not familiar with the way it works is whatever you provide here for the name is going 49 00:03:15,600 --> 00:03:16,440 to be a key. 50 00:03:17,220 --> 00:03:24,060 So, for example, if I'm going to set this up as testing, you'll see that now when we perform the 51 00:03:24,060 --> 00:03:28,920 same request, the same post request, again, with the same value, a different value, it doesn't 52 00:03:28,920 --> 00:03:29,580 really matter. 53 00:03:29,910 --> 00:03:33,750 Now, of course, that key name is going to be testing. 54 00:03:34,140 --> 00:03:37,180 So whatever value provider here, that is going to be the key. 55 00:03:37,530 --> 00:03:41,260 And of course, the value is whatever you're submitting. 56 00:03:41,820 --> 00:03:48,360 So in my case, it's either Peter or John, OK, that's out of the way. 57 00:03:48,360 --> 00:03:50,550 So I'm going to change it back to name. 58 00:03:50,880 --> 00:03:55,980 And now we need to understand something where the request is coming in. 59 00:03:56,490 --> 00:03:58,980 But, A, we're not handling that. 60 00:03:59,460 --> 00:04:08,610 And B, we don't have the middleware, but actually adds this data that the form in this case is sending 61 00:04:08,910 --> 00:04:10,730 to our request. 62 00:04:10,740 --> 00:04:12,480 So let's see how we can fix the first one. 63 00:04:12,720 --> 00:04:16,350 And we simply need to come up with a round in now in guys. 64 00:04:16,350 --> 00:04:18,390 Remember, we're dealing with post. 65 00:04:18,690 --> 00:04:25,320 This is not yet and we're going to go with forward slash and then log in here, because, of course, 66 00:04:25,500 --> 00:04:27,480 that's what I have in my form. 67 00:04:27,510 --> 00:04:33,780 Again, we go with rock and roll and technically we can come up with some kind of info. 68 00:04:33,990 --> 00:04:39,060 I can say send and I'm simply going to say post and that's it. 69 00:04:39,510 --> 00:04:43,530 Just so we can save time on typing again, let's navigate back. 70 00:04:43,830 --> 00:04:46,730 And in this case, let's try Susan. 71 00:04:47,040 --> 00:04:47,750 Let's send it. 72 00:04:47,760 --> 00:04:52,170 Yeah, I see the post so I don't have the four hundred anymore. 73 00:04:52,470 --> 00:04:54,690 More for a four so that's cool. 74 00:04:55,050 --> 00:05:02,120 But unfortunately I have no access at this point to whatever I'm being sent. 75 00:05:02,670 --> 00:05:07,000 So unfortunately I cannot access that Susan or Jon or whatever value. 76 00:05:07,380 --> 00:05:13,380 So unfortunately I cannot add, for example, to my list if I wanted to. 77 00:05:13,710 --> 00:05:14,920 Now how do we add it? 78 00:05:14,940 --> 00:05:17,310 Well, this is where the middleware comes in. 79 00:05:17,670 --> 00:05:21,900 So previously we covered static assets with express static. 80 00:05:22,260 --> 00:05:30,350 In order to get the form data, we need to go with you URL and coded middleware. 81 00:05:30,630 --> 00:05:35,040 So I'll add here pass form data. 82 00:05:35,280 --> 00:05:41,630 And essentially this is just going to pass that data and add the values to that body. 83 00:05:42,000 --> 00:05:49,740 So where we have a post request in the body property will find all the info. 84 00:05:50,340 --> 00:05:56,220 And in order to use this middleware, surprise, surprise, we're going to use, abduct use and then 85 00:05:56,220 --> 00:06:05,070 we'll pass in Xpress and then you are encoded and then you also pass in the flag where you go with a 86 00:06:05,070 --> 00:06:08,160 standard and you set up false. 87 00:06:08,400 --> 00:06:13,830 And if you're wondering why are we adding this extended and false flag or you just want to get more 88 00:06:13,830 --> 00:06:19,230 info about others, you are encoded middleware simply. 89 00:06:19,260 --> 00:06:22,530 Let's head back to the documentation in this case. 90 00:06:22,530 --> 00:06:26,700 We're looking for the express and notice here Express. 91 00:06:26,880 --> 00:06:28,860 You are all encoded. 92 00:06:29,070 --> 00:06:31,980 This is a built in middleware function in Express. 93 00:06:32,280 --> 00:06:39,920 It passes incoming requests with YORO and coded payloads and it is based on the body parser. 94 00:06:40,260 --> 00:06:46,890 So in the previous versions of Express, you have to actually install the body posture. 95 00:06:47,100 --> 00:06:48,360 Now, in this case, you don't. 96 00:06:48,360 --> 00:06:50,190 It already comes built in. 97 00:06:50,400 --> 00:06:55,200 And as far as this extended, this option allows to choose between passing. 98 00:06:55,200 --> 00:06:59,880 You are encoded data with query string library one false meaning. 99 00:07:00,150 --> 00:07:05,820 This is our case or the US library when true. 100 00:07:05,970 --> 00:07:08,640 Again, I wouldn't lose my sleep over this one. 101 00:07:08,850 --> 00:07:13,280 And the common approach is using this extended and false. 102 00:07:13,590 --> 00:07:17,400 And once we can access it and we can do some cool functionality. 103 00:07:17,820 --> 00:07:21,780 So first, let's just scroll down a bit where we have the login. 104 00:07:22,020 --> 00:07:27,450 And first, I'm just going to start back on log logging Iraq and body seven one. 105 00:07:28,020 --> 00:07:32,490 And again, back to our browser again. 106 00:07:32,490 --> 00:07:33,900 I'm going to go with Susan. 107 00:07:34,140 --> 00:07:35,690 This was two hundred. 108 00:07:35,700 --> 00:07:36,540 So everything. 109 00:07:36,850 --> 00:07:44,540 Was successful, and now, of course, in the Iraq body, I also have a name and the value is Susan. 110 00:07:45,280 --> 00:07:48,980 So now I can start doing something with this data. 111 00:07:49,300 --> 00:07:51,520 Now, I purposely set up two examples. 112 00:07:52,360 --> 00:07:57,290 One is going to be for form, which, of course, is this one, and then one is for JavaScript. 113 00:07:57,670 --> 00:08:03,850 Now, with the JavaScript example, this is where we'll actually manipulate these people. 114 00:08:03,850 --> 00:08:04,170 All right. 115 00:08:04,480 --> 00:08:06,250 For the time being with login. 116 00:08:06,700 --> 00:08:07,660 This is a separate issue. 117 00:08:07,660 --> 00:08:08,920 We're just dealing with the form. 118 00:08:09,190 --> 00:08:15,850 So we'll just try to make things interesting by checking for the name if the name is provided. 119 00:08:16,120 --> 00:08:21,070 Then we'll send back welcome and then passing that name if the name is not provided. 120 00:08:21,100 --> 00:08:28,930 So, for example, if the user is trying to submit the form empty, for example, so we'll just send 121 00:08:28,930 --> 00:08:32,830 back for one, please provide credentials again, please. 122 00:08:32,830 --> 00:08:39,510 Keep in mind this is just a example and I'm fully aware that we can check for empty failures here on 123 00:08:39,510 --> 00:08:39,850 the front. 124 00:08:40,419 --> 00:08:45,540 Again, the goal of this example is to show you how to handle this on the server. 125 00:08:45,910 --> 00:08:52,690 So I have a that body, OK, I can see that in this case I have a name, but it is empty. 126 00:08:52,900 --> 00:08:55,750 So now, of course, let's set up our logic first. 127 00:08:56,020 --> 00:09:01,290 I'm going to go with const name and that one is equal to wreck that body. 128 00:09:01,390 --> 00:09:06,520 So I'm the structuring my name properly and I'll just check if the name exists. 129 00:09:06,850 --> 00:09:15,070 Whatever the value not could be B that could be bobbly not could be again taco burrito, whatever you 130 00:09:15,070 --> 00:09:15,400 want. 131 00:09:15,490 --> 00:09:19,330 And as you can see, I'm getting quite hungry so let's go with return. 132 00:09:19,510 --> 00:09:29,980 Whereas that status then let's set up a two hundred which just says that we were successful and we're 133 00:09:29,980 --> 00:09:35,170 going to go with sand and we'll set up a template run welcome. 134 00:09:35,380 --> 00:09:37,870 And I'm just going to access my name. 135 00:09:38,440 --> 00:09:42,790 So if there's some value I'll send back two hundred and I'll say welcome. 136 00:09:42,800 --> 00:09:44,460 Whatever is the value. 137 00:09:44,500 --> 00:09:51,100 If not well here we're going to go with Perez and let's just add status here. 138 00:09:51,370 --> 00:09:57,250 And again, just for kicks, I'm going to go with four one and we're going to go with sand and of course, 139 00:09:57,250 --> 00:10:05,200 let's say please provide and credentials work, so let's save this one. 140 00:10:05,470 --> 00:10:09,730 And now we should truly see how it works and the action. 141 00:10:10,120 --> 00:10:13,240 Now, I'll leave, I guess, the tab for now. 142 00:10:15,410 --> 00:10:22,740 Let's just try to submit so for example, if I submit with empty values, I'm going to say please provide 143 00:10:22,740 --> 00:10:23,370 credentials. 144 00:10:23,610 --> 00:10:28,780 And as far as my login, it is for one, that's what the server is sending back. 145 00:10:29,070 --> 00:10:35,750 However, if I type in some kind of value, for example, and it comes to mind, I have welcome and 146 00:10:35,880 --> 00:10:36,100 honor. 147 00:10:36,660 --> 00:10:42,270 So that's our first flavor when it comes to post requests where we use the form. 148 00:10:42,270 --> 00:10:45,920 And again, this is just front end where we come up with an action. 149 00:10:46,140 --> 00:10:52,700 And since this index is on the same server, we simply go with forward slash and login. 150 00:10:52,980 --> 00:11:00,210 Of course, if your front application is separate from your server, then you're going to provide a 151 00:11:00,210 --> 00:11:03,920 full path where the server is hosted. 152 00:11:04,260 --> 00:11:06,510 So basically a full domain. 153 00:11:06,690 --> 00:11:08,570 And then we go with method post. 154 00:11:08,610 --> 00:11:12,860 Now, this is technically a front end part, but it is crucial that we understand it. 155 00:11:13,230 --> 00:11:17,010 So then we perform, of course, a post request. 156 00:11:17,310 --> 00:11:19,740 We hit our URL. 157 00:11:20,220 --> 00:11:24,000 So in this case we hit our forward slash longing. 158 00:11:24,240 --> 00:11:32,130 And this is the part where we handle that on a server in order to get that data, whatever we are being 159 00:11:32,130 --> 00:11:34,950 sent, we need to use a middleware. 160 00:11:35,190 --> 00:11:37,360 This one is built in to express. 161 00:11:37,650 --> 00:11:44,880 So again, we simply just need to use abduct use, which is going to apply this middleware to all our 162 00:11:44,880 --> 00:11:45,870 incoming requests. 163 00:11:46,750 --> 00:11:53,590 And then we just passed an external false flag, and the moment we do that in the wreck, that body 164 00:11:53,770 --> 00:11:56,370 will have access to our form. 165 00:11:56,800 --> 00:12:04,870 So whatever is set up here has a value that is going to be our key and whatever is passed into our form. 166 00:12:05,080 --> 00:12:08,470 Well, of course, that is going to be the actual value that we're getting. 167 00:12:08,710 --> 00:12:15,070 So if I go here with name, I'm going to see either Susan and or whatever use user provides. 168 00:12:15,310 --> 00:12:18,670 Now, like I already previously mentioned, this is just for demonstration. 169 00:12:19,030 --> 00:12:26,640 This is just so we have a bit more interesting example instead of just sending back the name. 170 00:12:27,130 --> 00:12:36,370 So hopefully this part is clear and now we can focus on our second flavor where we use JavaScript to 171 00:12:36,520 --> 00:12:38,380 send the request.