Baik Anda memiliki blog atau toko e-niaga, bilah pencarian selalu merupakan komponen penting dari UI. Namun, hari-hari bilah pencarian sederhana berakhir. Saat ini, bilah pencarian langsung jauh lebih efisien daripada bilah pencarian sederhana karena menampilkan konten yang serupa secara real time. Ini meningkatkan kemungkinan pendaratan penjualan karena pelanggan dapat melihat pilihan produk terkait terbesar.

Untuk menunjukkan kapabilitas penuh bilah pencarian langsung, saya akan membuat kotak pencarian Laravel menggunakan AJAX jQuery. Untuk ini, saya akan membuat tabel produk dan bilah pencarian akan melakukan pencarian langsung melalui judul produk dan menampilkan semua konten yang terkait.

Prasyarat

Sebelum melanjutkan, saya menganggap Anda memiliki aplikasi Laravel yang diinstal pada server. Untuk tujuan artikel ini, saya menggunakan:

• Lingkungan Linux / Unix atau WAMP / XAMPP
• Laravel 5.5
• PHP 7.1
• MySQL
• Server web (Apache, NGINX atau server web PHP terintegrasi untuk pengujian)

Untuk memenuhi semua persyaratan, saya telah menginstal Laravel di server Cloudways Laravel karena memiliki semua yang saya perlukan untuk proyek ini. Jika Anda tidak memiliki akun di Cloudways, daftar gratis.

Setel Kredensial Basis Data di .env

Buka tab Aplikasi di platform Cloudways. Dalam Detail Akses Aplikasi, Anda akan melihat kredensial database untuk aplikasi Anda. Sekarang buka file .env , yang terletak di folder root aplikasi publik dan tambahkan kredensial di sana.

DB_CONNECTION = mysql
DB_HOST = 127.0 .0 .1
DB_PORT = 3306
DB_DATABASE = your.database.name
DB_USERNAME = your.database.username Anda
DB_PASSWORD = your.database.password Anda

Buat Migrasi

Masuk ke platform Cloudways, dan buka terminal SSH. Setelah selesai, buka root aplikasi Anda dengan perintah berikut.

cd applications
cd <yourapplicationname>/public_html

Sekarang Anda berada di folder aplikasi, ketikkan perintah berikut untuk membuat migrasi untuk produk.

php artisan make:migration create_products_table

Sekarang Anda telah membuat migrasi, buka file database/migration/<date>_create_products_table.php dan tempel kode berikut di dalamnya.

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\DatabaseSchema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateProductsTable extends Migration
{
   /**
    * Run the migrations.
    *
    * @return void
    */

   public function up()
   {
       Schema::create('products', function (Blueprint $table) {
           $table->increments('id');
           $table->timestamps();
           $table->string('Title');
           $table->string('Description');
           $table->integer('price');
       });
   }



   /**
    * Reverse the migrations.
    *
    * @return void
    */
   public function down()

   {
       Schema::dropIfExists('products');
   }

}

Sekarang setelah migrasi selesai, jalankan perintah berikut di terminal:

php artisan migrate

Langkah selanjutnya adalah migrasi skema tabel ke dalam database, Buka database dengan mengklik Launch Database Manager, dan isi tabel dengan data dummy.

Buat Controller

Sekarang setelah tabel database siap, langkah selanjutnya adalah membuat controller. Ketikkan perintah berikut di terminal Anda.

php artisan make:controller SearchController

Sekarang buka app/Http/controller/SearchController.php dan rekatkan kode berikut di dalamnya

<?php



namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;


class SearchController extends Controller
{

   public function index()

{
return view('search.search');
}


public function search(Request $request)
{

if($request->ajax())
{

$output="";
$products=DB::table('products')->where('title','LIKE','%'.$request->search."%")->get();

if($products)
{

foreach ($products as $key => $product) 
    $output.='<tr>'.
              '<td>'.$product->id.'</td>'.
              '<td>'.$product->title.'</td>'.
              '<td>'.$product->description.'</td>'.
              '<td>'.$product->price.'</td>'.
              '</tr>';
}


return Response($output);

   }
   }

}
}

