Laravel Livewire Search Pagination
Laravel Livewire Search Pagination

Hello Guys, this tutorial will learn laravel livewire pagination with search fiture example, in this article you will get step by step you ho to build laravel livewire pagination with search. This tutorial will guide simple and easy way how to create search fiture in laravel livewire with also with pagination.

This tutorial laravel livewire pagination with search in Laravel application will help you step by step to build and implement pagination and search functionality in your laravel livewire application project.

Build Laravel Livewire Pagination with Search Tutorial
So, follow below step by step how to create livewire pagination and search fiture tutorial laravel livewire pagination with search in Laravel project.

Step 1. Install Laravel Project
Step 2. Setup Database Configuration
Step 3. Create Model, Database Migration, and Factory Faker Employee
Step 4. Running Database Migration using Artisan
Step 5. Install Livewire Package
Step 6. Create Component Livewire using Artisan
Step 7. Add Route
Step 8. Create Laravel Blade File
Step 9. Run Laravel Development Server

Step 1. Install Laravel Project
First, please open your Terminal window or Command Prompt to run following composer install laravel fresh application project to build laravel livewire pagination with search :

composer create-project –prefer-dist laravel/laravel your_project_name_here

Step 2. Setup Database Configuration
After success intall laravel fresh application project, next setup your database credentials in the environment file “.env” in your root laravel project. So, open your root project and find .env file, then add setup database configuration like below :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3307 // here i’m using MariaDB for database project
DB_DATABASE= setup here your database name laravel project
DB_USERNAME= setup here your database username
DB_PASSWORD= setup here your database password

Step 3. Create Model, Database Migration, and Factory Faker Employee
This step, we generate model using laravel artisan command line, to create file model please run php artisan like below :

php artisan make:model Employee

This artisan command will create one file model with name Employee.php in folder “app\Models”,

Also please create one file migration with run the artisan command below :

php artisan make:migration create_employees_table

This migration command will create on file migration that name like create_employees_table.php in folder “database\migrations”, then now open this file migration and update with the following code below :

<?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->string(‘position’);
$table->string(‘address’);
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists(’employees’);
}
}

Next, please create one faker file with name EmployeeFactory.php, to create these file faker please run artisan command below to create faker file :

php artisan make:factory EmployeeFactory

This command will create one file faker in folder “database\factories”.

Step 4. Running Database Migration using Artisan
In this step, before your running database migration please you navigate to file AppServiceProvider.php in folder app\Providers, please open file AppServiceProvider.php, and add bit modification with update the following code :

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema; // add this code

class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
//
}

/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Schema::defaultStringLength(191); // add this code
}
}

Next, please running database migration using command artisan below to create tabel into your database project.

php artisan migrate

This database migration will create tabel in your database laravel livewire project.

Next, please open your factory file EmployeeFactory.php in folder in folder “database\factories” and update with below code :

<?php
namespace Database\Factories;
use App\Models\Employee;
use Illuminate\Database\Eloquent\Factories\Factory;
class EmployeeFactory extends Factory
{
    /**
     * The name of the factory’s corresponding model.
     *
     * @var string
     */
    protected $model = Employee::class;
    /**
     * Define the model’s default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            ‘name’ => $this->faker->name,
            ’email’ => $this->faker->unique()->safeEmail,
            ‘position’ => $this->faker->jobTitle,
            ‘address’ => $this->faker->address,
        ];
    }
}

After that, please run artisan command below to generate dummy record data using faker :

php artisan tinker

Then run the following code in the tinker command line.

$employees = Employee::factory()->count(100)->create();

This laravel tinker factory faker will generate 100 dummy record data.

Laravel Livewire Dummy Record Employees
Laravel Livewire Dummy Record Employees

Step 5. Install Livewire Package
To build laravel livewire pagination with search example you need to install livewire package to your laravel project using the following command, so open your Terminal window or command prompt and run this composer :

composer require livewire/livewire

Step 6. Create Component Livewire using Artisan
In this step, i will create livewire components for creating a larvel livewire pagination with search component. Please open your terminal and run the following command:

php artisan make:livewire search-pagination

This artisan livewire command will create the livewire components such as below :

CLASS: app/Http/Livewire/SearchPagination.php
VIEW: D:\wamp64\www\livewire_pagination\resources\views/livewire/search-pagination.blade.php

Now, please open your livewire controller components in folder “app\Http\Livewire” and open SearchPagination.php file and add the following code :

<?php

namespace App\Http\Livewire;
use Livewire\WithPagination;
use App\Models\Employee;

use Livewire\Component;

class SearchPagination extends Component
{
use WithPagination;
public $search;

public function render()
{
$search = ‘%’.$this->search.’%’;
return view(‘livewire.search-pagination’,[
’employees’ => Employee::where(‘name’, ‘like’,$search)->paginate(5)
])->layout(‘livewire.home’);
}
}

And also open your blade file “search-pagination.blade.php” from your folder “resources\views/livewire” and add following code below :

<div>    
    <input type=”text”  class=”form-control” placeholder=”Search” wire:model=”search” />                
    <table id=”tbl_list” class=”table table-striped table-bordered” cellspacing=”0″ width=”100%”>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Job</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>  
            @foreach($employees as $row)
            <tr>
                <td>{{$row->id}}</td>
                <td>{{$row->name}}</td>
                <td>{{$row->email}}</td>
                <td>{{$row->position}}</td>
                <td>{{$row->address}}</td>
            </tr>
            @endforeach 
        </tbody>            
    </table>  
        {{ $employees->links() }}     
</div>

Step 7. Add Route
Now, for this step, please navigate to file “routes/web.php”, open the web.php file and add the following routes into your web.php file :

Route::get(‘/livewire-pagination’, App\Http\Livewire\SearchPagination::class)->name(‘livewire-pagination’)->middleware(‘auth’);

Step 8. Create Laravel Blade File
In this step, please create one file blade with name “home.blade.php” into your folder “resources/views/livewire”, then add the following code into your home.blade.php file:

@extends(‘layouts.app’)
@section(‘content’)
<div class=”container”>
    <div class=”row justify-content-center”>
        <div class=”col-md-12″>
            <div class=”card”>
                <div class=”card-header”>Laravel Livewire </div>                
                <div class=”card-body”>                                   
                    @livewire(‘search-pagination’)
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

And also in this step please open your blade file “app.blade.php” in your folder “resources/views/layouts”, then add this code @livewireStyles to your file before close tag </head>, and also add this code @livewireScripts before close tag </body>

Step 9. Run Laravel Development Server
Finally, to test your laravel livewire pagination with search example you need to run artisan server development start the following below :

php artisan serve

Now, you are ready to run laravel livewire pagination with search example project. Please open your web browser and akses the following URL into your browser :

http://localhost:8000/livewire-pagination

So, your laravel livewire pagination with search example project will look like below :

Laravel Livewire Search Pagination
Laravel Livewire Search Pagination

LEAVE A REPLY

Please enter your comment!
Please enter your name here