Laravel Livewire Tutorial: Create, Read, & Pagination (part 2)

[Music] hi i'm billy and welcome to jack of trades in the previous video we have learned the basic installation of laravel live wire and all the necessary setup that is most common in a laravel application if you happen to be new here you may have skipped the previous video which was the installation process so you better check that out i put the link in the description below so it is easier for you to follow along in this laravel series moving on i have prepared a local database called laravel livewire site db for our little demo as you can see we need to replace the database name from the dot env file located in the root directory of our application when we installed laravel it creates three migration files in the database migrations directory these three files are necessary to create the initial database table for our application including the users table next is we run the command php artisan migrate to create the tables in our database as you can see it creates a bunch of tables in our database after running the command next we run php artisan serve command to run our local server now let's create two users just for the sake of this demo [Music] now that we created two users we can now start making the create and read functionality in our application using livewire we will put our live wire component in the slash home page route in this example [Music] let's delete this part right here because we're going to replace this part with our live livewire component there's something else we need to do when we go to the livewire documentation it tells us that we need to include two blade directives in our head tag and body tag before we could run live wire in our application so let's do that go to resources views layouts directory and add these directives into your app.blade.php put the livewire css in the head tag [Music] and put the livewire javascript in the body tag at the end after that we can now create our first livewire component let's go to the documentation and copy the command as what they have instructed go to your command line and paste it in in this demo we will create a post component where we create read update and delete posts so i'm going to replace the counter with posts and hit enter [Music] as you can see two files have been created after we run the command the first file is located at app slash http slash livewire directory and the second one is located at resources views livewire directory let's open up these two files and start making our post create and read let's add in some sample text to our post component [Music] now that we open up our two files let's try to include our livewire component in the existinghome.blade.php by typing in a livewire then inside the parameter is our post template let's reload the home page and we will see that our livewire post template is now added in the home page and in our livewire post template we will add a text input to see the magic that livewire does to our application livewire uses the concept of data binding just like how vue.js or angular does if you happen to work with those two technologies then you're already familiar with the idea but if you're not yet familiar with it livewire synchronizes the current value in your html element with a specific property in your class component by adding wire model this means that you are telling livewire to synchronize or bind the property title to a public property in our post livewire component class title we should match what's written in our blade template to the class property inside our class component [Music] here we declare the property title as public and for us to see the real magic of livewire let's echo out title in our post.blade template [Music] let's reload the page and witness the livewire magic as we type in the text box we see that livewire also updates public variable title in real time now let's open up google chrome's developers tool and see what is happening right click and click inspect and go to the network tab and observe as soon as we type in the text livewire actually does an ajax request to the server and updates the html value on our livewire front-end template that's how live wired is the data binding out of the box now that we uncovered the mystery of how livewire works let's proceed to this tutorial's actual goal let's add in another html element for our content later on we will be adding a post table in our database to save our post in our record we will create a property in our post component class file and match it with the form element wire model in our front end template there is a built-in live wire actions click one of the built-in features in livewire that handles the click event other events are available in live wires such as keydown hover and change you can refer to their documentation i will put the link in the description below in our case we are adding an html form element button to handle the click event i'm going to add a random text to demonstrate to you that whatever text you put in the wire click you also add the same function name to your component class [Music] i'm going to copy these text right here and when we open our post class file we create a function that matches with what we just wrote in the frontend post.blade template so in this example let's just change the value of the public variable title [Music] when we go back to the front end and click the button we can see that the text box for the title is set to the value we just put in our post class file so that's how we handle events in livewire we can run a backend code from the front end without us having to code actual javascript that's how powerful livewire is now let's rename this to save so that we can work with a much meaningful name in our example [Music] let's remove this line right here to add the real functionality of our save event we will be saving our post in our database post table to do that we have to create another model and migration file for our post table like so type in php artisan make model post dash dash migrations to create our post model along with a migration file let's add the title the description and the user id before we run our migration now let's run the migration file as you can see we now have a post table ready for our crud operations let's save our post every time we click the button save in the front end to do that let's import our post model in our post livewire component class let's prepare the data that we are going to save in our database we put in our title and content public variable to match our database field in this example [Music] we save our data by typing in post double colon create and passing in the data variable in the parameter like so we also need to add a protected fillable variable in our model class post otherwise laravel will throw us an exception [Music] we also need to pass the user id of the current user to add a filter by user to our post records [Music] [Music] [Music] [Music] let's try to save our post as you can see we can save our post just by triggering the back end code from the front end we can add as many events as we want with live wire depending on the type of event that we want to emit we can see a little bit of a problem here every time we click save the texts are not removed in the text boxes to solve that let's create a function that kind of like sets all the public variables we have in our class back to empty and call that function right after the post create in our save function [Music] i think that looks pretty good now let's see it in action [Music] moving on let's add a bit of validation to our form in livewire there is a built-in component function called hydrate that always runs whenever a class property is updated let's put our validation example in hydrate function to demonstrate the power of livewire effectively [Music] [Music] [Music] let us also update our post blade template to make the error appear every time a validation error occurs [Music] as you can see every time we type in and there is a validation error we automatically see our form displays the error in real time and we didn't even have to write a javascript to achieve this livewire does it for us right out of the box let us add the read functionality for our little application we will add a simple data table in our front end to display the list of our created posts of course we will filter our post by user id [Music] [Music] [Music] [Music] [Music] [Music] now that we added our simple data table it's quite reasonable that we should add a bit of convenience for us when displaying our data table and adding pagination is the simple answer to that we didn't want to load all our data all at once on the same page that is to prevent performance issues we should find a way not to load all the data in a single blow and want to solve that is by pagination livewire pagination implementation is pretty straightforward so it is easy for you to wrap your head around with it and the way we do that in livewire is we just put use with pagination at the top of our component class file and add pagination to our post [Music] model now let's add in the pagination link on the front end as you can see with a little bit of configuration we were able to achieve simple pagination instantly with live wire but we got a little bit of a problem here since we just mixed up all the properties in one livewire component file and the form validations we encounter a logical error that is evident every time we click on one of the pagination links this form validation in the hydrate function is the one that's causing our pagination to stop to solve this we will separate all the form related html elements in another livewire component so just like we did before we will add another livewire component in this example i will create another livewire component called post form to separate our logic we will then add the post form view in our post.blade.php as child component [Music] [Music] [Music] remove this portion in here and put this in the postform.blade template we will then add the post form template in the parent component as you can see it's already working since we separated the logic for our pagination and form elements there are many times that we need to isolate specific logics in our livewire component and this isolation that we did is one of those few good examples because each time a property changes livewire components makes a round trip to the server back to the front end and primarily when we use hydrate lifecycle hook with form validation it prevents us from executing other stuff in our code because it throws us a validation exception in the next video we will add a modal to wrap our form element so that it doesn't float around in the design and with that we will learn how to add event listeners in the front end and the back end we will also learn how to emit events from the backend to the front end and vice versa there you go i hope you find this video valuable in helping you out to understand livewire better in a real world application example so if you enjoyed this video give it a thumbs up please hit subscribe if you are new to this channel and you can also get notified by clicking the notification bell whenever a new video is up so stay tuned and see you in the next video

Channel: Jack of Traits

Views: 7,417

Keywords: laravel livewire, laravel livewire tutorial, laravel livewire basics, laravel tutorial for beginners, laravel livewire for beginners, pagination livewire, creating components, data binding, actions

Id: mMRTyAHNIDI

Length: 19min 45sec (1185 seconds)

Published: Sun Aug 23 2020