Welcome back in this lesson we're going to continue with the camp app and we're going to add in the
feature or the ability for a user to submit a new campground.
So there are a few things we need to do.
The first one is to set up the post route that we actually create the new campground added into the
array.
Then we need to add in body parser and make sure that it's imported correctly and configured and then
we have two other steps here to that concern creating the form and creating the route for the form where
a user can go to actually send that POST request.
So we'll get to that.
We're going to start by setting up the post route.
So I'm still in V-1 and I'm going to open up actually yes an ad in our post-draft and I'll just do that
at the bottom and I'm going to hop up post and rather than doing something like Slash new campground
or add campground I'm actually going to do slash campgrounds.
So that's the exact same you RL As we have for our Get route but there are totally different routes
because one is a GED and one is a post and I'm not just doing this to show you that in fact we can have
the same bureau with a different request method and there are actually different routes.
Yes that's part of it.
This is actually all part of a convention for how we name are routes.
We have a lot of freedom in how we name are out.
But there's actually a convention called the rest and we're going to be coming back to this in future
videos.
But all I want to say on it right now is that to make our routes follow this convention called rest
when we have a page that shows all of the campgrounds that you are l should be slash campgrounds.
When we have a page or a route where we can create a new campground it should be the exact same you
slash campground.
But it should be a post request.
So that is a convention it's a format that we're going to follow if we're doing this for a friend.
We would have Slash friends as it get would show all the friends and slash friends as a post is where
we send a post request to make a new friend.
So we'll get a lot more practice with that.
This is just the very very first introduction to it.
But there are actually seven different routes that are restful that follow this rest convention that
we'll be seeing later.
So inside of here what we want to do is two things we want to get data from form and add to a campground
array and then we also want to redirect access to campgrounds page back to this route.
So we have the ACT UP post set up and we can always just do a red dot send here you hit the post route
and then we can test it out with postman.
So I'll just copy the euro here go back to postman and the route that we're testing is slash campgrounds
as a post not a get if we did it as a get request.
It doesn't actually matter because our servers not started the H Tim L and the SS that we see here is
the error page.
This error page that cloud 9 gives us.
So we need to start the server.
Now if we go back and make the same GET request we'll see the list with the images and the H ones.
And if we do a post request we should just get a little message that says you hit the post-draft.
OK so that's all we'll do with postman proves to us that it's working as a post route and what we'll
do next is install body parser.
So we need to do NPM install body dash parser dash dash save and then we'll import it up here with our
body parts are equals require body Desch parser and save.
And then we need to tell express to use poddy parser.
So we'll do that use Oddy parser and then we also need to do the dot euro uncoated and then pass in
an object and all that we need to do is add extended Colan true.
Remember this is a line that will just see all the time you can just get used to either memorizing it
or just copying and pasting it and will save.
And now we have body parts are set up and we can tell if it works just by running after us and if we
don't get an error we're good to go.
Now let's focus on the form.
So before what I had shown you is the friends app where we had the form on the same page as the friends
list but that's not the approach we're going to take here.
Rather we'll have a complete separate page and route that will actually show the form.
It will be the form to make a new campground.
And then you submit the form that sends a post request to slash campground as a post and then we're
redirected back to campgrounds.
So we're going to make a separate page so to do that we need a separate route and we can just do that
at the bottom here or in between doesn't really matter get.
And this will be slashed campgrounds slash new.
And again this could be anything that we want it to but this is the restful convention.
So this is the third of those conventional names.
The first one was slash campground as a get should show you all the campgrounds slash campgrounds as
a post is the route where you can create a new campground and then slash campground slash new should
show the form that will send the data to this post route so let's flesh this out and all that it needs
to do is render a form we don't need to pass in any data or anything so we'll just do a rez render and
the form will just call new that.
Yes just like that.
And safe.
Now back over here in our views directory we're going to make that template.
So touch views slash new.
Yes.
And then we'll open that template and inside the template add in.
And each one that says Create a new campground and then we'll add in a form tag in this form tag we
need to have action and we need to have method and remember method should be post and action should
be slash campgrounds which is the route here.
Apt up post slash campgrounds.
So this is where we'll get the form data and add to the campgrounds array.
And inside we need two different inputs.
So the first one is type because text and the placeholder will just be name.
And the second one will do placeholder is image you rl.
And let's just do like that and we'll keep it as Typee go to text and then we need our button at the
bottom and here to say submit and save and then we also need the name attribute on both of these so
name and this will be equal to just name.
And here we'll have name is equal to image and we use this name attribute instead of our route to grab
the data from the request Abati.
Before we do that.
Let's make sure this form is showing up correctly.
So we're going to start the server and to visit this route we need to go to slash campgrounds slash
new and we get our form excellent.
We're not getting any of that bootstrap styling.
Not that it looks like much but we're not getting it because we don't have our layouts included.
We don't have the header and footer so we can also.
So let's also add that in include Parshall's slash Hetter and then copy this line down here and include
Parshall's slash footer.
Restart the server go back.
Now we get the beautiful bootstrap and we have the header file and then our footer down here as well
.
And we can test this out to see if it's going to the right route or just typing anything into here and
hitting submit and we get you hit the post route which means that our code the form is submitting a
post request to slash campgrounds.
And we're getting this redstart settled.
But rather than sending this we actually want to add the logic in to make this work.
And remember to get the data from the form we use request of body and then we have request up bodycam
name and request up body image and I'll save those to a variable.
So far name and var image.
And then what we want to do is push a new campground into our array here.
And in order for that to work we have to move this out so that it's not inside of the apt.
Get we'll just put it up top and that's not where it's going to stay.
Remember we're moving to a database very soon.
But for now we're putting it up top so that we have access to it inside of this post route.
In the callback function.
So we're going to push a new campground into the campground array.
So campground set up push and we need to push in an object.
So I'm going to make that new object with a variable.
So I'm going to call it var new campground.
It's an object and we have name is equal to name and image is equal to image just so that we match this
format here or we have name and image and then the last thing we need to do is push new campground just
like that save.
And then let's redirect back to the campground page.
So that will be.
RAZ redirect to slash campgrounds and yes we do have to slash campgrounds.
But when we do a redirect the default is to redirect as a get request.
So we'll save and let's test it out
go back refresh let's add in a new campground.
We'll just call this one daisy mountain and we need a image you are I'll just copy this one here.
Go back.
Hit submit.
And to tell if it worked we need to scroll down and there we go.
Beautiful Daisy mountain.
Pretty stunning sight.
Let's go back and review a few things.
There's a lot that we did.
The first thing I want to bring up are the routes that we made.
So we now have actually get slashed campground which shows us all the campgrounds we have up post slash
campground the same bureau.
And that's where we actually do the logic of making a new campground and then redirecting slash campground
.
And then we have Amtrak get slashed campgrounds slash new.
And that shows the form.
So remember campgrounds slash new shows the form which submit a post request to slash campgrounds which
then in turn redirects us back to slash campgrounds as it get which then will show us all the campgrounds
using the campground template.
It's a little bit of a complicated flow definitely.
There's a lot of moving pieces but this is a recipe that we'll be following a lot.
So we have a form send to post requests somewhere.
And then inside that post route we take the form data.
We do something with it and then we redirect back somewhere else.
So it's really typical for a post route to redirect you to another route.
The very last thing we should do is open up the campgrounds template.
So we'll do C9 use slash campground and we'll just add a simple link up top we'll make it a anchored
tag to start a Tref equal slash campgrounds slash new and that inner text will be add new campground
just like that and we'll save.
And then we can restart the server and let's go back here to the landing page or to the campgrounds
page excuse me and we have add new campground.
Click on it and we get to the campgrounds page and then we can add our new campground.
We should also add a back button so that we can go back to view all campgrounds.
So on the new template at the bottom we'll just include our own anchor tag here.
A draft should be equal to slash campgrounds and this will just say back or go back restart the server
.
One last time her fresh at a new campground go back.
OK so now we have the link set up correctly in the next video.
We're going to focus on some basic styling.