Hai, Sob! Supaya kamu makin paham dengan Laravel, yuk buat web CRUD sederhana menggunakan studi case data perpustakaan. Artikel ini akan membahas cara menampilkan dan membuat form tambah data menggunakan query builder Laravel.
Query builder adalah fitur bawaan Laravel yang menyediakan cara mudah, efisien, dan aman untuk menulis query database tanpa perlu menggunakan SQL mentah. Jadi, kamu bisa mengambil data, menambah, mengubah, dan menghapus data dari database menggunakan sintaks PHP yang lebih bersih.
Keuntungan apabila menggunakan query builder yaitu sintaks lebih ringkas dan mudah dibaca, lebih aman dari SQL injection, dinamis dan mudah dikustomisasi, dan konsisten di semua tipe database (bekerja di MySQL, PostgreSQL, SQLite, dan SQL Server).
Yuk, langsung simak cara implementasi menampilkan data dan membuat form tambah data perpustakaan pada Laravel berikut ini, Sob!
Prasyarat
- Sudah menginisiasi proyek Laravel
Step 1: Buat Database dan Tabel
Di phpMyAdmin atau tools database serupa, buat database menggunakan perintah:
CREATE DATABASE db_perpustakaan;
Buat tabel dan isi tabel.
USE db_perpustakaan;
CREATE TABLE buku (
id INT AUTO_INCREMENT PRIMARY KEY,
judul VARCHAR(255),
penulis VARCHAR(255),
tahun_terbit INT,
penerbit VARCHAR(255),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
INSERT INTO buku (judul, penulis, tahun_terbit, penerbit) VALUES
('Belajar Laravel Dasar', 'Rina Oktaviani', 2021, 'Pustaka Koding'),
('Pemrograman PHP Modern', 'Andi Nugroho', 2020, 'TeknoPress'),
('Panduan HTML & CSS', 'Dewi Kartika', 2019, 'WebMedia'),
('Mastering JavaScript', 'Eko Supriadi', 2022, 'CodeLogic'),
('Dasar-Dasar MySQL', 'Siti Aminah', 2018, 'BasisData Press'),
('Logika Pemrograman', 'Budi Hartono', 2017, 'Informatika Bandung'),
('Framework CodeIgniter', 'Joko Sutrisno', 2020, 'TeknoKarya'),
('Pemrograman Python', 'Linda Sari', 2023, 'AI Press'),
('Rekayasa Perangkat Lunak', 'Yusuf Rahmat', 2021, 'EduMedia'),
('Desain Web Responsif', 'Ahmad Fauzi', 2019, 'FrontEnd Studio'),
('Pemrograman Java Lanjut', 'Dian Arisandi', 2022, 'Teknik Koding'),
('Analisis Sistem Informasi', 'Rahmawati', 2018, 'Informatika Utama'),
('Praktikum Laravel 10', 'Aldi Prasetyo', 2023, 'Laravelindo'),
('Algoritma dan Struktur Data', 'Eka Nurhadi', 2020, 'CodePress'),
('Pemrograman C++ Dasar', 'Rizky Hidayat', 2017, 'Langit Teknologi'),
('Manajemen Proyek TI', 'Melati Ayu', 2019, 'ProjectMedia'),
('Pemrograman Mobile Android', 'Taufik Maulana', 2021, 'MobileDev ID'),
('Pemrograman Kotlin', 'Sari Yuliana', 2022, 'MobileWorks'),
('Dasar Pemrograman R', 'Indra Kurniawan', 2021, 'DataStat Press'),
('Belajar UI/UX Design', 'Rina Larasati', 2023, 'DesignInovasi'),
('Cloud Computing untuk Pemula', 'Yulianto', 2022, 'CloudEra'),
('DevOps dan CI/CD', 'Farhan Alfi', 2023, 'DevMaster'),
('Belajar Git dan GitHub', 'Agus Salim', 2020, 'VersionControl ID'),
('Dasar Pemrograman Web', 'Tia Kartika', 2018, 'WebStart'),
('Teknologi Big Data', 'Handoko Wijaya', 2021, 'DataMass');
Step 2: Menghubungkan Database dengan Laravel
Buka file .env Laravel, sesuaikan dan ubah bagian berikut:
DB_DATABASE=db_perpustakaan
DB_USERNAME=root
DB_PASSWORD=
Kemudian, run server menggunakan perintah:
php artisan serve
Step 3: Buat Route, Controller dan View
Buat controller bernama ‘BukuController’ yang akan menyimpan logika interaksi antara view dengan database menggunakan perintah:
php artisan make:controller BukuController
Buka app/Http/Controller/BukuController.php dan edit isinya menjadi seperti di bawah ini.
<?php
namespace App\Http\Controllers;
use Illuminate\Support\Facades\DB;
use Illuminate\Http\Request;
class BukuController extends Controller
{
public function index()
{
// Ambil data dari tabel buku
$buku = DB::table('buku')->get();
// Kirim data ke view
return view('buku.index', ['buku' => $buku]);
}
public function tambah()
{
return view('buku.tambah');
}
public function simpan(Request $request)
{
DB::table('buku')->insert([
'judul' => $request->judul,
'penulis' => $request->penulis,
'tahun_terbit' => $request->tahun_terbit,
'penerbit' => $request->penerbit
]);
return redirect('/buku');
}
}
Penjelasan:
- Untuk menampilkan data buku menggunakan function index() yang mengambil data dari tabel buku menggunakan perintah: $buku = DB::table(‘buku’)->get(); yang artinya sama dengan SELECT *FROM buku;
Setelah data diambil, Laravel akan mengirim data tersebut ke view buku/index.blade.php menggunakan return view(‘buku.index’, [‘buku’ => $buku]);
- Untuk menampilkan view form tambah buku menggunakan function tambah() yang mengembalikan view tambah.blade.php: return view(‘buku.tambah’);. Sedangkan logika yang memproses data dari form yang dikirim pengguna diatur oleh function simpan(Request $request) yang menyimpan data input pengguna melalui $request lalu disimpan ke tabel buku dengan query builder insert. Setelah data berhasil disimpan, pengguna akan dialihkan kembali ke halaman daftar buku (/buku) dengan: return redirect(‘/buku’);
Kemudian, buat route di routes/web.php, untuk mengatur jalur view ditampilkan di browser.
use App\Http\Controllers\BukuController;
Route::get('/buku', [BukuController::class, 'index']);
Route::get('/buku/tambah', [BukuController::class, 'tambah']);
Route::post('/buku/simpan', [BukuController::class, 'simpan']);
Step 4: Buat Folder dan File View
Supaya view terstruktur dan mudah ketika mengelola ke depannya. Buat folder bernama ‘buku’ di resources/views lalu buat file view ‘index.blade.php’ untuk menampilkan data buku dan ‘tambah.blade.php’ untuk form tambah data. Struktur foldernya seperti ini:
project-laravel/
├── resources/
├───── views/
├───────── buku/
├─────────────── index.blade.php
├─────────────── tambah.blade.php
Isi index.blade.php dengan kode HTML di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Data Buku</title>
<style>
table { border-collapse: collapse; width: 80%; margin: 20px auto; }
th, td { border: 1px solid #ddd; padding: 8px; }
th { background: #007BFF; color: white; }
a { text-decoration: none; color: #007BFF; }
h2 { text-align: center; }
</style>
</head>
<body>
<h2>Daftar Buku</h2>
<p style=”text-align:center;”><a href=”/buku/tambah”>+ Tambah Buku Baru</a></p>
<table>
<thead>
<tr>
<th>No</th>
<th>Judul</th>
<th>Penulis</th>
<th>Tahun Terbit</th>
<th>Penerbit</th>
</tr>
</thead>
<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>
</tr>
@endforeach
</tbody>
</table>
</body>
</html>
Isi tambah.blade.php dengan kode HTML berikut:
<!DOCTYPE html>
<html>
<head>
<title>Tambah Buku</title>
<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>
<h2>Tambah Data Buku</h2>
<form action=”/buku/simpan” method=”POST”>
@csrf
<label>Judul Buku</label>
<input type=”text” name=”judul” required>
<label>Penulis</label>
<input type=”text” name=”penulis” required>
<label>Tahun Terbit</label>
<input type=”number” name=”tahun_terbit” required>
<label>Penerbit</label>
<input type=”text” name=”penerbit” required>
<input type=”submit” value=”Simpan”>
</form>
</body>
</html>
Step 5: Akses Web pada Browser
Karena pada step 2 sudah menjalankan servernya, kamu bisa langsung coba akses http://127.0.0.1:8000/buku pada browser maka akan menampilkan tampilan seperti di bawah ini.
Coba klik Tambah Buku Baru, halaman akan mengarah ke http://127.0.0.1:8000/buku/tambah
Kamu bisa coba menambahkan data buku baru maka akan muncul di daftar buku.
Sekarang kamu sudah berhasil menampilkan daftar buku dari database perpustakaan dan menambahkan daftar buku melalui form menggunakan query builder Laravel dan mempercantik tampilan dengan CSS sederhana. Kamu bisa mengembangkan ini sesuai kebutuhan atau mau lanjut ke artikel menambahkan fitur edit dan hapus data pada artikel selanjutnya.
Kalau ada yang masih bingung, jangan ragu hubungi Tim Support Jagoan Hosting via Live Chat atau Open Ticket, Sob!
Simak terus tips-tips seputar domain dan hosting dari Jagoan Hosting di laman Pusat Tutorial Hosting & Domain.