Mini Project: Membuat API untuk Halaman Profil Interaktif

Halo, Gabuters!

Akhirnya kita sampai pada artikel terakhir seri Backend dan API dengan JavaScript.

Pada artikel sebelumnya, kita berhasil menghubungkan frontend dan backend menggunakan Fetch API.

Kita sudah mempelajari HTTP, JSON, routing, REST API, operasi CRUD, Promise, dan async/await.

Sekarang waktunya menggabungkan pengetahuan tersebut menjadi sebuah mini project.

Masih ingat mini project halaman profil interaktif dari seri JavaScript?

Pada proyek tersebut, kita membuat halaman profil yang memiliki beberapa fitur interaktif, termasuk formulir kontak.

Namun, formulirnya belum benar-benar mengirim pesan ke server.

Ketika tombol kirim ditekan, JavaScript hanya memvalidasi input dan menampilkan notifikasi di browser.

Pada artikel ini, kita akan mengembangkan konsep tersebut.

Formulir kontak akan mengirim data menggunakan Fetch API. Backend akan menerima dan memvalidasi pesan, kemudian menyimpannya sementara di memori server.

Kita juga akan membuat endpoint untuk melihat pesan yang diterima.

Semua menggunakan JavaScript murni dan Node.js native, tanpa Express.

Mari kita mulai!

1. Apa yang Akan Kita Buat?#

Mini project kita berupa halaman profil sederhana dengan beberapa fitur:

Menampilkan informasi profil.
Mengganti tema terang dan gelap.
Menampilkan salam interaktif.
Menghitung jumlah karakter pesan.
Mengirim formulir kontak ke backend.
Memvalidasi data di frontend dan backend.
Menampilkan status pengiriman.
Menyediakan endpoint untuk melihat jumlah pesan yang diterima.

Alur pengiriman pesannya seperti ini:

1
Pengunjung mengisi formulir
2
             |
3
             v
4
JavaScript memvalidasi input
5
             |
6
             v
7
fetch() mengirim POST /api/pesan
8
             |
9
             v
10
Backend membaca body JSON
11
             |
12
             v
13
Backend memvalidasi data
14
             |
15
             v
16
Pesan disimpan di memori
17
             |
18
             v
19
Backend mengirim response JSON
20
             |
21
             v
22
Frontend menampilkan hasil

Kita akan membuat dua endpoint utama:

Method	Endpoint	Fungsi
GET	`/api/profil`	Mengambil informasi profil
POST	`/api/pesan`	Menerima pesan kontak

Selain itu, kita akan menambahkan:

1
GET /api/status

Endpoint ini menampilkan informasi sederhana mengenai server dan jumlah pesan yang sudah diterima sejak proses server berjalan.

Penting: Penyimpanan pesan pada proyek ini hanya menggunakan array di memori. Pesan tidak disimpan permanen, tidak dikirim melalui email, dan akan hilang ketika server dimulai ulang.

2. Mengapa Kita Tidak Langsung Menggunakan Database?#

Tujuan mini project ini adalah memahami komunikasi frontend dan backend.

Jika kita langsung menambahkan database, konfigurasi koneksi, dan sistem autentikasi, pembahasannya akan menjadi terlalu luas untuk satu artikel.

Karena itu, kita akan menggunakan array:

1
const pesanMasuk = [];

Setiap pesan yang valid akan dimasukkan ke array tersebut.

Pendekatan ini cukup untuk mendemonstrasikan proses penerimaan data.

Namun, ada beberapa keterbatasan:

Data hilang ketika server dimulai ulang.
Data tidak dibagikan secara otomatis antarbeberapa proses server.
Tidak cocok untuk menyimpan pesan penting.
Tidak menyediakan penyimpanan permanen.

Kita akan mempelajari penyimpanan data menggunakan database pada seri berikutnya.

3. Menyiapkan Struktur Proyek#

Buat folder:

1
mini-project-api-profil/

Kemudian siapkan struktur berikut:

1
mini-project-api-profil/
2
├── server.js
3
└── public/
4
    ├── index.html
5
    ├── style.css
6
    └── script.js

Penjelasannya:

server.js: backend HTTP server.
index.html: struktur halaman profil.
style.css: tampilan dan tema halaman.
script.js: interaksi browser dan komunikasi API.

Kita menggunakan satu server untuk melayani frontend sekaligus endpoint API.

Dengan begitu, frontend dan backend berada pada origin yang sama dan kita tidak perlu mengatur CORS untuk latihan ini.

Pastikan Node.js sudah terpasang.

Periksa melalui terminal:

1
node --version

Gunakan versi LTS modern.

Kita tidak membutuhkan npm install karena seluruh modul backend sudah tersedia di Node.js.

4. Merancang API Sebelum Menulis Kode#

Sebelum membuat server, kita tentukan kontrak API sederhana.

GET /api/profil#

Endpoint ini mengembalikan informasi profil.

Contoh response:

1
{
2
  "nama": "BapakGabut",
3
  "tagline": "Ngoding, main game, dan ngulik apa saja.",
4
  "minat": [
5
    "Programming",
6
    "Gaming",
7
    "Teknologi"
8
  ]
9
}

POST /api/pesan#

Endpoint ini menerima body JSON:

1
{
2
  "nama": "Gabuters",
3
  "email": "gabuters@example.com",
4
  "pesan": "Halo, saya ingin bertanya."
5
}

Jika valid, backend mengembalikan:

1
{
2
  "berhasil": true,
3
  "pesan": "Pesan berhasil diterima.",
4
  "id": 1
5
}

Dengan status:

1
201 Created

Jika data tidak valid, backend mengembalikan status 400 dengan pesan kesalahan.

GET /api/status#

Endpoint ini mengembalikan:

1
{
2
  "status": "ok",
3
  "jumlahPesan": 1
4
}

Jumlah pesan akan bertambah setiap kali backend menerima pesan yang valid.

Untuk latihan, endpoint ini hanya menampilkan jumlah pesan, bukan isi pesan atau alamat email pengunjung.

Kita sengaja tidak menyediakan endpoint publik untuk membaca seluruh pesan karena data formulir kontak dapat mengandung informasi pribadi.

5. Menyiapkan Backend Node.js#

Buka file server.js.

