Membuat fitur pencarian adalah hal penting dalam pengembangan aplikasi web modern. Pengguna mengharapkan kemampuan untuk menemukan informasi dengan cepat dan mudah. Laravel, sebagai framework PHP yang populer, menyediakan alat dan struktur yang efisien untuk mengimplementasikan fitur ini. Dalam tutorial ini, kita akan membahas secara mendalam cara membuat fitur pencarian dengan Laravel menggunakan bahasa Indonesia yang mudah dipahami. Mari kita mulai!

1. Mengapa Fitur Pencarian Penting dalam Aplikasi Laravel?

Sebelum kita masuk ke detail teknis, mari kita bahas mengapa fitur pencarian sangat krusial untuk aplikasi Laravel Anda.

• Pengalaman Pengguna yang Lebih Baik: Bayangkan pengguna yang harus menelusuri ratusan halaman untuk menemukan informasi yang mereka cari. Fitur pencarian memungkinkan mereka menemukan apa yang mereka butuhkan dalam hitungan detik.
• Efisiensi: Pengguna dapat menemukan data spesifik dengan cepat tanpa harus membuang waktu.
• Peningkatan SEO: Fitur pencarian yang baik memungkinkan bot mesin pencari untuk mengindeks konten Anda dengan lebih efektif, yang pada akhirnya dapat meningkatkan peringkat SEO Anda.
• Analisis Data: Anda dapat melacak apa yang dicari pengguna, memberi Anda wawasan berharga tentang kebutuhan dan preferensi mereka.

Oleh karena itu, mengimplementasikan fitur pencarian yang efisien adalah investasi yang berharga untuk aplikasi Laravel Anda.

2. Persiapan: Instalasi Laravel dan Konfigurasi Database

Sebelum kita memulai kode, pastikan Anda memiliki instalasi Laravel yang berfungsi dan konfigurasi database yang tepat. Jika belum, ikuti langkah-langkah berikut:

• Instalasi Laravel: Jika Anda belum menginstal Laravel, gunakan Composer:

  composer create-project --prefer-dist laravel/laravel pencarian-laravel
  cd pencarian-laravel

• Konfigurasi Database: Buka file .env dan konfigurasikan detail database Anda. Contoh:

  DB_CONNECTION=mysql
  DB_HOST=127.0.0.1
  DB_PORT=3306
  DB_DATABASE=pencarian_db
  DB_USERNAME=root
  DB_PASSWORD=

  Pastikan Anda telah membuat database dengan nama pencarian_db.

• Migrasi Database: Mari kita buat model dan migrasi untuk data yang akan kita cari. Misalnya, kita akan membuat model Product (produk).

  php artisan make:model Product -m

  Ini akan membuat model Product di app/Models/Product.php dan migrasi di database/migrations.

  Buka file migrasi (misalnya, xxxx_xx_xx_create_products_table.php) dan definisikan skema tabel:

  <?php
  
  use IlluminateDatabaseMigrationsMigration;
  use IlluminateDatabaseSchemaBlueprint;
  use IlluminateSupportFacadesSchema;
  
  class CreateProductsTable extends Migration
  {
      /**
       * Run the migrations.
       *
       * @return void
       */
      public function up()
      {
          Schema::create('products', function (Blueprint $table) {
              $table->id();
              $table->string('name');
              $table->text('description');
              $table->decimal('price', 8, 2);
              $table->timestamps();
          });
      }
  
      /**
       * Reverse the migrations.
       *
       * @return void
       */
      public function down()
      {
          Schema::dropIfExists('products');
      }
  }

  Jalankan migrasi:

  php artisan migrate

• Seeding Database: Untuk memiliki data untuk dicari, mari kita buat seeder.

  php artisan make:seeder ProductSeeder

  Buka database/seeders/ProductSeeder.php dan tambahkan kode berikut:

  <?php
  
  namespace DatabaseSeeders;
  
  use IlluminateDatabaseSeeder;
  use AppModelsProduct;
  
  class ProductSeeder extends Seeder
  {
      /**
       * Run the database seeds.
       *
       * @return void
       */
      public function run()
      {
          Product::factory()->count(50)->create();
      }
  }

  Pastikan Anda memiliki factory untuk model Product. Jika belum, buat dengan:

  php artisan make:factory ProductFactory

  Buka database/factories/ProductFactory.php dan tambahkan:

  <?php
  
  namespace DatabaseFactories;
  
  use AppModelsProduct;
  use IlluminateDatabaseEloquentFactoriesFactory;
  
  class ProductFactory extends Factory
  {
      /**
       * The name of the factory's corresponding model.
       *
       * @var string
       */
      protected $model = Product::class;
  
      /**
       * Define the model's default state.
       *
       * @return array
       */
      public function definition()
      {
          return [
              'name' => $this->faker->sentence(3),
              'description' => $this->faker->paragraph(2),
              'price' => $this->faker->randomFloat(2, 10, 1000),
          ];
      }
  }

  Terakhir, jalankan seeder:

  php artisan db:seed --class=ProductSeeder

