Cara Membuat Pagination di ExpressJS dan NodeJS

Apa itu pagination ?

Kenapa pagination harus diterapkan pada setiap aplikasi entah itu web/desktop/mobile?

Bagaimana cara membuat pagination?

Yah kebanyakan programmer pemula setelah selesai membuat aplikasi terutama menampilkan data dari database menggunakan API sering kali tidak menggunakan pagination, padahal pagination adalah hal yang sangat penting dikarenakan data-data pada database sangatlah banyak dimana jika di dalam sebuah database terdapat 1.000 data maka kita akan menampilkan sebanyak 1.000 baris data pada halaman. Hmm kebayangkan jika di suatu halaman terdapat 1000 baris halaman maka halaman tersebut akan sangatlah panjang. Hal itulah yang sangat fatal jika saat kita membuat sebuah program tanpa menggunakan pagination maka akan terjadi hal seperti tadi. Maka dari itu kita wajib memberi pagination atau batasan-batasan data agar tidak terjadi hal seperti barusan.

Maka dari itu kali ini BapakNgoding akan memberi kalian Cara Membuat Pagination di ExpressJS. Sebelum itu pastikan kalian sudah tau caranya menampilkan data API kedalam sebuah website ya jika belum kalian bisa melihat artikel saya sebelumnya yaitu Cara Membuat CRUD dengan NodeJS, Express JS, dan MariaDB

Nah berikut langkah-langkah membuat pagination pada ExpressJS.

Buat folder baru lalu install ExpressJS dan EJS dengan mengetikan perintah dibawah ini pada CMD/Terminal anda

npm install express
npm install body-parser
npm install ejs
npm install mariadb
Buat database baru beserta tablenya, pada contoh kali ini saya membuat database sekolah dan table master_guru.

Struktur database dengan menggunakan Navicat

master_guru

Isi table master_guru

Sekarang buat file baru bernama db_config.js dan ketikan kode berikut

const mariadb = require('mariadb')
const conn = mariadb.createConnection({
host: "localhost",
user: "root",
database: "sekolah",
password: "password",
port: 3307,
});

const query = function (params) {
return new Promise(function (resolve, reject) {
conn.then(async (conn) => {
try {
const result = await conn.query(params)
resolve({
success: true,
data: result
})
} catch (e) {
console.log(e)
reject({
success: false
})
}
})
})
}

module.exports = { query }
Note : Ganti teks yang bewarna merah dengan konfigurasi database MariaDB anda.

Sekarang buat file app.js dan ketikan kode berikut :

const express = require('express')
const app = express()
var bodyParser = require('body-parser');
const db = require('./db_config')
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }))
app.set('view engine', 'ejs')

app.route('/')
.get(function (req, res) {
res.send("Server telah berjalan")
})

app.listen(port, () => console.log("Server run at 3000"))
Sekarang buka localhost:3000 dan kalian akan melihat tulisan "Server telah berjalan" yang artinya sekarang kita tinggal menambah route dan view pada server tersebut
Sekarang buat folder baru bernama views dan buat file baru bernama home.ejs di dalam folder views tersebut

Struktur file
Ketikan kode berikut ke dalam file home.ejs

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div style="padding: 20">
<h1>Data Guru</h1>
<table class="table" id="table_guru">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nama</th>
<th scope="col">Mapel</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div style="display: table;margin: 0 auto">
<nav aria-label="Page navigation example">
<ul class="pagination" id='pagination_ul'>
</ul>
</nav>
</div>
</div>

<script>

function parseURLParams(url) {
var queryStart = url.indexOf("?") + 1,
queryEnd = url.indexOf("#") + 1 || url.length + 1,
query = url.slice(queryStart, queryEnd - 1),
pairs = query.replace(/\+/g, " ").split("&"),
parms = {}, i, n, v, nv;

if (query === url || query === "") return;

for (i = 0; i < pairs.length; i++) {
nv = pairs[i].split("=", 2);
n = decodeURIComponent(nv[0]);
v = decodeURIComponent(nv[1]);

if (!parms.hasOwnProperty(n)) parms[n] = [];
parms[n].push(nv.length === 2 ? v : null);
}
return parms;
}

