Pada artikel ini, kita akan melihat bagaimana cara melakukan live search di laravel 9 menggunakan Meilisearch. Disini kita akan belajar live search di laravel 9 menggunakan livewire dan Meilisearch. Jadi, kita akan membuat custom search di laravel 9. Meilisearch adalah mesin pencari open-source, secepat kilat, dan sangat relevan yang sangat cocok dengan aplikasi, situs web, dan alur kerja Anda. Meilisearch adalah plugin yang plug and play dan fleksibel.
Selain itu, kami akan menginstal laravel livewire di aplikasi dan membuat pencarian teks lengkap di laravel 9. Anda dapat menyesuaikan meilisearch sesuai kebutuhan.
Jadi, mari kita lihat pencarian menggunakan livewire dan meilisearch di laravel 9.
Langkah 1: Install Laravel 9
Pada langkah ini, kita akan menginstal laravel 9 menggunakan perintah berikut.
composer create-project laravel/laravel livesearch_laravel9Langkah 2: Install Laravel Breeze
Sekarang, kita akan menginstal laravel breeze menggunakan perintah berikut.
composer require laravel/breezeLangkah 3: Membuat Model dan Migration
Setelah itu, kita akan membuat migration dan model dengan menggunakan perintah berikut.
php artisan make:model Articles -mapp/Models/Articles.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Articles extends Model
{
use HasFactory;
protected $fillable = [
'title', 'author', 'description'
];
}
Migration
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('articles', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('author');
$table->longText('description');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('articles');
}
};
Langkah 4: Membuat Database Seeder
Pada langkah ini, kita akan membuat data dummy menggunakan factory. Jadi, kita akan membuat ArticleFactory dengan menggunakan perintah berikut.
php artisan make:factory ArticleFactorydatabase/factories/ArticlesFactory.php
<?php
namespace Database\Factories;
use Illuminate\Database\Eloquent\Factories\Factory;
/**
* @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Articles>
*/
class ArticlesFactory extends Factory
{
/**
* Define the model's default state.
*
* @return array<string, mixed>
*/
public function definition()
{
return [
'title' => $this->faker->words(4, true),
'author' => $this->faker->name(),
'description' => $this->faker->sentence()
];
}
}
database/seeders/DatabaseSeeder.php
<?php
namespace Database\Seeders;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use App\Models\Articles;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
Articles::factory(50)->create();
}
}
Sekarang, jalankan seeder database menggunakan perintah berikut.
php artisan db:seedLangkah 5: Install Livewire
Pada langkah ini, kita akan menginstall laravel livewire dengan menggunakan perintah berikut.
composer require livewire/livewireSetelah itu, kita akan menyertakan @livewirestyles dan @livewirescripts ke file app.blade.php
resources/views/components/app.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How To Live Search In Laravel 9 Using Meilisearch - Websolutionstuff</title>
@livewireStyles
</head>
<body>
</body>
@livewireScripts
</html>
Langkah 6: Buat Component
Sekarang, kita akan membuat komponen livewire dengan menggunakan perintah berikut.
php artisan make:livewire ArticlesKemudian, kita akan menyertakan komponen Artikel di dalam file dashboard.blade.php.
resources/views/dashboard.blade.php
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
@livewire('articles')
</div>
</div>
</div>
</div>
</x-app-layout>
Langkah 7: Install Laravel Scout
Pada langkah ini, kita akan menginstal paket laravel scout menggunakan perintah.
composer require laravel/scoutKemudian, kita dapat mempublikasikan konfigurasinya.
php artisan vendor:publish --provider="Laravel\Scout\ScoutServiceProvider"Laravel Scout memungkinkan kita untuk menggunakan search driver apa pun seperti database, algolia atau meilisearch, dll.
Sekarang, kita akan menyertakan apa saja yang dapat dicari di laravel scout dalam model Article.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Laravel\Scout\Searchable; //import the trait
class Articles extends Model
{
use HasFactory;
use Searchable; //add this trait
protected $fillable = [
'name', 'author', 'description'
];
}
Setelah itu, kita akan memasang HTTP guzzle factory dengan menggunakan perintah berikut.
composer require meilisearch/meilisearch-php http-interop/http-factory-guzzleKemudian, kita dapat mengatur variabel lingkungan untuk penggunaan Meilisearch.
SCOUT_DRIVER=meilisearch
MEILISEARCH_HOST=http://127.0.0.1:7700
MEILISEARCH_KEY=masterKey
Kemudian, kita perlu mengindeks records kita di meilisearch menggunakan perintah scout:import.
php artisan scout:import "App\Models\Articles"app/Livewire/Articles.php
<?php
namespace App\Http\Livewire;
use App\Models\Articles as ModelsArticles;
use Livewire\Component;
class Articles extends Component
{
public $search = '';
public $articles;
public function render()
{
if (empty($this->search)) {
$this->articles = ModelsArticles::get();
} else {
$this->articles = ModelsArticles::search($this->search)->get();
}
return view('livewire.articles');
}
}
Langkah 8: Membuat Blade File
Sekarang, kita akan membuat file article.blade.php dan menambahkan kolom input ke file tersebut. Dengan menggunakan properti wire:model, kita dapat meneruskan kueri ke server dan mendapatkan hasilnya secara sinkron.
resources/view/livewire/articles.blade.php
<div>
<!-- component -->
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/styles/tailwind.css">
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
<section class="py-1 bg-blueGray-50">
<div class="w-full xl:w-8/12 mb-12 xl:mb-0 px-4 mx-auto mt-24">
<div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded ">
<div class="rounded-t mb-0 px-4 py-3 border-0">
<div class="flex flex-wrap items-center">
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
<h3 class="font-semibold text-base text-blueGray-700">Articles</h3>
</div>
<div class="relative w-full px-4 max-w-full flex-grow flex-1 text-right">
<input type="text" placeholder="Search..." wire:model="search">
</div>
</div>
</div>
<div class="block w-full overflow-x-auto">
<table class="items-center bg-transparent w-full border-collapse ">
<thead>
<tr>
<th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
Article name
</th>
<th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
Description
</th>
<th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
Author
</th>
</thead>
<tbody>
@if (!$articles->isEmpty())
@foreach ($articles as $article)
<tr>
<th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left text-blueGray-700 ">
{{$article->title}}
</th>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 ">
{{$article->description}}
</td>
<td class="border-t-0 px-6 align-center border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
{{$article->author}}
</td>
</tr>
@endforeach
@else
<td class="border-t-0 px-6 align-center border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
No Results Found
</td>
@endif
</tbody>
</table>
</div>
</div>
</div>
</section>
</div>
Output
