Membuat E-commerce sederhana di Laravel #Part 11 - Menambahkan Fitur Pencarian Produk di Frontend

Selanjutnya kita akan membuat tutorial, tentang pencarian produk di halaman frontend. Pencarian ini memungkinkan user untuk melakukan pencarian produk. Berikut langkah-langkah nya:

Namun sebelumnya, silahkan mengikuti langkah sebelumnya tentang Membuat halaman Order User

Langkah 1: Update Route

Tambahkan route untuk fitur pencarian produk di routes/web.php:

use App\Http\Controllers\Frontend\ProductController;

Route::get('/search', [FrontendController::class, 'search'])->name('frontend.search');

Langkah 2: Update Controller

Tambahkan method search di ProductController untuk menangani pencarian.

ProductController.php

<?php

namespace App\Http\Controllers;

use App\Models\Product;
use App\Models\Category;
use Illuminate\Http\Request;

class FrontendController extends Controller
{
    public function search(Request $request)
    {
        $categories = Category::all();

        $query = $request->input('query');
        $products = Product::where('name', 'like', '%' . $query . '%')
            ->orWhere('description', 'like', '%' . $query . '%')
            ->get();

        return view('frontend.search', compact('products', 'query','categories'));
    }
}

Langkah 3: Tambahkan Form Pencarian di Navbar

Tambahkan form pencarian di file layout frontend, misalnya layouts/frontend.blade.php.

Navbar dengan Form Pencarian

 <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ route('home') }}">MyCommerce</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('home') }}">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                    <!-- Dropdown for categories -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="categoriesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Categories
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="categoriesDropdown">
                            @foreach ($categories as $category)
                                <li><a class="dropdown-item" href="{{ route('category.show', $category->slug) }}">{{ $category->name }}</a></li>
                            @endforeach
                        </ul>
                    </li>
                    <div class="ml-auto">
            @guest
                <a href="{{ route('login') }}" class="btn btn-outline-primary">Login</a>
            @else
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="categoriesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Hi, {{ Auth::user()->name }}
                </a>
                <ul class="dropdown-menu" aria-labelledby="categoriesDropdown">
                    <li><a class="dropdown-item" href="{{ route('user.orders') }}">My Orders</a></li>
                    <li><a href="{{ route('logout') }}" class="btn btn-outline-danger"
                    onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                        Logout
                    </a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                        @csrf
                    </form></li>
                </ul>
            </li>
                
            @endguest
        </div>
                </ul>
                 <!-- Search Form -->
                 <form action="{{ route('frontend.search') }}" method="GET" class="d-flex">
                    <input class="form-control me-2" type="search" name="query" placeholder="Search products..." aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>

Langkah 4: Buat View untuk Hasil Pencarian

Buat file view frontend/search.blade.php untuk menampilkan hasil pencarian.

search.blade.php

@extends('layouts.frontend')

@section('content')
<div class="container my-4">
    <h1>Search Results for "{{ $query }}"</h1>
    @if ($products->isEmpty())
        <p class="text-muted">No products found.</p>
    @else
        <div class="row">
            @foreach ($products as $product)
                <div class="col-md-4 mb-4">
                    <div class="card">
                        <img src="{{ asset('storage/' . $product->image) }}" class="card-img-top" alt="{{ $product->name }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ $product->name }}</h5>
                            <p class="card-text">${{ number_format($product->price, 2) }}</p>
                            <a href="{{ route('product.show', $product->slug) }}" class="btn btn-primary">View Product</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection

Langkah 5: Styling (Optional)

Tambahkan CSS untuk memperindah tampilan pencarian.

CSS untuk Search

Tambahkan di file CSS utama Anda (misalnya, public/css/app.css):

.navbar .form-control {
    width: 300px;
    transition: width 0.4s ease-in-out;
}

.navbar .form-control:focus {
    width: 400px;
}

Langkah 6: Testing

Navigasi ke Website: Akses halaman frontend Anda.

Coba Cari Produk: Masukkan nama produk di form pencarian dan tekan tombol Search.

Lihat Hasilnya: Pastikan produk yang sesuai dengan query ditampilkan.