Ajax Laravel Crud With Popup Modal

MUAZHAN

6 min read

·

Jul 01, 2024

34

Share

Membangun CRUD Ajax Laravel dengan Popup Modal

Artikel ini akan memandu Anda langkah demi langkah dalam membangun aplikasi CRUD (Create, Read, Update, Delete) menggunakan AJAX dan Laravel, disertai dengan popup modal yang elegan untuk interaksi pengguna yang lebih baik.

Persiapan

1. Instal Laravel: Pastikan Anda telah menginstal Laravel pada sistem Anda. Jika belum, jalankan perintah berikut di terminal Anda:

   composer create-project laravel/laravel my-crud-app
   

2. Buat Model dan Migrasi: Buat model baru untuk data yang ingin Anda kelola dan buat migrasi untuk tabel database:

   php artisan make:model Product -m
   

3. Buat Controller: Buat controller untuk mengelola data produk:

   php artisan make:controller ProductController
   

4. Tambahkan Route: Tambahkan route baru ke file routes/web.php Anda untuk mengakses controller dan method yang akan Anda buat:

   Route::resource('products', 'ProductController');
   

Implementasi AJAX

1. Buat View: Buat view untuk menampilkan daftar produk dan form untuk menambahkan produk baru. Di dalam view, tambahkan sebuah modal untuk form tambah/edit data.

   
     
   
       
   
         
   
           
   
           
         
         
   
           
   
             
           
         
         
   
           Close
           Save
         
       
     
   
   
   
   

2. Tambahkan Script JavaScript: Tambahkan script JavaScript ke dalam view Anda untuk menangani AJAX request dan manipulasi DOM.

   $(document).ready(function() {
     // Load initial product data
     loadProducts();
   
     // Event listener for form submission
     $('#productForm').submit(function(e) {
       e.preventDefault();
       // Handle form submission with AJAX
     });
   
     // Event listener for editing a product
     $('#productsTable').on('click', '.edit-product', function() {
       // Get product ID and populate form with data
       // Open the modal
     });
   
     // Event listener for deleting a product
     $('#productsTable').on('click', '.delete-product', function() {
       // Confirm delete action
       // Handle delete request with AJAX
     });
   });
   
   function loadProducts() {
     $.ajax({
       url: '/products',
       method: 'GET',
       success: function(data) {
         // Populate products table with data
       },
       error: function(error) {
         console.log(error);
       }
     });
   }
   

3. Buat Controller Method: Buat method di controller Anda untuk menangani AJAX request yang dipicu dari JavaScript.

   // ProductController.php
   
   public function index()
   {
     $products = Product::all();
     return response()->json($products);
   }
   
   public function store(Request $request)
   {
     $product = Product::create($request->all());
     return response()->json($product);
   }
   
   public function show(Product $product)
   {
     return response()->json($product);
   }
   
   public function update(Request $request, Product $product)
   {
     $product->update($request->all());
     return response()->json($product);
   }
   
   public function destroy(Product $product)
   {
     $product->delete();
     return response()->json(['success' => true]);
   }
   

Menyelesaikan Implementasi

1. Mengelola Form Submission: Dalam script JavaScript, tangani submission form dengan AJAX. Kirim data form ke controller menggunakan method POST dan perbarui table produk setelah data berhasil disimpan.

2. Mengedit Produk: Ketika tombol edit diklik, dapatkan ID produk yang akan diedit dan populate form modal dengan data produk tersebut. Kemudian, atur event listener untuk submit form edit dan gunakan AJAX untuk mengirimkan data yang diupdate ke controller.

3. Menghapus Produk: Konfirmasikan tindakan hapus dengan prompt JavaScript. Jika pengguna mengkonfirmasi, kirim request DELETE ke controller dengan ID produk yang ingin dihapus.

Pengaturan Tambahan

1. Validasi Data: Tambahkan validasi data di controller untuk memastikan data yang diinputkan valid sebelum menyimpannya ke database.

2. Pengaturan Perizinan: Atur mekanisme otorisasi untuk membatasi akses ke fitur CRUD berdasarkan peran pengguna.

3. Pemberitahuan: Tampilkan notifikasi kepada pengguna setelah tindakan CRUD berhasil dilakukan (misalnya, dengan alert atau toast).

Dengan langkah-langkah ini, Anda berhasil membangun aplikasi CRUD yang responsif dan user-friendly dengan AJAX dan Laravel, dilengkapi dengan popup modal yang membuat interaksi pengguna menjadi lebih efisien.