🍭 NodeJS #11: Middleware dan File Statis – Menyimpan Gambar, CSS, dan JavaScript

Halo, calon developer web! 👋

Di tutorial sebelumnya kita sudah belajar tentang response dan status code. Sekarang kita akan membahas konsep penting lainnya di Express: middleware dan file statis. Apa itu middleware? Bayangkan seperti penjaga keamanan di mal yang memeriksa setiap pengunjung sebelum masuk ke toko. Di Express, middleware adalah fungsi-fungsi yang berjalan di antara request dan response. Mereka bisa memodifikasi request, memeriksa sesuatu, atau menghentikan proses.

Sedangkan file statis adalah file-file seperti gambar, CSS, JavaScript yang tidak berubah dan perlu dikirim ke browser. Express menyediakan middleware bawaan express.static untuk melayani file-file ini. Yuk, kita pelajari! 🚀

🧩 Apa Itu Middleware?

Middleware adalah fungsi yang memiliki akses ke objek req (request), res (response), dan fungsi next. Tugas middleware bisa macam-macam:

• Mencatat log (misalnya mencatat setiap request yang masuk).
• Memeriksa apakah user sudah login.
• Memodifikasi request (misalnya menambahkan properti baru).
• Menghentikan request jika tidak memenuhi syarat.
• Dan masih banyak lagi.

Middleware bisa dipasang secara global (untuk semua route) atau hanya untuk route tertentu. Urutan middleware sangat penting karena mereka dijalankan sesuai urutan pemasangan.

🛠️ Membuat Middleware Sederhana

Mari buat middleware yang mencatat waktu setiap ada request. Buat file app.js dan tulis:

const express = require('express');
const app = express();
const port = 3000;

// Middleware 1: Logger (mencatat waktu dan method)
app.use((req, res, next) => {
  console.log(`[${new Date().toLocaleString()}] ${req.method} ${req.url}`);
  next(); // Lanjut ke middleware berikutnya atau route handler
});

// Middleware 2: Menambahkan properti ke req
app.use((req, res, next) => {
  req.waktu = Date.now();
  next();
});

// Route yang menggunakan req.waktu
app.get('/', (req, res) => {
  res.send(`<h1>Halo</h1><p>Waktu akses: ${req.waktu}</p>`);
});

app.listen(port, () => {
  console.log(`Server berjalan di http://localhost:${port}`);
});

Penjelasan:

• app.use() digunakan untuk mendaftarkan middleware. Tanpa path, middleware akan dijalankan untuk setiap request.
• Setiap middleware menerima req, res, dan next. next() harus dipanggil agar request dilanjutkan ke middleware/route berikutnya. Jika tidak dipanggil, request akan menggantung.
• Middleware bisa memodifikasi req atau res.

Coba jalankan dan akses http://localhost:3000/. Lihat di terminal, akan muncul log setiap kali halaman diakses.

⚠️ Jangan lupa panggil next() jika ingin request dilanjutkan. Kalau lupa, browser akan loading terus tanpa respons.

📌 Middleware untuk Route Tertentu

Kita juga bisa memasang middleware hanya untuk route tertentu. Misalnya kita ingin memeriksa apakah ada query parameter token sebelum mengakses route rahasia.

// Middleware untuk cek token
function cekToken(req, res, next) {
  if (req.query.token === 'rahasia') {
    next(); // lanjut
  } else {
    res.status(401).send('Token salah!');
  }
}

// Route yang menggunakan middleware cekToken
app.get('/rahasia', cekToken, (req, res) => {
  res.send('Selamat datang di area rahasia!');
});

Coba akses /rahasia?token=rahasia (berhasil) dan /rahasia (gagal).

📁 File Statis dengan express.static

File statis adalah file seperti gambar, file CSS, file JavaScript sisi klien yang tidak berubah-ubah. Biasanya kita simpan di folder public atau static. Untuk melayani file-file ini, Express menyediakan middleware bawaan express.static.

