Getting Started With AdonisJS 4.0

Getting Started With AdonisJS 4.0 [5] – Edit & Delete Posts

alright guys so we can now read our posts we can go to a details page we can add them now we want to try to add the edit functionality or not try to but we

will add the edit and update functionality so let's go to the details page because that's where we want the button we want an edit button here so we'll go to resources views posts

details edge and we're gonna go let's see we'll go under the paragraph let's put an HR here and then we're gonna put an a tag I'll give it a class of BTN BTN dark href is gonna be slash posts slash

edit and then slash the ID which will be post on ID all right and then let's see inside here let's just say edit now I want this to float to the left as well so I'm going to add an extra class or a

couple extra classes one is going to be D – block and then one's going to be float left and save okay now I have an edit button now if I click it we'll get an error because we didn't create that

route so let's go to our routes and this is going to be a get request make sure it goes above this right here okay so it's gonna be /po / edit / : ID and it's gonna go to post controller

dots it okay and all this is gonna take care of is loading the form the update is what's gonna do the update so let's go to our controller and let's add the edit okay I'm actually gonna copy the

add method here and go down to the bottom under store and change this to edit now the difference between add and edit is we need params with edit so we're gonna go like that and then we're

going to fetch that post just like we did with details so if we go up here we can actually just copy this and then we just want to pass in post post okay but we want to render post dot edit so we'll

save that and then let's go and create that edit view so we'll say add honest make view edit or post edit keep doing that okay so now the Edit is gonna be almost identical to the add page so I'm

gonna copy add dot edge and then put that in edit dot edge and then just change this to edit post and change the action now this is this is actually kind of cool how they do it now we want to

make a put request okay an HTTP put request is what you use when you want to update something that's already on the server now you can't make a put request through a form by default we can't say

method put it's either get or post so what a dantas does is it gives us the option to add inside of the action some double curly braces alright and then we can do slash posts slash and

then we want to add on the ID so we can say slash posts let's concatenate post actually I should be able to just do this no I can't do that I can't do the curly braces again so we're gonna have

to just concatenate post dot ID concatenate again and then what we can do to make this a put request is we can put a question mark underscore method equals and then put so instead of making

a post request this will actually make a put request this works very similar to the method override module that we use with express to do this kind of stuff but this is included by default with

Adonis okay the other thing we want to do here is we want for the value we want to just change this to actually I don't think maybe we can just use the old let's see what this does so we'll save

this and let's go back and go to the Edit in Val expression let's see what did I do wrong here I think I need my it's my quote right there alright so it's not showing the field so we're

gonna have to just change the value here to post dot title like that and then this one let's see this is going to be post-doc body there we go alright so now we have our edit page now this is going

to get it's going to be a put request to post slash and then the ID so we're gonna have to go back to our routes and we're gonna add a foot request so we'll say route dot put it's gonna

beat a slash post / : ID and then it's gonna map to post controller dot update so we'll save that let's go to our post controller and create an update now this is gonna take in a bunch of stuff first

of all we need params because we're dealing with a specific post we need request response in session alright so first thing we're going to do let's see we can do the validation so we'll just

copy this I mean there's already stuff in there you don't have to do this but I guess we'll just include it okay and then we're gonna create a Const equals a wait a wait post dot find and we want to

find it by params dot ID okay and then we want to just set the post dot title equal to whatever is in the form so we get that with request dot input title post-op' body equals request dot input

body and then we can do a weight post dot save okay and then we just want to set our flash message so session dot flash pass in here notification and we'll say post updated alright then we

just want to redirect so return response dot redirect and we want to go to slash posts alright so hopefully that works let's save that let's reload this page and let's change it to post and the

number one and submit post updated and there we go it's updated post one if I reload still there awesome so now we want to delete okay so let's go back to the details now in the

details we have our edit button right but we can't just put in a link for a delete we have to make a delete request so we're gonna have to use a form so we're gonna say form action and we're

going to use that same technique that we did with the put request so we're gonna say slash posts slash and then concatenate the ID and then we want to say question mark

underscore method equals delete like that all right but we do want to put method post here pretty sure we need that okay and then all we want is a button actually let's put in our CSR F

field and then we want a button this button is gonna be submit let's give it a couple classes so BTN BTN danger make it red and then we also want to display as a block and we want

to float to the right okay let's save that reload and now we have a delete button so this is gonna make a delete request to post slash and then the ID so let's go to our routes

just like we did with the put I'm actually just gonna copy that and we're gonna say route dot delete same URL you can notice that you can make you can use the same URL you just have to have

different methods all right and then this is gonna go to post controller destroy okay we'll save that let's go to our controller let's create a sync destroy

okay so let's see destroy is gonna take in params session and response alright and then we're gonna just say con sposed Eccles and we need to find it so we need to use a wait post dot find pass in the

ID which comes from params and then we want to just say a wait post dot delete okay we'll set our flash message and redirect I'm just gonna copy these two lines I should have commented this

better maybe I'll do that before I upload it to github but let's say post deleted and we're gonna redirect to posts all right so let's save let's go to post four and click delete and there

we go post deleted and post four is now gone alright guys so that's gonna do it for now at least like I said I my initial plan was to do a crash course this was this is a little more than a

crash course I do plan on adding authentication later on and then continuing the series but you know if you guys want to take this application and continue yourself yeah of course you

can do that I'll put the github link in the description but hopefully you learned something from this this little lecture or this little series and that's it thanks for watching please like if

you liked it please subscribe if you're not and I will see you next time hey guys if you've been watching my videos for a while and you really like what I do when I've helped you out a lot

consider becoming a patron even for one dollar per month it pushes me to keep bringing you guys the best content I possibly can there's reward tiers for discounts for you to me courses personal

support and more so check out the patreon link in the description below for more info

In this video we will add the edit and delete post methods to our application, making it a full CRUD app. This series will continue with authentication in the future

CODE: Github Repo
https://github.com/bradtraversy/adonis40blog

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

VISIT MY WEBSITE:
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia
https://discord.gg/traversymedia