Penanganan Input Data di Express.js

Saat membangun aplikasi web, menangani data input pengguna merupakan aspek penting untuk membuat fitur yang interaktif dan fleksibel. Di Express.js lingkungan pengembangan, Anda dapat dengan mudah memproses input data dari formulir dan berbagai permintaan HTTP seperti GET, POST, PUT, PATCH, dan DELETE. Berikut adalah panduan mendetail dengan berbagai metode dan contoh untuk membantu Anda mencapainya:

Menerima Informasi dari Form

Membuat HTML Form: Mulailah dengan membuat HTML form dalam file Pug atau EJS. Pastikan Anda menyetel action atribut di <form> tag untuk menentukan rute tujuan pengiriman permintaan.

<form action="/process" method="post">  
  <input type="text" name="username" placeholder="Username">  
  <input type="password" name="password" placeholder="Password">  
  <button type="submit">Submit</button>  
</form>  

Menangani POST Permintaan: Di pengendali rute, gunakan body-parser middleware untuk mengekstrak data dari POST permintaan.

const bodyParser = require('body-parser');  
  
app.use(bodyParser.urlencoded({ extended: true }));  
  
app.post('/process',(req, res) => {  
  const username = req.body.username;  
  const password = req.body.password;  
  // Process data and return results  
});  

 

Menangani Berbagai Jenis Permintaan dengan Contoh Login

Mengirim POST Permintaan dari Login Form: Dalam HTML form, pastikan Anda mengatur post metode dan action atribut untuk menentukan rute kemana POST permintaan akan dikirim.

<form action="/login" method="post">  
  <input type="text" name="username" placeholder="Username">  
  <input type="password" name="password" placeholder="Password">  
  <button type="submit">Login</button>  
</form>  

Menangani POST Permintaan Login: Di route handler, gunakan body-parser middleware untuk mengekstrak data dari POST permintaan dan melakukan pemrosesan login.

const bodyParser = require('body-parser');  
  
app.use(bodyParser.urlencoded({ extended: true }));  
  
app.post('/login',(req, res) => {  
  const username = req.body.username;  
  const password = req.body.password;  
  
  // Check login information  
  if(username === 'admin' && password === '123') {  
    res.send('Login successful!');  
  } else {  
    res.send('Login failed!');  
  }  
});  

 

Penanganan PUT dan DELETE Permintaan

Menangani PUT Permintaan: Untuk menangani PUT permintaan, Anda dapat menggunakan rute dan middleware untuk mengekstrak data dari permintaan dan melakukan pembaruan yang sesuai.

app.put('/update/:id',(req, res) => {  
  const id = req.params.id;  
  const updatedData = req.body;  
  // Perform data update with corresponding ID  
});  

Menangani DELETE Permintaan: Untuk menangani DELETE permintaan, gunakan juga rute dan middleware untuk mengidentifikasi ID dan melakukan penghapusan.

app.delete('/delete/:id',(req, res) => {  
  const id = req.params.id;  
  // Perform data deletion with corresponding ID  
});  

 

Kesimpulan

Memahami cara menangani data input pengguna dan berbagai permintaan HTTP sangat penting dalam pengembangan web. Dengan menggunakan Express.js dan middleware seperti body-parser, Anda dapat dengan mudah memproses masukan dari formulir dan menangani berbagai permintaan HTTP termasuk GET, POST, PUT, PATCH, dan DELETE. Ini memungkinkan Anda membuat fitur interaktif dan fleksibel di situs web Anda.