Laravel Pagination merupakan salah satu fitur dari situs web yang sangat berguna untuk menampilkan data yang jumlahnya sangat banyak. Dengan menggunakan Pagination maka pengguna halaman web akan mendapatkan data dengan lebih cepat karena ditampilkan per bagian dan dapat lebih fokus dalam membaca data yang ditampilkan.
Pagination berguna untuk membuat penomoran halaman, misalnya kita memiliki data sebanyak 200 bahkan ribuan data, saat data tersebut tampil pada website atau aplikasi yang kita buat pasti akan terlalu panjang ke bawah.
Pagination merupakan sebuah fitur web yang digunakan untuk membatasi tampilan data agar tidak terlalu panjang dan lebih rapi. Penggunaan pagination banyak dipergunakan digunakan untuk menampilkan data dalam jumlah banyak, sehingga dapat dipisah/dipilih berapa data yang akan ditampilkan terlebih dahulu sesuai dengan urutan dan kriteria pencarian tertentu.
Pembuatan pagination seringkali merepotkan dalam pengembangan web, terutama yang membangun situs webnya tanpa menggunakan framework web development. Banyak sekali proses manual yang harus dilakukan, serta melibatkan penggunaan HTML, CSS, PHP, dan JavaScript.
Framework Laravel telah menyediakan fitur yang memungkinkan pengembang situs web yang menggunakan framework ini dapat dengan mudah membuat pagination dalam menampilkan data di situs webnya. Laravel memberikan berbagai opsi untuk membuat pagination, kemudian tampilan dapat dipercantik dengan menggunakan library CSS misalnya dengan menggunakan Bootstrap.
Sebelum masuk ke tutorial tentang pagination, kita siapkan dulu project yang akan kita gunakan. Di sini saya menggunakan project yang sudah dipakai sebelumnya yang bernama ‘latihan_laravel‘, jika belum ada projectnya silahkan buat dulu project tersebut. Cara membuat project di Laravel bisa dibaca di Cara Install Laravel 8 di Windows .
Membuat Pagination Pada Laravel
Di sini kita akan membuat contoh dengan menampilkan data dari database, setelah itu kita akan belajar membuat pagination dengan laravel. Untuk tutorial menampilkan data dari database dengan Laravel sudah dijelaskan sebelumnya pada tutorial CRUD Laravel dengan Query Builder .
Seakarang kita buat dulu dulu database dan tabel yang datanya akan kita tampilkan dengan pagination, si sini saya sudah menyiapkan sebuah database dengan nama ‘datasekolah’ dan sebuah tabel guru lengkap dengan data guru yang lumayan banyak.
Jika sudah membaca membaca tutorial laravel sebelumnya, pasti kita sudah mempunyai database ‘datasekolah’ dan tabel guru tersebut, karena pada tutorial-tutorial sebelumnya kita telah menggunakan database dan tabel ini. Atau silahkan bisa import .sql berikut supaya lebih cepat jika belum punya database ‘datasekolah’ dan tabel guru tersebut. Buat database dengan nama ‘datasekolah’ dan import .sql berikut ke database ‘datasekolah’.
guru.sql
-- phpMyAdmin SQL Dump -- version 5.0.2 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Waktu pembuatan: 25 Apr 2021 pada 17.56 -- Versi server: 10.4.13-MariaDB -- Versi PHP: 7.4.8 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `datasekolah` -- -- -------------------------------------------------------- -- -- Struktur dari tabel `guru` -- CREATE TABLE `guru` ( `id` int(10) UNSIGNED NOT NULL, `nip` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL, `nama` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL, `alamat` text COLLATE utf8mb4_unicode_ci NOT NULL, `created_at` timestamp NULL DEFAULT NULL, `updated_at` timestamp NULL DEFAULT NULL, `deleted_at` datetime DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci; -- -- Dumping data untuk tabel `guru` -- INSERT INTO `guru` (`id`, `nip`, `nama`, `alamat`, `created_at`, `updated_at`, `deleted_at`) VALUES (2034, '1', 'Tri Jail Gunarto', 'Jr. Kiaracondong No. 675, Malang 53847, Sulbar', NULL, NULL, NULL), (2035, '2', 'Harimurti Daryani Saragih S.Farm', 'Gg. Bacang No. 938, Makassar 46195, Riau', NULL, NULL, NULL), (2036, '2', 'Setya Iswahyudi', 'Ds. Tubagus Ismail No. 881, Pematangsiantar 14539, DIY', NULL, NULL, NULL), (2037, '0', 'Soleh Harjo Anggriawan', 'Ds. Astana Anyar No. 320, Ternate 94375, Kaltim', NULL, NULL, NULL), (2038, '1', 'Nabila Widiastuti', 'Ds. Yap Tjwan Bing No. 574, Kupang 80151, Jatim', NULL, NULL, NULL), (2039, '0', 'Yahya Pradana', 'Gg. W.R. Supratman No. 685, Pematangsiantar 41877, Aceh', NULL, NULL, NULL), (2040, '1', 'Rina Tira Fujiati S.Ked', 'Psr. Halim No. 833, Cirebon 73668, Jateng', NULL, NULL, NULL), (2041, '7', 'Baktianto Santoso', 'Ds. Hang No. 836, Ternate 13470, Jatim', NULL, NULL, NULL), (2042, '8', 'Oliva Olivia Wijayanti M.Kom.', 'Ds. Yoga No. 721, Sungai Penuh 45667, Kaltara', NULL, NULL, NULL), (2043, '0', 'Ilyas Sitompul', 'Kpg. Baha No. 133, Jayapura 96086, Jatim', NULL, NULL, NULL), (2044, '6', 'Unjani Devi Nurdiyanti M.Farm', 'Dk. Yos No. 713, Denpasar 51212, Jateng', NULL, NULL, NULL), (2045, '8', 'Fitriani Astuti S.Pt', 'Jr. Bambu No. 517, Prabumulih 11701, Sumsel', NULL, NULL, NULL), (2046, '3', 'Septi Maryati M.TI.', 'Jln. Dewi Sartika No. 132, Payakumbuh 83806, Jatim', NULL, NULL, NULL), (2047, '6', 'Atmaja Habibi', 'Jr. Sumpah Pemuda No. 604, Dumai 94891, Kalsel', NULL, NULL, NULL), (2048, '5', 'Bakti Sihombing', 'Jln. Ketandan No. 392, Bandung 38630, Sulsel', NULL, NULL, NULL), (2049, '3', 'Dalima Widiastuti S.T.', 'Jr. Reksoninten No. 620, Singkawang 84181, Kaltara', NULL, NULL, NULL), (2050, '3', 'Darimin Prakasa', 'Gg. Dewi Sartika No. 228, Tasikmalaya 12210, Sulut', NULL, NULL, NULL), (2051, '0', 'Karen Hartati', 'Jr. Bagas Pati No. 674, Tanjung Pinang 89483, Aceh', NULL, NULL, NULL), (2052, '1', 'Nugraha Opung Hutasoit S.Ked', 'Kpg. Ciumbuleuit No. 757, Pontianak 82224, Banten', NULL, NULL, NULL), (2053, '6', 'Banawi Luwes Halim', 'Psr. Sukajadi No. 216, Bekasi 57155, Jabar', NULL, NULL, NULL); -- -- Indexes for dumped tables -- -- -- Indeks untuk tabel `guru` -- ALTER TABLE `guru` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT untuk tabel yang dibuang -- -- -- AUTO_INCREMENT untuk tabel `guru` -- ALTER TABLE `guru` MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2054; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Setelah database siap, kemudian buka file .env yang ada pada direktori dalam project laravelnya, pada file ini kita akan melakukan pengaturan koneksi database laravel.
.env
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=loginlaravel DB_USERNAME=root DB_PASSWORD=
Silahkan sesuaikan dengan nama database, username dan password mysql yang dibuat pada file .env tersebut.
Jika ingin menginput data testing dengan cepat, kita bisa menggunakan Seeding dan Faker di laravel, silahkan baca kembali tentanng tutorial Seeding dan Faker pada Laravel. Selanjutnya kita akan menampilkan data guru ini, kita buat route ‘/guru‘ pada project ‘latihan_laravel‘.
latihan_laravel/routes/web.php
Route::get('/guru','GuruController@index');
Di sini kita menetapkan route ‘/guru’ untuk mengakses method index dalam controller GuruController. Selanjutnya buat controller GuruController dan method indexnya jika di GuruController.php . JIka belum memahami tentang controller silahkan bisa baca kembali tutorial membuat controller dengan Laravel.
latihan_laravel/app/Http/controllers/GuruController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class PegawaiController extends Controller
{
public function index()
{
// mengambil data dari table guru
$gurup = DB::table('guru')->paginate(10);
// mengirim data guru ke view index
return view('index',['guru' => $guru]);
}
}
Coba perhatikan, karena kita akan bermain dengan database maka wajib kita aktifkan dulu dengan menulis sintak :
use Illuminate\Support\Facades\DB;
kemudian pada method index kita ambil data dari tabel pegawai dan kita passing ke view index.
public function index()
{
// mengambil data dari table guru
$gurup = DB::table('guru')->paginate(10);
// mengirim data guru ke view index
return view('index',['guru' => $guru]);
}
Coba perhatikan pada query buildernya, pada saat kita belajar menampilkan data dari database, perintah yang kita gunakan adalah :
$guru = DB::table('guru')->get();
Fungsi ->get() bertujuan untuk mengambil semua data, sedangkan untuk membuat pagination kita cukup menggunakan fungsi ->paginate(10). Angka 10 untuk menentukan membuat pagination yang masing-masing halamannya akan menampilkan 10 row data dan terakhir kita passing datanya ke view index.
// mengirim data guru ke view index
return view('index',['guru' => $guru]);
Sekarang kita buat viewnya, yaitu view index.blade.php.
latihan_laravel/resources/views/index.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<title>Tutorial Membuat Pagination Pada Laravel</title>
</head>
<body>
<div class="container">
<div class="card mt-5">
<div class="card-header text-center">
<h2><a href="https://www.agussuratna.net">www.agussuratna.net</a></h2>
Data Guru
</div>
<div class="card-body">
<br/>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>NIP</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
@foreach($guru as $g)
<tr>
<td>{{ $g->nip }}</td>
<td>{{ $g->nama }}</td>
<td>{{ $g->alamat }}</td>
</tr>
@endforeach
</tbody>
</table>
<br/>
Halaman : {{ $guru->currentPage() }} <br/>
Jumlah Data : {{ $guru->total() }} <br/>
Data Per Halaman : {{ $guru->perPage() }} <br/>
{{ $guru->links() }}
</div>
</div>
</div>
</body>
</html>
Perhatikan sintak di atas, kita menampilkan datanya seperti yang sudah dibahas pada tutorial sebelumnya tentang membuat CRUD pada laravel.
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>NIP</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
@foreach($guru as $g)
<tr>
<td>{{ $g->nip }}</td>
<td>{{ $g->nama }}</td>
<td>{{ $g->alamat }}</td>
</tr>
@endforeach
</tbody>
</table>
Bedanya di sini kita menggunakan fungsi links() untuk membuat link penomorannya.
{{ $guru->links() }}
dan kita bisa menampilkan status detail tentang datanya dengan fungsi-fungsi berikut ini :
Halaman : {{ $guru->currentPage() }} <br/>
Jumlah Data : {{ $guru->total() }} <br/>
Data Per Halaman : {{ $guru->perPage() }} <br/>
Karena pada halaman index.blade.php di atas kita menggunakan Bootstrap, maka harus menambahkan beberapa sintak pada file yang ada pada folder ‘app/Providers/RouteServiceProvider.php‘, dengan menambahkan import use Illuminate\Pagination\Paginator; dan Paginator::useBootstrap(); di dalam method boot(). Sehingga sintak lengkapnya jadi seperti ini :
<?php
namespace App\Providers;
use Illuminate\Cache\RateLimiting\Limit;
use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Support\Facades\Route;
use Illuminate\Pagination\Paginator;
class RouteServiceProvider extends ServiceProvider
{
/**
* The path to the "home" route for your application.
*
* This is used by Laravel authentication to redirect users after login.
*
* @var string
*/
public const HOME = '/home';
/**
* The controller namespace for the application.
*
* When present, controller route declarations will automatically be prefixed with this namespace.
*
* @var string|null
*/
// protected $namespace = 'App\\Http\\Controllers';
/**
* Define your route model bindings, pattern filters, etc.
*
* @return void
*/
protected $namespace = 'App\\Http\\Controllers';
public function boot()
{
Paginator::useBootstrap();
$this->configureRateLimiting();
$this->routes(function () {
Route::prefix('api')
->middleware('api')
->namespace($this->namespace)
->group(base_path('routes/api.php'));
Route::middleware('web')
->namespace($this->namespace)
->group(base_path('routes/web.php'));
});
}
/**
* Configure the rate limiters for the application.
*
* @return void
*/
protected function configureRateLimiting()
{
RateLimiter::for('api', function (Request $request) {
return Limit::perMinute(60)->by(optional($request->user())->id ?: $request->ip());
});
}
}
Kita coba lihat hasilnya, jalankan project kita dan akses route ‘ /guru ‘ dengan alamat ‘localhost:8000/guru‘. Pagination telah berhasil kita buat dengan laravel, kita coba klik pada halaman lain.
Sampai di sini telah selesai tutorial Membuat Pagination Pada Laravel, intinya kita hanya menggunakan fungsi paginate() dan membuat linknya dengan fungsi links().
Membuat Pencarian Pada Laravel
Form pencarian yang akan kita buat adalah form pencarian pada data guru yang sudah kita buat pada tutorial sebelumnya. Silahkan ikuti tutorial sebelumnya agar penjelasan tentang cara membuat pencarian pada laravel ini lebih mudah kita pahami.
Pada tutorial ini kita sudah mempunyai database dengan nama ‘datasekolah’ dan sebuah tabel dengan nama ‘guru’. Untuk membuat pencarian menggunakan laravel, kita membutuhkan 2 buah route dan 2 buah method. 1 route untuk menampilkan data guru secara default (tanpa pencarian) yaitu Route::get(‘/guru’,’GuruController@index’); dan 1 buah route untuk mengarahkan ke method yang menangani proses pencarian, yaitu Route::get(‘/guru/cari’,’GuruController@cari’); . Sehingga route yang ada di file web.php menjadi seperti ini :
latihan_laravel/routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Route::get('/guru','GuruController@index');
Route::get('/guru/cari','GuruController@cari');
Perhatikan pada route :
Route::get('/guru','GuruController@index');
Kita akan menampilkan semua data guru dengan cara membuat sebuah form pencarian pada method index dan pada route :
Route::get('/guru/cari','GuruController@cari');
Kita akan menjadikan method cari sebagai method yang menangani data pencarian yang dikirim dari form pencarian yang dikirim dari method index.
Sekarang kita buat method pencarian pada controller GuruController.php yang sudah kita buat pada.
latihan_laravel/app/Http/controllers/GuruController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class GuruController extends Controller
{
public function index()
{
// mengambil data dari table guru
$guru = DB::table('guru')->paginate(5);
// mengirim data guru ke view index
return view('index',['guru' => $guru]);
}
public function cari(Request $request)
{
// menangkap data pencarian
$cari = $request->cari;
// mengambil data dari table guru sesuai pencarian data
$guru = DB::table('guru')
->where('nama','like',"%".$cari."%")
->paginate();
// mengirim data pegawai ke view index
return view('index',['guru' => $guru]);
}
}
Pada controller GuruController.php ada 2 buah method yang akan kita gunakan, yaitu method yang akan menampilkan data guru yang belum diproses dan method cari yang melakukan proses pencarian data dan menampilkan datanya kembali.
Pada view index yang sudah kita buat pada latihan pagination kita tambahkan text field dan tombol pencarian, sehingga sintak pada index.blade.php menjadi seperti berikut :
latihan_laravel/resources/views/index.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<title>Tutorial Membuat Pagination Pada Laravel</title>
</head>
<body>
<div class="container">
<div class="card mt-5">
<div class="card-header text-center">
<h2><a href="https://www.agussuratna.net">www.agussuratna.net</a></h2>
Data Guru
<form action="/guru/cari" method="GET">
<input type="text" name="cari" placeholder="Cari Guru .." value="{{ old('cari') }}">
<input type="submit" value="CARI">
</form>
<br/>
</div>
<div class="card-body">
<br/>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>NIP</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
@foreach($guru as $g)
<tr>
<td>{{ $g->nip }}</td>
<td>{{ $g->nama }}</td>
<td>{{ $g->alamat }}</td>
</tr>
@endforeach
</tbody>
</table>
<br/>
Halaman : {{ $guru->currentPage() }} <br/>
Jumlah Data : {{ $guru->total() }} <br/>
Data Per Halaman : {{ $guru->perPage() }} <br/><br/>
{{ $guru->links() }}
</div>
</div>
</div>
</body>
</html>
Pada view index ini kita membuat sebuah form untuk pencarian data
Data Guru
<form action="/guru/cari" method="GET">
<input type="text" name="cari" placeholder="Cari Guru .." value="{{ old('cari') }}">
<input type="submit" value="CARI">
</form>
Kemudian perhatikan method cari pada controller GuruController.php :
public function cari(Request $request)
{
// menangkap data pencarian
$cari = $request->cari;
// mengambil data dari table guru sesuai pencarian data
$guru = DB::table('guru')
->where('nama','like',"%".$cari."%")
->paginate();
// mengirim data pegawai ke view index
return view('index',['guru' => $guru]);
}
Pada method cari ini kita tangkap data yang dikirim dari form pencarian, kemudian kita cari datanya pada table guru dengan menggunakan fungsi like untuk mencari data yang mirip dengan data yang diinput pada form pencarian, dan terakhir kita tampilkan data nya kembali ke view index.blad.php .
Sekarang kita lihat hasilnya dengan cara mengakses project kita ke alamat localhost:8000/guru
Demikian tutorial tentang cara membuat form pencarian pada laravel atau searching laravel, semoga bermanfaat.
Referensi :
- http://informatika.uc.ac.id/id/2019/11/laravel-crud-pagination/
- https://www.malasngoding.com/membuat-pagination-pada-laravel/
- https://www.malasngoding.com/membuat-pencarian-pada-laravel/