Cara Membuat AJAX CRUD di Laravel 10

Pada artikel ini, kita akan belajar cara membuat operasi ajax crud di laravel 10 tanpa refresh halaman. Dalam contoh ini, kita akan menggunakan CDN yang berbeda dari bootstrap untuk tujuan perancangan, dan juga kita akan menggunakan CDN yang dapat didata untuk contoh ajax crud di laravel 10.

Jadi tanpa perlu basa-basi lagi, mari kita langsung simak tutorial berikut ini.

Install Laravel 10 Untuk AJAX CRUD

Pada langkah pertama, kita akan menginstal laravel 10. Jadi, jalankan perintah berikut ini di terminal Anda.

composer create-project --prefer-dist laravel/laravel laravel_10_ajax_crud

Konfigurasi Database

Selanjutnya, kita akan mengonfigurasi database di laravel 10.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_10_ajax_crud
DB_USERNAME=root
DB_PASSWORD=

Membuat Table Migration Baru

Sekarang, kita akan membuat migrasi untuk tabel “products” menggunakan perintah laravel php artisan.

php artisan make:migration create_products_table --create=products

Selanjutnya silakan buka file migrasi yang dihasilkan di database/migrations/xxxx_xx_xx_xxxxxx_create_products_table.php. Pada method up(), kita menambahkan title dan description.

public function up() 
{ 
    Schema::create('products', function (Blueprint $table) { 
            $table->bigIncrements('id');
            $table->string('title')->nullable();
            $table->longText('description')->nullable();
            $table->timestamps();
    });
}

Setelah itu, kita perlu menjalankan migrasi ini dengan perintah berikut di terminal kita.

php artisan migrate

Menambahkan Resource Route

Sekarang, kita akan menambahkan resource route di dalam file routes/web.php.

<?php
  
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductAjaxController;

Route::resource('products', ProductAjaxController::class);

Menambahkan Controller dan Model

Kemudian, kita akan membuat ProductAjaxController dan Model Product menggunakan perintah berikut.

php artisan make:controller ProductAjaxController --resource --model=Product

Sekarang, buatlah perubahan pada Model Product. Jadi, tambahkan kode berikut ini ke file App/Models/Product.php.

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Model;
   
class Product extends Model
{
    protected $fillable = [
        'id', 'title', 'description'
    ];
}

Setelah itu, kita perlu mengubah file di app/Http/Controllers/ProductAjaxController.php.

<?php
         
namespace App\Http\Controllers;
          
use App\Models\Product;
use Illuminate\Http\Request;
use DataTables;
        
class ProductAjaxController extends Controller
{
    public function index(Request $request)
    {
   
        if ($request->ajax()) {
            $product = Product::latest()->get();
            return Datatables::of($data)
                    ->addIndexColumn()
                    ->addColumn('action', function($row){
   
                           $btn = '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Edit" class="edit btn btn-primary btn-sm editProduct">Edit</a>';
   
                           $btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Delete" class="btn btn-danger btn-sm deleteProduct">Delete</a>';
    
                            return $btn;
                    })
                    ->rawColumns(['action'])
                    ->make(true);
        }
      
        return view('productAjax',compact('product'));
    }
     
    public function store(Request $request)
    {
        Product::updateOrCreate([
                'id' => $request->id,
                'title' => $request->title,
                'description' => $request->description
        ]);        
   
        return response()->json(['success'=>'Product saved successfully.']);
    }
   
    public function edit($id)
    {
        $product = Product::find($id);
        return response()->json($product);
    }
  
    public function destroy($id)
    {
        Product::find($id)->delete();
     
        return response()->json(['success'=>'Product deleted successfully.']);
    }
}

Menambahkan Tampilan

Pada langkah ini, kita akan membuat file di resources/views/productAjax.blade.php dan tambahkan code berikut.

<!DOCTYPE html>
<html>
<head>
    <title>How To Create AJAX CRUD Operation In Laravel 10 - Leravio</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/>
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
</head>
<body>
    
<div class="container">
    <h1>How To Create AJAX CRUD Operation In Laravel 10 - Leravio</h1>
    <a class="btn btn-info" href="javascript:void(0)" id="createNewProduct"> Add New Product</a>
    <table class="table table-bordered data-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Title</th>
                <th>Description</th>
                <th width="280px">Action</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
   
<div class="modal fade" id="ajaxModelexa" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modelHeading"></h4>
            </div>
            <div class="modal-body">
                <form id="productForm" name="productForm" class="form-horizontal">
                   <input type="hidden" name="id" id="id">
                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">Title</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="title" name="title" placeholder="Enter Name" value="" required>
                        </div>
                    </div>
     
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Description</label>
                        <div class="col-sm-12">
                            <textarea id="description" name="description" required placeholder="Enter Description" class="form-control"></textarea>
                        </div>
                    </div>
      
                    <div class="col-sm-offset-2 col-sm-10">
                     <button type="submit" class="btn btn-primary" id="savedata" value="create">Save Product</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
    
</body>
    
<script type="text/javascript">
  $(function () {
     
      $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
    });
    
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('products.index') }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'title', name: 'title'},
            {data: 'description', name: 'description'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
     
    $('#createNewProduct').click(function () {
        $('#savedata').val("create-product");
        $('#id').val('');
        $('#productForm').trigger("reset");
        $('#modelHeading').html("Create New Product");
        $('#ajaxModelexa').modal('show');
    });
    
    $('body').on('click', '.editProduct', function () {
      var id = $(this).data('id');
      $.get("{{ route('products.index') }}" +'/' + id +'/edit', function (data) {
          $('#modelHeading').html("Edit Product");
          $('#savedata').val("edit-user");
          $('#ajaxModelexa').modal('show');
          $('#id').val(data.id);
          $('#title').val(data.title);
          $('#description').val(data.description);
      })
   });
    
    $('#savedata').click(function (e) {
        e.preventDefault();
        $(this).html('Sending..');
    
        $.ajax({
          data: $('#productForm').serialize(),
          url: "{{ route('products.store') }}",
          type: "POST",
          dataType: 'json',
          success: function (data) {
     
              $('#productForm').trigger("reset");
              $('#ajaxModelexa').modal('hide');
              table.draw();
         
          },
          error: function (data) {
              console.log('Error:', data);
              $('#savedata').html('Save Changes');
          }
      });
    });
    
    $('body').on('click', '.deleteProduct', function () {
     
        var id = $(this).data("id");
        confirm("Are You sure want to delete this Product!");
      
        $.ajax({
            type: "DELETE",
            url: "{{ route('products.store') }}"+'/'+id,
            success: function (data) {
                table.draw();
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    });
     
  });
</script>
</html>

Jalankan Laravel 10

Sekarang kita telah sampai pada langkah terakhir yaitu pengujian. Untuk melihat hasilnya, apakah kita telah berhasil menerapkan ajax crud di laravel 10. Silahkan jalankan project dengan menjalankan perintah php artisan serve, kemudian buka project laravel di browser.