The first thing that we'll do is figure out how we get the form data out of the form and we need to
go back to our form and change one small thing which is on the input we need to give the input and name
the name that we give the input here will be the key that we look at up by inside of the route.
And I think a good name would just be name but I do think that's a little confusing.
So let's just do new friend.
So the value of this in this case Bob will be sent in the body of the request and inside the body the
request there will be a single property named new friend.
And it will be equal to Bob to make this a little easier to see.
Let's go to the US into the post out for ADD friend and let's cancel the log request dot body and request
up body is an object that will contain all of the data from the request body.
And remember when we have a form that's making a post request all the form data is put in the request
body and then it gets to our express EP and we want to pull it out if the request body.
So if I print the request body we should see that new friend is equal to Bob.
However that's not going to work because we're missing one small piece and I'll show you that it doesn't
work.
First let's add in Billie I made a new friend.
We get you have reached the post route and we get a constant log here request up body is undefined.
And that's because Express out of the box doesn't actually create the request up body for us.
We need to explicitly tell it to take the request body and turn it into a javascript object for us to
use called request of body.
So to do that we actually need to install a package called Body parser.
So NPM install body dash parser dash dash save and body posture is kind of gone in and out of express
where at one point it was bundled with the express.
You didn't have to install it separately.
Now you do it is something that we'll use in every app.
Pretty much anytime we have a form that a user enters data into that we want to extract the data from
on the server side.
We need to use body parser.
OK so it's not enough just to install it.
We then need to require it here.
So just you body parser of course require Adi Dasch parser and then the next thing we need to do is
tell express to use body parser so that looks like this need to do app use body parser which is a variable
that we just created by importing the body parts of a package and then we need to do dot you URL encoded
and then instead of here we're going to write extended is true and I don't want to bog this video down
by going into too much detail but with this is if you do have questions you can go to the body parts
or docs and read about what you are el uncoated does and what extended true does.
It's one those lines that will see all the time and honestly just copy and paste most of the time.
So now that we have that set up if we restart the server now without changing our code we have apt up
post add friend and we're constantly taking requests out body.
Now if we refresh Oops! Let's go back to the form slash friends and add in a friend named Linda.
I made a new friend and we look in the con. We see request up Adi is now an object and that's coming
from party parser.
So Buddy parser took the request body and parsed it into a javascript object which has new friend is
equal to Linda.
So what we actually want to do is request up body datt new friend.
And that will give us the value of whatever was inside the form.
And remember new friend is because of the name property the name attribute that we set on the input
whatever we put here is what we would need to look it up by inside of the route.
We don't just want to cancel that log it though what we want to do is actually add it to the friends
array which we defined here.
So the first thing to do is make a new variable and we'll just call it new friend and we'll just store
request up body new friend and then we want to add it to this array but unfortunately we can't just
do friends stop push new friend because there's a scoping issue where our friend is only defined instead
of this function.
And out here there's no such thing as friends.
It's a very sad world.
There's no friends.
So we need to copy this out and move it up somewhere where it's visible to all of our routes.
And this is something that we won't be doing for long because this is just an array of friends and we
can add new friends in but as soon as the server stops they'll go away and reset to disvalue.
Soon we'll be using a database and we won't have to worry about the scoping issue.
For now we just need to move it outside the routes so that we can access it in all the routes.
So now friends stop push new French should work and I'll show you that.
Now restart the server go back to our form here.
Refresh the page and let's add in Jeanne.
I made a new friend and we get to this route.
Now if we go back to friends I see Jean has been added.
So that means that this is working where we're extracting requests up body up new friend.
And we're also pushing it into the frenzy array and then we're sending this response.
However it's pretty rare that we want to have some sort of response like this after we add a new friend
.
Most of the time we don't want to see this.
Usually we just want to go back to this page and see the new friend and to do that what we can do is
instead of send or instead of render we can use a nother method on rez called redirect and redirect
.
Well take the name of a route.
And in our case well do slash friends and they will redirect to this route and they will run the code
inside of the slash friends route and all that does is it renders the French template and passes in
the value of friends.
So now if we start the server again and we go back refresh the page let's add in a new friend here.
Tina and hit I made a new friend and you can see Tina has been added.
Remember that we're not just staying on this page the whole time.
If you watch this right here let me do it again.
Let's add in Jeanne.
I hit I made a new friend.
You can see the page momentarily refreshes and that's because we're sending a post request somewhere
else that post requests is getting too wrapped up post.
Ad friend it's doing some logic in here.
And then it's very quickly redirecting us back to the same page the same route that we're already on
.
So it's hardly noticeable you'll just see the page flicker for a second and see this little icon is
the giveaway that the page is revoting.
But as I mentioned if I restart the server the value of the friends array goes back to this.
So we lose all of those friends and we don't have any permanence to our data.
We'll fix that once we get to databases in just a few of us.
OK.
Let's de-brief on everything we've covered a lot here.
The first thing we talked about was setting up a post route and all we had to do was app post and it
works just like apt get except that it's only triggered by post requests to that particular you row
.
And then you know and then we saw how we can send a post request with postman which works and then we
saw that we can send a request a post request using postman.
And then also using a form.
And when we send a form we need to provide action and method and I introduce this really early on when
we talked about age to my forms and I mentioned that later in the course you would know more about what
action and method mean and what a post request is versus a get request.
So this is that time now where you're starting to understand a little bit more hopefully about the difference
between getting posts and what this action means and what routes are anyway so we have a forum and it
hasn't a single input and on that input we've added the name attribute and this name attribute which
we've set the value to be new friend is how the data is added to the request body.
So when we submit this whatever the value of this form is let's say Tina it's going to be sent under
the name of new friend.
And then inside of our apparatus we can extract it with the request up bodycount new friend only if
we've included body parser which we had to install NPM install body purser and then we had to tell our
app to use it.
So apt use the parser and this whole line is one will see all the time and when we do that the parser
will take the request body and parse it into a javascript object that we can use and access like we
did here.
And the last new thing that we saw was redstart redirect which will take a you know like slash friend
and that will trigger that route again and run all the code inside of the slash friends route.
All right I'll see you in the next lesson.