🍭 NodeJS #10: Mengirim HTML ke Browser – Response dan Status Code

Halo, calon developer web! 👋

Di tutorial sebelumnya kita sudah belajar membuat berbagai route di Express. Sekarang kita akan fokus pada satu hal penting: response (tanggapan) yang dikirim dari server ke browser. Kita akan pelajari cara mengirim teks, HTML, JSON, serta mengatur kode status (status code) seperti 200 (OK), 404 (Tidak Ditemukan), dan lainnya. Ini seperti memberi tahu browser: "Ini hasilnya!" sekaligus memberi tahu apakah permintaan berhasil atau tidak.

Bayangkan kamu memesan makanan di restoran. Pelayan (server) akan membawakan makanan (response) dan mungkin juga memberi tahu kalau makanan yang kamu pesan tidak ada (status code 404). Di web, status code memberi tahu browser apakah permintaan sukses, gagal, atau perlu tindakan lain. Yuk, kita pelajari! 🚀

📦 Bagian 1: Mengirim Teks dan HTML dengan res.send()

Fungsi res.send() adalah cara paling umum untuk mengirim response. Express secara otomatis akan mendeteksi tipe konten dan mengatur header yang sesuai.

🔹 Mengirim Teks Biasa

app.get('/teks', (req, res) => {
  res.send('Ini adalah teks biasa.');
});

Browser akan menampilkan teks tersebut. Express akan menambahkan header Content-Type: text/html karena kita mengirim string, tapi sebenarnya ini akan dianggap HTML sederhana. Untuk teks murni, sebaiknya gunakan res.type('text/plain') sebelum res.send().

🔹 Mengirim HTML

Kita bisa mengirim HTML langsung sebagai string:

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

Atau jika HTML-nya panjang, lebih baik simpan di file terpisah dan kirim dengan res.sendFile() (nanti kita bahas).

💡 Catatan: res.send() bisa dipanggil hanya sekali dalam satu route. Jika dipanggil dua kali, akan error.

🧾 Bagian 2: Mengirim JSON dengan res.json()

Saat membuat API (Web Service), kita sering mengirim data dalam format JSON. Express menyediakan res.json() yang otomatis mengubah object JavaScript menjadi JSON dan mengatur header Content-Type: application/json.

app.get('/data', (req, res) => {
  const data = {
    nama: 'Budi',
    umur: 12,
    hobi: ['membaca', 'coding', 'bermain bola']
  };
  res.json(data);
});

Sebenarnya res.send() juga bisa menerima object, dan hasilnya sama (akan dikirim sebagai JSON). Tapi lebih jelas menggunakan res.json().

🔢 Bagian 3: Mengatur Kode Status dengan res.status()

Kode status HTTP memberi tahu browser hasil dari permintaan. Beberapa kode yang sering digunakan:

Kode	Arti	Contoh Situasi
200	OK (Berhasil)	Halaman ditemukan, data berhasil diambil.
201	Created (Berhasil dibuat)	Setelah menambahkan data baru.
301	Moved Permanently (Pindah permanen)	Redirect ke URL baru.
400	Bad Request (Permintaan salah)	Input tidak valid.
404	Not Found (Tidak ditemukan)	Halaman atau data tidak ada.
500	Internal Server Error (Error di server)	Ada bug dalam kode.

Cara mengatur status di Express: gunakan res.status(kode) sebelum mengirim response. Fungsi res.status() mengembalikan objek response itu sendiri, jadi bisa dirantai (chaining).

app.get('/success', (req, res) => {
  res.status(200).send('Permintaan berhasil!');
});

app.get('/notfound', (req, res) => {
  res.status(404).send('<h1>404 - Halaman Tidak Ditemukan</h1>');
});

app.get('/servererror', (req, res) => {
  // Simulasi error
  res.status(500).json({ error: 'Terjadi kesalahan di server' });
});

💡 Jika tidak mengatur status, defaultnya adalah 200 OK.

↩️ Bagian 4: Mengalihkan Halaman dengan res.redirect()

Kadang kita ingin mengarahkan pengguna ke halaman lain secara otomatis. Misalnya setelah login berhasil, pengguna diarahkan ke dashboard. Gunakan res.redirect().