Dengan langkah-langkah ini, Anda telah menyiapkan dasar untuk fitur pencarian kita.

3. Membuat Route dan Controller untuk Fitur Pencarian Laravel

Selanjutnya, kita perlu membuat route dan controller untuk menangani permintaan pencarian.

• Membuat Controller:

  php artisan make:controller SearchController

  Ini akan membuat file SearchController.php di app/Http/Controllers.

• Definisikan Route: Buka routes/web.php dan tambahkan route berikut:

  use AppHttpControllersSearchController;
  use IlluminateSupportFacadesRoute;
  
  Route::get('/search', [SearchController::class, 'index'])->name('search.index');

• Implementasikan Controller: Buka app/Http/Controllers/SearchController.php dan tambahkan logika pencarian:

  <?php
  
  namespace AppHttpControllers;
  
  use AppModelsProduct;
  use IlluminateHttpRequest;
  
  class SearchController extends Controller
  {
      public function index(Request $request)
      {
          $query = $request->input('query');
  
          $products = Product::where('name', 'like', "%$query%")
                          ->orWhere('description', 'like', "%$query%")
                          ->paginate(10); // Menggunakan paginasi
  
          return view('search.index', compact('products', 'query'));
      }
  }

  Dalam contoh ini, kita mengambil parameter query dari permintaan (request) dan menggunakan Eloquent ORM untuk mencari produk yang namanya atau deskripsinya mengandung kata kunci pencarian. Kita juga menggunakan paginate(10) untuk membatasi jumlah hasil per halaman, meningkatkan kinerja dan pengalaman pengguna.

4. Membuat Tampilan (View) untuk Hasil Pencarian

Setelah controller siap, kita perlu membuat tampilan untuk menampilkan hasil pencarian.

• Membuat Direktori search di resources/views: Di dalam direktori resources/views, buat direktori bernama search.

• Membuat File index.blade.php di resources/views/search: Tambahkan kode berikut:

  <!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>Hasil Pencarian</title>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
      <div class="container">
          <h1>Hasil Pencarian untuk: {{ $query }}</h1>
  
          @if($products->count() > 0)
              <table class="table">
                  <thead>
                      <tr>
                          <th>Nama</th>
                          <th>Deskripsi</th>
                          <th>Harga</th>
                      </tr>
                  </thead>
                  <tbody>
                      @foreach($products as $product)
                          <tr>
                              <td>{{ $product->name }}</td>
                              <td>{{ $product->description }}</td>
                              <td>Rp. {{ number_format($product->price, 2, ',', '.') }}</td>
                          </tr>
                      @endforeach
                  </tbody>
              </table>
  
              {{ $products->links() }}  <!-- Menampilkan link paginasi -->
          @else
              <p>Tidak ada hasil yang ditemukan untuk "{{ $query }}".</p>
          @endif
      </div>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
  </html>

  Di tampilan ini, kita menampilkan hasil pencarian dalam tabel. Jika tidak ada hasil, kita menampilkan pesan “Tidak ada hasil yang ditemukan”. Penting untuk dicatat penggunaan {{ $products->links() }} untuk menampilkan link paginasi, memungkinkan pengguna menavigasi melalui halaman hasil pencarian. Kami juga menggunakan number_format untuk menampilkan harga dengan format mata uang Indonesia.

5. Membuat Form Pencarian (Search Form)

Kita perlu membuat form pencarian agar pengguna dapat memasukkan kata kunci pencarian. Kita bisa menambahkan form ini di layout utama aplikasi kita atau di halaman tertentu.

• Menambahkan Form di Layout Utama (misalnya resources/views/layouts/app.blade.php): (Asumsi anda sudah punya layout app.blade.php. Jika tidak, sesuaikan)

  <!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>@yield('title')</title>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container">
              <a class="navbar-brand" href="#">Aplikasi Laravel</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">
                      <li class="nav-item">
                          <a class="nav-link active" aria-current="page" href="#">Home</a>
                      </li>
                      <li class="nav-item">
                          <a class="nav-link" href="#">Produk</a>
                      </li>
                  </ul>
                  <form class="d-flex ms-auto" action="{{ route('search.index') }}" method="GET">
                      <input class="form-control me-2" type="search" placeholder="Cari Produk" name="query" aria-label="Search">
                      <button class="btn btn-outline-success" type="submit">Cari</button>
                  </form>
              </div>
          </div>
      </nav>
  
      <div class="container">
          @yield('content')
      </div>
  
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
  </html>

  Pastikan semua view yang menggunakan layout ini menggunakan @extends('layouts.app') dan @section('content').

  Form ini akan mengirimkan permintaan GET ke route search.index dengan parameter query.

