author Ahmad Muhardian

Belajar Nodejs #07: Bagaimana Cara Mengambil Data dari Form?


Tutorial Nodejs: Mengambil data dari Form

Pada tutorial sebelumnya, kita sudah membuat webserver statis yang melayani request dengan file HTML.

Kekurangannya:

Webserver ini tidak bisa menerima data dari client.

Misalnya:

Kita ingin kirim data ke server melalui form.

Pertanyaannya:

Bagaimana cara kita mengambil data dari form?

Saat mencari jawaban dari pertanyaan ini, banyak yang merekomenadsikan menggunakan body-parser.

Body parser merupakan modul nodejs yang digunakan untuk mengambil data dari form pada framework Express.

Namun, agar lebih paham bagaimana form diproses pada Nodejs…

…kita tidak akan menggunakan modul tersebut.

Isya’allah nanti kita pelajari saat sudah masuk ke Expressjs.

Metode Pengiriman Data Form

Secara umum, ada dua metode pengiriman data pada form:

  1. Metode GET;
  2. dan metode POST.

Metode ini dapat kita definisikan saat membuat form:

<form method="GET" action="/send/">
...
</form>

Apa perbedaan metode GET dengan POST?

Metode GET akan mengirim data melalui URL, sedangkan metode POST akan mengirim data melalui latar belakang.

Metode GET cocok digunakan untuk pencarian, karena dia mengirim data melalui URL.

Sedangkan metode POST, cocoknya digunakan pada form login.

Untuk lebih jelasnya.

Mari kita coba…

Mengambil data Menggunakan Metode GET

Untuk mengambil data dari metode form dengan metode GET, kita bisa menggunakan modul url. Karena kita akan mengambil data dari parameter URL.

Jika kamu belum tahu tentang modul url, silakan baca penjelasan tentang modul URL di: “Belajar Nodejs #6: Menggunakan Modul URL untuk Membuat Webserver Statis”

Lanjut…

Silakan buat file baru bernama form_get.js, lalu isi dengan kode berikut:

var http = require('http');
var url = require('url');
var fs = require('fs');

http.createServer(function (req, res) {
    var q = url.parse(req.url, true);

    if(q.pathname == "/search/" && req.method === "GET"){
        // ambil parameter dari URL
        var keyword = q.query.keyword;
        
        if( keyword ){
            // Ambil data dari form dengan metode GET
            res.writeHead(200, {'Content-Type': 'text/html'});
            res.write("<h3>Search Results:</h3>");
            res.write("<p>Anda mencari: <b>" + keyword + "</b></p>");
            res.write("<pre>Tidak ada hasil! Maaf website ini masih dalam pengembangan</pre>")
            res.end("<a href='/search/'>Kembali</a>");
        } else {
            // tampilkan form search
            fs.readFile('search.html', (err, data) => {
                if (err) { // kirim balasan error
                    res.writeHead(404, {'Content-Type': 'text/html'});
                    return res.end("404 Not Found");
                } 
                // kirim form search.html
                res.writeHead(200, {'Content-Type': 'text/html'});
                res.write(data);
                return res.end();
            });
        }
    }

  
}).listen(8000);

console.log('server is running on http://localhost:8000');

Setelah itu, buat file untuk form-nya dengan nama search.html dan isi sebagai berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutorial Form Nodejs</title>
</head>
<body>

    <form action="/search/" method="GET">
    <label>Cari: </label>
    <input type="text" name="keyword" placeholder="kata kunci..." />
    <input type="submit" value="Cari" />
    </form>
    
</body>
</html>

Perhatikan di sana ada input dengan nama keyword. Ini akan menjadi nama key dalam mengambil parameter.

var keyword = q.query.keyword;

Sekarang coba eksekusi dan buka http://localhost:8000/search/.

Hasilnya:

Mengambil data dari form dengan metode GET

Mengambil data Menggunakan Metode POST

Sedangkan untuk mengambil data dari form dengan metode POST, kita harus menggunakan modul querystring.

Apa bedanya dengan modul url?

