Laravel Livewire v3 Full Tutorial 2024

Hello friends Tony here with this video I'm going to start a new series about Livewire version 3 and Livewire now is hosted in l.com website so here I am inside the live wire. l.com and in the documentation we can see the most productive way to build your next web app powerful Dynamic frontend device without leaving the PHP so you don't need to have a knowledge about JavaScript or anything else if you have knowledge about PHP and you learn Live Wire you can build Dynamic front and uis okay if I scroll down also we can see from the Taylor o creator of laravel who has said the Live Wire takes blade to the next level it's uh basically what blade should be by default and also uh Livewire has everything so live wire's mission is to build on the pH cency and joy of building web apps with laravel and push them to the mark now uh Live Wire is a laravel package so you will need to have a laravel application up and running before you can install and use Livewire also if you start a new laravel application you can install it with the laravel out packages which are jet stream and Breeze both of them has uh Live Wire stock so you can choose Live Wire and you are ready to go now live wire works by using a technique called serverid rendering this mean that the HTML of your component is generated on the server and then sent to the browser when a user interacts with the liveo component the browser sent an ax request to the server with the updated data the server then reenders the component and responds with the new HML renders not all the component renders only that the HTML is changed so Live Wire then intelligently mutates the Dome according to the things that changed okay uh this approach has a number of advantages so faster development Livewire allow you to build Dynamic interfaces without having to write any JavaScript code so this can save you a lot of time and effort a more efficient code Livewire components are very efficient and because they only update the parts of the Dome that have changed this can lead to significant performance improvements also is a sell friendly Livewire components are rear Ender on the server so they are sell friendly and is easy to learn so Livewire is very easy to learn especially if you already are familiar with lar and that's it friends for this intro about live War course now if you like such a videos and if you like to learn liveo larav filament and so on don't forget to subscribe to my channel like the video and share with your friends all the best and see you in the next one thank you very much friends Hello friends Tony here in this video I'm going to talk about the installation and I am inside the Library documentation website I choose installation section and here we see a Livewire is a d package so you will need to have a d application app and running before you can install and use Live Wire okay but as I told you in the previous video when you create a larel project and you want to have authentication system so we choose to have either Breeze package or jet stream package both of them coming with a live wire stocks so when you choose Breeze for example you can choose Live Wire stock and when you choose chest stream you can choose Live Wire stock and then you have automatically the live wire in your project now I have created two projects one with the breeze with blade stock and one with Live Wire stock so and I have named a breeze blade and Breeze Live Wire and I have two I have chos here to have a breeze starter kit because I want to test the live wire and I want to have some links here okay now the breeze blade I have opened with the vs code and here is the B Breeze blade and if I go now in the composer Json file we can see here in the require we don't have the live wire but if I open the phsp storm when I have the breeze Live Wire and open the composer Json we can see we have here in the require we have the Live Wire version three we have also the Live Wire vault which is a Livewire package and with a Livewire vault is created the authentication system okay now let's go and install the Livewire in the blade version so I'm going to copy this command so to install Live Wire open your terminal and navigate your L application directory and then run the following command Okay so let's copy this and that's it really so we just need to run this command and we are ready to go so let's open the vs code here in the breeze blade open the terminal and I'm going to paste that command hit enter let's close now and let's open the composer Json again and we can see we have a live wire version three here good let's close and now what I want to do is let's open the PHP store and here I'm going to open the resources views welcome blade and here we have this if the route has login is going to add the live wire welcome navigation it's going to add this component and if I open the Live Wire we have welcome directory here and we have the navigation blade so if I click here we have the links so Anor tag with the sh with some classes but what I want to show you if I go at the end we have also this wire colum navigate attribute in all the links here what this does so if I open now the projects both of them Breeze blade test and if I click the login as you can see we have this reloading because this is a blade stock but if I choose in the breeze Live Wire to go to login as we can see it's immediately navigate so it's kind of a single page application and this wire navigate doing that but if I copy this wire navigate and paste in our Breeze blade what you think is going to happen so let's see let's open the vs code and here inside the resources views I'm going to open the welcome and here we see if the route has login and here we use the out so if the user is authenticated it's going to show just the dashboard link otherwise the login and register but in here we don't have that uh wire navigate so let's add in here the wire navigate and also I'm going to add in the register link okay so now we added the wire navigating the login and register save that and now if I come here and refresh let's say login but again we have a also register we have a reloading so it's not working and that's it because if I go now to live wire and let's scroll down when you see a manual including live wires front end assets by default Live Wire injects the JavaScript and CSS assets it needs into each page that includes liveware component okay so in each page that includes Livewire component but in our project in the welcome we don't have a live wire component so for that it's not uh working this wire navigate so we need to have a live wire component or we can add them manually so if you want more control over this Behavior you can manually include that assets on page using the following blade directives and if we choose that we can copy this and also in the welcome blade and inside the head I'm going to add after the Styles the Live Wire Styles and also the Live Wire scripts so copy that and let's scroll down at the end I'm going to add the Live Wire Scripts if I save this and go back to homepage refresh just in case now if I click login yeah we have immediately navigate login page so now the wire navigate is working and also the register the same thing so we have Livewire in our project and we don't have a Livewire component but if we don't want add them so liveware scripts and also the liveware Styles so remove them and we don't add it manually what we can do is to create a liveo component and paste that liveo component in the welcome blade and it's going to work and that's we're going to do in the next video that's it all about this video now if you like such a videos don't forget to subscribe to my channel like the video share with your friends and see you in the next one all the best and thank you very much friends Hello friends Tony here in the previous video I added in this uh login and register Link in the blade Breeze blade so if I open the project this wire navigate and I also added in the blade the Live Wire Styles and Live Wire scripts to work this wire navigate but I removed them and right now it's not working so if I click here we have a reloading here and I said you I now we need to have the Livewire component inside this uh wel com blate to work with this wire navigate without uh passing the Live Wire Styles and Livewire scripts manually here in the welcome okay and that's what I'm going to do in this video so I'm going to talk about the components and if you go to Livewire Essentials here we have a component section components are the building blocks of your Livewire application and they combine State and behavior to create reable pieces of UI for your front end now creating components a Livewire component is simply a PHP class that extends Livewire component and you can create component files by hand or using the following Artisan command so PHP artisan make colon Live Wire and and the name of the component so let's open the vs code and I'm going to open the terminal here I have run the npm dev so I'm going to open a new one here and let's say PHP artisan make colum Live Wire and then the name of the component so we can say for example I'm going to say a navigation or you can use a kebab case name so instead of something like this if you prefer you can say out Dash navigation hit enter and congratulations you created your first Livewire component let's clean this and let's close now after running this command the Livewire will create two new files in your application the first will be the component class file which is inside the app directory and here we have the Live Wire directory in here we have now the out navigation class file for our component in the version two the Live Wire directory was inside the sttp but right in version three we have inside the app okay and the second will be the component blade view which is inside the views Live Wire and here we have the out navigation inside the class component file we have this public function render which return the view the same thing we have also in the laravel controller so returning the view and passing here the path of the blade file in this case live. out- navigation and I see I have make typo here but anyway now if you don't like that because I preferred another way so instead of out Dash navigation for example you may use a namespace syntax so let's clean this you may use a namespace syntax or dot notation to create your components in subdirectory so what I mean is instead of out navigation like this I want this uh component to be inside the out directory and the name of the component to be navigation so for that I'm going to use the do notation out do navigation like this or you if you want you can use the namespace syntax so back slash back slash like this but I prefer the dot notation out do navigation now hit enter and here we have the class file is going to be inside the app Live Wire out directory and the navigation is going to be the name of the file the blade is going to be inside the Live Wire out directory also with the navigation blade name okay so here now inside the Live Wire we have the out directory and here is the navigation blade which have this public function render and return the view now here we pass the component path so live wire. out. navigation okay and inside the views Live Wire we have out here our directory and the navigation blade now to render the component if I open the Breeze Live Wire we saw in the previous video here is how we can render the Live Wire component so using this Live Wire colum and passing the path so using the dot notation the same when we created so I'm going to copy this here and open the vs code in the welcome now here instead of the HTML I'm going to close this and replace with this one so if the route has login say Live Wire now instead of Welcome navigation I'm going to use the out navigation okay so the component we created not welcome but just change this to be out and we are okay now if I open here the project and refresh we have unable to find component out. navigation and that's it because I have made the typo here so let's delete delete one more time this and open the terminal and create new one but to say out do navigation like this hit enter and now we are okay and if I open the browser yeah we don't have the error but we don't see anything here okay let's go in in this Live Wire out navigation blade and here I'm going to replace this with the text just to say H1 and I'm going to say welcome for example save this we don't see here this one but yeah as you can see here is the welcome okay now what I'm going to do I'm going to copy this navigation HTML we have in the breeze Live Wire so copy that and replace what we have in the navigation blade in our Breeze plade with this one so I just paste the links instead of creating manually and now if we see if I refresh here we have the login and register and if I click the login now as you can see now immediately we go to login and we don't have that uh reloading the same for register so let's go back and let's refresh okay now if I open open the vs code again and let's navigate in this class so in the live out navigation here we have the render but we can because we have the same uh name as the class here we can remove this and if I save that we don't have nothing but if I come here and refresh as you can see we have the login and register here Livewire will use its own underline render method which returns a view with the conventional name corresponding to your component okay so because we have the navigation class and the name of the blade also is navigation is going to work otherwise if you have a different uh file to return here you can leave this render method and I leave all the way so now Livewire components have properties that store data and can be easily accessed within the components class and blade view so to add a property to live component we need to declare a public property in your component class so here in the class so let's say for example here public and let's say uh just dollar sign name which going to be equal with and I'm going to say C with Tony like this now if I save and let's open the navigation blade so in the live wi we have a and navigation blade now components properties so the property name we have in the class are automatically made available to the components blade View and you can reference it using a standard blade syntax so to display for example the name we added in the navigation class do sign name so I'm going to say up here let's say H1 and double call braces use a dollar sign name and save if I come here now and refresh as you can see we have this code with Tony up here and if I change in the navigation so code with Tony dot do dot save come here and refresh we have the code with Tony dot dot dot here now in addition to access properties from The View we can pass data to the view from the render method the same with have added for example to laravel controller if I come here and let's copy this string and I'm going to remove now the name here and I'm going to say here with Okay add an array and specify for example name and I'm going to pause the code withy and we have the same thing if I save come here and refresh we have the code with with Tony without dot dot dots and if I type now dot dot dot here save come here and refresh now we have the code with Tony dot dot dot here okay friends that's it all about this video or we can use the components in Live Wire and if you like such a video don't forget to subscribe to my channel uh like the video share with your friends and see you in the next one all the best and thank you very much Hello friends Tony here now in this video Let's Take a Look the properties and actions in Livewire so if you go to Livewire documentation in the essentials we have properties and actions and we talk about properties a little bit in the previous video so properties store and manage data inside your Livewire components so they are defined as public properties and component classes and can be accessed and modified on both server and client side also here we have now initializing properties so you can set initial values for uh properties within your components Mount method so once we have an example here public Tod do which is equal with an empty array uh Todo with empty string and then we have the mount method and set this to do which is an empty array to be without user to-dos so we get the to-dos of the AL edicated users now let's open the project I have removed that uh name we have in the previous video so if I open the vs code and let's open the navigation blade inside the resources views Live Wire out so here we had the dollar sign name and if I refresh yeah it is but I removed that let's save let's close and what I'm going to do I'm going to open the welcome blade and here I'm going to copy or cut this and select all and remove and I'm going to say I'm going to use the X Quest layout here because it's going to be more clean and then paste this if the route has Login Live Wire out navigation let's save and let's see now if I refresh here here's login and register and let's Sumit little B and I'm going to create a new component to work with the properties so let's say PHP artisan make Live Wire and I'm going to name it tasks hit enter now we have the PHP class in the Live Wire tasks app Live Wire tasks and the blade in the view SL wire tasks okay let's close and first of all I'm going to render that component in here in the welcome so let's say first a div and in this div I'm going to render that so Live Wire not out but tasks and I'm going to close if I save and refresh right now nothing changed but if I open the tasks blade okay and let's change something here so for example I'm going to say H1 and just say tasks here if I save now as you can see here is the tasks okay now let's see the example with the mount I'm going to open also the tasks class and this is going to be in this tab and the blade in this tab okay so let's create here a public property the B do sign tasks and equal with an empty array and then a public task able with an empty string and now let's create that mount method and in here with a dub n we get this task to be able with up model task but with don't have that we don't have the database yet with this projects but I'm going to create a project and create also the database for that for now what I'm going to do I'm going to save these tasks to be able with an array and for example let's say a first task second task and let's close if I save and let's see on the browser yeah nothing changed now what I'm going to do in here I'm going to display the tasks so tasks is an array and the display here I'm going to add ul and then I'm going to make a for each tasks as dollar assign task and here let's say Ai and display a single task if I save as you can see here we have first task and second task so on Mount we initialize this task with this array okay now let's go here and let's scroll down also we have also data binding so Livewire supports 2way datab binding Through the Wire model stml attribute now if you have worked with the VJs is the same as bgs V model this allow you to easily synchronize the data between component properties and HTML inputs so keeping your user interface and component state in sync and let's use the wi model directive to bind the Todo property so in this example we have something like this we have this method so if I open actions in here liveo actions are methods on your component that can be triggered by front end interactions like clicking a button or submitting a form and they provide the developer experience of being able to call the PHP method directly from the browser so allowing you to focus on the logic of your application without getting bed down right in a borderer plate code connecting your application from front end and bucket and you can see an example here for example here we have save method and post create so on now let's copy this way to copy the input and also the button and paste it in here so after the H1 I'm going to paste that in I'm going to remove the placeholder and not to do here but I'm going to use a task properties because here we have task in our case and here I'm going to say just add and let's add uh some classes so class the BBG Indigo for example uh 500 and P tube I'm going to say if I save this and let's see the browser yeah we have something like this and refresh yeah okay now we added the wire model task which is this task here now anything we type here is going to be in this task and let's use the add method so I'm going to copy what we have in this one and paste it right here not to do but it's going to be in our case tasks and also this task here and I'm going to remove for now this one and let's save so we have a button with a wire click directive and when we clicked this button we are going call this add method when we have here this add method now is going to say this tasks array in this array we're going to add also the task we have in here which is going to be what we put in the input so let's see in the action if I refresh and let's say a third task for example and if I hit enter now we have a third task here but as you can see this third task is remaining and if I say dot dot dot enter yeah we have here and is remaining now in this example we had this to do to be equal with empty string so it's going to reset the state and let's do also in our example so let's say this task equal with an empty string if I save now and let's refresh and let's say uh third task again hit enter we have third task but we don't clean the input and that's it because if I open uh here we are in the welcome and we use this Quest layout and if I open that so Quest blade in here we have V passing the app CSS and appjs and if I open the appjs we have imported here the Alpine from Alpine JS and you say window Alpine the be with alpine and Alpine start but as I told you in the previous video the Live Wire version 3 injects automatically the Alpine with the Live Wire so we don't need to import the spine also here for that we have this error so if I uh this and save and now if I refresh let's say uh third task again and if I hit enter now we have third task and we clean the input because we use this task to be able with an empty string also we uh live wi provides a reset method that accept one or more property names and reset their values to their initial state so instead of this task to be able with an empty string we can say this reset and pass here the property name so for example task but if you have more you can add also more there if I save and refresh again say third task add here and yeah we have third task and we clean the in now if you go to actions and let's scroll down we have EV event listeners so Live Wire supports a very of event listeners allowing you to response to various types of user interactions so here we have a listener and descriptions and let me Zoom it so wire click what we added in our project in task we have wire click this triggered when an element is clicked we have wire submit is triggered when a form is submitted so let's do that let's instead of wi click I'm going to remove this and I'm going to cut and paste this in the form so going to say form and paste that input a button and now in this form I'm going to say wire colum submit to be equal and say add here if I save come here and refresh and let's save test for example hit enter now we have test here so we worked with the wire submit also we have a wire key down is triggered when a key is pressed down a key up wire key up triggered when a key is released we have also wire Mouse enter so let's use this copy and move back the this one and instead of where click I'm going to say mouse enter and if I save and see one more time here refresh just say test and now if I enter the mouse in the button is going to add this okay and whatever text follow after the wire column will be used as the event name of the listener now also here we have listening for specific keys so wire key down enter example here work kit down shift enter and below is a list of all the avalable key modifiers so shift enter space control CMD meta and so on you can read more in the documentation also event handle modifiers so we also includes helpful modifiers to make a common event handling tasks trivial so for example wire K down. prevent and prevent is equivalent of calling do prevent default we have stop window outside document and so on also here and you can read more in the documentation of Livewire now that's it all about this video I wanted to show you if you like such a video don't forget to subscribe to my channel like the video share with your friends and see you in the next one all the best thank you very much hello fans Tony here now in this video I'm going to create the database for a project I'm going to create a tasks model and migration I'm going to create also a enams for our project because we need enams so let's open the vs code and in here first of all I'm going to open the terminal and create the model and Migration by saying PHP artisan make colon model hit enter give it the name for me is Task now for here I want only the migration and hit enter let's clean this and let's open that migration so tasks migration and what I'm going to add in tasks I'm going that first the user ID so let's say dollar sign table to be virgin for the user class like this and then add the title add the description which is going to be not string but let's say text for description I'm going to copy this and paste for the AL some without the slug here so title slack description next I'm going to add status and for status we need to have a inam also I'm going to create table string for the priority so let's say priority here and then a date for the deadline and I think we are okay so user ID title description status priority and deadline now for status and priority I'm going to use enams and let's save this let's close and let's open now the model so the task model and let's say for now just uh protected and close this one now we have title slack description status also we have priority and a deadline and I think we are okay now let's create also the relationship so user which is going to be belong belongs to relationship and return this belongs to user class okay save Also let's open the user model to be to create the relationship for that so here I'm going to say public function tasks which is going to be has many relationship and return this has many tasks save close also this one close this one and now in the EnV file by default we have the This breeze blade database and I have created that so if you want you can create the database with this name or create whatever you like and come here clean and let's say PHP Artisan migrate and I'm going to say rash okay clean this and let's open out the browser here we are if I refresh let's go to register I'm going to use fake fer here and let's say register and yeah we return in dashboard now let's open and let's create uh inaps so in the app I'm going to create a new directory and say inaps and in here I'm going to create a new file and I'm going to say uh status type. PHP is going to be for the status inam and first of all let's say PHP here we need to add a name space which going to be up back slash inaps okay like this and now let's create that so let's say enam here and the name is going to be status type now this is going to return a string so let's say something like this and for the status type we have not open but what I'm going to do I'm going to say started like this and also started like this in progress is okay just say underscore in progress here and done good now let's save this and let's save also as uh not status type but priority type so priority type and for the priority to say low and also low here in here I'm going to say normal and normal also here and the last one is high okay and high here and I think we are okay with the structure so we created the model my creation enams and we created the database and that's it for this video just to set up the project for what we need and I see you in the next one work with Live Wire okay see you there hello friends Tony here so in the previous video we worked with migration with model we created the relationship between the user and the task and also we created two enms and now in this video I'm going to start and work again with Live Wire here I am in the dashboard and uh we can create a component for the tasks and add it here in the dashboard directly but I prefer to have a URL for task for example uh they have tasks like this and if we go there we navigate the task and work with tasks and it's going to be a single file so in that F in this file we're going to have the form also we going display the tasks and so on okay so let's get started uh what I want to show you also is I have removed the component we had before and for that I'm going to create a new one so let's open the terminal and let's say in a new one because I had the npm running so let's say PHP artisan make Live Wire and the name now here I'm going to create in the tasks directory for that I have removed the first component so let's say tasks and use the dot notation and here I'm going to say task or tasks in the next page and hit enter now we have the class inside the app Live Wire tasks directory and then the tasks index class and the blade inside the views Livewire tasks directory tasks D Index blade okay now as I said we can add here that component but I prefer to have the URL for that if you go to on the Livewire documentation when we have components we have a section for full page components so Livewire allow you to assign components directly to route in your L application those are called full page components you can use them to build Standalone pages with logic and Views so the same we have with the invocable controllers and here is the example so to create fold page component the finer route in your routes web file and use the rout get method to mob the component directly to a specific URL so rout cut for example post create and use the create post which is a Livewire component so let's do that let's come here and let's open the web rout and uh I want to add it here in the middleware house in this group because we need to to be authenticated in order to create tasks because the task belong to the user so let's do that let's say route col colum get and for example slash tasks I'm going to say and I'm going to use the tasks index class and give it the name for example tasks uh index like this hit save now if we navigate the slash tasks hit enter we have this error so Livewire base component layout view not found because the Livewire is going to look for the components layouts up and of course if you go here also we have here layouts file so remember that full page components will use applications layout typically defined in the resources views components layouts app. blade. PHP file but we don't have there we have inside the layouts not in the components we are directly in the layouts app for that let's open this task index and when we return we can also say here we can change the layout method and say for example here specify the layout layouts. app is the path or layout in this case and let's save this and now if I come here and refresh yeah everything works and let's open this file and just I'm going to say here for now H1 and say tasks okay let's save this and yeah here's the task okay how let's do one more thing let's go to layouts navigation and here when we have the dashboard I'm going to copy this and add one more for the tasks so let's say route to B tasks. index and here I'm going to say tasks uh tasks index not find yeah we have task blal here and now we have tasks here okay as I said in this page we're going to have the form the list of tasks and so on so let's add the form in this video quickly so when we have a task index okay so here I added the title slack description and status and so what we have we have also the priority so let's just copy this div here and add down there for for the priority so not country but let's say priority and also up here with to say status and now now we have status and priority we have description Slug and the title now for the status and priority we need to render the status from the enams for that I have created the inms so let's say make a for each and use back slash app back slash enams back slash and we are in the priority so let's use the priority type and we need the cases this is going to be as let's say the assigned priority and here option to be with a value and the value is going to be dollar sign priority now for the value we going to get the value and Port the display here let's remove this one to this day we need to get the name okay and I think we need to close this and let's save this okay and yeah we have class priority type not found app inms so app inam priority type let's go up prior oh no I have make a typo so let's rename priority type okay and let's refresh now again we have priority yeah we need to change also here to be priority type to be string okay and why we have public const here anyway we need to say Cas here and let's see also the status status we have status type string and also here we need to say case and I think we are okay let's go to tasks Cas say as PRI priority name and refresh and yeah we have now low here normal and high good let's do the same for the status let's copy this and paste it here just change the priority to be status type like this and also as status like this save and now we have started in progress and done and also low normal and high and that's it about this video friends in the next video we're going to talk about the form so if you go if you scroll down we have covered the properties components and actions now we need to talk about forms okay so that's is going to be in the next video I hope you enjoy and see you there all the best Hello friends Tony here now in this video Let's create a new task for our project so here is the form I added also the deadline because I had forgot and let's open the tasks index blade just to show you where is the DAT line and yeah just the input with wire model deadline and type date okay now if you go to Li documentation and forms here we have an example with a create post component and we need to define the properties for our form so for in our case we need the title slack description status priority and the deadline in the class component so let's open the tasks index class okay so here let's create public dollar sign title then public slug also for the description we have status priority and uh public for the deadline public do sign deadline like this so we defined the properties all then we have this save method so we need to create this save method to create a new task and here we have a return this redirect the post with a status but in our case because we are going to have a single page to create the tasks and also to render them we don't need to redirect so let's come here and let's create the save method so method save is suggesting to validate but for now I'm not going to validate that just let's go and do the same as we have here create the task and because the task needs the user ID it's going to belong to the user I'm going to save that task to the user's tasks okay so we can say authenticated user like this out user and call the tasks relationship so tasks and now I'm going to say create and here let's say the same we had in the example so this only and what we have in here a title description status priority and the deadline okay now if I save that and if we scroll down here in the example we have the wire submit save so let's open our tasks and see the form also I added the wire submit save and also we have wi model title and Slug and so on so as you can see we are binding the public title and other properties in the form above using the wire model and this is one of the most commonly used and Powerful features of Live Wire now we are using also the wire submit to capture the submit event when the save button is clicked and invoking the save action and this action will persist the form input to the database and now because we need to be in the same page we just uh need to reset the properties but for now let's just try if we can create a task okay so let's come here and refresh and I'm going to use a fake Fielder and say submit nothing happened but let's open the table plus and refresh and see in the tasks now we have this task with the user ID and let's create one more so I'm going to refresh this use a fake filler and say submit okay nothing happen but if I come here and refresh as you can see now we have the task ID to and user ID3 because it's belonging to this one and we have the deadline uh status in progress priority is high and so on now as I said let's uh also reset the properties so after we create the task we can say dollar sign this and I want to reset and I'm going to leave it blank here to reset all the properties we have in our task index now if I save that and try so refresh and use the fake filler again let's say submit now as you can see is cleaning and of course if I open the table plus and refresh yeah we have a new new tasks with ID3 here okay friends that's it all about this video now in next video we need to add validation because right now if I see submit yeah we have column title cannot be null and so on we have we need to add validation and also we can extract the form so if you go the forms we have extracting a form object and we are going to take a look also to this one okay I hope you enjoy and don't forget if you like such a videos subscribe to my channel like the video share with your friends and see you in the next one friends all the best Hello friends Tony here now right now we need to add validation because or form doesn't have so if I click in the submit button without typing the title slack or the description we're going to have the error so if I click now here yeah the column title cannot be null and to avoid the storing incomplete or dangerous user input most forms need some sort of input validation and the Live Wire makes validating your forms as simple as adding the rule attribute above of the properties you want to be validated so for example if I open the vs code here in our project we have the public title what we need to validate this title is just adding the attribute rule so let's say rule like this and we need and we need to import the rule so let's import that from the Livewire attributes rule okay import that rule and now we need to specify the rule so in our case I'm going to say just required right now now by adding this Rule and if I click in here nothing is going to change because yeah we already have the column cannot be null because we need to call the validate method in the save method okay so here we can say dollar assign this validate as is suggesting us and now if I save that and refresh and hit submit nothing changed so we don't have not that error but we need to display the error so we need to modify the blade of our form and let's open the tasks index here when we have the title we can say let's add the div and in this div I'm going to add yeah something like this if we have the error for the title add the span with class text R 500 and maybe I'm going to say also text to be small and display the message now if I save that so by adding this div with the error now and because also we added in the plus that rule required if I refresh and say submit yeah the title field is required and if I specify also one more uh rule for example to be minimum of five characters I'm going to say and if I save and type something here but less than uh five characters so for example I'm going to add only three characters and say submit yeah the title field must be at least five characters okay and let's do the same for our for others so for title so I'm going to add also the same for the slug now for the description is going to be minimum of 20 or 200 is better but I'm not going to add 200 characters and uh also the status and the priority and the date deadline now for the status we don't need minan five is going to be required also the priority is going to be required and the deadline is going to be only required what I need is so let's save this first and I'm going to open the task model and add C for our status priority and the deadline so let's open the task model and after the fillable I'm going to say protected cast and let's close this and add here the deadline which is going to be date then the priority and the status not integer but we are going to add the inms so the priority is going to be priority type class so let's say priority type and the same also for the status so let's say status type class and now we are okay with the task let's go here also we are okay with the validation and let's refresh let's say submit we have the title fi is required let's add also the errors in the blade for all so I'm going to copy this div and just change the title so for example here we have the slug let's spacee it here and change this to be slug for the description also the B description and so on you can skip this okay so I added for all of them now let's come here and refresh and let's say submit and yeah we have all the errors but as you can see we have tasks here and tasks here so let's do T also where yeah we have this T so I'm going to remove and maybe add some classes to this one so text to be two Excel and font to be semi bold and let's save yeah now we have tasks here with title and so but now as I told you in the previous video Let's extract the form object so if you are working with a large form and prefer to extract all of its properties validation logic Etc into separate class Livewire offer the form object and form objects allow you to reuse the form logic across components and provide a nice way to keep uh your component class cleaner by grouping all form related code in a separate class so if you want to this task index in this example to be more clean to remove all the logic for the form here we can create the form object Now to create a form object let's open the terminal and here I have the mpm Dev in this one I'm going to clean and I'm going to say PHP Artisan Now to create a form we need to say Live Wire colon four and give it the name in this case I'm going to say task four just specify correctly hit enter and inside the app Live Wire forms now in the forms directory we have this task form class created successfully let's close this and in the Live Wire we have a forms directory and here is the task for let's move now the logic of the form in this one let's go to the task index and let's copy all of the properties let scroll up and yeah we have title priority and the deadline cut them and and come here and paste it in the for and now in the task index we remove that what we need to do is to inject the form so we can say public task form to be dollar sign for and here we say this validate okay then Al user task create and not this only the title because the is not now inside here but we can say so let's say dollar ass sign this for all we can say like this let's save also right now if I open here and refresh and let's say submit as you can see nothing happen because in tasks index we need to make some changes also now we say why model title but we don't have the title in the task index we have that in the form and we injected the form as dollar sign for for that we need to say here wi model for DOT title now if you have created if you have worked with the VJs and you have defined the form with all properties the same we have also here form. title using the dot notation and let's copy that and do the same also for the error and for the ERS okay so I added the form to all of them form the deadline and so on and let's come and refresh now if I click submit yeah we have the title field is required and all of them refresh again let's use the fake Fielder here to see if we can create the task and also let's open the table plus and see on the tasks refresh we have only three now if I click submit nothing changed but if I come here and refresh we have a new task as you can see okay good now as you can see is not cleaning the inputs because in task index we say this reset but here is not going to reset anything because we don't have the properties in this task we have them in the task four so what we can do we can save this for already res set and now if I save that and come here and refresh fake filler again submit yeah we need to add more characters in the description and let's submit again and now it's clean the it's clean the input put and also if I open here and refresh we have a new task now also we can extract the creation logic in the form object so this one for example we can cut this go to the task form and here let's say create the method and I'm going to say create task and paste this logic but not this form all just this all we can say save this and then in the task index here on the save we can call that we can say this validate and then also this form not save but we have here a create task so let's copy that and paste it here and let's try now refresh I use the fake filler submit is cleaning and of course if I come here and refresh we have a new task okay friends and I think now we have more uh clean task index so we just inject the four we s create the method save and in this method we just say this validate this this form and call in the create task and then this form reset and that's it okay friends that's it all about this video now if you like such a video don't forget to subscribe to my channel like the video share with your friends and see you in the next one all the best thank you very much Hello friends Tony here now in this video I'm going to show a loading indicator and Flash message when we create a tasks because right now we don't see if that task is created if I use fake Fielder here and say submit yeah we see that this is clean but if the task is created or not we don't know we don't have a flash message also when we click so if I inspect the element and let's go to network and in the network I'm going to uh select the slow 3G okay and let's use the fake filler again here is the submit button if I click take a look if I click one uh more than one time so let's say one 2 3 4 five as you can see only one uh request is made by default Live Wire will automatically disable submit buttons and Mark inputs as read only while the form is being submitted so preventing the user from submitting the form again while the first submission is been handled however it can be difficult for user to detect this loading state so if we refresh and uh hit again yeah we have an error here but we cannot see that is disabled or not for that I'm going to show a loading indicator in our project and if you go to Live Wire documentation we have this wire colon loading HTML attribute and we're going to use this to show a loading indicator or you can say for example sa saving uh task or what you like so let's Zoom it a little bit just for you to show and to read more clearly Live Wire provides a simple yet extremely powerful syntax for controlling loading indicators which is the wire goldon loading so adding wire loading to any element will hide it by default using display known in CSS and show it when a request is sent to the server so when the request is sent it's going to show and here we have an example when a user press save the save post message will appear below the button while the save action is being executed the message will disappear when the response is received from the server and proest by Live Wire okay so let's close this and let's open the vs code here I have the button or button which is this one and I have made some changes now I'm going to paste here a div with an SVG which is loading SVG and also a span with glass Str only same loading here now if I save this as you can see here here is the loading State now let's use that wire loading wire call loading HTML attribute and that and this one is going to display when we send a request okay so right now as you can see it's not displaying and let me inspect the element go again the network and slow 3G and let's use fake Felder if I click submit here's the loading and yeah now it's closed we updated so the the task is created and that's his height okay so this is how we can show the loading indicator in our project with Live Wire very easy just by using this wire loading okay next thing let's work with the flash message and for Flash messages I'm going to open also the class so the tasp index class and here when we create a task also we can go in here and we can say a request helper method so call in a request helper method and yeah we have something like this which is suggested for us so request then we change the session helper method and use Flash and in this to this uh flash method inside the flash method we can add two arguments so the first one is going to be the name for example the here we have success or we can say something else and the second is going to be the message itself so let's say for example task created or yeah task created successfully okay now if I save this it's not going to show anything right now because we need to go also in the task index and maybe up here when we have a form so in here I'm going to paste the code also you can go and copy this from the flow bite so we check here if we have a session with a success so the same we return from uh task for display this div and here we have a success alert because I just copy from the flow bite but let's say uh for example task created and if I save that also we need to close this spot and save this and now refresh yeah nothing happen but if I click the fake Fielder and submit yeah as you can see task created okay friends uh that's it all about this video hope to show the loading indicator in our project and also a flash message when we create a new task so now when we uh let's also use inspect elements for last time and choose slow 3G select fig filler and I'm going to zoom it here out zoom out just to see the old form also to see that flash message if I click submit we have loading State and then we have task created so what we need in our project in most cases now if you like such a videos friends don't forget to subscribe to my channel like the video share with your friends and see you in the next one all the best hey Hello friends Tony here in this video I'm going to display the tasks belong to this user so the to the authenticated user and if I open again the Live Wire documentation let's take a look again the forms because we have something we need to cover so forms here and we have worked with forms but also we can see we have this live updating Fields only updating fields on blur and also the real time validation so by default Live Wire only sends a network request when the form is submitted or any other action is called not while the form is being filled out so for example if you want to make sure that the title input is synchronized with the dollar sign title property on the back end as the user types which mean as we type in here so if I refresh I if you want to synchronize this input with the dollar sign property we have in the task form you may add the dot live modifier to wire model okay so here we have an example of wire called model. live modifier and now as a user types into this field the network request will be sent to the server to update the dollar sign title and this is useful for things like a realtime search where a data set is filtered as user types in a search box and let's do that let's open the tasks index and here or before that let's inspect the element refresh and let's go to network and I'm going to clean this and if we type here nothing is going to change so we not we are not sending a request but if we add the live modifier on wire model so title the form title and now let's refresh that let's clean and if we type here as you can see it's going to send the request as we type here and also let me show you in here if I display for example dollar sign for title and let's CL this we not need that now here it's empty but if we type as you can see here is the title is going to update as we type okay let's remove so that's was the live updating also we have the updating fields on blur okay so here we have the blur so for most cases the doli is fine for Real Time form field updating however it can be the overline network resource intensive on text inputs so if instead of sending Network request as a user types you want to instead only send the request when a user TPS out of the text input also referred to as bluring on input and you can use the do blur modifier instead so here we have an example now the component class on the server won't be updated until the user presses tab or clicks away from the text input and let's see let's come here inspect the element go to the network and change the live dot blur now if I save okay let's clean okay so let's type something and as you can see it's not sending a request yet when we click outside of this input so if I click this slug now it's going to send that request so only when we uh click outside also we have this real time validation and we saw that if we use that uh live again and S save let's come here and refresh again and if we type one yeah we have the title field must be at least five characters and we if we type more than five is going to remove the validation so that is the real time validation and now let's display all the tasks belong to this user for that I'm going to open the task index and here when we return the view I'm going to add also tasks belong to this user I'm going to say tasks not this form tasks but is going to be authenticated user and chain the tasks relationship okay like this let's go here and here now I'm going to paste the code which is ready for you so for each task as a task here we have the an anchor tag with SH some classes and the diff so if I save this yeah here is the list okay let's also add to this one m y of four and yeah like this now what we need is here is the title 2021 and we need to display the task title then we need to display the deadline so let's say here dollar sign task deadline and I'm going to say to be diff for humans diff for humans and also here we need to display the description so to sign task description like this and here we are now one week from here so we need some design here and I'm going to do in behind the SC also for the form but that's it the idea so if I go and add new one so let's say first task and let's submit here is the first test okay friends that's it all about this video now don't forget if you like such a video subscribe to my channel like the video share with your friends and see you in the next one all the best Hello friends Tony here now in this video I'm going to create two components one is going to be the logic for the form so I'm going to move the form in that component and another one for the list of tasks as you can see I have made some changes in the form and also on the card for lists and you can find them in the GitHub repository so if you go to github.com and navigate a code with Tony official SL live- verion 3- tututorial this is the repository for this project so you can find all the code there all the changes I made okay going to close this and now if I open here in the task index we have a bunch of code here so let's see so I'm going to move this the form component and this one the list component let's open the terminal and here I'm going to say PHP artisan make golden Live Wire and the name of the component but I want the component to be inside the tasks directory I'm going to say tasks dot list or we can say task Dash list here if I hit enter okay now we have the class to be inside the tasks directory and task list PHP and the blade to be in the tasks directory and task-list blade now let's create one more for the form and I'm going to make it to say tasks for okay the same thing now let's close this and as I told you I'm going to move the logic here just copy this div which has the for each tasks so I'm going to cut this not copy cut and move that logic in the tasks task list blade so just paste that in hit save let's close and then copy this one or cut this one and navigate in the tasks form and paste that in okay save now in the task index we need to add the task in the task list and the task for so if you got a live wire documentation here we have nesting components and Live Wire allow you to Nest additional liare components inside of a parent component and if we scroll down s the N liveware component within parent component simply included in the parent components blade view below is an example so live wire and added for example to do list in our case let's add the Live Wire golden tasks Dash list and I'm going to close that and also live wire colon not TK list in this case but task for and I'm going to close now if I save and if I open the project and yeah we have this because we need to add first of the tasks directory so task dot task list and the same for the form and now yeah we have undefined the variable tasks because we make here a for each tasks but we don't have that so in the tasks list we make a for each task and also in the task list class we don't have that uh tasks here so what we can do is we can pass and if we go liveware so here we have now passing props to children so passing data from a parent component to a child component is straightforward in fact it it is very much like like passing props a typical blade component for example let's check out the total list and here we have and passes a collection of theu the child component called to do count as you can see here here is passing the to-dos and then now the to-dos has been passed to the child component you can receive that data through the chart components Mount method okay we Le that so we need to create the mount method and say create a s todos and say this to-dos to be able with the todos we pass in the parent component good so let's do that let's open the task index and in the task list we're going to say tasks to be able with dollar sign tasks now if I save and let's go to task list here and create first I'm going to create the public tasks okay and then create the mount method and say this task to be equal with app models task not like this but we need to receive the tasks from the parent component and say now this task is going to be equal with the task we get from there now if I save and see on the browser if I refresh yeah we have the task now we need to move the logic for the form also for that when you go to task index we call this save method and let's and also we injected the task four so let's cut this save the task index and let's go now to task four here I'm going to paste that in we need to import the task for and save that in I refresh okay now let's use the fake Fielder to create a new task and let's say submit task created but as you can see it's not updating right here now if I say refresh yeah the task is here but when we create that task is not showing on the is not updating on the task list and we need to work with that in the next video okay friends that's it all about this video now don't forget if you like such a videos uh subscribe to my channel like the video share with your friends and see you in the next one all the best Hello friends Tony here I have run the PHP Artisan migrate fresh so I don't have any data right now in my database and just go and register with fake filler and navigate the tasks okay so here we have a form now when we create a form and I'm going to use a fake filler here just to save some time say submit sorry the task when we create a task task created we have a notification here but we have a list here to render the tasks to list the tasks but the task is created and now it's not display here we need to refresh and yeah now is displayed the task and when we had this logic so the form logic also the list logic in the task index which is a p component that was automatically done but now we separate the form and the task list in two components and we have a task index next parent component which host the form and also the task list component how we can achieve that how we can communicate between a form and a list component so when we create a new task say a task is created so update the list for that we are going to use the uh Livewire event system so Livewire offers a robust event system that you can use to communicate between different components on the page now because it uses browser events under the hood you can also use live War event system to communicate with the Alpine components as well now to trigger an event you may use the dispatch method from anywhere inside your component and listen for that event from any other component on the page now let's take a look to our project I'm going to open first the P component which is the task list task index sorry task index and here we render the task list and the task for but on this task list we added the task from the parent and also if I open the task index class as you can see here we have a task now instead of getting the task here we can move this logic so cut and move this Logic on task list and let's open the task list class and instead of listening for the task we pass there we are going to get in here and then remove this okay now if I come browser and refresh everything works correctly now let's work with the events so when we create a form uh fire event and then listen for that event on a list the dispatch an event from a live while component you can call the dispatch method passing it the event name and any additional data you want to send along with the event so let's open the form class so tasks form and here we injected the form object because we use the the form object and then we have this save method and here we say this validate then this form create create task and then this form reset what I'm going to do after the create task I'm going to send I'm going to dispat the event so going to say to assign this and call the dispatch method and pass in here the name and I'm going to name it a task created as I told you also you can add additional data here but I'm going to leave as it is right now and then let's open the task list class and here we need to listen for that event okay so it's firee we dispos the event from form and we need to listen on the render method now to listen for an event in a live world component we need to use the on attribute above the method we want to be called when a given event is dispatched okay right now in the task list we have only the render method but if we have other methods so let's for example let's say method and I'm going to say just test if we have another method we can listen also to this one and let's do that let's listen for one moment to this one let's say hash brackets and use the on attribute and also we need to import that okay so use live wi attributes on and we need to specify the name which is we have here task created so task list paste that in and now when the task created event is dispatched from the task form or network request will be triggered and the test action will be invoked okay so let's say for example just for now I'm going to say d dump test okay save and open the browser refresh fake Fielder here let's use something here and let's say submit as we can see we have the dump test and now if I refresh yeah it is the list also as as I told you you can add additional data so on task form for example we can say title and we can get the title from doign this form title like this and on the task list now the additional data sent with that event will be provided to this action as a first argument so to this action is going to be as the first argument and we named that title we can say title here and instead of test we can say d down doll sign title and if I save and refresh and let's test one more time this the listen for this event and as you can see here's the title of this task we created but we need when we create a new task we need to update the list the all the idea is there so in this case I'm going to move the on attribute so I'm going to cut and paste it on the render because what I want is just update to render The View and here we pass the task I'm going to remove now the test and let's save this refresh as we can see we have three tasks and let's use a fake Fielder again now when we submit you can see it's going to update the list if I say submit here the task is created and now we have four tasks on the list also if I refresh and use one more time the fake filler we need add one more characters and we have four now if I say submit again the task is created and now we have four uh five task ask here okay friends that's it how we can communicate between components in Livewire using the Livewire event system so we dispatch uh event from the form and then we listen for that event on the task list okay friends that's it all about this video now don't forget if you like such a video subscribe to my channel like the video share with your friends and see you in the next one all the best Hello friends Tony here in this video I'm going to talk about pagination and lazy loading here I am in the Live Wire documentation website and we have in the features we have a pagination section and here we can see larav pagination feature allow you to quer a subset of data and provides your users with the ability to navigate between pages of those results now because larav paginator was designed for static application in a on liveware app each page navigation trigger full browser visits to new URL containing the desired page so for example a page two however when you use pagination inside the Livewire component users can navigate between Pages while they're remaining on the same page so Livewire will hand up everything behind the scenes including the URL query string with the current page okay and here we have an example so you must use the with pagination tra we need to use that trade to uh see that uh single page application look like and we can say on the class use with pagination and we can import that from the live wire with pagination and then on blade we can do just do the lar stuff calling post links okay okay so let's open the project okay so here I am in the project and for this user I have created six tasks as you can see here and I'm going to pinate by five so let's open the class of task list because here we have the task list component okay so let's open first the tasks list class and in here when you get the the task for this user I'm going to use task pagination pinate by uh five and let's save now as you can see here we have six but if I refresh and now we have only five because we pinate by five now let's open the blade so let's say tasks list blade and here we make a for each after this for each I'm going to add a div and say with a Class B mark margin top of CH margin bottom I'm going to say 12 and padding of CH and in here I'm going to Ender the pagination so going to say dollar sign tasks and called The Links method now as you can see we have five and there we have a pagination if I click the two we navigate the page two but as you can see we navigate like a l application so it's going to be reloaded here as you can see we have reloading here now let's use that with pagination tra okay so let's go to task list class and here when we use that tra so with pagination and save also make sure you use with pagination here import that and just by adding that if I refresh and let's go to we are in the page one as you can see up here if I go to page two we have a single page application no reloading very fast and just by adding this with pagination in our class okay that's it all about what I wanted to show you about pagination we have more here but this is going to be if we want to Deep dive in the pation now let's go to Live Wire lazy loading feature so Live Wire allow you the lazy load components that will otherwise slow down the initial P initial page load so for example we have here an example and then to enable the lazy loading you can pass the lazy parameter in the component just by doing this adding the lazy compon uh parameter into the component and what where we can do that in the tasks index plate when we render the task list because I'm going to Lazy load the lists here I'm going to just add here lazy like this if I save and as you can see if I refresh first it's going to show the form and then the list of course if I inspect the and go to network slow 3G refresh and yeah here we have the form and then it's going to load out the uh list here now if we go here also and scroll down we have this rendering placeholder HTML so by default Live Wire will insert an empty div for your component before it is fully loaded but we can add this place holder method to render any kind of placeholder HTML you like so here we have the example we can create this method and render so in the task list we need to create that placeholder method because here we have the lazy and the T here we added the lazy so on the task list now we need to create this placeholder and we can return hm like this or I'm going to return a view so let's say view here and I have created a skeleton page and here I'm going to return that page so skeleton if I show you the skeleton here in the resources views here is the skeleton blade is just the skeleton I have copy from the flow bite you can go and copy what you like there and I returned here now by adding this method in this task list class let's see what is going to change refresh and now we have a skeleton here instead of empty page very nice very beautiful just by by adding this method and of course the skeleton page or you can add directly the in the HTML here that skeleton or the SBG you like so it's very simple very easy to do and of course so rendering a placeholder via view what I have done you can add also parameters here okay friends that's it all about this video what I wanted to show you the lazy loading and pation how we can work with a live wire is very easy all the best and don't forget if you like such a video subscribe to my channel uh like the video share with your friends and all the best thank you very much and see you in the next one Hello friends to here now here I am logged in with this user and I just created the task we have this notification task created and the list updated immediately okay now I want to show here the count how many tasks this user has so let's open the vs code and I'm going to open the tasks list class and here I'm going to add count to be out user tasks count good then open the tasks uh list blade and display that so I'm going to display like this total Tas and in the span going to add the count here good let's say save and let's come here and refresh and yeah we have a total tasks one let's create a new task submit task created the list updated and account updated as well good but what if I want to create a component just to render this account so let's do that let's open the terminal and let's say uh PHP artisan make colon Live Wire and I'm going to add this inside the task directory and let's say tasks Dash count like this hit enter okay now let's cut this uh here and I'm going to render that component so let's say Live Wire tasks dot tasks count and let's add here uh the account I'm going to inject the account here let say dollar sign count and let's close that yeah let's save now let's open the tasks count and I'm going to paste that code we had close Also let's open the tasks count class and just create the property so public doll sign count okay good like this and now if I open the browser and refresh I have typo here like this refresh yeah now we have tasks to but when we create a new task ask what you think is going to update the count here or not so we just injected the count from the task list in this component and what is going to be updated this count so let's take a look if I click the submit the task created the list updated but the account is not updated and if you go to nesting component in the live wire we have here reactive props so developers new Live Wire expect that props are reactive by default in other words they expect that when a parent changes the value of a prop being passed into the child component the child component will automatically be updated however by default Livewire props are not reactive okay you need to know that so live wi props are not reactive by default now but if you want or need a prop to be reactive you can easily enable this Behavior using the reactive attribute parameter and here we have an example so the parent injecting a to-do count uh component and passing the todos here and then add the reactive attribute the the property here and let's do the same in our case so what we need to do is to go in the tasks count class we have a public count property and let's add the attribute which is the reactive attribute and we need to import that so use live attributes reactive just by adding this let's save and and let's see in the browser now so fake filler submit now task created and we have total tasks four here refresh again submit task created and task five so this is how you can add the reactive how you can make the prop reactive but you need to know yeah that the reactive properties are an incredibly powerful feature making live are more similar to front end component libraries like a view or react but it is important to understand the performance implication of this feature and only are reactive when it makes sense for your application scenario okay friends that's it what I wanted to show you in this video I hope you enjoy and see you in the next video all the best and don't forget to subscribe share and like all the best fans Hello friends Tony here now in the previous video we created the count component and in this video I'm going to modify that count component so here I have run the Artisan migrate fresh and now let's register a new user navigate the tasks okay good now right now here is the tasks count zero let's create a new one oh okay submit yeah just uh what I want is let's open the for so I'm going to open the tasks form and what I want is I'm going to remove this live from the title okay and let's close let's refresh okay now what I want is if I open also so the uh table plus and as you can see in the tasks we have added the status column and also if I open the status inam status type here we have three cases started in progress and done and what I want to do is I'm going to group The tasks of this user by status and for each status I'm going to show the count so for example tasks with uh started uh status I'm going to show the account for that status and the same for the in progress and done okay so let's close this and let's open the tasks list class here we get the count and we say out user tasks count and also let's open the tasks list blade and here we inject the tasks count and we pass the account here but what I want as I said I'm going to change that so in set of the count I'm going to say uh let's say something like tasks by count maybe tasks by uh not by count but by status sorry so tasks by status and here I'm going to say out user tasks not count anymore but I'm going to use the select and I'm going to select the status okay and then I'm going to use the DB row and I want now the count out as count going to say or status count or just count I'm going to say count like this and then I'm going to group by status not like this just Group by status and let's say get now okay let's save now here we have tasks by status I'm going to copy this and go to task list and here now I'm going to pass that instead of something like this we can use the short way by saying tasks by status like this okay now we need to open the tasks count class first so tasks count and we need to say not count here but tasks by status and it's going to be reactive okay also open the blade of count component so tasks count and here instead of something like this I'm going to just display for now the tasks by status and let's save let's see on the browser now if I refresh yeah we have on sytax I think I make a mistake get group by status okay let's open that so tasks list oh yeah here we don't need that save and now let's come here and refresh okay as you can see we have an array with an object and we have status started and the count which is one now this uh is this task has the status started and we show the count for this stat start at status to be one now if I create another one and yeah we have down here let's say submit now we have status done count one okay good just instead of something like this I'm going to modify now the blade here so I'm I have prepared the codes I'm going select all and paste that one okay so here we have a div with some classes another div also with some classes and I make a for each tasks by status as a status and then another div and a F and here I display the status count which mean if I go to task list the count here so we say DB count all as count and uh then here I have displayed the status value now the status status here this is the column status which return the Ina because if I open the uh not status but tasks sorry task model we have protected cast and we set the status to be a status type in okay for that it's going to display it's going to say this is going to be a inam and I get the value and I say as headline just to display better in our project and now as you can see we have count one started displaying like this and down like this good let's uh create one more and with refresh and again started as you can see submit yeah we need to add more submit here yeah now we have started with and the count is true and the done is one refresh and let's create one more with in progress submit and yeah now we have this which is in progress but uh we don't have the order to be so started then in progress and then don't so let's go to task list and here I'm going to say order by and I'm going to order by status not ascending I want descending like this and refresh now we have started in progress and done good let's just create some more so I'm going to save this to be in progress one more in progress yeah we need add something like this and refresh okay now it's looking little bit good but uh I want to add some uh classes some colors here for example for started let's say the b blue for in progress to be yellow and don't to be uh don't to be green I'm going to add here a border for all of them but to apply that I want to open the inam so the status inam status type inam and here what I want to do is to create a method so public function and I'm going to name it a color and this is going to return and the string okay and here I'm going to use the return mat this okay now if for S started let's say uh border blue as I said 400 or 500 like this then for sell not completed we don't have completed but in progress I'm going to add border yellow 500 and then for the self done I'm going to add border green 500 like this and I think we are okay so just let's close this let's save and then open the T class count blade here I'm going to cut this and I'm going to use the class helper of or blade which we have so class and here we need to add an array the first one is going to be the default colors and uh then I'm going to add dollar sign status and then for the status I'm going to get the stat not value but color so status called color method here and this is going to be if we have the status like this now if I save I have here border two and then just I'm going to apply the Border uh for example if the status is let's open again this one if the status is started is going to be border blue 500 in progress border blue border yellow 500 and in done border green uh 500 okay so that is going to return here it's going to apply here and let's see now let's open yeah I'm going to close and R the mpm around Dev just in case let's open the application when to clear site data let's go to register one more time and use fake filler here register okay we got to tasks yeah we show this but any way now let's create okay so we have the first one which is done good let's create one one starter submit and yeah we have starter here and the border is okay let's create one with in progress good now we have the started here in progress and done and let's create one more for example in progress just we need to add more here and yeah we have two in progress one started and one done okay friends that's it all about this video now we I think we have more professional looking uh project okay friends now if you like such a video don't forget to subscribe to my channel like the video share with your friends and see you in the next one all the best Hello friends Tony here so in the previous video we worked with count component and in this video I'm going to work with the card component with a list what I want to do is I'm going T three buttons here based on the status type so you have started in progress and done types and I'm going to add buttons down there so when we click the started button for example it's going to change the status of this task to be start started if we click the in progress It's going to change the in progress the status and so on okay so let's open the tasks list blade and here we make for each tasks and here we have the task card after this one I'm going to make a for each and I'm going to make a for each for inam status type okay if I open the status type inam we have status type case started in progress and done let's say Here app back slash enams back slash and Status type cases has uh the sign keys I'm going to say like this and here I'm going to add a button so let's say button here type a button and we need add some classes so I'm going to just to paste some classes and I have copied them from the component we have here components and we have a secondary button we can use that here but just I wanted to add manually just to show you and here I'm going to display dollar sign case value okay let's save this and let's see what we have yeah we have started in progress and done just we need to format this how we want so for that let's open the account t count and I want to copy this save some time and paste it right here and instead of this one we to paste the case value save and now if I refresh yeah now we have started in progress done very good now as I told you when I click the started it's going to change that state of this task to started now let's open the class component so I'm going to open the task list class and here let's create a method to change the state so with to say not the render but let's say change status of State sorry status and what we need here we need first the ID of the task and we need the status and then we can say dollar sign task is going to be able with the task find the ID and then I'm going to say don't assign task update and let's update the status to be what we have in the status that it let's save and let's see and let's go now the task list here when we have button we need to add the wire click and the name was uh change status so let's copy that and paste it here and we need to add here the task ID and we have the task ID here because we make a for each task as a task so here we have a task and also we need to add the status okay and for that we're going to say comma and if we say like this case value is not going to work because this is a string so we need to add Escape that so like this now we are okay let's save and let's see on the browser if I refresh this is started as you can see if I click in progress now we have in progress if I click the down is done let's create a new uh task this is started now okay let's create new one and I'm going to make this in progress good now we have three one one one if I click this I don't know what state what status this task has what I want to do is if the status is for example in progress I'm going to make this button disabled so let's open that and wa got to the end and here let's say if the case value double equal and here we to check in not case sorry task status but the status is in because we casted that status type and we can say task status value if that is true we haven't had disabled otherwise let's say nothing and save this now as you can see the down here is uh disabled the started is here disabled and in progress is disabled here what if I click we have 11 one and if I click down here now done we have two and Don is here disabled and is here disabled okay friends that's it how we can add something like this one more thing let's make it look better if I copy the button classes cut sorry I'm going to cut them and use blade class here and add an array with default classes to be this one and I'm going to add also toar sign case color and just I'm going to say your true to display them okay just remove this now which is by default here and save see on the browser yeah now we have border blue for started in progress is yellow and done is uh green okay friends that's it for this video I hope you enjoy and don't forget if you like such a video subscribe to my channel like the video share with your friends and see you in the next one all the best thank you very much Hello friends Tony here in this video now I want to add the search input in our project so in the navigation I'm going to add the search and as we type we're going to make a search for the tasks belong to this user and I have prepare HTML here and you can find that in this URL so play. css.com and pass in the this code I'm going to copy this and let's open the vs code and first of all I'm going to create a component the Livewire component and here I'm going to say Artisan which is the alas for PHP artisan make Live Wire and the name which is going to be search you can name what you like I'm not going to add this in the tasks directory I'm going to leave in the liary directory okay now let's open the Search Blade and here I'm going to select all and paste that HTML we have copy from here and I'm going to close now this one and as I said you I'm going to add in the navigation so for that I'm going to open the navigation which we have inside the layouts the navigation blade and yeah here we have the logo which is this one then we have a links and after this links I'm going to add a div and in this div I'm going to inject the liveware component so let's say Live Wire and the name of the component which is search and I'm going to self close this and let's save yeah here is the search now uh maybe I'm going to apply also some classes stative here and I think yeah now we are more okay so we have the input and the search results is going to be like this we have a dummy data now let's start and work with the search I'm going to close navigation if I scroll up in the input I have added the wire model search okay so when you copy that code you have this wire model search so we are going to bind this input in the search property for that we need to open the search class and Define that property and we have done that so the Define a property we say public and the name of the property which is going to be search in our case and now as we type I want to make a search so I don't have to have a button here and when we click a button to search but as we type we going to search for that in the render I'm going to create a results and it's going to be an empty array is very easy to create that so and then I'm going to check if and let's use the string length so string length of this ser if that is greater than not zero because I'm not going to start immediately the search I'm going to start uh if the search is greater than two characters okay that if that is true so if the search if we have type more than two characters I'm going to make a search and let's say now to sign results is going to be be equal with Al user and tasks relationship and we're going to use the where method where and search for the title in the title so where title it's going to be like this search and we can say get or all okay and then in here right now I'm going to add the I'm going to use the compact we don't need to add search here because we have defined as a public property so we have results and let's save this and let's go to Search Blade now and here I'm going to remove this dummy data just leave one here which I'm going to cut and make a for each so I'm going to make for each to sign search sorry not search results results as what to say result and here paste that D data which uh I'm going to remove this paragraph just leave this one which going to be the title here I'm going to say to display the title so doar sign results result single one title okay let's save and let's see now yeah we don't have results here on theine variable results and let's copy this and see why I have make typo here now refresh yeah but if we type right now nothing is going to change we are not going to live wi is not going to make a request if we as we type and we have learned that so if I open the Live Wire documentation and let's get started okay so here I have navigate directly to the wire model so you can go here in the HML directives and we have model so live is easy to bind the component properties value with form input using the wire model good but what I wanted to show you is why isn't my component live updating as I type so if you try this in your browser and are confused why the title isn't automatically updated is because Livewire only updates a component when an action is submitted like pressing a submit button not when the user types into field and if we scroll down we can say live we can see here we have a live updating so we need to add this live modifier in The Wire model and let's do that let's go to search and let's add do live modifier now if I save that and come here Network let's type something here one as you can see as we type it's to make a request and that's it good so let's uh search for example for this one and I have make again a typo in the search class not tasks like this refresh and now I'm going to copy this and paste it here nothing is going to change we need the exact title and then it's going to be here as you can see so just let me Su it to the big yeah now we have that and that is because we in the search class we say where title is going to be like this but I don't want to be exact like this I want to be similar so let's say let's add a percentage dot this search do end percentage again and now I refresh again and let's say something like this and now we have the search good I'm going to zoom it out again or let's leave like this and inspect the element c a network and let's close the screen and let's type so as as we type we make a search but I don't want to make a search every G stroke so what I want is for example for uh 50 milliseconds to make a request for that we can add uh debounce so let's search for the debounce in our live wi documentation and here we have debounce now when using live on a text input you may want more F Grand control over how often a network request is sent by default the debounce of 250 milliseconds is applied to the input however you can customize this using the debounce modifier so after the live we can add also the debounce modifier and let's copy this and do that so in the Search Blade I'm going to add also the debounce modifier and I'm going to change that 500 milliseconds good let's come here let's see now if I start typing for example as you can see nothing is changed it's not making a request so we type we type no request is made if I stop then it's going to make the request if I stop typing and uh after 500 milliseconds is going to make a request so let's say and then after 5 milliseconds it's going to make a request so one more time just show you after 5 milliseconds going to make the request now if you like that okay but I want uh not to wait when the user is finished and then wait for five 100 milliseconds I make a request I want to make a request after five milliseconds even if the user is uh type in here okay for that we can use the throttle so throttle input so as started previously when a input debounce is applied to field Network request will not be sent until the user has stopped typing for a certain amount of T this means if the user continues typing a long message a network request won't be sent until the user is finished and we don't want that in this case you can use a throtle to signify of time interval to send a network request and can say just instead of debones we can use throttle and in this example the user as a user is typing continuously in the title field a network request will be sent every 100 milliseconds or what you can add here so instead of the debounce I'm going to use throttle and save and now let's see the difference let's say uh as you can see asai uh type is going to wait for five 100 milliseconds and it's going to make a request and that's it what I want okay friends that's it all about this video so let's try one more time and I'm going to search for this name so I'm going to say and here we have the results good now that's our all about I hope you enjoy and don't forget if you like such a video subscribe to my channel like the video share with your friends and see you in the next one friends all the best Hello friends Tony here so in the previous video we worked with this input we have a live search here so as we type is going to make a search so let's say for example for I'm going to search for this one and yeah if we type more than two characters it's going to make request search for this uh for the tasks belong to this user but if we have a search here if I refresh yeah we lost the search and we lost of the input we had here the string we have here for that we are going to use the URL query parameters so if you go to Livewire documentation we have and the features the URL query parameters and Livewire allow you to store component properties in the url's query string so for example you may want a search property in your component to be included in the URL like this so question mark search which is going to be equal with what we type in the input okay now this is particularly useful for things like filtering sorting and pagination as it allow users to share and bookmark specific state of a page so we can share and bookmark specific states of a page which mean if we search for something here and we can uh have that URL in here and we can share or we can bookmark and then when we visit it's going to remain that search URL and search results now let's scroll down so here we have uh the example below is a show user component that allow you the search users by their name via Simple Text input the same we have in our project and let's scroll down we have wi model live and then make a for each now however if the visitor refresh the page as I told you the search value and results will be lost now to preserve the search value across page loads so that a visitor can refresh the page or share the URL we can store the search value in the url's query string by adding the URL attribute above the search property okay so we need to add the URL attribute above the search or query what you have property here so here's the example and let's do that in our project so we need to open the search class and above the search property we need to add that attribute so that attribute was URL and we need to import not like this URL like this and we need to import that from the Livewire attributes URL okay so here it is and that's it now if I save and let's see on the browser so let's scroll up so now if the user types B into the search field the URL bar in the browser will show like this so it's going to as we type it's going to update also the search bar so the the URL Sorry by adding the search equal with what we type in the input now let's see if I refresh first and take a look to this URL if I type P a r as you can see the search result is here and also we have the URL here now if I copy this and let's paste in here and hit enter as you can see we already direct with the bar in the input and also the results for that search input source string okay so let's close and let's go here so so if they now load the this URL from a new browser window the Bob will be filled in the search field as we so and the user results will be filtered accordingly very good we have also initializing properties from the URL so we can just type in the URL and then uh for example the search will be set the Bob if we type search Bob here in the URL also we have using an alas Sol wires give you a full control over what name displays in the URS query string so if you don't have if you don't like the be search you can add a shorten like a Q and we have you can specify a query string alas by providing the as parameter to the URL attribute and here we have the example and let's do that let's copy this and let's do the same in our project paste that in and now save now now when the user types Bob into the search field the URL will show users Q he with Bob so instead of search it's going to be Q very good let's come here and I'm going to remove now the search also the question mark refresh and now if I type again yeah here we have the results and now we have q in the search very good now display on page load by default live where will only display a value in the query string after the value has been changed on the page so for example if the default value for search is an empty string when the actual search input is empty no value will appear in the URL if you want the search entry to always be included in the query string even when the value is empty you can provide the key parameter to the URL attribute so we can say keep the true and it's going to show so let's copy that let's come here first and I'm going to remove and hit enter yeah right now we refresh if I refresh the page we have just slash tasks but if I add this keep the true in the URL attributes save and now if I refresh now we have q which is not because we have no here but if I add by default to be a empty string now we have here A Q eal with an empty string and for example if we type I this in here paste out and hit enter as you can see it's updated also here and we have the results based on this uh string good now this is up to you if you like to beat uh to keep the search but I don't want that so I'm going to remove now here we have a storing in history so by default Livewire uses history do replicate state to modify the URL instead of History do uh push State this mean that when Live Wire updates the query string it modifies the current entry in the browser's history State instead of adding a new one because Livewire replaces the current history pressing the back button in the browser will go to the previous page rather than the previous search value for example if you want so the force SL War to use history push State when updating the URL you can provide the history parameter to the URL attribute like this and let's copy that and try our project P that in hit save and now in the example above when the user change the search value from Bob to Frank and then clicks the browser back button the search value will be set back to Bob instead of navigating to the previous page and let's see let's come here we have something like this now and I'm going to refresh very good so we have this now I'm going to search for this one okay but if I click now uh back what is going to be so if I click back we navate to the previous uh search now that's it if You' like to be history to true but in my case I'm going to remove just I wanted to show you and that's it all about this video friends I hope you enjoy all the best and don't forget if you like such a video subscribe to my channel share with your friends and see you in the next one all the best friends Hello friends Tony here in this video I want to talk about the computed properties in Livewire so what are computed properties computed properties are a way to create derived properties in Livewire like accessors on an eloquent model computed properties allow you to access values and cash them for future access during the request and computed properties are particularly useful in combination with public properties Now to create a computed property you can add the computed attribute above any method in your your live component and on the attribute has been added to the method you can access it like any other property now in our project I have uh installed also the Livewire debug bar and let's see the queries here we have four queries and if I click in the next here pagination now we have five queries any anytime we go back and forth we have five queries as you can see okay and if I refresh the page we have four queries okay so let's open the task tasks list class here we have tasks here in the render we added the task which is equal without user tasks pinate so we pinate by five if I open out the tasks uh list blade and here let's make a check in this for each so I'm going to cut this and make a if statement so I'm going to check if and I'm going to say false but let's say you have a an if statement for something and let's end the if here let's save so as I told you if you have some if statement here to check for something like if the user can see the task or I don't know and if I come here and refresh we have four request as you can see but what if we create that uh computed property so I'm going to create a computed property here so let's create a method first and I'm going to name it tasks and in this one I'm going to return so let's return what we have in the array here so I'm going to cut and paste it here and now remove from this array tasks and I'm going to use uh the tasks here so now this one I'm going to make it computed property and we can do that by adding the computed attribute above the method okay so let's add the computed attribute here and you need to import that from live wires attributes computed now if I open Notes here so because the computer attribute has been added to the task method the value is accessible in other methods in the component and in the blade template but we must use dollar sign this in the template okay so unlike normal properties computed properties aren't directly available inside your components template instead we must access them on the dollar sign this object so for example a computed property name tasks uh so we have here uh most be accessed via do assign this tasks inside your template so let's do that so I'm going to save this first and let's go on task list and here when we make dollar sign task I'm so I'm going to say dollar sign this tasks and the same in here okay save that and now we are good to go let's scroll little bit down here okay so you can see here here if I refresh again we have only two queries yeah two queries and without computed properties if a check is restricted from viewing tasks the database query to retrieve the task has already been made so yet the tasks are never used in the template but with computed properties now because we are providing the task that template use in competed property we only execute the database query when the data is needed so as we can see right now it's not executed the database query because we checked if uh we check above here if and we added false so if false it's not executing to get these tasks good let's change that to be true and display the data now we have four requests now let's see the performance so accessing a method as a computed property offers a performance Advantage offer called an abnormal method internally when a computed property is executed for the first time Livewire C the return value and in this way any subsequent access in the request will return the cash value instead of executing multiple times now this allow us the freely access derived Val and not worry about the performance implications but we must know that the computed properties are only cast for single request so Livewire only cat the result for the duration of single component request this means that if computed property method contains an expensive database query it will be executed every time you liveware component performs an update and here we have the examples for tasks I just added Order byid In Here Also I have created the task by status uh computed property and I created this method which is going to listen for the task created dispatch method so let's copy all of them and paste in our project in task list so let's remove this one and replace with the others so the task I just added the order by ID as I told you then we have this tasks by status computed property which is the same we have right here and so now let's remove this and let's comment this one for now some with comment this now because I created this uh computer property task by status so we need to update also the blade in here so I'm going to say task by status and let's copy the beal with a dollar sign tasks by status but need now we need to say this because this is a computed property and let's see if uh everything works correctly and everything works good now I'm going to open queries here we have four queries and let's create a new tasks I'm going to say here submit and it's going to create task and we have five queries here okay and the same if I come here and go to number two in the pagination we have five queries go back also we have five queries again but with the computed properties now we can change that so let's go to task list and we have learned that the computed properties as C are casted for only single request but also we have cash in between requests here sometimes you would like to cat the value of a computed property for the lifespan of a liveware component so as we stay in the component is going to be cached and live wi's computed attribute provide helpful persist parameters so by applying persist the true method it will continue to be cached for the duration of of the liveware component on the page so as this component is going to remain in this page is going to be cached if we use the persist true and live cash persist values for 3600 seconds 1 hour but you can override this default by passing an additional seconds parameter to the computed attribute so like this but I'm going to leave it as it is I'm going to just add persist the true and I'm going to add that in the tasks by status so here I'm going to say persist the be true and let's save this one and as I told you every time we go back and forth in the bation we had five queries okay let's clean everything okay we have four queries now let's uh navigate to the second pation here pation number two if I click as you can see we have only four queries not five anymore and so this uh count component is going to remain cashed because we added there is the true and task by status we added in the tasks count so it's going that is going to remain as it is but what uh if I also I'm going to leave like this and if I create a component uh task sorry take a look here we have one in started four in progress and three done if uh and I'm going to zoom out just because I want the remain here 143 if I click submit now task create it but here we have 1 4 3 again and if I scroll down we have nine results but in the count component we have all the eight so 1 4 3 and that's it because we have cashed the task by status but I want to change that and for that let's now remove this I have created this method which is going to listen for the task created dispatched event and then what I'm going to do I'm going to say unset this d uh task by status so use the PHP onset method and with that now when the task is created we're going to reset the GH of lar so let's come here let's refresh now we have two 4 three so we have have nine all together and if I create a task task created and also here we have 10 now 4 3 3 so we updated the count only when we create the tasks but not when if I refresh again not when we navigate between the pagination so we have four queries and let's navigate the number two here we navigate number two and we have only four queries as you can see okay now let's see one more time so cashing across all components so instead of caching the value of computed property for the duration of a single components life cycle you can cash the value of a computer across all components in your application using the cach through parameter provided by the computed attribute so we can add the cache to be true and until the cach expires or isos every instance of this component in your application will share the same cach value and uh if you need to manually clear the cache for a computed property you may set the custom cache key using the key parameter which is very helpful and then we can say somewhere else in your app you may clear the cash for that property by saying cash forget and passing the key name here okay friends that's it now all about this video I hope you enjoy and don't forget to subscribe to my channel like the video share with your friends and see you in the next one all the best thank you very much Hello friends Tony here now in this video I'm going to show you how to upload images with a live wire and I have created such a video with the version two which is similar to this one nothing has changed now uh I'm not going to add a new input to this form to upload images I have created if I open the vs code I have created the image model in migration and in this model I just added the protected fillable for name and path and also in the images migration added string name and string path okay now let's open the terminal and here I'm going to create a new uh Livewire component to create the route so I'm going to add the link for images here and when we navigate the images we're going to have similar to this one so we going to have form here and the we going to display the images in here okay so let's say artisan make colon Live Wire and the name which I'm going to name it image index hit enter okay now let's open the web routes and register that route so after the route get uh tasks going to say route get images okay and also say slash image so I prefer this one and use the images index class and also say name images. index just here not images plural just image and we need to import the class okay so class imported if we see here and let's save and let's close now to add the link here we need to open the navigation blade so let's open the navigation blade inside the Live Wire resources layouts and here we have this link I'm going to copy this and paste it for the images so just say images. index and also here I'm going to say images or photos what you can like what you like and now we have have images here and if I click right now here we're going to have the error yeah LEL page component layout view not found because it's going to look for components inside the components layouts up but we don't have that and we need to open the image index and specify the layout in here which is layouts. app like this now we can refresh and we have an empty page as I told you I want to have for to upload the image and then here we're going to display the images so let's open the VSS code and here I'm going to define a property so let's say public dollar sign image or you can say a photo or what you like so let's say a photo here say photo okay and now let's save and let's open the blade and here I have prepare the HTML so div and in this div is going to be with with 7 by 12 it's going to we to display the images here 4X 12 I added the form with some classes and a div inside this div a label for upload image and an input type file and then I have used this x primary button and say upload let's save and let's see on the browser now yeah we have something like this here is the form and here we have images let's go here and now first of all I'm going to add in the form the wire submit okay when we click click to that button I want to upload the image and I'm going to call Save method and for the input we're going to bind the photo property okay so let's say wi colon model to be with the photo and we have type file here let's save and let's go and create the save method now in the image index class so here with the say method uh Save which you can name what you like and what we need here is to store the to upload the image and we need to store also in the database in the M creation and that's it but let's open here the storage app public right now we have empty here what I want to do is let's say for example to assign this for photo not like this because I don't want to find that but I want to store this photo and you can uh read more in the LA documentation to store image to upload the image okay so here we have file uploads you just can search and see how we can upload the image so we can use this store and specify the directory also you can use the uh storage put file which is the same as the store also we have this store as and we specify the directory and the file name okay and I'm going to use this store as so let's open the vs code and instead of store I'm going to say store ask and directory is going to be inside the images the file name now I want file name which is going to be so I'm going to say name the B with and not this photo get name we can use the uh laravel get original name so you can can here see here we can use this one but yeah let's just paste for now okay but you can see keep in mind that the get client original name and get client original extension methods are considered unsafe okay we can use the hash name if we want but I'm going to leave it like this and then in here I'm going to save dollar sign name and also we I want to specify the disk so I'm going to say say public and this stor us is going to uh return to us a path so let's say doar sign PA to be equal with this one and then we're going to use the image model and say create the image which is going to be sorry the name which is going to be this name so let's say name and the path we going to be this path okay also in this photo we can add the validation but for now let's leave it like this okay I'm going to open also the database open on with the table plus here and here I have the images which is empty right now and also the storage is empty now let's go and try so here I'm going to refresh and let's choose a file I have here three files open this LEL PNG and we have this error so cannot handle file upload without Livewire with file upload straight so use with file uploads okay and you need to import that is the same we use for with pagination and now let's save and this try so refresh if I open this say upload nothing change now if I come here and refresh as you can see we have uh images and the name is larav PNG and the path is images.png okay now let's open the vs code and in the storage public now we have this images uh let's Zoom it for you just to see we have images directory and here we have the l.png good but also you can see we have inside the app we have this Live Wire dtmp so we can display also the image preview and let's see how we can do that in the project so when we upload the image we can show also that image we are going to upload and as you can see in the live wi TMP we have this file which is uploaded okay and how we can show that if we go to the images image index and I'm going to zoom out now in here or right here I'm going to say or after this one let's say with a check if we have a photo dollar sign photo and just let's add an image with some glasses some with is a glass with uh 18 and 18 and ha the same and I'm going to say also to be around it MD and as a source we can use dollar sign photo and call the temporary URL method okay and let's close this now if I save this uh yeah we need to also close and if here and let's save let's open the browser refresh nothing change here if I choose the image and let's choose Live Wire open here we have the preview of the Live Wire let's choose another one vgs for example and now we have vgs here and upd the vgs let's say upload and we need to clean this but for now let's just see in here we have public images now we have two laravel and vgs but in the TMP directory we have three which is the live L and VJs okay also if I open the table plus and refresh we have two uh images now let's add also validation and when we upload I want to clean this one as well so just work with that so for the error I going to say if we have the error for the photo and let's go the tasks form I'm going to copy this and paste it inside here okay then in the image index and on the public photo we can add the rule and for example I'm going to say I need to this need to be image pipe and maybe Max or of uh 1024 okay we need to import this rule from the Live Wire attributes Rule and first of all here we need to call to assign this validate okay and then as I told you also I want to reset the photo so let's say on sign of this reset reset all not like this just reset and save and see now on the browser if I refresh okay let's say upload and the auto field must be an image let's choose the image and I'm going to choose Live Wire say open so to display here and let's say upload okay now let's see the database if I refresh here we have lar Val pgs and live wire and also in the storage app public images we have L Livewire and VJs okay friends that's it all about this video how to upload images with Livewire which is very easy and also we can uh show a preview of all the image we are going to upload that's it all about this video now if you like such a video don't forget to subscribe to my channel like the video share with your friends and all the best Hello friends Tony here now in this video I want to show you how to upload multiple images at once because right now we just have to choose one file okay so let's open the vs code and I'm going to open the image index class first and here when we have we create a public property for photos I'm going to say plural photos which is going to be equal with an array and now also in the rule we are going to change that so let's uh cut this and I'm going to add an array and I'm going to say photos dot star which mean all in this photo suray and for that I want to apply this uh here that so we don't need just base so I'm going to apply image so for example photos so one is going to be an image and Max of 1024 okay also we need to change this one the save method now because here we just get the name get the path and say image create but because we have more than uh one we have an array of photos now we can say first we can check if uh is not null this array of photos so I'm going to say is not n these photos Okay if that is not know I'm going to make a for each for each these photos as dollar sign photo let's close and then here we we can say this name to be this photo get original name get client original name but I'm not going to use this one now because it's not safe but I'm going to use another one so I'm going to say do sign name to Beal with the dollar sign photo hash name like this and then what to a do sign path to be able with uh photo I'm going to use the same here as we have here so just let's copy this and paste it here and now we have the path what I'm going to do now I'm going to say let's create we can store here the image we can say just like this so cut and paste that one in here and now remove this and is set okay let's save Also let's open the image Dash index and we need to make some changes here so wi model is going to be photos not photo and also we need out multiple layer okay or not here I prefer to be in here so let's say multiple and here we check if we have a photo we are going to display to preview that but because we have more I'm going to check if we have photos I'm going to cut this and make also a for each here dollar sign photos as a single one and display that in a temporary URL okay also uh here I have make a typo not dollar sign photo but now because we have more than one we can say photos do star like this and let's save and let's see on the browser also I'm going to open here and uh let's clean let's delete this temporary and images also I'm going to open the table Plus and delete everything from there and now let's try let's come here and refresh as you can see now we have choose files not choose one or choose files and let's choose two of them and let's say as you can see here is the preview and if I say upload yeah it's clean Let's see we have two images here also we have images in the public and we have we have two images with a harsh name as you can see but of course if I go the table plus and refresh we have also here two images and now the name is has name here and the path is in the Images slash okay so you can see all of them now let's see the if I refresh and just say upload as you can see we don't have any error if I choose another thing here let's go a music and I'm going to choose a M 4 a say upload yeah now we have the photos field must be an image but I want to be required so if I go to the image index and here we need to add another Ru not in here to say for example the record wired and pipe here because it's not going to work so let's try come here and that is not going to work because we this is going to apply in the single one not in the array okay so just let's show you we don't have the error but we can so let's go back we can add another rule here so let's say Rule and I'm going to say just required for example here like this and of course right now it's not going to show anyone so just let me show you that's it because this Rule now is going to apply in photos array which mean in the image index blade we're saying errors in photos. all for a single photo in this array let's cut this and paste it down there and CH I remove the this one and now this is for the required rule which apply in the photos array which mean it's not going to be it's not going to allow to be an empty right okay let's refresh and now if I say uh upload you can see the photos field is required uh of course we can change this so let's delete I think for images also in the table plus and instead of something like this I'm going to create thear sign images variable to be equal with an MD and then here instead of creating here I'm going to say dollar sign images array to be able with and in this array I'm going to say name this name and path to be this path and down there we can make a for each dollar sign images as image and then here use the image create and pass here dollar sign image like this and it's going to work okay so we created this images to be AAL with an empty array and then in this one we added an array with name and Pa for all of the photos so we make a for each and for each of the photos we are going to pass an array in here with name and path and then we make a forage here and say image create now what you prefer now if I save we clean here everything and let's go and try refresh choose the files let's choose this one and this one here okay now let's say upload everything works good come here and refresh yeah we have two uh images and of course if I see in the TMP directory and in the public images we have two images okay friends that's it how we can upload multiple images with the Live Wire now don't forget if you like such a video subscribe to my channel like the video share with your friends and see you in the next one all the best Hello friends Tony here uh in this video I'm going to show you how to download images I'm going to display the images here and I'm going to add the button and if we want we can download that image all right now let's just open thep open the vs code here I am in the Brie blade here and I'm going to open this with a BS code okay good what I want to do is to go to storage up and delete this one and also I'm going to delete the images start from scratch and also I'm going to open the table plus I refresh and delete everything here so we don't have any image in in our database also uploaded here now let's start and work with the image index class so here we have the save method and then we have the render method okay but first of all I'm going to create a computed property so I'm going to say method and this method we going to make a computed so let's say images and what I want here is just to return all the images so let's say return image image model and I'm going to say all not where but all like this and as I told you I want to make this a computed property so let's add computed here and import that from the Live Wire now if we want we can add uh let's say for example persist true okay make it to like this and save now let's go to images and here yeah here we want to display the images let's add the div with some classes here so let's say I'm going to say gre gre calls to and if is empty and up I'm going to say great gos three okay okay and then I'm going to make a for each so let's say for each and now we can use that uh computed property we created okay so images but we have learned how to use computed properties so we can access in the blade by using do assign this object okay and then uh say images as image or what you can what you like but I'm going to say as image okay so here I added a div with some classes and you can see or you can go and find in the GitHub repository and in the image class h36 with 36 around the large and Source it's going to be the image path alt I added the image name but you can add what you like and I use here the primary button and say download okay now let's see let's open the Chrome and I'm going to upload two images just to see here so let's upload this two say upload and as you can see it's not updating the list immediately because we say uh per is the true okay so let's refresh and yeah now we have the images right here but let me also open the vs code and here we need to around the npm around the because as we can see we don't see that in the GD so if I refresh now we have G here H yeah we don't we need to add uh a gap here so let's say Gap to be four and yeah now we have a gap between good as I you when I want to download I want to click here and download the image but right now nothing is going to happen so let's start and work with this in the image index I'm going to create a method so let's say method and I'm going to name it a download and in this one we need to receive the ID of the image and here I'm going to say dollar sign image to be equal with image and I'm going to save now not image index but image model and say find do sign ID and after we find the image we want the download now uh we can use the storage faad for this so let's say return and say storage we need to import that we need to specify the disk in which dis is going to be in the public we have store them so if I open the storage app we have public and then we have images so in the public disk I want to download the image and here we say the ass sign image path like this or we can say let's say right now just do sign image path and let's save good now let's open the image index blade and what we want to do here is when we click uh to this button I want to download that image but to download that we need also to pass the ID okay because here we reive the ID and based on that we find the image and we added the PA so in this button now let's add the wire click and say download the name of the method and as I told you we need to add as ID so let's say image ID like this if I save now and let's try let's go here and refresh let's say download and as you can see it's downloaded good let's go come here and let's go to index we we can specify also the image name so if you don't like to be that one we can say image for example image.png and if I save and come here and refresh because as I told you here is the image name which is a hash name if I say now download so you can see we have here image PNG here and if I open yeah here is the image okay but uh if you don't like this way to use a storage facade we can use let's say here return okay return response and uh the download and also in here we need to specify the path and the image name so if I leave it like this is not going to work but we need to say a storage path okay and specify the path which is uh up SLU slash and we need to concatenate the image path the last side image path like this okay so here we specify the path of the image and we added also the name the same we have done here let's save and let's see in the browser now if I refresh we have two downloads here let's download this one click and yeah we have image one BNG as you can see okay now what if I upload one more image so let's upload laravel open say upload the image is uploaded but it's not showing here immediately we need to refresh and then it's going to show and that's it because we have added in the computed property we added persisted true what we can do is when we upload the image I want to reset that uh computed property so we can unset use set and say to assign this image just like this and now if I save and let's upload one more time for example uh live wire or let's upload Live Wire and VJs again open is going to show and then if I click upload immediately show in here okay friends also we can uh download here as well so click download and yeah we have here download and you can change also the name here if you like okay friends that's it all about this video now if you like such a video don't forget to subscribe to my channel like the video share with your friends and see you in another one all the best Hello friends Stony here now with the images I think I have done so I show you how to upload single one how to upload multiple and how to download them and let's go back the tasks what I want to do here now is uh the edit tasks so I want to add the button and edit tasks and I'm going to use this for to edit task okay now if you got a live wire and uh forms and when we have a form object here we have if you want to use the form this form object for both create and update for you can easily adapt and we have the example but this example sample is not for our project because here as you can see it suggest that if we have update post component and then we say we inject the form object and on Mount we say post and post so we have post and mount because uh we have the ID when we navigate the edit. post and we say this form set post passing the post here and on the save we say this form update and redirect and here is the form a post form and here we inject the post but we add question mark so it's not maybe it's going to be n and we have this method to set a post we accept the post and say this post be able with this one and update the title and the content based on this post and we have the store and update and on the update we just say this post update this all okay but as I told you we have a different approach here because here we have the task index component which renders and then in that component we add the form component and the list component now on the list I want to click a button and then uh listen for that button click on the form component okay and that form we would update the uh Fields so let's start by opening the tasks list tasks uh Dash list and here when we have this uh button groups I'm going to cut this one and I'm going to add deep with a class blex and uh let's say justify between and then I'm going add the div and in this div I'm going to past this one and another div and in this div let's add a button and I'm going to use x uh primary button okay and let's say for now just edit just to see what we have so if I refresh yeah here's the edit button now when we click to this button I want to listen the form component and what we can do is we can say wire Goen click we can call the method in the task list class and then dispatch uh an event on that or we can dispatch directly here so I prefer to dispat directly here so I'm going to say dollar sign thisp and then in here we need to add the name so I'm going to say edit task but also we need to add here the ID of the task and we have the ID of the task because yeah here we have task so let's add also the ID in here and I'm going to say in an object I'm going to add the ID and then say dollar sign task ID okay and then when we listen for this addit task we're going to receive the ID as a argument so let's save this and we are going to listen that in the tasks for class in here so let's create a method I'm going to say method here and you can name it what you like but I'm going to name it edit task and we going to receive the ID because we going to listen for that event here so let's say hash on to listen for the event and the event name is edit task okay so let's open again here so we dispatched edit task event and passing the ID and in the task form now we going to listen for this and here Will receive that ID and what I'm going to do in here first I'm going to get the for I'm going to say doll sign uh task to be a with a task model and use find or find or fail just in case and then I'm going to open also the task form object and what I'm going to do here let's create let's add let's inject the task model so let's say public the same we saw so in the Livewire question mark and say task do assign task so we add here a question mark because this may be not exist import the model task and then down there we to create the method to set a task so let's say here method set task and here we to receive the task I'm going to say task to assign task and then let's say this task to be able with the task we have here also this title to be able with a task title then this slug also the description the status the deadline and uh the priority I think we are okay and let's see yeah we are okay and if I save now on the task form we listen for this on edit uh we listen for the edit task we get the task and what I want to do is say dollar sign this form not update task but I'm but I'm going to say set the task passing the task here okay we call the set task and pass in the task and then we have assign this Tas this one and also the title slug description and so on let's see let's open the browser and refresh if I click here as you can see uh the title is updated so let's click to this one and yeah and the status also is done as you can see but the deadline is not working because we need to say here when we on the deadline we need to say format and we need to format that like this month and day and if I save now and refresh okay let's say it did and yeah now also the deadline is showing here good but when we submit let's see what is going to I'm going to open the tasks form blade and when we submit we are listening here so on the form we say wi submit we're call in the save method in the tasks form component the save is going to say this validate and this form create task and the task form object we have the create task which is going to say Al user tasks create this all but we don't need to create we want to update for that what I'm going to do is let's scroll up and I'm going to add another public property and here I'm going to say dollar sign let's say edit mode the B FS by default and then when we set the the tasks I'm going to say also do assign this edit mode to be true and now uh we can say also here if that has dat mode is true we can say update and change also the form but what I prefer is just work in this create task and the form is going to remain as it is just in here when we say create task because on the tasks form we say save and we call this form create task okay this method in here now I'm going to check if we have that if uh dollar sign this edit mode is true I'm not going to say out user tasks create but I'm I'm going to say dollar sign this task because now the this task is present and I'm going to say update okay and let's say do ass sign this all here good then let's say dollar sign of this and I'm going to call reset the reset all of them and then let's also cut this copy this not cut copy and paste it here and say updated not created so task updated now if this is true but if not I'm going to say else here and then create a new task okay and also here I'm going to say reset the reset all of them and let's save let's go to tasks for and here we say this validate this create task and dispatch the task created and here we don't need this title also we don't need this form res said because we call in here so we dispatch this task created which we listen in the tasks list and what we done here we just unset this T by status okay I think we are good let's come here and refresh let's say I want to edit this one and I'm going to say eded or updated let's say submit yeah we have edited here but uh we have your task create created and why we have that so let's open the tasks form and let scroll up when we display that oh yeah here we hardcoded the task created but we need to display the message here so let's say instead of something like this we can say session success okay let's save and let's come here and refresh again and I going to edit this one and let's say just uh task updated and I'm going to update this is started now here we have only one started as you can see I'm going to say this step done and the date is going to be today and let's say submit now task updated successfully now we have ch down and we have also here task updated and the date is today okay friends that's it all about this video how to edit the task so let's try so this one and let's say just test updated we can also say test updated here and the descript I'm going to copy and just paste it here and let's make this started now we don't have started as you can see also the date is going to be today and let say submit and yeah we have test updated and now we have one started one in progress and one done also the DAT the date updated and the description so that's it all about this video friends now now I hope you enjoy don't forget if you like s a video subscribe to my channel like the video share with your friends and see you in the next one all the best Hello friends Tony here uh in this video I'm going to add a delete button the complete or cow for tasks so we have create edit and delete and also we are showing here as a card I'm going to add the delete right here after the edit so let's open the and need to open the task list so come here and say task Dash list yeah this one and first of all I'm going to remove this if true check this is for uh a previous example so remove that and save and now let's see in the yeah here we have the primary button for the edit and I'm going to cut or copy this sorry and paste down down there change the edit to be delete and let's save come here yeah here's how is going to look we need to change the BG to be red and also the edit let's change also for the edit so let's add BG sorry weit add the class first and say BG uh green 500 and on over we're going to change that be BG green 700 now on the delete we're going to do the same but with a red okay paste that in and change the green to be red here and let's save and let's see in yeah we have something like this over over good now when we delete I don't want the dispatch I want the uh trigger a action in the task list class so I'm going to call uh an action and I'm going to name that action delete and we're going to pass the delete the task ID here so let's say task ID and not percentage but dollar sign task ID like this now let's open the class and create this delete method there so task list class and after this change status let's create a new method with a name delete and this delete is going to receive the ID as a property and here we going to say dollar sign task to be able with a task find ID and then delete that so let's say task delete and let's save let's come here and refresh and let's see we have four tasks for this one and let's say delete and yeah it's deleted as you can see let's delete also this one good now in many cases in many websites you can see when we delete we have a pop up here to confirm the deletion so for that we can do the same in Live Wire very easy just by adding a wire colum confirm sorry confirm like this and then you can say uh are you sure you want to delete this task now if I save and come here let's say delete now we have this are you sure you want to delete this task cancel nothing if I click again and say okay is deleted okay friends one more thing I want to do is let's go to task list and instead of dollar sign ID and find the ID here we can use directly the model so we can say task dollar sign task and remove now this one here just say task deleted okay and now is more simple just let's come here and refresh and say delete cancel delete click okay and now is deleted but as you can see uh this is the remaining one so we need to update also the component of count component and we get the tasks from here from the task list we get so we have tasks by status and we say here persisted that true and what we what we need is we have learned that we need to say on set dollar sign this and the method name is uh tasks by status okay this is a computed property and we say persist the true and now we say do assign this tasks by status like this and let save now let's try let's come here and refresh first okay let's uh create two more tasks and yeah we have two done here now let's click delete okay as you can see now we have only one and if I click also this one say delete and now it's updated okay friends that's it all about this video I hope you enjoy and if you like such a videos don't forget to subscribe to my channel like the video and share with your friends all the best and see you in the next one hello friend friend Stony here in this video I want to show you how we can work with the keyboard shortcuts if you go to actions and here we have listen for specific keys so you can use on of FLW convenient aliases the narrow down key press event listeners the specific key or combination of keys and for example here we have example to perform a search when a user hits enter after typing into search box you can use the wire colon K down enter for example okay so in the input we say wi C down enter and we pass here a method name so let's do that let's copy this and in our project we have a search input and let's open the Search Blade and in the input I'm going to paste that so a wire key down enter search post just we don't have this but I'm going to create so let's save and let's open the method so is the search class and here create the method with that name and what I'm going to do for now just dying dump and saying okay here let's save now let's go to Blade and just if we hit enter we going to call this surf post which is going to D and dump okay let's come here refresh let's go to input and hit enter and we have okay here good you can use also a combination of keys so shift enter for example let's copy and instead of just enter we can do shift enter save and come here and say shift enter we have okay but if we are outside of the input and say shift enter nothing is going to happen but if you want to happen that we need to call the on the window so if we scroll down here we we have below is a list of all the available key modifiers for Livewire shift enter space control command meta and so on and also we have event handler modifiers so Live Wire also includes helpful modifiers to make common event handling task trivial so we have wi key down do prevent or we have do stop and window now if we use this. window it's going to listen for event on the window object so on the window object let's use that in the Search Blade we say shift enter and then let add do window and hit save now just hit shift enter and we are calling this method okay good but if you scroll down and for example in many websites if we click command G it's going to navigate a search or just slash in most cases navigate the search input the same we have also with Livewire if I hit slash we navigate with the input and just type something to search okay or we can uh say comma G the same thing and that what I want to do in this video in our project so let's scroll down and see and I'm going to do that with albine JS so because wi colon uses the Alpine's X on directive under the hood these modifiers are made Available to You by Alpine and let's go to Alpine events documentation and here we have listening for simple events or listening for specific keys and for example key up enter is going to listen for that one or k up shift enter and prevent in the default also here we have submit. prevent and so on let's come here and instead of wi key down we can say add K down and I'm going to say shift or just enter window and now let's create this search post not in the here I'm going to remove from here save close I'm going to initialize the Alpine in this div in the parent div so let's say x data to be and here I'm going to create that method so search post let's copy this and paste it here and we need to receive an event here on Enter key down okay and let's say I'm going to say just console do log passing the event okay let's save let's see on the browser now come here and refresh I'm going to inspect the element go to console and now we need to hit the enter key and as you can see here we have the keyboard event and the code is enter as you can see now if I change that to say slash and save okay and let's say slash here yeah we have a keyboard event and we have the code which is Slash the key is down there and we have also the key code which is is 1 91 and what I want instead of just saying console log I'm going to say I'm going to add an ID in here so let's say ID not if but ID and let's say search uh search input okay and let's copy this search input and I'm going to say document get element by ID and paste that search input here and then in this element I'm going to call the focus method good now let's save and let's see if we type slash on the window object we are going to call this search post and here we say SL post by passing the event here and say document get element by ID search input which we added here the ID and focus and also I'm going to say event prevent default and save and refresh click outside here and just type slash and as you can see we navigate in here and I refresh again and uh I think we have some data here and let's search for this toal so I'm going to hit slash and search for this one okay friends that's it all about uh this video I hope you enjoy and if you like such a video don't forget to subscribe to my channel like the video share with your friends and see you in the next one all the best thank you very much Hello friends Tony here so in the previous video we work with the shortcuts we click the Slash and is focused the input here to search for something we want okay so on the window window object we just click slash and we are focused on the input to search for something now if you go to L documentation you can see here we have a search this is not an input if I click it's going to open a model the search which is powered by alola and uh I want to do something similar in our project so let's close this and in the project here I want to make this a button and we click open the model and there we have a input to search for what we want for that I have opened the tyin UI here and we have an example of a modad which is a free is requirejs as you can see here and I'm going to use this one first let's open the vs code and modify this to make a button okay I'm going to open the search uh blade and here let's add first a parent div and in this parent div I'm going to add a button type is going to be button and add some classes here and also I'm going to add the SVG and a span to say search so just to save some time I paste I have pasted the classes here an SVG and a span with class PR 6 and say search now here is the button and also let's move the logic I'm going to cut this and move it inside the parent D and yeah we need to I'm going for now I'm going to comment this leave only the button just to see how it's going to look so open here and yeah it's looking like this now when we click I want to open a model which I'm going to copy from the tywi UI and this one is free but you have more than this one so I'm going to copy this and come here after the button I'm going to use the live wires uh teleport so I'm going to say teleport and so this is going to move the model at the end of the body and also we need to end the teleport like this and save right now if I open the project the model is going to show as you can see but we want to show this only if we click to the button here to the search so for that what we can do in the parent div here and uh I'm going to remove this one just to save some time I'm not going to add easy on duration and so on but you can do that based on the state it's very easy so let's go up here on the parent I'm going to initialize the Alpine JS X data to be equal with and here I'm without an object and I'm going to create a state show model and this uh Mod Show model state is going to be false by default okay now based on this property here or state what you can call it I want to show and hide the model so in this part deep of the model I'm going to say x show to be able with the show model state or property now save that come here as you can see it's not showing now when we click here I want to change the show mod than the true and then it's going to show the model so here is the button and we can use use the unclick event and when we click I'm going to say show model to be able to true so we change the state the true and then if I click it's going to show when we click outside also I'm going to remove the buttons I don't want to cancel from the button I just want to cancel with a click outside of the model so let's remove buttons where yeah here we have buttons click here and when we click outside I want to close the model if we click here nothing is going to change so for that we what we can do is let's see where we have yeah here we have the BG white which mean this model uh this deep I'm going to add here on click event and I'm going to use the modifier outside outside when we click which mean when we click outside of this T and what we want is to change the state from show model the true the B show model false okay so when you click outside I'm going to say show modal to false and let's refresh if I click outside close if I click inside nothing is going to change very good just now I don't want this to be in the center I want to be up here the same we have in the LEL and also I want to pass there not this text but the input to search for what we want so first let's say here we have a flex Min H full I'm going to remove this one also the items end and the text Center and small items Center and just see now if I save this click yeah we have up here very good now let's remove what we have inside this tip with a BG white so I'm going to remove this and paste the logic here the search so I'm going first uncomment cut and paste it here save to indent this I want to remove now also the relative class in the div here also the width is not going to be 96 and also Max withd large I'm going to see the maker with full because right now so if I leave it like this and see yeah we have the input but I want to be full width so for that I'm going to say f here to take the full width and let's see now yeah now it's okay if we type play for something let's try again why we have that so in yeah it's not going to show because I removed theed class and here we have a absolute so we need to remove also the absolute from here and now let's try as you can see here is the result and if we type something here yeah we have the results here okay now we to remove the search and let's click as you can see uh we need to go here on the input and and click and then type for something what I want is if I open the model I want to this to be Focus for that if you go to Alpine JS and down there we have plugins and we have Focus here and I'm going to install this via CDN I'm going to add this via CDN so copy that and open the we need to open the app blade in the layouts and here I'm going to paste that one so I'm going to add the Alps Focus plugin save close this and with that what we can do is we just can say x trap and pass the state so copy that and paste it in the uh when you show the model past that one and the extra is going to be on the show model state or property now you can see if I refresh and open the model the input is focus and we just can type for something and that's it okay but always has some but is what I want is open also with the keyboard shortcut not just go by going here okay so what we can do is we worked in the previous video with shortcuts and here we have an example so let's copy this one and instead of passing in on the input I want to add this on the button here and maybe add at the end of the button like this okay so I added here but uh we don't have this methods search post and I'm going to change this from search post to say uh handle k down and we need to create now the the method here so let's click copy and here we have the X data after the property here I'm going to create a method which is going to receive the event and what we want to do in here so let's say first indent here what what we want to do is to change the show model state to true and we can access the show model by saying this dot show model to be able with true and let's see and if I type slash yeah it's going to open we can click and type something okay click outside slash again yeah yes but if I want also close with a shortcut cable shortcut for example with Escape right now it's not possible is Possible only with if I click here and what we can do also is to come here and create listen for another keyboard shortcut so we can say for example K down not slash but escape and for example here I'm going to say handle Escape okay down or handle Escape only what you would like with the copy and here let's create that one which this one what is going to do is going this change from True to false and let's say slash type something so okay now if if I click Escape it's not working because we need to say false here okay my bad so slash type something Escape close slash but as you can see uh when we escape the search is remaining here what I want is all so to clean the search so let's open the search class and here we have the property public property search which is initially is an empty string also when I close the model I want that property to be an empty string and how we can access from live from Alpine to Live Wire so we can access from Alpine the Live Wire property is by saying dollar sign wire Dot and the name of the property which is in this case is search and I'm going to say this one is going to be an empty string let's save come here right now I'm going to remove manually and let's open with a keyboard shortcut slash type something for example here okay now if I click Escape as you can see the we have only task so the search is empty let's click slash again not here slash and here a slash and type something Escape good slash type something Escape good type something here Escape very good I think we are okay so let's open Al with a button yeah type something Escape good now uh here we have handle k down/ window or k down escape window but we can just say k down window and here we have an event as you can see going to remove now this one and instead of having two methods we can have only this one and check if the event code is for example to show is Slash and here is the event code for escape for the slash is uh 91 so what we can see here is here if the event key code is double 91 which is for the slash I'm going to say this model to be true or if the event key code is 27 which is uh Escape what we want is to say this model fals so copy and paste change this to bals and also we need to say dollar sign wire do sech to be equal with an empty string and let's save let's come here refresh and let's say slash okay type something here very good now if I click Escape one escape two is going to close and also clean that one that's it all about this video friends how to add a model and how to make a beautiful search here and don't forget to subscribe to my channel like the video share with your friends and see you in the next one all the best thank you very much Hello friends Tony here uh this video is going to be the last one about this tutorial so the Live Wire version 3 so let's go and register what we have done so far we have the images so we can upload image when we upload the image is going to preview first and then we can upload and also we can download the image okay then we have tasks uh first of all here I don't want to have this if we don't have any tasks and also if we don't have any tasks I want to show a heading here so for example not tasks for that let's open the I think the tasks uh list Lade and yeah here before we do we render this I'm going to check if we have this tasks status and we have a count to be greater than zero then I'm going to render otherwise is not going to show and the same thing I'm going to do for tasks so let's copy this and say uh if these tasks count to be greater than zero I'm going to show them otherwise so let's say else here I'm going to Let's this let's copy this just the save time and say end if here that close the end if and here I'm with to display a h one with some classes so let's say class to be text to Excel and also text let's give it a semi bold and also a color text Indigo 500 and I'm going to say no tasks okay now let's save and let's see let's come here and refresh yeah we have no tasks and we done have that uh diff now let's go and create a task so let's create a task one okay another one and let's create another one good so we can create a task we can delete the task and before we delete we have this popup are you sure you want to delete this task we can cancel or we can proce and delete that we can edit a task so let's edit let's say from started the status are changed in progress and let's change the deadline today I'm going to submit and task updated successfully and also updated here one more thing I want to do is if I click edit and for example I changed my mind and I want to create a new one right now we just need to refresh and then we can create so instead of refreshing with uh mouse or with command r i want to have a button here to refresh only this component so let's open let's close this and let's open the com sorry the tasks for blade and here when you have a the submit I'm going to copy and duplicate this button to have a refresh button okay so let's copy this and duplicate I don't need a loading here let's remove just let's say refresh or something like this what you like type is going to be button and what I want is to say wire click and because we are in the task form component but when we add the edit that is going to populate the tasks properties in the form I'm going to create a method here so when me un click on this button I'm going to create a method and say refresh and let's create now this method in the tasks form component class save this first and let's open the tasks form not task form or object because this is extending a form but the tasks form which extends the component okay make sure with that and let's create that method so I'm going to create all right here um new method and say refresh and what this is going to do is just going to say dollar assign this for and I want to reset everything on that for and let's save so here we have now we need to somehow fix this to save flex and Space X of three or four let's say six maybe save come here and refresh okay uh maybe let's set of Space six I'm going to say uh justify between and I'm going to change the color for this one from Indigo I'm going to say slate and not slate 500 but from 200 and on over 300 uh not like this maybe four and five here yeah something like this so now if I click edit uh click edit okay I want to refresh we can refresh and now we can create a new one submit and yeah it's created new one okay one more thing here is now when I change the status right here so let's say uh I want to make this started it's changed but here is not updating so we need to refresh and we need to fix also that one so let's close close and let's open the tasks list so what we have done is to change the status and when we change the status I want to unset this tasks by status okay and let's save come here and refresh okay now we have 111 and I want to make uh this in progress also so we have done but I want to make in progress and as you can see updated immediately okay friends that's it all about this tutorial and this video if you like such tutorials and such videos don't forget to subscribe to my channel like the video share with your friends and see you in the next one all the best thank you very much

Channel: Code With Tony

Views: 15,783

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel 10, laravel filament, livewire 3, livewire v3, laravel livewire v3, laravel livewire v3 tutorial, learn livewire v3, laravel livewire full course, laravel livewire full tutorial, tutorial, course, code with tony, Laravel Livewire v3 Tutorial, laravel for beginners, laravel livewire for beginners, livewire installation, livewire multiple file uploads

Id: 2tOgn2HydKE

Length: 259min 38sec (15578 seconds)

Published: Mon Nov 27 2023