Blogger Jateng
Home / Tutorial

Menangani Formulir dan Permintaan di Express.js

Salah satu bagian terpenting dalam membangun aplikasi web adalah menangani input pengguna menggunakan form. Di Node. js, Express. Js bertanya lebih dulu tentang bagaimana cara terbaik untuk menangani kiriman dan permintaan formulir. Dalam artikel ini, saya akan menunjukkan kepada Anda bagaimana cara menggunakan formulir dan menangani permintaan dengan Express. js, menampilkan praktik terbaik dan teknik-teknik yang bermanfaat. 

Kata kunci: formulir, permintaan

Formulir memungkinkan pengguna untuk mengirim data ke server, biasanya dengan menyediakan metode seperti GET atau POST. Formulir membuat permintaan HTTP yang mengirimkan input pengguna dengan menggunakan parameter kueri, data yang dikodekan dalam URL, atau objek JSON. Express.js mengurai dan memproses permintaan ini secara langsung.

sumber: naukri.com

Menyiapkan Express.js

Sekarang sebelum kita membahas penanganan formulir, mari kita siapkan aplikasi express:

1. Instal Express:

npm install express

2. Buat Server Express Dasar:

const express = require('express');

const app = express();

const PORT = 3000;


app.listen(PORT, () => {

    console.log(`Server running on http://localhost:${PORT}`);

});

Mengurai Data Formulir

Secara default, Express tidak mem-parsing muatan permintaan. Anda harus menggunakan middleware untuk mem-parsing permintaan yang masuk. 

1. Mengurai Data yang Disandikan URL

Untuk pengiriman formulir yang jenis kontennya diatur ke application/x-www-form-urlencoded (default untuk sebagian besar formulir HTML), Anda dapat menggunakan middleware express.urlencoded():

app.use(express.urlencoded({ extended: true }));

  • extended: true: Mengurai objek bersarang
  • extended: false: Hanya mengizinkan pasangan kunci-nilai sederhana.

2. Mengurai Data JSON

Untuk formulir yang mengirimkan data sebagai JSON (seperti menggunakan JS dengan fetch), Anda memerlukan middleware express. json():

app.use(express.json());

Middleware ini memastikan bahwa badan permintaan diuraikan dan tersedia sebagai req.body.

Menangani Permintaan GET

Permintaan GET mengkodekan parameter kueri secara langsung di dalam URL. Untungnya, Express memiliki cara sederhana untuk mengakses parameter ini melalui req. query.

Sebagai contoh: formulir pencarian dengan parameter query:

app.get('/search', (req, res) => {
    const query = req.query.q;
    res.send(`You searched for: ${query}`);
});

untuk URL http://localhost:3000/search? q=express, maka server akan mengembalikan Anda mencari: express. 

Menangani Permintaan POST

Permintaan ini biasanya digunakan untuk mengirim data sensitif atau jumlah data yang lebih besar dengan cara yang aman. Untuk memproses pengiriman formulir POST:

Misalnya: Menangani formulir pendaftaran:

app.post('/register', (req, res) => {
    const { username, email, password } = req.body;
    res.send(`User ${username} registered with email ${email}.`);
});

Tetapkan metode formulir ke POST dan tindakan ke /register.

Contoh Formulir HTML:

<form action="/register" method="POST">
    <input type="text" name="username" placeholder="Username" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="password" name="password" placeholder="Password" required>
    <button type="submit">Register</button>
</form>

Menangani Pengunggahan File

Express tidak menawarkan dukungan bawaan untuk unggahan berkas, tetapi sesuatu seperti multer sebagai middleware membuatnya mudah.

Instal Multer:

npm install multer

Mengatur Multer:

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
    res.send(`File uploaded: ${req.file.originalname}`);
});

Pada contoh ini, bidang input file pada formulir sesuai dengan objek req.file pada server.

Penanganan Kesalahan

Validasi dan Penanganan kesalahan sangat penting dalam formulir dan permintaan. Kelola kesalahan dengan baik Di Express, Anda dapat menggunakan middleware atau library seperti express-validator untuk memvalidasi input pengguna dan mengelola kesalahan.

Contoh:

app.use((err, req, res, next) => {
    console.error(err.stack);
    res.status(500).send('Something went wrong!');
});

Kesimpulan

Dalam Express menangani form dan request js dengan middleware yang kaya - mudah diimplementasikan. Seperti express[a].method() di luar kotak. urlencoded() dan express.json(), atau menggunakan pustaka pihak ketiga seperti multer, Anda dapat secara efisien menangani berbagai jenis input. Semua alat ini harus digunakan dengan mekanisme validasi dan penanganan kesalahan yang solid untuk membangun aplikasi web yang andal dan aman.