Laravel 9 Ajax C.R.U.D Tutorial

For articles in Indonesian

On this occasion, I want to share a Laravel 9 C.R.U.D Tutorial using Ajax. And here we will implement image upload using Ajax and use jquery Datatable plugin.

What is Ajax? “According to Wikipedia, Ajax is a set of web development techniques that uses various web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behaviour of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly utilize JSON instead of XML”

Our first step will be to install the laravel 9 framework and package datatable using composer .

Run this command “composer create-project laravel/laravel laravel-ajax-crud ”. After that, we will install the Datatable package by running this command “composer require yajra/laravel-datatables:^ 9.0”.

Don’t forget to publish the configuration from yajra laravel datatable package by running this command “php artisan vendor:publish –tag=datatables”

create a new layout as the main template of the C.R.U.D application that will be made. Here we will use bootstrap

Create a main.blade.php file in the layouts folder and add the following code :

main.blade.php

In the view folder create a crud folder and in it add the two blade files

index.blade.php

action.blade.php

Create model, migration and controller files by running the following command:

“php artisan make:model Profile -m”. And for the controller “php artisan make:controller ProfileController”.

In the Profile model add the following configuration :

Profile.php model

And in the migration profiles add the following fields:

File migration profiles

Set the existing .env configuration then run the php artisan migrate command.

Then add the following source code to the controller ProfileController.php file to load data with the datatable plugin from profiles table :

ProfileController.php (method getDataProfile & index)

Adjust index.blade.php in the profile folder like the code below :

index.blade.php

Then set the route in the web.php file in the routes folder to be as below

File Route web.php

Next, we will create modal create and edit along with its function with ajax. Add a modal with id createModal to insert data as follows :

File index.blade.php with modal create

And add a modal with id editModal to edit the data as below :

File index blade.php with create and edit modal

Before adding the ajax function we will add store, edit, update and destroy/delete methods in the ProfileController.php file

ProfileController.php method store

ProfileController.php method edit

ProfileController.php method update

ProfileController.php method Destroy/Delete

The whole code of ProfileController.php should look like this :

ProfileController.php

Go back to the index.blade.php file in the view/profile folder and add some ajax functions like the code below :

AJAX Function File index.blade.php

Then the overall code of index.blade.php will look like below :

index.blade.php with ajax function

The last step is to set the route in the web.php file as follows :

Route web.php

Now run the artisan serve command if the above steps are followed correctly then it will look like the image below :

that’s it for this tutorial, if you have problems, please comment below or contact me via telegram https://t.me/eripratama.

More Article : https://samplekoding.com/

Demo Web : https://larajax.herokuapp.com/

File Project : https://github.com/eripratama1/ajax-laravel-crud-app