Laravel 8 Ajax CRUD | Saving data into database

hi welcome to this channel today we are going to see how to implement ajax crud operation in laravel we will use uddra data table for listing data from database this will help us for searching and pagination of results let's get started [Music] create new database and rename to laravel 8 ajax crud copy this database name and use it on end file to the db underscore database value then run project by entering php artisan serve in terminal as you can see we are on laravel now before continue we have to install uddra data table package just go to google and search for uddra data table click on first link here you will learn how you can use this api this package is created to handle server-side works of data tables jquery plugin via ajax option by using eloquent orm fluent query builder or collection to install this package we will use this command just copy this and paste in terminal and hit enter once utrec package installed we have to update config app.php file copy this and paste here in service providers and copy this then paste into these aliases then run this command for publishing our package now we already installed yudra package in our project we are going to download all necessary plugins and libraries for our project just go to google and search for jquery click on first link click on download button then click download the compressed production jquery 3.6.0 link then save the file once download done copy this to your desired directory back to google and search for get bootstrap click on first link as you can see the current version is 5.0.2 but for this tutorial we are going to download version 4.6 click on this download button then download this compiled css and js once download finished move this to your desired directory back to google and search for data table gethub then click on this first gethub link click on releases link once download finished move this to your desired directory back to google and search for sweet alert too click on this first link click on this get up icon click on this release link we are going to download this 11.0 version we will download both css and js minified files once download finished move these two files to your desired directory back to google and search for toastergathub click on this first link click on this latest release link then click here to download toaster version 2.1.1 once download finished move this to your desired directory now we have all required files for our project go to project public folder and create new folder and rename to jquery copy downloaded jquery file into this jquery folder create another folder and rename to bootstrap open downloaded bootstrap zip file then drop css and js files into bootstrap folder create another folder and rename to data table open downloaded data tables zip file and drop all files inside media folder into created data table folder create another folder and rename to suitealert2 then copy both css and js suite alert 2 minified files into sweet alert 2 folder create new folder and rename to toaster open downloaded totes rezip file and drop css and js minified files inside build folder into toaster folder now we placed all required files in project as expected back to visual studio code and enter php artisan make colon controller countries controller command in terminal this is countries controller php file go to web.php and import countries controller here add new get root for countries list let's create this index method inside countries controller class create this view as you can see we have now countries list page with this hello message let's include necessary files on this page first of all we have to add this meta tag for holding csrf token this will help us to send ajax requests with csrf token now link bootstrap css file on this page link data table css files on this page link suite alert 2 css file on this page link toaster css file on this page include jquery on this page include bootstrap js files on this page include data table js files on this page include suitealert2js file on this page include toaster.js file on this page make sure that you included the css and js files on this page then add this toast option for preventing duplicate on showing for csrf add the following headers like this let's start designing this page using bootstrap classes as you can see we have this page layout with add new country form make country model by entering php artisan make colon model country-m command in terminal this is a created country model file this is a created countries table migration file let's add country name and capital city columns on this table structure back to country model and add feeable columns and after this run php artisan migrate command in terminal after migration we have these tables as you can see we have now countries table this is the structure of countries table add new post route for adding new country into database use this root name to add new country form action attribute don't forget csrf on this form let's use this id to submit this form with ajax let's add error spans under each input field for displaying validation errors this text must equal to this and this text must equal to this back to before send function and add the following line if there are validation errors let's display them under each input field otherwise reset form and show success alert let's add this add country method inside countries controller class before continue make sure that you imported the country model on this controller now validate form inputs country name must be required and unique in countries table capital city must be required if there are validation errors return them let's test validation as you can see we have validation errors under each input field let's continue if there is no validation error insert new country into database let's test as you can see we have this alert that shows us that the new country has been successfully saved by looking into countries table the new country has been inserted let's try another country as you can see this country had been inserted into countries table let's show toaster instead of showing this alert let's test as you can see we have this success toaster message that shows us that the new country has been successfully saved into database friends this is how you can save data into database with ajax

Channel: Irebe Library

Views: 5,778

Keywords: irebe library, yajra, yajra datatable, datatables, laravel 8 ajax crud, laravel crud, ajax crud

Id: oRcedN9ooOA

Length: 25min 47sec (1547 seconds)

Published: Sun Jul 04 2021