Pagination merupakan teknik yang digunakan pada pengembangan web untuk membagi sekumpulan data dengan jumlah besar menjadi bagian yang lebih kecil dan lebih mudah dikelola.
Dengan begitu pengguna dapat menavigasi data secara terstruktur dan mencegah kebutuhan untuk memuat dan menampilkan semua data sekaligus yang dapat membuat kinerja web menjadi lambat.
Mempersiapkan Proyek Node.js
Pastikan Anda memiliki Node.js terinstal di sistem Anda. Jika belum, Anda dapat mengunduhnya dari situs resmi Node.js.
Setelah Node.js terinstal, buat folder proyek baru dan inisialisasi proyek Node.js menggunakan perintah berikut melalui terminal atau command prompt:
mkdir nodejs-pagination cd nodejs-pagination npm init -y
Menginstal Library
Langkah selanjutnya kita akan menginstal library yang dibutuhkan. Adapun library yang kita butuhkan yaitu express dan mongoose.
Silahkan ketik perintah berikut untuk menginstall library express dan mongoose.
npm i express mongoose
Kemudian kita buat file baru dengan nama index.js dan kita panggil library yang sudah kita instal tadi seperti berikut ini.
const express = require("express");
const mongoose = require("mongoose");
const app = express();
const Product = require("./models/productModel");
app.use(express.json())Membuat Koneksi Database Mongodb
Langkah selanjutnya kita akan membuat koneksi untuk database mongodb nya. Pada file index.js anda silahkan tambahkan kode berikut ini.
mongoose
.connect("mongodb://127.0.0.1:27017/pagination")
.then(() => {
console.log("Connected to MongoDB Successfully");
})
.catch((err) => {
console.log("Could not connect to MongoDB");
console.error(err);
});
const PORT = process.env.PORT || 8000;
app.listen(PORT, () => console.log(`App listenig on port ${PORT}`));Baik kita telah berhasil membuat server dan koneksi database. Selanjutnya kita akan membuat Schema database mongodb.
Silahkan kalian buat folder baru dengan nama models kemudian di dalam folder tersebut silahkan buat file dengan nama productModel.js dan silahkan copy kode berikut.
const mongoose = require("mongoose");
const productSchema = new mongoose.Schema({
item: {
type: "string",
required: true,
},
qty: {
type: "number",
required: true,
},
});
module.exports = mongoose.model("Product", productSchema);
Membuat Pagination
Kita akan membuat fitur tambah data terlebih dahulu. silahkan copy kode berikut ini di file index.js.
//Create Products
app.post("/", async (req, res, next) => {
const product = await Product.create(req.body);
res.status(201).json({
success: true,
product,
});
});Kode di atas untuk menambahkan data baru pada database. Setelah berasil membuat fitur tambah data langkah selanjutnya kita akan menampilkan data yang berhasil dibuat dan menerapkan pagination saat menampilkan data.
Silahkan tambahkan kode berikut pada file index.js anda.
//Get Products
app.get("/", async (req, res) => {
try {
const resultPerPage = 5;
const productCount = await Product.countDocuments();
const currentPage = Number(req.query.page) || 1;
const skip = resultPerPage * (currentPage - 1);
const products = await Product.find().limit(resultPerPage).skip(skip);
res.status(200).json({
success: true,
products,
productCount,
});
} catch (error) {
console.log(error);
return res.status(500).json({ msg: "Sorry, something went wrong" });
}
});Kode diatas akan menampilkan 5 data pertama pada setiap page. Sebagai contoh ketika anda mempunyai 15 data dalam database, maka yang di munculkan per page nya yaitu 5 data, sehingga terdapat 3 page yang setiap page nya memuat 5 data.
Untuk menampilkan page selanjutnya kalian bisa gunakan url berikut http://localhost:8000/?page=2 url tersebut merupakan page ke 2 dan untuk menampilkan page 3 kalian bisa gunakan url http://localhost:8000/?page=3
Baik jadi untuk keseluruhan file index.js anda menjadi seperti berikut ini.
const express = require("express");
const mongoose = require("mongoose");
const app = express();
const Product = require("./models/productModel");
app.use(express.json())
mongoose
.connect("mongodb://127.0.0.1:27017/pagination")
.then(() => {
console.log("Connected to MongoDB Successfully");
})
.catch((err) => {
console.log("Could not connect to MongoDB");
console.error(err);
});
const PORT = process.env.PORT || 8000;
//Create Products
app.post("/", async (req, res, next) => {
const product = await Product.create(req.body);
res.status(201).json({
success: true,
product,
});
});
//Get Products
app.get("/", async (req, res) => {
try {
const resultPerPage = 5;
const productCount = await Product.countDocuments();
const currentPage = Number(req.query.page) || 1;
const skip = resultPerPage * (currentPage - 1);
const products = await Product.find().limit(resultPerPage).skip(skip);
res.status(200).json({
success: true,
products,
productCount,
});
} catch (error) {
console.log(error);
return res.status(500).json({ msg: "Sorry, something went wrong" });
}
});
app.listen(PORT, () => console.log(`App listenig on port ${PORT}`));
Untuk menjalankan servernya anda bisa gunakan perintah berikut di terminal.
node index.js
Kesimpulan
Dalam artikel ini, kita telah membuat pagination untuk api dengan menggunakan node.js dan express. Dari menginisialisasi proyek hingga menghubungkan ke database mongodb, membuat schema dan model, serta membuat dan mengambil data dengan menerapkan pagination.
Dengan menerapkan pagination akan menampilkan data secara terstruktur dan mencegah kebutuhan untuk memuat dan menampilkan semua data sekaligus yang dapat membuat kinerja web menjadi lambat.