Ajax Crud Laravel 9

MUAZHAN

9 min read

·

Jul 03, 2024

19

Share

Membangun CRUD dengan AJAX di Laravel 9

Artikel ini akan memandu Anda dalam membangun aplikasi CRUD (Create, Read, Update, Delete) yang sederhana dengan menggunakan AJAX dan Laravel 9.

Persiapan

1. Instalasi Laravel:

   • Jika Anda belum memiliki project Laravel, buatlah project baru dengan perintah:

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

   • Ganti my-crud-app dengan nama project Anda.

2. Instalasi Dependencies:

   • Anda mungkin memerlukan beberapa dependencies tambahan untuk AJAX, seperti:

     composer require jquery
     composer require laravelcollective/html
     

3. Konfigurasi Route:

   • Buat route untuk resource Post (atau nama model Anda) di file routes/web.php:

     Route::resource('posts', 'App\Http\Controllers\PostController');
     

Membuat Model dan Controller

1. Buat Model:

   • Gunakan perintah artisan untuk membuat model Post:

     php artisan make:model Post
     

2. Buat Controller:

   • Buat controller PostController:

     php artisan make:controller PostController --resource
     

   • Controller ini akan berisi method CRUD dasar.

Membuat View

1. Buat View Index:

   • Buat file resources/views/posts/index.blade.php:

     
     
     
         
         
     
     
         
     
             
     Daftar Posts
             
     
                 
     
                     
     
                         
     ID
                         
     Judul
                         
     Konten
                         
     Aksi
                     
                 
                 
     
                     
             
             Tambah Post
     
             
             
     
                 
     
                     
     
                         
     
                             
     
                             
                         
                         
     
                             
     
                                 @csrf
                                 
                                 
     
                                     Judul:
                                     
                                 
                                 
     
                                     Konten:
                                     
                                 
                                 Simpan
                             
                         
                     
                 
             
         
     
         
         
     
     
     

2. Buat View Create dan Edit:

   • Anda tidak perlu membuat view terpisah untuk create dan edit karena semuanya sudah dihandle di modal di view index.

Implementasi Controller

1. Method Index:

   • Di App/Http/Controllers/PostController.php, tambahkan method index():

     public function index()
     {
         $posts = Post::all();
         return response()->json($posts);
     }
     

2. Method Store:

   • Tambahkan method store():

     public function store(Request $request)
     {
         $post = Post::create($request->all());
         return response()->json($post);
     }
     

3. Method Show:

   • Tambahkan method show():

     public function show(Post $post)
     {
         return response()->json($post);
     }
     

4. Method Update:

   • Tambahkan method update():

     public function update(Request $request, Post $post)
     {
         $post->update($request->all());
         return response()->json($post);
     }
     

5. Method Destroy:

   • Tambahkan method destroy():

     public function destroy(Post $post)
     {
         $post->delete();
         return response()->json(['message' => 'Post berhasil dihapus']);
     }
     

Menjalankan Aplikasi

1. Jalankan server development:

   • Jalankan perintah php artisan serve.

2. Akses aplikasi di browser:

   • Buka http://127.0.0.1:8000/posts di browser Anda.

Penjelasan Kode

• Kode JavaScript menggunakan jQuery untuk melakukan request AJAX ke server Laravel.
• Fungsi getPosts() mengambil data post dari server dan menampilkannya di tabel.
• Event listener untuk tombol "Tambah Post" menampilkan modal untuk menambah post baru.
• Event listener untuk tombol "Edit" mengambil data post dari server dan mengisi form modal untuk editing.
• Event listener untuk tombol "Hapus" mengirimkan request DELETE ke server untuk menghapus post.
• Form modal menggunakan event submit untuk mengirimkan request POST atau PUT ke server untuk menyimpan atau mengedit post.

Kesimpulan

Dengan menggunakan AJAX, Anda dapat membuat aplikasi CRUD yang dinamis dan responsif tanpa harus me-reload halaman web. Laravel menyediakan framework yang kuat untuk membangun aplikasi web, dan kombinasi AJAX dan Laravel dapat membantu Anda membangun aplikasi yang cepat, efisien, dan mudah digunakan.