MODUL PERKULIAHAN
Mata Kuliah : Pengembangan Aplikasi Web
Materi : Pengelolaan Routing dan Middleware di [Link]
Pertemuan : 03
Fakultas : Teknik
Program Studi : Teknologi Informasi
Kode MK : AntaraTI501P
Disusun Oleh : [Link], S.T., [Link] dan Rama Soni Ravictor
DAFTAR ISI
1. PEMBAHASAN
2. PREREQUISITES
3. PRAKTIKUM
– A. Tujuan Praktikum
– B. Materi
– C. Metode Praktikum
– D. Langkah-langkah Praktikum
4. TUGAS
PEMBAHASAN
1. Pendalaman Routing di [Link]:
– Basic routing
– Route parameters
– Route handlers
– Response methods
2. Advanced Routing:
– Router-level middleware
– [Link]
– Chaining route handlers
3. Middleware di [Link]:
– Konsep dan fungsi middleware
– Application-level middleware
– Router-level middleware
– Error-handling middleware
4. Built-in Middleware:
– [Link]
– [Link]
– [Link]
5. Custom Middleware:
– Membuat middleware sendiri
– Menggunakan middleware di route spesifik
6. Third-party Middleware:
– cors
– helmet
– morgan
7. Error Handling:
– Menangani error di middleware dan route handlers
– Custom error handling middleware
8. Best Practices:
– Strukturisasi aplikasi [Link]
– Pemisahan concerns (routing, middleware, controllers)
PREREQUISITES
Beberapa perangkat lunak yang digunakan untuk menunjang proses pembelajaran:
1. [Link] (versi LTS terbaru)
2. NPM (Node Package Manager)
3. Text editor (Visual Studio Code, Sublime Text, atau Atom)
4. Postman atau tools API testing lainnya
PRAKTIKUM
A. Tujuan Praktikum
Praktikum ini bertujuan untuk memperdalam pemahaman mahasiswa tentang routing dan
middleware di [Link]. Mahasiswa akan mempelajari cara mengelola rute yang
kompleks, membuat dan menggunakan middleware, serta menerapkan best practices
dalam pengembangan aplikasi [Link].
B. Materi
1. Advanced routing di [Link]
2. Pembuatan dan penggunaan middleware
3. Penanganan error dengan middleware
4. Penggunaan third-party middleware
5. Strukturisasi aplikasi [Link]
C. Metode Praktikum
1. Penjelasan materi oleh instruktur
2. Demonstrasi langsung penggunaan routing dan middleware
3. Praktik mandiri oleh mahasiswa
4. Diskusi dan tanya jawab
D. Langkah-langkah Praktikum
1. Inisialisasi & Struktur Folder
Lanjutkan project node server sebelumnya. Buat struktur folder berikut di dalam
project Anda:
Desain Endpoint API
Attendance:
POST /api/presensi/check-in
POST /api/presensi/check-out
Report (Khusus Admin):
GET /api/reports/daily
2. Buat penyimpanan data, isi dengan kode berikut pada file data/[Link]:
const presensiRecords = [
// Kita bisa mulai dengan data contoh
{
userId: 456,
nama: 'User Karyawan',
checkIn: new Date('2025-10-14T08:05:00'),
checkOut: new Date('2025-10-14T17:00:00')
}
];
[Link] = presensiRecords;
3. Implementasi Middleware
– kita akan buat middleware untuk simulasi izin (permission) dan untuk
menambahkan data karyawan ke request:
[Link] = (req, res, next) => {
[Link]('Middleware: Menambahkan data user
dummy...');
[Link] = {
id: 123,
nama: User Karyawan',
role: 'karyawan'
};
next();
};
[Link] = (req, res, next) => {
if ([Link] && [Link] === 'admin') {
[Link]('Middleware: Izin admin diberikan.');
next();
} else {
[Link]('Middleware: Gagal! Pengguna bukan
admin.');
return [Link](403).json({ message: 'Akses ditolak:
Hanya untuk admin'});
}
};
4. Gunakan library seperti date-fns-tz, untuk membuat manipulasi zona waktu, kita
akan ubah menjadi zona waktu Jakarta.
Buka terminal di folder proyek Anda dan instal library yang dibutuhkan:
npm install date-fns date-fns-tz
5. Implementasi Controllers
– controllers/[Link]:
const presensiRecords = require("../data/presensiData");
const { format } = require("date-fns-tz");
const timeZone = "Asia/Jakarta";
[Link] = (req, res) => {
const { id: userId, nama: userName } = [Link];
const waktuSekarang = new Date();
const existingRecord = [Link](
(record) => [Link] === userId && [Link] === null
);
if (existingRecord) {
return res
.status(400)
.json({ message: "Anda sudah melakukan check-in hari ini." });
}
const newRecord = {
userId,
nama: userName,
checkIn: waktuSekarang,
checkOut: null,
};
[Link](newRecord);
const formattedData = {
...newRecord,
checkIn: format([Link], "yyyy-MM-dd HH:mm:ssXXX", { timeZone }),
};
[Link](
`DATA TERUPDATE: Karyawan ${userName} (ID: ${userId}) melakukan check-in.`
);
[Link](201).json({
message: `Halo ${userName}, check-in Anda berhasil pada pukul ${format(
waktuSekarang,
"HH:mm:ss",
{ timeZone }
)} WIB`,
data: formattedData,
});
};
[Link] = (req, res) => {
const { id: userId, nama: userName } = [Link];
const waktuSekarang = new Date();
const recordToUpdate = [Link](
(record) => [Link] === userId && [Link] === null
);
if (!recordToUpdate) {
return [Link](404).json({
message: "Tidak ditemukan catatan check-in yang aktif untuk Anda.",
});
}
[Link] = waktuSekarang;
const formattedData = {
...recordToUpdate,
checkIn: format([Link], "yyyy-MM-dd HH:mm:ssXXX", {
timeZone,
}),
checkOut: format([Link], "yyyy-MM-dd HH:mm:ssXXX", {
timeZone,
}),
};
[Link](
`DATA TERUPDATE: Karyawan ${userName} (ID: ${userId}) melakukan check-out.`
);
[Link]({
message: `Selamat jalan ${userName}, check-out Anda berhasil pada pukul ${format(
waktuSekarang,
"HH:mm:ss",
{ timeZone }
)} WIB`,
data: formattedData,
});
};
– controllers/[Link]:
const presensiRecords = require("../data/presensiData");
[Link] = (req, res) => {
[Link]("Controller: Mengambil data laporan harian dari array...");
[Link]({
reportDate: new Date().toLocaleDateString(),
data: presensiRecords,
});
};
6. Menggabungkan Semuanya di Router
– routes/[Link]:
const express = require('express');
const router = [Link]();
const presensiController =
require('../controllers/presensiController');
const { addUserData } =
require('../middleware/permissionMiddleware');
[Link](addUserData);
[Link]('/check-in', [Link]);
[Link]('/check-out', [Link]);
[Link] = router;
– routes/[Link]:
const express = require('express');
const router = [Link]();
const reportController =
require('../controllers/reportController');
const { addUserData, isAdmin } =
require('../middleware/permissionMiddleware');
[Link]('/daily', [addUserData, isAdmin],
[Link]);
[Link] = router;
7. Konfigurasi Akhir di [Link]
– Install necessary packages untuk Third-party middleware:
npm install cors helmet morgan
– Modifikasi [Link]:
const express = require("express");
const cors = require("cors");
const app = express();
const PORT = 3001;
const morgan = require("morgan");
// Impor router
const presensiRoutes = require("./routes/presensi");
const reportRoutes = require("./routes/reports");
// Middleware
[Link](cors());
[Link]([Link]());
[Link](morgan("dev"));
[Link]((req, res, next) => {
[Link](`${new Date().toISOString()} - ${[Link]} ${[Link]}`);
next();
});
[Link]("/", (req, res) => {
[Link]("Home Page for API");
});
const ruteBuku = require("./routes/books");
[Link]("/api/books", ruteBuku);
[Link]("/api/presensi", presensiRoutes);
[Link]("/api/reports", reportRoutes);
[Link](PORT, () => {
[Link](`Express server running at [Link]
});