Contoh Live Search Livewire Laravel dengan Pagination

Hai Guys,

Dalam tutorial ini, saya akan belajar cara membuat pencarian dengan pagination livewire laravel. Anda dapat dengan mudah dan cukup menggunakan kotak pencarian di livewire laravel.

Langkah 1: Instal Laravel 7

Langkah pertama, Anda dapat menginstal aplikasi laravel 7. Anda dapat di bawah perintah ini di terminal Anda.

composer create-project --prefer-dist laravel/laravel blog

Langkah 2: Database Seed

Pada langkah ini, Anda dapat meminta banyak record di kotak pencarian. Kemudian penyedia berikan kepada laravel pengguna default. Tambahkan kode ini file databaseeder.php

database/seeds/DatabaseSeeder.php

public function run()
{
    factory(App\User::class,500)->create();
}

Kemudian panggil php artisan db:seed dan Anda akan memiliki 500 users menambahkan dalam tabel users.

Langkah 3: Buat Komponen

Sekarang di sini kita akan membuat komponen livewire menggunakan perintah mereka. jadi jalankan perintah di bawah ini untuk membuat contact us dari komponen.

php artisan make:livewire search

Sekarang mereka membuat file di kedua path:

app/Http/Livewire/Search.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use App\User;

class Search extends Component
{
    use WithPagination;
    public $searchTerm;

    public function render()
    {
        $searchTerm = '%'.$this->searchTerm.'%';
        return view('livewire.search',[
            'users' => User::where('name','like', $searchTerm)->paginate(10)
        ]);
    }
}

resources/views/livewire/search.blade.php

<div class="container">
    <div class="row">
        <div class="col-md-12">
            
            <input type="text"  class="form-control" placeholder="Search" wire:model="searchTerm" />

            <table class="table table-bordered" style="margin: 10px 0 10px 0;">
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
                @foreach($users as $user)
                <tr>
                    <td>
                        {{ $user->name }}
                    </td>
                    <td>
                        {{ $user->email }}
                    </td>
                </tr>
                @endforeach
            </table>
            {{ $users->links() }}
        </div>
    </div>
</div>

Langkah 4: Buat Route

Anda dapat membuat route file blade default di file web.php.

routes/web.php

Route::get('/search-box', function () {
    return view('searchbox');
});

Langkah 5: Buat File View

Anda dapat membuat file blade untuk memanggil route formulir. dalam file ini kita akan menggunakan @livewireStyles, @livewireScripts dan @livewire ('file-form'). jadi mari kita tambahkan.

resources/views/searchbox.blade.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
    @livewireStyles
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div class="container mt-4">
    <div class="row">
      <div class="col-md-8 offset-2">
        <div class="card">
          <div class="card-header bg-success text-white ">
            <strong>Search with Laravel Livewire - Medikre.com</strong>
          </div>
          <div class="card-body">
            @livewire('search')
          </div>
        </div>
      </div>
    </div>
</div>
</body>
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</html>

Sekarang Anda dapat menjalankan menggunakan perintah di bawah ini:

php artisan serve

Buka di bawah URL:

http://localhost:8000/search-box

Semoga ini membantu anda.

laravel livewire