ফর্মের মাধ্যমে ইউজারের ইনপুট গ্রহণ করা সাধারণত ওয়েব অ্যাপ্লিকেশনগুলির একটি গুরুত্বপূর্ণ অংশ। ফর্ম সাবমিশনের পর সঠিকভাবে 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