6. Opsi Pencarian Lanjutan: Menggunakan Eloquent Builder dan Scope

Untuk fitur pencarian yang lebih kompleks, kita dapat memanfaatkan Eloquent Builder dan Scope. Ini memungkinkan kita untuk mengorganisir logika pencarian dengan lebih baik dan membuatnya lebih mudah di-reuse.

• Membuat Scope: Di model Product.php, tambahkan scope berikut:

  <?php
  
  namespace AppModels;
  
  use IlluminateDatabaseEloquentFactoriesHasFactory;
  use IlluminateDatabaseEloquentModel;
  
  class Product extends Model
  {
      use HasFactory;
  
      public function scopeSearch($query, $keyword)
      {
          return $query->where('name', 'like', "%$keyword%")
                       ->orWhere('description', 'like', "%$keyword%");
      }
  }

• Menggunakan Scope di Controller:

  <?php
  
  namespace AppHttpControllers;
  
  use AppModelsProduct;
  use IlluminateHttpRequest;
  
  class SearchController extends Controller
  {
      public function index(Request $request)
      {
          $query = $request->input('query');
  
          $products = Product::search($query)->paginate(10);
  
          return view('search.index', compact('products', 'query'));
      }
  }

  Kode ini lebih bersih dan mudah dibaca. Scope memungkinkan kita untuk memindahkan logika pencarian ke model, sehingga controller menjadi lebih sederhana.

7. Implementasi Pencarian Fuzzy (Fuzzy Search) dengan Algoritma Levenshtein

Untuk memberikan pengalaman pencarian yang lebih toleran terhadap kesalahan ketik (typo), kita bisa mengimplementasikan fuzzy search. Salah satu cara untuk melakukannya adalah dengan menggunakan algoritma Levenshtein untuk menghitung edit distance antara kata kunci pencarian dan data dalam database. Laravel tidak memiliki fungsi bawaan untuk ini, jadi kita bisa menggunakan fungsi SQL atau package eksternal.

Berikut adalah contoh menggunakan fungsi SQL levenshtein:

Perhatian: Fungsi levenshtein mungkin tidak tersedia di semua sistem database. Anda mungkin perlu menginstalnya atau menggunakan alternatif lain.

• Mengubah Controller:

  <?php
  
  namespace AppHttpControllers;
  
  use AppModelsProduct;
  use IlluminateHttpRequest;
  use IlluminateSupportFacadesDB;
  
  class SearchController extends Controller
  {
      public function index(Request $request)
      {
          $query = $request->input('query');
  
          $products = Product::select('*', DB::raw("levenshtein('$query', name) as distance"))
              ->where(function ($q) use ($query) {
                  $q->where('name', 'like', "%$query%")
                      ->orWhere('description', 'like', "%$query%");
              })
              ->orderBy('distance')
              ->paginate(10);
  
          return view('search.index', compact('products', 'query'));
      }
  }

  Dalam kode ini, kita menggunakan DB::raw() untuk memanggil fungsi levenshtein dalam query SQL. Kita menghitung jarak Levenshtein antara kata kunci pencarian dan nama produk, kemudian mengurutkan hasilnya berdasarkan jarak ini. Ini akan menampilkan hasil yang “paling mirip” terlebih dahulu.

Alternatif: Menggunakan Package Eksternal

Ada beberapa package Laravel yang menyediakan fungsionalitas fuzzy search yang lebih canggih, seperti:

• teamtnt/laravel-scout: Scout menyediakan antarmuka yang sederhana dan seragam untuk menggunakan berbagai search engine seperti Algolia, MeiliSearch, dan Elasticsearch.
• fuzzysharp/string-search: Menyediakan implementasi algoritma fuzzy search langsung di PHP.

Penggunaan package ini umumnya melibatkan konfigurasi yang lebih kompleks, tetapi dapat memberikan hasil pencarian yang lebih akurat dan relevan.

8. Meningkatkan Kinerja Pencarian: Indexing Database

Untuk database yang besar, kinerja pencarian dapat menjadi masalah. Salah satu cara untuk meningkatkannya adalah dengan menggunakan indexing pada kolom yang sering digunakan dalam pencarian.

