Halo semuanya, kembali lagi di tulisan saya. Baiklah pada kesempatan kali ini saya akan berbagi tutorial cara membuat paginasi pada laravel secara cepat dan mudah. Bagaimana caranya?, ayo ikuti tutorialnya berikut ini.
Paginasi adalah salah satu fitur yang sangat berguna pada sebuah aplikasi, fungsinya adalah untuk membagi data menjadi beberapa halaman terpisah sehingga data yang ditampilkan tidak terlalu banyak. Coba kalian bayangkan saja, jika ada ratusan bahkan ribuan data tanpa dipaginasi, maka halaman tersebut akan sangat panjang, hal ini jelas tidak efisien dan sangat tidak user friendly.
 |
| Gambar dari: https://madewithvuejs.com/laravel-vue-pagination |
Saya kira penjelasan dan gambar di atas sudah cukup jelas, apalagi gambar yang ditampilkan sering terlihat di hampir setiap website responsif modern saat ini. Ok, untuk membuat paginasi pada laravel caranya cukup mudah. Tidak seperti membuat paginasi pada php native yang cukup panjang, di laravel juga kalian bisa menentukan berapa data yang akan ditampilkan dalam sebuah halaman dan laravel juga secara otomatis akan membaginya.
| Baca Artikel Lain ✨ |
| 📰 1. Mudahnya Instalasi Project Vue js dan depedensi dengan Vue UI read more |
| 📰 2. Cara Melakukan Http Request pada Vue Js dengan Menggunakan Axios read more |
| 📰 3. Cara Mudah Instalasi dan Menjalankan Vue Admin Template read more |
Cara Membuat Paginasi Pada Laravel
1. Siapkan laravel yang sudah terinstall. Untuk tutorialnya kalian bisa baca di link berikut ini https://www.porkaone.com/2021/05/cara-instalasi-laravel-terbaru.html
2. Buatlah sebuah database baru di dalam phpmyadmin dengan nama yang kalian inginkan. Lalu buat tabel di dalamnya dengan nama pegawai, lalu silahkan isi data sebanyak-banyaknya, minimal 11 data agar nanti hasilnya dapat terlihat.
 |
| Tabel pegawai |
Jika kalian merasa memasukkan data satu persatu tidak efisien, maka kalian bisa mencoba seeder dan faker pada laravel. Untuk tutorialnya bisa kalian baca di link berikut ini. https://www.fromsunda.eu.org/2019/12/cara-cepat-membuat-data-dummy-di.html
3. Lalu silahkan kalian buka file .env lalu ganti setting database seperti DB_DATABASE, DB_USERNAME dan DB_PASSWORD sesuai setting yang ada di database kalian.
 |
| Setting .env |
4. Buka cmd atau terminal kalian, lalu masuk ke direktori projek dan buatlah sebuah controller baru dengan cara menjalankan php artisan make:controller PegawaiController lalu bukalah file PegawaiController.php yang baru kita buat sebelumnya di dalam folde app/Http/Controllers. Isi file tersebut dengan script seperti di bawah ini.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
//untuk menggunakan query builder
use DB;
class PegawaiController extends Controller
{
public function index(){
//mengambil data pegawai dari database
$data = DB::table('pegawai')->paginate(10);
//mengirim data pegawai ke view pegawai
return view('pegawai', ['pegawai' => $data]);
}
}
Penjelasan:
(1). use DB = digunakan untuk melakukan transaksi data ke database dengan query builder. Pada tutorial kali ini kita tidak menggunakan eloquent.
(2). paginate(10) = digunakan untuk membuat paginasi, di setiap halaman akan ditampilkan 10 data maksimal, data ke 11 akan diampilkan pada page setelahnya
5. Buatlah sebuah file blade baru dengan nama pegawai.blade.php di dalam folder resources/views. Kemudian isi file tersebut dengan script yang ada di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
{{-- bootstrap --}}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container mt-4">
<div class="card mb-3">
{{-- membuat tabel --}}
<table class="table table-striped">
<thead>
<tr>
<td>Nama</td>
<td>Jenis Kelamin</td>
<td>Alamat</td>
</tr>
</thead>
<tbody>
{{-- melakukan looping data --}}
@foreach ($pegawai as $item)
<tr>
<td>{{ $item->nama }}</td>
<td>{{ $item->jk == '1' ? 'Laki-laki' : 'Perempuan' }}</td>
<td>{{ $item->alamat }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
{{-- perhatikan script di bawah ini untuk membuat paginasi dan yang berkaitan dengan paginasi --}}
Current Page: {{ $pegawai->currentPage() }}<br>
Jumlah Data: {{ $pegawai->total() }}<br>
Data perhalaman: {{ $pegawai->perPage() }}<br>
<br>
{{ $pegawai->links() }}
</div>
</body>
</html>Penjelasan:
Jika dilihat pada script di atas, tidak ada perbedaan yang signifikan dalam pembuatan tabel pada html. Kecuali beberapa script yang ada di akhir baris.
(1). {{ $pegawai->currentPage() }} = digunakan untuk menampilkan halaman ke berapa saat ini
(2). {{ $pegawai->total() }} = digunakan untuk menampilkan total data
(3). {{ $pegawai->perPage() }} = digunakan untuk menampilkan jumlah data perhalaman
(4). {{ $pegawai->links() }} = digunakan untuk menampilkan paginasi dengan penomoran.
6. Selanjutnya buka file AppServiceProvider.php di dalam folder app/Providers lalu ubahlah script di dalamnya dengan script yang ada di bawah ini.
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
//
}
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Paginator::useBootstrap();
}
}
7. Langkah terakhir, buka file web.php lalu tambahkan route baru. Silahkan copy script di bawah ini dan pastekan ke dalam file web.php
Route::get('/pegawai', 'App\Http\Controllers\PegawaiController@index'); Jalankan project kalian dengan menjalankan perintah php artisan serve pada terminal atau cmd. Lalu buka http://127.0.0.1:8000/pegawai maka hasilnya bisa kalian lihat pada gambar di bawah ini.
 |
| Hasil akhir |
Sekian tutorial cara mudah memuat pagination pada laravel. Semoga tutorial singkat tentang laravel ini dapat membantu kalian. Jika ada yang ingin ditanyakan silahkan tanyakan langsung di kolom komentar di bawah postingan ini. Sampai jumpa di tutorial programming menarik lainnya dari tulisan saya.
Posting Komentar