WEBVTT 00:03.820 --> 00:04.660 Hey there, everyone. 00:04.670 --> 00:06.790 Natascha, and welcome to another video. 00:06.820 --> 00:09.610 In this video, we're going to again see the request form. 00:09.610 --> 00:13.390 And again, I will change a little bit in the form, but just the UI part itself. 00:13.390 --> 00:17.620 And then we're going to come back onto this that why having the conversation with the Frontend team 00:17.620 --> 00:19.390 is super important right now. 00:19.390 --> 00:20.980 This is how our form looks like. 00:20.980 --> 00:24.610 I'm not too much happy with it and especially the email and the password. 00:24.610 --> 00:28.840 This will obviously trigger my password saver and it will come again and again, so I don't want that 00:28.840 --> 00:29.680 kind of thing. 00:29.680 --> 00:32.290 So what we're going to do is change this git form a little bit. 00:32.290 --> 00:37.480 And again, follow me up here, the place where we created this container, we can add a class of empty 00:37.480 --> 00:42.460 dash for this will give us a margin from the top a little bit for again, I know this is not a front 00:42.460 --> 00:46.690 end class itself, but again, these things are kind of bothering me a little bit, probably you as 00:46.690 --> 00:46.840 well. 00:46.840 --> 00:47.980 So let's fix them up. 00:48.190 --> 00:55.000 And also, we're going to have a simple call, Dash four and we're going to have a call dash offset, 00:55.000 --> 00:55.930 dash six. 00:55.930 --> 01:01.690 What this is going to do, this will shrink the entire of the form into a smaller form, and it will 01:01.690 --> 01:06.400 offset it a little bit under the center of the page if I go ahead and save this one, since this is 01:06.400 --> 01:11.920 not reloading my server automatically, I need to create another node on JSON file and inject edges 01:11.920 --> 01:12.400 and all of that. 01:12.400 --> 01:15.850 Or I can come here and quickly do a save it automatically just reloads that. 01:15.850 --> 01:19.300 Let's go ahead and hit a reload and now the form is looking a little bit better. 01:19.300 --> 01:20.890 Again, not too much of a big deal. 01:21.160 --> 01:25.450 I'm also worried a little bit on to this form part, so I'm going to go ahead and change this form. 01:25.450 --> 01:31.510 So instead of this saying for input and IDs, same up here, I'm not really bothered about that part. 01:31.510 --> 01:36.190 I'm going to go ahead and change this one here that hey, this is not an email form and not a password 01:36.190 --> 01:38.950 form, so let's go ahead and change these labels as well. 01:38.950 --> 01:44.440 So this is going to be let's just say first name and let's go ahead and copy this first name everywhere 01:44.440 --> 01:50.980 and place it in the four in the ID and any other place that you are looking at for this is text. 01:50.980 --> 01:53.620 Let's go ahead and this one is fine. 01:53.800 --> 01:56.110 And here also, we're going to just say last name. 01:56.110 --> 01:58.150 So let's go ahead and say last name. 01:58.540 --> 02:02.590 Copy this everywhere and here else will and here as well. 02:02.590 --> 02:07.630 So I think this should make a little bit more sense now that, hey, this is just a regular form and 02:07.630 --> 02:09.820 not any email or password. 02:09.820 --> 02:10.930 So let's go ahead and use that. 02:10.930 --> 02:13.630 So first name, last name finds absolutely great. 02:13.990 --> 02:19.480 And since we have made this changes, I would like to just place this exact form into the post as well. 02:19.480 --> 02:21.430 So let's go ahead and copy this. 02:21.430 --> 02:25.900 I know this is a little bit too much for you, but this is bothering me a little bit. 02:25.900 --> 02:27.880 So let's go ahead and save this one. 02:29.100 --> 02:31.110 And change this one here as well. 02:31.840 --> 02:33.190 So what we have copied. 02:33.190 --> 02:34.780 We have copied from. 02:35.580 --> 02:37.830 Let's go ahead and change the entirety of the body. 02:37.830 --> 02:39.570 Actually, let's copy the entire body. 02:39.600 --> 02:40.560 Copy that. 02:40.680 --> 02:42.000 And place it up here. 02:42.000 --> 02:45.600 So entire body is getting replaced with our form body. 02:45.720 --> 02:47.880 And change this one to post. 02:47.970 --> 02:49.410 So there we go again. 02:49.590 --> 02:50.910 We don't need to check it much. 02:51.060 --> 02:51.830 Things should be fine. 02:52.050 --> 02:54.320 Coming back on to the point now, everything looks good. 02:54.330 --> 02:56.160 Let's go ahead and check it one more time. 02:56.640 --> 02:57.960 Yep, they are looking good. 02:57.960 --> 03:02.460 Now, coming back onto the part that how and why we are saying that we want to have a conversation. 03:02.550 --> 03:07.590 Now, it is very important that you have a conversation with how the front end team is going to handle 03:07.590 --> 03:08.460 the situation. 03:08.460 --> 03:12.990 Sometimes I have seen in the corporate that they just want to go with the EEGs itself or some kind of 03:12.990 --> 03:13.860 templating engine. 03:13.860 --> 03:17.630 And yes, the frontend team is working but they want to put everything into eggs. 03:17.640 --> 03:22.440 In that case you need to first know this information that how the data is going to come in because this 03:22.440 --> 03:23.370 is very important. 03:23.370 --> 03:29.160 If your team is going to use something like React Angular View or any other such library, then things 03:29.160 --> 03:32.810 are much more easier for us and are going to act exactly as post one. 03:32.820 --> 03:34.390 What do I mean by that? 03:34.410 --> 03:36.210 Okay, this is important information for you. 03:36.210 --> 03:37.200 Let me show you that. 03:37.860 --> 03:41.610 So we have seen that this is our form that is absolutely working fine. 03:41.610 --> 03:42.630 We have defined it out. 03:42.630 --> 03:46.830 That is says my get and in that we are just dumping out the body. 03:46.830 --> 03:51.720 Whatever sends me the request, I'm sending him back whatever the request is in the format and I'm receiving 03:51.720 --> 03:52.500 the data in the body. 03:52.500 --> 03:53.670 We saw that already. 03:53.700 --> 03:57.450 Now, let me bring in the postman and show it one more time to you. 03:57.450 --> 04:02.070 So if I make a request to my get the same thing, I send the name and I hit the send request. 04:02.070 --> 04:03.210 I get the name back. 04:03.210 --> 04:08.430 If I go ahead and change this one to something like Learn Code online and I go ahead and send this one 04:08.430 --> 04:10.080 I receive back as the name. 04:10.080 --> 04:11.280 Absolutely fine. 04:11.280 --> 04:17.040 So it is clear that when I send the data as in get format, I receive that and in my body everything 04:17.040 --> 04:18.540 is now converted into the JSON. 04:18.540 --> 04:20.220 We had a long discussion over that. 04:20.220 --> 04:25.320 Now coming back onto the point, now let's just go ahead and see that if you have a form and if this 04:25.320 --> 04:30.980 form is submitted to my get this form sends the data and I told you it sends the data in the request 04:30.990 --> 04:31.860 or body format. 04:32.250 --> 04:33.390 I agree that part. 04:33.390 --> 04:35.160 Let's go ahead and handle this form. 04:35.160 --> 04:38.280 So as soon as this form comes in, you probably already know this one. 04:38.280 --> 04:40.350 That form has the method, in this case the get. 04:40.350 --> 04:43.590 We are talking all about it and it also has an action. 04:43.590 --> 04:45.240 So let's go ahead and work on with the action. 04:45.240 --> 04:47.190 And the action goes to my get. 04:47.550 --> 04:48.840 That is absolutely fine. 04:48.840 --> 04:51.930 Since we are using this templating engine, I don't need to write the entire path. 04:51.930 --> 04:55.260 It automatically figures out that, hey, this is where you want to submit the form. 04:55.260 --> 05:00.180 Now if you just add this much of it, save that, and in fact come up here and hit a reload so that 05:00.180 --> 05:01.350 everything reloads. 05:01.350 --> 05:06.030 I come back onto this browser, hit reload again just for the confirmation. 05:06.030 --> 05:07.890 I go ahead and send my name up here. 05:07.890 --> 05:11.190 I go ahead and say Hit page and my command. 05:11.220 --> 05:13.050 This shouldn't be password like that. 05:13.050 --> 05:15.210 You need to see the information entirely. 05:15.210 --> 05:16.680 So let's go back up here. 05:17.660 --> 05:22.520 Get from again last one more time into the get from this is type password. 05:22.520 --> 05:23.750 No it should be text. 05:23.750 --> 05:26.510 You need to see all the information that is going on. 05:27.360 --> 05:28.190 One more time. 05:28.200 --> 05:29.190 Save this one. 05:29.490 --> 05:34.320 Come back here, hit a reload, and hopefully this time let's go ahead and see that page. 05:34.920 --> 05:35.700 And there we go. 05:35.700 --> 05:37.230 So you're able to see every information. 05:37.230 --> 05:40.920 If I go ahead and hit submit, it gives us an empty JSON. 05:40.920 --> 05:42.510 Why it is giving the empty JSON. 05:42.510 --> 05:47.910 Also, you might have noticed in the URL itself, this is my get question mark and nothing after that. 05:47.910 --> 05:53.250 This is a classic mistake that a lot of people does in the front end because in this case you have given 05:53.250 --> 05:55.710 this input, but there is no name given to the input. 05:55.710 --> 05:57.120 Name is an important property. 05:57.120 --> 05:59.190 So this is bringing in first name. 05:59.280 --> 06:02.670 And here also in this input we need to provide the same name property. 06:02.670 --> 06:04.260 This is carrying the last name. 06:04.260 --> 06:05.730 This is why it is important. 06:05.910 --> 06:10.440 Okay, go ahead and save this one and hit the save and let's come back again. 06:10.440 --> 06:11.190 Give it a one more. 06:11.190 --> 06:11.940 Try that. 06:11.940 --> 06:13.200 Hey, let's reload this one. 06:13.200 --> 06:15.270 Not the question mark simply. 06:16.320 --> 06:17.670 Or we can hit the back button. 06:18.360 --> 06:18.790 Let's go. 06:18.810 --> 06:19.500 There we go. 06:19.530 --> 06:20.490 Hit a reload up here. 06:20.520 --> 06:23.520 One more time that we are all in the first page. 06:23.700 --> 06:25.590 Let's say hit page and again. 06:25.950 --> 06:26.610 There we go. 06:26.640 --> 06:28.560 I go ahead and hit the submit. 06:28.560 --> 06:33.600 And although this time I'm carrying the data, I can verify that via the URL, that this is the first 06:33.600 --> 06:38.640 name and this is the last name I'm carrying in, but still I'm receiving the empty JSON object. 06:38.640 --> 06:40.130 So what is happening here? 06:40.140 --> 06:42.090 Also, we are seeing the empty JSON object. 06:42.090 --> 06:48.150 But if I go ahead and use the post when again and send this data and this is working fine and even here 06:48.150 --> 06:49.140 we are receiving everything. 06:49.140 --> 06:50.760 So what is going on wrong now? 06:50.760 --> 06:52.680 It heavily depends how you are sending the data. 06:52.680 --> 06:59.310 In the case of EJ's or these templating engine, the data actually is coming up truly from the URL itself. 06:59.310 --> 07:05.070 And in the case of anything else that you're using, like something like React Angular View or any other 07:05.670 --> 07:08.310 any other framework that you can or library that you can name up. 07:08.310 --> 07:11.310 In that case, the data exactly behaves like postman. 07:11.310 --> 07:14.850 In majority of the cases, templating is basically just the exception. 07:14.850 --> 07:19.350 So in this case, if I go ahead and say, hey, I want to not send the body, actually, I want to send 07:19.350 --> 07:22.500 you the query because again, these are not params. 07:22.500 --> 07:24.420 These are query question mark was there. 07:24.420 --> 07:29.520 So if I go ahead and save this one, I go ahead and say, hey, this is all coming in. 07:29.520 --> 07:35.430 Let's go back up here, hit a reload one more time and I go ahead and say, Hey, hit page and my last 07:35.430 --> 07:35.850 name. 07:35.850 --> 07:37.680 If I can write that, it's too big. 07:37.710 --> 07:38.430 There we go. 07:38.430 --> 07:40.110 And hit Submit and the Star. 07:40.110 --> 07:43.290 We are able to see the data itself now going back up here. 07:43.290 --> 07:47.700 This time we are receiving an empty parenthesis in the console.log because there is nothing in the request 07:47.700 --> 07:48.210 body. 07:48.360 --> 07:52.800 And if I go back up here and try to send this one, this says, hey, empty body. 07:52.800 --> 07:57.300 So again, you need to be absolutely cautious that how you are doing it and how the frontend team is 07:57.300 --> 07:59.070 going to handle all of these things. 07:59.070 --> 08:04.260 Are you going to truly use the template engine or you're using something like React Angular V or something 08:04.260 --> 08:04.770 like that? 08:04.770 --> 08:05.970 This is a common mistake. 08:05.970 --> 08:10.350 I have seen people struggling so much into that, but that's how it works in the templating engine. 08:10.350 --> 08:12.600 It truly travels into the URL itself. 08:12.600 --> 08:16.020 In the case of majority of the time, you'll be doing it as a requested body. 08:16.020 --> 08:19.470 So again, this is a big gotcha, so make sure you keep an eye on that. 08:19.470 --> 08:25.110 I usually always design my back end using requested body in all the forms because that's how truly it 08:25.110 --> 08:28.560 should travel, not via the request dot query itself. 08:28.740 --> 08:30.600 Okay, so I hope this time you got it. 08:30.600 --> 08:35.070 And now you understand every bit of nativity details about how the farm should work on. 08:35.070 --> 08:36.750 Again, keep an eye on a couple of things. 08:36.750 --> 08:38.820 Maybe you want to help your frontend team as well. 08:38.820 --> 08:42.150 So this should have a method of git and this should also have an action. 08:42.150 --> 08:45.900 Each farm should have a name so that it knows what it carrying in and all of that. 08:45.900 --> 08:47.100 So basics up here. 08:47.130 --> 08:53.220 Now one more big side note in case there is also an image coming up, you never, ever want to handle 08:53.220 --> 08:54.690 the images into the get form. 08:54.690 --> 08:59.280 You always want to handle the images through the post form because they are much more easier and the 08:59.280 --> 09:02.280 way how data travels in them is always same. 09:02.280 --> 09:06.000 No matter what templating, engine or anything that you are using, it's always the same. 09:06.000 --> 09:08.280 Let's go ahead and catch up into the next video.