[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-belajar-nodejs-form":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":10,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},444,"belajar-nodejs-form","Belajar NodeJs - Cara Handle Form Input di Nodejs","Lanjutan dari series belajar nodejs, kali ini kita akan belajar bagaimana cara menghadle form input dalam nodejs? Jika pada artikel sebelumnya, kita sudah belajar bagaimana cara membuat website statis",null,[],"2021-02-27T16:00:00Z","2026-07-14T04:39:40.150878Z","\u003Cp>Lanjutan dari series belajar nodejs, kali ini kita akan belajar bagaimana cara menghadle form input dalam nodejs?\u003C\u002Fp>\u003Cp>Jika pada artikel sebelumnya, kita sudah belajar bagaimana cara membuat website statis dengan nodejs, kali ini kita akan belajar cara handle form input, baik itu GET ataupun POST Request.\u003C\u002Fp>\u003Cp>Lalu bagaimana caranya?\u003C\u002Fp>\u003Cp>Yuk langsung belajar guys.\u003C\u002Fp>\u003Ch4>Daftar Isi:\u003C\u002Fh4>\u003Ch2>Perbedaan GET & POST Request\u003C\u002Fh2>\u003Cp>Jadi ada 2 tipe cara agar client bisa mengirim data ke server, yaitu GET & POST.\u003C\u002Fp>\u003Cp>Apa perbedaannya?\u003C\u002Fp>\u003Cp>Method GET adalah cara mengirim data dengan menaruh informasinya di url, atau biasa disebut dengan query string.\u003C\u002Fp>\u003Cp>Method POST adalah cara mengirim data dari client ke server dimana datanya disimpan dalam request body. Jadi secara kasat mata tidak dapat kita lihat secara langsung.\u003C\u002Fp>\u003Ch2>Handle GET Request\u003C\u002Fh2>\u003Cp>Untuk menghadle GET request kita akan menggunakan sebuah module dari nodejs yaitu \u003Ccode>url\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Module \u003Ccode>url\u003C\u002Fcode> bisa digunakan untuk memparsing url string, sehingga didapatkan bagian-bagian dari url tersebut.\u003C\u002Fp>\u003Cp>Dalam sebuah url, terdiri dari 4 bagian yaitu:\u003C\u002Fp>\u003Col>\u003Cli>Protocol: ini biasanya http atau https\u003C\u002Fli>\u003Cli>Hostname: Biasa kita ketahui sebagai domain name\u003C\u002Fli>\u003Cli>Pathname\u003C\u002Fli>\u003Cli>Params\u003C\u002Fli>\u003C\u002Fol>\u003Cfigure>\u003Cfigcaption>\u003Ci>Penjelasan tentang bagian url\u003C\u002Fi>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>Nah module \u003Ccode>url\u003C\u002Fcode> bisa kita gunakan untuk mendapatkan data diatas dari sebuah url.\u003C\u002Fp>\u003Cp>Contohnya ada dibawah ini:\u003C\u002Fp>\u003Cp>Kita buat sebuah file baru dengan nama \u003Ccode>test-url.js\u003C\u002Fcode>. Save dan jalankan command \u003Ccode>node test-url.js\u003C\u002Fcode>.\u003C\u002Fp>\u003Cpre>\u003Ccode>var url = require('url');\nvar adr = 'https:\u002F\u002Fngide.net\u002Fsearch.php?year=2021&month=february';\nvar q = url.parse(adr, true);\n\u002F\u002Fhasil parse URL\nconsole.log(\"protocol: \" + q.protocol);\nconsole.log(\"hostname: \" + q.host);\nconsole.log(\"pathname: \" + q.pathname);\nconsole.log(\"params: \" + q.search);\nvar query = q.query; \u002F\u002F ambil query string sebagai objek\nconsole.log(query);\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Maka hasilnya akan seperti berikut ini:\u003C\u002Fp>\u003Cfigure>\u003Cfigcaption>\u003Ci>Tampilan untuk parsing data url\u003C\u002Fi>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>Lalu bagaimana cara mengdapatkan data GET dari url?\u003C\u002Fp>\u003Cp>Pertama, buat sebuah file html dengan sebuah form dengan GET method. Kita beri nama \u003Ccode>form-get.html\u003C\u002Fcode>.\u003C\u002Fp>\u003Cpre>\u003Ccode><!DOCTYPE html>\n<html>\n<head>\n\t<title>Method Get - NodeJs<\u002Ftitle>\n<\u002Fhead>\n<body>\n\t<form method=\"GET\" action=\"\u002Fget-action\">\n\t\tCari data: \n\t\t<input type=\"text\" name=\"search\" placeholder=\"Cari data disini..\">\n\t\t<button type=\"submit\">Cari<\u002Fbutton>\n\t<\u002Fform>\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kemudian kita buat sebuah file js bernama \u003Ccode>get-server.js\u003C\u002Fcode>.\u003C\u002Fp>\u003Cpre>\u003Ccode>var http = require('http');\nvar url = require('url');\nvar fs = require('fs');\nvar port = 8080\nhttp.createServer(function (req, res) {\n var q = url.parse(req.url, true);\n if(q.pathname == \"\u002Fget-action\" && req.method === \"GET\"){\n \u002F\u002F ambil parameter dari URL\n var search = q.query.search;\n \n if( search ){\n \u002F\u002F Ambil data dari form dengan metode GET\n res.writeHead(200, {'Content-Type': 'text\u002Fhtml'});\n res.write(\"<h3>Hasil Pencarian:<\u002Fh3>\");\n res.write(\"<p>Anda mencari: <b>\" + search + \"<\u002Fb><\u002Fp>\");\n res.write(\"<pre>Website ini menampilkan data GET method dari form sebelumnya.<\u002Fpre>\")\n res.end(\"<a href='\u002F'>Kembali<\u002Fa>\");\n } \n }else {\n \u002F\u002F tampilkan form search\n fs.readFile('form-get.html', (err, data) => {\n if (err) { \u002F\u002F kirim balasan error\n res.writeHead(404, {'Content-Type': 'text\u002Fhtml'});\n return res.end(\"404 Not Found\");\n } \n \u002F\u002F kirim form search.html\n res.writeHead(200, {'Content-Type': 'text\u002Fhtml'});\n res.write(data);\n return res.end();\n });\n }\n \n}).listen(port);\nconsole.log('server is running on http:\u002F\u002Flocalhost:'+ port);\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jalankan get-server.js dengan command:\u003C\u002Fp>\u003Cpre>\u003Ccode>node get-server.js\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kita bisa membuka url http:\u002F\u002Flocalhost:8080\u002F\u003C\u002Fp>\u003Cp>Tampilannya akan seperti berikut ini:\u003C\u002Fp>\u003Cfigure>\u003Cfigcaption>\u003Ci>Demo GET request di Nodejs\u003C\u002Fi>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>Nah itulah cara memproses GET request di dalam nodejs.\u003C\u002Fp>\u003Ch2>Handle POST Request\u003C\u002Fh2>\u003Cp>Untuk menghadle POST request di Nodejs, kita memerlukan bantuan dari modul \u003Ccode>querstring\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Dengan modul ini kita bisa me\u003C\u002Fp>\u003Cp>Pertama buat sebuah form dengan method post.\u003C\u002Fp>\u003Cp>Kita beri nama \u003Ccode>login.html\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode><!DOCTYPE html>\n<html>\n<head>\n\t<title>Login - NodeJs<\u002Ftitle>\n<\u002Fhead>\n<body>\n\t<form method=\"POST\" action=\"\u002Flogin\">\n\t\tUsername: <br>\n\t\t<input type=\"email\" name=\"email\" placeholder=\"Masukkan email..\">\n\t\t<br>\n\t\tPassword: <br>\n\t\t<input type=\"password\" name=\"password\"><br>\n\t\t<button type=\"submit\">Login<\u002Fbutton>\n\t<\u002Fform>\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Buka lagi file \u003Ccode>method-server.js\u003C\u002Fcode> dan tambahkan beberapa script baru didalamnya untuk menghadle file login.html dan POST requestnya.\u003C\u002Fp>\u003Cpre>\u003Ccode>var http = require('http');\nvar url = require('url');\nvar fs = require('fs');\nvar qs = require('querystring');\nvar port = 8080\nhttp.createServer(function (req, res) {\n var q = url.parse(req.url, true);\n console.log(q.pathname)\n if(q.pathname == \"\u002Fget-action\" && req.method === \"GET\"){\n \u002F\u002F ambil parameter dari URL\n var search = q.query.search;\n \n if( search ){\n \u002F\u002F Ambil data dari form dengan metode GET\n res.writeHead(200, {'Content-Type': 'text\u002Fhtml'});\n res.write(\"<h3>Hasil Pencarian:<\u002Fh3>\");\n res.write(\"<p>Anda mencari: <b>\" + search + \"<\u002Fb><\u002Fp>\");\n res.write(\"<pre>Website ini menampilkan data GET method dari form sebelumnya.<\u002Fpre>\")\n res.end(\"<a href='\u002F'>Kembali<\u002Fa>\");\n } \n } else if(q.pathname == '\u002Flogin' && req.method === 'GET') {\n \u002F\u002F tampilkan form login\n fs.readFile('login.html', (err, data) => {\n if (err) { \u002F\u002F kirim balasan error\n res.writeHead(404, {'Content-Type': 'text\u002Fhtml'});\n return res.end(\"404 Not Found\");\n } \n \u002F\u002F kirim form search.html\n res.writeHead(200, {'Content-Type': 'text\u002Fhtml'});\n res.write(data);\n return res.end();\n });\n }else if(q.pathname == '\u002Flogin' && req.method === 'POST') {\n var body = '';\n req.on('data', function (data) {\n body += data;\n \u002F\u002F Too much POST data, kill the connection!\n \u002F\u002F 1e6 === 1 * Math.pow(10, 6) === 1 * 1000000 ~~~ 1MB\n if (body.length > 1e6)\n req.connection.destroy();\n });\n req.on('end', function () {\n var postData = qs.parse(body);\n \n \u002F\u002F cek login\n if( postData.email === \"admin@ngide.net\" && postData.password === \"yukngide\"){\n res.writeHead(200, {'Content-Type': 'text\u002Fhtml'});\n res.write('<h2>Selamat datang admin!<\u002Fh2> ');\n res.write('<p>Email: '+postData.email+'<\u002Fp>');\n res.write('<p>Password: '+postData.password+'<\u002Fp>');\n res.write(\"<a href='\u002Flogin'>kembali<\u002Fa>\");\n res.end();\n } else {\n res.writeHead(200, {'Content-Type': 'text\u002Fhtml'});\n res.write('<h2>Login Gagal!<\u002Fh2> ');\n res.write(\"<a href='\u002Flogin'>coba lagi<\u002Fa>\");\n res.end();\n }\n });\n } else{\n \u002F\u002F tampilkan form search\n fs.readFile('form-get.html', (err, data) => {\n if (err) { \u002F\u002F kirim balasan error\n res.writeHead(404, {'Content-Type': 'text\u002Fhtml'});\n return res.end(\"404 Not Found\");\n } \n \u002F\u002F kirim form search.html\n res.writeHead(200, {'Content-Type': 'text\u002Fhtml'});\n res.write(data);\n return res.end();\n });\n }\n \n}).listen(port);\nconsole.log('server is running on http:\u002F\u002Flocalhost:'+ port);\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jalankan kembali command \u003Ccode>node method-server.js\u003C\u002Fcode> dan buka url ini http:\u002F\u002Flocalhost:8080\u002Flogin\u003C\u002Fp>\u003Cp>Kita akan memiliki sebuah tampilan login form.\u003C\u002Fp>\u003Cfigure>\u003Cfigcaption>\u003Ci>Contoh Method Post\u003C\u002Fi>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>Kita masukkan email: admin@ngide.net dan password: yukngide agar berhasil login..\u003C\u002Fp>\u003Cp>Silakan masukkan email dan password yang berbeda untuk mengetest tidak bisa login.\u003C\u002Fp>\u003Ch2>Penutup\u003C\u002Fh2>\u003Cp>Jadi itulah cara bagaimana menghadle GET dan POST request dengan nodejs. Mudah bukan?\u003C\u002Fp>\u003Cp>Kalian harus memahami konsep ini karena nanti jika kalian membuat sebuah aplikasi yang lebih kompleks, maka penerapan method GET dan POST ini wajib dilakukan.\u003C\u002Fp>\u003Cp>Cek source codenya disini ya: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyusidabcs\u002Fnodejs-form\">https:\u002F\u002Fgithub.com\u002Fyusidabcs\u002Fnodejs-form\u003C\u002Fa>\u003C\u002Fp>\u003Cp>Jadi sudah cukup belajar nodejs? Kita lanjutkan ke tutorial selanjutnya ya.\u003C\u002Fp>\u003Cp>\u003Cb>Series Belajar NodeJS Sebelumnya:\u003C\u002Fb>\u003C\u002Fp>\u003Col>\u003Cli>Belajar NodeJs - Dasar dan Persiapan Belajar NodeJs\u003C\u002Fli>\u003Cli>Belajar NodeJs - Mengenal Package Management NPM\u003C\u002Fli>\u003Cli>Belajar NodeJs - Membuat Website Sederhana Dengan Nodejs\u003C\u002Fli>\u003C\u002Fol>\u003Cp>\u003Cb>Series Belajar NodeJS Lainnya:\u003C\u002Fb>\u003C\u002Fp>\u003Col>\u003Cli>Belajar NodeJs - Membuat CRUD dengan NodeJs dan MySql\u003C\u002Fli>\u003C\u002Fol>","Lanjutan dari series belajar nodejs, kali ini kita akan belajar bagaimana cara menghadle form input dalam nodejs? Jika pada artikel sebelumnya, kita sudah belaj",[],[],0]