Kita akan menggunakan tiga modul bawaan Node.js:

1
const http = require("node:http");
2
const fs = require("node:fs/promises");
3
const path = require("node:path");

Fungsi masing-masing:

node:http: membuat HTTP server.
node:fs/promises: membaca file secara asynchronous.
node:path: menyusun path file.

Kemudian siapkan konfigurasi dasar:

1
const HOST = "127.0.0.1";
2
const PORT = 3000;
3

4
const folderPublic = path.join(__dirname, "public");

Kita menggunakan alamat loopback 127.0.0.1 agar server latihan hanya menerima koneksi lokal.

Proyek ini memang ditujukan untuk dijalankan di komputer sendiri, bukan langsung dipublikasikan ke internet.

6. Menyiapkan Penyimpanan Pesan Sementara#

Buat array untuk menyimpan pesan:

1
const pesanMasuk = [];
2

3
let idBerikutnya = 1;

Ketika sebuah pesan valid diterima, kita akan menambahkan object ke array.

Contohnya:

1
{
2
  id: 1,
3
  nama: "Gabuters",
4
  email: "gabuters@example.com",
5
  pesan: "Halo, saya ingin bertanya.",
6
  diterimaPada: "2026-10-09T12:30:00.000Z"
7
}

Field diterimaPada akan diisi menggunakan waktu server ketika pesan diterima.

Nilai waktu di atas hanya contoh.

Kita tidak akan menampilkan seluruh isi array melalui endpoint publik.

Untuk melihat apakah jumlah pesan bertambah, kita cukup menggunakan endpoint /api/status.

7. Membuat Function Pengirim JSON#

Agar kode lebih rapi, buat function:

1
function kirimJSON(res, statusCode, data) {
2
  res.writeHead(statusCode, {
3
    "Content-Type": "application/json; charset=utf-8",
4
    "Cache-Control": "no-store"
5
  });
6

7
  res.end(JSON.stringify(data));
8
}

Header:

1
Content-Type: application/json

Menunjukkan bahwa response berisi JSON.

Sedangkan:

1
Cache-Control: no-store

Meminta cache tidak menyimpan response tersebut.

Ini berguna untuk endpoint yang mengembalikan informasi dinamis.

Namun, header cache bukan pengganti pengamanan data atau autentikasi.

8. Membaca Body JSON dari Request#

Ketika frontend mengirim request POST, data berada pada request body.

Karena kita tidak menggunakan Express, body akan dibaca melalui stream bawaan Node.js.

Kita juga akan membatasi ukuran body maksimal 10 KB.

Contohnya:

1
async function bacaJSON(req) {
2
  const chunks = [];
3

4
  for await (const chunk of req) {
5
    chunks.push(chunk);
6
  }
7

8
  const teks = Buffer.concat(chunks).toString("utf8");
9

10
  return JSON.parse(teks);
11
}

Kode tersebut menggambarkan proses dasar pembacaan body.

Namun, contoh sederhana ini belum membatasi ukuran data dan belum membedakan jenis kesalahan.

Pada kode lengkap nanti, kita akan menambahkan:

Pemeriksaan Content-Type.
Batas ukuran body.
Penanganan JSON tidak valid.
Status code yang sesuai.

9. Menentukan Aturan Validasi Pesan#

Formulir kontak akan mempunyai tiga field:

Nama.
Email.
Pesan.

Aturan yang kita gunakan:

Field	Aturan
Nama	Wajib, maksimal 80 karakter
Email	Wajib, format sederhana, maksimal 254 karakter
Pesan	Wajib, maksimal 200 karakter

Validasi email yang digunakan hanya pemeriksaan dasar untuk pembelajaran.

Validasi ini tidak menjamin bahwa alamat email benar-benar ada atau dapat menerima pesan.

Untuk aplikasi nyata, kebutuhan validasi dapat lebih kompleks dan mungkin memerlukan proses verifikasi.

Kita akan melakukan validasi dua kali:

Di frontend, untuk membantu pengguna.
Di backend, untuk memastikan request yang diterima memenuhi aturan aplikasi.

Validasi backend tetap diperlukan karena request dapat dikirim tanpa melalui formulir yang kita buat.

10. Membuat Backend Lengkap#

Sekarang ganti seluruh isi server.js dengan kode berikut:

1
const http = require("node:http");
2
const fs = require("node:fs/promises");
3
const path = require("node:path");
4

5
const HOST = "127.0.0.1";
6
const PORT = 3000;
7
const BATAS_BODY = 10 * 1024;
8

9
const folderPublic = path.join(__dirname, "public");
10

11
const pesanMasuk = [];
12
let idBerikutnya = 1;
13

14
const profil = {
15
  nama: "BapakGabut",
16
  tagline: "Ngoding, main game, dan ngulik apa saja.",
17
  minat: ["Programming", "Gaming", "Teknologi"]
18
};
19

20
function buatError(statusCode, pesan) {
21
  const error = new Error(pesan);
22
  error.statusCode = statusCode;
23
  return error;
24
}
25

26
function kirimJSON(res, statusCode, data) {
27
  res.writeHead(statusCode, {
28
    "Content-Type": "application/json; charset=utf-8",
29
    "Cache-Control": "no-store"
30
  });
31

32
  res.end(JSON.stringify(data));
33
}
34

35
async function bacaJSON(req) {
36
  const tipeKonten = req.headers["content-type"] || "";
37

38
  if (!/^application\/json(?:\s*;|$)/i.test(tipeKonten)) {
39
    throw buatError(
40
      415,
41
      "Gunakan Content-Type: application/json."
42
    );
43
  }
44

45
  const chunks = [];
46
  let totalUkuran = 0;
47
  let terlaluBesar = false;
48

49
  for await (const chunk of req) {
50
    totalUkuran += chunk.length;
51

52
    if (totalUkuran > BATAS_BODY) {
53
      terlaluBesar = true;
54
    }
55

56
    if (!terlaluBesar) {
57
      chunks.push(chunk);
58
    }
59
  }
60

61
  if (terlaluBesar) {
62
    throw buatError(413, "Ukuran pesan terlalu besar.");
63
  }
64

65
  const teks = Buffer.concat(chunks).toString("utf8");
66

67
  try {
68
    return JSON.parse(teks);
69
  } catch {
70
    throw buatError(400, "Format JSON tidak valid.");
71
  }
72
}
73

