Project Setup and Paginations with Vue | Lets Build Some Datatables With Laravel and Vue.js

so let's start by talking about our setup here so what i've done is i have a fresh installation of laravel and i have also defined a few models here uh models and i have also defined a few models here for classes sections and student so each string belonging to a certain class in a section so if we go ahead and check our migration files as you can see we have a column called name for a class and under sections we have class id belonging to so each section belongs to a certain class and name for this section and we have students table so each student belongs to a certain class and section and we have the name email address and phone number for that specific students and i have also defined a few seeders for classes sections and students so classes cedar has class one two three four five section cedar has section a and section b for each class that is class one two three four five we'll have section a and b and students cedar i have created a factory for the students which will create 50 records so if you go ahead and check out our students factory then you can see we have name email phone number address class id and section id so for the class id and section id what we are doing here is we are randomly defining a class id between one and five and for the section id what we are doing is we are querying the section model where the class id is this class id and we'll get the first record and we'll set it to the section id and maybe one more thing that we need to do here is this will get the model so we need to define the section id and the id okay this will work now let's go ahead and migrate our database so i have already defined a database if i created a database and defined now in an enb file what i'm going to do here is i'll just do php artisan my great brush and i also want to run this seed our migration has been completed so if you go ahead and check our database as you can see we have class one two three four five sections a and b for each class and for the students we have 50 records containing uh all the necessary data along with the specific class and section id so this is working fine and the next thing okay let me just also show the students.blade.p file i have defined backend folder which consists of studentsofblade.php and this is this consists of all the markup that we need in order to develop the data tables so if we go ahead and check our browser you can see that we are displaying this data tables here so we'll be replacing all these with our dynamic data fetching all the records from our database and we'll be implementing everything so our next step that we need to do is let's go to laravel ui and we'll install this package in order to install the view so we'll be using laravel ui in order to install view so i'll just copy this and is that now command line hit enter and i'll be right back once this finishes installing laravel ui has been successfully installed and our next step is to create the scaffolding for view let's go ahead and copy and paste that here so this scaffolding has been done and our next step is i'll just quickly install the npm run the npm install and npm run dev and be right back so i have successfully executed the npm install command and let's go ahead and run the npo run dev hit enter and it finished but we need to run mix again so what we can now actually do is run again npm run dev and this time it will compile successfully so it will give an error for the first time so keep that in mind and the compilation has been successful so now let's go ahead and in our students.blade.php what we can do is in order to test our app what we can do is since we have a component since we have example component and it is registered as example component in our app.js what we can actually do is in our students update dot php let's keep that let's call that example component save that and let's go ahead and reload our browser okay one more thing that we need to do is let's go ahead and we need to define an id of app in our main root element so okay this is done and the next thing that we need to do is let's go to the master.blade.php and on the bottom we need to we also need to call the app.js file since this is the file that is actually so in our public js app.js this is the file that is actually get compiled to we need to call that app.js file yes with js and app.js if that let's go ahead and reload our browser once again and this time view gs is detected as you can see we are seeing the example component here and in our view tab okay i don't see that view tab here so in order to use the pagination feature first let's go ahead and define the routes for this so what we need to do is let's go to the routes and api dot php and define a route student controller class and on the index page index function so let's go to the student controller and define uh here what i want to do is gonna get all the students and in here we'll be using api resources to format our data so let's go ahead in our terminal and create a resource name it student resource and maybe we also need to provide uh i don't remember okay we don't need it maybe okay let's create that the resource has been created so in our resources during resource what we are gonna do here is let's customize this a little bit so we'll be sending the name as this name so the reason we are doing this here is that i wanna display the class and section for the specific student so i want to format that and also format the created add date here the name the email address number and section so this section and name so we haven't defined the relation yet the class will be this class name so now what we need to okay we also need to send the id so don't forget to send the student id so this will be needed when we are looping in the looping to each of the students using for loop in viewjs so this id will be the unique identifier for each data now let's go to the student model in our student dot php let's define two functions two relations so the first will be classes return this belongs to classes class and we also need to specify the foreign key since we have different table uh different model name and the different foreign key so we need to specify that and for this section will be okay i think we can actually define this as class and we want to return this belongs to section class and we don't need the foreign key here so in our student controller since we are getting all the students then i want to return the student resource collection with the value of students okay now let's go ahead and test this out you know api.php when we hit the slash api students route we want to go to the student controller class on the index function so in the student controller what we are doing is we are fetching all the students and what we can actually do here is we can also uh perform the eager loading so we i want to get all the students along with their class and section and i want to get these records okay so let's go ahead and test this on our browser what we can actually do is we can go here and append an api students okay we are getting all the data so i should use actually use postman but it's fine it's fine for now let's go ahead and now display this records here so let's define a new component viewjs component that will be called as students index so okay we can define that in the components folder itself it's up to you wherever you want to define you can actually create a different folder for each student a different folder for students and another folder for another model so that makes it quite easy and students index dot view so this is b this will be our v file and first let's go ahead and register this in our app.js what i'll do is i'll just copy this line and define it as students index which is inside and one more thing that i want to do here is i will rename this to capital letters and write in camel case format okay so now it is inside slash components last students index dot view dot default let's save that and everything should work fine let me just remove these and in our students art students index dot view let's define a new template for view and let's also define the script no it's not this crypt javascript dot view and here what i want what i'm gonna do is i'm gonna copy this whole div cut this whole div and paste that you know template save and maybe we need to remove this comments this will be imagination links that we'll be using later and everything should work fine save that and okay we don't need the javascript part for now since we are only testing whether it's working or not and we need to define we need to call the students index view file let's save that and don't forget to run the java it's run the npm run dev or we can even run npm run watch so our javascript has been compiled and let's go ahead and check that on our browser so everything is working as usual and if you go ahead and inspect again we have that problem okay we have view and we have the students index component so since we haven't defined any data or methods here this is empty for now so let's go ahead and define some data properties or in our vgs file so for that let's go to the students index and in here i want to define a data property which is going to be a function and it's going to return an object so here what i'm going to do is i'm going to define a property called students which is gonna be an empty object and the next step that we'll be doing here is whenever the component is mounted what i want to do is i want to call the xcos request here so xus is available globally on every view component so we don't need to import that so i want to call the flash api slash students route and making some mistakes okay so this is gonna make the api request to slash api slash student and then what i'm gonna do is we will receive a response and when i receive that response then what i want to do is i want to store that data in our students data property so this student is going to be response dot data is going to be the default and since the since we are using the resource api resources then what it's going to do is it is going to wrap our records in the data root element so for that what we need to do is we need to append one more data here so let's save that and let's go to the browser and reload once again everything is working as expected as usual so if you go ahead and check this student index then you can see we have a student's object with a value of 50 items so each object having all the required records as you can see we have address class email id name phone number and section everything is working fine so in order to display these data in the data table what we need to do is we need to loop through each of these so here what i'm gonna do is okay let's loop so v for students student in students and since we are using for loop then i i need to specify a key so that will be student dot id and make sure to spell that correctly now what we need to do is we need to specify all of these properties here so this will be student dot name let me just copy this and this one will be section save that and let's go ahead and again reload our browser and everything should work as expected and as you can see we have a record student's record being displayed here so everything is working properly now one more thing that is the created at since we are since okay we haven't we are not passing the created ad in our api resource probably so you know student resource what we need to do is we nee oh we also need the created ad and let's format this properly this will be this created at and what i want to do is i want to format this to date formatted date string maybe i just forgot what it was we'll just check it okay it's good so we can actually apply all of the laravel related stops here which will which we can manipulate and show it in the front end so this is quite good and now the only thing that we are here for is the pagination using view so for that what we need to do is we need to install a package called laravel view pagination so this is a npm package so for that let's go ahead and install this laravel view vaccination open our terminal okay let's create a new one npm install lara will be pagination and i'll be right back once this finishes installing so the laravel view imagination package has been installed successfully and the next step that we need to do is we need to register that component let's go ahead and copy that in our app.js save that paste that and in order to use that component we can save this and in order to use that component what we need to do is we need to define this pagination and send the data and pagination function so here let's go to the students index and inside this div i'm gonna paste that and our data will be students and on pagination change page we need to execute a function so this will be let's define new function called get students and let's define that this will be methods which is going to be a function and here i want to call a new function [Music] that is get students and i want to call this function in our get students method let's format that and on the mounted what i want to do is i want to call get students method now everything should work as expected so imagination we are sending the data as students since we have a student's data and on every pagination change page what i want to do is i want to call the get students i want to call the guest students method and okay one more thing that we need to do is i think there's an error here we need to send a parameter of page which will be one by default and the methods is gonna be an object not a function and one more thing that is since we are paginating so what we need to do is we need to specify the parameter as page as you can see in here it's mentioned so on the method since we are using the get results it gets gets a parameter of page so every time it calls the translation change page is going to call the get results and send the pagination value so if the page is two then it will send the parameter as uh parameter value is two and if the page is three then it will send the parameter value is three and i want to go to example results and p is equal to this page so i need to call that here the page will be page save that and in our student controller we also need to perform the pagination so this will be paginate and i wanna i wanna fetch 10 records at a time so let's go ahead and reload our browser everything should work fine and okay there's a problem on the pagination part let's go ahead and check out invalid prop type check field for prop data expected object got array okay i found the bug so since we were doing response response.data.data so that was a problem so what we need to do is we only need to send the response.data and everything else will be done by this package so what we can do here is we can remove this extra line of data here and now if we go ahead and reload our browser everything should work as expected but we don't see any results so what's the problem we have a data of 10 okay what we also need to do is now here we need to specify the student start data like that and reload again so now everything should work fine and if i click on second page then the data are reloaded and without any page refreshes as you can see so the last thing that we need to do in this video is to change the pagination values depending on this value so let's go ahead and define the property here so the first thing that we need is a data property called paginate so this will be 10 by default and on our paginate select tag where's that okay we have that here so select what we want to do is we want to remodel this with the paginate let's save that and let's check it everything is working fine or not so we have view we have paginate which is 10 if i go ahead and change that to 20 that gets 20 so our v model is working fine so now what we can do is we'll be sending that passionate value to our api so here what we can do is let's send that paginate equal to imaginate okay this paginate we need we can actually use the request function here so let's go ahead and define that paginate value so we'll be receiving that in the request paginate property so if we don't get any value then we'll be using 10 by default and here now we can actually use this passionate so it will be 10 by default and if we whenever we change that from our view application that will make a new api request and then this value will be updated and according to that we'll get the student's record one more thing that we need to do is we need to watch for this passionate property where's that so whenever this paginate property changes will be executing another function so we need to watch for this fascinating property so let's define a watcher and this is gonna be a function i think okay this is not gonna be a function this is a object so we are going to watch for the paginate so whenever the paginate value changes will be exerting the function called so what we want to do here is we want to fetch the students again so what we can actually do is we can call the get students method here so what it is going to do is since we are watching for the paginate property so every time this management value changes then this get students function will be called and here what we are doing is we are by default sending the page as one and since we have the val since we have the v model we we are binding this with the paginate value so we don't need to send anything from here so this will be set by uh set to 20 30 10 by default and according to that our data will be paginated so for on every change this will this function will be called and according to the according to that we'll get the records on our front end so now everything should work as expected so if we save and reload our browser now we are getting 10 records by default if i go ahead and go ahead and change that to 20 then i should see 20 records but it's not working here so we have a value of 508 as 20 and maybe this is not working okay i made a silly mistake here that is we need to append a ampersand here save that again [Music] and let's go ahead and reload our browser once again so the way i knew that error is because i checked on the network tab and the an ampersand was missing here so now again let's take it once again last time and if i go ahead and change that to 20 then we should see 20 records and yes everything is working fine but this much for this video so in the next part we'll be implementing the search feature so we'll be uh implementing the uh searching for multiple columns searching by multiple columns and so if you one last reminder that if you like the content do subscribe to this channel i'll be posting some more content related to vue laravel live wire in the future so stay tuned for that and i'll see in the next one

Channel: Tapan Sharma

Views: 1,841

Keywords: laravel datatables, bulk delete using vue.js, laravel vue.js, laravel, search multiple columns using vue.js, eager loading in laravel, datatables, filtering using vue.js, vue.js, search through relationships in laravel, bulk delete using laravel, tapan sharma, vue.js pagination, vue.js datatables, laravel search, vue.js search, laravel pagination, laravel datatables tutorial, laravel datatables crud, laravel datatables ajax, vue 2

Id: gUt1maxqjpQ

Length: 27min 57sec (1677 seconds)

Published: Tue Apr 13 2021