Halo teman-teman semuanya! Selamat datang kembali di seri lanjutan "Tutorial Laravel 11 untuk Pemula". Setelah sebelumnya di Part 6 kita berhasil membuat fitur tambah data ke dalam database, kali ini di Part 7, kita akan belajar bagaimana cara menampilkan detail data berdasarkan ID di Laravel 11.
Fitur ini akan sangat berguna ketika nanti aplikasi digunakan secara publik yang terdapat UI atau Frontend nya, karena biasanya detail data ini ditampilkan ke pengguna untuk melihat informasi lengkap dari suatu item—misalnya produk, artikel, atau data lainnya—yang sebelumnya hanya ditampilkan dalam bentuk list di halaman utama.
Apa Itu Fitur Detail Data?
Fitur ini memungkinkan pengguna untuk mengakses informasi lengkap dari satu entitas berdasarkan ID-nya di database. Biasanya ditampilkan dalam bentuk halaman detail atau detail view.
Contoh penggunaannya:
Melihat detail produk di toko online.
Menampilkan informasi lengkap artikel atau postingan.
Melihat profil pengguna berdasarkan ID, dan sebagainya.
Pada tutorial ini, kita akan membuat detail data by id yang sederhana, dan menampilkan isi nya.
Langkah-Langkah Menampilkan Detail Data Berdasarkan ID
1. Tambahkan Route Baru
Pertama-tama, kita tambahkan route baru di file routes/web.php:
use App\Http\Controllers\ProductController; Route::get('/products/{id}', [ProductController::class, 'show'])->name('products.show');Penjelasan:
Route ini akan menangani request ketika user mengunjungi URL seperti
/products/3, di mana3adalah ID dari produk yang ingin ditampilkan.
2. Tambahkan Method show di Controller
Buka kembali ProductController.php, lalu tambahkan method baru bernama show:
public function show($id) { $product = Product::findOrFail($id); return view('products.show', compact('product')); }Penjelasan:
findOrFail()akan mencoba mencari produk berdasarkan ID. Jika tidak ditemukan, akan otomatis menampilkan halaman 404.Data produk kemudian dikirim ke view
products.show.
3. Buat File View untuk Menampilkan Detail Produk
Sekarang buat file baru resources/views/products/show.blade.php, lalu isi dengan kode berikut:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Detail Produk - {{ $product->name }}</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body style="background-color: #f3f4f6;"> <div class="container mt-5 p-4 bg-white rounded shadow"> <h1 class="mb-4 text-center">Detail Produk</h1> <div class="row"> <div class="col-md-6"> <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="img-fluid rounded"> </div> <div class="col-md-6"> <h2>{{ $product->name }}</h2> <p class="text-muted">{{ $product->description }}</p> <h4 class="text-primary">Rp {{ number_format($product->price, 0, ',', '.') }}</h4> <a href="{{ route('products.index') }}" class="btn btn-secondary mt-3">Kembali ke Daftar Produk</a> </div> </div> </div> </body> </html>Penjelasan View:
Gambar produk ditampilkan di sebelah kiri, dan detail deskripsi di sebelah kanan.
Ada tombol untuk kembali ke halaman daftar produk (table list).
Update Halaman Produk
Sekarang, silakan buka resources/views/products/index.blade.php, kita akan menambahkan tombol Tambah Produk dan kolom baru pada table di halaman produk yaitu kolom action, yang nanti nya berisi tombol Show.
<!-- Tombol Tambah Produk --> <div class="mb-3 text-end"> <a href="{{ route('products.create') }}" class="btn btn-success">+ Tambah Produk</a> </div> <!-- Tabel Produk --> <table class="table table-striped table-bordered rounded"> <thead class="table-dark"> <tr> <th>#</th> <th>Gambar</th> <th>Nama Produk</th> <th>Deskripsi</th> <th>Harga</th> <th>Aksi</th> <!-- Tambahan kolom aksi --> </tr> </thead> <tbody> @if ($products->isEmpty()) <tr> <td colspan="6" class="text-center text-muted">Tidak ada produk yang tersedia.</td> </tr> @else @foreach ($products as $product) <tr> <td>{{ $loop->iteration }}</td> <td> <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="img-thumbnail" width="100"> </td> <td>{{ $product->name }}</td> <td>{{ $product->description }}</td> <td>Rp {{ number_format($product->price, 0, ',', '.') }}</td> <td> <a href="{{ route('products.show', $product->id) }}" class="btn btn-sm btn-info">Show</a> </td> </tr> @endforeach @endif </tbody> </table>Penjelasan Kolom Action:
Show: Untuk melihat detail lengkap produk.
Sekarang coba jalankan server laravel nya dengan cara php artisan serve, lalu akses di browser 127.0.0.1:8000/products. Maka nanti table kita akan menampilkan 2 tombol baru, yaitu Tambah Produk dan tombol Show.
Ketika tombol show diklik, maka akan tampil halaman detail dari produk tersebut, seperti gambar di bawah ini.
Kesimpulan
Di part ketujuh ini, kita telah berhasil mempelajari bagaimana cara menampilkan detail data berdasarkan ID menggunakan Laravel 11. Fitur ini sangat penting dalam pengembangan aplikasi web karena hampir semua aplikasi membutuhkan tampilan detail dari data tertentu.
Kita telah melalui langkah demi langkah, mulai dari menambahkan route, membuat method di controller, hingga membuat tampilan detail menggunakan Blade.
Apa Selanjutnya?
Di part selanjutnya, kita akan belajar bagaimana mengedit dan memperbarui data yang sudah ada di database.