Sekarang mari kita melihat lebih dekat kode ini dan memahami apa yang terjadi di sini. Pertama, saya membuat fungsi indeks yang mengembalikan tampilan (Saya akan membuat tampilan pada langkah berikutnya). Setelah itu, ada fungsi pencarian lain yang mengambil variabel dari bilah pencarian Laravel, dan meneruskannya ke panggilan AJAX, menjalankan query database. Ini akan mengambil semua data dari basis data produk tempat judul cocok dengan kueri. Akhirnya, saya membuat output dalam format HTML dan mengembalikannya sebagai respons.

Buat View

Sekarang Controller sudah siap, selanjutnya saya akan membuat tampilan untuk bilah pencarian. Buka resources/views/search dan buat file bernama search.blade.php. Selanjutnya, tambahkan kode berikut di dalamnya.

<!DOCTYPE html>

<html>
<head>
<meta name="_token" content="{{ csrf_token() }}">

<title>Live Search</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>

<body>
<div class="container">
      <div class="row">
            <div class="panel panel-default">
                   <div class="panel-heading">
                          <h3>Products info </h3>
                   </div>
              <div class="panel-body">
                   <div class="form-group">
                            <input type="text" class="form-controller" id="search" name="search"></input>
                   </div>

<table class="table table-bordered table-hover">
     <thead>
            <tr>
                  <th>ID</th>
                  <th>Product Name</th>
                  <th>Description</th>
                  <th>Price</th>
            </tr>
     </thead>
     <tbody>
     </tbody>
</table>
            </div>
         </div>
     </div>
</div>

<script type="text/javascript">

$('#search').on('keyup',function(){
$value=$(this).val();

$.ajax({
        type : 'get',
        url : '{{URL::to('search')}}',
        data:{'search':$value},
        success:function(data){
              $('tbody').html(data);
         }
});
})

</script>

<script type="text/javascript">
$.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
</script>
</body>
</html>

Sekarang mari kita melihat lebih dalam pada kode dan memahami apa yang terjadi di sini.

Di head tag, saya membuat tag meta, yang akan memungkinkan panggilan AJAX dijalankan di server. Selanjutnya, saya telah memasukkan Bootstrap, CSS dan perpustakaan jQuery.

Dalam body tag saya telah membuat UI sederhana untuk menampilkan informasi produk menggunakan Bootstrap CSS. Dan, kemudian saya telah menggunakan Ajax Script. Sekarang ini adalah bagian penting untuk dipahami.

Script AJAX memilih nilai dari bilah pencarian Laravel segera setelah Anda mengetik. Script AJAX akan mengirimkan nilai ke url /search aplikasi Anda yang akan menjalankan fungsi kedua controller. Ini akan melakukan pencarian di DB dan mendapatkan respons kembali dalam kode AJAX ini. Setelah diterima, respons akan ditampilkan dalam format HTML.

Skrip AJAX kedua digunakan untuk memvalidasi token untuk memastikan skrip AJAX dapat dieksekusi.

Menyiapkan Route

Pergi ke ruotes/web.php dan tambahkan metode rute berikut di dalamnya.

Route::get('/','SearchController@index');
Route::get('/search','SearchController@search');

Menguji Bilah Pencarian Laravel Langsung

Sekarang semuanya sudah siap, buka aplikasi dan luncurkan aplikasi menggunakan staging URL.

Anda akan melihat UI berikut:

Sekarang untuk menguji fungsionalitas, lakukan pencarian (Anda bisa mulai dengan contoh berikut):

Seperti yang Anda lihat, ketika saya memasuki W, bilah pencarian mulai mengembalikan hasil yang berisi sebagian kecocokan.

Kata-kata terakhir

Seperti yang Anda lihat, menerapkan pencarian Laravel langsung dengan AJAX adalah tugas yang cukup sederhana. Dalam banyak kasus, proses implementasi mudah dan menambahkan peningkatan signifikan ke UI / UX situs web Anda. Jika Anda mendapatkan masalah atau jika Anda hanya ingin mengucapkan terima kasih, jangan ragu untuk berkomentar di bawah ini dan ikuti saya di twitter. Selamat Coding .. !!