Hey there, everyone.
Natascha, and welcome to another video.
In this video, we're going to again see the request form.
And again, I will change a little bit in the form, but just the UI part itself.
And then we're going to come back onto this that why having the conversation with the Frontend team
is super important right now.
This is how our form looks like.
I'm not too much happy with it and especially the email and the password.
This will obviously trigger my password saver and it will come again and again, so I don't want that
kind of thing.
So what we're going to do is change this git form a little bit.
And again, follow me up here, the place where we created this container, we can add a class of empty
dash for this will give us a margin from the top a little bit for again, I know this is not a front
end class itself, but again, these things are kind of bothering me a little bit, probably you as
well.
So let's fix them up.
And also, we're going to have a simple call, Dash four and we're going to have a call dash offset,
dash six.
What this is going to do, this will shrink the entire of the form into a smaller form, and it will
offset it a little bit under the center of the page if I go ahead and save this one, since this is
not reloading my server automatically, I need to create another node on JSON file and inject edges
and all of that.
Or I can come here and quickly do a save it automatically just reloads that.
Let's go ahead and hit a reload and now the form is looking a little bit better.
Again, not too much of a big deal.
I'm also worried a little bit on to this form part, so I'm going to go ahead and change this form.
So instead of this saying for input and IDs, same up here, I'm not really bothered about that part.
I'm going to go ahead and change this one here that hey, this is not an email form and not a password
form, so let's go ahead and change these labels as well.
So this is going to be let's just say first name and let's go ahead and copy this first name everywhere
and place it in the four in the ID and any other place that you are looking at for this is text.
Let's go ahead and this one is fine.
And here also, we're going to just say last name.
So let's go ahead and say last name.
Copy this everywhere and here else will and here as well.
So I think this should make a little bit more sense now that, hey, this is just a regular form and
not any email or password.
So let's go ahead and use that.
So first name, last name finds absolutely great.
And since we have made this changes, I would like to just place this exact form into the post as well.
So let's go ahead and copy this.
I know this is a little bit too much for you, but this is bothering me a little bit.
So let's go ahead and save this one.
And change this one here as well.
So what we have copied.
We have copied from.
Let's go ahead and change the entirety of the body.
Actually, let's copy the entire body.
Copy that.
And place it up here.
So entire body is getting replaced with our form body.
And change this one to post.
So there we go again.
We don't need to check it much.
Things should be fine.
Coming back on to the point now, everything looks good.
Let's go ahead and check it one more time.
Yep, they are looking good.
Now, coming back onto the part that how and why we are saying that we want to have a conversation.
Now, it is very important that you have a conversation with how the front end team is going to handle
the situation.
Sometimes I have seen in the corporate that they just want to go with the EEGs itself or some kind of
templating engine.
And yes, the frontend team is working but they want to put everything into eggs.
In that case you need to first know this information that how the data is going to come in because this
is very important.
If your team is going to use something like React Angular View or any other such library, then things
are much more easier for us and are going to act exactly as post one.
What do I mean by that?
Okay, this is important information for you.
Let me show you that.
So we have seen that this is our form that is absolutely working fine.
We have defined it out.
That is says my get and in that we are just dumping out the body.
Whatever sends me the request, I'm sending him back whatever the request is in the format and I'm receiving
the data in the body.
We saw that already.
Now, let me bring in the postman and show it one more time to you.
So if I make a request to my get the same thing, I send the name and I hit the send request.
I get the name back.
If I go ahead and change this one to something like Learn Code online and I go ahead and send this one
I receive back as the name.
Absolutely fine.
So it is clear that when I send the data as in get format, I receive that and in my body everything
is now converted into the JSON.
We had a long discussion over that.
Now coming back onto the point, now let's just go ahead and see that if you have a form and if this
form is submitted to my get this form sends the data and I told you it sends the data in the request
or body format.
I agree that part.
Let's go ahead and handle this form.
So as soon as this form comes in, you probably already know this one.
That form has the method, in this case the get.
We are talking all about it and it also has an action.
So let's go ahead and work on with the action.
And the action goes to my get.
That is absolutely fine.
Since we are using this templating engine, I don't need to write the entire path.
It automatically figures out that, hey, this is where you want to submit the form.
Now if you just add this much of it, save that, and in fact come up here and hit a reload so that
everything reloads.
I come back onto this browser, hit reload again just for the confirmation.
I go ahead and send my name up here.
I go ahead and say Hit page and my command.
This shouldn't be password like that.
You need to see the information entirely.
So let's go back up here.
Get from again last one more time into the get from this is type password.
No it should be text.
You need to see all the information that is going on.
One more time.
Save this one.
Come back here, hit a reload, and hopefully this time let's go ahead and see that page.
And there we go.
So you're able to see every information.
If I go ahead and hit submit, it gives us an empty JSON.
Why it is giving the empty JSON.
Also, you might have noticed in the URL itself, this is my get question mark and nothing after that.
This is a classic mistake that a lot of people does in the front end because in this case you have given
this input, but there is no name given to the input.
Name is an important property.
So this is bringing in first name.
And here also in this input we need to provide the same name property.
This is carrying the last name.
This is why it is important.
Okay, go ahead and save this one and hit the save and let's come back again.
Give it a one more.
Try that.
Hey, let's reload this one.
Not the question mark simply.
Or we can hit the back button.
Let's go.
There we go.
Hit a reload up here.
One more time that we are all in the first page.
Let's say hit page and again.
There we go.
I go ahead and hit the submit.
And although this time I'm carrying the data, I can verify that via the URL, that this is the first
name and this is the last name I'm carrying in, but still I'm receiving the empty JSON object.
So what is happening here?
Also, we are seeing the empty JSON object.
But if I go ahead and use the post when again and send this data and this is working fine and even here
we are receiving everything.
So what is going on wrong now?
It heavily depends how you are sending the data.
In the case of EJ's or these templating engine, the data actually is coming up truly from the URL itself.
And in the case of anything else that you're using, like something like React Angular View or any other
any other framework that you can or library that you can name up.
In that case, the data exactly behaves like postman.
In majority of the cases, templating is basically just the exception.
So in this case, if I go ahead and say, hey, I want to not send the body, actually, I want to send
you the query because again, these are not params.
These are query question mark was there.
So if I go ahead and save this one, I go ahead and say, hey, this is all coming in.
Let's go back up here, hit a reload one more time and I go ahead and say, Hey, hit page and my last
name.
If I can write that, it's too big.
There we go.
And hit Submit and the Star.
We are able to see the data itself now going back up here.
This time we are receiving an empty parenthesis in the console.log because there is nothing in the request
body.
And if I go back up here and try to send this one, this says, hey, empty body.
So again, you need to be absolutely cautious that how you are doing it and how the frontend team is
going to handle all of these things.
Are you going to truly use the template engine or you're using something like React Angular V or something
like that?
This is a common mistake.
I have seen people struggling so much into that, but that's how it works in the templating engine.
It truly travels into the URL itself.
In the case of majority of the time, you'll be doing it as a requested body.
So again, this is a big gotcha, so make sure you keep an eye on that.
I usually always design my back end using requested body in all the forms because that's how truly it
should travel, not via the request dot query itself.
Okay, so I hope this time you got it.
And now you understand every bit of nativity details about how the farm should work on.
Again, keep an eye on a couple of things.
Maybe you want to help your frontend team as well.
So this should have a method of git and this should also have an action.
Each farm should have a name so that it knows what it carrying in and all of that.
So basics up here.
Now one more big side note in case there is also an image coming up, you never, ever want to handle
the images into the get form.
You always want to handle the images through the post form because they are much more easier and the
way how data travels in them is always same.
No matter what templating, engine or anything that you are using, it's always the same.
Let's go ahead and catch up into the next video.