🍭 NodeJS #6: Membuat Server Web Sederhana dengan Node.js (tanpa Express)

Halo, calon developer web! 👋

Di tutorial sebelumnya kita sudah bisa menjalankan JavaScript di Node.js. Sekarang saatnya kita membuat sesuatu yang lebih keren: server web! Server web adalah program yang melayani permintaan dari browser. Setiap kali kamu buka website, browser kamu mengirim permintaan ke server, lalu server mengirim balik halaman webnya.

Kita akan membuat server web sederhana menggunakan modul http yang sudah tersedia di Node.js (tanpa framework tambahan seperti Express). Server kita hanya akan menampilkan teks "Halo Dunia" di browser. Tapi nanti kita akan coba juga membuat beberapa halaman sederhana. Yuk, kita mulai! 🚀

🧐 Apa Itu Server Web?

Coba bayangkan kamu di restoran. Kamu (browser) memesan makanan ke pelayan (server). Pelayan pergi ke dapur (aplikasi kita), mengambil makanan, lalu membawanya ke meja kamu. Nah, server web kerjanya mirip: menerima pesanan (request) dari browser, memprosesnya, dan mengirimkan hasilnya (response) berupa halaman web.

Di Node.js, kita bisa membuat server sendiri dengan mudah.

📁 Langkah 1: Siapkan File Baru

Buat folder proyek baru (misalnya server-sederhana) di komputer kamu. Di dalam folder itu, buat file bernama server.js. Kita akan menulis semua kode di file ini.

💡 Gunakan editor teks seperti Visual Studio Code, Notepad++, atau bahkan Notepad biasa.

📝 Langkah 2: Tulis Kode Server

Ketik kode berikut di server.js:

// Import modul http
const http = require('http');

// Buat server
const server = http.createServer((request, response) => {
  // Kirim response header (status 200 artinya OK, dan tipe konten HTML)
  response.writeHead(200, { 'Content-Type': 'text/html' });
  
  // Kirim response body (isi halaman)
  response.write('<h1>Halo Dunia!</h1>');
  response.write('<p>Ini server web pertamaku dengan Node.js</p>');
  
  // Akhiri response
  response.end();
});

// Tentukan port yang akan digunakan
const port = 3000;

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

Mari kita bahas baris per baris:

• const http = require('http'); – Mengimpor modul http bawaan Node.js. Modul ini menyediakan fungsi-fungsi untuk membuat server.
• http.createServer(...) – Membuat server baru. Fungsi di dalam kurung akan dipanggil setiap kali ada request masuk. Fungsi ini menerima dua parameter: request (permintaan dari browser) dan response (tanggapan yang akan kita kirim).
• response.writeHead(200, { 'Content-Type': 'text/html' }); – Mengirim header response. 200 adalah kode status OK (berhasil). Kita juga memberi tahu browser bahwa kita mengirim konten HTML.
• response.write(...) – Menulis isi response. Bisa dipanggil beberapa kali.
• response.end() – Menandakan bahwa response sudah selesai dan siap dikirim ke browser.
• server.listen(port, ...) – Menjalankan server di port tertentu (misal 3000). Fungsi kedua akan dipanggil saat server mulai berjalan.

▶️ Langkah 3: Jalankan Server

1. Buka terminal/command prompt.
2. Arahkan ke folder tempat server.js berada menggunakan perintah cd.
3. Jalankan perintah:

   node server.js

Jika berhasil, terminal akan menampilkan: Server berjalan di http://localhost:3000

⚠️ Penting: Jangan tutup terminal selama server ingin tetap berjalan. Terminal ini adalah "dapur" server kita.

🌐 Langkah 4: Buka di Browser

Buka browser favorit kamu (Chrome, Firefox, Edge, dll). Ketik alamat berikut di address bar:

http://localhost:3000

Maka kamu akan melihat halaman dengan teks besar Halo Dunia! dan paragraf kecil di bawahnya. Selamat! 🎉 Kamu baru saja membuat server web pertama dengan Node.js!

🛑 Langkah 5: Menghentikan Server

Untuk menghentikan server, kembali ke terminal dan tekan Ctrl+C (di Windows/Linux/Mac). Server akan berhenti, dan halaman di browser tidak bisa diakses lagi.

🧩 Menambahkan Routing Sederhana

