(Aplikasi Books Store) Part 1: Persiapan dan Read Data (Menampilkan Buku)
Pelajari cara membangun aplikasi Books Store sederhana dengan Laravel, lengkap dengan fitur CRUD untuk mengelola data buku.
Baca SelengkapnyaDi part sebelumnya, kita sudah berhasil menyiapkan proyek Laravel, membuat model, migrasi, dan menampilkan data buku (Read). Di bagian kedua ini, kita akan melanjutkan dengan fitur Create (menambah buku baru) dan Update (mengedit data buku yang sudah ada), yang merupakan dua operasi penting dalam sebuah aplikasi.
Langkah 1: Membuat Halaman Tambah Buku (Create)
Pertama, kita butuh halaman form untuk menginput data buku baru.
1.1 Membuat Method create di Controller
Buka app/Http/Controllers/BookController.php dan tambahkan method create. Method ini hanya akan menampilkan view untuk form.
PHP
// ...
class BookController extends Controller
{
// ... method index() dari part 1
public function create()
{
return view('books.create');
}
}
1.2 Membuat View create.blade.php
Buat file baru di resources/views/books/ bernama create.blade.php. Salin kode berikut, yang berisi form sederhana untuk memasukkan data buku.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tambah Buku Baru</title>
</head>
<body>
<h1>Tambah Buku Baru</h1>
<form action="/books" method="POST">
@csrf
<div>
<label for="title">Judul:</label>
<input type="text" id="title" name="title" required>
</div>
<div>
<label for="author">Penulis:</label>
<input type="text" id="author" name="author" required>
</div>
<div>
<label for="publication_year">Tahun Terbit:</label>
<input type="number" id="publication_year" name="publication_year" required>
</div>
<div>
<label for="description">Deskripsi:</label>
<textarea id="description" name="description"></textarea>
</div>
<button type="submit">Simpan Buku</button>
</form>
</body>
</html>
Perhatikan @csrf. Ini adalah direktif CSRF (Cross-Site Request Forgery) token dari Laravel yang sangat penting untuk keamanan form.
Langkah 2: Menyimpan Data Buku (Store)
Setelah form diisi, data akan dikirim ke server. Kita butuh method store untuk menangani proses penyimpanan.
2.1 Membuat Method store di Controller
Tambahkan method store ke BookController.php. Method ini akan menerima data dari form, membuat instance Book baru, dan menyimpannya.
PHP
// ...
use Illuminate\Http\Request;
class BookController extends Controller
{
// ... method index() dan create()
public function store(Request $request)
{
$validatedData = $request->validate([
'title' => 'required|max:255',
'author' => 'required|max:255',
'publication_year' => 'required|integer|min:1800|max:' . date('Y'),
'description' => 'nullable'
]);
Book::create($validatedData);
return redirect('/books')->with('success', 'Buku berhasil ditambahkan!');
}
}
Kita menggunakan Request $request untuk mendapatkan data form dan validate() untuk validasi data. Setelah berhasil, kita mengarahkan pengguna kembali ke halaman daftar buku.
2.2 Menambahkan Route untuk Create & Store
Buka routes/web.php dan tambahkan route baru untuk form dan proses penyimpanan.
PHP
// ...
Route::get('/books', [BookController::class, 'index']);
Route::get('/books/create', [BookController::class, 'create']);
Route::post('/books', [BookController::class, 'store']);
Coba kunjungi http://127.0.0.1:8000/books/create dan tambahkan buku baru. Setelah form disubmit, Anda akan kembali ke halaman daftar buku dengan buku baru yang sudah muncul.
Langkah 3: Mengedit Data Buku (Update)
Mengedit data mirip dengan menambah, tetapi kita perlu mengambil data buku yang akan diedit terlebih dahulu.
3.1 Membuat Method edit di Controller
Tambahkan method edit ke BookController.php. Method ini akan menerima ID buku dan menampilkannya di form.
PHP
// ...
class BookController extends Controller
{
// ... semua method sebelumnya
public function edit(Book $book)
{
return view('books.edit', compact('book'));
}
}
Kita menggunakan Route Model Binding (Book $book) yang secara otomatis mengambil buku berdasarkan ID yang diberikan di URL, sehingga kode kita menjadi lebih ringkas.
3.2 Membuat View edit.blade.php
Buat file baru resources/views/books/edit.blade.php. Form ini akan mirip dengan form create, tetapi dengan nilai-nilai yang sudah terisi.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Edit Buku</title>
</head>
<body>
<h1>Edit Buku</h1>
<form action="/books/{{ $book->id }}" method="POST">
@csrf
@method('PUT')
<div>
<label for="title">Judul:</label>
<input type="text" id="title" name="title" value="{{ $book->title }}" required>
</div>
<div>
<label for="author">Penulis:</label>
<input type="text" id="author" name="author" value="{{ $book->author }}" required>
</div>
<div>
<label for="publication_year">Tahun Terbit:</label>
<input type="number" id="publication_year" name="publication_year" value="{{ $book->publication_year }}" required>
</div>
<div>
<label for="description">Deskripsi:</label>
<textarea id="description" name="description">{{ $book->description }}</textarea>
</div>
<button type="submit">Update Buku</button>
</form>
</body>
</html>
Perhatikan @method('PUT'). Form HTML secara default hanya mendukung GET dan POST. Laravel menyediakan direktif @method untuk membuat request PUT atau DELETE.
3.3 Membuat Method update di Controller
Tambahkan method update untuk memproses data yang diedit.
PHP
// ...
class BookController extends Controller
{
// ... semua method sebelumnya
public function update(Request $request, Book $book)
{
$validatedData = $request->validate([
'title' => 'required|max:255',
'author' => 'required|max:255',
'publication_year' => 'required|integer|min:1800|max:' . date('Y'),
'description' => 'nullable'
]);
$book->update($validatedData);
return redirect('/books')->with('success', 'Buku berhasil diupdate!');
}
}
3.4 Menambahkan Route untuk Edit & Update
Tambahkan route di routes/web.php untuk form edit dan proses update.
PHP
// ...
Route::get('/books/{book}/edit', [BookController::class, 'edit']);
Route::put('/books/{book}', [BookController::class, 'update']);
Sekarang Anda bisa menambahkan tautan "Edit" di halaman daftar buku (index.blade.php).
HTML
<td>
<a href="/books/{{ $book->id }}/edit">Edit</a>
</td>
Klik tautan "Edit" pada salah satu buku, ubah datanya, dan simpan. Anda akan melihat perubahannya di halaman daftar buku.
Bersambung ke Part 3: Di bagian terakhir, kita akan menyelesaikan tutorial ini dengan menambahkan fitur Delete (hapus buku). Sampai jumpa! 👋