Tutorial ExpressJS 9 : Menggunakan Form Data ExpressJS

Tutorial Express 9 : Menggunakan Form Data ExpressJS. Formulir adalah bagian integral dari web. Hampir setiap situs yang kami kunjungi menawarkan formulir yang kami kirimkan atau dapatkan beberapa informasi untuk kami.

Tutorial Express 9 : Menggunakan Form Data ExpressJS

Tutorial Express 9 : Menggunakan Form Data ExpressJS. Formulir adalah bagian integral dari web. Hampir setiap situs yang kami kunjungi menawarkan formulir yang kami kirimkan atau dapatkan beberapa informasi untuk kami. 

Untuk memulai formulir, pertama-tama kita akan menginstal body-parser (untuk mengurai data JSON dan url-encoded) dan multer (untuk parsing multipart / form data) middleware. Untuk menginstal ini, masuk ke terminal Anda dan gunakan:

npm install --save body-parser multer

Ganti isi file index.js Anda dengan kode berikut:

var express = require('express');
var bodyParser = require('body-parser');
var multer = require('multer');
var upload = multer(); 
var app = express();

app.get('/', function(req, res){
   res.render('form');
});

app.set('view engine', 'pug');
app.set('views', './views');

app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
app.use(upload.array()); // for parsing multipart/form-data
app.use(express.static('public'));

app.post('/', function(req, res){
    console.log(req.body);
    res.send("recieved your request!");
});

app.listen(3000);

Hal baru yang kita lakukan di sini adalah mengimpor parser dan multer tubuh. Kami menggunakan body parser untuk memecah permintaan header json dan x-www-form-urlencoded, sementara kami menggunakan multer untuk parsing multipart / form-data.

Mari kita membuat bentuk html untuk menguji ini! Buat tampilan baru yang disebut form.pug dengan kode berikut:

html
    head
        title Form Tester
    body
        form(action="/", method="POST")
            div
                label(for="say") Say: 
                input(name="say" value="Hi")
            br
            div
                label(for="to") To: 
                input(name="to" value="Express forms")
            br
            button(type="submit") Send my greetings

Jalankan server Anda menggunakan:

nodemon index.js

Sekarang masuk ke localhost: 3000/ dan isi form sesuai keinginan anda, dan kirimkan. Anda akan mendapatkan respon sebagai berikut:

Lihat konsol Anda, ini akan menunjukkan isi permintaan Anda sebagai objek JavaScript. Sebagai contoh:

Objek req.body berisi fungsi permintaan parsing Anda. Untuk menggunakan field dari objek itu, gunakan saja seperti objek JS biasa.

Ini hanya salah satu cara untuk mengirim permintaan. Ada banyak cara lain, namun tidak relevan untuk dibahas di sini, karena aplikasi Ekspres kami akan menangani semua permintaan dengan cara yang sama. Untuk membaca lebih lanjut tentang berbagai cara untuk mengajukan permintaan.

SUmber : Tutorialspoint.com