NodeJS #13: Menerima Data dari Form (GET dan POST)

byFerdian Rahabista -
0

🍭 NodeJS #13: Menerima Data dari Form (GET dan POST)

Halo, calon developer web! 👋

Di tutorial sebelumnya kita sudah belajar membuat halaman dinamis dengan EJS. Sekarang saatnya kita belajar menerima input dari pengguna melalui form HTML. Form adalah cara paling umum untuk mengirim data dari browser ke server. Kita akan belajar dua method utama: GET (data dikirim melalui URL) dan POST (data dikirim secara tersembunyi di body request). Yuk, kita praktik! 🚀

🧐 GET vs POST

Sebelum mulai, kita pahami dulu perbedaan GET dan POST:

  • GET: Data dikirim sebagai bagian dari URL (query string). Cocok untuk permintaan yang tidak mengubah data di server, misalnya pencarian. Data terlihat di URL, jadi tidak aman untuk informasi sensitif.
  • POST: Data dikirim dalam body request, tidak terlihat di URL. Cocok untuk mengirim data yang mengubah state server, seperti form pendaftaran, login, dll. Lebih aman karena data tidak tersimpan di history browser.

Di Express, data GET bisa diakses melalui req.query, sedangkan data POST membutuhkan middleware tambahan untuk membaca body, dan diakses melalui req.body.

📝 Membuat Form Sederhana (HTML)

Kita akan buat halaman form dengan dua input: nama dan umur. Buat file views/form.ejs:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Form</title>
</head>
<body>
    <h1>Form Data Diri</h1>

    <form action="/submit-get" method="GET">
        <h2>Method GET</h2>
        <label>Nama: <input type="text" name="nama"></label><br>
        <label>Umur: <input type="number" name="umur"></label><br>
        <button type="submit">Kirim (GET)</button>
    </form>

    <hr>

    <form action="/submit-post" method="POST">
        <h2>Method POST</h2>
        <label>Nama: <input type="text" name="nama"></label><br>
        <label>Umur: <input type="number" name="umur"></label><br>
        <button type="submit">Kirim (POST)</button>
    </form>
</body>
</html>

Perhatikan atribut action (tujuan pengiriman) dan method (GET atau POST). Atribut name pada input penting karena akan menjadi kunci data yang dikirim.

🖥️ Menangani Data GET (req.query)

Di server, kita perlu membuat route untuk /submit-get yang menerima method GET. Data akan tersedia di req.query.

Buat file app.js:

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

// Set EJS
app.set('view engine', 'ejs');

// Middleware untuk membaca data dari form POST (nanti kita bahas)
app.use(express.urlencoded({ extended: true }));

// Tampilkan halaman form
app.get('/form', (req, res) => {
  res.render('form');
});

// Route untuk menangani GET dari form
app.get('/submit-get', (req, res) => {
  const nama = req.query.nama || '(tidak diisi)';
  const umur = req.query.umur || '(tidak diisi)';
  res.send(`
    <h1>Data Diterima (GET)</h1>
    <p>Nama: ${nama}</p>
    <p>Umur: ${umur}</p>
    <a href="/form">Kembali ke form</a>
  `);
});

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

Coba jalankan, akses /form, isi dan kirim form GET. Perhatikan URL berubah menjadi /submit-get?nama=...&umur=.... Data tampak di URL. Server mengambilnya dari req.query.

🔒 Menangani Data POST (req.body)

Untuk POST, kita perlu middleware express.urlencoded() untuk membaca data dari body (karena form biasa mengirim sebagai application/x-www-form-urlencoded). Middleware ini sudah kita pasang di atas.

Tambahkan route POST:

// Route untuk menangani POST dari form
app.post('/submit-post', (req, res) => {
  const nama = req.body.nama || '(tidak diisi)';
  const umur = req.body.umur || '(tidak diisi)';
  res.send(`
    <h1>Data Diterima (POST)</h1>
    <p>Nama: ${nama}</p>
    <p>Umur: ${umur}</p>
    <a href="/form">Kembali ke form</a>
  `);
});

Sekarang coba form POST. Perhatikan URL tidak berubah (tetap /submit-post), data tidak terlihat. Server mengambil dari req.body.

⚠️ Penting: Jangan lupa pasang middleware express.urlencoded({ extended: true }) sebelum route POST. Tanpa itu, req.body akan undefined.

🧪 Contoh Lebih Menarik: Menampilkan Data dengan EJS

Daripada hanya mengirim teks biasa, lebih baik kita render halaman dengan EJS. Buat file views/hasil.ejs:

<!DOCTYPE html>
<html>
<head>
    <title>Hasil Form</title>
</head>
<body>
    <h1>Data yang Diterima</h1>
    <p>Nama: <%= nama %></p>
    <p>Umur: <%= umur %></p>
    <a href="/form">Kembali ke form</a>
</body>
</html>

Kemudian ubah route GET dan POST untuk merender file ini:

app.get('/submit-get', (req, res) => {
  res.render('hasil', {
    nama: req.query.nama || '(tidak diisi)',
    umur: req.query.umur || '(tidak diisi)'
  });
});

app.post('/submit-post', (req, res) => {
  res.render('hasil', {
    nama: req.body.nama || '(tidak diisi)',
    umur: req.body.umur || '(tidak diisi)'
  });
});

Hasilnya akan lebih rapi.

🛡️ Keamanan Sederhana

Data dari pengguna tidak boleh langsung dipercaya. Selalu validasi dan bersihkan. Untuk pemula, minimal kita lakukan pengecekan apakah data ada. Contoh sederhana: pastikan umur berupa angka.

let umur = parseInt(req.body.umur);
if (isNaN(umur)) {
  umur = 'Tidak valid';
}

Di tutorial lanjutan kita akan belajar validasi lebih baik.

📂 Menggabungkan dengan File Statis

Kita bisa menambahkan CSS untuk mempercantik form. Gunakan middleware express.static seperti tutorial #11. Buat folder public dengan css/style.css, lalu link di form.ejs.

🧩 Penjelasan Tambahan

  • express.urlencoded({ extended: true }) – middleware untuk membaca data dari form biasa. extended: true mengizinkan data kaya (array, objek) menggunakan library qs. Untuk pemula, cukup gunakan true.
  • req.query – objek yang berisi parameter query string dari URL.
  • req.body – objek yang berisi data dari body (POST, PUT, dll), tersedia setelah menggunakan middleware yang sesuai.

🧪 Latihan Mandiri

  1. Buat form pendaftaran dengan field: nama, email, password (method POST). Tampilkan data yang dikirim (jangan tampilkan password di halaman hasil).
  2. Buat halaman login sederhana dengan method POST, cek apakah username "admin" dan password "rahasia". Jika benar, tampilkan "Selamat datang admin", jika salah tampilkan "Login gagal".
  3. Buat form pencarian dengan method GET, kirim query ke route /cari, tampilkan "Kamu mencari: [kata kunci]".

📚 Rangkuman

Method Akses di Express Middleware Contoh URL
GET req.query Tidak perlu /cari?q=nodejs
POST (form) req.body express.urlencoded() /submit (body tersembunyi)

🏁 Penutup

Sekarang kamu sudah bisa menerima data dari form, baik dengan GET maupun POST. Kemampuan ini sangat penting untuk membuat aplikasi web interaktif. Di tutorial selanjutnya (NodeJS #14) kita akan belajar tentang Apa itu API? – pengertian API dan contoh sederhana. 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.

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال