Membangun CRUD dengan AJAX di Laravel 8
Artikel ini akan memandu Anda melalui proses membangun aplikasi CRUD (Create, Read, Update, Delete) menggunakan AJAX di Laravel 8. Dengan AJAX, Anda dapat membuat aplikasi web yang lebih interaktif dan responsif dengan memuat data tanpa harus me-reload halaman secara penuh.
1. Persiapan Project Laravel
Langkah 1: Pastikan Anda telah menginstal Laravel 8 di komputer Anda. Jika belum, Anda dapat menginstalnya dengan perintah berikut:
composer create-project --prefer-dist laravel/laravel my-app
Langkah 2: Navigasi ke direktori proyek Anda.
cd my-app
2. Membuat Model dan Controller
Langkah 1: Buat model baru untuk mewakili data yang ingin Anda kelola.
php artisan make:model Post -m
Perintah ini akan membuat file Post.php di direktori app/Models.
Langkah 2: Buat controller baru untuk mengelola model tersebut.
php artisan make:controller PostController
Perintah ini akan membuat file PostController.php di direktori app/Http/Controllers.
3. Mendefinisikan Rute
Langkah 1: Buka file routes/web.php dan tambahkan rute untuk CRUD.
use App\Http\Controllers\PostController;
Route::resource('posts', PostController::class);
4. Membuat View
Langkah 1: Buat view untuk menampilkan daftar data.
php artisan make:view posts.index
Langkah 2: Buka file resources/views/posts/index.blade.php dan tambahkan kode HTML berikut:
Daftar Post
5. Implementasi Controller
Langkah 1: Buka file app/Http/Controllers/PostController.php dan tambahkan kode berikut:
json($posts);
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$post = new Post;
$post->title = $request->title;
$post->content = $request->content;
$post->save();
return response()->json($post);
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
$post = Post::find($id);
return response()->json($post);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$post = Post::find($id);
$post->title = $request->title;
$post->content = $request->content;
$post->save();
return response()->json($post);
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$post = Post::find($id);
$post->delete();
return response()->json(['message' => 'Post berhasil dihapus']);
}
}
6. Menjalankan Aplikasi
Langkah 1: Jalankan server development Laravel.
php artisan serve
Langkah 2: Buka browser Anda dan akses alamat http://127.0.0.1:8000/posts.
7. Hasil
Anda sekarang dapat melihat aplikasi CRUD yang menggunakan AJAX untuk mengelola data post.
- Anda dapat menambahkan post baru dengan menekan tombol "Tambah Post" dan mengisi form modal.
- Anda dapat mengedit post yang ada dengan menekan tombol "Edit" dan mengubah data di form modal.
- Anda dapat menghapus post dengan menekan tombol "Hapus".
Semua perubahan akan dilakukan tanpa harus me-reload halaman secara penuh.
Kesimpulan
Dengan menggunakan AJAX, Anda dapat membuat aplikasi web yang lebih interaktif dan responsif. Artikel ini hanya menunjukkan contoh sederhana, Anda dapat mengembangkannya lebih lanjut dengan menambahkan fitur-fitur lainnya seperti validasi data, pagination, dan lain sebagainya.