Menghubungkan HTML dengan Node.js untuk Membangun Aplikasi Web

Banyak pemula sudah bisa membuat halaman HTML, tetapi bingung ketika harus menghubungkannya dengan Node.js. Pertanyaan yang paling sering muncul adalah bagaimana caranya agar file HTML bisa tampil dari server, bagaimana mengirim data formulir ke backend, dan bagaimana menampilkan data dari database ke halaman web. Artikel ini menjawab kebutuhan tersebut secara langsung, mulai dari konsep dasar sampai contoh kode yang bisa dijalankan.

Inti dari menghubungkan HTML dengan Node.js adalah membagi peran dengan jelas. HTML bertugas menampilkan antarmuka di browser, sedangkan Node.js berjalan di server untuk mengolah permintaan, membaca data, dan mengirimkan respons. Keduanya berkomunikasi melalui protokol HTTP. Dengan pemahaman ini, Anda tidak perlu bingung lagi soal siapa yang menangani apa.

Mengapa HTML dan Node.js Sering Dipasangkan

HTML adalah bahasa markup yang membentuk struktur halaman, sementara Node.js adalah runtime JavaScript yang memungkinkan JavaScript berjalan di luar browser. Kombinasi keduanya populer karena satu bahasa, yaitu JavaScript, dapat dipakai di sisi klien maupun server. Tim pengembang tidak perlu berpindah bahasa ketika membangun antarmuka dan logika backend.

Selain itu, Node.js memiliki ekosistem paket yang besar. Anda bisa memakai Express untuk membuat server, menyajikan file statis, dan menangani rute dengan sedikit kode. Untuk mempelajari dasar JavaScript yang dipakai di kedua sisi, Anda bisa membaca panduan dasar-dasar JavaScript untuk pemula terlebih dahulu.

Cara Kerja Dasar: HTML di Klien, Node.js di Server

Ketika pengguna membuka alamat situs, browser mengirim permintaan HTTP ke server. Node.js menerima permintaan itu, menentukan file atau data apa yang harus dikirim, lalu mengembalikan respons. Jika yang diminta adalah halaman, server mengirim HTML. Jika yang diminta adalah data, server mengirim JSON yang nantinya diolah oleh JavaScript di browser.

Pola ini penting dipahami karena banyak kesalahan terjadi ketika pengembang mencampur logika server dan logika tampilan. HTML sebaiknya tetap fokus pada struktur dan tampilan, sedangkan Node.js fokus pada proses bisnis, validasi, autentikasi, dan akses data. Penjelasan lebih lengkap mengenai peran server dapat Anda temukan di panduan pengembangan sisi server dari MDN yang membahas request, response, routing, dan keamanan dasar.

Langkah Menghubungkan HTML dengan Node.js

Berikut alur praktis yang bisa Anda ikuti untuk proyek pertama.

1. Menyiapkan Proyek dan Express

Buat folder proyek, lalu jalankan npm init -y dan npm install express. Express adalah framework minimalis yang menyederhanakan pembuatan server HTTP. Setelah terpasang, buat file server.js sebagai titik masuk aplikasi.

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

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

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

Kode di atas menyiapkan server yang mendengarkan port 3000. Dua baris middleware dipakai agar Node.js bisa membaca data dari form HTML dan payload JSON.

2. Menyajikan File HTML Statis

Cara paling sederhana menghubungkan HTML dengan Node.js adalah menyajikan folder berisi file HTML sebagai aset statis. Letakkan file index.html di dalam folder public, lalu tambahkan baris berikut sebelum app.listen.

app.use(express.static(path.join(__dirname, 'public')));

Sekarang, ketika Anda membuka http://localhost:3000, Express akan mencari public/index.html dan mengirimkannya ke browser. Semua file CSS, gambar, dan JavaScript klien di folder yang sama juga ikut tersedia. Pola ini cocok untuk landing page, dokumentasi, atau aplikasi yang sebagian besar tampilannya statis.

