5 Livewire v4 Practical Examples in 16 Minutes

Hello guys, in this video I will show you five practical LiveWire version 4 examples from our upgraded practical examples of LiveWire which was previously known as LiveWire Kit separate website with LiveWire V3 and V2 components which were recently merged into Laravel Daily Membership. So members can access to project examples repositories and one of those repositories is this 43 in one repository and even that 43 contains three options of components in each folder. So you can see the titles of components and here are a few screenshots from a few components and some of them I will show in this video. So this is the repository private repository which you can get access to if you're a Laravel Daily Premium member and I've chosen five examples to show you. First three level parent child dropdown with this example of three dropdowns depending on each other. Also we'll take a look at this one multi-step form. So what if you want to divide the form into tabs or steps or in this case it's just a set of buttons with some calculation in the end. The next example I've chosen is invoice form. A more complex example with a lot of dynamic things like drop down here, quantity here and calculations here. And I will show you the code of all of them in this video later. Also, I've chosen price calculator to choose products here and then have also live recalculations on the right side. And finally, I'll show you draft autosave for blogs or just post writings. So, you start writing title and post text and every 10 seconds it is saved in the database. And for each of those components, we have single file, multifile approach, and classbased approach. all available in LiveWire 4. So now let's dive into the code of those examples. So the first example is threelevel dependent dropdown. So for example, if you want to enter a company and you want to choose United States for example and then United States have well states then you choose the state and then you choose the city and then it saves the company all without page refresh with livewire and this is the code. So all examples come with three routes or three options of components as in LiveWire 4 single files multifiles and good old class-based companies approach. So if we take a look at that class it will be familiar if you worked with LiveWire 2 or three similar properties validation mounting the first data and then computed properties which are loaded on the fly and then updated methods. So updated this if we update the country then we select the state and provide that selected state is null. If we update the state then if the state is not empty we go for cities and choose the first by default and then we store the company with the data and then reset the data except those two variables. In the blade part of the component, we have form wire submit to store the company and the form contains input wire model name and then three more wid models with wire model life in this case selected country. Then we have selected state wire model live and also wire model selected city which doesn't require live anymore because it doesn't refresh any other dropdown or input. And then down below there's a submit button with wire loading attribute disabled while saving the data. And basically that's it. And then companies list that comes dynamically from the server. So yeah this is good old classbased approach as in LiveWire 3 and earlier. Now let's take a look at single file component which looks like this. Basically all that class is coming as a header of that blade file just new class anonymous class and then the logic is pretty much the same almost copy paste and also the same blade that you saw earlier almost identical or in fact maybe even exactly identical. So if your component is shorter or if you're fine with scrolling up and down if needed then you may use the default single file components with that flash lightning emoji in the beginning in LiveWire 4. And now if we go to multifile companies let's take a look at the folder structure. We have multifile companies blade and then PHP file inside of the folder again with flash lightning multifile companies. So basically multifile component approach is one folder with multiple files. In this case PHP is also anonymous class and the file name should be the same as the folder name just without the flash emoji. And then yeah inside it's all the same thing just in blade inside of that folder. The next example is multi-step form. So for example, if you want to divide the form into steps and those steps number two and three are disabled by default until the first step is filled. In fact, if you refresh, this should be not selected yet. So you choose United States and then city where you're moving to, for example, United Kingdom and then London. And then you provide some numbers for adults and children. And then there's some formula at the end with some price. This is kind of a almost fake example but you get the idea of multi-step form and then you can go between the steps as you already have filled all the form. So let's take a look at the code. So here's the routes web and for all components as I mentioned there are three routes for three types of components but from this example and others I will show just single file approach as it is default in LiveWire 4. So I guess live war 3 version would be familiar to most of you and maybe you will find some new things in the single file approach with emoji. So yeah we have anonymous class again with a lot of properties of the variables and then we have the rules of validation and then in the mount we load the countries and the cities and we have computed properties again with similar logic like in the first example of depending drop-down. Then we have a function change step. Then we have the function updating price to make sure it's integer. And then next step is causing validation using those step rules. And then we calculate max step which defines where we can go and navigate. And then the HTML part, the blade part with three buttons. These are buttons on top with wire click prevent calling the function change step with a parameter that you saw above. Also we have border or not border. So basically playing with tailoring classes based on the current step variable and then if current step is this then we have select with wire model live again and also if for current step two and current step three. So basically else nothing really too fancy but this is an example of very simple multi-step form in LiveWire. The next example number three is more complex. So we will create invoice with products and autoc calculate the total price. So for example if we enter name and email and then we can add a product. We choose the product from the list and then the quantity is two for example. We save and then these are calculated below. Also taxes are automatically recalculating the grand total. Then we can save the invoice and it appears on the list kind of the table and we can also edit that invoice later for example improve something here increase the quantity and then we save the invoice and then it is refreshed again routes web and again three versions of component types but in this case we use route livewire for full page components and these are livewire pages so single index single create and single edit in the pages just name space. So let's take a look at single create and here interestingly we have empty class and then we have header of the page and then inside we have the actual component which is reused single invoice form is reused in both create and edit blade down below here with optional parameter of invoice and inside of that single invoice form. This is where the logic happens. And here we have the usual the component with properties and validations and mounting the data. And then computed properties for products for subtotal and for total. And then we're playing with invoice products array all the time with filling in with product and quantity and price for specific product. Also we have is saved parameter for each product to update the data. Also when we remove the product we unset that from array and then we finally save the invoice to the database. So that's the PHP part 136 lines of code and then we have blade part for the main invoice data we have wire model of customer name and customer email here wire model and then down below we have invoice items with for each of products to choose the details for each product. So for example, we have select wire model live again for product ID and then when we set product ID then it recalculates other parts of the form. Then we have wire model array and then index that we're playing with quantity and also the buttons of save product and remove product. Wire click calls the methods that you already saw above and then we can add more products and at the end we have calculations of subtotal and then input another input with wire model live taxes which then calls the total recalculation of this final number. So yeah for such long components I probably would not choose the single file approach. I prefer to shift between the files instead of scrolling up and down with the logic and the presentation parts, but it's again your personal preference. Livewire 4 supports three types of components as I showed in the first example. The next example is a typical shopping cart in e-commerce project. So for example, you have a catalog or a list. Then you click add to cart. Then you change the quantity here and then you choose the country of shipping. Then it recalculates the total cost by country and you also may choose the shipping which can just show the price for shipping or you may want to recalculate total cost as well which we did not in this example. So let's take a look at the code. So again we start with routes web with route livewire full page component with single products and here we have as you can see livewire attributes on which is the event that will be called on increasing the quantity it would add to cart which saves the data in the database creating the cart or incrementing the quantity and also another event dispatch to update the cart and then we have other single card products component. So here we have the list of products and then on the right we have the cart. So actually it is three components in one main full page component. So if we take a look at single card products the products list. So also same things like update selected country then we update the taxes all the properties are computed which means that with wire model live they would refresh. Then we have card items from database mapped with collection. And we have dispatching the event of increase quantity. You saw that already. Dispatching the event of update card. So this is how livewire components communicate with each other. If for example each component is on its own place on the web page. So this component may call the event that would be listened to in that component on the right. And also this small component is interesting. If we take a look at single cart, it's a very small component with just on update card refresh. And since card amount is a computed property, it would refresh the count in the card from the database each time when update card from everywhere is dispatched. And this card amount then is shown here in the top right corner. And then we also have the main table which is in the main single page component. And then we also have the table of products kind of like catalog which is a for each in the same single file main component. So for each of the products and then if you choose something it's calling add to cart method which if we scroll up as you saw it performs the cart update operation and then dispatches the event which refreshes this part because it listens to that event. And the final example number five that I wanted to show you is about autosaving the draft of the blog post. So you start typing. You start typing post text and then at some point it will get saved in the database without you doing anything manually. As you can see we have saved at and it happens every some seconds that you may want to configure. So that post is already saved in the database as you can see just without published at. And then if we change something here, add something here. At some point it will get refreshed. We refresh that. And yeah, as you can see updated at is changed and post text contains our new changes. Let's take a look at the code. As usual, routes with three types of components and we are interested in this single create. We have saved post object by default empty for now. Then we have title and post text and published with validation. And then we have the function draft which basically well saves the draft. If it's a post ID zero which is by default then we create the post and create the revision. So in addition to just saving the post in the database we have post revisions database table and this will actually get triggered only if there are real changes and also there's publish method to actually submit the form and save post changes which is for update also have private function or two private functions which are called only inside of other public functions or in fact save post changes is also a private function. This is not strictly necessary but for theory of object-oriented programming it's kind of a good habit. And here we have new live wire for function called island which means it will be refreshed separately with wire pole inside of that island draft. So this function will get called every 10 seconds by default. And if we scroll up this one is called every 10 seconds. So this is the actual magic of saving postdraft every 10 seconds or whatever you configure as that parameter and then all the other form is basically simple wire submit wire model title wire model post text and wire model publish. So nothing really fancy in the form itself. And in that save draft top right corner this is where the actual magic happens. As you saw, every 10 seconds it is saved and then shows the new timestamp. So yeah, this is a good example of LiveWire 4 island function. So yeah, this was the demonstration of five randomly picked examples from that repository of 43 Livewire 4 examples. Again, here's the list and again you can get the access if you are a premium member of Laravel Daily website. By doing that, you're supporting my job with this YouTube channel and more courses and content in the future. So, I really appreciate your support. I want to continue this job for basically as long as I can. So yeah, that's it for this time and see you guys in other