74
function validasiPesan(data) {
75
  if (
76
    data === null ||
77
    typeof data !== "object" ||
78
    Array.isArray(data)
79
  ) {
80
    return "Data pesan harus berupa object JSON.";
81
  }
82

83
  if (
84
    typeof data.nama !== "string" ||
85
    data.nama.trim().length === 0 ||
86
    data.nama.trim().length > 80
87
  ) {
88
    return "Nama wajib diisi, maksimal 80 karakter.";
89
  }
90

91
  if (
92
    typeof data.email !== "string" ||
93
    data.email.trim().length === 0 ||
94
    data.email.trim().length > 254
95
  ) {
96
    return "Email wajib diisi, maksimal 254 karakter.";
97
  }
98

99
  const email = data.email.trim();
100

101
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
102
    return "Format email tidak valid.";
103
  }
104

105
  if (
106
    typeof data.pesan !== "string" ||
107
    data.pesan.trim().length === 0 ||
108
    data.pesan.trim().length > 200
109
  ) {
110
    return "Pesan wajib diisi, maksimal 200 karakter.";
111
  }
112

113
  return null;
114
}
115

116
async function kirimFile(res, namaFile, tipeKonten) {
117
  const lokasi = path.join(folderPublic, namaFile);
118
  const isi = await fs.readFile(lokasi);
119

120
  res.writeHead(200, {
121
    "Content-Type": tipeKonten
122
  });
123

124
  res.end(isi);
125
}
126

127
async function tanganiRequest(req, res) {
128
  const url = new URL(req.url, "http://localhost");
129
  const pathname = url.pathname;
130
  const method = req.method;
131

132
  if (method === "GET" && pathname === "/") {
133
    await kirimFile(
134
      res,
135
      "index.html",
136
      "text/html; charset=utf-8"
137
    );
138
    return;
139
  }
140

141
  if (method === "GET" && pathname === "/style.css") {
142
    await kirimFile(
143
      res,
144
      "style.css",
145
      "text/css; charset=utf-8"
146
    );
147
    return;
148
  }
149

150
  if (method === "GET" && pathname === "/script.js") {
151
    await kirimFile(
152
      res,
153
      "script.js",
154
      "text/javascript; charset=utf-8"
155
    );
156
    return;
157
  }
158

159
  if (method === "GET" && pathname === "/api/profil") {
160
    kirimJSON(res, 200, profil);
161
    return;
162
  }
163

164
  if (method === "GET" && pathname === "/api/status") {
165
    kirimJSON(res, 200, {
166
      status: "ok",
167
      jumlahPesan: pesanMasuk.length
168
    });
169
    return;
170
  }
171

172
  if (method === "POST" && pathname === "/api/pesan") {
173
    const data = await bacaJSON(req);
174
    const kesalahan = validasiPesan(data);
175

176
    if (kesalahan) {
177
      kirimJSON(res, 400, {
178
        berhasil: false,
179
        pesan: kesalahan
180
      });
181
      return;
182
    }
183

184
    const pesanBaru = {
185
      id: idBerikutnya++,
186
      nama: data.nama.trim(),
187
      email: data.email.trim(),
188
      pesan: data.pesan.trim(),
189
      diterimaPada: new Date().toISOString()
190
    };
191

192
    pesanMasuk.push(pesanBaru);
193

194
    kirimJSON(res, 201, {
195
      berhasil: true,
196
      pesan: "Pesan berhasil diterima.",
197
      id: pesanBaru.id
198
    });
199
    return;
200
  }
201

202
  if (
203
    pathname === "/api/profil" ||
204
    pathname === "/api/status" ||
205
    pathname === "/api/pesan"
206
  ) {
207
    res.setHeader(
208
      "Allow",
209
      pathname === "/api/pesan" ? "POST" : "GET"
210
    );
211

212
    kirimJSON(res, 405, {
213
      pesan: "Method tidak diizinkan."
214
    });
215
    return;
216
  }
217

218
  kirimJSON(res, 404, {
219
    pesan: "Halaman atau endpoint tidak ditemukan."
220
  });
221
}
222

223
const server = http.createServer((req, res) => {
224
  tanganiRequest(req, res).catch((error) => {
225
    console.error("Server error:", error.message);
226

227
    if (res.headersSent) {
228
      res.destroy();
229
      return;
230
    }
231

232
    const statusCode =
233
      Number.isInteger(error.statusCode) &&
234
      error.statusCode >= 400 &&
235
      error.statusCode < 500
236
        ? error.statusCode
237
        : 500;
238

239
    kirimJSON(res, statusCode, {
240
      berhasil: false,
241
      pesan:
242
        statusCode === 500
243
          ? "Terjadi kesalahan pada server."
244
          : error.message
245
    });
246
  });
247
});
248

249
server.on("error", (error) => {
250
  console.error("Gagal menjalankan server:", error.message);
251
});
252

253
server.listen(PORT, HOST, () => {
254
  console.log(`Server berjalan di http://localhost:${PORT}`);
255
});

Backend kita sekarang memiliki tiga endpoint API:

1
GET  /api/profil
2
GET  /api/status
3
POST /api/pesan

Kita juga melayani tiga file frontend:

1
GET /
2
GET /style.css
3
GET /script.js

Mengapa data pesan tidak dikembalikan seluruhnya?#

Karena formulir kontak dapat berisi informasi pribadi seperti nama, email, dan isi pesan.

Jika kita membuat endpoint publik yang mengembalikan seluruh pesan tanpa autentikasi, siapa pun yang mengetahui endpoint tersebut berpotensi membaca data pengunjung.

Karena itu, pada latihan ini kita hanya menampilkan jumlah pesan melalui /api/status.

Untuk aplikasi nyata, akses ke data pesan harus dilindungi menggunakan autentikasi dan otorisasi yang sesuai.

Apakah kode ini siap digunakan untuk website publik?#

Belum.

Kode ini dirancang untuk latihan lokal.

Belum ada autentikasi, rate limiting, penyimpanan permanen, proteksi spam, atau pengaturan operasional yang lengkap.