$(document).ready(function () {
const url = "http://localhost:3000/get_data_guru"
const per_page = 10 //setting agar setiap halaman berisi 10 data
const pagination_ul = document.getElementById("pagination_ul")
var url_now = parseURLParams(window.location.search)
var start = (url_now == null) ? 0 : (url_now.page * per_page) - per_page
console.log(`start ${start}`)
// var index_page = start >= 1 ? (start * per_page) - per_page : 0;
var index_page = 0 + start;
$.ajax({
url: url,
method: "GET",
resultType: "JSON",
data: {
start: start,
page: per_page,
},
success: function (results) {
console.log(results)
const table = document.getElementById("table_guru")
const result_data = results.result.data
const result_rows = results.page_rows / per_page

for (var i = 0; i < result_data.length; i++) {
index_page += 1;
var data = result_data[i]
var row = table.insertRow(i + 1)
var no = row.insertCell(0)
var nama = row.insertCell(1)
var mapel = row.insertCell(2)
var action = row.insertCell(3)
no.innerHTML = index_page
nama.innerHTML = data.Name
mapel.innerHTML = data.Mapel
const params_get = `id=${data.GuruID}&name=${data.Name}&mapel=${data.Mapel}`
}
//perulangan untuk membuat tombol halaman sebanyak jumlah pembagian jumlah data di database dengan 10
for (var p = 0; p < result_rows; p++) {
var li = document.createElement("li")
li.innerHTML = `<li class="page-item"><a class="page-link" href="/?page=${p + 1}">${p + 1}</a></li>`
pagination_ul.appendChild(li)
}
}
})
})
</script>
Note : Disana saya menggunakan DOM untuk memasukan data dari API ke dalam table di html, jika kalian belum tau caranya kalian bisa melihat artikel ini Cara Memasukan Data API ke dalam Table di EJS Template
Disana saya membatasi page hanya dengan 10 data per halaman, jika kalian ingin lebih kalian bisa mengganti teks yang bewarna merah lalu saya membuat tombol pagination dengan mengambil data dari result_rows dimana result_rows sendiri adalah hasil bagi dari jumlah semua data pada table di database kita dengan jumlah perhalaman, sebagai contoh saya punya 20 data lalu dibagi 10 maka hasilnya adalah 2 dan DOM akan membuat tombol sebanyak 2 kali

Sekarang ganti file app.js menjadi seperti kode berikut:

const express = require('express')
const app = express()
var bodyParser = require('body-parser');
const db = require('./db_config')
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }))
app.set('view engine', 'ejs')

app.route('/')
.get(function (req, res) {
res.render("../views/home.ejs")
})

app.route('/get_data_guru')
.get(async function (req, res) {
const { start, page } = req.query
const result = await db.query(`SELECT * FROM master_guru limit ${start},${page}`)
const page_rows = await db.query(`SELECT * FROM master_guru`)
res.send(
{
result: result,
page_rows: page_rows.data.length
}
)
})

app.listen(port, () => console.log("Server run at 3000"))
Note : Disana saya membatasi data dari API dengan query SELECT * FROM master_guru limit ${start},${page} dimana data hanya ditampilkan mulai dari variable start dan dibatasi dengan variable page, dan variable start sendiri kita kirimkan dengan method GET dan variable page_rows berisi semua data dari table yang kemudian diambil jumlahnya dengan page_rows.data.length lalu dikirimkan dengan res.send() dan result sendiri adalah data dari hasil query

Sekarang jalankan localhost:3000 dan disana kalian akan melihat seperti gambar dibawah dan klik tombol pagination maka data di website kalian akan berubah sesuai page

Gambar localhost:3000 pada halaman 1

Lalu pada halaman 2

Gambar localhost:3000 pada halaman 2

Taraa.... pagination telah jadi. Sekarang kalian hanya tinggal menambahkan data sebanyak mungkin tanpa takut halaman pada website kalian akan menampilkan banyak data hingga ratusan bahkan ribuan dalam satu halaman

