Laravel Livewire Tutorial - Full Course 2.5 Hours (2020)

[Music] you want to learn okay I'm going to create an amazing course on leaven legwear and you will be not going to find this kind of course on the entire youtube or even on an entire internet this course is going to have so much fun because we are going to unpack all the magic that packed inside the larval area and we will create a single page application with the use of authentication including image and lots and lots of things so what you are waiting for just get started with this lemon/lime for a course and if what you need to do you need to give thumbs up lots of thumbs up like head like button and comment your views about level livewire what feature do you like and do you even like it or not but everything you need to comment below and what you want to learn next that also welcome here so let's start the journey of life wire but remember like button hit hit like button what we are going to cover in this level livewire course the most important the exciting thing we are going to create is single page application without writing javascript yes we will not going to write JavaScript to create the single page application effect then let's see what we will do in each of souls first I will give the introduction about what we are going to create then we will have a quick start like installing setting up things and the third one is super important because then even good deep dive and see how actually larval life where works behind the scene and then we will talk about wire click event so that whenever I click on something then how we can handle on the PHP side next is the properties and action of livewire then there are various lifecycle events of livewire components so we will talk about the mount event and then inside that mount we will fetch the data from the database and and after that people going to store something into the database using laravel livewire most exciting part is the real-time validation and passing data to component then we will see how we can use the normal flash message the session messages of level into the livewire component also we will going to see the pigeon nation system and how we can create the pagination which is similar to lateral but how we can use that in life fire then because normal the custom pagination links inside wearable uses bootstrap and we will use the Tailwind CSS so we need to create the custom pagination links the most amazing theme of this course is the image uploading we will use the event emitting and listening of component of this level livewire to create the uploading image system and you will see that in that demo also then we will store the images using the intervention package of PHP then we will see how we can connect the comment and support tickets then really going to create the single page application using turbo links so what turbolinks is you will need to watch the sixteenth episode then we will see how we can create the registration registering user logging in logging out and finally using the middleware so much of these things are available for level livewire so let's see what we are going to create in this livewire learning livewire is not so easy because it has some weird features which is combining PHP and level and learning livewire with the use of counter application or just simple to do application is not enough because it has extensive documentation and everything is so awesome that you need a full-fledged application let me take you what we are going to create with level livewire and before moving forward I will you that if you like this then you need to give it thumbs up and comment your views about life why because now I'm going to introduce you with a single page application without writing any java script so I'm on the login page if I click on register you can see I'm instantly on the register and I can switch between the pages without refreshing my page that's an amazing thing without writing JavaScript everything is on and all PHP ok so yes I can simply log in and also I have the validations so if I write it without refreshing I am redirected to the home page and we have a middleware so now because I am logged in I can not move to the login page similarly we have a very nice application where we are creating a support ticket system where we have these tickets tickets like we have some problem and then some conversation so when we click on any ticket we have the comments related to that ticket particularly so you can see we are refreshing we are changing the comments we are getting the comment for particular ticket without refreshing the page everything is so awesome and because we have these comments and we can have a simple page nation which is custom pagination actually and we can easily navigate between the pages and these are very very nice thing one more thing is you can also upload the image this is the most powerful thing I have created for this project and with the use of this system you can preview the image before uploading that and that's good and we can simply say with image and now if I click on add it's added and because we are on the second page we can go to the first page we have this width image 4 seconds ago that's an amazing feature also you can see we have a real time validation and yeah you can see it says the new comment field is required because now it is empty what if I give a very long text and you can see now we have a real-time validation which says if comment should not be greater than 255 characters and that's why if you give correct thing no error click on add we have this one that's cool and this is not enough because we have lots of magic tools inside this level live wire so we can simply click on this cardigan to remove it and it's actually removed from the database so now you can see if I even if I really refresh the page it is persisting and this means it's coming from the database everything is there so you have seen that if I add anything we also have this notification this is also from the level livewire agree everything is super super amazing thing and what we have covered I think we have covered all of these things the essential component feature UI initials JavaScript - single page application everything we have covered if you want to get more of the level livewire you can check out too in-depth level course dot-com because now this course is getting very very awesome and I am going to add this project to in-depth level course which is the extension of this one which means you will get more on this project and you will have fun so let's now really start learning level livewire to get started with level like fire we have a fresh installation of level and specifically its level seven but level live work with any version of level you just need to install it using this composer command so let's just say composer require and using the power of four video editing let's complete it so now the package is installed and you can see on our composer dot Jason we are having this level livewire pretty cool next step is we need to include this styles and scripts in your main blade file and in the main blade file that means on the resources view and here we have a welcome so I will first show you that if I open the server so PHP artisan serve localhost 8000 nice larval home page which is coming because of this plate let's clean up everything and create a new one and I call it live wire and we need to include this is that this style like here and this script which should go just above the closing of this body tag next we can create a simple counter component inside this level live wire and we can simply create this by running this command and for now just to say no and this command has created one class one view and this class is inside my app HTTP live wire counter so every class or you can say component of level live wire is having this render function inside this render function we are returning some view and this view is a component view so it is live wire counter let's open life by a counter which is inside resources views live wire counter and it just say nothing so I can simply say I am counter component and next we need to use this component in our blade file which is welcome dot blade file so counter dot blade what will be is a live wire component and to include any component in our main page which is actually returning we can simply say live wire and then counter like this so now if I go refresh this page you can see we have this I am counter component that's amazing and now let's do something crazy yeah this should be crazy so I can say button and button is having a plus sign and this button is having a minus sign so let's go and yeah we have plus n minus then we have to give here like h1 tag and inside I will say just 1 so this should be like here so 1 and plus minus 1 and let's just style this to make it text-align:center to make this at the center and we have everything at the center now assume it for you what I need when I click here I should increment this and when I clicked on the - I should decrease on PHP this is very difficult task because every time we need to create a form that should increment it and decrement it and if we need to hold the number somewhere but because we are on level live wire everything is easy with the use of this wire click event on this wire click event is going to trigger a increment function and this function we will create inside our component class and this is a PHP class and it is interesting that we are binding the click event the JavaScript part from our PHP class okay so let's create a function called increment and here I will simply say die dump of anything to show you that when we click here it's not triggering this function now refresh this page and click and you can see we have some error and it's not actually error it's a diadem and this is actually the level livewire way of showing you that I don't think yeah so we have this and you can see which means it is triggering some function on our so we are connecting javascript with larval in just few second without writing a single word of JavaScript that's cool this means what we can do next we can do the same thing for this button but this time this should be decrement and let's create a one more function called decrement and that's good and we know that we'll also going to trigger okay so next we need some data here and that means the variable so what you will think that let's create a public count is equal to 1 and because this is a simple view and remember in a view we can simply pass any variable just like this so donor this arrow count okay so that should be available here and now I can use this blade way of showing or echoing any variable now refresh and yeah this is 1 and if I change this to 3 you can see it is 3 now what I need actually it should be automatically available I don't have to pass it and this is again the power of level live wire any variable defined publicly is available in that particular blade file of that component so this component is returning this blade file which is counted or blade and any variable defined publicly is available here so you can see now we are not passing any variable to this view which is a component called counter still it's going to work now let's create the real magic we need to click and we will increment it so that's very easy because here in this we are on the PHP and we have access to this dot count and we can simply say this should be equal to this dot this arrow count plus 1 oh let's use the shorthand plus plus and this means it should work so plus yeah you can see it's working and let's go on this and say - - and it should decrement yeah it is decrementing it is incrementing whoa hope we have done a first level livewire thing but how this is going to work let's deep dive into the level livewire actually this is all about javascript you can see we have this simple network tab and when i refresh let's just refresh and when I click on this plus you can see it is incremented to four but now we have a Ajax request we are giving an AJAX request and this as a request is two level livewire or simply live via message counter and to show you I will go to level and I will say PHP artisan route list in this route list you can see at last we have a livewire message and the name and it is exactly the same livewire message and then the counter and it is having a curly braces this means this can this name can be a simple dynamic thing that should go to live wire connection a she TP connection handler so let's let's check this file so HTTP connection handle and that should go and let's go here we have a invoke method that means it is already going to trigger if we are not defining anything and now its handling the request from the request it's getting everything like action queue the name children data ID checksum error everything okay so we have this route and we are handling this route here so you can see from this route it is handling and it is sending the data and on the request request payload has action queue which is required here you can see action queue then name children so we have name here then we have a children which is not available for now then with the data and data is the previous data we have on our component so whenever I click once more you can see now it has become 5 and now we also have one more as X request in this ethics request we have a previous data which is 4 and we have this checksum and checksum is super important why because it ensured that no one has tampered with your data you are sending from this edge X request of larval live wire we also have some ID and everything is here and let's now see what happened from this handle so when you send an ethics request this will give all these data to the level and level handles it here inside the HTTP connection handler which we got from this post request and this controller name and then we have a invoke method that ultimately triggered which is handling from this request request is having all these things let's open this handle which is inside this extended class which is connection Handler in this connection handler we have this handled method that accepting the payload payload is exactly all these things we are sending then the most important thing is for each action queue you can see we are sending action queue so we just have one here and we are looping through action queues so we have this action queues then we say process the message so what message we have given we need to process it how we can process we define that type so you can see on this action queue we have a first one and we are defining type which is called method so we are saying we are going to call some method and next you can see this process message is a function inside the same class so here we have and here we have which is now having a switch case and it says whenever you say call a method whenever the type of action queue is call method it is going to call a method from that instance and where is the instance instance coming from this hydrate part and it is actually the real class you are having the component class you are having so in this class we are calling some method so it says call method which method whatever method we have defined from the data so we have a payload and Method we are defining increment so it says call a method called increment with some parameter if we have the parameter so in our case we don't have that so we are calling the parameter with this class function name and that is increment and this is how we call increment let's now quickly see how we can call the decrement it's going to be easy now because now we are just going to hit this - we have this counter it's giving all these details we have a previous data but the most important thing is action queue it go to live by our message counter live wire message counter is a route which goes inside this controller or just PHP class this is the HTTP connection handler which is handling this request this handle method is actually having a very important function which is called process message process message is calling this call method which is going to call the method which we have defined here which actually love a live wire here define which is decrement and that goes inside this and call it decrement cool but how it returns the things on the preview of this you can see we are having the checksum and this checksum and the stick some is different because this is just for request and this checksum is for response then we have a new data which is for you can see now we have four here and then the most important thing is we have a Dom and all the Dom is now replaced here you can see we have a button h4 h1 with with a for value and button and then div and that is coming here we can see we have this thing when we done this part we create a new Dom DOM is an instance output and then it finally returned it with some responses and using some fluent things we don't have to go too deep in that so this is how there are live wire works on level and this is how the magic happens and let's continue the journey of level live fire and now let's work on this kind of comment section with a level live wire when I type something here and then hit on this Add button I need to add this comment into the comment list we have below let's see how we are going to do this so firstly this is created with Kelvin TSS and this is all about the stylings and you will get on the github repo everything is available there then what I'm going to do next first you can see we have this which is actually hard-coded here isn't it cool we can get this from the level end and that we can loop over all the comments we have so I have already created a component called comments by using this come on and you already know how to create this and that has created two file which is live wire comments and which on which I have this comment section and associated the live wire means dot PHP file where we are just returning this blade file which is a component and I have used this inside my welcome dot blade just like previously we have a larval livewire or simply at livewire comments one more thing if you are on level 7 you can just use this and instead of this you can simply say comments and this is the name of your component and that should go like this it's not working because now I need to say live wire and it's a live wire component and that's good similarly you can also do here live wire : script so if scripts like this and live wire if tiles very nice and now everything is working as it was so let's move everything the comments on our comments dot PHP component so let's create a public variable called comments and here inside this I will add my comments so this is an array array of various comments so first we have the comment body so body will be the same we have here so we can copy it from there and paste it then we have created at that goes three made ago then at last we have the Creator or the user who has created so let's say sarthak and then we can because this is a public variable it is easily available on our livewire component that means the blade so first let's remove everything so here we have and here we have so I have removed everything so name is gone time is gone everything is gone and now I can simply use for each loop and inside that I can say comments as comment and let's close the forage and for each loop then I can inst in the place of name I can say comment and we have a creator and that should go like this so now we have a sort of here then we just need to add one more for comment created at and finally comment body very nice we have done that and now the next task is when I click on this Add button I need to append a new comment into this list of the comments and because all the comments are coming from the level end you can see we have this list of the comment we just need to add one more comment into this array and that we know because we said we need to click that means there should be some click event so wire click and I can say add comment and this comment the add comment is a function or a method on our comment dot PHP component so here anywhere you can create a public function called add comment and here I can simply say this arrow comments then adding a new comment and I for now just copy everything from there paste it like this call it new one one minute ago and new comment okay so let's try this so when we click on this add so there is a wire click event that is simply a click event and then that will trigger add comment on component of comments to our issue file ok let's refresh and click you who you can see it's now adding it isn't it cool we can add it at the first so then you just need to say arrey unchipped and in that you can say the area is comments and the data is this one like here in that case we don't need this that's great refresh and now it's adding at the center okay so next what we need we need to add whatever we type here that will go into the comment not the hard-coded thing for now we can assume that there's a lot in user called bit fumes at I milk is always one minute and let's try this so we need to bind the data of this input field so let's create a new variable and again that should be a public called new comment and this is just a simple variable and we are going to bind this new comment with this input field and wire model is the way to bind it we can say we have a wire model of new comment so every time the value of input field is changed you have a new comment changing and that should reflect here for just now to show you how this is going to work I can just echo out this hair just above the input field so refresh it is here and now I can say hi I am new comment you can see it is now echoing out and every time I hit some new keyword here inside this you can see we are calling an edge X request that should be great and next we need to move this comment into the comment list so because now we have the new comment into the new comment variable we can simply push it here on this body part so body is this arrow new comment like this and we can also use carbon here because this is a basically level so we can use anything here so that should be great and then diff for humans cool let's try this refresh it and live wire is really awesome click on it and you can see it is saying once again a go live where it's really awesome and everything is without any refresh because it's doing all the JavaScript ejects everything by its own next task is v2 clear this one when we add the new comment so it's very easy actually when we have done this we just need to say this new comment is equal to empty that's great and once again livewire is really really awesome and a smiley for this click and yes it is now empty and you can see we have this and this is super super great thing with the use of level livewire one problem you may face or you feel like it is not good is as soon as you type here how many number of key down you have that should reflect the number of Ajax requests if you type little slowly even if a spacebar and whatever you call you have a 18 19 request just for writing this isn't it bad thing yeah but we can have a tool to handle this also in level livewire let's go to the documentation on this properties part you can see if I code data binding is there we are binding the data and that's why it is hitting the edge X and every time you want to have the edge X a quest only after half a second then you can say we're model dot d bounce dot the time and if you are not giving any time it will be 150 by default so let's use it and Here I am so we have this input field in this input field we are having this wire model and in this wire model I can simply say wire model dot and that shape say the deep owns the bounds dot 500 milliseconds okay let's try once more refresh this and I can say as soon as you can see now it's giving the request only after 500 millisecond after 500 millisecond and if I see you can have the request just five requests by writing all these and if I type very fast and when I stop writing then after 500 millisecond it is giving a single request that's good that's very good actually okay one more thing is there you can see we are giving this for having a 500 millisecond but you can also define lazy updating lazy updating is when input box lost its focus then only it's going to give the edge X request let me show this and we just need to say wire model Lizzie so now instead of width D bounds 500 I can say lazy cool go here refresh the page and now I can say as soon as I lost the focus and you have seen that and stopped typing I'm not writing anything and still it's not giving any edge X request as soon as I click outside you can see now we have a text request and I think this is the very very nice thing because now let's refresh once more and I can say I am new comment and what if I click here so it should give a one request to set it and then another request to add it into the new list and click the outside so I am new comment and click on add so we have to request one to set the data of this to new comment variable and then second is to really add it and that's exactly working and that is very very nice now we have solved two problem one more is that isn't it cool if we have a forum instead of this just button and input field so we can convert this div into form and then we have a wire click of this add button instead of that we can simply say wire submit and then I can say add comment and now I can remove this add here and I can call this button as a type of submit so it's going to submit the form let's see what's going to happen I'm not writing anything and I click on add but it has refreshed the page it has actually submit the form we need to prevent the submission because we are calling with a Jaques request we use live wire once again if you can see here where is that I can just type submit' it's not available here on the action yeah on the action you can find submit and we have a wire submit also you can say wire submit dot prevent so it prevent its default action ok so we have this wire submit then add comment then I can say wire submit dot prevent and if you are familiar with vgs you feel these things are familiar cool so now if i go and if i click on add you can see it's added empty list but i can provide and if I say here if this dot new command is empty then just return do nothing and I can close this line here okay let's try this once more refresh add it it's not doing anything that's great but I type and I can say after converting to form click and yep that comment is now added Wow very nice this means because this is the form I can use the enter instead of adding on this so I can say I am new comment let's try this hit enter and yeah I am new comment is added here that's again a very very nice thing to create something which is closer to level we need to have the model then we have a migration and doing some real kind of stops with level livewire so for that I have created the model comment and I have the comment in migration also so the migration is holding two important thing which is body and a user ID because we have the user ID so we need relationship to the user so on this comment model this is a model remember this is a model and I have created a relationship which is getting the user and I call this relationship as a creator if you want you can use a user in that case you don't have to specify the column name but I like to have a creator here that's cool and what I did behind the scene also I have migrated and you can see I have 0 comments here and one user so one user is all talk so let's use the tinkle so I can say PHP artisan tinker and then I can create a new comment so I can create a comment by using comment colon colon create with the body of this is first comment and the user ID of one because have a user with the idea of one if I now hit enter you can see it says now one comment is created and that should reflect in our database yeah this is first comment you can also find comment by first ID so let's clear it and okay so that's ID of three and then we can also find the creator like here so what happened we want to show that comment from the database into this card okay so now I will come back to our level livewire component which is comments dot PHP in this comment dot PHP I will going to create a new mounted function so now let's go here and here we have a mounted function so our method you call whatever you want to call so mounted method is as an incidence it will call as soon as the component mounts so here anywhere you can create a simple method called mount and in this mount let's say I will add some value to the new comment so I can say this new comment is I am from mounted function like this now if i refresh this you can see it is now filled with this text which I have defined here this proof that mount works as soon as the component loads but we don't want to do this here we want to have the data from the database okay so remember this is a component which is actually used inside are welcome dot blade dot PHP in this welcome Todd blade dot PHP here we have a livewire comments now we can pass some prop just like a bujji's prop here just like that we can pass the props so I can fake comments is some comments and that should be like here so comments if I do this this means this is a prop and this is the value of the prop now if i refresh this page it's not affecting anything because now I can catch dis comments I have here here so I can say comments or whatever you want to call and then I can say this dot new comment is equal to whatever the comments we've passed from there reload this page and now you can see we have a comments and I can say I am props coming from welcome page lots of text and that reflect here this means whatever we pass here we can catch that thing in our mount function as a parameter here and then we can use that whatever the way we want okay so instead of just passing this long string I really want to pass the comments from the database in that case what I can do I can go to the web dot PHP file and here we are having this welcome view and I can grab all the comments so I can say comments is equal to comment all and then I can use the compact method to pass the comments and this means now this comments variable is available here and now I can say dollar comments when I say dollar comment this means we are having the comment data whatever we get from this comment all now let's die dumped comments we get and refresh now it says access denied okay so I have actually connected the database so if I open dot in with file I have connected but I have not restarted the so so restart the server and then refresh once more and this time it says dollar comments hmm it's having some problem let's so search here how I can okay so I need to bind it so remember you GS if you know you need to say this : that make it bind it and make it dynamic so when you say : and then the prop name I call it problem so prop name and then the comment then it's going to render it and then pass it okay now refresh not this refresh this one and yeah you can see now we have a collection and we are getting this collection because we are diadem on this mount Wow is it going to be a great things because we have this comments this is the public one this is the public comments and this one is the comment we are getting from the Welcome page okay so I can call it all comments or initial comment yeah this is a good name so initial comment I call it and I call it initial comment I call it initial comment and now I will fill dis comments with the initial comments and then I can simply remove these things like here now every data is coming from the welcome page and now if i refresh it has all these things we just need to render it correctly so let's open comment dot blade dot PHP and because this is now collection instead of doing this I can say comment creator arrow name because these are object or collection then I can say like this created at and this is now become the body wow this is great and you can define it here because once more this everything is a real PHP so you can use diff for humans here and refresh and yes six minutes ago cool Wow super super nice thing so we have used this mount and we have passed the value from here to here okay if you don't want to pass the data from this welcome page one thing more you can do instead of having this comment from here and passing it here you can use the same like here so initial comments will be comment all and I am not accepting anything and I need to import this one ok so comment all and then we are initializing it and have all the comments which are getting from the database let's refresh and still it's working fine because now we are querying on the mount event so now our component is clean welcome page is clean and we don't have to pass anything on the Welcome page now it's up to you whether you want to pass the data from here or in some case you may want to pass or you can just write it like this now things are becoming interesting you know why because now we need to add the new comment directly into the database but this is not going to work so I can say this is not working and let's add yeah you can see it's having some problem it says unshipped accepted won't we any we are giving object hmm so we have some problem now what we need to do we can firstly create a new comment here when we add a comment okay so first I can say comment then create and then creating with the body of we know this arrow comments then we need to give the user ID and that should be defaulted to one for now this will give the new comment that's a new comment like this and then we have this thing but now instead of this have this unshipped array we don't want to use this unshipped array we just want to push this comments and because this comments is now a collection collection of calm comment all so we need to use this comment and we can simply arrow this arrow comments arrow push because now we know this is our collection and pushing our new comment and after that new comment should be I think there is a conflict conflict with this new comment and this new comment so I can say instead of new comment I can say created comment and created comment will go like here and we'll fill empty out the new comment that is coming from the input field let's try this one and refresh once more and this should work and click still it's having problem it says most collection must be a string value that error is coming okay because of this this should be the new comment bodies should be the new comment okay so new command we have problem it says undefined variable and that should be this arrow new comment and make it in line and next delete this one so that we can have a fresh only one so now one is there this should and this so this this should should work click and yeah it is that it but again it's added at the last we can simply make it like repend prepend and let's try once more because now it is added here and we can say with prepend is it repent going to work yeah it is working yeah that's good when more thing we can sort it like begins latest and then get so now we have the latest one at the first Wow cool next we we can see we have here and anyone can write anything like I can grab this much text and user can give any amount of text like you can see I am tasting tasting tasting and this is a long list of text that should be a that could be a spam so we need to validate things and let's validate in real-time or using level livewire only let's work on the validation using level like wire here we have two problem with this input field one is anyone can give all the long text and it is still going to save it next we can submit the empty form and you can see we have actually prevented by just giving this if statement this is working but still it's not giving any feedback so why not use the validation and if I send an empty form then it should return some error just like a normal validation yeah so normal lateral validation is going to work inside any component of livewire so here also and instead of this I can just say this validate and the field you have here which is the new comment which we will set so new comment I can say this is required okay so we have done that and we have this new comment which is wired with the Lazy new comment and now if I try to hit add you can see nothing is happening although if I can open the network tab you can see we are giving a request but it is not doing anything but what we need yeah this means validation is working it is not going outside this validation or after this validation and it has stopped here that's good but we need to show error also okay so we can simply use the blade directive of act error to show the error so let us copy this and go on this and just above the form I can show it and I can make it text read 500 and text extra small so whenever we have a new comment then I can show the message for that particular error otherwise not okay that's good go here and click on add now you can see we are giving this post request with data previous data and on the action we can see we have method of add comment but we are not sending anything new comment is not because new comment is null it is giving us the result with this kind of this kind of comment which is actually a normal level command so here we can find error back and inside error bag we have a new comment and that new comment field is required in that way we are having this error cool but you know with this level livewire we have a real-time validation also that's super easy and that actually works whenever we update the field so whenever we type something here and hit enter it's giving a request but what if you need actually if I remove this lazy part from here so it was going to give Ajax requests every keystroke so send Ajax and I need to refresh the page ok so send Ajax and you can see it's giving 6 lectures request or edge exit question here and this is going to make our validation real-time because now every time we have something on the update something some update on the component then this updated hook is going to trigger there are many hooks lifecycle hooks for the components which is mount we have already used the mound then hydrated updating updating particular field then updated that means it is updating done and the finally updated for everything ok so in our real-time validation we where in a real-time validation we can use this updated let's use it just above add comment we can have this and we need to use the same validation and the same validation will be like here it is required that means now whenever I make changes in our form input field it will send access requests and that will validate so this should be not going to give because as soon as I type it's filling it but as soon as I hit backspace and if I am not giving anything you can see it has given the simple error which is because of this edge EXA quest and again if you want to limit the actual edge X request you can simply use dot d bounds bounds dot 500 milliseconds so every 500 millisecond it's going to send the request so now get back and yeah so just three adjectives but lots of keystrokes next big thing I need to show you is what if I give big text and we need to prevent that this should not be the case so again we have the validation and we can add max of two five five let's say this will be the case refresh this page paste it and try to add it says new comment may not be greater than 255 and let's make this also a real time because now I can make this same max to 5/5 here refresh the page and then as soon as I pissed and you can see as soon as I paste it it's giving error and then I try to remove some and yeah there is no error and if I cross the limit of 255 like here oh I can cross I need to give long text and yeah I crossed it so now we have the real-time validation error and every time we hit a keystroke we are going to send a Axios request with the data it's normal thing but because we have this on the updated field we are getting this validation now let's work on the delete of any comment so we have this font awesome cross icon that should be used to delete and what I did I just have the font awesome CDN on our welcome dot blade and at the head section of welcome later PHP and then I have this icon and I have justify between so that this div which hold the name and the time with go on the left and this icon will go on the right side just like here we have and that is because of justify between with the Flex cool so when we click on this we to delete it that means we need a wire click event why our click and we need to say I'm going to remove okay so as we know we need to create a function in our component so let's create a function called remove but then I need to tell our component that which which comment I need to delete for that we need some reference to the comment that means we need the comment ID okay so what if I just passed the ID from here so I can say comment arrow ID is it going to work let's try if i refresh this page and open the console and if I try to click you can see it has some error and that is because we need to now render this and you know to render any variable inside blade we just need this curly braces that's cool and now to show you that this is getting here so I can just died um comment ID like this okay so let's hit and then you can see we have done nine here and once more and yeah nine is there okay this is because we are passing the ID so we can simply find the comment so I can say comment is equal to comment and find with comment ID we are getting and now let's say comment and once again click and yes we are getting that and everything is there cool we just need to delete this so we know command delete and just after delete we need to remove from the list of comments we have ok before really deleting the comment from the database let me show you how we can delete from the comments list we have or collection we have so this comments is equal to this comments because this is a collection of level so we can use the where condition and we can say not equal to the comment ID so comment ID is not equal to the given comment ID so now refresh this and click and yeah we have this so why not comment and I dumped also and now you can see we can easily remove it one more easy way is you can simply say accept this ID wow that's cool refresh and now we can still able to delete that so we can delete from the database like here then we update the collection we have and that's it so let's go and click it's deleted and if i refresh it's really deleted wow that's very nice so we have deleted all these we just have three good let's move forward with the level live wire since every time you create a new command yes it is created and added but you can see we don't get any information like any status notification kind of thing let's work on that and for this level live wire has flash messages for you and this is incredibly easy and if you are familiar with level if you are familiar with flash message it's going to be super super easy what you - do you just need to create this flash session how let's see so I will go to comments dot PHP file which is the component we have for our component is that means comment component and here is the PHP class and when we are adding the commit just after that we can simply use the session helper and create a flash message and the name of the messages message and I can say comment added successfully and whether smiley so smile like this okay so this is added and how we can show that message okay so to show that message we can simply use the normal level way of showing anything so if session has message then show that message so let's copy this from here and again it's inside the documentation of level livewire so go to comment dot blade dot PHP and anywhere so there will be good so what happened here I have missed something yeah I have missed the semicolon from there and now it's good I can show the message above this C text box so we have a text box that means the form and above the form we can create this here okay so we have done that and let's style it properly so with the padding of three background of green let's say 300 and then text green of four seven hundred and that's it I think let's go and refresh this page and I will add another comment click and yeah you can see command added successfully let's do one thing let's make it rounded and eight hundred and a little shadow this would be great cool so now we can say third one we add and yeah it's very very nice let's do the same thing when we are going to delete any comment okay so if I delete it yet it is deleted but there is no session message okay so the same thing goes just after we have done everything once again it's a message and this is command deleted successfully and with a different image at this time so once again a smiley but like simple smiley this one cool so let's go and click and yeah come and delete it successfully and if you are wondering how I get this emoji then I have actually installed an emoji extension in our vs code that is called emoji and you can also install it and have fun with this so you have seen that it's become super easy when we can add any flash message and that's the power of using our level live wire they have lots of comments here isn't it cool if we have the pagination here and because we are using level live wire everything becomes so easy pagination data on the level life wire we have this and if you are familiar with level then it's again going to be super super easy because this level live wire uses basic level pagination system but here we are showing all the comments from this comments variable and on the mount function we are initializing the values of the comments let's see what's going to happen when we change it to pigeon eight and let's for now just have a pagination of two items refresh and now we get error this error is saying you don't have some numeric string array null or boolean inside this comment because this paginate is not us any any one of these things it's just a level stuff so what we can do we can remove this so I just comment it and I comment this comments and then I will copy this because now I am going to pass this data from our view so we have this view and I can say comments is this one and remember because you are having this public variable it's very important to comment this or to remove this comments variable otherwise this will not going to work so let's see what's going to happen refresh and now we just have to and let me show you if we if you also have a variable with the same name like here we have a comment and we are passing comment here so larval life I will not take care about this data you are passing so now you can see it is still giving error because this comment doesn't have any value mounted is empty okay so this means we need to remove this and we also need to remove the mount method because now we don't need that refresh this page and yes we have this but what about the pagination links once again it's super easy same level stuffs posts links so because we now have a comments so not posts so just after for each loop we have we can say comments and link and links actually and remember this variable name should exactly match whatever you are passing or whatever you are looping through that should be that must be actually seem cool reload this page and now we have the pagination links yay every link is there so now if I click on do you can see it's two three it's three four it's four but we have a problem here the problem here is you can see I just keep your eye on the tab you can see when I click on - it's actually reloading the page this we don't want this so now actually whenever you are using this pagination system you need to use this trait called with pagination so let's go here on this comments' class and use pagination and use it at the top here we have and then let's go refresh the page and now we have a previous and next and if I click on next there is no refresh of the page and it's working absolutely fine now let's dive into the width pagination great we have so this trait has some functions and by default the page is 1 so when you are not doing anything it's the first page then we have three important functions one is reset another is the next page and the previous page and as you know the previous page - one next page +1 go to page you can directly go so the four important one and the reset one is resetting to the first page okay so we have this pagination views so you can see these pagination links are not good looking things and we can customize this using this pagination views function and we will see how we can do that and then some other things related to the pagination initializing with pagination actually okay so that's good and let's not try to create a new comment because now remember on our head comment we are validating we are creating storing into the database and then we are preparing to the comments variable we had but now we don't have this so instead we need to remove it but yes you can see if I try to create it let's say I having six and click Add we are getting the problem which is saying that this property does not exist so let's remove it and now let's try so what's going to happen okay so let's close it and still when you try to remove it says don't have the comment so on the remove we are also removing from the comment which is not available remove that from here and next try to click on this delete and yeah it's deleting and you can see it's refreshed and what if I try to create once again click on add it's added how this happens without any refresh and without any notice you can see whenever I remember this thing whenever you create or whenever you delete whatever you do it's all getting the Dom so if I cross if I delete it's having on this preview you can see we have a whole of the Dom coming from the back end and whenever this is coming from the back end this comments latest page need to is triggered and every time it fetches the data from the database so this is the way it actually created the new things and delete and remove from the list so once again we can create one and that's added cool now let's work on this links and make them beautiful these paginations are actually default pagination which uses bootstrap but I have used tailwind CSS here so let's design or our custom pagination links how we can do that here we have we have yeah custom pagination views what you need to do you just need to define your view the blade file where you have the page nations and that's going to work you can also use this function inside your component but we are going to stick with this one how it's going to work let's see so here we have the links and we can define the G nation - links this is the file I'm going to create on our views and views reside inside resources views and I have already created that so this is pagination links dot plate dot PHP which is an empty file let's see what's going to happen when we are not giving anything inside this file refresh and that is gone no nothing is there and I can say I am pagination click and yeah it's coming here so yes we can simply define our pagination inside this file how we can define we have a couple of methods so first we need to check if there is the pagination so has pagination has pages actually so let's see if we have the paginations then and if then I will show a UI with a lie of previous and one is for next and let's make it flex and justify between okay let's try this we have previous and next and now if I change this pagination to 20 so then we don't need the pagination in that case at the last you can if you can see we don't have any pagination okay that's good we have done that next we need to wire click and we need to go to the previous page so once again here we have a function previous page and remember this previous page function is coming from this great we have and at the last we have this previous function previous page function which is going to trigger and remember wire click is actually going to trigger any PHP function inside the component so we have this similarly we have an next page also so we can wire click on next page so we need to define everything while click next page let's try this and I need to make it too so that we can actually see refresh and yeah we have to let's go to the next click yeah it's working next once again previous previous yeah it's all working that's cool let's let me modify these things with some stylings so now I have given some classes to define and to style these things so there's a border shadow rounded bgy text center heading x2 padding y1 and width of 16 so that's why it's looking like this cool but you can see if I am on the first page even if I can click on the previous it's going to the -1 page - 2 page you can see at the URL but we need to prevent this I have added cursor:pointer also so how we can prevent when the previous page is not available similarly when next page is not available so once again I can go on the pagination documentation of livewire and now I can say if on the first page then I need to disable it or I can simply create a button which is disabled so we can simply check this one so we can have one for if pagination is first page then do something else end it so if I am on the first page I need to do nothing when I click so there is no wire click and then I need the background of let's say gray 200 or 100 when we have when we are not on the first page then we are giving this previous one which is having a wire click let's try this so we have end of line so end if actually refresh and now you can see I am on the first page and this is looking like a disabled so I can remove the shadow also so that should be great flat yeah so it's now good so no and cursor:pointer also I can remove so it's not doing anything and it's now disabled and now I can click on next it's working but you can see it can go very long when we click on the next this means now we can do the same thing when we has no more pages so has more pages if we have if it has some pages then going to show this else do something else and then if and if so here comes the next one when we has some pages then show the next button which is having a wire click but if we don't have any pages then remove this click remove cursor:pointer background gray of 200 I will say and that's 200 for this previous also and that's good removing the shadow also and let's try once more and there is no previous page so there is no next page so next is disabled and now if I can go to previous previous previous yeah now it's there and now we are on the last page so as soon as we are on the last page you can see now next is disabled we can go with previous and finally previous is disabled Wow cool we have done that next work on the pages in between so one two three pages so first we need to loop over each one so each element so this one is for I can say previous and then I can say previous end here I can say next and here next end then I can start numbers and also we need to end the number so end numbers it's just for comment so that I can see where I am so end for each loop in between I need to have some links so I can firstly create a div inside dev I have a lot of one too and I can make this debuff Lex so that it will be inlined let's try refresh yeah one and two is there let's style these two class and this class has margin X of let's say 2 and yeah this is good let me do that this also and I have just copied the same classes for previous and next and make it here one two and then what we need to do next we need to check if the element is a string that means just one so we need to show this one otherwise we need to loop over this so we need to check if it is an array so let's work on the array part so let's copy that and I can remove it and then I can paste it and let's we have this one we have designed and remove it like this and paste it like this ok so we have the page and we can use this page and we can show the page here show the page here let's see how it's going to look 1 2 3 4 now how it's going to work when I click we need to go to a page once again there is a function called go to page and with a page number and remember I can use wire click go to page and it's with go to lower case and then I need to echo out the page so that it will give the number actually and now it's going to work so too is there so it's not working let's refresh and it's not working let's see why it's not working so go to pages there I can copy that and I can paste it which is there and yeah now it's working so that was having problem with the word go to okay so one is there do is there three four one and Yvonne is pre previous is disabled go to next working previous previous is not working let's open the dev tool and see why previous is not working it's not giving anything the cause of some problem wire click previous page we are having this hmm so we have some problem here we are on the fourth page this should work yeah it's working so that was I have not refreshed final is active one so you can see with the first page here we have with the current page is equal to the PHP are clicking then we need to make it background of blue 300 refresh and now you have that's good so text white and blue off 500 cool so this is how we create the page nation on our level livewire pretty cool thing I think I like this one great let's work on next thing next I need to work on the image upload so when I choose any image I first need to get the preview here and then when I click on the add I need to add the image with the comment how we can do that thing with level livewire let's check out so I have created a simple section where I have this input because in life wire form doesn't matter fully form doesn't matter that's why I have put this input box above the form because it's not required then what we need next if we need to choose any file when we choose a file we need to send that file to the level end let's try in a conventional way so it would be nice if I have wire model of image let's try this so we need to create a simple variable called image so public image or you can just directly create image here but I like to have like this okay so when we have this click and choose an image nothing happens but let's try once more refresh the page and choose an image and yeah you can see we have this actuals request which is sending the data let's see what data we are sending we are sending image as null hmm this is weird but what we are getting on the image actually so to check that I can just echo out image at the top here we have so initially image doesn't have anything so nothing is showing here as soon as I choose it you can see we are having some fake part welcome minion dot jiff so here this fake path is actually for the browser browser security is having this fake path and level cannot interact with the browser and that's why we have the lab level live wire but even level live wire cannot determine where is the image to send its information or how we can grab this so instead what I'm going to do I'm going to hack it in a simple way whenever I change something that means whenever I choose any file there should be a change event of this file input this file input has some change event so now I can save wire change whenever there's a change then I should have this image okay let's try this so instead of wire I have changed and whenever there is a change now it says unable to called component method so it's feeling like there is a function of image so this means we can create some function inside this image but I am going to introduce you with the events of this level live wire because we can omit some event once again if you are familiar with view GS it's exactly the same we are omitting the event we can omit the event with the wire things then we can omit the event from the component or we can omit event from the script similar to omitting we can also listen the event so at the bottom you can see we have wire listen level live wire listen and we can listen to this also okay let's try this so I am removing this image here and when I change it I need to emit an event to emit an event I can simply say dollar emit and I can say the emit name is file choose in so I have choosen the file so let's refresh and click select an image and you can see nothing is happening because we are not listening about this event so live wire is smart enough that if there is no one listening about this event it's not going to do anything but we need to listen event on our window event so let's copy this script and you can this script inside you're welcome dot played here but I'm going to have this on my comment dot late so anywhere you can have this and I can simply say alert and that one is file choosen remember this is the event we are omitting from here here the file choose an event yeah we have this let's go here once again refresh this page open the console but now it says cannot read the property on of undefined let's do one thing let's log window and let's try this but inside this window you can see we have the live wire so why it's giving this because if I go on the welcome dot played you can see we are having this script after the comment loads so one is you can move this into the head then it's going to work and like here refresh the page and now we are not having any error so that should work so you can do this or if you want to stick with this kind of notation loading this script at the last then you need to have some set timeout so that after one second you can check for the event but let's move it here or the final thing you can do also you can have this script here like this but I like to have the script related to the component inside the component so in that case I am going to move this script in the head so it doesn't matter actually now we have this so whenever this input field is emitting the event called 5 chosen then we are listening here Windows Live Wire on file chosen there is no post ID and then we are simply alerting ok let's try this choose a file this one and yeah we have this alert cool we are getting that now this is very nice thing ok so let's grab the file and we grab the file by document dot get element by ID and remember I have given this input field an ID field of image so let's grab this tag by ideal of image that we have done so now let's lock console.log of file and once again choose image that image and that tag is here this mean input tag is there so because we have this tag we can simply find the file so every file if we have then we can say files and grab the first one so once again choose the file and I'm showing you step by step so we have this file ok next what we need to do we can simply say like file is file dot or I can say let file and this should be input field like this and input field dots files grabbing the first file because we are just choosing one file only not the multiple file upload and then we need to create a reader a file reader so new file reader and then we can say reader dot on load and when the loading is ended then we need to simply do something so log reader dot result and this is only going to happen when we run reader read as data URL of this file okay so lots of thing but file is there then we have created reader and we are reading this reader as a data URL and then we are saying when the loading is ended then we can log out the result okay so this is pure JavaScript and yeah you can see lots of base64 image we have here okay so we can simply send this how we can send remember we can also omit the event from our window so window object can emit the event also so once again we can inside this emitting file upload and the data inside this should be the result and this is an event so we can listen for the event inside our component and we need to write protected listeners and then here is the event name which is file upload and then which function is going to handle this event okay so let's copy this from there and go let's call listeners and listener is file uploaded is it uploaded on the upload and then we have to give handle file upload this should be a function inside the same component and they should get the image and for now I can say die dump of image let's once more refresh choose a file like this and you can see now we have this which is having with the driver of Gd library because it's having some intervention okay so instead of image I can say image data and image data now let's try once more so we have this and this time you can see with some waiting we are getting this base64 and this we can use now we have this image and we can set the image so this image is equal to image data that we have done here reload the page and now I'm not having any diadem if I choose this one and nothing is happening no error that means we are good to go let's go here and on just above this image the input field I am going to create an image tag with a source of image and remember this image is actually this variable image because it is publicly available and that's done with a width of let's say 200 and now once again finally yeah I'd say the image is not available we will tackle that but now if I choose that file after some time we have a hello for the mini and cool we have done finally file upload but it's not actually stored in level this is a level step we will do this later but let's do one more thing we can say if we have we have the image then only we are going to show this image otherwise not now let's try once more and here we have choose it and after some time we have this next we will work on the uploading of this image on the back end that means on the level end and that will be easy because I have installed intervention package and that intervention package will help us to store this into the storage now since we can choose any image and then we can upload that image so let's try to upload that image into the storage of our level and we have this component so component dot PHP for the live fire and here we have the ahead method so once we have the image which is a base64 format that is actually inside our image variable so first what we need to do we need to upload it so what I will do I will create a function and I will name that function store image and this function is going to be similar and very simple and because first we need to check if there is an image then only we are going to upload so if there is no image inside our image so that should be dollar inside our image variable if no image is there then just return null okay so what we are doing with we are returning null if there is no image so we need to grab that image which is a null and then we need to fill that in each part with a null but remember in our comments migration we don't have the image column let's create that also and I will say a string image but this should be null able so that's why it is malleable because we have made changes in migration let's run the migration or is basically run the PHP artisan migrate fresh so that it will clear up everything and create a new database fresh empty and now we also have an image field here now whenever we are checking that if there is no image then make that image null and that is coming from health okay so let's give a comma and it's returning null okay so I don't have any image so I will say without image and let's hit add and we have problem it says name of non object inside the plate hmm so because we have cleared the database so that's why we don't have the user and quickly I can give the name of the user so it doesn't matter whatever the password we are not authenticating and once again let's try and I can delete this one and let's try without image add and yeah it's added and no image because there is no image but when we have the image then we need to store it using the storage facade so a storage and then we need to say put and what name we are going to give I will say image dot jpg and the image will be this arrow image but this is a base64 image it is not going to save by using this so I have also installed interventional library and using this intervention library now it's become super easy I just need to say image manager static this one you need to use image manager static then I am going to make from this image and then and code it into jpg format and that's it and if you are not getting this here is the documentation for interventional library and here we have image they have given the elyes for this image manager static then make the image you are giving and then encoding whatever you want to encode that's good and then because we have this image now we can store this image like this and that's great that's great so let's refresh once again choose an image an image let's choose this one and with image add and now it seems like it is added and we need to clear this image also so let's first clear the image once we have the we have stored the data then we need say image is null but because this time it was not it the image was not null so we should expect storage app and here we can see we have this image dot jpg very nice but this should be inside the public so what we can do I can just delete this and we can just define storage and the disk and then I can say disk is actually public so then it will go inside this public disk that's good but not every time we want to make the image named as image dot jpg so I can create a random name and I will your STR and use random then concatenating with the extension of jpg here we have just encoded not giving the extension but now we are giving a name with the extension we need to use this STR STR like here and then once again we are good to go then we can name this as the name and then return the name okay so see when we don't have the image we are returning the null if we have the image then we will encode it create a random name store inside the public directory and returning that name and here because when we have the image we get the name inside the image and the image field will filled with the proper name ok let's try once more so public directory is empty once more try choose a file and once again click on add images cleared it is added here and we should expect an image which is inside public directory that's very very cool and you can see the name encoded form of name dot jpg very nice let's go into the database on this comment you can see now we have this image field filled with the image we can simply now show that image along with the comment how we can show you can say comment dot blade dot PHP and just after the body of the comment first I can check if comment has image then I can have a image tag inside that source is going to be command image and then and if that's great let's now try but image is not loaded let's open a new tab and the path is directly here but actual path is inside storage public so what we can do we can provide and firstly we need to link the storage directory so we can say PHP artisan storage link what it has created it has created a symlink in our public directory storage and that is actually pointing to the public directory of this storage app public directory so now we can see when we say public storage and we have the image so just one thing we need to do we need to actually concatenate here with the storage / the image name let's try once more and yeah we have this image very nice but you know every time you prefix this thing it's not good so I'm going to create an accessor on comment so let's create an accessor and I call this X s get it's not accessor actually it's creating a field which I am going to append so get image path attribute add tree pute and then I'm just going to return this to H then this is public and then create a URL for this image by using this it is actually going to create the storage / image and then whenever we change our disk it will going to have that so we need to remove that and if you are wondering how I did that you need to go the larval documentation storage part file storage and here you can see storage URL is there and because we are storing in this public we are specifying this public so we can simply use Institute of Khan Khattak concatenating we can simply say image but and now once again refresh and it's not there let's try so it's not there because you can see it's localhost but the real is localhost 8080 in this file we have this localhost so make it localhost 8000 restart the server and now it's surely going to work wow it's working but what if I click on delete I need to delete this image also let's delete that image so we have this remove part and we can simply say is storage go to the disk of public and then delete image which is comment' image so if there is the image it will delete it otherwise if there is no image how can it delete so let's refresh and try to delete comment is deleted let's try on our storage and you can see that is gone there is nothing inside the public directory even if you go here public directory is empty then that way you can add any image with the use of level livewire and obviously level so yes we have the comments but you know every comment belongs to some supporting tickets if you have raised any support ticket in any website then you probably know that so we are going to create a simple model and that model name will be support ticket so PHP artisan make model and the model name will be support ticket and also I'm going to create the migration and the factory of this one ok so I have created that and we can simply search the migration and the migration which is inside the database migrations and this one creates support ticket table and this table is having just one field for now and that field may be the question so if someone has raised some support ticket that means he has some query or some question or you can make it like query but I like to have a question no questions okay so this we have also because every support ticket has many comments and every comment belongs to single support ticket so let's open comments migration in this migration we need to add one more unsigned integer and I call this one support underscore ticket underscore ID so this is going to help us when we create the relationship so let's now migrate fresh so PHP arson artisan migrate fresh and what it has done it has also created one support ticket stable also it has added one more column in the comments table and now it's time we can simply create the relationships so every support ticket has many comments so let's open support tickets model and first I will create a simple function and the function name is comments and then I can simply say this is going to return has many comment like here now we have this factory of the support ticket so we can create this and we can say the cost chin will be the fakir not a factory fakir paragraph and let's try this so to create new support ticket into our database I'm going to use the tinker so PHP artisan tinker so in this tinker I can simply use the factory of support ticket and then create a class and giving a namespace of AB support ticket class and then I'm going to create two support tickets so here comes two and then we can simply create it so I think in our Factory yeah it has to be question only now let's go out of tinker and once again go in create two yeah now we have the two ticket into our database and to show these tickets in our blade file we need to create the livewire component so PHP artisan livewire mink and the component name is I'm going to use if tickets so it has created two one is ticket dot PHP class and then blade file so firstly we have ticket dot blade and in this I'm just going to say tickets and we need to use this into our welcome so we have welcome and just like this we can use tickets ok so we have the tickets and now if I go refresh this page you can see we have this ticket and I'm going to style it and ticket should be on the left and comment should be on the right and quickly I have designed this support ticket section and let's see how we have done that so in the body I have given a flex justified Center this bigger div is just having a width ten and that's why it is having some space here also some space we have here that's why one is this side one this side 10 here so total twelve then we have a section with five for the tickets and with the width of seven further coming so that's why we have tickets here and then we have a comments here okay and inside this tickets I have just used this support ticket to show the support tickets now we need to fetch the support ticket from our component and remember we have created the component that means in our app HTTP life wire we also have a new component PHP class which is tickets so in this class we can simply create or simply pass the tickets and that should be support tickets and fetching all the support tickets for now because now it has now we can simply loop and we can copy this loop section from comment so that we don't have to design much and then close close paste it and that should look to tickets and here come ticket and then we just need the body part so I I don't need image I just need the ticket question and then let's remove everything else like here let's try this and yeah we have two tickets here one two and then we need to create the comment so let's try to create the comment so first comment click Add now we have a problem it's a support ticket ID does not have default value because when we are saving the comment you can see add comment we have we need to give a one more field called support ticket that should be ticket underscore ID and that should come because I'm going to rate a new variable called ticket ID so let's create a new variable called ticket ID just like this and that should be public public one like here and by default I make it 1-1 now we will see later how we can change it okay so once again refresh this page and I will save first click Add now it has problem it's a name of non object where it is because we have cleared the database so we don't have the Creator that means there is no user with the ID of one and we are defaulted to one so I'm going to create it and I have created the user also so this is going to work perfectly fine and you can see now we have the user and that's why we are having this comment but remember this command belongs to all this belongs to ticket ID 1 now what we need to do whenever I click on any ticket I need to load the comment of that particular ticket only we need to transfer the information from this part that means from the ticket section to our comment section how we can pass the information from one component to other component and now here comes our event emitting part so we can save wire click when I click on any ticket we have this big deal which is holding the ticket whenever I click on the ticket I'm going to emit an event an event name is ticket selected and I'm going to pass the ticket ID also so ticket ID so I'm doing two things I'm just having emit event and the event name is ticket selected also I am going to pass the ID and remember on our components we have the listeners so whatever event is emitted this one is going to listen for that ok so now I'm going to create another listener and I'm going to create another function with the same name so like this and because it is getting the ticket ID so I grabbed that and remember when you have the same name for the event and same name for the function you can just define like this no need to define the e value so it has detected ok the event and the function name is same exactly so when the event is emitted we are listening that event here in this code which is inside the comment so we are emitting the event from ticket component and then we are listening in our comment component and here we just need to say ticket ID is equal to whatever the selected ticket ID like this ok so this means when I click on the second one like this this should make that ticket ID as - so if I say second and click Add and if I check on the database you can see now it has the ticket support ticket ID of - that's good but because we have the ticket ID which is defaulted to one we can fetch the comments where you guessed it right support ticket ID is the given ticket ID and now if i refresh this page you can see this is just for the first one and as soon as I click on the second ticket it should load the comment for the second ticket only click and yes you can see it is just for the second one so if i say ii ii ii big comment so second ticket second comment and it has created that and now if i click on this first ticket you can see we have only one click on second ticket we have a two comments that's good but how do we know that which one is selected so we can do one thing on our support ticket - component we have this one we can create a public variable or simply I'm calling active one so active and then I'm going to bind this so how we can find it actually whenever I emit an event or whenever I click on this one emitting the event I need to inform my component that the active one has some ID hmm so it seems like there are various ways to achieve that one is I can simply listen it listen about the event for its own so just we have like this we can have listener so just like here and because ticket is selected we can create a function called ticket selected wrapping the ticket ID and then I can say active one if the ticket ID it is actually the model so I need to cut this from here and move it into the livewire tickets component and you have probably seen that and you are yelling that this is a model okay so when ii just paste it here and whenever i omitting this event on our ticket component i'm listening about that making active as the current selected ID and this means in our class I can simply say if active is equal to the loop-the-loop one so ticket ticket ID if this is equal to ticket ID then I can say background of gray 200 otherwise do nothing no extra class refresh and now click yes it is the select it and yes this one is selected you can make it green so that will look good and yeah this is good and by default the first one is selected so what we can do we can make active is one so always first one is selected and now this is good and yeah this has problem if you don't have any ticket with the idea of one you can probably do something like this and you are not fetching any comment so in our comment also I am NOT giving any ticket ID so now there is no selected ticket no comments that's why and if I click yeah everything is working fine so this is the way you can create so awesome thing with the just use of level library without writing any JavaScript let me show you the real power of narwhal livewire because we are going to create the single page application with the use of level library without writing any JavaScript yes you heard it right just using PHP no JavaScript but single page application so there will be a home page just like this and another page we will think about that okay so for that lets go to the livewire documentation and we have a single page application born to make single page application we need this turbulent we will come to this turbulent later but see this when normally in level you create a route then controller then you create view for a playout then you create a component you use that component oh now in lateral life wire it's very easy just one route pointing to some live wire component and that's it you just need to create an app dot plate inside that use this yield part and this component automatically pushed into that if you are not getting that let me show you things so I will go first to web dot PHP file and inside that you can see we are returning this welcome view but I don't want to return the welcome view I want to return home component so what if I do this and try to hit the base you that means localhost 8,000 now it says live wire home does not exist because we have not created a home live wire component let's create that so PHP artisan live wire make home so now we have that so app HTTP live wire home dot PHP is available so that's why it says no problem if i refresh but now it has another problem it says layouts dot app does not exist and I told you this is required app dot late dot PHP inside layouts directory inside views so in our views we have this layouts directory but there is no app dot plate dot PHP let's create that so I will say app dot plate dot PHP okay that's good now if I go refresh this page page is blank why because our ab dot plate or PHP is blank what if I say I am app blade PHP file refresh this page yeah this is working but we want to have our home component here ok so if I say home and then we have this home dot plate so I can say I am home let's go refresh and we are not getting that because remember we need to add this yield content ok so now if I say yield content and now we don't have to define anything because on our route I have defined that when I go to base URL I need to load my component which is home so in our app in this gene part live wire automatically push this home component so in that case if I go refresh this page I am home that's cool now let's create another route called let's say login and that should be slash login and now if I go to slash login now it says I can't find any component called login because we have not created any coke called locking let's create for login once again we have the login component but if I go refresh the page once again a blank why in our login dot played I need to say I am logging very cool so yeah we have this why not create a simple budget on our app dot plate which is going to have two links so I will have a simple div and Dave with Flex with full justify:center and then I create a simple anga tag for home then for login that should be slash login what if i refresh now we have a home and login click on home yeah login that's good but we are refreshing the page we don't want to really refresh this page now here comes our turbolinks now let's just install turbulent so we need to go to this link given here and here's the github repo of trouble link if you scroll down you will get this NPM link so grab this NPM link and hit it here to install it and now this troubling is installed so next we need to configure it and we need to use it like this first we require and then we need to start it and then we can do inside our GS Abdur Cheers or you can use it inside bootstrap I like to have it here F dot GS and that's good so we are requiring it and then we are starting it so we need to compile everything so npm run dev and while these are compelling let's go here and if you inspect this you can see we have not included the script for livewire so while this is doing something we can simply do one thing we can copy everything from this welcome to our plate dot PHP like this and I can paste it here because the welcome to blade dot php' is now useless so I can copy these two things from here and I just cut these links called these things and paste it here and that's it actually so we have link and now we have a library script library styles and then we have some basic tailwind CSS and now refresh yeah that's good click on home home at this login this is home and now if I have used page source at the bottom you will find somewhere turbo link so here we have a troubling evaluation of false false and here we have trouble link load then if we have the troubling then it will do these kind of things so let's see now we have compiled everything this means now we can simply use our script tag and make sure you use it just after the livewire script so we need to say asset and inside a set you can use jf / app door cheers cool so refresh this page once more now we have the app tour cheers and now see you can see keep your eye here on the live boy the tab you can see there is no page refresh and now let's grab everything and make it little good so behind the scene I have designed this and what I did is just very simple I just have a flex a bit with a full so it's having a full width with a background of purple 900 and text white then we have these two links with having a padding of four margin X of three and then moving this yield with the margin of 10 that's why we have some margin you can see here and this design or everything you can get from this github repository called github.com slash bit fumes and then you can search or directly go to the link in the description for livewire full course and don't forget to hit star and follow my personal profile which is github.com slash star tech savvy you just need to hit the follow button somewhere you will find that okay so let's get back and here if you see if I click on login and it's not refreshing although changing the component now let's see what happened when we click on login as soon as I click on login there's the edge X request or excuse request you call it then we are fetching everything the view from the back end and that's how we just update the level livewire update the Dom on your front-end and it's exactly the same we create the single page application and same happen when we click on home when we click on home you can see we are fetching the home page from our server and everything we are fetching the HTML the data and pre defined HTML actually everything we are getting from the backend and that's how we create the single page application but let's get back everything we have created the report the ticket the comments on our home page so remember we have this we just need to cut it because this now belongs to my home page or whom component actually so I just have it here and just uncomment everything will work fine so refresh and it's there and I can just do one thing I can give it flex and justify:center so that everything become at the center now if I flick first and now I can say second comment hit enter yeah it's working very nicely and now I can go to the login page I'm on the login I'm on the home page without refreshing the page whoa-ho super super sexy super super cool awesome this is only happened with the use of little lever plus the combination of turbolinks if you like this if you like the magic of level library you need to hit like button hit a like button press it like so hard it will break the algorithm or for YouTube and it will just spread like a storm so that everyone know the power of level livewire now it's your time to spread the power make this happen and if you have any question just please ask me and I'm always here with you so we will meet in the next episode till then good bye so now we have the login page isn't it cool we also have a register page let's work on registration so here we will first go and create the route so if I say a new route a little livewire route that route is register route and we have created that let's go and we need to create a tab here or simple link to move into the register page so I can go on the app dot plate where we have all the links and I can simply replicate this one and call it register register and we have that event it cool we can move these login and register to the right so we just need to say justify between refresh oh but this should be lock and also had the right so we just be two element here so we can move login and register into a dip switch we just have a two so two will be on the left and right we just need to give the panning so these padding are not required in these links and we can move that padding here and this is working nice cool so if I click on login if I click on home that's working login it's working register now it says you don't have to register component okay let's that soap HP Addison livewire cool and make register and it has created to file one blade one PHP file you already know these things and blade is inside great resources views livewire register so I can simply say I am registered to check if it working or not yeah this is working that's cool now I have already created some designs for this registration so I will just paste these designs here inside the register dot blade and that will look something like this so let's make this also correct inside hat dot plate we have this yield and we can simply say this is actually width of full yeah so this is a nice-looking registration form we have in these fields and simple button which is a form let's see here so we have a title then we have a form in this form I have given neck wire submit to prevent this means we need to create a submit function in our register component and then we have some input field so we have this input for name email password password confirmation and finally a submit input field which is going to submit this form okay let's go here and because this is a simple form and if I click on register now let's say you don't have a submit method inside your register component so let's create that submit method inside register live wire component and method means simply a PHP function which is submit and here I just died on to check it is working or not reload click on register yes we are getting this diadem that means it's working cool but we need the data from these input fields the name email password and confirmation password so we need to bind the wire bind or wire to some variable so we can say wire model and name so that should be like we need to create a public name variable this should be the case so we have wire model of name this means now if I can write something I and before that I died um dollar this arrow name let's now see so if I say start ik and click on register yes I can see sarthak is there from the diadem from the PHP part inside the comprehend that's cool but because we have a lots of field like name email password and confirmation password I'm going to create a form of variable called form which is actually a array and array is having the fields like name which is empty then email which is also empty then comes password which finally also empty and password confirmation and that should go empty once more and because now we have this form what we can do we can simply go here and instead of wire model mean we need to now say wire model of form dot knee so in that way if I go here and now if I try to submit register now it says name property doesn't exist because now we have form instead of name so reload and give sarthak register and you can see name is subtle so let's do the same for other fields and we can simply do that by pasting here and changing the name like this then for password oops comes password comes here for password confirm mission like you have okay so let's try once more so just typing anything for checking purpose click here and that should be email calm and yeah everything is there now you can see I have typed anything literally anything and this confirmation password and password doesn't match so let's do the validation so to validate things we need to go here on this submit method I can simply say validate or you can create the real-time validation you probably know these things so now email is but remember that should be formed or email is required required but that has to be a real email okay then it's phone dot name which is just going to required and then we have a phone dot password which will be required and confirmed so confirmed like this okay because there is some errors so if I'm not giving anything we will get the error on a register if I click we have this and in this error bag you can see we have this errors now let's show the error and we also have the error field in our comments here we have at error name of the error and then show it let's copy that go to register and just below every input field I will give the name and show that error then for email show that error and remember once again that is formed or name forward that formed or email and finally formed out password ok and not giving anything for password confirmation because that include inside the password cool reload click on register whoa-ho we have a proper validation and now really register the user and then redirect to login page now since we have the data on our back-end that means on our register and in this form we are validating when validation passes create a new user and we can simply say user : : create and then I can say this arrow form which is including everything like email password password confirmation and email password everything is there ok so we have done that and what we need to do next after creating the user we need to simply say redirected to slash login page and why not give a name to this login so I can say name is login and you can see we can simply do everything we have on lateral we can do the same on level library routes so we can give the name also so instead of this I can use route of name ok so we are creating the user and then we redirecting the user to the login page ok so let's see whether this is going to work or not and remember in our user model we are just having fillable things like name email and password but we are giving the plain password so we need to firstly be cryptid or we need to make it hashed so we can create simply and simply a mutator mutator and mutator name is set password attribute and we get the value value and then we can say this attributes name is password and that is the crypt of value so now when we are creating the user we are also be crypting the password and then storing into the database and yeah we can redirect and let me take you to the livewire documentation and here we can see we have the redirection we can easily use the redirection like this or like this whatever you want but because everything is good we also have a login page which is not having the form but we will create that and let's work on this and like here and that should be a bit fumes then secret one two three then comes secret one two three and now hit register and it is like user so we need to grab the user use it at the top that's good close it once again click on register and now instantly I am redirected to login page and you have seen that there was no refresh because we have used the turbo link and the trebling livewire create a single page application its redirected and in our database if I open the database [Music] let's use livewire user and we have a new user called salsa add bit Finn's calm and password is hashed that's very very nice and that's cool and next is we need to create the login of the user so let's copy everything from this blade file off we'll register and close close close close close and I will open login dot plate and I will paste everything and I call this as login hair login time this is good then we just need we don't need actually name so name is not required so delete that field we need we need the email the password and the confirmation password now we have these two things and that submit button should be login and that's cool let's go here reload the page and login time is there and yeah similar to register we need to create a form that hold the email and the password ok so go to the log in life wire component and because you know things I will going to create a form and inside the form we can say oops oops email is empty then we we need to say password is empty and close this so we have these things and now we already have the wire model because we have copied from the register by model we have wire model we have for the password and that's good and we just need one more thing which is the submit function inside the login component to handle the submission so let's create that also and then we are ready to go let's now really login the user so now we can easily register any user and we have the login page and then we have design tests we have a wire submit prevent submit that means this is the submit function which is going to handle the submission of the form we have created this submit function we have this form which is holding the email and the password field and we have wire model for a form dot email form dot password and next what we need we need the validation you got it right so here we just need to save this arrow validate and you can copy the validations from register so I can just copy it and then wasted remove the confirmation so this there's no confirmation required and no name required and that's good so now if I hit yeah form that email is required and password is required good so we have done that and we already have this error fields because if you remember we have copied everything from registered plate so we also have this error field okay so now we have that when we passed the validation we need to really login the user so we can simply use the level way of making login so aught then attempt and attempting with this dot form and this should really lock in the user so now after this I can redirect to the home page and home so once again let's create the name for this home page name is home and that's it we have done that now let's try this so perfect add bit films.com password is secret one two three hit login and we are redirected to this page but how do we how do we confirm that we are really logged in so first thing is if we are logged in we don't want this login and register buttons hmm so we can first go to app dot plate dot PHP and this dip which is showing this login and register buttons we can hide this and we can simply say if aught check if aught check is true we also have one for guests so why not use the guest one so if the guest is there then going to show login and register and now go reflect his page and you can see we don't have that but instead now we need a logout so here we can say if the user is authenticated user then I'm going to say show me a logout button which should be just like this one and I call it log out and now we have the logout but how we can make the logout happen so instead we need to create a new component on live wire component called logout so let's create that and that should be log out and now hit enter and we have this log out and log out got played so here we can simply say log out log out like this and we can cut that from there open log out dot light dot PHP paste this and now we can simply say when we click on this wire click we need to really log out the user so now we have this and refresh this page and it is not showing here why it is not showing because we need to write here a live wire : log out now here we have the log out back and now if I click yeah it says undefined method called log out in your log out component so we are saying log out so we need to open the log out component app a shitty to be HTTP love life wire what happened to me live wire log out and then we have a function called log out and then we can simply say aught log out and then read return redirect to route or login let's try this and let's make cursor:pointer for this reload click on logout it's on the register log in and everything is back cool let's once more try so sorry like a dreams comm login yeah I'm here and now if I click on logout it's working Wow congratulations we have done single page application with the authentication without writing any JavaScript everything is possible because of larval life wire last thing is you can see I'm not logged in if I click on home I can easily access this page we need to prevent that means we need to have middleware similarly if I log in here and if I log in here and because I'm logged in if I try to access the login page yeah I connect this we need to restrict this one also it's very easy because everything is level so we can go here and then we can simply say we need a middleware oh all that means authentication now let's log out so we are log out click on home it's in we are log out and let's go and try to get home it's redirected back to the login page once again try Wow now let's login start add bit fumes films.com sick wait 1 2 3 click on login and now if I try to hit login I can easily access but with the group of I'm going to create a group so yes you can create the group also group of middleware and we'll where is guest then you can also use the directly route middle where instead of route group that we're also going to work and refresh it says its redirected to whom slash home instead we want to redirect to base URL let's it fix this problem to fix that problem we can simply go to route and whom is this one let's remove this one and try it so if I try to go to the login and yeah you can see it's working just by going into the route service provider removing this and converting this home to slash it's now working pretty easy things that is everything everything is happened because of level livewire so I'm so excited about this and I hope you enjoyed this very much and that's really really great

Channel: Bitfumes

Views: 97,158

Keywords: laravel livewire, laravel livewire tutorial, laravel livewire crud, livewire crud, laravel livewire spa, laravel livewire examples, laravel livewire español, laravel livewire full course, laravel livewire autocomplete, laravel livewire course, laravel livewire introduction, laravel livewire pagination, laravel livewire turbolink, laravel livewire event, laravel livewire validation, laravel livewire alpine js

Id: HWTF-oi70e4

Length: 155min 11sec (9311 seconds)

Published: Wed May 13 2020