Jangan menggunakan formulir ini untuk mengumpulkan pesan pengunjung sungguhan sebelum sistem disiapkan dengan benar.

11. Membuat Halaman HTML#

Sekarang buka public/index.html.

Masukkan kode berikut:

1
<!DOCTYPE html>
2
<html lang="id">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta
6
    name="viewport"
7
    content="width=device-width, initial-scale=1.0"
8
  >
9
  <title>Profil Interaktif - BapakGabut</title>
10
  <link rel="stylesheet" href="/style.css">
11
  <script src="/script.js" defer></script>
12
</head>
13
<body>
14
  <main class="container">
15
    <header class="kartu">
16
      <div class="baris-header">
17
        <h1>Profil BapakGabut</h1>
18

19
        <button
20
          id="tombol-tema"
21
          type="button"
22
          aria-pressed="false"
23
        >
24
          Mode Gelap
25
        </button>
26
      </div>
27

28
      <p id="tagline">Memuat profil...</p>
29

30
      <p id="minat"></p>
31

32
      <button id="tombol-salam" type="button">
33
        Sapa Saya
34
      </button>
35

36
      <p id="hasil-salam" role="status"></p>
37
    </header>
38

39
    <section class="kartu" aria-labelledby="judul-kontak">
40
      <h2 id="judul-kontak">Kirim Pesan</h2>
41

42
      <p>
43
        Formulir ini adalah demonstrasi lokal.
44
        Pesan hanya disimpan sementara di memori server.
45
      </p>
46

47
      <form id="form-kontak">
48
        <label for="nama">Nama</label>
49
        <input
50
          id="nama"
51
          name="nama"
52
          type="text"
53
          maxlength="80"
54
          autocomplete="name"
55
          required
56
        >
57

58
        <label for="email">Email</label>
59
        <input
60
          id="email"
61
          name="email"
62
          type="email"
63
          maxlength="254"
64
          autocomplete="email"
65
          required
66
        >
67

68
        <label for="pesan">Pesan</label>
69
        <textarea
70
          id="pesan"
71
          name="pesan"
72
          rows="5"
73
          maxlength="200"
74
          required
75
        ></textarea>
76

77
        <p id="hitung-karakter">0 / 200 karakter</p>
78

79
        <button id="tombol-kirim" type="submit">
80
          Kirim Pesan
81
        </button>
82
      </form>
83

84
      <p
85
        id="status-form"
86
        role="status"
87
        aria-live="polite"
88
      ></p>
89
    </section>
90

91
    <section class="kartu" aria-labelledby="judul-status">
92
      <h2 id="judul-status">Status Server</h2>
93

94
      <p id="status-server">Memuat status...</p>
95

96
      <button id="tombol-refresh" type="button">
97
        Perbarui Status
98
      </button>
99
    </section>
100
  </main>
101
</body>
102
</html>

Halaman tersebut memiliki tiga bagian utama:

Profil dan interaksi sederhana.
Formulir kontak.
Status server.

Perhatikan bahwa formulir tidak menggunakan atribut action untuk mengirim data secara langsung.

Kita akan menangani event submit menggunakan JavaScript, kemudian mengirim request melalui Fetch API.

12. Membuat CSS dengan Tema Terang dan Gelap#

Sekarang buka public/style.css.

Masukkan kode berikut:

1
:root {
2
  --warna-latar: #f3f4f6;
3
  --warna-kartu: #ffffff;
4
  --warna-teks: #111827;
5
  --warna-border: #d1d5db;
6
  --warna-tombol: #2563eb;
7
  --warna-tombol-teks: #ffffff;
8
}
9

10
body.tema-gelap {
11
  --warna-latar: #111827;
12
  --warna-kartu: #1f2937;
13
  --warna-teks: #f9fafb;
14
  --warna-border: #4b5563;
15
  --warna-tombol: #60a5fa;
16
  --warna-tombol-teks: #111827;
17
}
18

19
* {
20
  box-sizing: border-box;
21
}
22

23
body {
24
  margin: 0;
25
  background: var(--warna-latar);
26
  color: var(--warna-teks);
27
  font-family: Arial, sans-serif;
28
  line-height: 1.6;
29
}
30

31
.container {
32
  width: min(100% - 32px, 760px);
33
  margin: 32px auto;
34
}
35

36
.kartu {
37
  background: var(--warna-kartu);
38
  border: 1px solid var(--warna-border);
39
  border-radius: 12px;
40
  padding: 24px;
41
  margin-bottom: 20px;
42
}
43

44
.baris-header {
45
  display: flex;
46
  align-items: center;
47
  justify-content: space-between;
48
  gap: 16px;
49
  flex-wrap: wrap;
50
}
51

52
h1,
53
h2 {
54
  margin-top: 0;
55
}
56

57
label {
58
  display: block;
59
  margin: 14px 0 6px;
60
  font-weight: bold;
61
}
62

63
input,
64
textarea {
65
  display: block;
66
  width: 100%;
67
  padding: 10px;
68
  border: 1px solid var(--warna-border);
69
  border-radius: 6px;
70
  background: var(--warna-kartu);
71
  color: var(--warna-teks);
72
  font: inherit;
73
}
74

75
button {
76
  padding: 10px 16px;
77
  border: none;
78
  border-radius: 6px;
79
  background: var(--warna-tombol);
80
  color: var(--warna-tombol-teks);
81
  cursor: pointer;
82
  font: inherit;
83
}
84

85
button:disabled {
86
  opacity: 0.6;
87
  cursor: not-allowed;
88
}
89

90
button:focus-visible,
91
input:focus-visible,
92
textarea:focus-visible {
93
  outline: 3px solid #f59e0b;
94
  outline-offset: 2px;
95
}
96

97
#hitung-karakter {
98
  font-size: 0.9rem;
99
  margin-top: 6px;
100
}
101

102
#status-form,
103
#status-server,
104
#hasil-salam {
105
  min-height: 24px;
106
}
107

108
@media (max-width: 480px) {
109
  .container {
110
    margin: 16px auto;
111
  }
112

113
  .kartu {
114
    padding: 16px;
115
  }
116
}

CSS ini menggunakan custom properties untuk mengatur warna.

Ketika class tema-gelap ditambahkan ke elemen body, nilai variabel warna berubah.