• Menambahkan Index di Migrasi: Buka file migrasi xxxx_xx_xx_create_products_table.php dan tambahkan index:

  <?php
  
  use IlluminateDatabaseMigrationsMigration;
  use IlluminateDatabaseSchemaBlueprint;
  use IlluminateSupportFacadesSchema;
  
  class CreateProductsTable extends Migration
  {
      /**
       * Run the migrations.
       *
       * @return void
       */
      public function up()
      {
          Schema::create('products', function (Blueprint $table) {
              $table->id();
              $table->string('name');
              $table->text('description');
              $table->decimal('price', 8, 2);
              $table->timestamps();
  
              $table->index('name');  // Menambahkan index pada kolom 'name'
              $table->fullText('description'); // Menambahkan FullText Index pada kolom 'description'
          });
      }
  
      /**
       * Reverse the migrations.
       *
       * @return void
       */
      public function down()
      {
          Schema::dropIfExists('products');
      }
  }

  Jalankan migrasi lagi:

  php artisan migrate

  Indexing akan mempercepat pencarian pada kolom name. Gunakan fullText index pada kolom description jika Anda ingin melakukan pencarian teks lengkap (full-text search).

9. Tips Tambahan: Sanitasi Input dan Validasi

Selalu sanitasi input pengguna untuk mencegah serangan SQL injection dan masalah keamanan lainnya. Laravel menyediakan cara mudah untuk melakukan validasi dan sanitasi input.

• Validasi Input di Controller:

  <?php
  
  namespace AppHttpControllers;
  
  use AppModelsProduct;
  use IlluminateHttpRequest;
  
  class SearchController extends Controller
  {
      public function index(Request $request)
      {
          $validatedData = $request->validate([
              'query' => 'required|string|max:255',
          ]);
  
          $query = $validatedData['query'];
  
          $products = Product::where('name', 'like', "%$query%")
                          ->orWhere('description', 'like', "%$query%")
                          ->paginate(10);
  
          return view('search.index', compact('products', 'query'));
      }
  }

  Dengan menggunakan validate(), kita memastikan bahwa input query ada, berupa string, dan panjangnya tidak melebihi 255 karakter. Ini membantu mencegah input yang berbahaya.

10. Pengujian dan Debugging Fitur Pencarian

Setelah mengimplementasikan fitur pencarian, penting untuk menguji dan melakukan debugging untuk memastikan semuanya berfungsi dengan benar.

• Pengujian Unit (Unit Testing): Tulis pengujian unit untuk menguji berbagai skenario pencarian, seperti pencarian dengan kata kunci yang ada, pencarian dengan kata kunci yang tidak ada, dan pencarian dengan karakter khusus.

• Debugging dengan dd() dan dump(): Gunakan fungsi dd() (dump and die) dan dump() untuk memeriksa nilai variabel dan query SQL selama proses pengembangan.

• Log Error: Periksa log error Laravel ( storage/logs/laravel.log) untuk mencari kesalahan atau pengecualian yang mungkin terjadi selama pencarian.

11. Optimasi SEO untuk Halaman Hasil Pencarian

Halaman hasil pencarian juga penting untuk SEO. Pastikan untuk mengoptimalkannya agar mudah ditemukan oleh mesin pencari.

• Judul Halaman yang Relevan: Gunakan judul halaman yang deskriptif dan mengandung kata kunci pencarian. Contoh: “Hasil Pencarian untuk: [Kata Kunci]”.
• Meta Deskripsi: Tambahkan meta deskripsi yang ringkas dan jelas yang menjelaskan isi halaman hasil pencarian.
• URL yang Bersih dan SEO-Friendly: Gunakan URL yang mudah dibaca dan mengandung kata kunci pencarian. Contoh: /search?query=[kata-kunci].
• Internal Linking: Tautkan ke halaman hasil pencarian dari halaman lain di situs web Anda.
• Schema Markup: Pertimbangkan untuk menggunakan schema markup untuk membantu mesin pencari memahami konten halaman hasil pencarian.

12. Kesimpulan: Membuat Fitur Pencarian dengan Laravel yang Efektif

Dalam tutorial ini, kita telah membahas secara mendalam cara membuat fitur pencarian dengan Laravel dalam bahasa Indonesia. Kita telah membahas mulai dari persiapan, pembuatan route dan controller, tampilan, hingga optimasi kinerja dan SEO. Dengan mengikuti langkah-langkah ini, Anda dapat mengimplementasikan fitur pencarian yang efektif dan ramah pengguna untuk aplikasi Laravel Anda. Ingatlah untuk selalu menguji dan melakukan debugging untuk memastikan semuanya berfungsi dengan benar. Selamat mencoba!