app.get('/lama', (req, res) => {
  res.redirect('/baru');
});

app.get('/baru', (req, res) => {
  res.send('Ini halaman baru.');
});

Secara default, redirect menggunakan status 302 (Found) yang bersifat sementara. Bisa juga diatur menjadi permanent (301):

res.redirect(301, '/baru');

📁 Bagian 5: Mengirim File dengan res.sendFile()

Jika kita ingin mengirim file HTML yang sudah kita buat terpisah, gunakan res.sendFile(). Kita perlu memberikan path absolut ke file tersebut. Gunakan modul path untuk membangun path.

const path = require('path');

app.get('/halaman', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

Asumsikan ada file index.html di folder public. __dirname adalah direktori tempat file JavaScript ini berada.

res.sendFile() otomatis mengatur Content-Type berdasarkan ekstensi file.

🎯 Contoh Lengkap: Aplikasi Mini dengan Berbagai Response

Mari kita buat file app.js yang menggabungkan semua konsep di atas:

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

// Route dengan teks biasa
app.get('/teks', (req, res) => {
  res.type('text/plain').send('Ini teks biasa');
});

// Route dengan HTML
app.get('/', (req, res) => {
  res.send('<h1>Beranda</h1><p>Selamat datang</p>');
});

// Route dengan JSON
app.get('/api/user', (req, res) => {
  const user = { id: 1, name: 'Budi', age: 12 };
  res.json(user);
});

// Route dengan status 404 custom
app.get('/404', (req, res) => {
  res.status(404).send('<h1>404 - Halaman Tidak Ada</h1>');
});

// Redirect
app.get('/redirect', (req, res) => {
  res.redirect('/');
});

// Kirim file HTML
app.get('/file', (req, res) => {
  res.sendFile(path.join(__dirname, 'contoh.html'));
});

// Middleware 404 untuk route yang tidak terdaftar
app.use((req, res) => {
  res.status(404).send('<h1>404 - Not Found</h1><p>Maaf, halaman yang kamu cari tidak ada.</p>');
});

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

Jangan lupa buat file contoh.html di folder yang sama dengan app.js:

<!DOCTYPE html>
<html>
<head><title>Contoh</title></head>
<body>
<h1>Ini file HTML</h1>
<p>Dikirim dengan res.sendFile()</p>
</body>
</html>

Coba jalankan dan akses semua route yang ada.

🧪 Latihan Mandiri

1. Buat route /greet yang menerima parameter query ?name=.... Jika name ada, kirim "Halo, [name]!" dengan status 200. Jika tidak ada, kirim "Nama tidak diberikan" dengan status 400.
2. Buat route /api/age dengan parameter query ?year=... (tahun lahir). Hitung umur (2026 - year) dan kirim JSON { age: ... }. Jika year tidak valid (bukan angka), kirim status 400.
3. Buat halaman form di /form (GET) yang mengirim data ke /submit (POST). Setelah data diterima, redirect ke halaman /sukses.
4. Tambahkan route /download yang mengirim file (misal gambar atau file teks) menggunakan res.download() (coba cari di dokumentasi Express).

📚 Rangkuman

Fungsi	Kegunaan	Contoh
res.send()	Mengirim response (string, object, buffer)	res.send('<h1>Halo</h1>')
res.json()	Mengirim JSON	res.json({ user: 'Budi' })
res.status()	Mengatur kode status HTTP	res.status(404).send('Not Found')
res.redirect()	Mengalihkan ke URL lain	res.redirect('/home')
res.sendFile()	Mengirim file statis	res.sendFile(path.join(__dirname, 'file.html'))
res.type()	Mengatur Content-Type	res.type('text/plain')

🏁 Penutup

Sekarang kamu sudah memahami berbagai cara mengirim response di Express, dari teks biasa hingga file, serta pentingnya kode status. Ini akan sangat berguna saat kita membuat API atau website dinamis.

Di tutorial selanjutnya (NodeJS #11) kita akan belajar tentang Middleware dan File Statis – cara menyimpan file CSS, gambar, dan JavaScript agar bisa diakses browser, serta memahami konsep middleware yang sangat penting di Express. Sampai jumpa!

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.