Tutorial Edit Data dengan Fitur CRUD di Laravel

Juli 1, 2025

Hai, Sobat Jagoan! Artikel kali ini adalah lanjutan dari artikel Tutorial Menambah Data dan Menampilkan Data dari Database di Laravel yang sudah menampilkan dan menambah data buku. Kali ini akan menambahkan fitur edit data. Dengan fitur ini, kamu bisa mengubah data buku yang sudah ada di database jika ada kesalahan atau ingin diperbarui.

Yuk lanjutkan proyek CRUD dengan menambahkan fitur edit data buku menggunakan Query Builder!

Step 1: Menambahkan Route untuk Edit

Buka file routes/web.php, lalu tambahkan sintaks kode berikut untuk mengatur rute edit data.

				
					// Menampilkan form edit buku
Route::get('/buku/edit/{id}', [BukuController::class, 'edit']);

// Menyimpan hasil edit buku
Route::post('/buku/update/{id}', [BukuController::class, 'update']);

Step 2: Menambahkan Method Edit pada BukuController

Tambahkan sintaks kode berikut ke dalam file app/Http/Controllers/BukuController.php untuk mengatur logika edit data.

				
					public function edit($id)
{
    $buku = DB::table('buku')->where('id', $id)->first();
    return view('buku.edit', ['buku' => $buku]);
}

public function update(Request $request, $id)
{
    DB::table('buku')->where('id', $id)->update([
        'judul' => $request->judul,
        'penulis' => $request->penulis,
        'tahun_terbit' => $request->tahun_terbit,
        'penerbit' => $request->penerbit,
    ]);

    return redirect('/buku');
}

Penjelasan:

Method edit($id) akan menangkap id buku yang dikirim dari tombol Edit. Id tersebut disimpan dalam variabel $id. Kemudian, controller mencari data buku sesuai id tersebut menggunakan query builder: $buku = DB::table(‘buku’)->where(‘id’, $id)->first(); Setelah menemukan data yang sesuai, controller akan mengirimkan data tersebut ke view buku.edit menggunakan return view(‘buku.edit’, [‘buku’ => $buku]);
$request akan menangkap input pengguna yang dikirim setelah mengisi form edit. Method update() akan menggunakan input tersebut untuk memperbarui baris buku berdasarkan Id yang sama di database.

Step 3: Edit File index.blade.php

Untuk menambahkan button edit data buku, buka resources/views/buku/index.blade.php > ubah bagian <tbody> menjadi seperti ini:

<tbody>

@foreach($buku as $index => $b)

<tr>

<td>{{ $index + 1 }}</td>

<td>{{ $b->judul }}</td>

<td>{{ $b->penulis }}</td>

<td>{{ $b->tahun_terbit }}</td>

<td>{{ $b->penerbit }}</td>

<td>

</td>

</tr>

@endforeach

</tbody>

Tambahkan kolom <th>Action</th> ke dalam bagian <thead> untuk menampung tombol akses Edit:

<thead>

<tr>

<th>Judul</th>

<th>Penulis</th>

<th>Tahun Terbit</th>

<th>Penerbit</th>

<th>Action</th>

</tr>

</thead>

Step 4: Buat Halaman Form Edit Buku

Buat file baru bernama ‘edit.blade.php’ di dalam resources/veiws/buku.

<!DOCTYPE html>

<html>

<head>

<style>

form { width: 50%; margin: auto; background: #f9f9f9; padding: 20px; border-radius: 10px; }

input, label { display: block; width: 100%; margin-bottom: 10px; }

input[type=”submit”] { background: #007BFF; color: white; padding: 10px; border: none; }

h2 { text-align: center; }

</style>

</head>

<body>

<form action=”/buku/update/{{ $buku->id }}” method=”POST”>

@csrf

<label>Judul Buku</label>

<input type=”text” name=”judul” value=”{{ $buku->judul }}” required>

<label>Penulis</label>

<input type=”text” name=”penulis” value=”{{ $buku->penulis }}” required>

<label>Tahun Terbit</label>

<input type=”number” name=”tahun_terbit” value=”{{ $buku->tahun_terbit }}” required>

<label>Penerbit</label>

<input type=”text” name=”penerbit” value=”{{ $buku->penerbit }}” required>

</form>

</body>

</html>

Step 5: Uji Coba Edit Data Buku

Buka terminal lalu jalankan:

				
					php artisan serve

Akses URL http://127.0.0.1:8000/buku , lalu klik Edit pada salah satu data buku untuk memeriksa fitur edit berjalan dengan baik.

Pada halaman blade.php, klik Edit pada data ke-empat.

Setelah mengklik Edit, aplikasi akan mengarahkan kamu ke halaman blade.php yang menampilkan form edit data buku sesuai dengan id buku kamu pilih. Ubah isi kolom Penulis dan Tahun Terbit, lalu klik tombol Update untuk menyimpan perubahan ke database.

Setelah menekan tombol Update, data buku akan langsung diperbarui di tabel. Kamu bisa kembali ke halaman daftar buku (/buku) untuk melihat hasil perubahan tersebut.

Sekarang kamu sudah menambahkan fitur edit pada aplikasi CRUD sederhana menggunakan Laravel. Mulai dari menampilkan form edit, mengubah data buku berdasarkan ID, dan menyimpan ke dalam database. Yuk, sempurnakan aplikasi kamu dengan menambahkan fitur hapus data di artikel Tutorial Hapus Data dengan Fitur CRUD di Laravel.

Kalau ada yang masih bingung, hubungi Tim Support Jagoan Hosting via Live Chat atau Open Ticket, Sob!