Pernahkah kamu bertanya-tanya bagaimana sebuah aplikasi mengelola ribuan data dengan begitu rapi? Di balik tampilan layar yang kita lihat, ada sebuah mekanisme cerdas bernama CRUD (Create, Read, Update, Delete).
Dalam panduan ini, kita akan membongkar rahasia di balik pembuatan aplikasi pengelola data buku sederhana. Kita akan menyatukan Laravel Blade sebagai wajah aplikasi yang interaktif, dengan Eloquent ORM sebagai pengelola basis data yang sangat bertenaga.
Mari kita mulai langkah demi langkah untuk membangun sistem yang tidak hanya berfungsi dengan baik, tetapi juga memiliki struktur kode yang profesional.
1. Buat Proyek Laravel Baru
Untuk memulai mini proyek ini dengan alur yang rapi, langkah pertama yang perlu kita lakukan adalah menyiapkan proyek Laravel baru sebagai fondasi sebelum masuk ke konfigurasi data buku.
Buka terminal/git bash kalian dan jalankan perintah ini di dalamnya.
laravel new book-bwa-tegar
Perintah “laravel new book-bwa-tegar” digunakan untuk membuat sebuah proyek Laravel baru dengan nama tersebut sehingga kita memiliki struktur aplikasi yang siap dipakai untuk melanjutkan proses pembuatan fitur CRUD Book.
Pilih sebagai berikut
Setelah menunggu lama lanjut pilih sebagai berikut
Atau kalau pakai Composer bila cara di atas tidak berhasil:
composer create-project laravel/laravel book-bwa-tegar
Perintah “composer create-project laravel/laravel book-bwa-tegar” digunakan untuk membuat proyek Laravel baru menggunakan Composer, sehingga seluruh file dan dependensi Laravel terunduh otomatis dan siap digunakan sebagai dasar pengembangan fitur CRUD Book.
Selanjutnya mulai masuk ke foldernya:
cd book-bwa-tegar/
code .
Hasil
Jalankan migrasi:
Selanjutnya buka terminal proyek kamu dan jalankan perintah ini
php artisan migrate
# Would you like to create it? (yes/no) [yes] Pilih Yes
Perintah “php artisan migrate” dijalankan untuk membuat seluruh tabel yang sudah didefinisikan dalam file migration agar database siap digunakan dalam proyek CRUD Book ini.
<aside> 📌
Sebelum migrasi pastikan database/PhpMyAdmin kalian sudah aktif atau bisa di akses ya.
</aside>
Hasil
Jalankan server:
Selanjutnya jalankan perintah ini
php artisan serve
# Lalu akses [<http://127.0.0.1:8000>]
Perintah “php artisan serve” digunakan untuk menjalankan server pengembangan Laravel sehingga aplikasi bisa langsung diakses melalui browser dan siap diuji selama proses pembuatan fitur CRUD Book.
Hasil
2. Siapkan Database
Pada tahap ini, kita mulai menyiapkan database yang akan menjadi tempat penyimpanan data sehingga proses CRUD Book dapat berjalan dengan baik dan terstruktur.
Buka file .env di proyek kamu, lalu sesuaikan bagian ini saja:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=book_bwa_tegar
DB_USERNAME=root
DB_PASSWORD=
Konfigurasi DB_CONNECTION hingga DB_PASSWORD tersebut digunakan untuk menghubungkan proyek Laravel ke database MySQL lokal sehingga aplikasi bisa menyimpan, membaca, dan menampilkan data yang nantinya akan CRUD Book.
Hasil
3. Buat Tabel & Model
Buka terminal proyek kalian atau git bash proyek kalian dan jalankan perintah untuk membuat model sekaligus file migrasi:
php artisan make:model Book -m
Perintah ini digunakan untuk menciptakan model Book sekaligus file migrasi secara otomatis, yang berfungsi sebagai jembatan antara kode aplikasi dan tabel database yang akan menampung data buku kamu.
Hasil
Buka file migrasi di database/migrations/xxxx_create_books_table.php dan ubah function up() menjadi ini:
public function up(): void {
Schema::create('books', function (Blueprint $table) {
$table->id();
$table->string('judul');
$table->string('penulis');
$table->integer('tahun_terbit');
$table->timestamps();
});
}
Kode ini berfungsi untuk menentukan struktur tabel books di database kamu, yaitu dengan menambahkan kolom untuk menyimpan judul, penulis, dan tahun terbit buku secara otomatis.
Hasil
Buka terminal kembali dan jalankan migrasi
php artisan migrate
Perintah ini berfungsi untuk mengeksekusi file migrasi yang telah kamu buat agar struktur tabel buku tersebut resmi terpasang di dalam database kamu.
Hasil
Buka app/Models/Book.php dan tambahkan properti fillable:
protected $fillable = ['judul', 'penulis', 'tahun_terbit'];
Kode ini berfungsi untuk memberikan izin keamanan agar kolom judul, penulis, dan tahun terbit dapat diisi secara massal ke dalam database melalui aplikasi kamu.
Hasil
4. Membuat Controller (Logic)
Sekarang kita akan membangun "otak" dari aplikasi kamu, yaitu Controller, tempat di mana semua logika bisnis diatur agar aplikasi tahu apa yang harus dilakukan saat kamu menambah atau menghapus data buku.
php artisan make:controller BookController --resource
Perintah ini digunakan untuk membuat file BookController yang sudah dilengkapi secara otomatis dengan kumpulan fungsi standar (metode resource) untuk menangani seluruh proses CRUD data buku kamu.
Hasil
Isi app/Http/Controllers/BookController.php dengan logika Eloquent:
- index():
public function index()
{
// Eloquent: Mengambil semua data dari tabel books
$books = Book::all();
// Mengirim data ke folder resources/views/books/index.blade.php
return view('books.index', compact('books'));
}
Fungsi ini bertugas mengambil seluruh data buku dari database menggunakan Eloquent dan mengirimkannya ke halaman tampilan utama agar bisa dilihat oleh pengguna.
- create():
public function create()
{
return view('books.create');
}
Fungsi ini bertujuan untuk menampilkan halaman formulir khusus yang digunakan bagi kamu untuk menginput data buku baru ke dalam sistem.
- store():
public function store(Request $request)
{
// Validasi input sederhana
$request->validate([
'judul' => 'required',
'penulis' => 'required',
'tahun_terbit' => 'required|integer',
]);
// Eloquent: Menyimpan data menggunakan mass assignment
Book::create($request->all());
return redirect()->route('books.index')->with('success', 'Buku berhasil ditambahkan!');
}
Fungsi ini bertugas memvalidasi data yang kamu input, menyimpannya ke database jika sudah sesuai, lalu mengarahkan kamu kembali ke halaman utama dengan pesan sukses.
- edit():
public function edit(Book $book)
{
// $book sudah berisi data otomatis berkat Route Model Binding
return view('books.update', compact('book'));
}
Fungsi ini bertugas mengambil data buku spesifik yang ingin diubah dan mengirimkannya ke halaman formulir edit sehingga kamu bisa melihat data lama sebelum diperbarui.
- update():
public function update(Request $request, Book $book)
{
$request->validate([
'judul' => 'required',
'penulis' => 'required',
'tahun_terbit' => 'required|integer',
]);
$book->update($request->all());
return redirect()->route('books.index')->with('success', 'Buku berhasil diperbarui!');
}
Fungsi ini bertugas memproses perubahan data yang kamu masukkan, memperbarui informasi buku tersebut di database, dan mengembalikan kamu ke daftar buku dengan notifikasi bahwa data telah berhasil diubah.
- destroy():
public function destroy(Book $book)
{
// Eloquent: Menghapus data
$book->delete();
return redirect()->route('books.index')->with('success', 'Buku berhasil dihapus!');
}
Fungsi ini bertugas untuk menghapus data buku tertentu dari database dan langsung mengarahkan kamu kembali ke halaman utama dengan pesan konfirmasi bahwa penghapusan telah berhasil.
Hasil
5. Mengatur Routing
Setelah "otak" aplikasi selesai dibuat, kini saatnya kita mengatur Routing yang berfungsi sebagai peta atau penunjuk jalan agar Laravel tahu fungsi mana yang harus dijalankan saat kamu mengakses URL tertentu.
Buka routes/web.php:
use App\Http\Controllers\BookController;
Route::resource('books', BookController::class);
Kode ini berfungsi untuk mendaftarkan semua jalur URL CRUD secara otomatis ke dalam satu baris, sehingga aplikasi kamu tahu fungsi mana di BookController yang harus dipanggil untuk setiap aksi.
Hasil
6. Integrasi Frontend (Blade)
Buat folder resources/views/books/. Kita butuh setidaknya tiga file utama:
resources/
└── views/
└── books/
├── index.blade.php (Daftar semua buku)
├── create.blade.php (Form tambah buku)
└── edit.blade.php (Form edit buku)
Hasil
6.1. Tambahkan Kode Halaman Daftar Buku (index.blade.php)
Sekarang kamu akan membuat tampilan utama yang berfungsi untuk menampilkan daftar seluruh buku yang telah tersimpan di database dalam bentuk tabel yang rapi dan mudah dibaca.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Buku - Gudang Kita</title>
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css>">
</head>
<body class="p-6 bg-gray-50">
<h1 class="text-2xl font-bold mb-4">Daftar Koleksi Buku</h1>
@if(session('success'))
<div class="mb-4 rounded-md bg-green-100 px-4 py-3 text-green-800">
{{ session('success') }}
</div>
@endif
<a href="{{ route('books.create') }}"
class="mb-4 inline-block rounded-full bg-green-600 px-4 py-2 text-white hover:bg-green-700 transition">
+ Tambah Buku Baru
</a>
<div class="overflow-x-auto">
<table class="w-full border border-gray-200 border-collapse mt-4">
<thead>
<tr class="bg-gray-100">
<th class="border border-gray-200 px-4 py-3 text-left">Judul</th>
<th class="border border-gray-200 px-4 py-3 text-left">Penulis</th>
<th class="border border-gray-200 px-4 py-3 text-left">Tahun Terbit</th>
<th class="border border-gray-200 px-4 py-3 text-left">Aksi</th>
</tr>
</thead>
<tbody>
@foreach($books as $book)
<tr class="hover:bg-gray-50">
<td class="border border-gray-200 px-4 py-3">
{{ $book->judul }}
</td>
<td class="border border-gray-200 px-4 py-3">
{{ $book->penulis }}
</td>
<td class="border border-gray-200 px-4 py-3">
{{ $book->tahun_terbit }}
</td>
<td class="border border-gray-200 px-4 py-3 space-x-2">
<a href="{{ route('books.edit', $book->id) }}"
class="inline-block rounded-full bg-yellow-400 px-3 py-1 text-black hover:bg-yellow-500 transition">
Edit
</a>
<form action="{{ route('books.destroy', $book->id) }}"
method="POST"
class="inline"
onsubmit="return confirm('Yakin ingin menghapus buku ini?')">
@csrf
@method('DELETE')
<button type="submit"
class="rounded-full bg-red-600 px-3 py-1 text-white hover:bg-red-700 transition">
Hapus
</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</body>
</html>
6.2. Tambahkan Kode Halaman Tambah Buku (create.blade.php)
Pada tahap ini, kamu akan membuat halaman formulir khusus yang berfungsi untuk menerima input data buku baru agar bisa langsung disimpan ke dalam koleksi perpustakaan digital kamu.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Buku - Membuat</title>
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css>">
</head>
<body class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
<div class="w-full max-w-md bg-white rounded-lg shadow-md p-6">
<h1 class="text-xl font-bold mb-6 text-gray-800">Tambah Buku Baru</h1>
<form action="{{ route('books.store') }}" method="POST" class="space-y-4">
@csrf
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Judul Buku
</label>
<input
type="text"
name="judul"
required
class="w-full rounded-full outline-none transition-all durations-300 border border-gray-300 px-3 py-2 focus:border-green-500 focus:ring focus:ring-green-200"
>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Penulis
</label>
<input
type="text"
name="penulis"
required
class="w-full rounded-full outline-none transition-all durations-300 border border-gray-300 px-3 py-2 focus:border-green-500 focus:ring focus:ring-green-200"
>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Tahun Terbit
</label>
<input
type="number"
name="tahun_terbit"
required
class="w-full outline-none transition-all durations-300 rounded-full border border-gray-300 px-3 py-2 focus:border-green-500 focus:ring focus:ring-green-200"
>
</div>
<div class="flex justify-end gap-2 pt-4">
<a href="{{ route('books.index') }}"
class="rounded-full border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-100 transition">
Batal
</a>
<button
type="submit"
class="rounded-full bg-green-600 px-4 py-2 text-white hover:bg-green-700 transition">
Simpan Buku
</button>
</div>
</form>
</div>
</body>
</html>
6.3. Tambahkan Kode Halaman Edit Buku (update.blade.php)
Terakhir, kamu akan membuat halaman untuk memperbarui informasi buku, di mana formulir ini secara otomatis akan menampilkan data lama agar kamu bisa mengubah bagian yang diperlukan dengan mudah.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Buku - Mengubah</title>
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css>">
</head>
<body class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
<div class="w-full max-w-md bg-white rounded-lg shadow-md p-6">
<h1 class="text-xl font-bold mb-6 text-gray-800">Edit Data Buku</h1>
<form action="{{ route('books.update', $book->id) }}" method="POST" class="space-y-4">
@csrf
@method('PUT')
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Judul Buku
</label>
<input
type="text"
name="judul"
value="{{ $book->judul }}"
required
class="w-full rounded-full outline-none transition-all durations-300 border border-gray-300 px-3 py-2 focus:border-yellow-500 focus:ring focus:ring-yellow-200"
>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Penulis
</label>
<input
type="text"
name="penulis"
value="{{ $book->penulis }}"
required
class="w-full rounded-full outline-none transition-all durations-300 border border-gray-300 px-3 py-2 focus:border-yellow-500 focus:ring focus:ring-yellow-200"
>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Tahun Terbit
</label>
<input
type="number"
name="tahun_terbit"
value="{{ $book->tahun_terbit }}"
required
class="w-full rounded-full outline-none transition-all durations-300 border border-gray-300 px-3 py-2 focus:border-yellow-500 focus:ring focus:ring-yellow-200"
>
</div>
<div class="flex justify-end gap-2 pt-4">
<a href="{{ route('books.index') }}"
class="rounded-md border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-100 transition">
Batal
</a>
<button
type="submit"
class="rounded-md bg-yellow-500 px-4 py-2 text-white hover:bg-yellow-600 transition">
Update Buku
</button>
</div>
</form>
</div>
</body>
</html>
7. Jalankan
Setelah semua kode terpasang dengan benar, sekarang saatnya kamu menyalakan mesin aplikasi dengan menjalankan perintah ini di terminal agar proyek kamu bisa diakses melalui browser.
php artisan serve
8. Akses
Inilah langkah terakhir di mana kamu membuka alamat tersebut di browser untuk melihat hasil kerja kerasmu dan mulai mengelola data buku secara langsung melalui antarmuka aplikasi.
http://127.0.0.1:8000/books/
9. Hasil
Selamat, kamu telah berhasil membangun aplikasi manajemen buku sederhana menggunakan Laravel dari tahap migrasi hingga antarmuka pengguna.
Sekarang seluruh fitur CRUD sudah berfungsi dengan baik dan aplikasi kamu siap untuk digunakan dalam mengelola data buku secara praktis.
Teruslah bereksperimen dengan menambahkan fitur baru untuk memperdalam pemahaman kamu mengenai alur kerja framework Laravel ini
9. Rekomendasi Kelas
Jika kamu merasa materi di artikel ini sudah sangat membantu, bayangkan betapa pesatnya perkembangan skill kamu jika mempelajari proyek yang jauh lebih kompleks dan profesional!
Kami sangat merekomendasikan kamu untuk segera bergabung dalam kelas "Ebook Laravel 12 & SC React: Web Hospital & Doctor Appointment", di mana kamu akan belajar Laravel 12 secara mendalam dengan praktik langsung membangun backend API profesional menggunakan service-repository pattern, Sanctum middleware, hingga Spatie roles & permissions.
Tidak hanya itu, kamu akan mendapatkan source code frontend React TypeScript siap pakai yang terintegrasi langsung dengan Laravel, sehingga sangat cocok untuk dijadikan portofolio kerja atau bahkan langsung dijual ulang ke klien sebagai fondasi produk digital milikmu sendiri.
Kelas ini adalah yang terbaik bagi kamu yang suka belajar dengan cara menggali seluk-beluk masalah secara luas melalui teks dan ingin memiliki kontrol penuh atas kecepatan praktik tanpa harus menonton durasi video yang panjang.
Kamu akan mengerjakan proyek real-world sistem manajemen rumah sakit lengkap, mulai dari fitur CRUD, jadwal dokter, hingga sistem booking appointment yang sangat rapi dan berkualitas.
Ini adalah investasi paling berharga untuk menjadi developer ahli, jadi segera amankan aksesmu melalui tautan berikut: https://buildwithangga.com/kelas/ebook-laravel-12-sc-reactweb-hospital-doctor-appointment
