Halo semuanya, kembali lagi di sahretech. 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.sahretech.com/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 sahretech.
Mantap bang,
ReplyDelete