Belajar AdonisJS: Pagination
Setelah berhasil membuat data baru dengan migration dan seeder sekarang kita akan belajar bagaimana membuat pagination di adonisjs.
Pagination ini biasanya digunakan untuk membuat datatable di frontend. Nanti jika saya bisa meluangkan waktu akan saya buatkan seri untuk frontendnya juga. :yaay:
Langsung saja kita mulai
Membuat Route
Yang pertama akan kita lakukan adalah dengan membuat route, url mana yang akan digunakan untuk mendapatkan data yang diminta.
Masuk ke file start/routes.js kemudian masukkan route seperti ini
Disana saya menggunakan Route.group agar pada saat project kita sudah besar, pengelompokan route tiap modulenya lebih mudah. Dimana url tersebut akan terbaca /cars/paginate karena cars menjadi prefixnya.
Lalu setelahnya, kita buat controller car pilih yang for http request dan masukkan method yang akan dituju route tersebut
adonis make:controller carSetelah itu kita masuk ke file CarController.js
Karena di seri sebelumnya kita sudah membuat model untuk car maka sekarang kita tinggal mengimportnya, dengan menggunakan
const CarModel = use('App/Models/Car')use disana adalah namespace yang ada di adonis untuk mengarahkan ke file / library tertentu. Di atas sana terlihat bahwa use mengarah ke model car.
Setelah itu kita buat method paginatenya dengan async/await untuk menghandle proses asynchronous di javascript. Method paginate ini hanya menerima object request untuk mengambil parameter yang dikirimkan dari yang mengonsumsi API ini. Parameter yang dibutuhkan adalah
- limit, untuk menunjukkan jumlah data yang akan diambil
- offset, untuk menunjukkan dari urutan berapa data akan diambil
- query, untuk mengambil data yang mirip dengan kita cari
- orderBy, digunakan untuk mengurutkan data dengan mengacu pada column tertentu
- orderDir, jenis urutan yang akan dimunculkan
ascuntuk yang naik,descuntuk yang turun.
Untuk parameter limit dan offset harus kita parse ke integer agar bisa dibaca oleh Lucid. Dan juga offset kita tambahkan nilai 1 karena dari frontend nanti harus mengirim dimulai dari 0.
Setelah itu kita mengambil data menggunakan Lucid Model dengan cara seperti itu.
Mengambil query dengan yang mirip dengan data di column merk atau column model, mengurutkan dari yang kita inputkan di orderBy dan orderDir lalu membuat paginatenya berdasarkan limit dan offset lalu kita return datanya untuk dikirimkan melalui API.
setelah selesai, kita bisa mencobanya menggunakan Rest Client, disini saya menggunakan Insomnia, tool yang keren.
Di sebelah kanan adalah hasil yang kita dapatkan setelah berhasil mengambil data.
Disana terdapat informasi mengenai berapa total data yang ada, dalam tiap request diambil berapa; perPage / limit, sekarang berada di page berapa offset, dan berapa halaman terakhir jika diambil berdasarkan limit tersebut; lastPage. Di bawahnya ada data yang kita dapatkan.
Download file json insomnianya, kemudian import ke insomnia yang terinstall di tempat teman-teman.
Maka data tersebut sudah bisa kita gunakan untuk membuat datatable di frontend.
Sekian dari saya,
Terima kasih sudah memberi claps 😄
