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() মিডলওয়্যার ব্যবহার করতে হবে। এই প্রক্রিয়াটি আপনাকে ফর্ম ডেটা গ্রহণ, প্রক্রিয়া এবং রেসপন্স পাঠাতে সহায়তা করবে, যা ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য খুবই প্রয়োজনীয়।
Read more
