Tutorial Laravel #15 : Membuat Pagination Pada Laravel
Membuat Pagination Pada Laravel – Selamat datang kembali di tutorial laravel lengkap berbahasa indonesia dari www.malasngoding.com.
Pada tutorial ini, sesuai dengan judul Membuat Pagination Pada Laravel. kita akan belajar membuat penomoran halaman atau pagination pada Laravel.
Membuat Pagination Pada Laravel
Pagination berguna untuk membuat penomoran halaman. misalnya kita memiliki banyak row. katakanlah ada 200 bahkan ribuan row data. saat data tersebut tampil pada website atau aplikasi yang kita buat pasti akan terlalu panjang ke bawah.
Di sinilah kita memerlukan pagination atau penomoran halaman. jadi kita bisa mengatur berapa jumlah row data yang ingin ditampilkan. dan selebihnya akan dipisah-pisah menjadi beberapa halaman.
Nanti jumlah halamannya akan otomatis di buat tergantung berapa jumlah data. dan berapa row data yang ingin ditampilkan per halaman nya.
Baca Juga:
Oke yuk langsung saja kita mulai cara membuat pagination atau paging dengan Laravel.
Membuat Pagination Pada Laravel
Di sini kita akan membuat contoh dengan menampilkan data dari database. baru kemudian kita akan belajar membuat pagination dengan laravel.
Untuk tutorial menampilkan data dari database dengan Laravel sudah di jelaskan sebelumnya pada tutorial CRUD Laravel.
Atau di sini akan dijelaskan ulang.
Yuk kita buat dulu database dan tabel yang datanya akan kita tampilkan dengan pagination.
Di sini saya sudah menyiapkan sebuah database dengan nama ‘belajar_laravel’. dan sebuah tabel pegawai. lengkap dengan data pegawai yang lumayan banyak.
Jika teman-teman membaca tutorial laravel sebelumnya di malasngoding.com, pasti teman-teman sudah mempunyai database belajar_laravel dan tabel pegawai.
Karena pada tutorial-tutorial sebelumnya kita telah menggunakan database dan tabel ini.
Atau silahkan teman-teman import sql berikut supaya lebih cepat jika teman-teman belum punya database belajar_laravel dan tabel pegawai.
buat database dengan nama belajar_laravel. dan import sql berikut ke database belajar_laravel.
pegawai.sql
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
-- phpMyAdmin SQL Dump -- version 4.8.0.1 -- https://www.phpmyadmin.net/ -- -- Host: localhost -- Generation Time: Dec 16, 2018 at 01:33 PM -- Server version: 10.1.32-MariaDB -- PHP Version: 5.6.36 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; 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: `belajar_laravel` -- -- -------------------------------------------------------- -- -- Table structure for table `pegawai` -- CREATE TABLE `pegawai` ( `pegawai_id` int(11) NOT NULL, `pegawai_nama` varchar(50) NOT NULL, `pegawai_jabatan` varchar(20) NOT NULL, `pegawai_umur` int(11) NOT NULL, `pegawai_alamat` text NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `pegawai` -- INSERT INTO `pegawai` (`pegawai_id`, `pegawai_nama`, `pegawai_jabatan`, `pegawai_umur`, `pegawai_alamat`) VALUES (2, 'Diki Alfarabi Hadi', 'Staff IT', 26, 'Jl. Merak Putih'), (4, 'Malas Ngoding', 'Programmer', 30, 'Jl. Cendrawasih nomor 31'), (7, 'Joni', 'Web Designer', 25, 'Jl. Panglateh'), (8, 'Elma Sudiati', 'quo', 38, 'Gg. Cikapayang No. 255, Sungai Penuh 32691, Riau'), (9, 'Slamet Lega Rajata S.Farm', 'voluptatem', 32, 'Gg. Supono No. 84, Sawahlunto 47885, SulSel'), (10, 'Jaya Naradi Situmorang', 'quasi', 33, 'Dk. Imam Bonjol No. 814, Palu 46518, SumUt'), (11, 'Rendy Habibi S.Psi', 'sit', 37, 'Gg. Basuki No. 314, Administrasi Jakarta Pusat 73176, NTB'), (12, 'Yahya Sinaga', 'enim', 26, 'Ki. Industri No. 238, Sungai Penuh 38002, SulSel'), (13, 'Hesti Janet Hasanah S.Sos', 'est', 35, 'Dk. Wahidin Sudirohusodo No. 637, Surabaya 44801, Banten'), (14, 'Sari Rahmi Melani', 'laborum', 36, 'Psr. Dipatiukur No. 227, Balikpapan 19234, SulTeng'), (15, 'Clara Wahyuni', 'eveniet', 38, 'Jln. Otista No. 163, Dumai 91798, KalUt'), (16, 'Dasa Jais Maheswara', 'esse', 32, 'Kpg. Radio No. 94, Padangpanjang 14989, Bali'), (17, 'Viktor Prasasta', 'sunt', 27, 'Jln. BKR No. 694, Surakarta 95932, NTB'), (18, 'Lurhur Damanik', 'nemo', 29, 'Psr. Salak No. 990, Bau-Bau 25079, SulSel'), (19, 'Zelaya Nasyidah', 'sit', 29, 'Jr. Kali No. 589, Administrasi Jakarta Barat 96388, Gorontalo'), (20, 'Oman Damanik', 'maiores', 28, 'Psr. Taman No. 461, Banjarbaru 37220, Maluku'), (21, 'Lili Anggraini', 'id', 25, 'Jr. Baranang No. 631, Pariaman 57837, JaTim'), (22, 'Harto Prabowo', 'quos', 38, 'Jln. Ki Hajar Dewantara No. 213, Tual 51023, Jambi'), (23, 'Kanda Habibi', 'nam', 35, 'Kpg. Baan No. 69, Blitar 72288, Lampung'), (24, 'Wani Prastuti', 'doloremque', 33, 'Gg. Bakau No. 67, Pagar Alam 78006, Papua'), (25, 'Vero Natsir', 'illum', 34, 'Ds. Salak No. 391, Pontianak 80916, KalTeng'), (26, 'Paris Hani Nuraini S.IP', 'quo', 39, 'Ds. Dahlia No. 744, Ambon 99599, KalTeng'), (27, 'Padma Salimah Suartini S.H.', 'ab', 38, 'Ds. Bawal No. 241, Salatiga 42046, Papua'), (28, 'Kasiran Pangeran Prasetyo', 'aut', 35, 'Ki. Fajar No. 272, Prabumulih 45913, Aceh'), (29, 'Aslijan Sirait', 'repellendus', 25, 'Gg. Ujung No. 11, Pekanbaru 57006, MalUt'), (30, 'Ira Nuraini', 'magnam', 36, 'Gg. Yohanes No. 441, Jambi 46510, SumSel'), (31, 'Kiandra Puspita', 'enim', 40, 'Dk. Kali No. 33, Pontianak 12025, MalUt'), (32, 'Harsaya Prayoga', 'esse', 25, 'Kpg. Dago No. 928, Kupang 92150, Bali'), (33, 'Mala Lailasari', 'cupiditate', 25, 'Dk. Wahidin Sudirohusodo No. 13, Cirebon 44084, Bali'), (34, 'Ayu Zizi Kuswandari', 'voluptas', 32, 'Psr. Laksamana No. 259, Batu 93531, KalSel'), (35, 'Adika Wasita', 'cum', 29, 'Jr. Ki Hajar Dewantara No. 725, Sawahlunto 19536, Gorontalo'), (36, 'Najib Omar Anggriawan', 'omnis', 25, 'Kpg. Suniaraja No. 917, Tanjung Pinang 37324, SumUt'), (37, 'Edward Tomi Saptono M.M.', 'praesentium', 29, 'Dk. Sadang Serang No. 852, Surakarta 37423, SulTeng'), (38, 'Ajimat Ardianto M.Kom.', 'excepturi', 40, 'Gg. Bakti No. 251, Parepare 48583, Maluku'), (39, 'Carub Gamblang Prasasta S.H.', 'inventore', 34, 'Gg. Cikutra Barat No. 259, Gunungsitoli 25016, SumUt'), (40, 'Dimaz Prabowo S.Gz', 'libero', 26, 'Ds. Baya Kali Bungur No. 472, Bitung 95442, Lampung'), (41, 'Siti Farida', 'autem', 37, 'Dk. Hang No. 1, Bengkulu 71277, SumUt'), (42, 'Uchita Astuti', 'recusandae', 40, 'Ki. Sutami No. 779, Pontianak 99497, JaTim'), (43, 'Zalindra Ghaliyati Puspita S.E.I', 'saepe', 39, 'Ki. Flores No. 891, Bandar Lampung 35072, SulSel'), (44, 'Respati Tampubolon', 'facere', 31, 'Jr. Bagas Pati No. 769, Bukittinggi 80941, SulTeng'), (45, 'Zulaikha Puspita', 'quam', 40, 'Gg. Baan No. 59, Pematangsiantar 98370, KalBar'), (46, 'Maya Andriani', 'voluptatibus', 39, 'Kpg. Warga No. 155, Payakumbuh 15521, Jambi'), (47, 'Tantri Putri Namaga S.T.', 'voluptatem', 29, 'Kpg. Laswi No. 427, Banjarbaru 52446, KalUt'), (48, 'Dimaz Rajasa M.M.', 'sit', 39, 'Gg. Madiun No. 340, Pontianak 29529, SulUt'), (49, 'Lintang Lalita Astuti S.Psi', 'beatae', 33, 'Kpg. Baja No. 834, Gunungsitoli 25347, PapBar'), (50, 'Sakura Widiastuti', 'exercitationem', 35, 'Dk. Cokroaminoto No. 844, Padangpanjang 88917, Gorontalo'), (51, 'Laksana Hidayat', 'sunt', 40, 'Ds. Bakau Griya Utama No. 757, Bandar Lampung 42512, SumSel'), (52, 'Faizah Kusmawati S.Ked', 'tempora', 37, 'Ds. Badak No. 423, Pangkal Pinang 76234, SumSel'), (53, 'Tami Nilam Widiastuti', 'esse', 40, 'Psr. Bahagia No. 723, Jayapura 94256, Maluku'), (54, 'Tina Maryati', 'est', 36, 'Jln. Lumban Tobing No. 182, Bau-Bau 47907, SumUt'), (55, 'Enteng Habibi S.Pd', 'voluptate', 39, 'Jr. Achmad Yani No. 211, Tasikmalaya 38586, JaBar'), (56, 'Waluyo Samosir', 'ipsum', 39, 'Ki. Badak No. 252, Sorong 37092, SulTeng'), (57, 'Malika Eli Kusmawati', 'exercitationem', 32, 'Ds. Banda No. 618, Tanjung Pinang 93287, Gorontalo'); -- -- Indexes for dumped tables -- -- -- Indexes for table `pegawai` -- ALTER TABLE `pegawai` ADD PRIMARY KEY (`pegawai_id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `pegawai` -- ALTER TABLE `pegawai` MODIFY `pegawai_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=58; 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 */; |
Oke saya anggap teman-teman sudah punya data yang akan kita buatkan pagination nya.
membuat pagination pada laravel
Atau jika teman-teman ingin menginput data testing dengan cepat. teman-teman bisa menggunakan Faker di laravel. silahkan baca tutorial Seeding dan Faker pada laravel.
Selanjutnya kita akan menampilkan data pegawai ini.
Buat Route baru.
belajar_laravel/routes/web.php
|
1 |
Route::get('/pegawai','PegawaiController@index'); |
di sini kita menetapkan route ‘/pegawai’ untuk mengakses method index dalam controller PegawaiController.
Sekarang buat controller PegawaiController dan method index nya jika belum.
silahkan teman-teman baca cara membuat controller dengan Laravel. karena sudah kita bahas pada tutorial sebelumnya. karena di tutorial laravel part 15 ini kita akan fokus pada materi membuat pagination pada laravel saja.
Buat controller PegawaiController dan method index jika belum.
belajar_laravel/app/Http/controllers/PegawaiController.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?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 pegawai $pegawai = DB::table('pegawai')->paginate(10); // mengirim data pegawai ke view index return view('index',['pegawai' => $pegawai]); } } |
Coba teman-teman perhatikan. karena kita akan bermain dengan database. maka wajib kita aktifkan dulu dengan menulis syntax
|
1 |
use Illuminate\Support\Facades\DB; |
kemudian pada method index kita ambil data dari tabel pegawai. dan kita passing ke view.
|
1 2 3 4 5 6 7 8 9 |
public function index() { // mengambil data dari table pegawai $pegawai = DB::table('pegawai')->paginate(10); // mengirim data pegawai ke view index return view('index',['pegawai' => $pegawai]); } |
Coba perhatikan pada query builder nya. pada saat kita belajar menampilkan data dari database. perintah yang kita gunakan adalah
|
1 |
$pegawai = DB::table('pegawai')->get(); |
fungsi ->get() bertujuan untuk mengambil semua data.
Sedangkan untuk membuat pagination kita cukup menggunakan fungsi ->paginate(10).
Angka 10 di sini bermaksud menentukan untuk membuat pagination yang masing-masing halamannya akan menampilkan 10 row data.
dan terakhir kita passing data nya ke view index.
|
1 2 |
// mengirim data pegawai ke view index return view('index',['pegawai' => $pegawai]); |
Buat view nya. yaitu view index.blade.php.
belajar_laravel/resources/views/index.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <title>Tutorial Membuat Pagination Pada Laravel - www.malasngoding.com</title> </head> <body> <style type="text/css"> .pagination li{ float: left; list-style-type: none; margin:5px; } </style> <h2><a href="https://www.malasngoding.com">www.malasngoding.com</a></h2> <h3>Data Pegawai</h3> <table border="1"> <tr> <th>Nama</th> <th>Jabatan</th> <th>Umur</th> <th>Alamat</th> </tr> @foreach($pegawai as $p) <tr> <td>{{ $p->pegawai_nama }}</td> <td>{{ $p->pegawai_jabatan }}</td> <td>{{ $p->pegawai_umur }}</td> <td>{{ $p->pegawai_alamat }}</td> </tr> @endforeach </table> <br/> Halaman : {{ $pegawai->currentPage() }} <br/> Jumlah Data : {{ $pegawai->total() }} <br/> Data Per Halaman : {{ $pegawai->perPage() }} <br/> {{ $pegawai->links() }} </body> </html> |
Perhatikan di sini, kita menampilkan data nya seperti biasa. seperti yang sudah di bahas pada tutorial membuat CRUD pada laravel sebelumnya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<table border="1"> <tr> <th>Nama</th> <th>Jabatan</th> <th>Umur</th> <th>Alamat</th> </tr> @foreach($pegawai as $p) <tr> <td>{{ $p->pegawai_nama }}</td> <td>{{ $p->pegawai_jabatan }}</td> <td>{{ $p->pegawai_umur }}</td> <td>{{ $p->pegawai_alamat }}</td> </tr> @endforeach </table> |
Bedanya di sini kita bisa menggunakan fungsi links() untuk membuat link penomoran nya.
|
1 |
{{ $pegawai->links() }} |
dan kita bisa menampilkan status detail tentang datanya dengan fungsi-fungsi berikut ini.
|
1 2 3 |
Halaman : {{ $pegawai->currentPage() }} <br/> Jumlah Data : {{ $pegawai->total() }} <br/> Data Per Halaman : {{ $pegawai->perPage() }} <br/> |
Oke coba kita lihat hasilnya. jalankan project kita. dan akses route ‘ /pegawai ‘.
localhost:8000/pegawai
pagination laravel
Nah pagination telah berhasil kita buat dengan laravel.
coba klik pada halaman lain.
membuat pagination di laravel
Oke teman-teman. selesai sudah materi Membuat Pagination Pada Laravel. intinya kita hanya menggunakan fungsi paginate(). dan membuat link nya dengan fungsi links().
Sampai jumpa pada tutorial laravel selanjutnya.
Tutorial Menarik Lainnya
Tutorial Laravel #41 : Action URL Laravel
Tutorial Laravel #40 : Multi Bahasa Localization Laravel
Tutorial Laravel #39 : Import Excel Laravel
Tutorial Laravel #38 : Export Excel Laravel
[…] Membuat Pencarian Pada Laravel – Selamat datang kembali di tutorial lengkap laravel untuk pemula. pada tutorial ini kita akan melanjutkan materi laravel yang sebelumnya kita telah belajar tentang cara membuat pagination dengan laravel. […]
Kak punten mau minta code dari function total() untuk menampilkan jumlah data pegawai nya apa ya kak
Bagaimana cara mengurutkan data secara ascending/descending? dengan kondisi apabila kita melakukan aktivitas klik pada header tabel, cth: Nama. Maka data akan diurutkan berdasarkan A-Z atau Z-a.
bang itu fungsi links() dari mana ? soalnya muncul error Call to undefined method App\Models\Pegawai::links()