Laravel livewire for beginners

welcome to larval library tutorial so in this tutorial we'll be making very very basic application in order to learn the basic of laravel library so what exactly is the laravel library larval library is the fully stacked framework for the laravel developers that helps us to make a dynamic interface simple without leaving the comfort of larvae you can see as per the definition so imagine how difficult it is to be when you include like a vgs framework or react framework or angular framework in project it's lost of difficulty for backing developers so library came here to solve those problem so you don't have to write even a single piece of your javascript code everything will be handled by the larval library you need to only focus on your largest skill so let's make a basic app so let me show my project here so here i am in laravel library this is my project and this is my database and first we'll make a table so let's make the psp artisan make model and i'll make this as article model and along with the model i'll make migration file now i should have the migration file here so let's go here and in the migration now i have article so let's make the title for the article title so this will be very very basic uh just you want to explore some of the features of libra so text and description yes see all right between description now let's migrate this shall write psp artisan migrate and it should create the articles table in my laravel library and i should have title and description so let's refresh this again and here is our articles table and we have the title and description for the article okay now let's install the laravel library so we can install of a composure and i'll copy this i'll clear this stuff and then i'll write this so composer require laravel sorry composer required libraries last liver and it will install the library in our larva project so let's wait for some time and we should get the library in our project directory so liver is installed in our laravel project now the second step is we have to copy this style and js and we need to paste it in layout slash app.play.psp seem like we have done are we doing the in the larva so let's go here and let's paste it so it says that we need to paste this uh in the head so it still should be within the head so this is my head tag so i'll paste over here and obviously i think you need the addreit so we need android here and this will be within the body so i'll copy this one with the script and then i'll paste within the body so i'll just placed over here okay now the other step is to make the file so we can make with the psp address and make a live where and the name of the file that you want to make and whenever we run this command we'll get a 2 file so let's see what we get so let's make a simple test file so here are psp artisan psp addition make life where and i'll write test so now let's do this now you can see here all right just now we have got two files one is the test.psv file and other is the test.play.psv file and its file is in the resources views library folder and the class is in app http library and we have tested psp so app http library we have the test.psp and it have a render method by default and you simply return the view which is the test.play.psp and it's in the library.test so let's test it so all right here welcome welcome to livewire welcome to livewear and then i have to register this as a component this is as a component so i like to get everything in this space with welcome.blade.psp here so what i have to do is uh if i do in the home.blade.php i have to obviously register so that only i can go to the home url and i don't like to register at the moment so what i do is i copy everything from the home.psp and i'll paste in the welcome.blade.psp and now this is our welcome.blade.psp and this is the layout so here now i have to call this call or register whatever you say i'll write a liveware and then so if i had libra then it targets to lipo this folder and the name of the file is simply test and in the test we have welcome to livewear and we should get this message now and you can see we have welcome to liver so great so now next part is let's display the data from our database so i have an article and let me insert some of the article articles so i'll write a first article and i'll copy this and i'll paste over here number of times and then here i'll write a second article second article and copy this and paste here and then go and save so we have now two article and our purpose is to get article in this instead of getting the welcome to larval library so for that uh this this was just a test so you can remove this file so let me make another file and to render all articles from my database so here i can write a psp artisan make live wire and then here i write article index so this is very important how you give the name so here you can see for article a is capital and after that i have i capital so i want you to name exactly like this so that if you do this then you'll get the file with the article dash index so you can see here now you have a file slash article slash index and you have the article index class so now article index class knows that and his this article index would render the file or source this stuff in article index.blade.psp so we have now article here now let's do like this so use app slash article in our model and let's go to article and let's make guarded whenever we install the data we need this g j u a r d regarded and amperey okay so in article index here we have this stuff so we have to do exactly the same as we do in the library so first this is article so i'll write article articles and we have the article and let's get the latest article first la te as the latest and we'll get article and we'll pass this compact and we'll pass this articles rt i say and it's not going to make sure this spelling is same exactly now we have to loop this in our articles hyphen index and listen here and i'll do this i'll remove this here now here i can write a for each dollar article articles edge article and here first i'll display so let's close this in phrase in for each and first i'll display the title of my article so here i can write article a rti article title and here i'll display the description of that article a r t i say an article and d s c r i p t n description now this is fine so now if you go here and if you're refreshed we don't get anything obviously because we have to use this particle method in our welcome.blade.psp currently we have the test but now we need the article because we have everything in our article index so we can write this as article iphone index and now we should see those two articles that were in our database in our base great now next step is to create the article and here i want to make one title fill and another text area and one button so that i can insert article into my articles table so before that i have to obviously make a new file and i have to make a new file and a new blade file as well same like this so let's do like this so let's go here and make article ertic an article and capital c credit now i should have article create class and file and let's go here and article create so library and i have article create and if you go here then we have the render method that renders this article create so now let's make a form so i'll write your form and just a phone and let's write it for let's design simple form so here i'll write a div class form group and close this div and write your label here label and our title and input type text and we even don't need name and i'll explain you later this and form control and that's all so now let's copy this and i'll make another more that is the text area so i'll make it description tsc or ipt and description and text area here i'll give the class from control and final step is to have a submit button to show me this form so here i can write button submit and here alright class button button primary so everything is fine now now we have everything displayed in the welcome.blade.psp exactly like this i can render this view here so i have to write a livewire and i have article and crea to create article great now just above this article i should able to see this form so let's refresh this and you can see here i have title and description and here is one submit button now in the article index uh let's give your hr so that we know is individual article and we have this line okay great now let's go to the form and still have to do some stuff here so in the article create so here we have to give some like we do like in the if you have a suppose if you were working in the fields then obviously we do like submit dot prevent submit.prevent and we give the method name right so likewise here we give the wire we give the where and then colon and who writes submit dot prevent prb and prevent obviously to prove in the default behavior of the browser we need to write proven and here i can write store article this is the name a rti select article and here we don't use the v model or we don't use the name obviously we use a v-modal directive in vgs to create a two-way data binding on a form input text area select element and it automatically picks the correct way to obtain the element based on the time right and in the same way here we write to where just to write a where and then write a model and then we'll give the title this is title so exactly in the same way i can do here in the text area as well and here now i'll give the description dsc or iphone description so if you want to see how it works so it works exactly like v model and so here is the btn so you want to check then first you have to make this properly as a public and where we have to make this so it's obviously article grid so you have to go to article create class and here you can declare this as a public so let me this public title and let's make public description as well public dollar description dsc our ap channel description now you can go here in the article index sorry article create and just here you can see what you get here so i write title and let's go here and now i'll write whatever i write here you can see here it automatically displayed here and whatever i write it also displayed here for that i have to write here okay so great so this is how it works now we have to store this record into our database so for that we have the article create and in the article index sorry in article created we have the store article so we have to make this method in our article create so i'll make here so i'll write public function and article store and here i'll get this now i'll use use f slash article yeah t is an article which is my model now let's not work validation for now let's store the record before working on validation so here are my the article arjc ali article as a variable and you will write article and then create and we have already you should have like fillable or guided and we have already made that before we store the record now we have the two things that is and that that need to be stored in our table the first thing is that a title and this title is we have the public and we can simply do like this this title title title and then we have the description the sc rpm description and we can use as this description okay so now you should create the record in our table so let's see this so refresh this and let's say all right this is sorry this is third article and i'll copy this here and paste here and submit this obviously nothing happens but if i refresh the page then you can see i got this article that means this article was already stored in my database but our purpose is to create the article in our page instantly as soon as we submit isn't it and we'll do that and one more thing you can notice here is that so let's say let's copy this and i'll make the fourth article for and i'll make this and i'll make the fourth article or something like that and this is still not going from here so it should go immediately from here so to remove that we can simply do this title like we do in javascript this will make this empty and this description this okay now let's try let's give try one more time and i'll write this and this is the fifth article and sorry fifth article and let's give something description here i'll copy this and i'll get this and okay this is gone from here and we refresh space we should get now we need to inform that we have store record in the table and we need to update our page so we need to fire an event from until create and our article index would listen that event and should render the last or newly created record and should update our ui okay so it's very easy to do that so just you have to go here and here i'll write image same like we do in the view this we write image and you can give the name of the event that you want to even meet here so i'll write article ergs article store or article create and then i pass the last or created id article id so it helps to know the library which article to render in our view so this is all now now only one thing left is that we have to go in the index article index because we emit event and we have to listen this event here so you have to write a listener so first we'll write here public public public and listeners so in library you will have to write a listener to listen living l-i-s-t-e-n-e-r solutions and here you can write this article or if you want to give other name then you can simply write article create or article create or something like that but i'll leave this as it is okay now we don't have to do much things so only thing we have to do here is we'll make the method with the same name with the same event here same like we do in the view just like we like the view on and then we'll write the method and we have the article id and just you can write id here and that's all now we fire an event from article create and we catch that even in article index and it automatically should render snap last create an article in our page so let me try this okay so here i'll write this is the sixth article copy and then copy here and submit and you can see this is automatically rendered in our view okay so great library is great so it sends the azak request and it gets whole thing and update our page immediately let's try one more so i'll write here seventh article and you can see this one more time so this all happened without the pacer phrase and great okay we've done that now let's give the message whenever article is created so to give the message uh here what i can write what i want to write here is i can write this as a public and here i write article created and initially this is false because no articles were created and i can toggle this now to true that means when an article is stored then i can make this true and based on this i can keep the message i can check this in my let's say in my plate file in my not a blade file yes in my blade file article index so initial article is not created and when we listen event and one article is created we make this true article create now this is public so it's available everywhere so we don't have to worry about this so we can go in article index here and so we have the article create here and we have the article index here so here i can display this so all right if article created and in if and let's make div a lot a lot as usual as a success and here i'll write your article created see our ea to create it ssc ess fur successfully so now let's try this so refresh and let me copy this and paste here and this is the it article and here and you can see your article created successfully and you get the flash message now another thing is that let's work on vagination and fascination in larval is obviously very easy to implement and in views uh sorry if you was in views yes it was very hard to implement the fascination right so it takes a lot of time and obviously we need to debug a lot of things we need to handle a lot of things but livewear is very easy to work with the pagination so if you go to pagenation here then first thing is that we need to include this use libra with libra page nation and obviously we're rendering in the index so we need to include here so i'll include just here and second thing is just use with pagination so here we have to use a use page initiation now at the moment we don't have any pagination links so first let's first get the pagination link and together pages and link we'll go to the article index here and let's place a new data page innate and let's paste in a data for data purpose and now we'll get only the four data here and now let's get the page initial links to get the page initially i'll go here and here i'll write i'll display articles and links and now let's save this so we have the pages in some link and we have already included this class and we also use this use page in it and it automatically handle the pagination and now it should paste it the data without the page or face now let's see this so if i click to and you can see in the url too and i got the data without a page interface and if i click one and again in i am base one so very very easy to implement page edition so let's work on the validation we haven't worked validation and validation is also very easy to handle so to work on validation we have to go again in our create method here in this to store article and validation is exactly the same we do in the larger so write this and validate and here what do we need to validate so we want to validate the title tit title i'll just make this simple i'll write this request so you can validate like minimum or maximum or whatever you like so i'll just make this as required so this is done and so this is done and after this in order to display error we have to display the euro and for that i will go to the auth login and i'll grab this stuff to display the euro so i'll copy this and in article crit i'll paste just below this and after that i have to have this class which is the error and it's ended an error and let's go here and first let's format this here and in the class i'll give one space and i'll press this and now this is title title title and this is title title so i'll do exactly the same to the description as well and here i'll give the description okay and i have to give the class to display this error so class and then firm control hero and error i'll copy this and give one space here and this is description dsc rip ti and description now let's give a try so everything is done we handle the validation and it's a description on expected description in the welcome.blade.psp so description description and description so let's okay the error is simply we miss the comma here and it should be comma so now let's refresh okay now if we submit then it should display the euro without so we have this empty and the title is square and description fill is required so in this tutorial we learned the basic stuffs of larval livewear i hope you guys enjoyed this video and if you want to learn more about the larval view.js library do subscribe my channel and thank you for watching

Channel: Ranjeet Karki

Views: 564

Keywords: laravel, laravellivewire, livewire, laravel livewire, livewire for beiginner, laravel8

Id: dgLfnpsgzg4

Length: 27min 11sec (1631 seconds)

Published: Sat May 09 2020