🖼️ Langkah-langkah Menyajikan File Statis

1. Buat folder bernama public di dalam proyek.
2. Di dalam folder public, buat subfolder sesuai kebutuhan, misal css, images, js.
3. Letakkan file-file di sana.
4. Di app.js, gunakan app.use(express.static('public')).

Contoh struktur folder:

project/
├── node_modules/
├── public/
│   ├── css/
│   │   └── style.css
│   ├── images/
│   │   └── kucing.jpg
│   └── js/
│       └── script.js
├── app.js
└── package.json

Di app.js:

const express = require('express');
const app = express();
const port = 3000;

// Middleware untuk file statis
app.use(express.static('public'));

// Route biasa
app.get('/', (req, res) => {
  res.send('<h1>Halaman Utama</h1><link rel="stylesheet" href="/css/style.css">');
});

app.listen(port, () => {
  console.log(`Server berjalan di http://localhost:3000`);
});

Sekarang file style.css bisa diakses melalui http://localhost:3000/css/style.css. Browser akan mengambil file tersebut saat halaman HTML memuatnya.

🎨 Contoh File CSS (public/css/style.css)

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}
h1 {
  color: blue;
}

🖼️ Menampilkan Gambar

Di dalam HTML, gunakan <img src="/images/kucing.jpg">. Express.static akan melayani file tersebut.

📜 JavaScript Sisi Klien

Buat file public/js/script.js:

console.log('Halo dari browser!');

Panggil di HTML: <script src="/js/script.js"></script>.

💡 Tips: Dengan express.static, kamu tidak perlu membuat route untuk setiap file. Cukup letakkan di folder public, dan file akan otomatis tersedia.

🔄 Urutan Middleware Itu Penting

Express menjalankan middleware sesuai urutan pemasangan. Jadi jika kita ingin middleware file statis berjalan lebih dulu, letakkan di atas. Jika kita ingin membuat middleware 404, letakkan di paling akhir.

Contoh urutan yang baik:

// 1. Middleware global (logger, dll)
app.use(logger);

// 2. Middleware untuk file statis
app.use(express.static('public'));

// 3. Route khusus
app.get('/', ...);

// 4. Middleware 404 (harus di akhir)
app.use((req, res) => {
  res.status(404).send('Halaman tidak ditemukan');
});

🧪 Latihan Mandiri

1. Buat folder public dengan file style.css yang mengubah warna latar halaman menjadi kuning.
2. Buat file gambar (misal logo) dan tampilkan di halaman utama.
3. Buat middleware yang mencatat IP pengunjung (req.ip) dan tampilkan di konsol.
4. Buat route /admin dengan middleware yang memeriksa query ?password=admin. Jika benar, tampilkan "Selamat datang admin", jika salah, kirim status 403 (Forbidden).

📚 Rangkuman

Konsep	Penjelasan
Middleware	Fungsi yang berjalan antara request dan response. Bisa memodifikasi req/res atau menghentikan proses. Didaftarkan dengan app.use() atau sebagai argumen route.
next()	Fungsi untuk melanjutkan ke middleware/route berikutnya. Harus dipanggil agar request tidak menggantung.
express.static()	Middleware bawaan untuk melayani file statis (gambar, CSS, JS). Contoh: app.use(express.static('public')).
Folder public	Tempat menyimpan file statis. File di dalamnya bisa diakses langsung via URL.

🏁 Penutup

Sekarang kamu sudah paham konsep middleware dan cara menyajikan file statis di Express. Ini akan sangat berguna untuk membuat website yang lengkap dengan CSS dan gambar. Di tutorial selanjutnya (NodeJS #12) kita akan belajar tentang templating dengan EJS – cara menyisipkan data ke dalam HTML dengan lebih mudah.

Jangan lupa untuk mencoba latihan dan bereksperimen sendiri. Kalau ada pertanyaan, tulis di komentar. Selamat coding! 💻😊

---

Ditulis dengan ❤️ untuk para pemula yang ingin menjadi programmer handal.