Laravel 9 Ecom- Part 9: Brands - Edit & Update & Confirm Delete w/ pop up using livewire in laravel

hey guys welcome back so guys we are continuing our laravel ecommerce series so guys now in this video we are going to do with the edit and update and then delete the data of your brands so let's now let's get started so guys now what we are going to do we will be copying the same model and making for the edit part okay so when you click on edit that time a pop-up model should come and fill all its data inside the model okay so right now let's get back to our editor yep and this is our list of brand list and here is our model so let's go to that model okay so this is the brand guys let me just done so we are going to copy the same model and paste once again below and now we are going to tell this is brand let me zoom it brand update model okay and change the id of this let's still update brand model all set edit or update brand model here you are going to keep all the same fields with the button and the button name will be update save and now guys when you submit the form you are going to update the brand not store the brand update brand function so yep our model is ready guys and let me save and now let's get back to our table at edit button okay this is our edit button at the href we don't require a href so you can keep make it as button or i'll just add a hashtag and now guys you need to call that model so how will you call we have to use the toggle of data target copy that just add this all done and now you can call your model id so this is my update brand model copy that and paste here so when we click that the model should come now if you refresh so now i'm going to click on edit perfect so update brand model has come now what we have to do guys uh we will be getting the data from this button click so on this edit button only when we click we need the id so wire colon click is equal to double quotes and inside this you are going to tell edit brand okay function open and close curly brace where you will be adding your brand id let's copy the brand id and send inside this as a parents okay so now guys let's copy this brand edit brand function name and go to your live wire so livewire is nothing but the brand index okay let me show you the path we have built in previous video here the brand index now you have to create a function function where the function name edit brand and the type will be integer and the brand underscore id this will be a brand id and we need to remove this now as you are going to search for the brand so let's talk brand is equal to your brand model colon colon find or fail function where you will tell your brand id okay you are getting the brand id and sending that brand of brand name name now where you are going to save on this model form name slug and status okay so you're getting and storing in that so how will you store that we have already defined while storing it let me minimize this okay so this is your name let's tell dollar this of name is equal to brand name paste then slug slug slug then your slug you are storing there and finally the status copy it and paste slug has got that's it guys so now let's get back and you'll be finding your data when we edit it once refresh now i'm going to click on id number two that is samsung part okay so you see perfect so data has come guys and now once we close this model that time your input should be empty so for that guys you can just add a code simple code close model get back just add one function function close model remove these types we don't require anything just you have to sell it's a reset function you have to call that that's it download this off your reset function so same way this is for the close model and for the open model also we'll use it open model okay now you can copy this function name wherever your model is called at the close button you can call that so this is one close button just use wire colon click is equal to your close model and below also is there so you can use the same close model and if you require you can add in the add form also let's paste that all set guys so now let's get back and yep so guys uh let's refresh once again and let's see so yep let's edit okay it's taking time so guys you can add a loader also let's close here go to getbootstrap.com just go to docs and spinner spinners if you go you can see here the spinner code will copy this code first code let's copy this and get back to your model just go to the update model and here i'm going to tell one open a div paste that inside the div and just add a wire colon loading wire coolant loading and here we have to hide this when it's loading the form so you can tell the div open and close the div and now here you tell wire loading dot remove okay so guys when it is loading this it will just hide this form when it's completely loaded then it will show this form okay so now let's check the output let's refresh once and yep let me click on id2 here you see it's loading and it's showing the data so it's instead of that let's tell this loading is not visible so for so what you can do you can just copy this and paste here okay and now refresh edit here you see loading and it loads so if you want to add some classes inside this and tell p hyphen 2 it will just give the padding refresh edit looks cool so guys now let's begin with updating this record so yep let's get back to the form make sure your button is submit and go to the update brand submit it and now let's copy this update brand function name and create a function so you can move below create a function and the function name is update brand and you are going to get all the input fields so you'll get directly via wire colon model by this okay so whatever the name is there we have already defined that in previous video at top names log and status so a same code we are copying and pasting as we have done for the store part so let's copy this all the validations resetting inputs everything that's paste here and now let's edit this so instead of create let's tell update before that you need to find that brand id so how will you get the brand id let's tell bra dollar this of brand underscore id let's copy this and create the variable public variable comma your brand id and this brand id where you will get on the edit function so you are getting this brand id right so that id only we will be storing so yep let's end here download this of brand id is equal to your dollar brand id that you are getting storing here once stored you will call at the update function download this of brand id and you will find that id and let's tell or fail if the id is not found it will show 404 once it's found you are going to update that records as simple guys and then you can tell brand updated successfully then close the model and reset the input so guys so make sure you check that close model code let's go to our index page and here is our event listener close model at here we have to close the model so the model copy and paste the model id is nothing but update brand model copy that and paste that as simple guys now once we done with saving updating it the model closes let's see and now let's try so refresh once guys and then let's begin with updating the record so it's right now samsung let's make it to nokia and okay ia copy and paste let's update see nokia it's updated perfect let me refresh and check code so it works fine so let's check for the check box update here let's see hidden when you edit again it's checked uncheck update good visible so guys we have done with the edit and update and now let's do with the delete part so same concept guys we'll be using the pop-up model itself let's copy this brand update model copy and paste we do not require any input so you can just remove it off add a h4 are you sure you want to delete this data okay yes delete so once you submit you go to delete brand okay so before that you can check with your loader so everything will work fine here and change the title delete brand and then the model id delete brand model so we need to set up on the delete button so you can get back to the delete button here is our delete button we need to set up that id right so this brand model on your bs toggle and target so copy that here copy the model id and paste that as simple and now guys we need to check the livewire click also like on this click i am sending the id to that function so which function that is your delete brand function okay and h let's make it to hash so guys make sure your delete brand function and your form update okay delete brand so it's both are same so make sure you are not keeping the same instead will tell destroy destroy brand as simple delete and destroy cool now that's when we click this we go to the function called delete brand with the id and let's store that id also yep let's move below so here we create a function with the name delete brand and from this only we get our brand id so we are getting this brand id and now we have to store this dollar this of brand id okay brand id is equal to dollar brand id we are storing the brand id and make sure you have called in your public it's already called nice so now guys uh we have got the id and we will get the pop model on the button click all clear so once we get the model we have to delete the data now you can copy this function name and get back to your livewire controller that is component and create one function with the name destroy brand so let's remove this and now the brand model where you are going to find and then delete it as simple so what dollar this off brand id so we can check this find or fail function so once done guys we have to show the message and close the model and reset all the input so let's copy from top and paste here and now guys let's tell the message as deleted successfully dispatch the event that is closing model and reset the input so when we reset the input guys we want this brand id also to be reset it so let's copy this and just go to the reset input function and update the brand id as null so let's go on the top here is our reset input function and paste that is equal to null save it and now guys that's it so let's get back to our destroy brand save and now let's test it yep once refresh click on delete loading are you sure you want to delete this data yes delete so what uh which id we are deleting okay i'm going to delete id number one click yes delete so here you see the data is deleted but model did not close why because we have not checked the dispatch event i mean when we send this close model or destroy we have to tell that please close this model so here is our event listener copy the model id and paste that as simple guys now delete brand model is clear here and you know you again do with deleting the record it will delete that let me just add simple dummy record okay let's save here is a dummy record let's delete yes delete the model closes and the data also is deleted so as we have seen that how to make a complete uh crud in our live wire for the brand okay so guys now let's continue next video about the product add and view things so thank you for watching this video guys please subscribe like and share

Channel: Funda Of Web IT

Views: 10,516

Keywords: fundaofwebit, edit update data using livewire laravel, how to edit update and delete data in laravel livewire, laravel 9 ecommerce brand crud using livewire, laravel 9 ecommerce project, laravel ecommerce project tutorial, ecommerce project in laravel 9, laravel 9 ecom, laravel 9 crud using livewire, livewire laravel 9 tutorial, laravel crud tutorial, laravel 9 crud tutorial, laravel 9 crud application, confirm delete data with bootstrap modal in laravel

Id: X6zTElJJTLI

Length: 17min 57sec (1077 seconds)

Published: Sun Jun 05 2022