🍭 NodeJS #8: Membuat Server Pertama dengan Express.js

Halo, calon developer web! 👋

Di tutorial sebelumnya (NodeJS #7) kita sudah berkenalan dengan Express.js, menginstalnya, dan melihat sekilas contoh kode. Sekarang saatnya kita membuat server pertama secara lengkap dan memahami setiap bagiannya: dari memulai aplikasi, membuat route dengan app.get(), hingga menjalankan server dengan app.listen(). Kita akan bangun fondasi yang kuat untuk petualangan Express.js selanjutnya. Yuk, mulai! 🚀

📁 Persiapan Proyek

Sebelum menulis kode, pastikan kita sudah:

1. Membuat folder proyek baru, misal server-pertama-express.
2. Membuka folder tersebut di terminal/command prompt.
3. Menjalankan npm init -y untuk membuat package.json.
4. Menjalankan npm install express untuk menginstal Express.

Jika langkah di atas sudah dilakukan, kita siap menulis kode! Jika lupa caranya, lihat lagi tutorial #7 bagian instalasi.

📝 Membuat File Utama: app.js

Buat file baru bernama app.js di folder proyek. File ini akan menjadi jantung aplikasi kita. Ketik kode berikut:

// Langkah 1: Import express
const express = require('express');

// Langkah 2: Buat aplikasi express
const app = express();

// Langkah 3: Definisikan port
const port = 3000;

// Langkah 4: Buat route untuk halaman utama
app.get('/', (req, res) => {
  res.send('<h1>Halo Dunia!</h1><p>Ini server Express pertamaku.</p>');
});

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

Sekarang kita bedah satu per satu.

🔍 Penjelasan Kode

• Baris 1: const express = require('express'); – Kita mengimpor modul Express yang sudah diinstal. Hasilnya adalah sebuah fungsi (biasanya kita simpan di variabel bernama express).
• Baris 2: const app = express(); – Kita memanggil fungsi express() untuk membuat aplikasi Express. Variabel app ini adalah objek utama yang akan kita gunakan untuk mengatur server (routing, middleware, dll).
• Baris 3: const port = 3000; – Kita tentukan port yang akan digunakan. Bisa diganti dengan angka lain (misal 8080, 5000) asal tidak bentrok dengan aplikasi lain.
• Baris 4-6: app.get('/', (req, res) => { ... }); – Ini adalah route handler. app.get() berarti kita menangani permintaan HTTP GET ke path '/' (halaman utama). Fungsi di dalamnya akan dipanggil setiap kali ada request ke /. Fungsi itu menerima dua parameter: req (objek request, berisi informasi dari browser) dan res (objek response, digunakan untuk mengirim balasan). Di sini kita mengirim HTML sederhana dengan res.send().
• Baris 8-10: app.listen(port, () => { ... }); – Perintah untuk menjalankan server. Server akan mulai mendengarkan (listen) di port yang ditentukan. Fungsi callback akan dipanggil setelah server berhasil berjalan, biasanya kita gunakan untuk memberi tahu ke konsol.

💡 Catatan: res.send() adalah fungsi pintar dari Express. Jika kita beri string, dia akan mengirim sebagai HTML (dengan Content-Type: text/html). Jika kita beri object atau array, dia akan mengirim sebagai JSON. Juga otomatis mengatur header dan mengakhiri response.

▶️ Menjalankan Server

Buka terminal (pastikan masih di folder proyek), lalu jalankan perintah:

node app.js

Jika berhasil, akan muncul pesan:

Server berjalan di http://localhost:3000

Sekarang buka browser dan kunjungi http://localhost:3000. Kamu akan melihat halaman dengan teks "Halo Dunia!" dan paragraf kecil. Selamat! Server pertamamu dengan Express sudah hidup! 🎉

🧪 Menambahkan Route Lain

Server kita sekarang hanya punya satu halaman (route /). Mari tambahkan beberapa route lagi agar lebih seru. Ubah app.js menjadi seperti ini:

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

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

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

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

// Route yang mengirim data JSON
app.get('/data', (req, res) => {
  const data = {
    nama: 'Budi',
    umur: 12,
    hobi: ['membaca', 'coding', 'bermain game']
  };
  res.json(data); // atau bisa juga res.send(data)
});

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

Setelah mengubah kode, kita harus menghentikan server yang sedang berjalan (tekan Ctrl+C di terminal), lalu jalankan ulang dengan node app.js. Coba akses:

• http://localhost:3000/tentang – halaman tentang
• http://localhost:3000/kontak – halaman kontak
• http://localhost:3000/data – data JSON (akan terlihat seperti teks terstruktur)

Kamu juga bisa coba akses route yang belum dibuat, misal /galeri. Maka browser akan menampilkan Cannot GET /galeri. Itu karena Express tidak menemukan route yang cocok. Nanti kita akan belajar menangani halaman 404.

⚠️ Ingat: Setiap kali mengubah kode, server harus dihentikan dan dijalankan ulang. Ini merepotkan, tapi nanti kita akan gunakan nodemon untuk otomatis restart.

🧱 Struktur Dasar Aplikasi Express

Dari contoh di atas, kita bisa lihat pola dasar aplikasi Express:

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

// 1. Atur berbagai route (GET, POST, dll) di sini
app.get('/path', handler);
app.post('/path', handler);
// ... dan seterusnya

// 2. Jalankan server
app.listen(port, callback);

Itu saja! Sangat sederhana. Seiring proyek membesar, kita akan memisahkan route ke file terpisah, menambahkan middleware, dll. Tapi intinya tetap seperti itu.

🧐 Mengenal Objek Request (req) dan Response (res)

Dalam setiap handler, kita punya akses ke req dan res. Mari kita lihat beberapa properti dan method yang sering digunakan.

📥 req (Request)

• req.params – parameter dari URL (misal /user/:id)
• req.query – query string (misal ?nama=Budi)
• req.body – data yang dikirim melalui form (butuh middleware tambahan)
• req.method – method HTTP (GET, POST, dll)
• req.url – URL lengkap yang diminta

📤 res (Response)

• res.send(data) – mengirim response (string, object, buffer)
• res.json(data) – mengirim JSON (sama seperti res.send untuk object)
• res.status(code) – mengatur status HTTP (misal 404, 500) lalu bisa dirantai: res.status(404).send('Not found')
• res.redirect(path) – mengalihkan ke halaman lain
• res.render(view, data) – merender template (nanti di #12)

Coba ubah salah satu route untuk menampilkan informasi dari req:

app.get('/info', (req, res) => {
  res.send(`
    <h1>Info Request</h1>
    <p>Method: ${req.method}</p>
    <p>URL: ${req.url}</p>
    <p>Path: ${req.path}</p>
  `);
});

Jalankan ulang dan akses /info. Lihat hasilnya.

🌍 Sedikit Tentang Port

Port adalah "pintu" masuk ke server kita. Bayangkan komputer punya banyak pintu (port) bernomor 0-65535. Server web biasanya menggunakan port 80 (HTTP) dan 443 (HTTPS), tapi di komputer lokal kita tidak bisa menggunakan port istimewa itu tanpa hak akses khusus. Makanya kita pakai port di atas 1024, misal 3000, 5000, 8080. Yang penting tidak bentrok dengan aplikasi lain.

Kita bisa menyimpan port di variabel terpisah agar mudah diubah:

const port = process.env.PORT || 3000;

Kode di atas akan mengambil port dari environment variable (jika ada) atau default 3000. Ini berguna saat nanti kita deploy ke hosting.

🧪 Latihan Mandiri

1. Buat route /sekolah yang menampilkan informasi sekolahmu (nama sekolah, kelas, alamat) dalam bentuk HTML.
2. Buat route /hobi yang mengirim daftar hobi dalam format JSON.
3. Buat route /usia yang menerima parameter query ?tahun=2014 dan menampilkan usia berdasarkan tahun sekarang (2026). Misal /usia?tahun=2014 menampilkan "Umur kamu 12 tahun". (Petunjuk: gunakan req.query.tahun)
4. Coba ganti port menjadi 5000, lalu akses. Apakah berhasil?

Jika ada kesulitan, tulis di komentar!

🎯 Kesimpulan

Hari ini kita telah:

• Membuat server Express pertama dari nol.
• Memahami struktur dasar: require('express'), app = express(), route dengan app.get(), dan menjalankan dengan app.listen().
• Menambahkan beberapa route sederhana.
• Mengenal objek req dan res.

Ini adalah fondasi penting. Di tutorial selanjutnya (NodeJS #9) kita akan belajar lebih dalam tentang routing, termasuk parameter dinamis dan method HTTP lainnya (POST, PUT, DELETE). Sampai jumpa!

Jangan lupa untuk terus berlatih dan bereksperimen sendiri. Selamat coding! 💻😊

---

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