- Langkah 1 - Membuat Controller Product
- Langkah 2 - Membuat Route Products
- Langkah 3 - Membuat View Products Index
- Langkah 4 - Uji Coba Menampilkan Data
- Kesimpulan
Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana membuat sebuah Model dan Migration di dalam Laravel 13. Kali ini, kita akan mempelajari cara menampilkan data dari database menggunakan view di Laravel 13.
Langkah 1 - Membuat Controller Product
Untuk menampilkan data dari database, kita memerlukan sebuah Controller. Controller berfungsi sebagai penghubung antara Model (database) dan View (tampilan antarmuka pengguna). Dengan menggunakan Controller, kita dapat mengambil data dari database dan mengirimkannya ke View agar bisa ditampilkan kepada pengguna.
Mari kita mulai dengan membuat Controller untuk mengelola data Product. Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam folder project Laravel-nya.
php artisan make:controller ProductController
Perintah di atas akan membuat sebuah Controller baru dengan nama ProductController.php, yang secara otomatis akan disimpan di dalam folder: app/Http/Controllers.
Silahkan buka file tersebut, kemudian ubah semua kode-nya menjadi seperti berikut ini.
app/Http/Controllers/ProductController.php
<?php
namespace App\Http\Controllers;
//import model product
use App\Models\Product;
//import return type View
use Illuminate\View\View;
class ProductController extends Controller
{
/**
* index
*
* @return View
*/
public function index() : View
{
//get all products
$products = Product::latest()->paginate(10);
//render view with products
return view('products.index', compact('products'));
}
}
Dari perubahan kode di atas, pertama kita tentukan namespace atau lokasi controller ini berada.
namespace App\Http\Controllers;
Namespace di atas menunjukkan bahwa controller ProductController berada di dalam folder app/Http/Controllers.
Kemudian kita import Model Product, yang nantinya digunakan untuk mengambil data dari tabel products di dalam database.
//import model product
use App\Models\Product;
Selanjutnya, kita import class View yang akan digunakan sebagai tipe data return dari method index.
//import return type View
use Illuminate\View\View;
Setelah itu, di dalam class ProductController, kita membuat sebuah method baru dengan nama index.
public function index() : View
{
//...
}
Method index ini nantinya digunakan untuk menampilkan data products ke dalam view.
Di dalam method tersebut, kita melakukan proses get data products dari tabel products yang ada di database menggunakan Model Product.
//get all products
$products = Product::latest()->paginate(10);
Pada kode di atas, kita mengurutkan data yang ditampilkan berdasarkan data yang paling terbaru menggunakan method latest().
Kemudian kita membatasi jumlah data yang ditampilkan pada setiap halaman sebanyak 10 data, dengan menggunakan method paginate(10).
Terakhir, kita mengembalikan data produk yang telah diambil ke tampilan products.index menggunakan kode berikut ini.
//render view with products
return view('products.index', compact('products'));
Fungsi compact() di atas digunakan untuk membuat sebuah array asosiatif dari variable $products, sehingga data produk tersebut dapat diakses dan ditampilkan di dalam view products.index.
Langkah 2 - Membuat Route Products
Laravel menyediakan Route Resource, yaitu cara singkat untuk mendefinisikan semua route CRUD (Create, Read, Update, Delete) dalam satu baris kode.
Silakan buka file routes/web.php, kemudian ubah kode-nya menjadi seperti berikut ini.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
//import product controller
use App\Http\Controllers\ProductController;
//route resource for products
Route::resource('/products', ProductController::class);
Route::get('/', function () {
return view('welcome');
});
Dengan hanya satu baris kode di atas, Laravel otomatis membuat 7 route bawaan untuk CRUD produk. Untuk melihat daftar lengkap route yang dibuat, jalankan perintah berikut di dalam terminal/CMD.
php artisan route:list
Jika berhasil, maka kurang lebih hasilnya seperti berikut ini.
| METHOD | URI | CONTROLLER METHOD | KETERANGAN |
|---|---|---|---|
| GET | /products |
index() |
Menampilkan daftar produk |
| GET | /products/create |
create() |
Menampilkan form tambah produk |
| POST | /products |
store() |
Menyimpan data produk baru ke database |
| GET | /products/{product} |
show() |
Menampilkan detail produk berdasarkan ID |
| GET | /products/{product}/edit |
edit() |
Menampilkan form edit produk berdasarkan ID |
| PUT/PATCH | /products/{product} |
update() |
Memperbarui data produk berdasarkan ID |
| DELETE | /products/{product} |
destroy() |
Menghapus produk berdasarkan ID |
Langkah 3 - Membuat View Products Index
Laravel secara default menyimpan tampilan atau view di dalam folder resources/views. Karena kita akan membuat tampilan list data produk, sekarang silahkan buat folder baru dengan nama products di dalam resources/views, lalu buat file baru di dalam folder tersebut dengan nama index.blade.php.
Kurang lebih struktur folder-nya seperti berikut ini.
app
├── Http
│ └── Controllers
│ └── ProductController.php
│
resources
├── views
│ ├── products
│ │ └── index.blade.php
│ └── welcome.blade.php
│
routes
└── web.php
Silahkan buka file resources/views/products/index.blade.php, kemudian masukkan kode berikut ini di dalamnya.
NOTE: Di tutorial ini kita menggunakan Tailwind CSS via CDN agar cepat dan mudah. Nanti kalau teman-teman sudah pakai Vite/Tailwind config sendiri, tinggal sesuaikan saja.
resources/views/products/index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Data Products - SantriKoding.com</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body class="bg-gray-100">
<div class="max-w-6xl mx-auto px-4 py-10">
<div class="text-center">
<h3 class="text-2xl font-bold mb-2">Tutorial Laravel 13 untuk Pemula</h3>
<h5 class="text-sm">
<a href="https://santrikoding.com" class="text-blue-600 hover:underline">
www.santrikoding.com
</a>
</h5>
<hr class="my-6 border-gray-200">
</div>
<div class="bg-white rounded-2xl shadow-sm border border-gray-200">
<div class="p-6">
<a href="{{ route('products.create') }}"
class="inline-flex items-center justify-center px-4 py-2 rounded-lg
bg-emerald-600 text-white text-sm font-semibold
hover:bg-emerald-700 transition mb-4">
ADD PRODUCT
</a>
<div class="overflow-x-auto">
<table class="w-full text-sm border border-gray-200 rounded-lg overflow-hidden">
<thead class="bg-gray-50 text-gray-700">
<tr>
<th class="px-4 py-3 text-left font-semibold border-b">IMAGE</th>
<th class="px-4 py-3 text-left font-semibold border-b">TITLE</th>
<th class="px-4 py-3 text-left font-semibold border-b">PRICE</th>
<th class="px-4 py-3 text-left font-semibold border-b">STOCK</th>
<th class="px-4 py-3 text-left font-semibold border-b w-[220px]">ACTIONS</th>
</tr>
</thead>
<tbody>
@forelse ($products as $product)
<tr class="border-b last:border-b-0">
<td class="px-4 py-3">
<div class="flex justify-center">
<img
src="{{ asset('/storage/products/'.$product->image) }}"
class="w-[150px] rounded-lg border border-gray-200"
alt="{{ $product->title }}"
>
</div>
</td>
<td class="px-4 py-3 font-medium text-gray-900">
{{ $product->title }}
</td>
<td class="px-4 py-3 text-gray-700">
{{ "Rp " . number_format($product->price,2,',','.') }}
</td>
<td class="px-4 py-3 text-gray-700">
{{ $product->stock }}
</td>
<td class="px-4 py-3">
<form
action="{{ route('products.destroy', $product->id) }}"
method="POST"
class="delete-form flex items-center gap-2"
>
<a href="{{ route('products.show', $product->id) }}"
class="px-3 py-2 rounded-lg bg-gray-900 text-white
text-xs font-semibold hover:bg-gray-800 transition">
SHOW
</a>
<a href="{{ route('products.edit', $product->id) }}"
class="px-3 py-2 rounded-lg bg-blue-600 text-white
text-xs font-semibold hover:bg-blue-700 transition">
EDIT
</a>
@csrf
@method('DELETE')
<button type="submit"
class="px-3 py-2 rounded-lg bg-red-600 text-white
text-xs font-semibold hover:bg-red-700 transition">
HAPUS
</button>
</form>
</td>
</tr>
@empty
<tr>
<td colspan="5" class="px-4 py-6">
<div class="bg-red-50 border border-red-200 text-red-700
rounded-lg px-4 py-3">
Data Products belum ada.
</div>
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<div class="mt-4">
{{ $products->links() }}
</div>
</div>
</div>
</div>
<!-- SweetAlert Script -->
<script>
// SweetAlert for delete confirmation
document.querySelectorAll('.delete-form').forEach(form => {
form.addEventListener('submit', function (e) {
e.preventDefault();
Swal.fire({
title: 'Apakah Anda yakin?',
text: "Data yang dihapus tidak dapat dikembalikan!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#dc2626',
cancelButtonColor: '#6b7280',
confirmButtonText: 'Ya, Hapus!',
cancelButtonText: 'Batal'
}).then((result) => {
if (result.isConfirmed) {
form.submit();
}
});
});
});
// SweetAlert for success message
@if (session('success'))
Swal.fire({
icon: 'success',
title: 'Berhasil',
text: '{{ session('success') }}',
timer: 3000,
showConfirmButton: false
});
@endif
</script>
</body>
</html>
Dari penambahan kode di atas, pertama kita menambahkan CDN untuk Tailwind CSS. Ini bertujuan agar kita bisa langsung menggunakan utility class Tailwind untuk membuat tampilan user interface dengan cepat, tanpa perlu melakukan konfigurasi Tailwind terlebih dahulu.
<script src="https://cdn.tailwindcss.com"></script>
Kemudian kita juga menambahkan library SweetAlert2 melalui CDN. Library ini akan kita gunakan untuk menampilkan alert konfirmasi saat proses delete dan notifikasi sukses ketika ada flash session.
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
Setelah itu, untuk menampilkan data products, kita melakukan perulangan menggunakan direktif @forelse. Direktif ini sangat berguna karena memiliki kondisi fallback ketika data kosong.
@forelse ($products as $product)
// tampilkan data product
@empty
// tampilkan pesan jika data product belum ada
@endforelse
Di dalam perulangan tersebut, kita menampilkan beberapa field, seperti image, title, price, dan stock. Untuk menampilkan gambar, kita ambil dari folder storage menggunakan helper asset().
<img src="{{ asset('/storage/products/'.$product->image) }}">
Kemudian untuk menampilkan harga, kita format menggunakan function number_format() dari PHP agar format angka menjadi lebih rapi seperti format rupiah.
{{ "Rp " . number_format($product->price,2,',','.') }}
Selanjutnya, untuk menampilkan pagination, kita cukup memanggil method links() karena sebelumnya kita mengambil data menggunakan paginate(10) di controller.
{{ $products->links() }}
Terakhir, kita menambahkan dua notifikasi menggunakan SweetAlert2, yaitu:
-
Alert Konfirmasi Delete
Kita menambahkan class
delete-formpada form delete, kemudian kita loop semua form tersebut menggunakan JavaScript.Saat form di-submit, kita prevent default terlebih dahulu agar tidak langsung menghapus data. Setelah itu, kita tampilkan konfirmasi menggunakan SweetAlert. Jika user klik tombol Ya, Hapus!, maka form akan di-submit kembali secara manual.
document.querySelectorAll('.delete-form').forEach(form => { form.addEventListener('submit', function (e) { e.preventDefault(); Swal.fire({ title: 'Apakah Anda yakin?', text: "Data yang dihapus tidak dapat dikembalikan!", icon: 'warning', showCancelButton: true, confirmButtonText: 'Ya, Hapus!', cancelButtonText: 'Batal' }).then((result) => { if (result.isConfirmed) { form.submit(); } }); }); }); -
Notifikasi Sukses
Notifikasi ini akan tampil ketika terdapat flash session dengan key
success, biasanya dikirim dari controller setelah proses insert, update, atau delete berhasil.@if (session('success')) Swal.fire({ icon: 'success', title: 'Berhasil', text: '{{ session('success') }}', timer: 3000, showConfirmButton: false }); @endif
Dengan demikian, halaman products.index tidak hanya menampilkan data dari database, tetapi juga memberikan pengalaman pengguna yang lebih baik karena memiliki notifikasi yang modern dan konfirmasi saat menghapus data.
Langkah 4 - Uji Coba Menampilkan Data
Setelah semua berhasil dibuat, maka sekarang kita akan lakukan uji coba untuk menampilkan data-nya.
Silahkan teman-teman buka URL berikut ini http://localhost:8000/products. Jika berhasil maka kurang lebih hasilnya seperti berikut ini.
Di atas, muncul pesan Data products belum ada. karena di database memang masih belum ada data-nya.
Kesimpulan
Pada artikel ini, kita semua telah belajar banyak hal, seperti membuat controller, route dan view untuk menampilkan data products dari database ke pengguna melalui view.
Pada artikel berikutnya, kita semua akan belajar bagaimana cara membuat proses insert data ke dalam database di Laravel 13.
Terima Kasih
Artikel ini dibaca sebanyak 5.675 kali
SAWERIA
Memuat komentar...