Pendahuluan
Setelah berhasil membuat form dan menyimpan data di artikel sebelumnya, kini saatnya kita mempelajari cara menampilkan data yang telah tersimpan. Dalam tutorial ini, kita akan mengimplementasikan operasi Read dengan fitur pagination dan pencarian.
Langkah 1: Update ProductController
Tambahkan kode berikut di app/Http/Controllers/ProductController.php:
public function index(Request $request)
{
$search = $request->query('search');
$products = Product::query()
->when($search, function ($query) use ($search) {
return $query->where('name', 'like', "%{$search}%")
->orWhere('description', 'like', "%{$search}%");
})
->latest()
->paginate(10);
return view('products.index', compact('products', 'search'));
}
public function show(Product $product)
{
return view('products.show', compact('product'));
}Langkah 2: Membuat View untuk List Data
Buat file resources/views/products/index.blade.php:
@extends('layouts.app')
@section('content')
<div class="container mx-auto px-4 py-8">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">Daftar Produk</h1>
<a href="{{ route('products.create') }}"
class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
Tambah Produk
</a>
</div>
<!-- Search Form -->
<div class="mb-6">
<form action="{{ route('products.index') }}" method="GET">
<div class="flex gap-4">
<input type="text"
name="search"
value="{{ $search ?? '' }}"
placeholder="Cari produk..."
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
<button type="submit"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Cari
</button>
</div>
</form>
</div>
<!-- Products Table -->
<div class="bg-white shadow-md rounded my-6">
<table class="min-w-full">
<thead>
<tr class="bg-gray-100">
<th class="px-6 py-3 border-b text-left">Nama</th>
<th class="px-6 py-3 border-b text-left">Harga</th>
<th class="px-6 py-3 border-b text-left">Stok</th>
<th class="px-6 py-3 border-b text-center">Aksi</th>
</tr>
</thead>
<tbody>
@forelse ($products as $product)
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 border-b">{{ $product->name }}</td>
<td class="px-6 py-4 border-b">Rp {{ number_format($product->price, 0, ',', '.') }}</td>
<td class="px-6 py-4 border-b">{{ $product->stock }}</td>
<td class="px-6 py-4 border-b text-center">
<a href="{{ route('products.show', $product) }}"
class="text-blue-600 hover:text-blue-900 mr-3">
Detail
</a>
<a href="{{ route('products.edit', $product) }}"
class="text-yellow-600 hover:text-yellow-900 mr-3">
Edit
</a>
<form action="{{ route('products.destroy', $product) }}"
method="POST"
class="inline">
@csrf
@method('DELETE')
<button type="submit"
class="text-red-600 hover:text-red-900"
onclick="return confirm('Apakah Anda yakin ingin menghapus produk ini?')">
Hapus
</button>
</form>
</td>
</tr>
@empty
<tr>
<td colspan="4" class="px-6 py-4 border-b text-center">
Tidak ada produk yang ditemukan.
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="mt-6">
{{ $products->links() }}
</div>
</div>
@endsectionLangkah 3: Membuat View Detail Produk
Buat file resources/views/products/show.blade.php:
@extends('layouts.app')
@section('content')
<div class="container mx-auto px-4 py-8">
<div class="max-w-2xl mx-auto">
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<h1 class="text-2xl font-bold mb-6">Detail Produk</h1>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2">
Nama Produk
</label>
<p class="text-gray-900">{{ $product->name }}</p>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2">
Deskripsi
</label>
<p class="text-gray-900">{{ $product->description }}</p>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2">
Harga
</label>
<p class="text-gray-900">Rp {{ number_format($product->price, 0, ',', '.') }}</p>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-bold mb-2">
Stok
</label>
<p class="text-gray-900">{{ $product->stock }}</p>
</div>
<div class="flex items-center justify-between">
<a href="{{ route('products.edit', $product) }}"
class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Edit Produk
</a>
<a href="{{ route('products.index') }}"
class="text-gray-600 hover:text-gray-800">
Kembali
</a>
</div>
</div>
</div>
</div>
@endsectionLangkah 4: Konfigurasi Pagination dengan Tailwind
- Publish vendor pagination views:
php artisan vendor:publish --tag=laravel-pagination- Edit file
app/Providers/AppServiceProvider.php:
use Illuminate\Pagination\Paginator;
public function boot()
{
Paginator::useBootstrap(); // Ganti dengan Tailwind jika diperlukan
}Best Practices dan Tips
1. Optimasi Query
- Gunakan eager loading untuk relasi
- Index kolom yang sering dicari
- Batasi jumlah data yang ditampilkan
// Contoh eager loading jika ada relasi
$products = Product::with('category')
->latest()
->paginate(10);2. Search dan Filter
- Gunakan scope untuk query yang sering digunakan
- Sanitasi input pencarian
- Tambahkan index untuk kolom yang sering dicari
// Di Model Product
public function scopeSearch($query, $search)
{
return $query->where('name', 'like', "%{$search}%")
->orWhere('description', 'like', "%{$search}%");
}3. Security
- Validasi input search
- Hindari SQL injection
- Gunakan proper escaping
4. Performance
- Cache hasil query yang sering diakses
- Optimasi jumlah query
- Gunakan proper indexing
Kesimpulan
Sekarang Anda telah berhasil mengimplementasikan operasi Read di Laravel 11 dengan fitur:
- Menampilkan list data
- Pagination
- Pencarian
- Detail produk
Leave a Reply