🍭 NodeJS #9: Routing di Express – Membuat Halaman Berbeda

Halo, calon developer web! 👋

Di tutorial sebelumnya (NodeJS #8) kita sudah membuat server Express pertama dengan satu halaman utama. Sekarang saatnya kita belajar tentang routing – yaitu cara membuat berbagai halaman atau rute (route) di aplikasi web kita. Dengan routing, kita bisa menentukan konten apa yang tampil saat pengguna mengunjungi alamat tertentu, misalnya /, /tentang, /kontak, atau bahkan alamat dinamis seperti /user/budi.

Bayangkan sebuah restoran. Routing itu seperti daftar menu. Ketika pelanggan memesan "Nasi Goreng" (route tertentu), dapur akan menyiapkan Nasi Goreng. Kalau pesan "Mie Ayam", dapur akan menyiapkan Mie Ayam. Di Express, kita bisa mendefinisikan "menu" tersebut dengan mudah. Yuk, kita pelajari! 🚀

🧭 Apa Itu Routing?

Routing adalah mekanisme untuk menentukan bagaimana aplikasi merespons permintaan (request) ke suatu endpoint tertentu. Endpoint terdiri dari:

• Method HTTP (GET, POST, PUT, DELETE, dll.)
• Path URL (misal /, /tentang, /user/123)

Dalam Express, kita menulis route dengan format:

app.METHOD(PATH, HANDLER)

Contoh: app.get('/', (req, res) => { ... }) – artinya ketika ada request GET ke path /, jalankan fungsi handler.

🛤️ Membuat Beberapa Route Sederhana

Mari kita buat server dengan beberapa halaman. Buat file app.js dan tulis kode berikut:

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

// Halaman utama
app.get('/', (req, res) => {
  res.send('<h1>🏠 Halaman Beranda</h1><p>Selamat datang di website saya.</p>');
});

// Halaman tentang
app.get('/tentang', (req, res) => {
  res.send('<h1>📖 Tentang Saya</h1><p>Saya sedang belajar Express.js.</p>');
});

// Halaman kontak
app.get('/kontak', (req, res) => {
  res.send('<h1>📞 Kontak</h1><p>Email: contoh@email.com</p>');
});

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

Jalankan dengan node app.js dan buka browser:

• http://localhost:3000/ → halaman beranda
• http://localhost:3000/tentang → halaman tentang
• http://localhost:3000/kontak → halaman kontak

Mudah, kan? Setiap rute kita tangani dengan fungsi yang berbeda.

💡 Catatan: Urutan penulisan route itu penting. Express akan mencocokkan dari atas ke bawah. Jadi letakkan route yang lebih spesifik di atas route yang umum.

🎯 Route dengan Parameter Dinamis

Kadang kita ingin halaman yang bisa berubah tergantung data di URL. Misalnya halaman profil setiap user: /user/budi, /user/ani. Kita tidak mungkin membuat route terpisah untuk setiap nama. Di sinilah parameter route berguna.

Parameter route ditulis dengan tanda titik dua (:) diikuti nama parameter. Contoh:

// Route dengan parameter :nama
app.get('/user/:nama', (req, res) => {
  const nama = req.params.nama;
  res.send(`<h1>Halo, ${nama}!</h1><p>Ini halaman profil kamu.</p>`);
});

Coba akses:

• /user/budi → "Halo, budi!"
• /user/ani → "Halo, ani!"

Parameter bisa lebih dari satu, misal /product/:kategori/:id.

app.get('/product/:kategori/:id', (req, res) => {
  const { kategori, id } = req.params;
  res.send(`Produk kategori ${kategori} dengan ID ${id}`);
});

Akses /product/elektronik/123 akan menampilkan "Produk kategori elektronik dengan ID 123".

🔍 Query String (Parameter di URL setelah ?)

Selain parameter di path, kita juga bisa menerima data dari query string – bagian URL setelah tanda tanya (?). Misal: /cari?q=nodejs&page=2. Data query tersedia di req.query.

app.get('/cari', (req, res) => {
  const query = req.query.q || '(kosong)';
  const page = req.query.page || 1;
  res.send(`Kamu mencari: ${query}, halaman ${page}`);
});

Coba akses: /cari?q=express&page=3 → "Kamu mencari: express, halaman 3".

💡 Tips: req.query selalu berupa objek. Nilai yang tidak dikirim akan undefined, jadi beri nilai default seperti di atas.

📬 Menangani Method POST (Menerima Data dari Form)

Selama ini kita hanya menggunakan method GET (mengambil data). Untuk mengirim data (misal dari form login), kita gunakan method POST. Tapi Express perlu bantuan untuk membaca data yang dikirim. Kita perlu middleware khusus, yaitu express.urlencoded() untuk form biasa, dan express.json() untuk JSON.

Mari buat contoh sederhana: halaman form dan halaman penerima POST.

// Middleware untuk membaca data dari form
app.use(express.urlencoded({ extended: true }));

// Tampilkan form
app.get('/form', (req, res) => {
  res.send(`
    <h1>Formulir Pendaftaran</h1>
    <form method="POST" action="/proses">
      <input type="text" name="nama" placeholder="Nama kamu" /><br>
      <input type="number" name="umur" placeholder="Umur" /><br>
      <button type="submit">Kirim</button>
    </form>
  `);
});

// Terima data dari form
app.post('/proses', (req, res) => {
  const { nama, umur } = req.body;
  res.send(`<h1>Halo, ${nama}!</h1><p>Umur kamu ${umur} tahun.</p>`);
});

Jangan lupa tambahkan middleware di atas route. Sekarang coba akses /form, isi form, dan lihat hasilnya.

⚠️ Penting: Tanpa middleware express.urlencoded(), req.body akan undefined.

🗺️ Route untuk Semua Method (app.all)

Kadang kita ingin menangani semua method HTTP untuk suatu path. Bisa gunakan app.all(). Ini berguna misal untuk halaman 404 atau autentikasi.

app.all('/rahasia', (req, res) => {
  res.send('Area rahasia, apapun method-nya tetap tampil');
});

🚫 Menangani Halaman Tidak Ditemukan (404)

Jika pengguna mengakses route yang tidak kita definisikan, Express akan merespon dengan "Cannot GET /path". Tapi kita bisa membuat halaman 404 kustom. Caranya, letakkan route khusus di bagian paling akhir setelah semua route lainnya.

// Taruh di akhir, setelah semua route
app.use((req, res) => {
  res.status(404).send('<h1>404 - Halaman Tidak Ditemukan</h1><p>Maaf, halaman yang kamu cari tidak ada.</p>');
});

app.use() adalah cara untuk menambahkan middleware. Di sini kita menggunakannya untuk menangkap semua request yang tidak tertangani route sebelumnya. res.status(404) mengatur kode status HTTP menjadi 404.

Coba akses route yang tidak ada, misal /abc, maka akan tampil halaman 404 kustom kita.

🧪 Latihan Mandiri

1. Buat route /sapa dengan parameter query ?nama=... yang mengucapkan "Halo, [nama]!".
2. Buat route /blog/:id yang menampilkan "Anda membaca blog dengan ID: [id]".
3. Buat halaman form /tambah dengan input dua angka, lalu route POST /hitung yang menerima kedua angka dan menampilkan hasil penjumlahannya.
4. Tambahkan halaman 404 yang lebih menarik dengan gambar atau CSS sederhana.

📚 Rangkuman

Konsep	Penjelasan	Contoh Kode
Route GET	Menangani permintaan GET	app.get('/about', handler)
Route POST	Menangani permintaan POST	app.post('/submit', handler)
Parameter dinamis	Mengambil nilai dari URL path	/user/:id → req.params.id
Query string	Mengambil data dari URL setelah ?	/cari?q=node → req.query.q
Body parser	Membaca data dari form/JSON	express.urlencoded(), express.json()
404 handler	Menangani route tidak ditemukan	app.use((req,res) => { ... }) di akhir

🏁 Penutup

Sekarang kamu sudah menguasai dasar-dasar routing di Express! Mulai dari route sederhana, parameter dinamis, query string, method POST, hingga custom 404. Ini adalah fondasi penting untuk membangun aplikasi web yang kompleks.

Di tutorial selanjutnya (NodeJS #10) kita akan belajar tentang mengirim file statis seperti gambar, CSS, dan JavaScript ke browser, serta mengenal middleware lebih dalam. Sampai jumpa!

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

---

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