Berikut semua file dalam membuat pagination di EJS

app.js

const express = require('express')

const app = express()

var bodyParser = require('body-parser');

const db = require('./db_config')

const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }))

app.set('view engine', 'ejs')

app.route('/')

.get(function (req, res) {

res.render("../views/home.ejs")

})

app.route('/get_data_guru')

.get(async function (req, res) {

const { start, page } = req.query

console.log(start,page)

const result = await db.query(`SELECT * FROM master_guru limit ${start},${page}`)

const page_rows = await db.query(`SELECT * FROM master_guru`)

res.send(

{

result: result,

page_rows: page_rows.data.length

}

)

})

app.listen(port, () => console.log("Server run at 3000"))

home.ejs

<thead>

<tr>

<th scope="col">Mapel</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</ul>

</nav>

</div>

function parseURLParams(url) {

var queryStart = url.indexOf("?") + 1,

queryEnd = url.indexOf("#") + 1 || url.length + 1,

query = url.slice(queryStart, queryEnd - 1),

pairs = query.replace(/\+/g, " ").split("&"),

parms = {}, i, n, v, nv;

if (query === url || query === "") return;

for (i = 0; i < pairs.length; i++) {

nv = pairs[i].split("=", 2);

n = decodeURIComponent(nv[0]);

v = decodeURIComponent(nv[1]);

if (!parms.hasOwnProperty(n)) parms[n] = [];

parms[n].push(nv.length === 2 ? v : null);

}

return parms;

}

$(document).ready(function () {

const url = "http://localhost:3000/get_data_guru"

const per_page = 10 //setting agar setiap halaman berisi 10 data

const pagination_ul = document.getElementById("pagination_ul")

var url_now = parseURLParams(window.location.search)

var start = (url_now == null) ? 0 : (url_now.page * per_page) - per_page

console.log(`start ${start}`)

// var index_page = start >= 1 ? (start * per_page) - per_page : 0;

var index_page = 0 + start;

$.ajax({

url: url,

method: "GET",

resultType: "JSON",

data: {

start: start,

page: per_page,

success: function (results) {

console.log(results)

const table = document.getElementById("table_guru")

const result_data = results.result.data

const result_rows = results.page_rows / per_page

for (var i = 0; i < result_data.length; i++) {

index_page += 1;

var data = result_data[i]

var row = table.insertRow(i + 1)

var no = row.insertCell(0)

var nama = row.insertCell(1)

var mapel = row.insertCell(2)

var action = row.insertCell(3)

no.innerHTML = index_page

nama.innerHTML = data.Name

mapel.innerHTML = data.Mapel

const params_get = `id=${data.GuruID}&name=${data.Name}&mapel=${data.Mapel}`

}

//perulangan untuk membuat tombol halaman sebanyak jumlah pembagian jumlah data di database dengan 10

for (var p = 0; p < result_rows; p++) {

var li = document.createElement("li")

li.innerHTML = `<li class="page-item"><a class="page-link" href="/?page=${p + 1}">${p + 1}</a></li>`

pagination_ul.appendChild(li)

}

})

</script>

db_config.js

const mariadb = require('mariadb')

const conn = mariadb.createConnection({

host: "localhost",

user: "root",

database: "sekolah",

password: "password",

port: 3307,

});

const query = function (params) {

return new Promise(function (resolve, reject) {

conn.then(async (conn) => {

try {

const result = await conn.query(params)

resolve({

success: true,

data: result

})

} catch (e) {

console.log(e)

reject({

success: false

})

}

})

}

module.exports = { query }

Nah itulah tadi Cara Membuat Pagination di ExpressJS, dari BapakNgoding.

Baca Juga : Cara Membuat Pengirim Email Otomatis Dengan ExpressJS, Emailjs, dan NodeJS

Sekian dari saya dan mohon maaf bila ada kesalahan kata, dan jangan lupa share artikel ini untuk tetap mendukung perkembangan artikel kami.

BapakNgoding

Tuesday, December 10, 2019

Cara Membuat Pagination di ExpressJS dan NodeJS

Related Posts