Laravel 9 Livewire Bootstrap Modal CRUD 3: How to edit & update data using POP UP modal in Livewire

hey guys welcome back so guys in this video we are continuing our laravel live product application with bootstrap model so now guys in this video we are going to learn about how to edit and update the data using livewire okay so once we click on this edit a pop-up model should come something like this and with the data and then we will be updating the record okay so guys now let's get started to build this so yep let's move to our form here liver component bleed form so we are on the model livewire and here is our render function and this is our perfect so we have created a separate file to keep our bootstrap model that is student model let's go to that model and let me copy the same file i mean code copy it and let's paste below so let me out and here this will be the update student model and let's change this id name to update student model perfect so we are going to change this model and here you tell edit student all done and this form name we are going to tell update student okay all done and now all the input fields are going to be same with the email course and the button name will changes to update once we submit the data it goes to this so before updating your data what we have to do we have to pop up this model right i mean when you click this button edit button it should pop up the model first then we are going to update it so let's go at this edit button and begin with the process so guys for that let's go to our for each loop at the table and here is our edit button so you can make this as a button type button we don't require uh a tag so let's make it button itself and here we will be adding a wire colon click okay is equal to where you are going to tell edit student function and inside this function you will be pasting your student id so let's send that student id perfect so here you find the student id so now guys let's copy this function name and go to the wire click so wire click means it goes to your student component of livewire so nowadays you can create a function with the name edit student and inside this you are going to get the id so what is that id it's student underscore id and it's type of integer okay and here when you come let's find the students not student is a single record so let's keep a student and here is student model colon colon find function so where you are going to send the student id from this top you are sending the id and from this you will take the student id data okay you have to check it is correct or not okay so and it doesn't found so you can just check it in if condition either you redirect or just add a 404 or okay so yep if it is success means you are going to send this in a like um dollar this of student underscore id okay so we need to create a variable with dollar this so dollar this is i have to just add after this okay dollar student id so student id is added and now missing with the semicolon let's add the semicolon done and if you just want to so how to redirect yourself over when id is not found you can just go back to your pagination i mean livewire and you find that redirecting over here okay so return and redirect to add this just redirect back to students so now guys uh when you click that i mean when you click this edit button you need to pop up the model so for that case guys uh we can directly use in the button itself so let me just tell you over here let's add a data let's copy from the top copy and paste so here is my update student model so copy and search for in your model here you find update student model id copy this update student model id and paste that over here all set so guys back to your edit function so once you find this data right so you are going to call all the input fields so what input fields is nothing but name email course okay so name which from the student name you will get that and then email and from your backend database email and then coming to your course and here you get your course in the input fields so you are saving all the data in your all the input fields save and now guys you can just get back and let's test refresh so let's click on id number five edit perfect so the data has come guys now let's close and let's go to pagination two and let's check with the with broadcast details so when you click on this here you get the data okay so before this when we close this we need to set this to null okay so what we have to do guys for that let's create one public function where we will tell close model so when we close the model we just reset all the input fields that's it so you can use this wherever we are using our close button i mean to settle this one okay so add this into our close button if we are using any model we can just paste that so this is my close button and here i place with wire coolant click is equal to the space states yep and here is my model close model and coming to your model case also close that done yep and now let's refresh and check once again guys so okay so data has come let's close this and now if you edit here it's empty perfect so yep guys and now let's try to update this record okay so i'm going to update with id number five which is hemanth let's edit so here we get data and once we click on update what happens let's check that in the code so let's copy this update function on fob submit and go back to your component let's search for the update student okay we don't have so guys let's uh create the function and create a update student function name let's leave it empty and here we are going to update the student so let's create our student so let's use a where condition over here and with the update function okay so once you use the where condition of id and here you send your dollar this of the student id so where is the student id let's copy it need to copy at the update function student id and then you are going to update the records so what records it's a name and that comes from your dollar this of name when you edit you are storing the data into this dollar this of name right so that data only we will get and update it so we cannot directly update that but we need to validate it so before that you just need to take the validated data let's get the validated data and from this validated data you are going to update the records so for the validated data you are going to call in this method okay and coming to email and this is your column field email and next is your course so course set that's it so now guys you can once it's updated you let's show the message and reset all the input fields and close the model save here so let me update the status as updated successfully and reset the input and close the model guys so make sure you are when you're closing the update model okay let's get back to our model and this is our model id and from where this model is called okay it's called from the student index okay so this is our student at this bottom only we have to call it okay so let's copy this and on the event listener we are going to hide this model okay when close model comes we have to hide the update student model also done and where is our student component all set guys and now let's try to update the data here we come once refresh guys before making any changes let's update and instead of payment let me add to kumar here we update the name mohan gmail.com and let's update the data so it's totally different data guys here you see student updated successfully and you see the record has been updated okay so all the data is changed so guys so we have successfully done with our edit and update the data in laravel livewire cloud application using bootstrap model so now guys in this video that's it and let's continue next video about how to delete this data using confirm model and directly also okay so guys in this video that's it thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 14,480

Keywords: fundaofwebit, how to edit update data in livewire using pop up modal, edit data usong bootstrap modal in livewire laravel, laravel livewire edit update data in modal, edit and update data in laravel livewire using pop up box, bootstrap modal edit and update using livewire laravel, bootstrap modal edit and update using modal in livewire laravel, livewire crud tutorial, livewire crud operation in laravel, laravel livewire crud tutorial, laravel 9 livewire modal crud, livewire edit data

Id: KTzFciK23vo

Length: 11min 56sec (716 seconds)

Published: Sun Apr 03 2022