ExpressJS অ্যাপ্লিকেশনগুলিতে টেমপ্লেট ইঞ্জিন ব্যবহার করা হয় ডায়নামিক HTML পেজ রেন্ডার করার জন্য। যখন আপনি টেমপ্লেট ফাইল ব্যবহার করেন, তখন আপনাকে ডেটা টেমপ্লেট ফাইলে পাঠাতে হবে, যাতে সেখানে ডায়নামিক কনটেন্ট প্রদর্শিত হয়। এই প্রক্রিয়াটি ডেটা পাস করা নামে পরিচিত।
ExpressJS সাধারণত বিভিন্ন টেমপ্লেট ইঞ্জিন সাপোর্ট করে, যেমন EJS, Pug, এবং Handlebars। এখানে আমরা EJS টেমপ্লেট ইঞ্জিন ব্যবহার করে ডেটা পাস করার পদ্ধতি দেখবো।
১. EJS টেমপ্লেট ইঞ্জিন সেটআপ
প্রথমে, আপনি যদি EJS টেমপ্লেট ইঞ্জিন ব্যবহার করতে চান, তাহলে আপনাকে এটি ইনস্টল করতে হবে। EJS ইনস্টল করতে নিচের কমান্ডটি ব্যবহার করুন:
npm install ejs --save
এটা আপনার package.json ফাইলে EJS ডিপেনডেন্সি যোগ করবে এবং ইনস্টল করবে।
২. ExpressJS অ্যাপে EJS কনফিগার করা
এখন, আপনার Express অ্যাপ্লিকেশনটি EJS ব্যবহার করতে কনফিগার করতে হবে। এর জন্য app.set() ব্যবহার করা হয়।
const express = require('express');
const app = express();
// EJS ভিউ ইঞ্জিন সেট করা
app.set('view engine', 'ejs');
// ভিউ ফোল্ডারের অবস্থান কনফিগার করা (যদি আলাদা ফোল্ডারে থাকে)
app.set('views', path.join(__dirname, 'views'));
এখানে:
app.set('view engine', 'ejs'): ExpressJS-এ EJS টেমপ্লেট ইঞ্জিন কনফিগার করা হচ্ছে।app.set('views', 'views'): টেমপ্লেট ফাইলের অবস্থান কনফিগার করা হচ্ছে। যদি আপনি ভিউ ফোল্ডারটি অন্য কোন অবস্থানে রাখেন, তাহলে সঠিক পাথ দিতে হবে।
৩. ডেটা পাস করা টেমপ্লেটে
ExpressJS অ্যাপে ডেটা টেমপ্লেটে পাঠানোর জন্য res.render() ফাংশন ব্যবহার করা হয়। এই ফাংশনটি টেমপ্লেট ফাইল এবং সেখানে পাঠানো ডেটা গ্রহণ করে।
উদাহরণ:
app.get('/', (req, res) => {
const user = {
name: 'John Doe',
age: 25,
location: 'Dhaka'
};
res.render('index', { user: user });
});
এখানে:
res.render('index', { user: user }): এটিindex.ejsটেমপ্লেট ফাইলেuserঅবজেক্ট পাস করছে।{ user: user }একটি প্যারামিটার হিসাবে পাঠানো হচ্ছে।
৪. EJS টেমপ্লেট ফাইলে ডেটা ব্যবহার করা
index.ejs টেমপ্লেট ফাইলে আপনি ডেটা এইভাবে ব্যবহার করতে পারেন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile</title>
</head>
<body>
<h1>Welcome, <%= user.name %>!</h1>
<p>Age: <%= user.age %></p>
<p>Location: <%= user.location %></p>
</body>
</html>
এখানে:
<%= user.name %>:userঅবজেক্টেরnameপ্রপার্টি রেন্ডার করা হচ্ছে।<%= user.age %>এবং<%= user.location %>:ageএবংlocationপ্রপার্টি রেন্ডার করা হচ্ছে।
৫. অ্যাপ্লিকেশন চালানো
এখন, আপনার অ্যাপটি চালানোর জন্য টার্মিনালে নিচের কমান্ডটি ব্যবহার করুন:
node app.js
এরপর, আপনার ব্রাউজারে গিয়ে http://localhost:3000 URL এ গেলে আপনি পেজটি দেখতে পাবেন, যেখানে John Doe, 25, এবং Dhaka প্রদর্শিত হবে।
৬. আরও ডেটা পাস করা
আপনি একটি একাধিক ডেটাও পাঠাতে পারেন। উদাহরণস্বরূপ:
app.get('/profile', (req, res) => {
const user = {
name: 'Jane Doe',
age: 30,
location: 'Chittagong'
};
const hobbies = ['Reading', 'Swimming', 'Traveling'];
res.render('profile', { user: user, hobbies: hobbies });
});
এখানে:
hobbiesএকটি অ্যারে যা টেমপ্লেট ফাইলে পাঠানো হচ্ছে।
এখন, profile.ejs ফাইলে আপনি এই ডেটা ব্যবহার করতে পারেন:
<h1>Welcome, <%= user.name %>!</h1>
<p>Age: <%= user.age %></p>
<p>Location: <%= user.location %></p>
<h2>Hobbies:</h2>
<ul>
<% hobbies.forEach(function(hobby) { %>
<li><%= hobby %></li>
<% }); %>
</ul>
এখানে:
<%= hobby %>:hobbiesঅ্যারের প্রতিটি আইটেম রেন্ডার করা হচ্ছে।<% hobbies.forEach(function(hobby) { %>:forEach()লুপ ব্যবহার করে অ্যারের সব আইটেম দেখানো হচ্ছে।
সারাংশ
ExpressJS-এ টেমপ্লেট ফাইলের সাথে ডেটা পাস করা খুবই সহজ। res.render() ফাংশন ব্যবহার করে আপনি যেকোনো ডেটা টেমপ্লেট ফাইলে পাস করতে পারেন এবং সেই ডেটা টেমপ্লেটে ডায়নামিকভাবে প্রদর্শন করতে পারেন। EJS বা অন্য যেকোনো টেমপ্লেট ইঞ্জিন ব্যবহারের মাধ্যমে আপনি সহজে ডায়নামিক কনটেন্ট তৈরি করতে পারবেন।
Read more