Sekarang server kita hanya menampilkan halaman yang sama untuk semua alamat. Coba akses http://localhost:3000/profil atau http://localhost:3000/kontak, tetap muncul halaman yang sama. Agar lebih menarik, kita bisa membuat server memberikan respons berbeda tergantung URL yang diminta.

Ubah kode server.js menjadi seperti ini:

const http = require('http');

const server = http.createServer((req, res) => {
  // req.url berisi path URL, misal '/', '/profil', '/kontak'
  const url = req.url;

  res.writeHead(200, { 'Content-Type': 'text/html' });

  if (url === '/') {
    res.write('<h1>Halaman Beranda</h1>');
    res.write('<p>Selamat datang di website saya.</p>');
  } else if (url === '/profil') {
    res.write('<h1>Profil Saya</h1>');
    res.write('<p>Nama: Budi, umur: 12 tahun, hobi: coding.</p>');
  } else if (url === '/kontak') {
    res.write('<h1>Kontak</h1>');
    res.write('<p>Email: budi@example.com</p>');
  } else {
    res.write('<h1>404 Halaman Tidak Ditemukan</h1>');
    res.write('<p>Maaf, halaman yang kamu cari tidak ada.</p>');
  }

  res.end();
});

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

Simpan, jalankan ulang (hentikan dulu dengan Ctrl+C, lalu node server.js lagi). Sekarang coba akses:

• http://localhost:3000/ → halaman beranda
• http://localhost:3000/profil → halaman profil
• http://localhost:3000/kontak → halaman kontak
• http://localhost:3000/apaaja → halaman 404

Keren, kan? 😄

💡 Perhatikan bahwa setiap kali kita mengubah kode, kita harus menghentikan server dan menjalankannya lagi. Nanti kita akan belajar alat yang bisa otomatis restart (seperti nodemon).

📤 Mengirim File HTML dari File Eksternal

Menulis HTML di dalam kode JavaScript seperti di atas kurang praktis untuk halaman yang panjang. Sebaiknya kita simpan HTML di file terpisah, lalu kita baca dan kirimkan. Untuk itu, kita perlu modul fs (file system) untuk membaca file.

Buat file index.html di folder yang sama dengan server.js, isi dengan:

<!DOCTYPE html>
<html>
<head>
    <title>Halaman Saya</title>
</head>
<body>
    <h1>Selamat Datang</h1>
    <p>Ini halaman yang diambil dari file HTML terpisah.</p>
</body>
</html>

Kemudian ubah server.js menjadi:

const http = require('http');
const fs = require('fs'); // import modul file system

const server = http.createServer((req, res) => {
  const url = req.url;

  if (url === '/') {
    // Baca file index.html
    fs.readFile('index.html', (err, data) => {
      if (err) {
        // Kalau error (misal file tidak ada)
        res.writeHead(500, { 'Content-Type': 'text/plain' });
        res.end('Terjadi kesalahan server');
      } else {
        // Kirim file HTML
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(data);
      }
    });
  } else {
    res.writeHead(404, { 'Content-Type': 'text/html' });
    res.end('<h1>404 Halaman Tidak Ditemukan</h1>');
  }
});

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

Coba akses http://localhost:3000/, maka akan menampilkan HTML dari file index.html. Ini lebih rapi, kan?

🧪 Latihan Mandiri

1. Buat halaman profil.html dan kontak.html, lalu tambahkan routing di server untuk menampilkan file-file tersebut.
2. Tambahkan halaman error 404 yang lebih menarik (dengan CSS sederhana).
3. Coba gunakan port lain, misal 8080. Apa yang terjadi? (Jangan lupa akses dengan port yang sesuai).

🎉 Penutup

Sekarang kamu sudah bisa membuat server web sendiri dengan Node.js! Meskipun masih sangat sederhana, ini adalah fondasi penting. Server yang kita buat bisa menerima request dan mengirim response, baik berupa teks, HTML, maupun file HTML.

Di tutorial berikutnya (NodeJS #7) kita akan berkenalan dengan Express.js, sebuah framework yang membuat pembuatan web server menjadi jauh lebih mudah dan cepat. Tapi sebelum itu, pastikan kamu paham cara kerja server dasar ini, ya!

Selamat mencoba, dan sampai jumpa di seri selanjutnya! 👋😊

---

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