[Live-coding] Laravel Livewire: Parent-Child Form Example

hello guys today i want to show you a practical example of laravel livewire and livewire is best known or most widely used for some interactivity in the forms and one of the best examples i came up with for interactivity is the so called master detail form or parent child form where there is a main form and then underneath there are children and you can add more children delete choose something then add another then delete this one and do some interactive stuff and under the hood of that is javascript and there are multiple ways to write that javascript in the older days it was playing javascript then there was jquery then there was vue.js more popular in laravel and now livewire is making it the easiest to implement that for back-end developers so in this video i will show you how to implement this interactivity without writing any javascript line at all no code javascript only livewire in laravel language and i will create the livewire thing from scratch so from installing livewire but before we do coding stuff i want to philosophically explain to you why livewire is useful to compare with the old way of doing such stuff with jquery or vue.js and the idea for this video came from our old project all demo in quick admin panel blog we did try to create master detail form it's working it's actually on github i will link in the show notes and it works in a similar way but the problem is that the code is not really that pretty under the hood if we open that code there is a table of products with ids of product index and jquery code is actually working not with the data of products but with dom elements with lines deleting lines adding lines it's a pretty simple code in javascript and for us back-end developers it's probably more convenient to work with the data so some kind of product array which we just expand or subtract so add new elements and work with the data with variables instead of dom elements and one step towards that direction was vue.js if you write that in vue.js component we have a similar example of shop catalog on vue.js and if we open resources.js components from index in that index there should be some variables so products and categories and they are taken from the back end with some logic and stuff like that so another approach of doing reactivity is having some property some variables in vue.js components and then working with them inside of that vue.js component so that's already a step further towards data-driven approach so work with the data and not just with html and livewire makes it even easier so let's dive into live coding with livewire and the starting point for our application will be this form only backend without any javascript so in the blade we have just for each array of three elements which means that they are static you cannot delete or add another product so those links and that button doesn't do anything yet we are just hard coding three lines with product id and quantity for each of all products comes from the controller we have products in our database i already have seeded those so it's just a simple blade form with for each loop so if we change for example this it will be four products refresh and if i fill that in with fake filler chrome extension i can choose for example another product some quantity for example and i save the order order stored successfully because in the controller everything is prepared so we're creating the order and then there's belongs to many relationship many to many with request order products for those who want to know more about many-to-many relationships i have a separate video and i will link that in the description of this video but in the database by this point we have orders one order and then order product is four lines with many-to-many relationships and now our goal is to make that form let's refresh that that form dynamic so to make the delete work and add another product and let's start with add another product and i want you to understand how livewire works exactly so i will do a weird step now but it will make sense in a minute so instead of that hard coded array i will do order products so this is our goal to work with some kind of array that we will manipulate with and then that array will go to the back end so for each order products as index order product and then nothing changes for now and that order product for now let it come from the controller so order products equals for example array of one element which will be empty for now and we pass that order products and if we refresh our page we should see one element and now let's put it into livewire example all you need to install livewire is go composer require livewire livewire so we go composer require livewire livewire currently it's version 2.2 of livewire okay installed and now in our application we need to add two things in our main blade application layout so extends layouts app and if we open up blade php we need to add two commands in the head live wire styles and if we copy and paste and at the bottom livewire script and that's it livewire is installed and now our goal is to create a live wire component it's kind of a similar thing to vue.js component if you think about it but it will be only backend thing so if we go php artisan make livewire products it will create two files for us so livewire products component backend logic and then blade file it's a pretty similar to vue.js component template and script section just again no javascript and if we open that product blade it is in resources views live wire products blade here inside of that div element we can do whatever so for example for now let's put in hello and the live wire component is in app http live wire products and all it does by default it renders the view products blade and to include that in our create blade we just do at the bottom for example livewire products and we refresh and we see hello so in a very basic sense default larval live wire is include of another blade with some logic but now let's make the magic happen with products array here so we will move our current form the whole form into live wire component blade so cut and then inside of that products blade instead of hello we do paste and now let's take care of the variables and i will show you the magic how livewire works with variables so order products and all products become properties of products component so public products equals array by default and then public all products equals also array in fact i think it should be order products let me check so order products yeah it is order products and now if we refresh our page without any changes we should see the form but without products because this one is empty let's refresh as i told you no products so it's actually executing that for each and order products is available in the blade of live wire we don't have to pass it anywhere property here in the component that properties are available in any view of livewire and then there is a method called mound it's kind of a constructor of livewire component public function mount and here you can assign any starting variables for your properties so this all products equals product all and now we can remove that from the controller so this doesn't matter here anymore and in fact order products is also irrelevant because we will do exactly this thing in the mount and now if we refresh our page we see one product with all the products here and probably we should set that quantity to one by default right so as a proof how livewire works with variables i want to show you one thing so we have that quantity and we can set the value of order product i think it is so this one or their product quantity right and then in our live wire component instead of doing that let's just assign product id equals one and quantity equals one or in fact product id should be empty for now and let's refresh our page and we see quantity one by default because it shows exactly the value of quantity one and now the real magic will happen on products blade let's implement that button of add another product for that we will define wire click and we pass any method name we want to add product and that wire click is a live wire event which is the same as would be javascript event like click on the button javascript or jquery or view so the goal of livewire one of the goals is to expose the same or almost identical javascript events without writing actual javascript and not even just wire click we can use similar syntax to vue.js to prevent the default action so click prevent would prevent any default action of that button which could be form submit and that add product is not a javascript function or method so another proof that you don't have to write any javascript you copy the method name and in your livewire component you do public function add product and the logic won't be add another line to the products table it will be add another item to the products array so we do this order products and add another item so like this actually probably this is the syntax so all we're doing we're adding one element to the array and if we refresh the page now everything is still the same but if we click add another product we see another line again we haven't written any line of javascript but livewire automatically re-renders the whole html for that section using the new values of the variables of the properties here under the hood what's happening in the browser console refresh the page again and if we click add another product as you can see there is an ajax request to the server and the return of that request is html code so the whole section here the whole include here is re-rendered returned from live wire from the server as html and we rendered with new variable values and let's test if nothing broke here so if we fill in that form with form filler again with fake filler chrome extension we submit and we still have successful order if we take a look at the database new order with two products everything is okay everything is saved so livewire didn't break any variables in the blade file here all of those are still set correctly now let's implement the delete of the product so we do wire click prevent remove product that will be our method name but in this case we need a parameter which line which product and this should be a parameter index how do we pass the parameter with blade so we do this and echo it as a blade variable like this and let's implement that in the actual component public remove product index we unset that array element so order products index and then we need to reshuffle the values with array values this order products so it will get re-indexed so if some element is deleted from the array you need to still reshuffle the indexes and let's refresh the page that form let's add another product let's choose this one and let's delete that one the line is deleted let's try again another product another product delete this delete that and deleting is working but you probably noticed that the variables aren't saved because we didn't set up the action back to the component from blade so whenever something is changed here in the blade we need to change the variable back in the component controller so to speak you can call it a controller it's a similar concept and to do that we need to bind the data again similar to vue.js in vue.js it would be v model in livewire it's wire model so instead of that value we're not passing that anymore it will come from the component we do wire model order products and we are binding to the exact element and that element exact element sub element so dot index dot quantity it's immediately a bit advanced live wire example but it's pretty similar to default laravel how laravel deals with arrays and dot notations and error messaging and stuff like that so it should be pretty familiar to you and we do the same wire model to product id on the select here just instead of quantity we do product id and let's refresh the page we add another product we choose some values and we delete that line and as you can see we have a new line here let's add another product for example this one but then we changed our mind and let's delete that one so now all the data manipulation comes back and forth to and from component and let me show you in the component so before rendering which is called every time of re-rendering let's do info this order product in the log in laravel log let's log the latest value of this array and i have emptied my laravel log and if we refresh the page let's open laravel log default value is product id and quantity which comes from the mount here but if we change this look at laravel log again it's re-rendering and saving the data in fact it's the other way around wire model binds the blade variable to the component and then component itself re-renders the html with new data product id same thing new values we add another product again re-rendering we remove the product delete again re-rendering actually i noticed that this didn't refresh oh of course i didn't assign that to anything so this order products equals array values so if we refresh the page now add another product add another product so zero one and two and if we set the values for number two and delete number one we should have zero and one re-indexed great and again final test would it work save order success in the database we have another order and we have two products for that order so that's it for this video i didn't touch anything on the validation of the form so that's for the future videos but i wanted to show you the live coding way of simplicity of livewire to recap i didn't write any line of javascript but made the form dynamic with adding and removing the elements so if you haven't tried livewire did you like it and will you try add your opinion in the comments and let me know what other topics around livewire i should cover on this youtube channel and to support this channel and videos like this one you can do one of two things use our laravel admin panel generator at quickadminpanel.com or enroll in one of my laravel courses at laraveldaily.teachable.com see you guys in other videos

Channel: Laravel Daily

Views: 51,415

Keywords:

Id: iuIEqOcQi6g

Length: 17min 8sec (1028 seconds)

Published: Mon Oct 05 2020