Welcome back.
In this video we're going to take you through the steps of creating a simple application very very simple
and the goal here is to show you how POST requests work and express how we create routes that are listening
for post requests then how we can test them with postman and then see how we can write a form on a different
express template and have that form make a POST request to our express app.
So as I mentioned we are going to make a simple application together and I am going to start from scratch
and install and include Express.
And then we'll get going on the actual application logic.
So I'm going to start now and just make a new directory which I'll call post request demo CD into that
and we'll run NPM in it and we'll just hit enter a few times change entry point.
OK.
There we go.
We have our package that Jason let's now install express dash dash save.
And while we're here let's NPM install E.J. s as well and save that.
OK.
Now let's create our app.
Yes.
And then we will open that up and add in our basic expressed code we need.
So we're going to import it with require and then create an app variable where we execute.
EXPRESS And while we're here we'll also do app does set you engine to be Ejay Yes and I'll save that
.
And then we also do our apt up listen at the bottom instead of here will do you process that.
And we got it.
And to process ENFP IP and our callback function.
And lastly I'll just do a very simple come to the log server started.
OK.
So we have that set up.
Now let's create our brute route
just like that and we'll just render a template for now restaurant render called home just like that
and save.
Now let's make that template.
So we need a used directory make directory views and you need to touch your file views slash home.
Yes.
And then open that file and inside of there we'll do a simple H-1 that says home page just like that
and we'll make sure that works.
So let's run node Apalachee us go back here refresh and we get home page.
OK so we have the basic skeleton set up we have express included we have Ejaz included.
We've set the default view engine and we have our route route.
The app that we're going to make is basically a list of friends or friends list that you can then go
in and through a form you can add a new friend to your list.
And this could be anything friends or to do's or contacts or dogs just something that we're going to
have a list of that we then can create a new one using a form.
So we'll do friends and we're going to add in app and get slash friends and this will be the page the
template that shows a list of friends.
And instead of here are going to do a redstart render and we'll just call it friends and now we need
to create that template.
So we'll do touch views slash friend that Ejay us and then open that file just like that.
And inside of here we'll add another H-1 just right friends list goes here and we'll run our server
make sure that it works.
If we go to slash friends we get friends list goes here.
OK.
So what we're going to do is display a list of friends.
And so we need to create that list.
We need the data.
So I'm going to create an array of friends names and it's going to be very simple just far friends equals
and we'll just add in a few names here like Tony and Justin Pierre and Lilly.
OK.
So we have an array of friends and then we're going to pass that array of friends through to our friends
template where we'll then loop through and display each friend as a list item.
So we need to pass that in.
Remember it's an object and we have two things need to do.
We need to give it a name or a property that we'll use to look it up in the view which I would just
call friends and our data that we're passing in as also friends which is confusing when you're just
starting out.
But this is what you'll see most often where you just use the same name but remember this can be anything
at all.
And this refers to our friend array right here.
OK so now let's go to the template friend study genius and add in our loop and I'm going to do a for
each.
So I'll just write the regular javascript first without the brackets without the Ejay us.
So we have friends for each function and our function will take friend parameter there and then we have
our opening closing curly braces just like that.
And instead of here what we'll do is make an ally for each one that says I have a friend just like that
.
Now let's go back and add in the phrases that we need no equal sign or remember this is just for logic
.
We don't want anything to show up on these two lines.
So we have that done and if we save and refresh we should see an ally that says I have a friend for
every friend in that list and let's try that out make sure we don't have any errors.
Refresh the page and we get 5 list items that say I have a friend.
Now we'll go back again and rather than just saying I have a friend let's actually print the friend's
name.
So this time we do need the equal sign because we want the value that evaluated to be added to the team
itself right here.
We want it to be replaced with the value of a friend which is coming from right here in our for each
.
Again this can be anything.
Name it whatever we want x.
And if it put X here it will work.
So let me just show you that refresh and we get our five friends and because X is a terrible variable
name many go back to friend just like that to restart the server.
One more time and you can see nothing changes.
OK so we have this list of friends.
Now what we're going to do is talk about setting up the post route.
The goal in the end is to have a form at the bottom of this page and we can type in a name into that
form and hit the submit button and it will then add a new friend to our list.
So we'll be pushing a new name into the Friends array and then rendering this template again which will
then add a new bullet point and new list item for that newly added friend.
We need to start by setting up a post-road and remember that we use a post Strout any time we are adding
data to something when we're sending data through and we want to add it to the database whether we're
signing up a user or we're creating a new comment or creating a new post or in this case a new friend
a post route.
Is what makes the most sense although it isn't the only option.
For now we're going to treat it as if it is the only option.
So get it's just for retrieving information and a post is for sending new data to be added or to be
used somehow on the server side.
And all we need to write is apt up post and the name of the route let's call it add friend just like
that and it looks the same with the request and response and we'll leave it as this for now.
And inside we'll just do a rest up send We won't make a template just RES dot send.
You have reached the post route just like that.
So now let's see if we can trigger this out if we can hit it add friend as a post request by using postman
.
So I'm going to take this URL and copy this over to postman and where we want to make a request.
We can start by just doing sosh friends as a get request and you see we get back each team him with
the five friends.
But now let's make a post request and we're making it to slash add friend.
And now if we send a post request we get a message can not post add friend and that's for a silly reason
.
We need to restart the server any time we add a new route.
And now if we go back and send the request again we get a message.
You have reached the post route.
So we're sending in post request and we're doing it through postman rather than using a form but it's
the same exact idea.
It works the same way.
We send a post request and this code is being run right here.
OK so the next thing that we want to do is use a form to send that post request.
So I'm going to go to the friends study each page and at the bottom a lot of form and this form will
submit to that route.
So remember there are two important attributes.
There is action and then method.
So let's start with method.
We want to send a post request and action is the you are a whole which is slash and friend.
And again that needs to match this rate here.
Slash add friend as a post.
All right.
And instead of here we're going to have a single input type equals text and then we also want to have
a placeholder that says name or whatever we want to put there.
That's just the placeholder text and then we'll also add a button at the end and this will just say
I made a new friend and save that.
And so this will create a form for us right now.
If I restart the server and I go back and I refresh the page I now have a form here and if we inspect
it it has those two attributes where we have action it's ADD friend method is post and it has a single
input.
And if I type something into here I made a new friend today named Bob and they click.
I made a new friend.
You can see that we're getting that response.
You have reached the post route which means that we are sending a post request and that we're sending
it to the right place.
Slash add friend but we're not doing anything in that route.
Aside from responding with this message and what we actually want to do is take the data from the form
you want to take Bob.
And then we want to add it to the friends array and then we want the user to come back to this page
where they can see Bob as new bullet point