Laravel 9 livewire search with pagination example; In this tutorial, we will learn how to make a livewire search with pagination in laravel 9 app.
Laravel 9 Livewire Pagination with Search Example
Follow the following steps to create livewire search with pagination in laravel 9 app:
- 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
First of all, Open terminal OR command prompt and run the following command to install laravel fresh app to create laravel livewire search with pagination project:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Add Database Detail
In this step, Add 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
In this step, 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 .
So, Navigate 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
Next, Navigate 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 = [];
}
Next, Navigate 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
In this step, we need to install livewire package to laravel project using the following command:
composer require livewire/livewire
Step 5: Create Component using Artisan
In this step, create the livewire components for creating a livewire search with pagination component using the following command. So Open cmd and run the following command:
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
Now, Navigate 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)
]);
}
}
After that, Navigate 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
In this step, Navigate 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
In this step, navigate 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 - Tutsmake.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 - Tutsmake.com</h2>
</div>
<div class="card-body">
@livewire('search-pagination')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
</body>
</html>
Step 8: Run Development Server
Finally, we need to run the following PHP artisan serve command 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
Now, we are ready to run laravel livewire search with pagination app. So open browser and hit the following URL into browser:
http://localhost:8000/search-with-pagination
We laravel livewire search with pagination app looks like:
