Tutorial ini akan memandu Anda langkah demi langkah dalam mengimplementasikan fitur pencarian (search) di aplikasi Laravel Anda. Fitur ini memungkinkan pengguna untuk mencari data tertentu berdasarkan kata kunci.

Langkah 1: Membuat Form Pencarian di View

Pertama, kita akan menambahkan form pencarian di view yang menampilkan daftar data (misalnya, resources/views/products/index.blade.php).

Buka file view Anda dan tambahkan form di bagian atas tabel atau daftar:

resources/views/products/index.blade.php:

“html

<h1>Daftar Produk</h1>

<form action=”{{ route(‘products.search’) }}” method=”GET”>

<input type=”text” name=”query” placeholder=”Cari produk…”>

<button type=”submit”>Cari</button>

</form>

<table>

<thead>

<tr>

<th>ID</th>

<th>Nama</th>

<th>Deskripsi</th>

</tr>

</thead>

<tbody>

@foreach ($products as $product)

<tr>

<td>{{ $product-&gt;id }}</td>

<td>{{ $product-&gt;name }}</td>

<td>{{ $product-&gt;description }}</td>

</tr>

@endforeach

</tbody>

</table>

<div class=”pagination”>

{{ $products-&gt;links() }}

</div>

“

Penjelasan:

• <form action="{{ route('products.search') }}" method="GET">: Form ini akan mengirimkan permintaan GET ke route bernama products.search.
• <input type="text" name="query" ...>: Input teks ini akan menampung kata kunci pencarian pengguna. Atribut name="query" penting karena kita akan mengakses nilai ini di controller.
• <button type="submit">Cari</button>: Tombol untuk mengirimkan form.

Langkah 2: Membuat Route untuk Pencarian

Selanjutnya, kita perlu mendefinisikan route yang akan menangani permintaan pencarian. Buka file routes/web.php dan tambahkan route berikut:

“php

use App\Http\Controllers\ProductController;

use Illuminate\Support\Facades\Route;

Route::get(‘/products’, [ProductController::class, ‘index’])->name(‘products.index’);

Route::get(‘/products/search’, [ProductController::class, ‘search’])->name(‘products.search’);

“

Kita membuat route baru dengan URL /products/search yang akan diarahkan ke metode search di ProductController.

Langkah 3: Membuat Metode search di Controller

Sekarang, buka file app/Http/Controllers/ProductController.php dan tambahkan metode search:

“php

<?php

namespace App\Http\Controllers;

use App\Models\Product;

use Illuminate\Http\Request;

class ProductController extends Controller

{

public function index()

{

$products = Product::paginate(10);

return view(‘products.index’, compact(‘products’));

}

public function search(Request $request)

{

$query = $request-&gt;input(‘query’);

if (!$query) {

return redirect()-&gt;route(‘products.index’); // Jika tidak ada kata kunci, kembali ke daftar semua produk

}

$products = Product::where(‘name’, ‘LIKE’, ‘%’ . $query . ‘%’)

-&gt;orWhere(‘description’, ‘LIKE’, ‘%’ . $query . ‘%’)

-&gt;paginate(10)

-&gt;withQueryString(); // mempertahankan parameter query di link pagination

return view(‘products.index’, compact(‘products’));

}

}

“

Penjelasan:

• public function search(Request $request): Metode ini menerima instance Request yang berisi data dari form.
• $query = $request->input('query');: Kita mengambil nilai dari input query (kata kunci pencarian).
• if (!$query) { ... }: Jika tidak ada kata kunci yang dimasukkan, kita mengarahkan pengguna kembali ke halaman daftar semua produk.
• Product::where('name', 'LIKE', '%' . $query . '%'): Kita menggunakan Eloquent Query Builder untuk mencari produk di mana kolom name mengandung kata kunci $query. Operator LIKE digunakan untuk pencarian sebagian, dan % adalah wildcard.
• ->orWhere('description', 'LIKE', '%' . $query . '%'): Kita juga mencari di kolom description jika kata kunci tidak ditemukan di nama.
• ->paginate(10): Hasil pencarian juga di-paginate sebanyak 10 item per halaman.
• ->withQueryString(): Metode ini memastikan bahwa parameter query tetap ada di URL link pagination. Ini penting agar saat pengguna berpindah halaman, kata kunci pencarian tetap dipertahankan.
• return view('products.index', compact('products'));: Kita mengembalikan view products.index dengan hasil pencarian yang sudah di-paginate.

Langkah 4: Menampilkan Hasil Pencarian di View

Karena kita menggunakan view products.index yang sama, kita tidak perlu membuat view baru. Loop @foreach akan bekerja seperti biasa dengan hasil pencarian yang telah difilter. Link pagination juga akan berfungsi dan mempertahankan kata kunci pencarian di URL.

Anda bisa menambahkan indikator di view untuk memberitahu pengguna bahwa mereka sedang melihat hasil pencarian. Contohnya, di bagian atas resources/views/products/index.blade.php:

“html

<h1>Daftar Produk</h1>

<form action=”{{ route(‘products.search’) }}” method=”GET”>

<input type=”text” name=”query” placeholder=”Cari produk…” value=”{{ request(‘query’) }}”>

<button type=”submit”>Cari</button>

</form>

@if (request(‘query’))

<p>Hasil pencarian untuk: <strong>{{ request(‘query’) }}</strong></p>

@endif

<table>

<thead>

<tr>

<th>ID</th>

<th>Nama</th>

<th>Deskripsi</th>

</tr>

</thead>

<tbody>

@foreach ($products as $product)

<tr>

<td>{{ $product-&gt;id }}</td>

<td>{{ $product-&gt;name }}</td>

<td>{{ $product-&gt;description }}</td>

</tr>

@endforeach

</tbody>

</table>

<div class=”pagination”>

{{ $products-&gt;links() }}

</div>

“

Penjelasan Tambahan:

• value="{{ request('query') }}": Kita mengisi kembali input pencarian dengan kata kunci terakhir yang dicari menggunakan helper request().
• @if (request('query')) ... @endif: Kita menampilkan pesan yang memberitahu pengguna kata kunci yang mereka gunakan untuk mencari.

Selesai!

Sekarang, Anda dapat mengakses halaman daftar produk (/products) di aplikasi Laravel Anda. Anda akan melihat form pencarian di bagian atas. Masukkan kata kunci dan klik “Cari”. Halaman akan diperbarui dengan hasil pencarian yang relevan, dan link pagination akan mempertahankan kata kunci pencarian.