ExpressJS-এ ফর্ম হ্যান্ডলিং এবং ডেটা ভ্যালিডেশন অত্যন্ত গুরুত্বপূর্ণ। এটি ওয়েব অ্যাপ্লিকেশনকে ব্যবহারকারীদের ইনপুট গ্রহণ করতে এবং সেগুলি সঠিকভাবে প্রক্রিয়া করতে সহায়তা করে। ExpressJS ব্যবহার করে আপনি সহজেই ফর্ম ডেটা পেতে পারেন এবং প্রয়োজনীয় ভ্যালিডেশন প্রয়োগ করতে পারেন। এখানে আমরা ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন সম্পর্কে বিস্তারিত আলোচনা করব।
১. Form Handling
ফর্ম হ্যান্ডলিং এর মাধ্যমে ব্যবহারকারীদের পাঠানো ডেটা প্রাপ্তি এবং সেগুলির প্রক্রিয়াকরণ করা হয়। ExpressJS-এ ফর্ম ডেটা গ্রহণের জন্য বেশ কিছু মিডলওয়্যার প্রয়োজন, যেমন express.urlencoded() এবং express.json()।
১.১. ফর্মের ডেটা GET এবং POST করা
একটি সাধারণ ফর্ম তৈরি করতে HTML ব্যবহার করা হয় এবং ExpressJS দ্বারা সেই ফর্মের ডেটা প্রক্রিয়াকৃত হয়। এখানে আমরা দুটি পদ্ধতি দেখাবো: GET এবং POST।
১.১.১. GET মেথডের মাধ্যমে ফর্ম ডেটা পাঠানো
HTML ফর্ম তৈরি করুন, যেখানে GET মেথড ব্যবহার করা হয়েছে:
<!-- form.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Express Form</title>
</head>
<body>
<h1>Submit Your Name</h1>
<form action="/submit" method="GET">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Submit</button>
</form>
</body>
</html>
এখন, ExpressJS-এ GET রাউট তৈরি করতে হবে যা এই ফর্মের ডেটা গ্রহণ করবে।
const express = require('express');
const app = express();
const port = 3000;
// GET রাউট ফর্ম দেখানোর জন্য
app.get('/', (req, res) => {
res.sendFile(__dirname + '/form.html');
});
// GET রাউট ফর্ম ডেটা গ্রহণ করার জন্য
app.get('/submit', (req, res) => {
const name = req.query.name;
res.send(`Hello, ${name}!`);
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
এখানে req.query ব্যবহার করা হয়েছে ফর্মের প্যারামিটার (যেমন: name) অ্যাক্সেস করার জন্য।
১.১.২. POST মেথডের মাধ্যমে ফর্ম ডেটা পাঠানো
POST পদ্ধতি ব্যবহার করে ফর্মের ডেটা পাঠানোর জন্য আপনাকে কিছু অতিরিক্ত মিডলওয়্যার (যেমন express.urlencoded()) ব্যবহার করতে হবে।
<!-- form.html (POST) -->
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Submit</button>
</form>
এখন, ExpressJS-এ POST রাউট তৈরি করা হবে যা express.urlencoded() মিডলওয়্যার ব্যবহার করে ফর্ম ডেটা গ্রহণ করবে:
// POST রিকোয়েস্ট হ্যান্ডলিং
app.use(express.urlencoded({ extended: true }));
app.post('/submit', (req, res) => {
const name = req.body.name;
res.send(`Hello, ${name}!`);
});
এখানে req.body ব্যবহার করা হয়েছে ফর্মের ইনপুট ডেটা অ্যাক্সেস করতে। express.urlencoded() মিডলওয়্যার ডেটা URL-এনকোডেড ফর্মে পাঠানোর জন্য প্রয়োজনীয়।
২. Validation
ভ্যালিডেশন হল ফর্ম ডেটা পরীক্ষা করার প্রক্রিয়া, যাতে নিশ্চিত হওয়া যায় যে ব্যবহারকারীরা সঠিক ইনপুট প্রদান করেছে। ExpressJS-এ ফর্ম ভ্যালিডেশন করার জন্য অনেক পদ্ধতি আছে, তবে আমরা এখানে দুটি জনপ্রিয় পদ্ধতি দেখাবো: ইনপুট ভ্যালিডেশন এবং ব্যবহারকারীর ইনপুটের জন্য কাস্টম ভ্যালিডেশন।
২.১. ইনপুট ভ্যালিডেশন
ভ্যালিডেশন করার জন্য সাধারণত express-validator প্যাকেজটি ব্যবহৃত হয়, যা সহজে ইনপুট যাচাই করতে সাহায্য করে।
২.১.১. express-validator ইনস্টল করা
npm install express-validator
২.১.২. express-validator ব্যবহার করা
এখন, ExpressJS রাউটের মাধ্যমে ইনপুট ভ্যালিডেশন প্রয়োগ করা যায়। ধরুন, আপনি একটি নাম ইনপুট চাইছেন এবং নিশ্চিত করতে চান যে এটি শূন্য নয় এবং অ্যাক্সেপটেবল ক্যারেক্টার দ্বারা পূর্ণ।
const { body, validationResult } = require('express-validator');
// POST রিকোয়েস্ট হ্যান্ডলিং
app.post('/submit',
// ভ্যালিডেশন রুল
body('name').isLength({ min: 1 }).withMessage('Name is required')
.isAlpha().withMessage('Name should only contain letters'),
(req, res) => {
// ভ্যালিডেশন চেক করা
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
const name = req.body.name;
res.send(`Hello, ${name}!`);
}
);
এখানে:
body('name'): ফর্মেরnameইনপুট ফিল্ডটি যাচাই করছে।.isLength({ min: 1 }): ইনপুট শূন্য না থাকার জন্য।.isAlpha(): শুধুমাত্র অক্ষর থাকতে হবে (নম্বার বা স্পেস নয়)।validationResult(req): যদি কোনো ত্রুটি থাকে, তা পরিস্কারভাবেerrors.array()আকারে রিটার্ন করবে।
২.২. কাস্টম ভ্যালিডেশন
এছাড়া, আপনি কাস্টম ভ্যালিডেশন ফাংশনও ব্যবহার করতে পারেন। যেমন, আপনি চাইলে কিছু প্যাটার্ন যাচাই করতে পারেন বা একটি নির্দিষ্ট শর্তে ফর্মের ইনপুট ভ্যালিডেশন করতে পারেন।
// কাস্টম ভ্যালিডেশন
app.post('/submit',
body('email').custom(value => {
if (!value.includes('@')) {
throw new Error('Invalid email format');
}
return true;
}),
(req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
const email = req.body.email;
res.send(`Email: ${email} is valid!`);
}
);
এখানে, custom() ফাংশন ব্যবহার করা হয়েছে একটি কাস্টম চেক করার জন্য। ইনপুট ইমেইলে @ চিহ্ন থাকা আবশ্যক।
৩. ফর্ম সঠিকভাবে রিডাইরেক্ট করা
ফর্ম সাবমিট করার পরে ব্যবহারকারীকে অন্য কোনো পৃষ্ঠায় রিডাইরেক্ট করার জন্য res.redirect() ব্যবহার করা হয়।
app.post('/submit', (req, res) => {
const name = req.body.name;
res.redirect(`/success?name=${name}`);
});
// Success page
app.get('/success', (req, res) => {
const name = req.query.name;
res.send(`Form submitted successfully. Hello, ${name}!`);
});
এটি ব্যবহারকারীকে সফলভাবে ফর্ম সাবমিট করার পরে /success পৃষ্ঠায় রিডাইরেক্ট করবে।
সারাংশ
ExpressJS-এ ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন অত্যন্ত সহজ। ফর্ম ডেটা গ্রহন করার জন্য express.urlencoded() এবং express.json() মিডলওয়্যার ব্যবহার করা হয়। ইনপুট ভ্যালিডেশনের জন্য express-validator প্যাকেজটি খুব কার্যকর, যা সহজে ফর্মের ইনপুট যাচাই করতে সাহায্য করে। আপনি কাস্টম ভ্যালিডেশন ফাংশন ব্যবহার করে নির্দিষ্ট শর্তে ইনপুট যাচাই করতে পারেন। সফল ফর্ম সাবমিশনের পরে ব্যবহারকারীকে অন্য পৃষ্ঠায় রিডাইরেক্ট করাও সম্ভব।
ExpressJS-এ HTML ফর্ম ডেটা সাবমিট করার জন্য আপনি সাধারণত POST রিকোয়েস্ট ব্যবহার করেন। ফর্ম ডেটা সাবমিট করার জন্য Express অ্যাপ্লিকেশনে একটি রাউট তৈরি করতে হবে, যা সেই ডেটা গ্রহণ করবে এবং প্রক্রিয়া করবে। এখানে ফর্ম ডেটা সাবমিট করার প্রক্রিয়া দেখানো হলো।
১. HTML ফর্ম তৈরি করা
প্রথমে একটি HTML ফর্ম তৈরি করতে হবে, যা ব্যবহারকারীর ইনপুট গ্রহণ করবে। উদাহরণস্বরূপ, একটি সাধারণ কন্ট্যাক্ট ফর্ম তৈরি করা যাক:
উদাহরণ: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" required></textarea><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
এখানে:
- action="/submit": এই অ্যাট্রিবিউটটি ফর্মের ডেটা কোন রাউটে সাবমিট হবে তা নির্দেশ করে। এখানে
/submitরাউটে ফর্ম ডেটা পাঠানো হবে। - method="POST": ফর্মের ডেটা সাবমিট করার জন্য HTTP POST মেথড ব্যবহার করা হচ্ছে।
২. Express অ্যাপ তৈরি করা
এখন, Express অ্যাপ তৈরি করতে হবে, যা ফর্ম ডেটা গ্রহণ করবে এবং প্রক্রিয়া করবে। এজন্য আমরা express.urlencoded() মিডলওয়্যার ব্যবহার করব, যা URL-encoded ডেটা (যেমন ফর্ম ডেটা) পার্স করতে সহায়তা করে।
উদাহরণ: app.js
const express = require('express');
const app = express();
const port = 3000;
// URL-encoded ডেটা পার্স করার জন্য মিডলওয়্যার ব্যবহার করা
app.use(express.urlencoded({ extended: true }));
// ফর্ম পেজ সরবরাহ করা
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// ফর্ম ডেটা সাবমিট করা (POST রাউট)
app.post('/submit', (req, res) => {
const { name, email, message } = req.body; // ফর্মের ডেটা অ্যাক্সেস করা
// ডেটা প্রক্রিয়া বা সঞ্চয় করা (এখানে কেবল কনসোলে লগ করা হচ্ছে)
console.log(`Name: ${name}`);
console.log(`Email: ${email}`);
console.log(`Message: ${message}`);
// রেসপন্স পাঠানো
res.send('<h1>Thank you for your message!</h1>');
});
// সার্ভার চালু করা
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
এখানে:
app.use(express.urlencoded({ extended: true }));: এই মিডলওয়্যারটি URL-encoded ডেটা পার্স করতে ব্যবহৃত হয়, যা HTML ফর্ম থেকে আসা ডেটার জন্য উপযুক্ত।req.body: ফর্ম ডেটা সাবমিট করার পর, তাreq.bodyতে পাওয়া যাবে। এই ডেটার মধ্যেname,email, এবংmessageফিল্ডস অ্যাক্সেস করা হচ্ছে।
৩. সার্ভার চালানো
এখন, আপনার অ্যাপ্লিকেশন চালু করতে node app.js কমান্ডটি ব্যবহার করুন:
node app.js
এখন, আপনি ব্রাউজারে গিয়ে http://localhost:3000 এ গিয়ে ফর্ম দেখতে পারবেন। ফর্মটি পূর্ণ করে সাবমিট করার পর, ডেটা POST /submit রাউটে পাঠানো হবে এবং আপনি কনসোলে এই ডেটা দেখতে পাবেন।
৪. সার্ভারে ফর্ম ডেটা গ্রহণ করা
যখন ব্যবহারকারী ফর্ম সাবমিট করবে, POST রিকোয়েস্টের মাধ্যমে ডেটা req.body তে পাওয়া যাবে। উদাহরণস্বরূপ:
const { name, email, message } = req.body;
এখানে:
name: ব্যবহারকারীর নামemail: ব্যবহারকারীর ইমেইলmessage: ব্যবহারকারীর পাঠানো বার্তা
আপনি এই ডেটাকে ডাটাবেসে সেভ করতে পারেন, বা অন্য কোন প্রসেসিং করতে পারেন।
৫. ফর্ম সাবমিশনের পরে রেসপন্স
ফর্ম ডেটা প্রক্রিয়া হওয়ার পর আপনি ব্যবহারকারীকে একটি কাস্টম রেসপন্স পাঠাতে পারেন, যেমন একটি কনফার্মেশন পেজ বা ধন্যবাদ বার্তা। উদাহরণ:
res.send('<h1>Thank you for your message, ' + name + '!</h1>');
এটি ব্যবহারকারীকে একটি ধন্যবাদ বার্তা দেখাবে, যেখানে name পরিবর্তনশীলটি তাদের নাম ধারণ করবে।
৬. JSON ফরম্যাটে ডেটা প্রেরণ করা (অপশনাল)
যদি আপনি ফর্ম ডেটাকে JSON ফরম্যাটে প্রক্রিয়া করতে চান, তাহলে আপনি express.json() মিডলওয়্যার ব্যবহার করতে পারেন। তবে, এই ক্ষেত্রে HTML ফর্মের ডেটা JSON হিসাবে পাঠানো যাবে না, কারণ ফর্ম ডেটা সাধারণত URL-encoded হয়।
তবে, যদি আপনি AJAX বা Fetch API ব্যবহার করে JSON ডেটা পাঠাতে চান, তখন express.json() মিডলওয়্যার প্রয়োজন হবে।
সারাংশ
ExpressJS-এ HTML ফর্ম ডেটা সাবমিট করার জন্য আপনি POST রিকোয়েস্ট ব্যবহার করতে পারেন এবং ফর্ম ডেটা req.body থেকে অ্যাক্সেস করতে পারেন। ফর্ম ডেটা প্রক্রিয়া করার জন্য express.urlencoded() মিডলওয়্যার ব্যবহার করতে হবে। এই প্রক্রিয়াটি আপনাকে ফর্ম ডেটা গ্রহণ, প্রক্রিয়া এবং রেসপন্স পাঠাতে সহায়তা করবে, যা ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য খুবই প্রয়োজনীয়।
ExpressJS একটি খুব জনপ্রিয় Node.js ফ্রেমওয়ার্ক যা HTTP রিকোয়েস্ট প্রসেস করতে অনেক ধরনের মিডলওয়্যার ব্যবহার করতে সহায়তা করে। Body Parser Middleware একটি গুরুত্বপূর্ণ মিডলওয়্যার যা HTTP রিকোয়েস্টের body থেকে ডাটা বের করে নেয়, বিশেষ করে POST বা PUT রিকোয়েস্টে প্রেরিত ডাটা।
ExpressJS-এর মাধ্যমে HTTP রিকোয়েস্টের body পার্স করার জন্য Body Parser মিডলওয়্যার ব্যবহার করা হয়। এটা আপনার অ্যাপ্লিকেশনে ডাটা গ্রহণ এবং প্রক্রিয়া করার জন্য অত্যন্ত গুরুত্বপূর্ণ।
১. Body Parser Middleware এর প্রয়োজনীয়তা
যখন কোনো HTTP রিকোয়েস্টের body থেকে ডাটা (যেমন: JSON, URL-encoded ডাটা) গ্রহণ করতে হয়, তখন এই ডাটা স্বাভাবিকভাবে req.body তে পাওয়া যায়। কিন্তু, ExpressJS ডিফল্টভাবে এই ডাটা প্যার্স করে না, তাই এটি পার্স করার জন্য মিডলওয়্যার প্রয়োজন।
২. Body Parser Middleware ইনস্টল করা
ExpressJS-এর সর্বশেষ সংস্করণে (4.x বা পরবর্তী), Body Parser মিডলওয়্যার আর আলাদাভাবে ইনস্টল করার প্রয়োজন নেই। Express নিজেই express.json() এবং express.urlencoded() মিডলওয়্যার সরবরাহ করে। তবে, পুরানো Express সংস্করণে body-parser প্যাকেজটি আলাদাভাবে ইনস্টল করা হত।
পুরানো সংস্করণের জন্য body-parser প্যাকেজ ইনস্টল
npm install body-parser
এটি ব্যবহার করতে হলে, আপনাকে আপনার অ্যাপে body-parser মিডলওয়্যার অন্তর্ভুক্ত করতে হবে।
৩. Express 4.x বা পরবর্তী সংস্করণে Body Parser Middleware ব্যবহার
Express 4.x সংস্করণ থেকে, body-parser আলাদাভাবে ইনস্টল করার প্রয়োজন নেই। Express-এ express.json() এবং express.urlencoded() মিডলওয়্যার সরাসরি অন্তর্ভুক্ত করা হয়েছে। আপনি এই মিডলওয়্যারগুলিকে নিচের মতো ব্যবহার করতে পারেন।
৩.১. express.json() মিডলওয়্যার
এই মিডলওয়্যারটি ইনকামিং JSON ডাটা পার্স করার জন্য ব্যবহৃত হয়। এটি রিকোয়েস্টের body থেকে JSON ডাটা প্যার্স করে req.body তে রাখে।
const express = require('express');
const app = express();
// JSON প্যার্সিং মিডলওয়্যার
app.use(express.json());
app.post('/data', (req, res) => {
console.log(req.body); // এখানে JSON ডাটা পাওয়া যাবে
res.send('Data received');
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
এখানে, app.use(express.json()) মিডলওয়্যারটি JSON ডাটা প্যার্স করতে ব্যবহৃত হচ্ছে। যখন কোনো POST রিকোয়েস্টে JSON ডাটা পাঠানো হবে, তা req.body তে পাওয়া যাবে।
৩.২. express.urlencoded() মিডলওয়্যার
এই মিডলওয়্যারটি URL-encoded ফর্ম ডাটা পার্স করার জন্য ব্যবহৃত হয়। এটি মূলত HTML ফর্ম থেকে প্রাপ্ত ডাটা (যেমন, ফর্ম ইনপুট) পার্স করতে সাহায্য করে।
app.use(express.urlencoded({ extended: true }));
app.post('/formdata', (req, res) => {
console.log(req.body); // এখানে URL-encoded ফর্ম ডাটা পাওয়া যাবে
res.send('Form data received');
});
এখানে, express.urlencoded({ extended: true }) মিডলওয়্যারটি URL-encoded ডাটা প্যার্স করতে ব্যবহৃত হয়। extended: true অপশনটি পছন্দ করা হয়, কারণ এটি qs লাইব্রেরি ব্যবহার করে ডাটা প্যার্স করে, যা আরও জটিল ডাটা স্ট্রাকচার (যেমন: nested objects) সমর্থন করে।
৪. পুরানো সংস্করণের ExpressJS-এ body-parser ব্যবহার করা
যদি আপনার অ্যাপ্লিকেশন পুরানো Express সংস্করণে চলে এবং body-parser প্যাকেজ ব্যবহার করতে চান, তাহলে আপনি নিম্নলিখিতভাবে মিডলওয়্যারটি ব্যবহার করতে পারেন:
৪.১. body-parser প্যাকেজ ইমপোর্ট করা
const bodyParser = require('body-parser');
৪.২. body-parser ব্যবহার করা
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
// JSON প্যার্সিং
app.use(bodyParser.json());
// URL-encoded ফর্ম ডাটা প্যার্সিং
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/data', (req, res) => {
console.log(req.body); // এখানে JSON বা ফর্ম ডাটা পাওয়া যাবে
res.send('Data received');
});
app.listen(3000, () => {
console.log('Server running at http://localhost:3000');
});
এখানে, bodyParser.json() এবং bodyParser.urlencoded() মিডলওয়্যার ব্যবহার করা হচ্ছে JSON এবং URL-encoded ডাটা প্যার্স করার জন্য।
৫. Request Body Parsing উদাহরণ
এখন, আমরা কয়েকটি উদাহরণ দেখবো যেখানে POST রিকোয়েস্টে ডাটা পাঠানো হবে এবং Body Parser মিডলওয়্যার ব্যবহার করে সেই ডাটাকে প্যার্স করা হবে।
৫.১. JSON ডাটা পাঠানো
Client Side Example (Postman বা অন্য HTTP Client):
{
"name": "John",
"age": 25
}
Server Side Example:
app.post('/jsondata', (req, res) => {
console.log(req.body); // { name: 'John', age: 25 }
res.send('JSON data received');
});
৫.২. URL-encoded ফর্ম ডাটা পাঠানো
Client Side Example (HTML Form):
<form action="/formdata" method="POST">
<input type="text" name="username" value="john_doe" />
<input type="password" name="password" value="secret" />
<button type="submit">Submit</button>
</form>
Server Side Example:
app.post('/formdata', (req, res) => {
console.log(req.body); // { username: 'john_doe', password: 'secret' }
res.send('Form data received');
});
সারাংশ
Body Parser Middleware ExpressJS অ্যাপ্লিকেশনের একটি অত্যন্ত গুরুত্বপূর্ণ অংশ, যা HTTP রিকোয়েস্টের body থেকে ডাটা পার্স করে req.body তে পাঠায়। Express 4.x বা পরবর্তী সংস্করণে, আপনি সহজেই express.json() এবং express.urlencoded() ব্যবহার করে JSON এবং URL-encoded ডাটা প্যার্স করতে পারেন। পুরানো সংস্করণে, আপনাকে body-parser প্যাকেজ ইনস্টল করতে হবে। এই মিডলওয়্যার ব্যবহারের মাধ্যমে আপনি HTTP রিকোয়েস্টের body থেকে ডাটা গ্রহণ এবং প্রক্রিয়া করতে পারবেন, যা API ডেভেলপমেন্টে অত্যন্ত গুরুত্বপূর্ণ।
Form validation এবং custom validation ExpressJS-এ গুরুত্বপূর্ণ বিষয়, বিশেষ করে যখন আপনি ব্যবহারকারীর ইনপুট গ্রহণ করেন। ডেটা ভ্যালিডেশন ব্যবহারকারীর পাঠানো ডেটা সঠিক এবং নিরাপদ কিনা তা যাচাই করতে সাহায্য করে। ExpressJS সরাসরি ভ্যালিডেশন সরবরাহ না করলেও, আপনি কিছু প্যাকেজ ব্যবহার করে বা নিজস্ব কাস্টম ভ্যালিডেশন তৈরি করে ফর্ম ভ্যালিডেশন বাস্তবায়ন করতে পারেন।
১. Form Validation
Form validation মূলত ব্যবহারকারীর ফর্ম ইনপুট যাচাই করার একটি প্রক্রিয়া। এটি নিশ্চিত করে যে, ব্যবহারকারী যা ইনপুট করছে তা সঠিক এবং প্রত্যাশিত ফরম্যাটে রয়েছে।
ExpressJS-এ ফর্ম ভ্যালিডেশন করতে সাধারণত নিচের দুটি পদ্ধতি ব্যবহার করা হয়:
- এনড-পয়েন্টে ভ্যালিডেশন (Server-side validation)
- প্যাকেজ ব্যবহার করা (যেমন:
express-validator)
২. Server-side Validation (ExpressJS)
ExpressJS-এ, আপনি ইনপুট ভ্যালিডেশন করতে middleware ব্যবহার করতে পারেন। উদাহরণস্বরূপ, যখন ব্যবহারকারী একটি ফর্ম সাবমিট করে, তখন সেই ইনপুটগুলো যাচাই করার জন্য একটি middleware তৈরি করা হয়।
২.১. একটি সাধারণ POST রিকোয়েস্টের জন্য ফর্ম ভ্যালিডেশন
ধরি, একটি ফর্মে নাম এবং ইমেইল ইনপুট ফিল্ড রয়েছে। আমরা চাই যে, নামটি ফাঁকা না থাকে এবং ইমেইলটি সঠিক ফরম্যাটে দেওয়া হোক।
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const { check, validationResult } = require('express-validator');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// ফর্ম পেজ
app.get('/', (req, res) => {
res.send('<form action="/submit" method="POST"><input name="name"/><input name="email"/><button type="submit">Submit</button></form>');
});
// ফর্ম সাবমিট করার সময় ইনপুট ভ্যালিডেশন
app.post('/submit', [
check('name').notEmpty().withMessage('Name is required'), // নাম ফাঁকা থাকতে পারবে না
check('email').isEmail().withMessage('Invalid email format') // ইমেইল সঠিক ফরম্যাটে হতে হবে
], (req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
// ফর্ম ডেটা সফলভাবে পাওয়া গেছে
res.send('Form submitted successfully!');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
ব্যাখ্যা:
check('name'): নাম ইনপুট চেক করবে।notEmpty()ফাংশনটি চেক করে যে এটি ফাঁকা না থাকে।check('email'): ইমেইল ইনপুট চেক করবে।isEmail()ফাংশনটি নিশ্চিত করে যে এটি সঠিক ইমেইল ফরম্যাটে রয়েছে।validationResult(req): রিকোয়েস্টের মাধ্যমে যে ইনপুট আসছে, তার মধ্যে কোনো ত্রুটি আছে কিনা তা যাচাই করা হয়।- যদি কোনো ত্রুটি থাকে, তবে ত্রুটি বার্তা 400 স্ট্যাটাস কোড সহ ফেরত পাঠানো হয়।
৩. express-validator প্যাকেজ ব্যবহার করা
ExpressJS-এ express-validator প্যাকেজ ব্যবহার করে ইনপুট ভ্যালিডেশন অনেক সহজ হয়। এটি একাধিক বিল্ট-ইন ভ্যালিডেশন ফাংশন প্রদান করে, যেমন isEmail(), isLength(), isNumeric() ইত্যাদি।
৩.১. express-validator ইনস্টল করা
প্রথমে express-validator প্যাকেজ ইনস্টল করতে হবে:
npm install express-validator
৩.২. express-validator ব্যবহার করে ফর্ম ভ্যালিডেশন
const express = require('express');
const { check, validationResult } = require('express-validator');
const app = express();
app.use(express.urlencoded({ extended: false }));
// ফর্ম পেজ
app.get('/', (req, res) => {
res.send('<form action="/submit" method="POST"><input name="name"/><input name="email"/><button type="submit">Submit</button></form>');
});
// POST রিকোয়েস্টের জন্য ভ্যালিডেশন
app.post('/submit', [
check('name').notEmpty().withMessage('Name is required'),
check('email').isEmail().withMessage('Please provide a valid email')
], (req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
res.send('Form submitted successfully!');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
এই উদাহরণে, express-validator ব্যবহার করে check() এবং validationResult() ফাংশনগুলোর মাধ্যমে ভ্যালিডেশন সম্পন্ন হচ্ছে।
৪. Custom Validation
Custom validation এমন ক্ষেত্রগুলিতে ব্যবহার করা হয় যখন আপনি কোনও নির্দিষ্ট নিয়ম বা কন্ডিশন অনুযায়ী ইনপুট যাচাই করতে চান।
৪.১. Custom Validation উদাহরণ
ধরি, আপনি চাইছেন যে একটি ফর্ম ইনপুটের বয়সটি ১৮ বছরের বেশি হতে হবে।
const { check, validationResult } = require('express-validator');
app.post('/submit', [
check('age').custom(value => {
if (parseInt(value) < 18) {
throw new Error('Age must be 18 or older');
}
return true;
})
], (req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
res.send('Form submitted successfully!');
});
ব্যাখ্যা:
check('age'): ইনপুট চেক করে, এবংcustom()ফাংশনের মধ্যে একটি কাস্টম ভ্যালিডেশন রুল লেখা হয়।throw new Error(): যদি কাস্টম চেক ব্যর্থ হয়, তাহলে একটি ত্রুটি মেসেজ পাঠানো হয়।
৫. Error Handling এবং User Feedback
ভ্যালিডেশন একাধিক ক্ষেত্রের জন্য হতে পারে এবং এর মধ্যে যদি কোনো ত্রুটি ঘটে, তবে ব্যবহারকারীকে এটি জানানো প্রয়োজন। আপনাকে ত্রুটির সঠিক মেসেজ দেখানোর জন্য একটি উপযুক্ত error-handling ব্যবস্থা গড়ে তুলতে হবে।
app.post('/submit', [
check('name').notEmpty().withMessage('Name is required'),
check('email').isEmail().withMessage('Please provide a valid email')
], (req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
res.send('Form submitted successfully!');
});
এখানে, যদি ইনপুটের মধ্যে কোনো ভুল থাকে, তাহলে errors.array() ব্যবহার করে সমস্ত ত্রুটি মেসেজ ফেরত দেওয়া হয়।
সারাংশ
ExpressJS-এ form validation এবং custom validation নিশ্চিত করে যে ব্যবহারকারীর ইনপুট সঠিক এবং নিরাপদ। আপনি express-validator প্যাকেজ ব্যবহার করে সহজেই ভ্যালিডেশন করতে পারেন এবং কাস্টম চেকিংয়ের মাধ্যমে নিজের নির্দিষ্ট নিয়ম তৈরি করতে পারেন। সার্ভার সাইড ভ্যালিডেশন ব্যবহারকারীর ইনপুট যাচাই করার একটি গুরুত্বপূর্ণ অংশ এবং এটি সুরক্ষিত অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।
ফর্মের মাধ্যমে ইউজারের ইনপুট গ্রহণ করা সাধারণত ওয়েব অ্যাপ্লিকেশনগুলির একটি গুরুত্বপূর্ণ অংশ। ফর্ম সাবমিশনের পর সঠিকভাবে Success (সফলতা) এবং Error (ত্রুটি) বার্তা প্রদর্শন করা, ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে। ExpressJS এ এটি সহজেই করা যায়। এখানে, আমরা ফর্ম সাবমিশনের পর Success এবং Error মেসেজ হ্যান্ডলিংয়ের প্রক্রিয়া সম্পর্কে জানবো।
ফর্ম সাবমিশনের জন্য Success এবং Error বার্তা হ্যান্ডলিং
১. প্রাথমিক স্ট্রাকচার তৈরি
প্রথমে একটি সিম্পল ফর্ম তৈরি করা যাক এবং তারপরে ফর্মের সফল সাবমিশন এবং ত্রুটি প্রদর্শন করার জন্য কোড তৈরি করবো।
১.১. app.js ফাইল তৈরি করা
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
// Middleware to parse form data
app.use(bodyParser.urlencoded({ extended: true }));
// Route to display form
app.get('/', (req, res) => {
res.send(`
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<button type="submit">Submit</button>
</form>
`);
});
// Route to handle form submission
app.post('/submit', (req, res) => {
const { name, email } = req.body;
// Error handling: Check if fields are empty
if (!name || !email) {
return res.send(`
<h3>Error: Please fill out both fields.</h3>
<a href="/">Go back</a>
`);
}
// Success message
res.send(`
<h3>Success! Your form has been submitted.</h3>
<p>Name: ${name}</p>
<p>Email: ${email}</p>
<a href="/">Go back</a>
`);
});
// Server start
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
২. ফর্ম এবং Error/Success বার্তা
এখানে আমরা দুটি বিষয় দেখেছি:
- ফর্ম (Form): ইউজারের নাম এবং ইমেইল ইনপুট নেওয়ার জন্য একটি সিম্পল HTML ফর্ম তৈরি করেছি।
- Error এবং Success বার্তা: ফর্ম সাবমিশনের পর যদি কোনো ইনপুট ফিল্ড ফাঁকা থাকে, তবে একটি ত্রুটি বার্তা দেখানো হয়। অন্যথায়, একটি সফল সাবমিশন বার্তা প্রদর্শিত হয়।
২.১. Error মেসেজ হ্যান্ডলিং
যদি ফর্মের কোনো ইনপুট ফিল্ড ফাঁকা থাকে, তবে একটি ত্রুটি বার্তা (Error message) রিটার্ন করা হয়। এখানে, if (!name || !email) চেকটি করে যদি কোনো ফিল্ডে ইনপুট না থাকে, তবে Error: Please fill out both fields. মেসেজ দেখানো হয়।
if (!name || !email) {
return res.send(`
<h3>Error: Please fill out both fields.</h3>
<a href="/">Go back</a>
`);
}
২.২. Success মেসেজ হ্যান্ডলিং
যদি সব ফিল্ড ঠিকভাবে পূর্ণ থাকে, তাহলে ফর্ম সফলভাবে সাবমিট হয়ে যায় এবং ইউজারের ইনপুট (নাম এবং ইমেইল) সহ একটি সফল বার্তা (Success message) প্রদর্শিত হয়।
res.send(`
<h3>Success! Your form has been submitted.</h3>
<p>Name: ${name}</p>
<p>Email: ${email}</p>
<a href="/">Go back</a>
`);
৩. অগ্রিম Error Handling (অথবা ভ্যালিডেশন)
যদি আপনি আরো উন্নত ভ্যালিডেশন করতে চান, যেমন ইমেইল ফর্ম্যাট চেক করা, তাহলে আপনি নিচের মত অতিরিক্ত চেক করতে পারেন।
৩.১. ইমেইল ফরম্যাট চেক
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailRegex.test(email)) {
return res.send(`
<h3>Error: Please enter a valid email address.</h3>
<a href="/">Go back</a>
`);
}
এই কোডটি চেক করবে যে, ইউজার যে ইমেইল প্রদান করেছেন সেটি সঠিক ফরম্যাটে আছে কিনা।
৪. Success এবং Error Message Customization
আপনি চাইলে Success এবং Error বার্তাগুলি আরও কাস্টমাইজ করতে পারেন এবং তাদের CSS দিয়ে স্টাইল করতে পারেন। যেমন:
৪.১. CSS দিয়ে Styling
app.get('/', (req, res) => {
res.send(`
<style>
.error { color: red; font-weight: bold; }
.success { color: green; font-weight: bold; }
</style>
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<button type="submit">Submit</button>
</form>
`);
});
এখানে error এবং success ক্লাসের জন্য স্টাইল দেয়া হয়েছে, যাতে আপনি ইরর এবং সাকসেস বার্তাগুলিকে আলাদা ভাবে রঙ দিয়ে হাইলাইট করতে পারেন।
৫. মিডলওয়্যার ব্যবহার করে Error Message Handling
কিছু ক্ষেত্রে, আপনি চাইতে পারেন যে, ফর্ম সাবমিট করার আগে কিছু মিডলওয়্যার ব্যবহার করে ইনপুট যাচাই করুন, যা ইরর বা সাকসেস মেসেজগুলোকে ভালোভাবে হ্যান্ডল করতে সাহায্য করবে।
app.post('/submit', (req, res, next) => {
const { name, email } = req.body;
if (!name || !email) {
res.locals.error = 'Please fill out both fields.';
return next();
}
next();
}, (req, res) => {
res.send(`
<h3>Success! Your form has been submitted.</h3>
<p>Name: ${req.body.name}</p>
<p>Email: ${req.body.email}</p>
`);
});
এখানে, প্রথমে next() এর মাধ্যমে মিডলওয়্যারটি চলে গেলে, দ্বিতীয় কনফিগারেশনে সাকসেস মেসেজ শো করা হয়।
সারাংশ
ExpressJS এ ফর্মের জন্য Success এবং Error মেসেজ হ্যান্ডলিং একটি গুরুত্বপূর্ণ অংশ। আপনি ফর্মের ইনপুট যাচাই করে ত্রুটি বা সফল বার্তা প্রদর্শন করতে পারেন, যাতে ব্যবহারকারীরা সঠিকভাবে তাদের ডেটা সাবমিট করতে পারে। তাছাড়া, আপনি অগ্রিম ইনপুট ভ্যালিডেশন, CSS স্টাইলিং, এবং মিডলওয়্যার ব্যবহার করে এই প্রক্রিয়াটিকে আরও উন্নত করতে পারেন।
Read more
