Ajax call using Laravel | Server side datatable | Laravel Yajra datatable CRUD

hello everyone today in this video i will explain how you can send an ajax call using laravel so i'm going to use data table with ajax so what is actually i'm going to use server-side data tables what is the difference between server side and client-side to data table so if you have a bulk of data and you are using server side sorry you are using client-side data table so your performance will be affected because when you sort any column it will get all the data from the database and return back to the user and when user click in the search bar and search anything it will fetch all the data from the server and put them in the website so it will create performance issue so that's why we are going to use the server side data table and one more advantage is that we are sending we are sending ejects request and our our page is not going to refresh even we are sending requests to the server and getting the response from the server so without wasting any time let's start it i have already this dashboard and also a book controller i open this book so yeah this is empty and we are going to build this okay i'm following a blog and directly i'm using laravel it and yeah this blog is for laravel and you can use any version it's upon you okay so i'm going to copy this html template okay let's copy this and go to the web page okay sorry web file uh this is the web route i have set a prefix of admin okay like this and i have named this books and my controller name is books controller and i have one method inside my book controller which is the name is index and i have named this index okay and let's switch to the book controller and book controller having one index and index container view and this view is inside the view and inside the view an admin directory and inside the admin a book and book having an index this file okay we are going to paste this content here because i'm using a section here because i am renting uh this section here inside my main layout file okay and our uh our style could be rendered there okay this i'm going to paste this okay let's save this one and refresh the web page yeah we have a basic table layout and a button and this heading okay so now we are going to we have actually one more thing which is a bootstrap model and currently it's not working because we need to set up this so let's go back and we have three style sheets and three and three to four javascript file and i already import these file okay let me check yeah this files okay with token and these are the data table scripts okay so if you are not going if you will not add this script you are a table should not work okay you can add any cdn or file so let's go there and set up this ajax call and actually we need to set first to controller okay let's go to the controller and yeah oops we are back to the main page so let's go to the ajax current and inside the app we need to go to the control http controller and inside the controller we have a book controller here okay [Music] we have index so let's copy all of thing from the index expecting this view okay so let's go to the index controller and inside the index i'm pasting this okay so admin dot book dot index okay so let's add this book model at the top okay now it's edited at the top this one okay and book letters it's getting the latest book and storing them inside the variable and we are passing this variable uh we are fetching this list there so we don't need to add this thing i think we are going to let's remove this line and paste this variable here and we need to add also a data table we need to install the laravel data table so i think i already installed it so let me check in my composer file and do your jira data table no i did not install so let's go there and install this lauravell data table okay the phone open the first link or second that's on you it's both same let's copy this composer command and go to the terminal and place this command inside the terminal okay and it will install uh laravel urgently table for you okay so for now we don't have okay it's edited the laravel data table and our installation is going to complete successfully yeah our installation is completed successfully and now it's generating the file yeah our oops our installation is successfully completed let's close this terminal and go to this data table and add it so i add this at the top so why it's not displaying it table i don't know why it's not displaying so let's go there and check this [Music] so it's inside the data table and provider so let me check let me add this use illuminate no i don't need to eliminate because we are using custom package i think we need to import this oh no need to find its path okay let's go back to this go to the [Music] right now so let's go there and let's data table let me use this table give me a second and i'm going to come back [Music] okay i came back and actually we need to add this use data table at the top there oops at the top and use this data table not the table is not dedicated to also pass a request class here it's a request and we are fetching the books latest book from the book model and we are returning this to this and we are opening this we are opening this if our eggs call is not going to work if we comment out this should not get any issue okay we are getting back and let's save this one and go to the view admin dashboard and it says nothing okay so okay let me add this because we need to add this inside the script and i'm using in this outside of the outside of the ajax because if the ajax is not going to work you can open this out of the hx call so let's add this box and return this and refresh this again and we don't have any issue and our table is not working because we are not returning anything okay we have only one book okay i have seeded one book here so let's go there and let me check this book is working so let's refresh and yeah book is successfully working let's close this extra file and go back takes too much time because i'm uh setting everything that's why it takes some time so okay let's go back go to the view file let's go and step back go to the resources then views and then book blade okay it's a book there and now we need to fetch the index file data okay let's uh this is for save okay we are going to implement only index for now okay let's go there and implement this there and also add this one more because it's missing okay now it's and and let's add this is a book dot index and his title and that is author okay let's this is for actions like we are displaying buttons uh edit and delete okay and it's processing and yeah we have two data there we have data one data is there laravel and its title is also laravel so why our table is uh um so let me fix this issue okay if the issue is that we have three uh table headers and we have only one oh we have only two uh three data is there so that's what it's look like let's refresh this and test it again and yeah now our data table is successfully working we can also sort this but we have only one data that's why it's not sorting correctly okay we have two buttons and these buttons are coming from the controller okay this is the first button and this is the second button okay let's comment this and it will not display it will display only edit button not delete okay we are just okay that's good so our index is successfully working let me add one more author there okay we are actually displaying the author manually so the title is something like php and it's uh you need something and let's refresh it while displaying the author okay this name is title it should be uh author let's refresh it and check it yeah now it's working it's a taylor hotwell and usually okay our index is successfully working and now we are going to save a new book from this one from this using uh moodle okay let's [Music] create a moodle there okay we go there we have a form okay we have moodle there but why it's not opening the moodle so let me check this is a moodle title we have ajax moodle and when we are going to click on create new book create new book and we are hitting this create new model and why it's not opening this what's the issue let me fix this issue it's a model heading and yeah give me a minute for uh some reason this moodle is not working okay i'm going to add another moodle uh i'm using bootstrap 4 that's why i think this is the issue that's why it's not going to put some moodle okay let me go there it's starting moodle is starting from there and before the form this is the moodle body and we need to cut this from motorbody and this is a modern body okay and we need to actually remove these uh already remove these dips okay let me copy these all okay and paste them there and we need to also add one more button which is a launch model and we need to replace the button there okay we have button at the top uh this button okay and let's cut this and launch moodle to uh and new book okay let's save this one and refresh hopefully it will work okay let's click on this and yeah it's successfully working and it just also remove this so uh actually we need to remove this this is not looking let's go there and actually we are not going to remove this one okay let's copy them and replace with this button okay let's cut this and also cut this thing and replace it let's refresh it i need to also make it to a text field not text area so it's a input and type is text and name is author and [Music] okay let's save this one and refresh it you need to add a margin there okay yeah now it's working and it's inside the form so we need to add a margin first at the top of the form okay i need to add a margin there margin top and mutton top is two i think oh it's not working because i need to add them launch moodle button let me find the button there okay this button and we need to add this is enough for this tutorial and yeah it's not working what's happening man it's not working actually this is our form and before our form we need to assign this to a table and hopefully no man it's not working okay let's uh i mean this takes too much time i don't know why it's not adding the margin top okay so let's fix this when we are opening the model we need to save the values into the database and we have um this moodle where is the moodle uh where is the where it's starting from let me go to this one and need to add um yeah we need to add this id and name and to our form where is the form and this one we need to replace with this one let's add a space here and it's uh we need to add the input field okay you need to add also uh empty field for when we are going to edit this form okay it's already added so let's go to this input field and we need to copy this id title i um come here with the example because people learn from the example okay uh title and another one is the author okay name is author and space there and we have a save button name should be uh save dtn okay let's add a script here for handling saving okay uh let me and there this is for save let's copy this and yeah that's it we are when we click on this create new book code button is saved vtn it's uh saved btn should be uh save book okay it will override this existing saving okay so book id should be empty book form can be reset and model heading okay we are not sending any form yeah let me yeah save script is there sorry guys i'm confused with this one okay when you click on this save video and they are following an event another page is not going to refresh and it should be saved in this button should be uh save button this save changes button should be saved and it should be actually saving like this book form it's a book form okay see you you're serializing this book so it's book dot so not book start store and you're getting the book and we are closing this model and we are reloading our data table okay so if you in case of any error we are catching this here and go to the index folder and then define a public function and it's a store method inside the store you need a request and request parameter and let's go there okay let it takes too much time guys because we are implementing this from our real life example let's go here inside the store method and inside store method we are updating and creating both okay i will explain it uh we have our turnbook already it's request already and the body is this author against this id and this id is coming from the book id which is there let me in this book id okay you're catching this book id there and passing this id and it will update this id with these author and title okay and if you have uh we don't have any book it will create a book from its title and other that's good and response the book saved successfully let's go to the index page and we have book and we are sending this to um we need to create our route there it's a web.hp file and let me copy this and paste okay let me hide this it's weird looking very weird okay books and books controller and method is uh it's a store okay let's refresh it and test it hopefully we have errors because we are implementing this very other detail is this save changes and [Music] let's go if you want to track this what happened let's go to this book and yeah nothing is happen what's the issue let me fix this check my database so it's books and [Music] no our record is not inserted let's click on this changes it's not hitting any server so let's fix this issue we have a store method there and inside clicking on the save btn and this is going to saving it's not to saving because we are adding this uh in the database this is a cbt and oh we don't have any id we have a name there so let's add some save ptn we have a save video there and let's refresh it and test it again let's click on add new book and uh this is i'm going to implement a very weird title and author and yeah now we have a book and with the 500 error what's the error error is oh we forgot to add this into the fillable book model so it's throwing the exception of fillable so let's add this protected fill able we have a two field name and the author okay let's save this one and refresh it again hopefully it should works it should work okay let's add this and save changes and it's again with the error of [Music] journal error what's the error let me go there inside the network tab and check this error what's happen it says title does not have a default value okay we are getting books author and we don't have any mother and we our title is not passing there so let's fix this issue okay [Music] yeah this text field and contain a title and this title okay don't need to add this value there okay and again this is a author and this is not we have a book form let's copy this book form we are actually initializing this table and we are sending this we are citilizing this form and sending this to a book store and yeah that's good okay let me return this here we are not really hitting that's why it's not displaying us validation error we'll implement this in a minute okay after fixing this issue let's refresh why our values are not going to the server uh okay it's a msu world and it's through oh it's not going through any error yeah author is this and yeah now our data is successfully working twitter is answered this question um error that error is coming from [Music] okay let me check that if request to have an id let's execute this okay and else if we don't have any id let's execute this thing only create create and we don't need this [Music] what's happening there it's it should be close with the what's the hell is this it's not working totally [Music] let's go there and test it again okay it's uh miss world and let's click on save and it's still through let's go back okay my battery is very low i'm going to come back after spending lot of time now i [Music] find that i'm passing this a title i am passing this a name not a title and it's another that's why it's not sending our value to the phone okay let's oops let's refresh it and hide this okay uh let's send the new value here it's uh ms word and what the name is that nazi get some me okay let's click on save changes and yeah it's now a new value is added there and it's still saving it's saving because of this one right oh not this one let's commit this and it's saving because of yeah it's saving because of this one and now it's not hiding because of our model id is changed okay so let me fix this issue it's an example moodle and this one is uh it is the moodle id yeah this one and uh let's let me check our values saved or not click on it and it says book saved successfully let's go to the books and check yeah now it's inserted the record right and let's try it again and check it if it's hiding the idea or not okay it's a c sharp book okay and the author is again okay let's click on save and now our moodle is closed and our value is not our moodle is not closing properly and this is the issue uh we need to fix this issue by using a next stop property okay and let's go to the stack overflow i already fixed this issue in another video okay bootstrap i'm implementing this in a way that you can learn a lot with the real life example i'm solving the issues and you also learn that how to fix these issues okay that's why this video is going too long okay bootstrap what the hell is this bootstrap moodle what the hell is this model is not closing not closing properly okay let's uh open this in a new tab let's go no this should not work this is also not work but the one thing is that it is already implemented uh the more the property is i need to remove that moodle okay let me uh check this and it's a moodle and we need to call a remove method here remove and this should work hopefully let's test this again again random value so this one close and no it's not working let me fix this issue uh yeah yeah yeah it's not closing man no no it's not too bubbly and forgot what's the issue uh sorry how to remove the issue again let's close this one i'll give you a minute and come back okay uh our moodle is not closing because i'm passing this id because we don't need to provide id it's a class model vector we need to pass this class and remove this class from the our body okay let's so refresh the webpage and test it again click on add new book [Music] it's hotwheel and let's save this one and it's saved and our generator table is successfully refreshed okay it's a laravel and it's a killer what will you can send or descend them by using any column okay let's work on this edit and delete okay let's go to the blog and copy the edit functionality which is uh edit okay click on this and this is our edit functionality let's copy this and go to the page and yeah paste it there it's uh it's commented it's uh edit button like added call okay it's editing it's a book dot index and it's copying this book already and yeah everything is now working properly so let me add this this is an id's that's good and inside the web how we need to add an edit there okay let's go oh what's happening let's copy this and paste it there it's a get method and we need to add its uh books and it's an id what a hell is this it's an id and then slash edit so book slash id and then edit that's good then book controller and it's an edit and name this book dot edit okay and let's define this method there okay public function and it's added okay inside that it we need to pass this request and request having a request parameter and we need to return this request after searching okay actually we need to pause receive an id there okay find this id and return this response back okay we have a book model there we are going to find this id find our fail it will throw exception if sorry it will catch the exception if i did not find it through 404 then not found exception okay we are finding this and returning this to the webpage and inside this we are receiving uh this dot already book id and we are passing this so it's index it's not an index dot edit okay slash id and slash edit then it's good good and everything is hopefully it should perhaps okay and and this uh oh it says route book dot headed sugar okay index plate it's a missing parameter so let's use a url method here because it's not books slash uh it's a book slash it's book id and then slash edit hopefully this should work yeah now it's very good let's click on edit and it's not opening the moodle because of our moodle is changed there so it's a example model so example let me check this uh we are spelling this correctly okay we are not spelling this correctly because it's a e not a inside the model let's click on edit and it's not initializing the bootstrap model i think our this route is not working let me open the console there what's the issue okay it's throwing error fail to respond to 404 oh it says it's going to books slash 5 slash edit and it's throwing an exception exception is that symphony not found exception okay it's not finding these uh not find this id okay let me go to the controller and inside the controller we are we have a row and instead we have a row id we are passing this that's good and here we are finding the book and returning this book let me check there and we are turning it back okay the response level by default return the response in adjacent format okay we don't need to provide return response inside the json okay so books.index actually we need to hit this we are not eating this perfectly so let me check it again it's a url method inside the url we have books okay me see close the extra things okay let's close this also this one and yeah [Music] [Music] getting the id from the [Music] our url is let's throw in the not from the exception let me fix this issue hey guys i came back and i why it's not working because it's not going it's going to book slash id then edit because we are inside let me go to the php file and we are adding a prefix admin and we are inside book slash id and that's why it's not working okay let's go to the end page and here we need to add an admin there admin slash book slash id let's refresh it and test it again okay and let's click on the first one and now our moodle is successfully opening and everything is working okay let's click on save changes and yeah it's successfully updated let's click on and update this updated let's click on this save and it's c-sharp updated okay that's good it's not updating because of we are inside the controller we defined that if the record does not exist it will update it will update the if you go ahead and let's click on update it will not going to add any entry okay because uh for and you have nine entries let's edit this php and you will save this one and it did not edit new record oh it's edit the new record i don't know why it's i did this let me fix that yeah fix this issue here okay we need to we don't need to add this there okay let's remove them from there let's save this one refresh it and test it again again again okay let's uh it's a php and save we have 11 records let's save it again no it's not updating good that's good okay it's not updating right now that's very good now we need to work on the delete and delete this record okay let's implement this and let me copy this from there because we don't have time okay let's copy this [Music] okay [Music] destroy method and let me add the delete functionality there okay let's oops okay let's go there and copy the delete call there there is a delete delete is there okay okay actually we need to fix that issue if and if the user is sure then we are going to delete this okay that is your then we are going to delete this let me add this i am fixing this issue because if the user did not click if the user click on the uh the user click on any button like if you click on cancel it will delete the issue okay let me remove this and test this with real life with real example okay it's going to delete it's a books dot it's a book notebook and why it's going to store okay i think i copied the wrong thing yeah i know it's good it's going to book dot store why it's going to store method it's not going to delete so let me add um delete [Music] we have 11 records let's delete this php are you sure want to delete yes i want to do it and it says oh i actually forgot to add an admin there okay let's add an admin there and refresh the page again and yeah let's click on delete okay and yeah it successfully deleted the record from the data table okay let's click on delete again and it will remove the php again yeah it's deleted the php okay we have nine records there but what's the problem when i click on delete and cancel we have nine records let's click on cancel and yeah it's deleted the record but in this case it should not delete okay that's why i implemented implementing the confirm method inside the if statement because this developer forgot to add this inside the if okay that's why i'm doing it okay let's cut this um put this here and inside if statement so now it's going to delete anything if i cancel if i click on the cancel let's delete it mso world and now ms word is deleted let's click on delete and cancel it and now it's not going to delete anything okay when i click on the cancel that's good that's it for this video hope you learned a lot from this video and i implemented this whole ajax scenario with real errors when you are going to implement this you face a lot of errors and i told you in this video that how you can fix these issues okay hopefully you should learn a lot from this video and if you have any question or query let's discuss it in a comment box okay bye

Channel: Career Development Lab

Views: 2,942

Keywords: laravel, laravel datatable, laravel yajra, laravel yajra datatable, laravel server side datatable, jquery datatable, jquery server side datatable, ajax call, ajax crud, ajax crud in laravel, ajax call using datatable, server side rendoring, jquery ajax, cdl, hadayat niazi, bootsrap modal, jquery crud using bootstrap modal, same page for create and update, insert data using bootstrap modal in laravel

Id: Shzoecjru7E

Length: 51min 0sec (3060 seconds)

Published: Sat Jun 19 2021