Cara Mengirim Data dari Form dengan NodeJS

Jika kita lihat dari sebuah judulnya teman-teman pasti sudah bisa menebak ya, dimana kita akan bermain dengan sebuah form, dan isian form itu bisa kita dapatkan isinya, yang berbeda disini untuk cara mengirim data dari form dengan NodeJS, jadi oke nanti yang akan kita lihat isi data itu, jadi jangan kemana-mana simak terus ya.

Untuk pembuatan ini, teman-teman harus sudah tau ya bagaimana cara menggunakan routing, karena nantinya disini saya akan mencoba memanggil routing formnya, lalu template form itu baru akan muncul, kurang lebih seperti itu. jadi tanpa basi untuk cara mengirim data dari form dengan NodeJS sekarang teman-teman siapkan terlebih dahulu file formnya di sebuah folder components, misal form.html, dimana nantinya itu akan kita panggil ya.

jadi jika dilihat saya membuat template form.html seperti itu, simple saja.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="offset-md-4"></div>
            <div class="col-md-4 ">
                <form action="" method="post">
                    <div class="form-group">
                        <label for="name">Nama</label>
                        <input type="text" class="form-control" placeholder="username anda" name="nama">
                    </div>
                    <div class="form-group">
                        <label for="name">Pesan</label>
                        <textarea class="form-control" placeholder="Masukan Pesan anda" name="pesan"></textarea> 
                    </div>
                    <button type="submit" class="btn btn-primary mb-2">Confirm</button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

Disini saya menggunakan sebuah bootstrap ya supaya lebih rapih, dan saya membuat sebuah isian form, hanya dua yaitu nama dan pesan, jadi ketika kita sudah memasukan namanya, dan pesannya, maka data itu akan kita tampilkan, kurang lebih seperti itu.

Oke dan inilah prosesnya

var http = require("http")
var fs = require("fs")
var url = require("url")
var qString = require("querystring")

http.createServer(function(req, res){
    if(req.url != "/favicon.ico"){
        var access = url.parse(req.url)
        if(access.pathname == "/form"){
            if(req.method.toUpperCase() == "POST"){
                var data_post = ""
                req.on("data", function(getData){
                    data_post += getData
                });

                req.on("end", function(){
                    data_post = qString.parse(data_post)
                    res.writeHead(200, {"Content-Type" : "text/plain"})
                    res.end(JSON.stringify(data_post))
                })
            }else{
                res.writeHead(200, {"Content-Type": "text/html"})
                fs.createReadStream("./components/form.html").pipe(res)
            }
            
        }else{
            res.writeHead(404, {"Content-Type": "text/plain"})
            res.end("Page Not FOUND BRO")
        }
    }
}).listen(3000)
console.log("server 3000 sedang berjalan")

jika kita lihat pada kode di atas, saya hanya mensetting jika url itu adalah sebuah form ya, tetapi jika tidak maka page not found. kurang lebih seperti itu, dan jika kita runing kode di atas maka seperti ini.

dan jika dilihat maka akan tampil seperti gambar di sebelah kanan ya, oke kurang lebih seperti itu cara mengirim data dari form dengan NodeJS semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Cara Mengirim Data dari Form dengan NodeJS

Kategori