OK we'll come back.
So we're going to get started on editing campgrounds.
So this is a little bit of review from the rest to unit where we made that blog up with semantic UI
but we're going to add some new concepts on top of that as well.
In particular when we get to comments to start though we're working on editing campgrounds so that when
I go to the campground show page first off to start the server
I should be able to see a button that says edit I can click that edit button takes me to a form I fill
it out that forms submit to the update campground route and then that will redirect me back to the show
page.
And we should see those changes.
And anyone can do this to start.
No permissions no authorization.
We'll talk about what that means in just a few videos.
Once we cover the leading campgrounds as well.
Great.
So let's get started.
First thing that we need to do is add in method override.
And I'm going to pull up the restful routing chart that I made just so that we can remind ourselves
the routes that we need.
So let me just add this as another file in the same window.
Remember that it is slash campground slash ID slash at it and update is sashed campground slash ID as
a put request.
So we need method override for that put request so we can start there NPM install method Dasch override
.
And I mentioned this in the last video.
But just to remind you I'm working in V 10.
So it's a new version.
OK.
Method over I'd dash dash save make sure that works.
While that's going on closed this down and will open up.
Actually yes and will also open up campground J s wraps and we're going to add a spot in after show
for at campground row.
And another one for update campground.
And if you're forgetting why we need both of them you can review that restful route's video of that
unit we went into a lot of detail but again it's just we need a form on it and the form has to submit
somewhere which is update.
OK so inside actress let's now configure it to use method overhead.
So we first need to require it.
So that's going to be method override.
We can call it whatever we want of course but this matters method Dasch override.
And then we have to do an apt use use method override and then we have to tell it what to look for and
we want underscore method.
That's the conventional thing that you'll see all the time.
I think that's actually what they recommend on the method to override documentation.
So underscore method.
Great.
Now we're going to actually take a step back and work on the Edit Raben so that we can get the form
to show.
So let's start there in our campground J.S. routes.
The route is a get request and rather than app we're actually working on router.
You can see so router get slash.
And we don't need to say campgrounds slash ID slash at it because remember interrupts Yes we're requiring
the route's right here.
We're adding all of the campground routes after sosh campgrounds.
So we don't need that.
So we just need slash ID slash at it and then our requests and our response and the callback.
And as always it's to arrest us and at that campground route and just make sure we see that.
OK but start things up.
Make sure we don't have any problems.
Let's refresh and then just add on slash at it.
Great.
We see it at campground right.
That's all we needed.
Now let's go back and actually render a form.
So rez render it needs to be campgrounds which is our views directory here.
Slash at it which doesn't exist yet.
So let's make that file now.
So we want to do a touch fuse slash campgrounds slash at it.
E.J..
Yes.
And then C9 that file again.
Tab completion is your friend there and we'll start simple with just edit form and then let's add in
another line just paragraph form goes here just so that we know for sure we're getting the right age
.
Tim I'll start the server again refresh and receive your template.
Great.
So now we're going to add a form here and rather than creating our own form from scratch I'm going to
take the new form for campground just right here and copy this over because it's really similar to what
we need so really the only difference between new and edit is where the form is going.
That's one difference and the type of requests that we're making.
So let's start by specifying the action and we can do what we need to do just yet because it needs to
be campgrounds.
Slash and Id like something like that slash at it but we need to get that ID.
And right now we don't have that particular campground that we're editing.
So inside that edit route not only do we render a template but we need to pass in a campground that
we're editing.
We haven't found that campground yet but I'm going to give it a variable name found campground that
doesn't exist.
You see we're getting complaints from cloud nine.
Now we need to do a campground find by id and then the ID is right here request harams ID and then our
callback error and otherwise we'll call it found campground just like that if there's an error.
Let's do a rest.
Redirect and we'll just go back to slash campgrounds.
Otherwise we'll render the edit form and pass in found campground under the name campground.
Great.
Now instead of our template we'll use campground to set up the link for update route.
So it's campgrounds slash campground down underscore ID Ejay Yes.
So this is the value of the campground to ID the campground that we're passing to this template slash
at it.
And then the other tricky thing is that remember this needs to be a put request that we're making and
to do that we actually have to send a question mark underscore method equals put and then we leave method
as post.
So that's one change we'll make.
We'll also update what we say here.
So I'll do it and then the name of the campground campground name and see what we get.
So if we go restart refresh the page we get edit desert high that's named at the campground and we're
close.
We have a form that will submit if I if I click submit though we don't have the routes set up so it's
telling me cannot put slash campgrounds.
But to start let's fill in the data here so that when I edit a campground I see the data that I'm editing
and or have to type it all from scratch.
So that's simple if you remember back to the first video on it and update with the blog site rather
than giving it a placeholder.
We're going to give it a value and the value just needs to be campground and whatever the property is
a campground name and I'll copy this down for the image you throw.
So campground that image.
And then finally campground that description I make sure I spelt that right.
So remember what we're doing is looking up a campground in the route based off of the ID then rendering
this template.
And if I refresh you'll see that we're taking the data we found from our find by id passing that campground
to the template and then displaying the information as the inputs values.
So we have that done now.
Now we need to work on when I actually submit this.
So let's change this.
So we see some changes add some extra symbols and hit submit.
And of course I have this problem where we don't have the update route.
So let's do that next.
We can close out of our new I'll keep at it open for a little bit but we need to add in our update route
which is just going to be a router dot put.
And if you forget what it is update it's a put request to slash campgrounds slash.
Id just like the show page except it to put request not a get request.
So slash colon ID and that's it.
Request in response and then we save.
And inside of here what we need to do remember is we need to find and update the correct campground
and then redirect somewhere usually the show page is what makes sense once you update an item you don't
want to just go back to the whole list of campgrounds but you want to see your changes actually on the
show page.
So we'll begin with finding an updating which we could do separately.
You could do a find by id and then do an update afterwards.
But remember remember mongoose has that nice combination which is campground.
Find by id and update and it takes in a few arguments.
The first one is what we're finding what ID are looking for which is just request up harams ID from
right here.
Next is the data that we want to update and if we look at our form our data is name image and description
.
So what we could do is build a new object in here that looks like var data equals and then we'd say
name is requests that body that name image is request body image.
But that's a little bit of a pain.
And I've shown this to you before.
What we can do is wrap them all together inside of campground or whatever you want to call it.
But I'll do campground.
I'll just copy this down here and here at the closing bracket.
Now if group these three things together.
So if my Access Request up bodycam campground I now get name image and description all nested inside
of a single object.
So all I have to do now is pass in request of body campground just like that.
And then my callback with error and then we'll call it updated campground.
For now if there's an error we'll just do our standard.
Not very usable but an easy fix for now is just to redirect back to campgrounds.
Once we implement flash messages we'll be able to specify what the problem is and we can redirect somewhere
else that makes a little more sense.
But we won't really have any cause for an error just yet unless our database is turned off or something
.
And then if it works what we'll do is redstart redirect to the show page which needs to be sosh campgrounds
.
And the idea here which we need to add in the plus sign and we have a few ways of getting that ID we
could do updated campground dot underscore ID or we can do requests dot parameters ID that's what we
have right here in this wrap and will save.
Now let's see what happens if I restart the server
go back to the edit form refresh.
Add in some noticeable data here submit and we have a small issue which is our route is still not quite
working and it's actually that our route works fine.
It's the form is submitting to the wrong place.
Notice our request is campground slash ID slash at it.
We don't want that slash at it.
That's supposed to be the form has slash at it but where the form submit is supposed to be campground
slash ID as a request.
So we need to get rid of this.
Now if we try that again refresh add some data and submit it works.
It updated the campground it found it first and updated it and then redirected me back to the show page
and I see my changes.
The last thing that will do in this video is add in a button that says edit.
So I can click on that button and go to that edit page without having to type slash edit manually.
So that's simple.
It's just a link that needs to go to this route and we'll do that on the show page.
So campground show will do it just underneath everything else to start.
So inside of the image responsive caption for not in the comment section but inside of the column medium
nine inside the thumbnail.
After are submitted by all this add in a button which will be an anchor tag ref needs to be slash campgrounds
slash and then the ID with Aegeus campground dot underscore ID and then we need slash at it and then
we'll just have a text be added but we also need a class to make it look a little nicer with bootstrap
and we'll just do PTEN ETN.
And I think a color that might make sense might be warning rather than danger will reserve danger for
that delete button.
So let's take a look now.
I go back I refresh.
We have an edit button which is actually a link I click and I get to the edit form.
So let's take this back to normal submit.
Great.
So it's working.
Let's go back and just update one other one.
So we'll go back to sash campgrounds.
Make sure that it works well.
Update granite or lowly creek.
What how did this change the image to be this image here.
Pay set in submit and add up it's perfect in the next video.
We'll focus on deleting campgrounds