Livewire for Laravel

what's up guys Andre here and today I'd like to take a look at live wire live wire is a full stack frame work for laravel that provides an alternate way to write some of your javascript code however you're not actually writing any JavaScript you're essentially writing your JavaScript in PHP magic now you can't replace all your JavaScript with live wire components it's use cases for replacing JavaScript that makes requests to your server so for things that only require Dom manipulation you would still use normal JavaScript so take a look at the marketing page here if you want some more information but we'll go ahead and take a look at two examples just so you see what is going on so the first example is in the documentation it's a basic counter and it shows you how a counter is created in the view which I really have in my project and then it shows you how to do it with live wire so we'll start with that so here I have my laravel app and I have a very basic counter that just counts up and down nothing special just a view component here and just two methods that decrement and increments the count here okay now let's go ahead and see how this was done in live wire so let's go ahead and compose a require it okay what's next so it says to include the JavaScript with this directive so here is the page I have it on and I have a section for the view component which is really there and then I have a section for the live wire component which will add in a second we have to add this directive so we'll put it right above the script okay it's next now we have to create a component so I can use this artisan command so this will generate the two files the counter and the blade file okay now let's add some code Stickle at the counter first so the counter is an app HTTP live wire counter and it's just returning the live wire component which is in resources views live wire color so just like a view component you need a master or a root tag so let's just say hello from live wire for now just to see it working and let's make sure to save this so this might be a bit confusing because we have the normal level view called counter and we have the component so maybe in the name you're laravel view different but we'll just leave it and now to use it we just have to do this so I'll just say live wire counter so that would be in here and that should render out so let's take a look hey there it is so now let's fill in the code to make the counter working and you'll see the magic that's going on so back to our docs let's check out the counter functionality so this would go in your counter the PHP just it's just a class that has a public variable in this case count so similar to mailable in nerville this will be available to your review without explicitly passing it in so as you can see here we're not passing it into the component but it's available in there if you make it public so let's do this so it's open counter I thought I opened it let's add that public field ok let's add these two which is essentially the same thing as in our JavaScript component but now we're in PHP so let's put that right here and I believe that's it let's take a look at the docs yeah that should be it and if I did it correctly did I save it I did refresh I'm sorry I have to add to the template here just back to the docks yeah I forgot this part so we have to add this to our template right here and then this should work so like I said the account is available because we made it public in our class and this is an event which calls the PHP method similar to click in view so if we look at our view component we have click and then we call the method pretty much the same thing here we used wire click and wire click and then all the magic happens and it gets called in our PHP code so now this should work so we have this and there you go our counter is working but now everything is happening happening on the server so I hope you can see how cool this is now that we're in PHP land we can do anything that we can do in PHP so for example if you want to persist this data we totally can and we don't have to write an API for it since we're already in PHP so let's go ahead and purchase this to a database so the idea here is this I'm going to add a field to the user model and each user will have a count here so let me just do PHP artisan make off to make use of that scaffolding and I'm gonna go into the migrations and change that so that would be in database migrations here we go I'm gonna add a count field something to put after password make it an integer and say count let's make it malleable and default to zero and let me be sure my database is working migrate okay cool so let me quickly make a user so if I go to the slash register this should work okay I'm gonna make a user and now I'm gonna put the component we made in here instead so counter so this is a components and I grab this we need this to this only kind of these two and I'm gonna put it in home now play the PHP which is this section this page right here so I'm gonna get rid of this they start in this and we'll put this at the bottom actually I will put this in the main layout so I'll put this in a play on timely layouts app so I'll put it here in the bottom right here before the body and then now this should appear okay so I want each user to be able to have their own account so I'm gonna open this in a database and let me just change the count here for this user to to save that and I want this to be two for this user so how do we get that value in here when we load it so if we go back into our livewire component right here sorry not here in our PHP class this similar to view components has lifecycle hooks and in the lifecycle hook we can in initialize that so we can do mount and there's no params and now we don't have to initialize it here but we can initialize it in here so this count is the logged in users count so auth user account and now they save that refresh is there should be two cool now for increment and decrement we can still update the instance variable but now we just want to make sure that we update database as well so Earth user count equals this count and then off user save and same for decrement so I'm going to copy this based in here and now magically this should work so two three refresh and it stays at three cool and she wants a database there it is and decrement works as well or one database one awesome okay let's make a simple to-do app so we can get familiar with using crud within livewire so I'm gonna make a new life our component so PHP artisan make livewire sorry this is a wrong one at this one HP artist in make livewire let's call it - duze and we'll just put everything in one component that's good to do is blade and see if this is rendering has changed the home blade to this new to do this and it see if this works okay now I'm gonna paste in just a form here for the to do and then we'll fill it in and it's just using bootstrap there's nothing going on here just static HTML let me just indent this and see how it looks okay and I'm inside the check box here so we can check different to dues so all right here so just flex box so can I have another one here for input type equals checkbox will that do anything okay and maybe we want to put it in here okay and maybe give it a margin right of four and we gotta put it on the other ones to actually not just leave it here because we're gonna loop over this later so honestly the other ones so we have our live wire component we just have to set everything else up so I'm gonna make a model for two do's and the relationship between users and to do's is a user has many to do this so we have to set up that relationship as well so let's quickly scaffold everything out make model to do - a will generate everything so let's go ahead and start with the migration I guess so there it is and it's gonna paste in the code here so you have to watch me put in the fields for the to do's so I'm just gonna paste in this and we have an ID we have a user ID which references the ID on users we have a title for the to do and we have a boolean completed for the to do and that's basically it now let's set the relationship so I'm gonna go into my app user and let's do a relationship down here so it's going to be two do's and it's gonna be this has many reduce okay and it's settled up the other way now in way to do model actually I'm gonna paste it in to save some time so there is the belong to the relationship and I also added the fillable fields okay and now if I did that right and opt our sin migrate fresh cool and now let's add some data at least one piece of data let me log out here it's got a register and we'll add a user here and now let me just manually add some tattoos in the database so there's a user and then I add some to do this manually here okay so I added two to dues in the database manually and now let's go back into our code and it's take a look at me to do is class for live we're right here and to pass in the to do is you can do so here just like how you would pass in the late component I'm sorry to do is and it's just off user to do this since we set up that relationship and now if we loop over them so back to our to do is blade we want to loop over this one so I should say for each now we have that to do this variable available has to do now we can just move this in here okay and we just have to replace this with to do title so what to do title and the other two are still in there let's see if this works so there we go we see the ones from the database and these are the ones we hard-coded which we can get rid of okay now let's work on adding to dues so this is currently a form but in my example project I'm not using a form so I'm just gonna remove that for now you can use a form it works for submit as well but like I said the way I have it working I'm not using a forms oh let's remove it and okay okay it looks fine let me just add a margin on this okay so we want to add a click event on the button or we can do it on the Enter key event - on the text box I think I'll do click first and they'll move it to that after and we want to call a method here sorry not in here right here and say it's call it add to do now how do you pass in the actual to-do title so to do that we're gonna use two-way data-binding so if you use you you're very familiar with how that works and in livewire you can do something similar so to grab the value of the text box we can create this binding here and to do that we do wire model and the name of the variable here and now in order to do is here we have to declare that as an instance variable so we can do public title and its make it empty by default and now we can add this to do I had to do method so let's do that put down here they add to do and there's no need a parameter and we can do to do create so we have a user ID and that can be off ID and the title is gonna be the instance variable which will get updated and pass through so I do this title and then complete it by default should say false and let's make sure to import this okay and with any luck but this should work let's take a look it's all gonna be sir freshest false what'd I do wrong here oops forgot this okay fresh and let's try adding one adding add there we go cool yeah if i refresh it stays there and to prove to you it persists there it is in the database cool okay let's make it work with the enter key instead of the button so that's simply enough so I thought to do this and it's changed this or we can get rid of this button entirely let me just comment it out actually so you guys can see it and we can get rid of this value and to add the listener for the Enter key very similar to view so we do wire key down and then the modifiers enter and we can do I had to do now this should work the same way but now we're just pressing the enter key hello enter cool okay now how would we do validation so it's very similar to how you would do it in laravel so we can add something in here that checks the error bag it's gonna paste it in here and it just checks if there's an error for the title an inch displays are here and read if there is an error and to do error validation it's almost the same thing but there's no request coming in here we just call this validate like this validate and then we can just say the title is required or any validation rule you want acquired okay and now that should work so I save that refresh this and if I try to enter something without anything there then we get that this title field is required there's some CSS issues there we just have to not make it flex so we don't need this class and then that should work so one more thing here I forgot to add is after we had to do we want to clear out in the text field so to do that we just have to do this title is empty string just like how we do it in JavaScript so let's test out the validation first cool it's behind them I'll complete and now it should clear after we add this awesome okay now let's work on the leading to do this better our code back to our component here I have a form here as well but again I'm just gonna use the button here okay so let's call a event handler on this for click as well and it's to wire click and it's called a delete to do method and we can also pass in a parameter here and we need the to do ID so we have that in our loop we just pass it in that and that should work now in order to do this let's add a method I called it delete to the right yeah delete to do and we're taking the ID and we just do to do find ID and delete see if this works save refresh and it's clear this one or delete this one in the works cool refresh and cool it does work so if you want to combine this with some minimal JavaScript to add a confirm I found a little cool trick on the issues in the repo so back to our blade here and I'm gonna put this on its own line just so we can see what's going on here and it's a bit of vanilla JavaScript here and listen for the on click event and on click we're going to just use the JavaScript confirmed method and just ask are you sure and we also have to mix this with an or and event dot stop immediate propagation in order for this to work so yeah I saw this in the issues and it's a cool way to combine some vanilla JavaScript with this action below it so this will not proceed this will not proceed unless the user presses okay after press cancel nothing will happen so let's verify that works okay so should be a confirm dialog there it is cancel will not delete it but okay will delete it cool and fresh and it is gone awesome okay now let's work on checking the two and marking that as complete and also adding a line through here so let's start with the CSS we have to add a class that has that through so I'm gonna go to the layout it's right here and I'm gonna add one piece of CSS here right here suppose style tag and we'll do let's call it completed and we'll do text decoration line through okay that's what verify that this does work so it will be on this so be completed see if that one see that like that CSS works okay cool and this would be a conditional so we'll add that in right now so we want that class if to do is completed and completed else nothing okay so that should be nothing right now because they're all false let's see if this works so we'll manually do it right now changes to one save refresh okay so it does work now to get the toggling to work let's make that work so we have to listen for a change event here so wire change say call a method called toggle to do and if the passed in the ID of the to do you want to toggle so to do I D and that should do it now let's add that in order to do this so let's make a method called toggle to do and we're getting the ID and grab the to do to do find ID and then moves up okay and we want to just flip the bit so to do complete it is not to do complete it and it's make sure to say that okay let's see if this works refresh and it mistake sorry forgot the dollar here okay okay so let's try this if I add this seems to have worked whatever refresh it and it's persists double check the database every day it's cool so that works let's try on toggling so it does on toggle but we have to make sure the check state is in the right state as well so we'll add in a second okay so let's work on the check state so that we're late we have to add a checked attribute here if it's completed so let's do to do completed checked and if not nothing okay cool let's see if the check state works no okay that does awesome I checked okay so let's work on editing so the idea here is I want to click on this and I want my prompt to come up and then if they press cancel I want nothing to happen but if they press okay I want the title to update so this is gonna be quite similar to how we did delete and we used a confirm dialog here but instead of the confirm we're gonna use a prompt so let me show you what I mean so here is the link here so I'm gonna just put this online and I'm gonna grab what I have here for delete and more changes so it's not going to confirm anymore we have to use a prompt but I have to use a custom method which I'll define in a second say update to do prompt and this will do the prompt in there just we have to like save the value to a variable and do some checking if they pressed ok or cancel and for here we're gonna pass in the to do title so I will do to do title because we want this to appear when the prompt comes up and the method we want to call on the backend is called update to do and we need to pass in me to do ID and we also need to pass in the thing that the user typed into the prompt which we will save locally in our JavaScript in a variable called to do updated now for this JavaScript I have to define this method and to do that you can just add your own strip section here so I'm just gonna paste it in the script and I'll play before the closing div and there's that function update to do prompt which I called here up here so so what this is doing is depending the default and we have this variable here which only gets populated if they pressed okay so this is just checking don't need this this is checking if they press cancel or if the string is empty and if it is then return false and if it returns false then it won't proceed because of this trick but if it if they did types in the end and we save it to this variable and then we pass it in to the back end here and in the back end we just have to add that update to do method update to do and this takes in the ID and also the title so to do to do find ID and we have to update the title so to do title is the title coming in and then to do save and with any luck if I did this correctly they should update okay slowly miss refresh and have an extra tag here where's that well yeah so this is closed over here but it's not it's online cool save okay so let's try this okay so it doesn't work what's mayor okay so I'm getting some errors with view here so let me just turn off review its we're not using it I just use it at the beginning of this video to show you the view component so I believe in layouts app up here yeah let me just comment this out okay just working okay this is a different error update to do prompt is not defined okay so as you can see I'm getting this error unexpected end of input but for whatever reason if I put the console log back in it seems to work so i refresh it seems to work so it seems to be some sort of parsing issue with the JavaScript and I'm just gonna leave my solution in there for now so there we go it populates this text field with this if I press cancel it will not update but if I do and we'll see that console.log and if I do change if I did this correctly this should update and it didn't update but it updated with the wrong thing okay so I cannot for the life of me figure out why this is not working obviously the title is being passed in as the ID and it was working yesterday and this package is being actively developed and there was a lot of changes pushed this morning at the time of this recording so I suspect there's an issue there just to show you it working or the project I was working on last night here we can update this change okay and there's the change there so yeah that's what's supposed to happen but for some reason it's not working and it's passing in the first parameter thinking it's the ID and that's what's happening so yeah if I find a fix I will note that in the description below so there you have it guys a first look at using live wire with laravel I think it's pretty awesome and I definitely see myself using it in the future please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one Kate thanks bye [Music] you

Channel: Andre Madarang

Views: 48,566

Rating: 4.9223299 out of 5

Keywords: livewire, livewire laravel, laravel livewire, laravel front end, laravel vue, live wire laravel, caleb porzio livewire, github livewire, laravel todo app, laravel counter, andre madarang, drehimself, useful laravel packages, laravel package

Id: fhKcI3HAP98

Length: 35min 2sec (2102 seconds)

Published: Fri Aug 02 2019