Halo teman-teman semua, kembali lagi di playlist Belajar Laravel 11 untuk pemula Dan kali ini kita masuk ke episode untuk membuat sebuah fitur yang menurut saya cukup seru Yaitu pagination ya, atau penghalamanan Jadi di episode sebelumnya kita sudah membuat dan menampilkan tulisan blog kita Secara rapih gitu ya, ke dalam satu halaman dalam bentuk kart Yang kalau misalkan teman-teman punya 100 tulisan itu akan tertulis semua di dalam halamannya Itu cukup banyak Nah agar lebih rapi dan juga agar data yang kita ambil itu tidak terlalu banyak sekaligus Kita butuh fitur yang namanya pagination Nah gimana cara menerapkan pagination ini ke dalam aplikasi kita Langsung aja kita masuk ke materinya Oke teman-teman mari kita langsung buka website kita Jadi ceritanya sekarang kita akan menambahkan pagination di bagian sini ya Supaya nggak tampil 100 Ini kan kalau teman-teman lihat 100-100nya blognya tampil di sini Kita akan tambahkan halaman Jadi caranya kita lihat dulu dokumentasinya Masuk ke larafel.com Masuk dokumentasi Kita langsung cari aja pagination ya Pagination Caranya Ini gampang banget ya Cari basic usage Kalian cukup tambahkan paginate Untuk menggantikan method get kalian Jadi silahkan buka lagi codingnya Kita masuk ke tempat kita menampilkan data Di bagian web ya Di routes kita Disini. Kita cukup ganti get-nya. Kalau get kan nampilin semua data.
Kita cukup ganti dengan paginate. Terus tinggal kita tulis mau nampilin berapa data. Misalnya 5 aja gitu ya. Tulis 5. Maka nanti data akan tampil 5 saja.
Tapi link-nya belum ada. Untuk nampilin link-nya. Kalian cukup tambahkan sesuatu di view-nya.
Caranya kalian tinggal lihat di dokumentasi. Scroll ke bawah. Cari bagian displaying. pagination nah kalian cukup tambahin ini aja user links di tempat yang kalian inginkan misalnya saya mau nambahinnya di post coba tinggal buka post kita tampilinnya setelah forum ini kan forum ya kita Scroll nah disini di tengah-tengah ganti usersnya jadi pos Oke Coba kita lihat Wah masih ngaco, ini ngaco karena kita lupa menambahkan blade-nya.
Coba scroll ke atas dokumentasinya. Nah ini nih, kita belum menambahkan ini di dalam kontennya, baris ini. Ya teman-teman silahkan copy aja. Tailwind JIT-nya.
Buka Tailwind Config, scroll ke atas. Nah kita tambahkan disini, di dalam kontennya. Save.
Close. Kita lihat kesini. Sudah beres teman-teman. Oke jadi itu dia teman-teman pembahasan mengenai pagination kita untuk video kali ini.
Nggak ya teman-teman ya. Gitu bercanda. Kita kembali lagi.
Jadi itu tadi buat nunjukin aja bahwa menggunakan pagination di Laravel semudah itu ya. Masih banyak yang akan kita bahas, tenang aja. Kita baru nambahin pagination tadi dengan jumlah yang sesuai kita inginkan.
Kita nampilin 5. Tapi kalau misalkan kita pengen nampilinnya misalnya 9. Ya cukup ganti aja datanya jadi 9. Maka otomatis jumlah halamannya juga berubah ya. Akan menyesuaikan. Kalau misalkan kita mau tampilin paginationnya di atas dan di bawah. Supaya nanti user ketika lagi ada di bawah.
Kalau pengen ganti halaman nggak perlu scroll ke atas. Ya teman-teman bisa kopikan lagi linksnya sekali lagi. Kita simpan di bawah divnya. Sini. Jadi ada 2. Itu bisa juga ya.
Nah supaya ini gak terlalu mepet. Mungkin bisa kita kasih jarak dulu ya. Mungkin kita bisa kasih MY 4 ya. Nah ini ya. Jadi gak terlalu mepet atas dan bawahnya.
Kalau mau lebih simple lagi. Sebetulnya ada yang namanya simple paginate. Teman-teman bisa ganti. Ini jadi simple paginate. Nulisnya gini.
Ini gak ada halamannya. Ini ada. Previews dan next aja Kalau udah gak ada lagi di previewsnya Ini gak bisa di klik Kalau next bisa Nah ini kalau misalkan gak butuh halamannya Silahkan pakai simple paginate aja Tapi kalau misalkan teman-teman butuh Ganti jadi paginate aja Nah kalau misalkan teman-teman bertanya Kenapa kok bisa langsung tampil bagus gini Nah ini karena secara default Laravel itu menggunakan Tailwind untuk paginationnya Jadi kalau teman-teman pengen edit-edit nih ya Atau bahkan mengganti Tailwind jadi yang lain Misalnya bootstrap Itu teman-teman bisa lakukan Ayo kita bisa melakukan publish dulu ke dalam pagination nya supaya bisa kita edit karena sekarang pagination yaitu ada di dalam ada di folder vendor ya di sini Nah supaya kita bisa edit kita harus publish dulu supaya bisa masuk ke dalam folder public saya teman-teman tinggal buka aja terminal terus ketikan aja php artisan vendor.2 publish gini, nanti pencet enter aja terus kita pilih dari sebanyak vendor ini mana yang mau kita publish nah kita mau publishnya yang ini illuminate pagination service provider caranya teman-teman ketik aja angka 5 ya disini kita ketik 5, enter nah nanti yang tadinya ada di dalam vendor dipindahin ke folder public di copy jadi kalau teman-teman mau edit-edit misalnya teman-teman nemu ada di Tailwind UI atau di Flowbyte pagination yang bagus, tinggal di copy aja. Nah sekarang udah ada di folder resources.
Tinggal dibuka aja resources, views, vendor, pagination. Nah nih, lihat nih. Jadi kita sebenarnya dikasih beberapa pagination. Mau pake bootstrap 4 bisa, pake bootstrap 5 bisa, semantic UI bisa, pake Tailwind juga bisa. Kalau temen-temen mau ganti, cara gantinya itu ada di bagian app.
Provider selalu service provider. Nanti disini tinggal tulis aja paginator. Nih paginator. Tinggal nanti kita panggil. Misalnya mau pakai bootstrap.
Tulis aja use bootstrap. Mau pakai bootstrap berapa. Misalnya bootstrap 5. Nah udah berarti sekarang pagination kalian menggunakan bootstrap.
Karena kita nggak punya bootstrap. Ya tampilnya polos begini. Ya tapi karena kita mau pakai Tailwind ini nggak usah. Nah kalau mau di edit-edit CSS nya juga bisa tinggal dibuka aja tadi bagian pagination nya kita pakainya yang Tailwind ya ada di sini tinggal diganti ya kalau kalian nemu misalnya kita balik sini kita ke flowbyte misalnya ya kita ke flowbyte di bagian blocks nya temen-temen mau cari pagination Oh nggak ada ya pagination adanya di Docs sebelah kiri harusnya di sini ada nih komponen pagination nah ini kalau misalkan lu pakai paginationnya flowbyte ya udah tinggal disesuaikan ada nav area label disini ada nih nav area label tinggal disamain aja dalamnya ada pakai ul ternyata nah ini ganti berarti jangan lagi pakai div ya silahkan dimodifikasi tapi karena kita udah pakai tailwind dan tampilnya juga bagus ya udah aman aja nah itu temen-temennya paling terakhir ini kita masih punya problem kalau tadi temen-temen coba ngeklik-ngeklik ya Problemnya gini, kalau misalnya sekarang kita masuk ke kategori.
Misalkan saya masuk ke kategori machine learning. Tuh, dia udah sesuai. Jadi ada 25 result di machine learning. Nggak ada masalah.
Tapi ketika kita klik halaman 2, klik, dia balik lagi ke awal. Dia ke halaman 2 udah benar, tapi datanya balik lagi ke 100. Padahal harusnya gini. Kenapa? Karena si kategorinya hilang di atas. Harusnya kan gini, klik machine learning.
Pada saat saya klik page 2, harusnya itu nambah di sini. Dan page 2. Tuh, ini benar. Tapi masalahnya ketika saya klik, lihat URL di bawah, kategorinya hilang.
Itu juga termasuk pada saat kita searching ya. Misalkan saya cari judul yang ada tulisan out-nya. Ini kan ada 3. Kurang banyak ya.
Kalau misalkan kita ganti jadi 2 deh. Page need 2. Nah, harusnya nambah tuh. Karena tampilnya kan cuma 2. Kalau saya klik 2, harusnya nampilinnya tinggal 1. Tapi sekarang balik lagi ke awal.
Nah, gimana caranya? Ini balikin dulu ke 9 ya. Caranya gampang banget. Kita tinggal sisipkan query string-nya.
Supaya tadi kategorinya atau author-nya tetap ke bawah. Kalian cukup tambahin with query string. Udah.
Sekarang kalau kita masuk machine learning, kalau kita klik 2, Aman ya. Karena kebawah semua. Kategorinya kebawah. Pagenya kebawah. Kalau kita searching juga.
Pasti kebawah ya. Kita berdasarkan author. Next. Aman.
Oke teman-teman. Jadi itu dia untuk pagination. Sekarang benar-benar beres ya. Harusnya paham gimana cara nambahin pagination.
Kalau mau disederhanain paginationnya tadi bisa. Kalau teman-teman mau ganti. nanti juga stylenya enggak lagi pakai tailwind bisa juga tadi Oke jadi begitu aja untuk video kali ini mudah-mudahan bermanfaat saya Sadiq Ali pamit dan seperti biasa jangan lupa titik