Dengan begitu, kita tidak perlu menulis ulang seluruh aturan CSS untuk mode gelap.

13. Menyiapkan JavaScript Frontend#

Sekarang buka public/script.js.

Kita mulai dengan mengambil elemen HTML.

1
const tombolTema = document.querySelector("#tombol-tema");
2
const tombolSalam = document.querySelector("#tombol-salam");
3
const hasilSalam = document.querySelector("#hasil-salam");
4

5
const tagline = document.querySelector("#tagline");
6
const minat = document.querySelector("#minat");
7

8
const formKontak = document.querySelector("#form-kontak");
9
const inputNama = document.querySelector("#nama");
10
const inputEmail = document.querySelector("#email");
11
const inputPesan = document.querySelector("#pesan");
12

13
const hitungKarakter = document.querySelector(
14
  "#hitung-karakter"
15
);
16

17
const tombolKirim = document.querySelector(
18
  "#tombol-kirim"
19
);
20

21
const statusForm = document.querySelector("#status-form");
22
const statusServer = document.querySelector("#status-server");
23
const tombolRefresh = document.querySelector(
24
  "#tombol-refresh"
25
);

Kita akan menggunakan elemen-elemen tersebut untuk menghubungkan interaksi pengguna dengan API.

14. Mengambil Data Profil dari Backend#

Pada mini project JavaScript sebelumnya, data profil ditulis langsung di HTML.

Sekarang kita akan mengambilnya dari endpoint:

1
GET /api/profil

Buat function:

1
async function ambilProfil() {
2
  try {
3
    const response = await fetch("/api/profil");
4

5
    if (!response.ok) {
6
      throw new Error(`HTTP ${response.status}`);
7
    }
8

9
    const data = await response.json();
10

11
    tagline.textContent = data.tagline;
12

13
    minat.textContent =
14
      `Minat: ${data.minat.join(", ")}`;
15
  } catch (error) {
16
    tagline.textContent = "Profil belum dapat dimuat.";
17
    minat.textContent = "";
18

19
    console.error(error);
20
  }
21
}

Ketika halaman dibuka, function ini akan meminta data profil ke backend.

Jika berhasil, informasi profil ditampilkan.

Jika gagal, halaman menampilkan pesan yang mudah dipahami.

15. Membuat Tombol Ganti Tema#

Kita pertahankan fitur dari mini project JavaScript sebelumnya.

Ketika tombol tema ditekan, kita menambahkan atau menghapus class tema-gelap.

1
function gantiTema() {
2
  const gelap = document.body.classList.toggle(
3
    "tema-gelap"
4
  );
5

6
  tombolTema.textContent = gelap
7
    ? "Mode Terang"
8
    : "Mode Gelap";
9

10
  tombolTema.setAttribute(
11
    "aria-pressed",
12
    String(gelap)
13
  );
14
}

Fitur ini tidak membutuhkan backend.

Mengganti tema merupakan contoh interaksi yang dapat dilakukan sepenuhnya di browser.

Ini menunjukkan bahwa tidak semua fitur website harus mengirim request ke server.

16. Membuat Tombol Salam#

Kita juga pertahankan fitur salam interaktif.

1
function tampilkanSalam() {
2
  hasilSalam.textContent =
3
    "Halo, Gabuters! Selamat belajar backend!";
4
}

Ketika tombol ditekan, JavaScript memperbarui teks pada halaman.

Fitur ini juga berjalan tanpa backend.

17. Menghitung Karakter Pesan#

Formulir kontak membatasi pesan maksimal 200 karakter.

Kita bisa menampilkan jumlah karakter ketika pengguna mengetik.

1
function perbaruiHitunganKarakter() {
2
  hitungKarakter.textContent =
3
    `${inputPesan.value.length} / 200 karakter`;
4
}

Nilai:

1
inputPesan.value.length

Digunakan untuk menghitung panjang string input.

Untuk latihan ini, frontend dan backend sama-sama menggunakan panjang string JavaScript sebagai dasar batas karakter.

Perlu diketahui bahwa panjang string JavaScript tidak selalu sama dengan jumlah karakter yang terlihat oleh manusia, terutama untuk beberapa emoji dan gabungan karakter Unicode.

Pada aplikasi nyata, aturan panjang teks perlu ditentukan sesuai kebutuhan.

18. Mengirim Formulir ke Backend#

Sekarang kita masuk ke fitur utama.

Ketika pengguna mengirim formulir, JavaScript akan:

Mencegah submit HTML biasa.
Membaca nilai input.
Melakukan validasi dasar.
Menonaktifkan tombol sementara.
Mengirim request POST.
Membaca response JSON.
Menampilkan hasil.
Memulihkan tombol.

Contoh function:

1
async function kirimPesan(event) {
2
  event.preventDefault();
3

4
  const data = {
5
    nama: inputNama.value.trim(),
6
    email: inputEmail.value.trim(),
7
    pesan: inputPesan.value.trim()
8
  };
9

10
  if (!data.nama || !data.email || !data.pesan) {
11
    statusForm.textContent =
12
      "Semua field wajib diisi.";
13
    return;
14
  }
15

16
  tombolKirim.disabled = true;
17
  statusForm.textContent = "Mengirim pesan...";
18

19
  try {
20
    const response = await fetch("/api/pesan", {
21
      method: "POST",
22
      headers: {
23
        "Content-Type": "application/json"
24
      },
25
      body: JSON.stringify(data)
26
    });
27

28
    const hasil = await response.json();
29

30
    if (!response.ok) {
31
      throw new Error(
32
        hasil.pesan || `HTTP ${response.status}`
33
      );
34
    }
35

36
    statusForm.textContent = hasil.pesan;
37

38
    formKontak.reset();
39
    perbaruiHitunganKarakter();
40
  } catch (error) {
41
    statusForm.textContent =
42
      `Gagal mengirim pesan: ${error.message}`;
43

44
    console.error(error);
45
  } finally {
46
    tombolKirim.disabled = false;
47
  }
48
}

Perhatikan bahwa kita menggunakan:

1
event.preventDefault();

Untuk mencegah browser melakukan submit formulir biasa.

Kemudian:

1
fetch("/api/pesan", {
2
  method: "POST"
3
});

