Laravel 9 Livewire Pagination with Search Tutorial Example

Laravel 9 search with pagination using livewire; Through this tutorial, i am going to show you how to create a search with pagination in laravel 9 apps using livewire package.

Laravel 9 Livewire Pagination with Search Tutorial Example

Use the below given steps to build search with pagination in laravel 9 apps using livewire:

  • Step 1: Install Laravel App
  • Step 2: Add Database Detail
  • Step 3: Create Model & Migration using Artisan
  • Step 4: Install Livewire Package
  • Step 5: Create Component using Artisan
  • Step 6: Add Route
  • Step 7: Create View File
  • Step 8: Run Development Server

Step 1: Install Laravel App

Run the following command on command prompt to install laravel app to create laravel livewire search with pagination app:

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

Step 2: Configure Database with App

Configure database credentials in the .env file. So open project root directory and find .env file. Then add database detail in .env file:

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

Step 3: Run Migration

Run the following command on command prompt to generate model, migration and faker file using the following command:

 php artisan make:model Employee -fm 

This command will create one model name Employee.php,create one migration that name create_employees_table.php and one faker file that name EmployeeFactory.php .

Go to database/migrations folder and open create_ employees_table.php file. Then update the following code into create_ employees_table.php file:

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class CreateEmployeesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('employees', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('employees');
    }
}

Next, open command prompt and run the following command to create the table into database:

php artisan migrate

Go to app/Models/Employee.php and update the following code into Employee.php model as follow:

<?php
 
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Employee extends Model
{
    protected $guarded = [];
}

Go to database/factories and open EmployeeFactory.php. Then update the following code into it as follow:

<?php
use Faker\Generator as Faker;
$factory->define(App\Models\Employee::class, function (Faker $faker) {
    return [
        'name' => $faker->name,
        'email' => $faker->unique()->safeEmail
    ];
});

After that, run the following command to generate fake data using faker as follow:

php artisan tinker
//and then
factory(\App\Models\Employee::class,50)->create()
exit

Step 4: Install Livewire Package

Run the following command on command prompt to install livewire package to laravel apps:

composer require livewire/livewire

Step 5: Create Component using Artisan

Run the following command on command prompt to create the livewire components for creating a livewire search with pagination component:

php artisan make:livewire search-pagination

This command will create the following components on the following path:

app/Http/Livewire/SearchPagination.php
resources/views/livewire/search-pagination.blade.php

Go to app/Http/Livewire folder and open SearchPagination.php file. Then add the following code into SearchPagination.php file:

<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Employee;
class SearchPagination extends Component
{
    use WithPagination;
    public $searchTerm;
    public function render()
    {
        $searchTerm = '%'.$this->searchTerm.'%';
        return view('livewire.search-pagination',[
            'employees' => Employee::where('name','like', $searchTerm)->paginate(10)
        ]);
    }
}

Go to resources/views/livewire folder and open search-pagination.blade.php file. Then add the following code into search-pagination.blade.php file:

<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($employees as $employee)
                <tr>
                    <td>
                        {{ $employee->name }}
                    </td>
                    <td>
                        {{ $employee->email }}
                    </td>
                </tr>
                @endforeach
            </table>
            {{ $employees->links() }}
        </div>
    </div>
</div>

Step 6: Add Route

Go to routes folder and open web.php. Then add the following routes into web.php file:

Route::get('/search-with-pagination', function () {
    return view('livewire.home');
});

Step 7: Create View File

Go to resources/views/livewire folder and create one blade view files that name home.blade.php file. Then add the following code into home.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel 9 Livewire Search with Pagination - Laratutorials.com</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }
            .full-height {
                height: 100vh;
            }
            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }
            .position-ref {
                position: relative;
            }
            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }
            .content {
                text-align: center;
            }
            .title {
                font-size: 84px;
            }
            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }
            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
<body>
    <div class="container mt-5">
        <div class="row mt-5 justify-content-center">
            <div class="mt-5 col-md-8">
                <div class="card">
                  <div class="card-header bg-primary">
                    <h2 class="text-white">Laravel 9 Livewire Search with Pagination - Laratutorials.com</h2>
                  </div>
                    <div class="card-body">
                      @livewire('search-pagination')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</body>
</html>
Note that, if you want to add HTML(blade views), CSS, and script code into your livewire files. So, you can use @livewireStyles, @livewireScripts, and @livewire(‘ blade views’).

Step 8: Run Development Server

Run the following PHP artisan serve command on command prompt to start laravel livewire search with pagination example app:

php artisan serve

If we want to run the project diffrent port so use this below command 

php artisan serve --port=8080  

Open browser and hit the following URL into browser:

http://localhost:8000/search-with-pagination

Recommended Laravel Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *