Welcome back.
So we're picking up where we left off.
We've covered index we've covered create new We've covered show.
Now we're doing edit and update and I'll be upfront with you in my opinion.
These two are the most work and that's because if you think about what it slash update actually accomplishes
it's sort of a hybrid between new and create and show where new uncreate can just create a new dog every
time or new blog at it.
An update have to first find the old one and then update it.
So will start with it.
Which is slash dogs slash ID slash EDID which shows the four.
So let's begin there.
Before we do that I'll just highlight some of the things you need to talk about.
And it wrote it form update route update form and something called method override which I'll get to
but it's a nice little issue that we have to deal with.
So let's start with the edit route.
And actually yes
just after I get slash blogs slash ID slash at it.
There we go at our callback request and response and all that we need to do in here to start is response
got render the edit form that doesn't exist yet.
Great.
Now let's create that form.
So touch use slash at it.
Yes.
And then open it up.
Let's start nice and simple with just an H1 page and make sure we see that.
So start the server node at J s and to get there.
You take any of these and add on slash at it and it could just be anything such that it doesn't have
to be a valid ID.
We still see the edit page.
Great.
Now let's get a of that and to do that we can just take the form from new.
So I'm actually going to copy everything from this page over and then we'll update a few things.
First one is rather than new blog.
I'll change it to be added.
We also need to change where this post goes or where the form goes.
So it's not slash blogs anymore.
We need to send this to the update route which is Doug's slash ID but we don't have the ID here yet
.
We have to look it up first in the template so I'll leave it as sashed blogs for now and I'll leave
methodis post as well and we'll leave everything else as it is to start.
Let's make sure that when we open this up we see a nice form that says at it and we it next that are
two features that are linked.
Basically we'll get them both for free.
By doing one thing those two features are one.
We need the form to submit to the correct you Arel which is slash blogs slash ID.
So we need that ID.
The other thing is that we want this form to be prefilled with the data.
Otherwise you're not really editing or just typing stuff over so it should show the title of the blog
that I'm editing the image and the content.
Both of those require us to first look up the actual blog inside of our edit route.
So this is what I was saying sort of like a combination of new and show because we have to first use
this ID to find the correct block.
So just like show its blogged out find by id and the ID is request that parameter ID then we have our
callback called this found log again if there is an error let's just do our same redstart redirect to
slash blogs else rest that render at it.
Except we're going to pass in a little bit of data and that will be log is equal to found blog.
Perfect.
Now we have blog in our template.
Everything went well.
So inside of it let's start simple by saying edit and then put the title here so that will just be log
.
The title is Ejay us if we refresh now we will have to restart refresh this page.
Actually this one's a terrible example because we don't have a title so let's pick one of the early
ones like this one here first post or go to slash at it.
We see it first post.
Great.
So now we need to add in the data into the form.
And that's also really easy.
Remember that we specify the value of the form whatever is inside of the input using the value attribute
.
So rather than placeholder we want value and we can start by just saying value is equal to a low.
And I'll show you what we end up with there it's prefilled with a low.
So of course we don't want Hello we want a variable and the value we want there is just blog that title
.
So run our javascript to get the blog title and then put that inside the value and we'll do the same
thing for image except blog that image.
Check it out.
Now if we are fresh We have a title and the image pre-filled the text area it's a little different texture
don't have a value attribute instead whatever is in between the tags the inner content is what is pre-filled
.
So it's actually simpler.
All we need to do is copy this huge yes in between the tags and do blogged out body refresh.
You can see we now have a blog post.
So if we added some more data this is updated now.
And I hit submit.
We still have a problem which is that this form doesn't go to the right place.
Now we need to focus on the update route.
So update sashed dog slash ID as a put request.
So let's start in our app yes an add in the route.
So update route app dot.
This time it's put because it's a pote request and remember that the whole point of HTP requests these
different verbs is really just to make things meaningful.
Did To add divisions to functionality so that if we see there's a put request we know that it's supposed
to be updating something but you could do everything with post requests only.
So it's not a deal breaker at all but if we're following a restful routing we need to do a put request
so apt put and the URL is slash logs slash ID just to refresh right here dog sosh ID blogs slash ID
and we'll have a really simple thing in here that just sends back red dots and
update wrap.
Just so if we see this message we know that it will work.
And if I go and now update our form so that it submits to the right place and need to go into it if
it changes to be put and change this to be blogs it has to be slash ID so I could just put anything
there.
But to actually put the ID there I need.
Yes just like this show wrote blog dot underscore ID and say Now I hate to break it to you but this
wont actually work.
So if I submit this let's call it first post updated so we can see it and I click submit.
You'll see that it takes us to the show page and not only does it take it to the show page but it adds
all of our form data into the route appear.
So I don't know if you can read this but it says title is first post updated the image is the image
you are around.
So it took the form data and put it in the you or row as a query string which remember that happens
when you make a get request.
So we have a problem.
And the problem comes down to this.
If Tim forms don't support requests they only support get and post requests right now.
And the reason behind that is it's really hard to get a clear answer on at one point.
It was supposed to be included as part of the amount of forms that we're able to make requests and delete
requests.
And then apparently they found it too difficult.
I was just reading about it.
I've included a link in the description for this video but you can read about it.
There is no conclusive answer.
The only conclusion people have come to now is that it's way too late for them not to have implemented
it.
And it's a little surprising that you still can't send to put requests using a form.
So with that said there is a workaround.
And that's where this little line comes in method override.
So what method override let's just do it's a simple package we install we tell express to use it and
then we go to our form and we add in a little bit of a cheat where we send a post request.
And by the way when you try and send a port request it will default as a get request which is why this
happened and that's why it took us to the show page because we made a request to blog slash ID which
is our show.
OK.
So if we change just to post and we add this little cittie thing at the end of our you Arel question
mark underscore method equals put this will send a regular poster requests.
But it has in the query string underscore method equals put and method override will configure it instead
of actually yes.
So that it looks for this underscore method and if it sees underscore method equal to put or underscore
method equal to delete it will treat it as put request or as a delete request and to name method to
override it overrides the fact that it's a post request you know treat it as a put or whatever we specify
here.
You could specify a get request or delete which we will do in just a little bit but for now we're going
to go with it.
So underscore method equals put which doesn't do anything on its own.
It's just a query string.
Nothing changes.
Quintel we do this and PM install method override dash dash save while that's going you might be wondering
if it's worth going through all this effort because we don't have to do this.
Remember we could just have another route called blogs update and we don't need any of this.
We can make it a post request.
It's totally up to us to define our own routes.
But yes it is worth it to have this convention to have this pattern that we follow.
We want our edit requests we want every part that's involved in updating to be a put you want or destroy
or delete information to be a delete request.
It's just a matter of following a pattern.
OK we have that done now in our Abdus.
All we have to do is require method override.
I'll do that here.
Method override equals require method Desch overwrite save add or comma in and then we need to tell
our app to use method overwrite.
So after I use method override and we need to pass an argument what it should look for in the you are
now.
Arse's underscore method.
It can be anything but that typically is what your see underscore method.
So now we've told our app whenever you get a request that has underscore method as a parameter.
Take whatever it's equal to put get post patch delete whatever it is for us it will be put and delete
and treat that request as a put request or as the delete request.
So now our route down here where are you you up output should now be executed and we should see this
hopefully.
So let's try to.
No problem so far.
OK let's go back at it form.
So let's change it to say updated.
Some exclamation points submit and we now get update route.
So notice the request that was made has underscore method equal.
Put in the URL which tricks our app doesn't really trick it but method overwrite is listening for that
and it says OK this actually isn't a post request.
They want us to treat it as a put request so it triggers are put out.
So now we need to update what happens in here.
It should take the ID in the will find the existing post the existing blog and update it with the new
data and we can do that in one fell swoop using a method of the log that bind by id and update and it
takes three arguments.
The ID defined by the new data and the callback.
So this is a really nice method.
The ID is nice and simple request Paramjit out ID the data from the form is whatever we called it inside
of our form log.
So request body up log
and callback is recovery.
We want to run
error and we'll call this sound logic again or actually to be a little clearer.
Let's do updated blog save.
If there's an error Let's redirect you back to the index for now.
It's not the best user flow but it's fine for us redstart redirect Sache blogs.
Otherwise.
What we want to do if you've successfully updated.
We could either take you back to the index or we could take you to the show page and let's do the show
page.
So redstart redirect.
And that needs to be slash blogs slash in ID and the ID is in a few places we could find it in updated
blog or the simple so on is to use request at tramstop Id just like that.
So we need to plus request up for amstaff ID so that it redirects us to the right show page because
we have to have the ID.
Lets test it out now see what happens.
OK lets add this one that it says really updated now.
Submit and it worked.
You can see that it found it Id had updated it and then it redirected us to the show page and now our
new title is there and if we go back you can see that.
Where are you at the bottom here.
First post really updated now is still updated so it persisted in the database so it's a lot of work
to get update to work.
The new code was adding method overwrite in which again it's it's a little bit weird why we have to
do that.
Basically HDMI forms just don't support anything other than a get or post request.
So every framework out there most frameworks at least something like Rails has its own particular way
of faking a request or delete request and the whole point is just so that on the server side we can
write code to listen for a put request or listen for a patch request or delete request rather than having
to define another route like APT not post update blog slash ID is we could just do this but the idea
is that you don't have to.
We can keep it as blogsite ID but make it a put request and we already have another blog slash idea
of course for our show as a get request so it's a way of just separating things out while keeping you
or else the same.
All right.
So method over I'd listen underscore method which is what we configured it to do right here.
Great.
So we have an update.
The last thing we have left to do now is destroy it and destroy it luckily is nice and simple.