Modul url berfungsi untuk parsing URL. Di sana memang ada fungsi untuk parse query string. Namun, itu query string yang dari URL.

Sedangkan modul querystring memang khusus untuk mengurai (parsing) query string.1

Ngomong-ngomong…

Query string itu apaan sih?

Yang disebut dengan query string itu yang ini:

foo=bar&abc=xyz&abc=123

Kamu sering melihatnya di URL bukan.

Contoh URL

Kadang query string disebut juga dengan parameter.

Nah, pada form yang menggunakan metode POST…

…sebenarnya ia mengirim query string juga. Namun dikirim secara background.

Inilah sebabnya kita tidak bisa menggunakan modul url.

Modul querystring sudah ada di dalam Nodejs, sehingga kita tidak perlu menginstalnya dengan NPM (Node Package Manager).

Untuk dapat menggunakan modul querystring, kita harus mengimpornya terlebih dahulu dengan fungsi require().

var qs = require('querystring');

Untuk lebih jelasnya, mari kita coba…

Buatlah file baru bernama form_post.js dengan isi sebagai berikut:

var http = require('http');
var qs = require('querystring');
var fs = require('fs');

http.createServer(function (req, res) {

    if(req.url === "/login/" && req.method === "GET"){
        // tampilkan form login
        fs.readFile("login_form.html", (err, data) => {
            if (err) { // kirim balasan error
                res.writeHead(404, {'Content-Type': 'text/html'});
                return res.end("404 Not Found");
            } 
            // kirim form login_form.html
            res.writeHead(200, {'Content-Type': 'text/html'});
            res.write(data);
            return res.end();
        });
    }

    if(req.url === "/login/" && req.method === "POST"){
        // ambil data dari form dan proses
        var requestBody = '';
        req.on('data', function(data) {
            // tangkap data dari form
            requestBody += data;

            // kirim balasan jika datanya terlalu besar
            if(requestBody.length > 1e7) {
              res.writeHead(413, 'Request Entity Too Large', {'Content-Type': 'text/html'});
              res.end('<!doctype html><html><head><title>413</title></head><body>413: Request Entity Too Large</body></html>');
            }
        });

        // kita sudah dapat datanya
        // langkah berikutnya tinggal di-parse
        req.on('end', function() {
            var formData = qs.parse(requestBody);

            // cek login
            if( formData.username === "petanikode" && formData.password === "kopi"){
                res.writeHead(200, {'Content-Type': 'text/html'});
                res.write('<h2>Selamat datang bos!</h2> ');
                res.write('<p>username: '+formData.username+'</p>');
                res.write('<p>password: '+formData.password+'</p>');
                res.write("<a href='/login/'>kembali</a>");
                res.end();
            } else {
                res.writeHead(200, {'Content-Type': 'text/html'});
                res.write('<h2>Login Gagal!</h2> ');
                res.write("<a href='/login/'>coba lagi</a>");
                res.end();
            }
            
          });
    }
  
}).listen(8000);

console.log('server is running on http://localhost:8000');

Setelah itu, buat file HTML untuk form-nya dengan nama login_form.html dan isi sebagai berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutorial Form Nodejs</title>
</head>
<body>

    <form action="/login/" method="POST">
    <label for="username">Username: </label>
    <input type="text" name="username" placeholder="username..." />
    <br>
    <label for="password">Password: </label>
    <input type="password" name="password" placeholder="password..." />
    <br>
    <input type="submit" value="Login" />
    </form>
    
</body>
</html>

Hasilnya:

Login pada Nodejs

Ketika saya memasukkan username dian dan password dian, maka login akan gagal.

…dan saat saya memasukkan username petanikode dan password kopi, maka login akan berhasil.

Ini karena kita sudah buat logikanya di dalam kode program.

Apa Selanjutnya?

Kita sudah belajar cara mengambil data dari form. Cara-cara yang digunakan di atas tentu masih banyak kekurangannya.

Di antaranya:

Karena itu, banyak yang merekomendasikan menggunakan framework dan library seperti body-parser.

Sekian dulu untuk tutorial kali ini…

Ada pertanyaan?