Untuk mengirim data ke backend.

Jika backend mengembalikan status 201, kita menampilkan pesan keberhasilan.

Jika backend mengembalikan error, kita menampilkan pesan yang sesuai.

19. Membuat Fitur Status Server#

Sekarang kita ingin mengetahui berapa banyak pesan yang sudah diterima server.

Kita menggunakan endpoint:

1
GET /api/status

Buat function:

1
async function ambilStatus() {
2
  tombolRefresh.disabled = true;
3
  statusServer.textContent = "Memuat status...";
4

5
  try {
6
    const response = await fetch("/api/status");
7

8
    if (!response.ok) {
9
      throw new Error(`HTTP ${response.status}`);
10
    }
11

12
    const data = await response.json();
13

14
    statusServer.textContent =
15
      `Server aktif. Pesan diterima: ${data.jumlahPesan}`;
16
  } catch (error) {
17
    statusServer.textContent =
18
      "Status server belum dapat dimuat.";
19

20
    console.error(error);
21
  } finally {
22
    tombolRefresh.disabled = false;
23
  }
24
}

Setelah pesan berhasil dikirim, kita akan memanggil ambilStatus() agar jumlah pesan diperbarui.

20. Membuat JavaScript Frontend Lengkap#

Sekarang gabungkan seluruh kode frontend.

Ganti isi public/script.js dengan kode berikut:

1
const tombolTema = document.querySelector("#tombol-tema");
2
const tombolSalam = document.querySelector("#tombol-salam");
3
const hasilSalam = document.querySelector("#hasil-salam");
4

5
const tagline = document.querySelector("#tagline");
6
const minat = document.querySelector("#minat");
7

8
const formKontak = document.querySelector("#form-kontak");
9
const inputNama = document.querySelector("#nama");
10
const inputEmail = document.querySelector("#email");
11
const inputPesan = document.querySelector("#pesan");
12

13
const hitungKarakter = document.querySelector(
14
  "#hitung-karakter"
15
);
16

17
const tombolKirim = document.querySelector(
18
  "#tombol-kirim"
19
);
20

21
const statusForm = document.querySelector("#status-form");
22
const statusServer = document.querySelector("#status-server");
23
const tombolRefresh = document.querySelector(
24
  "#tombol-refresh"
25
);
26

27
async function ambilProfil() {
28
  try {
29
    const response = await fetch("/api/profil");
30

31
    if (!response.ok) {
32
      throw new Error(`HTTP ${response.status}`);
33
    }
34

35
    const data = await response.json();
36

37
    tagline.textContent = data.tagline;
38

39
    minat.textContent =
40
      `Minat: ${data.minat.join(", ")}`;
41
  } catch (error) {
42
    tagline.textContent = "Profil belum dapat dimuat.";
43
    minat.textContent = "";
44

45
    console.error(error);
46
  }
47
}
48

49
function gantiTema() {
50
  const gelap = document.body.classList.toggle(
51
    "tema-gelap"
52
  );
53

54
  tombolTema.textContent = gelap
55
    ? "Mode Terang"
56
    : "Mode Gelap";
57

58
  tombolTema.setAttribute(
59
    "aria-pressed",
60
    String(gelap)
61
  );
62
}
63

64
function tampilkanSalam() {
65
  hasilSalam.textContent =
66
    "Halo, Gabuters! Selamat belajar backend!";
67
}
68

69
function perbaruiHitunganKarakter() {
70
  hitungKarakter.textContent =
71
    `${inputPesan.value.length} / 200 karakter`;
72
}
73

74
async function ambilStatus() {
75
  tombolRefresh.disabled = true;
76
  statusServer.textContent = "Memuat status...";
77

78
  try {
79
    const response = await fetch("/api/status");
80

81
    if (!response.ok) {
82
      throw new Error(`HTTP ${response.status}`);
83
    }
84

85
    const data = await response.json();
86

87
    statusServer.textContent =
88
      `Server aktif. Pesan diterima: ${data.jumlahPesan}`;
89
  } catch (error) {
90
    statusServer.textContent =
91
      "Status server belum dapat dimuat.";
92

93
    console.error(error);
94
  } finally {
95
    tombolRefresh.disabled = false;
96
  }
97
}
98

99
async function kirimPesan(event) {
100
  event.preventDefault();
101

102
  const data = {
103
    nama: inputNama.value.trim(),
104
    email: inputEmail.value.trim(),
105
    pesan: inputPesan.value.trim()
106
  };
107

108
  if (!data.nama || !data.email || !data.pesan) {
109
    statusForm.textContent =
110
      "Semua field wajib diisi.";
111
    return;
112
  }
113

114
  tombolKirim.disabled = true;
115
  statusForm.textContent = "Mengirim pesan...";
116

117
  try {
118
    const response = await fetch("/api/pesan", {
119
      method: "POST",
120
      headers: {
121
        "Content-Type": "application/json"
122
      },
123
      body: JSON.stringify(data)
124
    });
125

126
    const hasil = await response.json();
127

128
    if (!response.ok) {
129
      throw new Error(
130
        hasil.pesan || `HTTP ${response.status}`
131
      );
132
    }
133

134
    statusForm.textContent =
135
      `Pesan berhasil diterima dengan ID ${hasil.id}.`;
136

137
    formKontak.reset();
138
    perbaruiHitunganKarakter();
139

140
    await ambilStatus();
141
  } catch (error) {
142
    statusForm.textContent =
143
      `Gagal mengirim pesan: ${error.message}`;
144

145
    console.error(error);
146
  } finally {
147
    tombolKirim.disabled = false;
148
  }
149
}
150

151
tombolTema.addEventListener("click", gantiTema);
152

153
tombolSalam.addEventListener("click", tampilkanSalam);
154

155
inputPesan.addEventListener(
156
  "input",
157
  perbaruiHitunganKarakter
158
);
159

160
formKontak.addEventListener("submit", kirimPesan);
161

162
tombolRefresh.addEventListener("click", ambilStatus);
163

164
perbaruiHitunganKarakter();
165
ambilProfil();
166
ambilStatus();

Dengan kode ini, seluruh fitur halaman sudah terhubung.

Fitur tema dan salam diproses langsung di browser.

Sedangkan data profil, pengiriman pesan, dan status server menggunakan HTTP request.

21. Menjalankan Mini Project#

Pastikan struktur proyek sesuai:

1
mini-project-api-profil/
2
├── server.js
3
└── public/
4
    ├── index.html
5
    ├── style.css
6
    └── script.js

Buka terminal pada folder proyek.

Jalankan:

1
node server.js

Jika berhasil, akan muncul:

1
Server berjalan di http://localhost:3000

Buka browser:

1
http://localhost:3000

Halaman profil akan muncul.

Jika API berhasil diakses, tagline dan minat akan diambil dari backend.

Coba tekan tombol Mode Gelap.

Kemudian tekan tombol Sapa Saya.

Kedua fitur tersebut seharusnya bekerja tanpa request API tambahan.

Sekarang coba kirim pesan melalui formulir.

Contohnya:

1
Nama: Gabuters
2
Email: gabuters@example.com
3
Pesan: Halo, saya sedang belajar backend.

Tekan tombol Kirim Pesan.

Jika berhasil, frontend menampilkan pesan bahwa backend menerima data.

Jumlah pesan pada bagian Status Server juga akan bertambah.

22. Memeriksa Request Menggunakan Developer Tools#

Buka Developer Tools browser.

Pilih tab Network.

Muat ulang halaman.

Kita akan melihat request menuju:

1
GET /api/profil
2
GET /api/status

Sekarang kirim formulir kontak.

Cari request:

1
POST /api/pesan

Perhatikan request payload.

Contohnya:

1
{
2
  "nama": "Gabuters",
3
  "email": "gabuters@example.com",
4
  "pesan": "Halo, saya sedang belajar backend."
5
}

Kemudian lihat response backend.

Jika berhasil:

1
HTTP/1.1 201 Created

Dengan body seperti:

1
{
2
  "berhasil": true,
3
  "pesan": "Pesan berhasil diterima.",
4
  "id": 1
5
}

Setelah itu, frontend mengirim request ke /api/status untuk memperbarui jumlah pesan.

Di sinilah kita bisa melihat seluruh alur frontend dan backend bekerja bersama.

23. Menguji Validasi Backend#

Validasi frontend membantu pengguna, tetapi backend tetap harus memeriksa data.

Kita bisa mengujinya menggunakan curl.

Untuk contoh yang mudah dijalankan pada berbagai sistem operasi, buat file:

1
pesan-tidak-valid.json

Isi dengan:

1
{
2
  "nama": "",
3
  "email": "bukan-email",
4
  "pesan": ""
5
}

Kemudian jalankan:

1
curl -i -X POST http://localhost:3000/api/pesan \
2
  -H "Content-Type: application/json" \
3
  --data-binary "@pesan-tidak-valid.json"

Pada Windows PowerShell, gunakan satu baris:

1
curl.exe -i -X POST http://localhost:3000/api/pesan -H "Content-Type: application/json" --data-binary "@pesan-tidak-valid.json"

Server seharusnya mengembalikan:

1
400 Bad Request

Dengan pesan validasi.

Coba perbaiki nama, lalu gunakan email tidak valid.

Server tetap harus menolak request.

Ini menunjukkan bahwa validasi backend tidak bergantung pada formulir HTML.

24. Menguji Status Server#

Kita dapat mengakses endpoint:

1
http://localhost:3000/api/status

Contoh response sebelum ada pesan:

1
{
2
  "status": "ok",
3
  "jumlahPesan": 0
4
}

Setelah menerima dua pesan valid:

1
{
2
  "status": "ok",
3
  "jumlahPesan": 2
4
}

Namun, jika server dihentikan lalu dijalankan kembali, jumlah pesan akan kembali menjadi nol.

Mengapa?

Karena array pesanMasuk dibuat ulang ketika proses Node.js dimulai.

Data tidak disimpan ke file atau database.

25. Memahami Batasan Mini Project#

Walaupun mini project ini sudah dapat mengirim pesan ke backend, ada beberapa hal yang perlu diperhatikan.

Pesan belum disimpan permanen#

Semua pesan berada di memori.

Jika server restart, data hilang.

Pesan belum dikirim melalui email#

Backend hanya menerima dan menyimpan pesan sementara.

Tidak ada integrasi layanan email.

Belum ada autentikasi#

Kita tidak membuat sistem login.

Karena itu, kita juga tidak menyediakan endpoint untuk membaca seluruh isi pesan.

Belum ada perlindungan spam#

Endpoint POST /api/pesan belum memiliki rate limiting atau mekanisme anti-spam.

Belum siap untuk deployment publik#

Aplikasi ini belum mencakup seluruh kebutuhan keamanan, monitoring, dan operasional.

Gunakan untuk latihan lokal.

Jika ingin membuat formulir kontak sungguhan, kita perlu menambahkan penyimpanan permanen, pembatasan request, perlindungan data pribadi, dan mekanisme operasional yang sesuai.

26. Kesalahan yang Sering Terjadi#

Server belum dijalankan#

Jika browser tidak dapat membuka halaman, pastikan Node.js sudah berjalan.

Gunakan:

1
node server.js

Port sudah digunakan#

Jika muncul error EADDRINUSE, port yang digunakan kemungkinan sudah dipakai proses lain.

Hentikan server sebelumnya atau ubah port.

File HTML dibuka menggunakan file://#

Jangan membuka file HTML langsung melalui filesystem.

Buka halaman menggunakan:

1
http://localhost:3000

Agar request relatif menuju origin server yang benar.

Formulir tidak mengirim request#

Periksa apakah script.js berhasil dimuat.

Buka tab Console pada Developer Tools untuk melihat error JavaScript.

Pastikan event listener dipasang pada elemen yang sesuai.

Server mengembalikan 415#

Status 415 Unsupported Media Type dapat muncul jika request tidak menggunakan:

1
Content-Type: application/json

Pastikan Fetch API mengirim header yang sesuai.

Server mengembalikan 400#

Periksa format JSON dan aturan validasi.

Pastikan nama, email, dan pesan memenuhi batas yang ditentukan.

Jumlah pesan kembali menjadi nol#

Ini merupakan perilaku yang diharapkan karena data hanya berada di memori.

Kita belum menggunakan database.