3. Mengirim Data dari Form HTML ke Node.js

Agar halaman terasa interaktif, HTML perlu mengirim data ke server. Buat form sederhana di index.html dengan atribut action dan method.

<form action="/kirim" method="POST">
  <label for="nama">Nama</label>
  <input id="nama" name="nama" type="text" required>
  <button type="submit">Kirim</button>
</form>

Di sisi server, tangani rute /kirim untuk membaca data yang dikirim. Karena middleware express.urlencoded sudah dipasang, nilai input tersedia di req.body.

app.post('/kirim', (req, res) => {
  const nama = req.body.nama;
  res.send(`Halo, ${nama}! Data berhasil diterima.`);
});

Alur ini menunjukkan komunikasi dua arah: HTML mengirim data, Node.js memproses, lalu mengembalikan respons yang ditampilkan di browser.

4. Menghubungkan HTML dengan API JSON

Untuk aplikasi yang lebih dinamis, HTML tidak perlu dimuat ulang setiap kali data berubah. Node.js dapat menyediakan endpoint JSON, lalu JavaScript di browser mengambil data tersebut dengan fetch. Pola ini umum dipakai pada aplikasi modern yang memisahkan tampilan dan data.

app.get('/api/produk', (req, res) => {
  res.json([
    { id: 1, nama: 'Laptop', harga: 7000000 },
    { id: 2, nama: 'Mouse', harga: 150000 }
  ]);
});

Di halaman HTML, panggil endpoint tersebut dan render hasilnya ke elemen tertentu. Dengan cara ini, satu halaman bisa menampilkan data terbaru tanpa me-reload seluruh dokumen. Jika proyek Anda mulai berkembang, pemisahan ini memudahkan penambahan fitur dan pengujian.

Struktur Folder yang Rapi

Agar proyek mudah dirawat, pisahkan file berdasarkan fungsinya. Untuk proyek kecil, struktur sederhana seperti server.js, public/index.html, dan public/style.css sudah cukup. Berikut pembagian folder yang umum dipakai.

• public untuk aset yang dikirim langsung ke browser.
• routes untuk definisi rute dan handler permintaan.
• views untuk template bila Anda memakai template engine.

Jika Anda baru mulai dengan Node.js, pelajari dulu konsep modul, event loop, dan cara menjalankan server melalui artikel pengenalan Node.js dan cara build website. Setelah itu, menghubungkan HTML dengan Node.js akan terasa jauh lebih mudah karena Anda sudah memahami cara kerja runtime-nya.

Kesalahan Umum dan Cara Menghindarinya

Beberapa masalah sering muncul saat pertama kali menghubungkan HTML dengan Node.js. Pertama, file HTML tidak ditemukan karena folder statis belum didaftarkan atau path-nya salah. Kedua, data form bernilai undefined karena middleware pembaca body belum dipasang. Ketiga, halaman menampilkan error 404 karena rute yang diminta tidak sesuai dengan yang didefinisikan di server.

Selain itu, jangan lupa memvalidasi input di sisi server. Validasi di HTML hanya membantu pengalaman pengguna, bukan pengamanan. Selalu periksa data yang masuk sebelum disimpan atau ditampilkan. Untuk aplikasi produksi, tambahkan juga penanganan error, logging, dan konfigurasi environment yang terpisah dari kode.

Kesimpulan

Menghubungkan HTML dengan Node.js pada dasarnya adalah menyatukan tampilan di browser dengan logika di server melalui HTTP. Mulailah dari menyajikan file statis, lalu tambahkan rute untuk menerima data form, dan lanjutkan dengan endpoint JSON untuk aplikasi yang lebih dinamis. Dengan struktur folder yang rapi dan validasi di sisi server, aplikasi web Anda akan lebih mudah dikembangkan dan dirawat.

Foto sampul oleh Florian Olivo di Unsplash.