1 00:00:00,210 --> 00:00:06,540 All right, and once we have the form set up out of the way now let's take a look at the JavaScript 2 00:00:06,540 --> 00:00:06,870 option. 3 00:00:07,200 --> 00:00:11,100 Before we do, though, there is one more thing that I would like to mention. 4 00:00:11,490 --> 00:00:19,620 If you take a look at the headers, you'll notice something interesting where we have a content type 5 00:00:19,620 --> 00:00:21,180 for the request header. 6 00:00:21,480 --> 00:00:24,570 And of course, this is going to be application. 7 00:00:25,050 --> 00:00:28,920 And then we have this form you are encoding. 8 00:00:29,090 --> 00:00:34,660 And the reason why I'm showing that because of course, for JavaScript, it is going to be a bit different. 9 00:00:34,980 --> 00:00:38,280 So just keep this one for your reference. 10 00:00:38,340 --> 00:00:45,060 Now, let's navigate back to our static files, basically to our front end. 11 00:00:45,280 --> 00:00:48,060 And now let's take a look at the JavaScript approach. 12 00:00:48,510 --> 00:00:54,600 And interestingly, here, where I have the JavaScript, I do have the form, keep in mind, will still 13 00:00:54,600 --> 00:00:55,380 handle this form. 14 00:00:55,380 --> 00:01:01,800 But in this case, it's going to be done strictly using JavaScript and will use JavaScript to send our 15 00:01:02,040 --> 00:01:04,060 HTP requests. 16 00:01:04,080 --> 00:01:05,580 And that is very, very crucial. 17 00:01:05,590 --> 00:01:10,920 That is going to be the difference where instead of who I am now, I'll be sending that request using 18 00:01:10,920 --> 00:01:14,310 JavaScript and of course the content will be different. 19 00:01:14,610 --> 00:01:17,100 That's why I showed you the form example. 20 00:01:17,490 --> 00:01:21,960 But what you'll also notice that right away we have our list. 21 00:01:21,960 --> 00:01:24,690 And if you don't believe me, you can double check in data. 22 00:01:24,910 --> 00:01:27,660 Now, John, Peter, Susan and Emma. 23 00:01:28,260 --> 00:01:29,010 So what's happening? 24 00:01:29,340 --> 00:01:32,130 Well, let's go to JavaScript HTML. 25 00:01:32,550 --> 00:01:34,980 This is where we have our front logic. 26 00:01:35,250 --> 00:01:37,500 And again, let's take a look at our index. 27 00:01:37,990 --> 00:01:39,870 A little bit of success. 28 00:01:40,880 --> 00:01:47,010 Now and then we have the point now in this case, I don't have the action and I don't have the method. 29 00:01:47,600 --> 00:01:48,610 OK, interesting. 30 00:01:48,830 --> 00:01:50,750 So I have name attribute. 31 00:01:51,110 --> 00:01:53,000 It still has a value of names. 32 00:01:53,000 --> 00:02:00,710 So I should expect probably that this is going to be the father that's coming in with my request. 33 00:02:00,890 --> 00:02:06,620 That I have a little bit of formal alert is where this play a little bit of functionality as well as 34 00:02:06,620 --> 00:02:07,520 the result. 35 00:02:07,970 --> 00:02:09,770 Now, if you're not familiar. 36 00:02:10,770 --> 00:02:18,660 There's a package called Axios, which essentially just makes it easier to set up HTP requests, so 37 00:02:19,020 --> 00:02:25,560 instead of using the built and fetch, which I could have used, I think Axios provides a cleaner API 38 00:02:25,560 --> 00:02:27,890 and better error messages. 39 00:02:28,290 --> 00:02:33,630 And since I don't want to spend three hours on explaining all this code. 40 00:02:34,630 --> 00:02:43,750 I simply went with Axios and the way I set it up, I just set up the CD EnLink, so this just gets me 41 00:02:43,750 --> 00:02:51,110 the access library and then the moment I install it, of course, I have Axios in my front end project. 42 00:02:51,430 --> 00:02:52,420 Please keep that in mind. 43 00:02:52,430 --> 00:02:53,740 Those are two separate things. 44 00:02:53,980 --> 00:02:56,160 This is a front end project. 45 00:02:56,170 --> 00:03:03,880 And in order not to confuse you more, I just set up a few script tags instead of going with a separate 46 00:03:03,880 --> 00:03:05,000 JavaScript file. 47 00:03:05,320 --> 00:03:08,410 So as you can see here, I'm selecting the result. 48 00:03:08,740 --> 00:03:13,260 So that is my dev and I have this rich people. 49 00:03:14,050 --> 00:03:19,600 So that is the function that features people from my server. 50 00:03:19,990 --> 00:03:21,130 Now notice the path. 51 00:03:21,820 --> 00:03:23,590 It is API and people. 52 00:03:24,160 --> 00:03:24,500 Why? 53 00:03:24,940 --> 00:03:29,830 Well, because in my server I have also API people. 54 00:03:30,160 --> 00:03:31,710 So this is where I get requests. 55 00:03:32,320 --> 00:03:33,330 That's the default one. 56 00:03:33,530 --> 00:03:36,340 However, in this case, we're not doing that with a browser. 57 00:03:36,760 --> 00:03:38,370 We're doing with JavaScript. 58 00:03:38,710 --> 00:03:43,230 So Axios is the method by the name of surprise surprise guest. 59 00:03:43,600 --> 00:03:50,010 That just means that on the front end we're performing a get request to the same server. 60 00:03:50,020 --> 00:03:53,680 That's why we go for slash API and then people. 61 00:03:53,980 --> 00:03:56,190 So make sure these URLs match. 62 00:03:56,770 --> 00:04:01,210 So if these passport match, then you have an hour to showcase that. 63 00:04:01,360 --> 00:04:07,600 If I go with peepholes, then if you navigate to the front end and if you refresh can't fudge data. 64 00:04:08,110 --> 00:04:15,010 So we try to fetch people from our server, then we do a little bit of logic and this is just phrenologists 65 00:04:15,280 --> 00:04:16,149 not going to cover it. 66 00:04:16,149 --> 00:04:23,290 Basically iterate over and then we just set up a nice setting fires and all that, and then we invoke 67 00:04:23,500 --> 00:04:24,850 the function. 68 00:04:24,850 --> 00:04:29,260 But if there is an error, we'll look for the error property. 69 00:04:29,620 --> 00:04:31,270 In this case, I'm not structuring it. 70 00:04:31,480 --> 00:04:32,860 I'm actually not using it. 71 00:04:32,860 --> 00:04:37,240 I just say can't fetch data show that's step number one. 72 00:04:37,570 --> 00:04:40,350 Now, the second one is, of course, using the form. 73 00:04:41,110 --> 00:04:49,210 So then I select the submit button, I select the form, I also select the alert because we will display 74 00:04:49,330 --> 00:04:51,610 an alert if the value is empty. 75 00:04:51,880 --> 00:04:56,350 And again, let me repeat, I'm fully aware that we can check for that in the front end. 76 00:04:56,680 --> 00:05:03,970 I just wanted to showcase the server setup and then notice something interesting where I have this try 77 00:05:03,970 --> 00:05:06,400 and catch block in my functionality. 78 00:05:06,640 --> 00:05:11,980 So the moment the user is submitting the form, of course I invoke my callback function. 79 00:05:12,280 --> 00:05:18,010 It is async because for the actors I can wait for response and notice this one. 80 00:05:18,160 --> 00:05:21,400 So I have axios and again, surprise, surprise. 81 00:05:21,580 --> 00:05:28,360 The method name is post Y because we are sending a post request and this is just an actual thing. 82 00:05:28,360 --> 00:05:34,780 But again, we provide the value unless case the URL values API and people. 83 00:05:34,930 --> 00:05:40,040 So something that we're not handling yet on our server and this is the value. 84 00:05:40,630 --> 00:05:48,010 So again, this is just a syntax where in order to set up whatever data you're sending, you just pass 85 00:05:48,010 --> 00:05:51,210 it as a second argument and you set it up as a key value pair. 86 00:05:51,640 --> 00:05:56,830 Now, what's really cool, that would axios they set up all the counter types and all that good stuff 87 00:05:56,830 --> 00:05:57,210 for you. 88 00:05:57,340 --> 00:06:00,400 So can you just save a little bit of time now? 89 00:06:00,430 --> 00:06:06,970 If there is an error in our case, that is going to be if we're trying to submit something and in fact, 90 00:06:06,970 --> 00:06:14,470 there's no value, meaning we just try to submit empty formality, then we will display the error message. 91 00:06:14,470 --> 00:06:21,760 And again, this is really cool because Axios just provides a very useful error API, unlike the fetch 92 00:06:21,760 --> 00:06:24,780 where you really need to jump through hoops. 93 00:06:25,120 --> 00:06:33,600 So let me save it back to people so we can see, of course, all the people that we have in our array 94 00:06:33,610 --> 00:06:34,210 currently. 95 00:06:34,510 --> 00:06:38,470 And then of course, we'll focus on this post one. 96 00:06:38,830 --> 00:06:45,760 So as you can see, I get the input value and I just pass it in as a name property. 97 00:06:45,940 --> 00:06:46,420 Awesome. 98 00:06:46,780 --> 00:06:52,900 So now back in our objets, of course, we need to handle and please keep in mind one thing where I 99 00:06:52,930 --> 00:07:00,220 keep that post online API and people is not the same as API. 100 00:07:00,220 --> 00:07:02,020 Get API people. 101 00:07:03,030 --> 00:07:08,460 Even though the URL is the same, methods are different, and that goes for all the methods we're going 102 00:07:08,460 --> 00:07:11,540 to use, whether you're talking about put, delete or whatever. 103 00:07:11,880 --> 00:07:17,580 So just because the URLs are the same doesn't mean that they mean the same thing. 104 00:07:17,790 --> 00:07:20,470 No, the method is different here. 105 00:07:20,730 --> 00:07:21,990 I'm just reading the data. 106 00:07:22,200 --> 00:07:25,050 I'm reading data from API people here. 107 00:07:25,480 --> 00:07:27,440 I'm actually trying to add there. 108 00:07:27,780 --> 00:07:31,070 And again, we're going to go with rock and roll. 109 00:07:31,950 --> 00:07:35,570 And let's just go with some simple response. 110 00:07:36,420 --> 00:07:41,600 Now, for the time being, I'm just going to say that my response is going to be two on one. 111 00:07:41,910 --> 00:07:43,650 Now, that's the response that we sent back. 112 00:07:43,650 --> 00:07:52,380 If we are performing a post request and we are successful, so we'll just say or that status to one. 113 00:07:52,770 --> 00:07:57,510 And for the time being, let's just say send and I'm just going to say success. 114 00:07:57,840 --> 00:08:04,530 And of course, now what I would want is to navigate back to my job script one hour fresh. 115 00:08:04,530 --> 00:08:07,980 I'm getting all my people and now let's try it out. 116 00:08:08,220 --> 00:08:13,110 So I'm going to send this one so I can hear nothing changed. 117 00:08:13,470 --> 00:08:18,530 But if I take a look at my network tab, I should see. 118 00:08:18,540 --> 00:08:21,370 And by the way, sorry, I don't have to do that one more time. 119 00:08:21,390 --> 00:08:24,660 Let's go with I don't know, Susan here. 120 00:08:24,660 --> 00:08:26,070 Let's try to submit. 121 00:08:26,280 --> 00:08:31,740 And there it is now, of course, I have API people and to all one. 122 00:08:32,340 --> 00:08:36,240 So that's the response that I'm getting on my fronton. 123 00:08:36,510 --> 00:08:43,409 So let's bravely click on this one and we can see that the request, the URL is API people. 124 00:08:43,890 --> 00:08:51,390 OK, the method was post now the response was to a one, so it was successfully created. 125 00:08:51,570 --> 00:08:52,590 And now check it out. 126 00:08:52,860 --> 00:08:58,860 When we look at the request letters, of course we have application JSON. 127 00:08:59,160 --> 00:09:04,860 So on our front end, we do need to add this content type when we are sending the data. 128 00:09:04,980 --> 00:09:08,820 Now, again, what's really cool about Axios, it adds for us. 129 00:09:09,240 --> 00:09:11,850 But in general you need to keep that in mind. 130 00:09:12,180 --> 00:09:18,150 And there is again, we have this request payload and the name is equal to Susan. 131 00:09:18,420 --> 00:09:19,200 So whatever. 132 00:09:19,200 --> 00:09:20,130 I'm going to pass it in. 133 00:09:20,310 --> 00:09:26,520 If I'm going to send it empty, then I'm going to still have the key name and the value will be empty. 134 00:09:26,730 --> 00:09:33,540 Now, the gotcha here is even though we're handling a form submissions, we're not handling the JSON 135 00:09:33,540 --> 00:09:33,810 there. 136 00:09:34,260 --> 00:09:40,380 So, yes, we know how we can send back the JSON there, but we're not handling the incoming Drayson 137 00:09:40,380 --> 00:09:40,650 there. 138 00:09:40,920 --> 00:09:44,400 And this is where another middleware comes into play. 139 00:09:44,790 --> 00:09:46,500 So I'm going to say pass. 140 00:09:47,570 --> 00:09:48,500 Jason here. 141 00:09:49,380 --> 00:09:56,640 And we simply need to go again with apps that use and we go with Express and just now in this case, 142 00:09:56,640 --> 00:09:59,130 I'm not going to go to documentation if you want. 143 00:09:59,130 --> 00:09:59,850 You can do that. 144 00:09:59,850 --> 00:10:05,600 In my case, I will try to save us a little bit of time and we'll skip that. 145 00:10:05,820 --> 00:10:08,160 And here we have API people. 146 00:10:08,340 --> 00:10:17,400 And now similarly to our login, we have access to the form data that is being sent with JavaScript 147 00:10:17,640 --> 00:10:22,190 in the rec dogsbody previously before this was added. 148 00:10:22,320 --> 00:10:24,050 No, we have no access. 149 00:10:24,060 --> 00:10:24,480 Yes. 150 00:10:24,810 --> 00:10:27,260 When it comes to form that was once set up. 151 00:10:27,510 --> 00:10:34,440 Now, when it comes to straight up HTP requests, for example, in this case with JavaScript now we 152 00:10:34,440 --> 00:10:41,880 had no access, so we were getting a Drayson and now we added a specific middleware that handles that. 153 00:10:42,180 --> 00:10:46,410 So of course, in this case, now we can set up more logic, correct? 154 00:10:46,680 --> 00:10:48,570 We can say that we're looking for the name. 155 00:10:48,810 --> 00:10:56,760 And if the name is provided that awesome, then I'm going to send back that new person that was created 156 00:10:57,000 --> 00:10:58,860 so we can add it to our front then. 157 00:10:59,040 --> 00:11:03,300 And again, this is the case where we're not persisting this data anywhere. 158 00:11:03,660 --> 00:11:05,210 Later we will learn how to do that. 159 00:11:05,430 --> 00:11:09,480 For now, I already have the code that adds it to our front end. 160 00:11:09,690 --> 00:11:16,710 However, if the user tries to submit without any values, well, then there's going to be a error message. 161 00:11:16,890 --> 00:11:22,650 So in the API, people in the post method not set up our logic. 162 00:11:23,490 --> 00:11:27,780 Where I'm going to go with const name is equal to that body. 163 00:11:28,650 --> 00:11:35,100 The middleware makes it possible now and then I'm going to say if the name is not provided, well then 164 00:11:35,100 --> 00:11:40,550 I'm going to send back the four hundred and I'm going to say please provide name value. 165 00:11:40,770 --> 00:11:42,590 So there's going to be a message. 166 00:11:42,840 --> 00:11:50,100 So say here if it's important and if the name is not provided then let's go return. 167 00:11:50,370 --> 00:11:58,320 Whereas that status and for the request error we go with four hundred, that's the status code. 168 00:11:58,500 --> 00:12:00,810 And then let's go again with Jason. 169 00:12:01,020 --> 00:12:03,910 And in this case we're going to go with success. 170 00:12:04,110 --> 00:12:09,360 Now this success will be false and then we're going to go with message again. 171 00:12:09,390 --> 00:12:14,610 I would suggest using the same properties because of course I'm handling them on the front end as well. 172 00:12:14,850 --> 00:12:19,020 So in here, I'll say please provide name value. 173 00:12:19,170 --> 00:12:26,430 OK, so now if the value is provided, whatever it is, then of course we can send back resonators. 174 00:12:26,730 --> 00:12:27,870 Two hundred and one. 175 00:12:28,080 --> 00:12:33,480 Hey guys, it's John from the Future with a small update, as you'll see in a second. 176 00:12:33,510 --> 00:12:36,780 While I was recording, I forgot to change the methods. 177 00:12:37,230 --> 00:12:43,470 So instead of writing JSON, I just left it as and and while we can get away with it in this example, 178 00:12:43,740 --> 00:12:47,060 normally you always want to use JSON instead. 179 00:12:47,550 --> 00:12:52,080 So make sure you change your method from send to Jason. 180 00:12:52,200 --> 00:12:58,020 And in this case, let's just set up a proper object will say success is true. 181 00:12:58,290 --> 00:13:02,730 So now we're being successful and I'm just going to send back that person. 182 00:13:02,940 --> 00:13:09,120 Now I'm going to set it up with person key and the value will be name whatever I'm getting again. 183 00:13:09,120 --> 00:13:12,530 Please use the same ones if you want to have a same result. 184 00:13:12,870 --> 00:13:15,090 Now let's navigate back. 185 00:13:15,090 --> 00:13:19,380 We can refresh just so we are all on the same page. 186 00:13:19,650 --> 00:13:24,960 And if we type Susan now should see another Susan added to our list. 187 00:13:25,380 --> 00:13:31,620 And then again we can go with John and I'm just being lazy on coming up with original names. 188 00:13:31,860 --> 00:13:38,040 And as you can see, every time we add value in our form, we're being successful. 189 00:13:38,340 --> 00:13:45,700 We're actually getting back this value from our server and then we dynamically add it to our front end. 190 00:13:45,720 --> 00:13:49,980 And again, the reason why we're doing this way is because we're not persisting this data. 191 00:13:50,280 --> 00:13:52,620 So that's why the setup is following. 192 00:13:52,710 --> 00:13:56,430 Later, of course, we'll learn how to process this in a database as well. 193 00:13:56,700 --> 00:14:01,290 And if I tried to submit with empty value, check it out. 194 00:14:01,290 --> 00:14:07,980 Now, of course, I have people and this one is, what, four hundred right now it's here and it says, 195 00:14:07,980 --> 00:14:10,440 please provide name value. 196 00:14:10,710 --> 00:14:16,170 Now, if you want to do a bit of logging, you're welcome to do that on the front end. 197 00:14:16,410 --> 00:14:19,830 If, for example, your iffy about the syntax. 198 00:14:20,100 --> 00:14:26,640 But just to let you know, when we talk about Axios here, effectively, we're getting back the whole 199 00:14:26,640 --> 00:14:27,030 thing. 200 00:14:27,360 --> 00:14:36,420 So when we perform a request HTP request with Axios, we are actually getting back a giant object. 201 00:14:36,810 --> 00:14:41,250 Now, what we're interested in that object is a data property. 202 00:14:41,670 --> 00:14:45,420 So that's the response that is coming back from the server. 203 00:14:45,820 --> 00:14:48,720 I'm in here, as you can see, I set up. 204 00:14:49,200 --> 00:14:55,780 Five with data, that person, so that's the person that we're sending back from our server. 205 00:14:55,990 --> 00:15:03,480 Now, if, for example, there is an error, we go with error response again, data properly, because 206 00:15:03,480 --> 00:15:09,180 that's where the useful information sits, because the object, of course, is giant with lots of useful 207 00:15:09,180 --> 00:15:09,690 information. 208 00:15:09,690 --> 00:15:14,090 But as far as what we're sending back, it is sitting in there and then message. 209 00:15:14,400 --> 00:15:21,840 Now I'm looking forward a message probably because here because I set up a message property on the server. 210 00:15:22,170 --> 00:15:30,540 Hopefully it is clear this is our second flavor where effectively we perform a post request from the 211 00:15:30,540 --> 00:15:31,260 application. 212 00:15:31,710 --> 00:15:36,150 And of course, in that case, we do need to provide content as well as the data. 213 00:15:36,570 --> 00:15:44,340 And next video will install and cover some basic setup for a very useful tool that is going to save 214 00:15:44,340 --> 00:15:51,750 us a lot of trouble when we work with post delete as well as put methods.