Menganggap pesan sudah terkirim melalui email#

Pada proyek ini, respons berhasil hanya berarti backend menerima dan menyimpan pesan sementara di memori.

Tidak ada email yang dikirim.

27. Latihan Mandiri#

Sekarang coba kembangkan mini project ini.

Latihan 1: Menambahkan field subjek#

Tambahkan input:

1
Subjek

Ke formulir kontak.

Perbarui validasi frontend dan backend.

Batasi subjek maksimal 100 karakter.

Latihan 2: Menambahkan waktu server#

Buat endpoint:

1
GET /api/waktu

Yang mengembalikan:

1
{
2
  "waktuServer": "2026-10-09T12:30:00.000Z"
3
}

Nilai waktu harus dihasilkan secara dinamis menggunakan:

1
new Date().toISOString()

Latihan 3: Menampilkan pesan ketika server tidak tersedia#

Jalankan halaman terlebih dahulu.

Kemudian hentikan proses Node.js.

Coba perbarui status server.

Pastikan frontend menampilkan pesan error yang mudah dipahami.

Latihan 4: Menambahkan validasi panjang nama#

Di frontend, tampilkan pesan jika nama melebihi 80 karakter.

Pastikan backend tetap melakukan validasi yang sama.

Latihan 5: Membuat endpoint health check#

Tambahkan:

1
GET /health

Yang mengembalikan:

1
{
2
  "status": "ok"
3
}

Endpoint ini dapat digunakan sebagai pemeriksaan dasar apakah proses server masih merespons request.

Namun, endpoint sederhana tersebut belum membuktikan bahwa seluruh fitur dan dependency aplikasi bekerja dengan baik.

28. Apa yang Sudah Kita Pelajari?#

Melalui mini project ini, kita berhasil menggabungkan konsep dari beberapa seri pembelajaran.

Dari HTML, kita menggunakan struktur halaman dan formulir.

Dari CSS, kita membuat tampilan responsif serta tema terang dan gelap.

Dari JavaScript browser, kita menggunakan DOM, event, dan validasi input.

Dari materi backend, kita menggunakan:

Node.js native.
Modul node:http.
HTTP request dan response.
Endpoint API.
JSON.
Fetch API.
Promise dan async/await.
Validasi backend.
Status code.
Penanganan error.
Penyimpanan sementara di memori.

Sekarang kita sudah mempunyai gambaran bagaimana sebuah fitur website bekerja dari browser hingga backend.

29. Penutup: Seri Backend dan API Selesai!#

Selamat, Gabuters!

Kita sudah menyelesaikan seri Backend dan API dengan JavaScript.

Perjalanan kita dimulai dari memahami konsep backend, server, dan API.

Kemudian kita belajar HTTP, JSON, dan REST API.

Setelah itu, kita membuat HTTP server sendiri menggunakan Node.js native tanpa framework.

Kita melanjutkannya dengan operasi CRUD, membaca request body, dan memvalidasi data.

Kita juga belajar menghubungkan frontend ke backend menggunakan Fetch API.

Dan akhirnya, pada mini project ini, kita berhasil membuat formulir kontak yang benar-benar mengirim request ke backend.

Namun, masih ada satu keterbatasan besar.

Data kita belum tersimpan secara permanen.

Setiap kali proses server dihentikan, pesan yang disimpan di memori akan hilang.

Bagaimana agar data tetap tersedia setelah server restart?

Bagaimana cara menyimpan, mencari, memperbarui, dan menghapus data secara terstruktur?

Untuk menjawabnya, kita akan melanjutkan perjalanan ke seri berikutnya: Database untuk Pemula.

Di sana, kita akan mengenal database relasional, SQL, tabel, primary key, dan cara menghubungkan backend dengan database.

Sampai jumpa di seri berikutnya, Gabuters!

Mini Project: Membuat API untuk Halaman Profil Interaktif

1. Apa yang Akan Kita Buat?#

2. Mengapa Kita Tidak Langsung Menggunakan Database?#

3. Menyiapkan Struktur Proyek#

4. Merancang API Sebelum Menulis Kode#

GET /api/profil#

POST /api/pesan#

GET /api/status#

5. Menyiapkan Backend Node.js#

6. Menyiapkan Penyimpanan Pesan Sementara#

7. Membuat Function Pengirim JSON#

8. Membaca Body JSON dari Request#

9. Menentukan Aturan Validasi Pesan#

10. Membuat Backend Lengkap#

Mengapa data pesan tidak dikembalikan seluruhnya?#

Apakah kode ini siap digunakan untuk website publik?#

11. Membuat Halaman HTML#

12. Membuat CSS dengan Tema Terang dan Gelap#

13. Menyiapkan JavaScript Frontend#

14. Mengambil Data Profil dari Backend#

15. Membuat Tombol Ganti Tema#

16. Membuat Tombol Salam#

17. Menghitung Karakter Pesan#

18. Mengirim Formulir ke Backend#

19. Membuat Fitur Status Server#

20. Membuat JavaScript Frontend Lengkap#

21. Menjalankan Mini Project#

22. Memeriksa Request Menggunakan Developer Tools#

23. Menguji Validasi Backend#

24. Menguji Status Server#

25. Memahami Batasan Mini Project#

Pesan belum disimpan permanen#

Pesan belum dikirim melalui email#

Belum ada autentikasi#

Belum ada perlindungan spam#

Belum siap untuk deployment publik#

26. Kesalahan yang Sering Terjadi#

Server belum dijalankan#

Port sudah digunakan#

File HTML dibuka menggunakan file://#

Formulir tidak mengirim request#

Server mengembalikan 415#

Server mengembalikan 400#

Jumlah pesan kembali menjadi nol#

Menganggap pesan sudah terkirim melalui email#

27. Latihan Mandiri#

Latihan 1: Menambahkan field subjek#

Latihan 2: Menambahkan waktu server#

Latihan 3: Menampilkan pesan ketika server tidak tersedia#

Latihan 4: Menambahkan validasi panjang nama#

Latihan 5: Membuat endpoint health check#

28. Apa yang Sudah Kita Pelajari?#

29. Penutup: Seri Backend dan API Selesai!#

Bagikan Artikel

Bacaan terkait

Coba jalur lain