Pada tutorial ini saya akan menjelaskan langkah-langkah membuat live search dengan laravel livewire. Live Search adalah fitur yang dapat membantu user dalam melakukan pencarian data yang diinginkan tanpa harus reload halaman.
Dengan adanya fitur live search ini sangat membantu pengguna dalam menemukan data yang dicari dengan cepat. mari kita ikuti langkah membuat livesearch di livewire laravel berikut ini
BACA JUGA: BERKENALAN DENGAN LARAVEL LIVEWIRE
Instal laravel
Langkah awal mari kita install project laravel. Silahkan kalian buka CMD dan jalankan perintah berikut ini.
composer create-project --prefer-dist laravel/laravel livesearch
Install Livewire
Langkah selanjutnya mari kita install livewire. jalankan perintah berikut ini untuk menginstal livewire.
composer require calebporzio/livewire
konfigurasi database
Setelah berhasil menginstal laravel dan livewire, Silahkan kalian buka file project laravel kalian dan silahkan buka file .env
DB_CONNECTION=mysqlDB_ HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=isi dengan nama database anda DB_USERNAME=isi dengan username anda DB_PASSWORD=isi dengan password anda
MEMBUAT model dan MIGRATION
Langkah selanjutnya kita akan membuat file model dan migration baru untuk menambahkan tabel pada database. kita akan memberi nama tabel students.
Silahkan jalankan perintah berikut ini untuk membuat file migration
php artisan make:model Student --migration
Dari perintah di atas maka otomatis akan membuat file model dan migration. silahkan update file model yang baru kalian buat seperti berikut ini
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Student extends Model
{
use HasFactory;
protected $guarded = [];
}
Kemudian silahkan buka file migration yang telah dibuat dan paste kode di bawah ini
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateStudentsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('students', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->text('address');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('students');
}
}
Setelah itu silahkan jalankan perintah di bawah ini.
php artisan migrate
membuat seeder
Kita akan membuat data seeder untuk student. silahkan jalankan perintah di bawah ini untuk membuat file seeder.
php artisan make:seeder StudentSeeder
Silahkan buka file seeder yang telah di buat dan paste kode di bawah ini.
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use DB;
use Faker\Factory as Faker;
class StudentSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$faker = Faker::create('id_ID');
for($i=0; $i<100; $i++){
$data[$i] = [
'name' => $faker->name,
'email' => $faker->unique()->safeEmail,
'address' => $faker->address
];
}
DB::table('students')->insert($data);
}
}
Kode di atas akan membuat data student sebanyak 100 kali. Data-data student yang dikirimkan berupa name, email dan address.
Kemudian silahkan jalankan seeder dengan perintah berikut ini.
php artisan db:seed --class=StudentSeeder
Kita berhasil membuat seeder untuk data student, Silahkan kalian cek data seeder yang telah dibuat di database
Membuat Komponen Student
Mari kita membuat komponen untuk student. cara nya silahkan kalian jalankan perintah berikut ini.
php artisan make:livewire students
Jika kalian telah menjalankan perintah di atas. Maka otomatis akan membuat file komponen livewire di App\Http\Livewire\Students.php dan juga akan membuat file view students.blade.php di dalam folder livewire
Kita akan membuat input search terlebih dahulu, silahkan kalian buka file view students.blade.php di dalam foldeer livewire. Kemudian silahkan paste kode dibawah ini untuk membuat input search
<div> <input class="form-control mb-3 mt-3" type="text" wire:model="search" placeholder="Search" aria-label="search"> </div>
Fungsi dari wire:model”search” adalah untuk menangkap string dari inputan user saat melakukan pencarian data.
Langkah selanjutnya mari kita panggil variable search yang dikirim di view ke dalam komponen. silahkan buka App\Http\Livewire\Students.php dan paste kode di bawah ini
class Students extends Component
{
public $search
public $data;
public function render()
{
$this->data = Student::where('name','like', '%'.$this->search.'%')->get();
return view('livewire.student');
}
}Oke saya akan jelaskan kode di atas. Disana terdapat 2 variable public yaitu search dan data, Nah untuk search itu menampung inputan user yang telah dibuat di wire:model”search” pada folder view. Sedangkan untuk variable data nantinya akan digunakan untuk menampung semua data student yang akan kita tampilkan di halaman view.
Mari kita masuk pada penjelasan function render. Di baris pertama kita membuat $this->data untuk memanggil variable public yang di atas, kemudian pada $this->data kita lakukan Eloquent untuk mencari nama student yang sesuai dengan hasil inputan user yang sudah kita tampung pada variabel $this->search. Kemudian terdapat pattern dari like yaitu % Digunakan untuk pengecekan string yang sesuai
Jadi nantinya ketika user menginputkan nama student yang akan keluar yaitu student dengan nama yang sesuai dengan inputan user. Kemudian kita return ke dalam view livewire
Silahkan kalian buka file view students.blade.php yang terdapat di dalam folder livewire. Kemudian kita tambahkan kode berikut ini.
<table class="table table-striped" style="margin-top:20px;">
<tr>
<td>NO</td>
<td>NAME</td>
<td>EMAIL</td>
<td>ADDRESS</td>
<td>ACTION</td>
</tr>
@foreach($data as $row)
<tr>
<td>{{$loop->index + 1}}</td>
<td>{{$row->name}}</td>
<td>{{$row->email}}</td>
<td>{{$row->address}}</td>
<td>
<button class="btn btn-success py-0">Edit</button> |
<button class="btn btn-danger py-0">Delete</button>
</td>
</tr>
@endforeach
</table>Jadi kode di atas untuk menampilkan student. $data di dapat dari komponen yang telah kita buat tadi.
Jadi Keseluruhan dari file view students.blade.php seperti di bawah ini
<div>
@if($updateMode)
@include('livewire.update')
@else
@include('livewire.create')
@endif
<input class="form-control mb-3 mt-3" type="text" wire:model="search" placeholder="Search" aria-label="search">
<table class="table table-striped" style="margin-top:20px;">
<tr>
<td>NO</td>
<td>NAME</td>
<td>EMAIL</td>
<td>ADDRESS</td>
<td>ACTION</td>
</tr>
@foreach($data as $row)
<tr>
<td>{{$loop->index + 1}}</td>
<td>{{$row->name}}</td>
<td>{{$row->email}}</td>
<td>{{$row->address}}</td>
<td>
<button class="btn btn-success py-0">Edit</button> |
<button class="btn btn-danger py-0">Delete</button>
</td>
</tr>
@endforeach
</table>
</div> Rendering component
Kita perlu juga melakukan render komponen. Di sini saya akan membuat file index.blade.php di dalam folder students untuk melakukan render. kemudian silahkan kalian paste kode dibawah ini.
resources\views\students\index.blade.php
@extends('layouts.app')
@section('content')
<div class="flex justify-center">
@livewire('students')
</div>
@endsection dan juga silahkan buat file app.blade.php di dalam folder layouts
resources\views\layouts\app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous" defer></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
@livewireStyles
</head>
<body>
<div id="app">
<div class="container">
<main class="py-4 d-flex justify-content-center">
@yield('content')
</main>
</div>
</div>
@livewireScripts
</body>
</html>ROUTE
Kemudian silahkan kalian tambahkan route. update route kalian seperti di bawah ini
routes\web.php
Route::view('students', 'students.index');Di bawah ini hasil dari yang telah kita buat
Penutup
Selamat kita telah berhasil membuat live search di laravel livewire. Jika masih ada kesulitan ketika mengikuti tutorial diatas, kalian bisa komentar dibawah sini. Terimakasih.