Use same modal for create and update forms | Laravel Livewire 3 from Scratch

welcome to episode 15 of the tutorial series Live Wire 3 from scratch my name is William Juma in this episode we are going to learn about how to use the same component for create and edit we will use the model that we created in the previous episode and modified to be used as the edit form let us go ahead and work on that the first thing that I want us to do is um to be able to display products here so I want us to copy a table from getbootstrap.com now just copy up until here and this table I'm going to paste it on our all products component the one that we did create in our previous episode even though we didn't put anything so much we only had a pattern and imported a live wire components to its I open views and then Live Wire then we will open all products so in between where we have the button and where we are including our Live Wire component the create product component I want us to paste this one here and then of course being a table we will close it with the table body and then we will also close it with a that the closing table tag after that I would like us to just have nem I think it was Tito title and then the other field was description in what you are working on in our previous tutorial then the other input was a price and then of course I want to copy such that we will have one more column so I'm going to copy these and paste here in this one we will just leave it as action it's the column that we'll be having our edit button and inside here I would like to Loop through products I have not been able to create the products in our all products Live Wire class but we can be able to just work on it and then go and do it on the other side so here I can have a for each Loop for each for each in this case products as product like that and then we can have info each here at end for each like that and then here for the sort of like our our ID or the numbering I just want us to use the loop index and then I will do plus one and then we are going to have the title so here we have a product title and then I would like to copy this and paste on the other fields so here we are going to you're going to have sorry it seems I didn't copy it quite right so here we are going to paste it and then paste the same here so one of them will call description description with a small letter not Capital description like that and then this last one you call it price then of course we need one more uh we need one more table data whereby I would like us to have a button here so I'm going to have a button with a class of uh BTN vtn primary we will close the button and then we will have the name of the button I'm going to call it edit like that so this is sort of the addition and I want when this button is clicked something happens but before we do that let us first of all go to our products a Livewire class so you go to live up Live Wire then all products then I would like us to load the products here so we are going to use a product model use app Live Wire product like that and then inside here I can be able to declare public property public products like that and then I also want us to have a mount function so we're going to have public function mounts which we are going to use to load our products so we can just refer to this public property here using this products and we can say it's equal to product so this is our model product or like that I think that is good enough even though of course when I check the models I believe we do not have a model called Product we don't have it so I'm going to clear create the model and also the migrations so let us go ahead and do that I will open another instance in terminal and I'm going to run the command PHP that is an make model and our model is called products then of course I want to type the migrations to create both the migrations and the model and then what I'm going to do is to open our models folder and open product and I just want us to allow Mass assignments so what you are going to do here we are going to have protected fillable and then we can have the array of values so in this case we have title and then we have this reaction and then lastly we have price like that now I would like to go to our database the database folder migrations and inside here I just like to create some some columns here so table string in this one you're going to call it title and then you have description and you have price so this will be description and then we will have price maybe we can have it as integer let me call it price like that basically we have all the fields that we require I'm going to run the command PHP artisan [Music] migrate to be able to migrate our tables I believe everything is fine let me refresh and see if our table will displace properly obviously currently we do not have any records in our database it says apply wire product not found but I hit included the the class I guess it's because I'm using paint sometimes it clears out whatever it is that we have written if we have not been able to use the dependency so let me open all products again and import app or app models products I wrote it but it's supposed to be app models product not apply where so that's okay after that I want to attempt again and now I think everything seems to be fine but of course we have not been able to create any product so that's the reason why it's not being displayed I want us to open the create products class because we created two things and here I would just like to activate product create with the validated and here I would like to import use app models product and once we have it like that remember yesterday in the previous tutorial we were not saving but now right now I have and commented this and now we can be able to save our products so let us attempt and see what happens so now refresh to just capture all the changes and then type in a title product one and then a description description and then a price I'm going to just type in a value and then click save and now it says product created when I refresh we have our product here and now we also have our button when we click it it I want it to still just open for us the same model so what I'm going to do I'm going to open our Live Wire view class and then I'll just copy the class that we have on our create so the type button BTN BTN primary data toggle all those things up until the end here because it's the same thing because we have that which we can be able to use to trigger our button and I would like to replace all these that I'm having here with that and then save so now if we are to refresh if we are to refresh and also click the edit button still it will give us the same model so the same model is given to us when we create click create and then also when we click edit that is good enough I want us to go ahead and do something and I would like to go to the create product Live Wire class and above here I would like to declare another property on top of whatever it is that we had in our previous tutorial I want us to have public and what I want us to have here we can call it a form title that's the first thing I want us to have from Tito like that and by default we will be working with the create product so create product like that and then of course close it with semicolon so when I go back here I want to change this Title Here such that it will not be giving us model title it will be giving us create products so let me do that so we can open the all products dot plate not all products we have to open create product the other Live Wire view that we created so create product because it's the one that has the phone and inside here what I would like to do is to now pass in our title here so what we can be able to do is just pass receive that prop here I think we have called it from Tito like that so now if we are able to refresh we can be able to see our title is called create product and even when we click edit it is still create product we will be able to handle that in due time so now I want us to continue and do a few things here I want to before we we we continue I want us to also declare inside create product I want us to declare another property so public and this property here is the one that you tell us whether we are editing the form or whether we are creating so I will have the property called edit form edit form like that we can set it to false so at the initial creation of this form in this case we want edit form to be false now I want us to go to create products.blade.php we want when we have edit form we display some different inputs below here and when we have we when we have edit form being active we also declare different things here so what I'm going to do here I'm going to have these two buttons rendered conditionally so for the first we can say if so this is for the instance where we are editing so if edit form we can say at if because it's we are in Blade we will use the blade directive at if and then we can pass in our property edit form and this we're just checking if it is set to true and then I also want us to have at else and then what else yes it's here and then I will also have the end of uh yes at end if I think that one is okay so we have if else and if so if we have edit form in this case edit form is true then it means we are editing our form therefore I want to copy the two buttons that we are having here both of them we will be able to display them here and now we will not call it save changes we are going to call it um updates let me call it update like that so the first button will be called update and when we click it I want us to have it hitting the method update so that is when we are saving the the information and then of course this other one so if the edit form is false then in this case whatever it is that we are doing we are actually creating a new form so basically I mean creating a new product so we can be able to have those ones inside here now I would like to refresh such that we check the changes so now when I click this one you can see it's saying save changes here but obviously even this one you do the same save changes but I would want to curiously be able to just go to our class and change this to true and see what happens so when we refresh now because edit is on now we are having updates but it doesn't matter even if you click here it will still be the same thing but I want us to be able to handle that one in a better way so let us set it to false and again and then now I want when we click uh the edit button I want us to be able to trigger another function here which I'm going to call edit so let me create it entirely below here so public function public function edits like that and when edit is triggered I want the first thing that we do is to set the property so these uh this property that we have in here that we are calling edit form so this edit form we will now set it to true so if we are by any chance able to trigger this method here what I would like us to do I would like us to trigger this because actually our table is uh inside a different um is inside a different component when you see clearly what we have our table is actually in a component called all products so if we are to click on the button this button here the edit method will be checked it you it you it you go to this all products uh Live Wire class and try to check for the edit method so it's not the best way to put a click Handler here but what I would like us to do is to be able to uh sort of like respond to an event so what I'm going to do is I'm going to create an event here which then we can be able to listen on our edit method so basically that is what I would like us to do so we will have a click Handler here so I'm just going to have a click and this is where we are having the edit button so edit so at click I want us to dispatch an event so in this case we will use dollar sign dispatch dollar sign dispatch then we will Open brackets and then the name of our event let me call it edit hyphen mode and then after that I would also want us to pass the ID of the product because if we are clicking to edit we need to pass the ID size that we can be able to get that specific product and then do the manipulation so what I will do I will have a comma here and then we will be able to now have ID and then now pass in our ID so basically the curly the double Kali braces and here are you pass in product ID like that I will save this maybe I can extend it such that you can be able to clearly see what I have typed in there so this is what we have and then now once we have this um event dispatched we can be able to listen to it inside our class so in this case we will listen to it inside create product and remember this event is dispatched everywhere we are not dispatching it to a specific um a specific component so it's dispatched to all components they can be able to listen so for us to be able to listen to it we can just have the attributes and we can say on and inside here we can be able to pass in the name of our event and we call it edit hyphen mode but since we are using the attributes I also must import the attribute here so in this case we will also on top of the rule attribute I also want us to import another attribute called on like that because as you can see we are accessing it by saying on edit mode like that and then what I would like to do is to pass in the ID because you are listening to it on this method and I would like to just do the ID like that so I want to see if there is an ID that is reaching this method so let us attempt and see I'm going to refresh and then when I click edit now you can see there is something that is being triggered here as much as the model is being displayed also there is an event that is being triggered I can even refresh and try again you can see again we have something that is being returned so that is fundamentally very important and now I can be able to change several things because we have said now edit form is true in fact if we are to check our form now it is now not appearing with the save changes let me just click here and you see now it is it is uh displaying but now it's still having safe changes yes because we are stopping this before it reaches setting of The edit form to be true that notwithstanding let us continue I also want to set the form title to something else so we are going to do two things I'm also going to do this uh form title we are going to set this to edit product like that and I want us to try it out and see what happens so we will refresh and I want us to click on edit and now you see edit product only here we are not having changes I do not know why because it seems there is a problem edit from Eddie form yes there is a typo here it's supposed to be edit from not ediform so let us check again I refresh now when I click on edit now you can see it says update and then when I close it and refresh and then when I click on create it is saying what save changes something of that sort I think we are moving on well now the next thing I want to do is to have a public product a variable I mean a property here so again I want to create one more so here we are going to have public products products like that and then now we [Music] I want us to then find a product and certainty and then be able to access its value so what I'm going to do inside our edit method I'm going to say this product will be given by products and then this I'm actually using eloquent to find a product so in this case we can say find find or fail and then in this case we can be able to pass in this ID because we tested it and we saw that it's being returned so once we do that then we can be able to set the other properties so in this case we have other properties here like um the ones that we had in our previous title description and price so those ones I want to set to set them after we have been able to find them so in this case we can say this Tita will be given by products so we are referring to this product so in this case I can say this product and then tighter I like that and then of course we can be able to copy this down several times so then this description will be given by product description like that and then this price will be given by product price like that so now I want us to check and see what happens so I'm going to refresh and then I will click create of course it's like that then I want to click edit now you can see it's returning product one the description and the price so basically it's possible for us to be able to update and save this new product there is something though that we didn't do in our previous tutorial we worked on this close such that when we click on it then everything is reset but on a on on this button here we did not handle that that is what I want us to just handle now so let me open um the create product class and then modify that so we have create product I we said wire click close so this one I will copy it and I also want to paste it somewhere where we have the button for closing above here because we have it somewhere we have the description and the form level everything is there is somewhere inside our yes here where we are having dismiss so here I also need to have it here such that we will also be able to reset now in our reset method inside create product class we were resetting several things or we are resetting everything I think that one is okay we can reset everything or maybe we can specify the title every other thing like that but basically I think that one is just fine so now if we attempt to create we will be using the create method if we attempt to update here where we say update we will get an error because we do not have the update method so that is what I would like us to go ahead and end and modify in half so here what we are going to have we are going to have public function public function update and then inside here we can be able to Now update our product so the first thing that we can do we can do validation so I can say validated is given by this validate remember we are using the same validation logic that we had for creating the products so we will be using the Sim and I want to just get up the product and maybe let me save it in um in this variable that we are calling pay so p is um we are going to find our products so in this case you can say product we're just using eloquent products find or fail and in this case we can be able to pass the product ID so in this case I can just say this product ID like that and then after that we can be able to say p update and we can be able to just pass in the validated like that so the fields that have been validated we can pass them there and then I can be able to still have a session message so session Flash and inside here we can have a status and we can say that the product updated success fully like that and now once we have that if I'm able to refresh and we click on edit and we have it like that without changing anything we say update now it says product updated successfully if I type in here my uh some description I have typo and I click update so even then still our product is updated if I refresh now you can see it has been captured inside our database so basically we can be able to do it like that and we can be able to achieve both create and update so here I can be able to type in a new title product 2 in the description we can just say the ESC and price we can put nine and we can save save changes so if even for this product created and then we can be able to just refresh and display it this is the end of the tutorial episode please subscribe to my channel and hit the notification Bell by doing this you will be notified when I upload another awesome video if you like the video you can give it a thumbs up and share you're welcome to engage in the comment section thank you

Channel: LaraPhant

Views: 3,690

Keywords: livewire components, livewire 3, laravel, livewire forms, validation, livewire 3 validation, form objects livewire 3, file upload, file download, navigation livewire 3, lazy loading, pagination, modal, same form for create and update

Id: Wwi_t4pAikY

Length: 34min 50sec (2090 seconds)

Published: Sun Sep 17 2023