Menerapkan Pagination Pada Aplikasi Hapi JS

Penggunaan API pada website dan aplikasi web menjadi sangat populer. Semakin banyak permintaan yang diterima oleh API, maka semakin besar beban yang harus ditanggung oleh API tersebut. Dalam skala aplikasi yang besar, API dapat menerima jumlah permintaan yang sangat besar, seperti ketika kita ingin melakukan query untuk melihat data. Jika seluruh data ditampilkan sekaligus, hal ini dapat memengaruhi kinerja dari API itu sendiri. Oleh karena itu, API harus dioptimalkan. Salah satu cara untuk mengoptimalkan API adalah dengan menerapkan teknik Pagination.

Pada artikel ini, kita akan membahas pagination dan bagaimana menerapkannya pada aplikasi Hapi.

Apa itu Pagination?

source : https://sitechecker.pro/pagination/

Ketika mengakses internet, pernahkah kamu klik galeri gambar? atau membaca berita yang dipecah menjadi beberapa segmen? hal tersebut adalah pagination.

Pagination merupakan penomoran halaman yang berurutan. Pagination dapat diterapkan pada API untuk membantu membatasi jumlah data yang ditampilkan pada setiap permintaan. Dengan menerapkan pagination, API hanya akan menampilkan sejumlah data tertentu pada setiap halaman, sehingga pengguna dapat memilih untuk menavigasi ke halaman berikutnya atau sebelumnya untuk melihat data selanjutnya atau sebelumnya.

Metode Pagination

Terdapat beragam metode pagination, di antaranya yaitu Offset, Keyset, dan Seek. Offset pagination merupakan salah satu metode yang paling sederhana untuk diterapkan. Dalam metode offset, pagination dicapai dengan menentukan limit dan offset. Limit menunjukkan jumlah data yang akan ditampilkan pada setiap halaman, sedangkan offset menunjukkan urutan data yang akan ditampilkan pada halaman tersebut.

Pada artikel ini, kita akan membuat pagination dengan menerapkan metode offset.

Membuat Pagination

Project ini merupakan lanjutan dari artikel sebelumnya, Silakan buka repositori Github untuk melihat kode sebelumnya.

Silakan buka file order.controller.js pada folder controller. Dalam membuat pagination kita akan fokus pada fungsi getOrder sebagai berikut:

async getorder(request, h) {
    try {
      const order = await Orders.findAll({
        attributes: ["id", "product_name", "order_date", "amount"],
      });
      return h.response(order).code(200);
    } catch (err) {
      return Boom.internal(err.message);
    }
  },

Tambahkan inisialisasi limit dan offset pada getOrder, kemudian inisialisasikan totalCount dan totalPages seperti kode berikut:

async getOrder(request, h) {
    try {
      const { page = 1, limit = 5 } = request.query;
      const offset = (page - 1) * limit;
      const order = await Orders.findAll({
        attributes: ["id", "product_name", "order_date", "amount"],
        limit: limit,
        offset: offset,
      });
      const totalCount = await Orders.count();
      const totalPages = Math.ceil(totalCount / limit);
      return h.response(order).code(200);
    } catch (err) {
      return Boom.internal(err.message);
    }
  },

• Di awal kode, kita Mengambil nilai page dan limit dari query parameter yang dikirimkan melalui request. Jika query parameter tidak diberikan, maka secara default nilai page akan bernilai 1 dan limit akan bernilai 5.
• Kemudian nilai offset dihitung untuk mengambil data produk pada halaman tertentu dengan menggunakan offset = (page — 1) * limit .
• Ditambahkan parameter limit dan offset yang telah ditentukan pada pengambilan data orders dari database menggunakan Orders.findAll() ditambahkan.
• totalCount = await Orders.count() digunakan untuk menghitung jumlah total data orders yang tersedia .
• totalPages = Math.ceil(totalCount / limit) digunakan untuk menghitung jumlah halaman total yang dibutuhkan untuk menampilkan seluruh data orders.

Setelah melakukan inisialisasi, senjutnya kita tentukan response pada fungsi getOrder() seperti berikut:

return h.response({
  data: order,
  currentPage: page,
  totalPages: totalPages,
  totalItems: totalCount,
}).code(200);

Response dikembalikan dengan data yang diambil dari database menggunakan pagination, yaitu data order dengan jumlah limit dan di-offset sebanyak offset. Selain itu, response tersebut juga akan menyertakan informasi pagination, yaitu halaman saat ini (currentPage), total halaman (totalPages), dan total item yang tersedia (totalItems).

Berikut adalah seluruh kode pada fungsi getOrder() :

async getOrder(request, h) {
    try {
      const { page = 1, limit = 5 } = request.query;
      const offset = (page - 1) * limit;
      const order = await Orders.findAll({
        attributes: ["id", "product_name", "order_date", "amount"],
        limit: limit,
        offset: offset,
      });
      const totalCount = await Orders.count();
      const totalPages = Math.ceil(totalCount / limit);

      return h
        .response({
          data: order,
          currentPage: page,
          totalPages: totalPages,
          totalItems: totalCount,
        })
        .code(200);
    } catch (err) {
      return Boom.internal(err.message);
    }
}

Melakukan Testing

Silakan buka postman dan buat record baru dengan menggunakan metode POST, untuk mengetahui apakah pagination berfungsi dengan baik, buatlah record lebih dari 5, seperti berikut:

http://localhost:3000/api/orders

Selanjutnya kita akan menggunakan metode GET untuk melihat orders yang ada. silakan masukkan endpoint berikut :

http://localhost:3000/api/orders?page=1&limit=3

Tanda ? pada url menandakan bahwa pada url tersebut query. Dengan memberikan url tersebut, maka kita akan melihat page 1 dengan limit data sebanyak 3, seperti berikut:

http://localhost:3000/api/orders?page=1&limit=3

Untuk pindah ke halaman selanjutnya kita dapat mengubah page pada endpoint, menjadi berikut:

http://localhost:3000/api/orders?page=2&limit=3

http://localhost:3000/api/orders?page=2&limit=3

Jika kita tidak memasukkan query pada endpoint, maka secara default akan menampilkan page 1 dengan limit data 5, seperti berikut:

http://localhost:3000/api/orders

Selamat!!! dengan demikian kamu telah berhasil menerapkan pagination pada aplikasi Hapi!

Sumber:
https://nordicapis.com/everything-you-need-to-know-about-api-pagination/
https://sitechecker.pro/pagination/

Dalam artikel ini, kita telah membahas tentang pagination pada API. Dengan menerapkan pagination, kita dapat mengoptimalkan performa API dan mengurangi beban server. Terakhir, penting bagi pengembang untuk memilih metode pagination yang tepat sesuai dengan kebutuhan aplikasi dan data yang digunakan. Hal ini dapat membantu memaksimalkan performa dan keamanan API serta memberikan pengalaman pengguna yang lebih baik.

Silakan kunjungi repositori Github untuk melihat seluruh kode yang telah dibahas dalam artikel ini.

Ingin mengetahui lebih banyak? Jangan lewatkan artikel selanjutnya yang akan membahas topik Menarik tentang Meningkatkan Keamanan Aplikasi Hapi JS dengan Authentifikasi Menggunakan JWT dan Bcrypt.

Meningkatkan Keamanan Aplikasi Hapi JS dengan Autentikasi JWT dan Bcrypt