Ajax Crud Laravel

10 min read Jul 01, 2024
Ajax Crud Laravel

Membangun CRUD Sederhana dengan AJAX di Laravel

Artikel ini akan membahas cara membangun aplikasi CRUD (Create, Read, Update, Delete) sederhana menggunakan AJAX di Laravel. AJAX (Asynchronous JavaScript and XML) memungkinkan kita untuk melakukan request ke server tanpa melakukan refresh halaman, sehingga memberikan pengalaman pengguna yang lebih baik.

Persiapan

  1. Pastikan Anda telah menginstal Laravel. Jika belum, Anda dapat menginstalnya dengan perintah composer create-project --prefer-dist laravel/laravel your-project-name.
  2. Buat model, controller, dan view untuk data yang ingin Anda kelola.
  3. Tambahkan library jQuery ke proyek Anda. Anda dapat menambahkannya dengan menggunakan CDN atau menginstalnya dengan npm.

Contoh Aplikasi

Sebagai contoh, kita akan membangun aplikasi sederhana untuk mengelola daftar buku.

1. Model Buku

Buat model Book di direktori app/Models:

2. Controller Buku

Buat controller BookController di direktori app/Http/Controllers:

validate([
            'title' => 'required',
            'author' => 'required',
            'description' => 'required',
        ]);

        Book::create($request->all());
        return redirect()->route('books.index')->with('success', 'Buku berhasil ditambahkan.');
    }

    public function show(Book $book)
    {
        return view('books.show', compact('book'));
    }

    public function edit(Book $book)
    {
        return view('books.edit', compact('book'));
    }

    public function update(Request $request, Book $book)
    {
        $request->validate([
            'title' => 'required',
            'author' => 'required',
            'description' => 'required',
        ]);

        $book->update($request->all());
        return redirect()->route('books.index')->with('success', 'Buku berhasil diperbarui.');
    }

    public function destroy(Book $book)
    {
        $book->delete();
        return redirect()->route('books.index')->with('success', 'Buku berhasil dihapus.');
    }
}

3. Route

Tambahkan route untuk controller di routes/web.php:

Route::resource('books', BookController::class);

4. View Index

Buat view books/index.blade.php:




    Daftar Buku
    
    
    
    


    

Daftar Buku

Tambah Buku @foreach ($books as $book) @endforeach
Judul Penulis Deskripsi Aksi
{{ $book->title }} {{ $book->author }} {{ $book->description }} Lihat Edit

5. View Create

Buat view books/create.blade.php:




    Tambah Buku
    


    

Tambah Buku

@csrf

6. View Show

Buat view books/show.blade.php:




    Detail Buku
    


    

Detail Buku

Judul: {{ $book->title }}
Penulis: {{ $book->author }}
Deskripsi: {{ $book->description }}

7. View Edit

Buat view books/edit.blade.php:




    Edit Buku
    


    

Edit Buku

@csrf @method('PUT')

Kesimpulan

Dengan menggunakan AJAX, kita dapat membangun aplikasi CRUD yang lebih interaktif dan memberikan pengalaman pengguna yang lebih baik. Dengan contoh aplikasi sederhana ini, Anda dapat mempelajari dasar-dasar penggunaan AJAX di Laravel untuk membangun aplikasi CRUD yang lebih kompleks.

Catatan

  • Pastikan untuk menggunakan token CSRF untuk keamanan saat menggunakan AJAX di Laravel.
  • Anda dapat menyesuaikan desain dan fungsionalitas aplikasi sesuai kebutuhan.
  • Gunakan validasi server-side dan client-side untuk memastikan data yang diterima valid.
  • Untuk aplikasi yang lebih kompleks, pertimbangkan untuk menggunakan framework JavaScript seperti React, Vue.js, atau Angular.

Semoga artikel ini bermanfaat!

Related Post


Latest Posts


Featured Posts