ExpressJS-এ টেমপ্লেট ইঞ্জিন ব্যবহার করার মাধ্যমে ডায়নামিক HTML পেজ তৈরি করা সম্ভব। EJS, Pug, এবং Handlebars হল জনপ্রিয় টেমপ্লেট ইঞ্জিন যা আপনি Express অ্যাপ্লিকেশনগুলিতে ব্যবহার করতে পারেন। এই টেমপ্লেট ইঞ্জিনগুলি ডায়নামিক কনটেন্ট এবং লজিককে HTML পেজে ইনজেক্ট করতে সহায়তা করে।
১. EJS (Embedded JavaScript Templates)
EJS হল একটি সিম্পল এবং জনপ্রিয় টেমপ্লেট ইঞ্জিন যা HTML এবং JavaScript কোডের মধ্যে ডায়নামিক কনটেন্ট ইনজেক্ট করতে সহায়তা করে।
১.১. EJS ইনস্টল করা
প্রথমে আপনার Express অ্যাপে EJS ইনস্টল করতে হবে। টার্মিনালে নিচের কমান্ডটি রান করুন:
npm install ejs --save
১.২. EJS কনফিগারেশন
Express অ্যাপ্লিকেশনে EJS ব্যবহার করার জন্য, প্রথমে app.js (অথবা আপনার অ্যাপের মূল ফাইল) এ EJS সেট করতে হবে:
const express = require('express');
const app = express();
const port = 3000;
// EJS সেটআপ
app.set('view engine', 'ejs');
// রুট রাউট
app.get('/', (req, res) => {
res.render('index', { title: 'My First EJS App', message: 'Welcome to EJS!' });
});
// সার্ভার শুরু করুন
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
১.৩. EJS টেমপ্লেট ফাইল তৈরি
এখন views/ ফোল্ডারে একটি index.ejs ফাইল তৈরি করুন এবং তাতে HTML কোড লিখুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>
এখানে <%= title %> এবং <%= message %> হল EJS সিম্বল, যা ডায়নামিকভাবে Express থেকে প্রাপ্ত ডেটা ইনজেক্ট করবে।
২. Pug (formerly Jade)
Pug হল একটি হাই লেভেল টেমপ্লেট ইঞ্জিন যা HTML কোডকে ছোট এবং ক্লিন রাখে। Pug তে HTML ট্যাগের পরিবর্তে ইন্ডেন্টেশন ব্যবহার করা হয়।
২.১. Pug ইনস্টল করা
Pug ইনস্টল করতে নিচের কমান্ডটি রান করুন:
npm install pug --save
২.২. Pug কনফিগারেশন
Express অ্যাপ্লিকেশনে Pug ব্যবহার করার জন্য, app.js ফাইলে নিম্নলিখিত কোডটি যোগ করুন:
const express = require('express');
const app = express();
const port = 3000;
// Pug সেটআপ
app.set('view engine', 'pug');
app.set('views', './views');
// রুট রাউট
app.get('/', (req, res) => {
res.render('index', { title: 'My First Pug App', message: 'Welcome to Pug!' });
});
// সার্ভার শুরু করুন
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
২.৩. Pug টেমপ্লেট ফাইল তৈরি
এখন views/ ফোল্ডারে একটি index.pug ফাইল তৈরি করুন:
doctype html
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport" content="width=device-width, initial-scale=1.0")
title= title
body
h1= message
এখানে = title এবং = message হল Pug সিম্বল, যা ডায়নামিক ডেটাকে টেমপ্লেটে রেন্ডার করবে।
৩. Handlebars
Handlebars হল আরেকটি জনপ্রিয় টেমপ্লেট ইঞ্জিন যা HTML ফাইলের মধ্যে ডায়নামিক কনটেন্ট সহজে ইনজেক্ট করার জন্য ব্যবহৃত হয়। Handlebars খুবই সহজ এবং ব্যবহারে সুবিধাজনক।
৩.১. Handlebars ইনস্টল করা
Handlebars ইনস্টল করতে নীচের কমান্ডটি রান করুন:
npm install express-handlebars --save
৩.২. Handlebars কনফিগারেশন
Express অ্যাপে Handlebars ব্যবহার করার জন্য, প্রথমে app.js ফাইলে এটি কনফিগার করুন:
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
const port = 3000;
// Handlebars সেটআপ
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');
// রুট রাউট
app.get('/', (req, res) => {
res.render('home', { title: 'My First Handlebars App', message: 'Welcome to Handlebars!' });
});
// সার্ভার শুরু করুন
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
৩.৩. Handlebars টেমপ্লেট ফাইল তৈরি
এখন views/ ফোল্ডারে একটি home.handlebars ফাইল তৈরি করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
</head>
<body>
<h1>{{message}}</h1>
</body>
</html>
এখানে {{title}} এবং {{message}} হল Handlebars সিম্বল, যা ডায়নামিক ডেটা রেন্ডার করবে।
৪. একই অ্যাপে একাধিক টেমপ্লেট ইঞ্জিন ব্যবহার
আপনি একই অ্যাপে একাধিক টেমপ্লেট ইঞ্জিন ব্যবহার করতে পারেন, তবে এটি অতিরিক্ত কনফিগারেশন এবং কিছু কাস্টম মিডলওয়্যার প্রয়োজন হতে পারে। সাধারণত, একটি অ্যাপে একটিই টেমপ্লেট ইঞ্জিন ব্যবহৃত হয়।
সারাংশ
ExpressJS-এ EJS, Pug, এবং Handlebars হল জনপ্রিয় টেমপ্লেট ইঞ্জিন যা ডায়নামিক HTML পেজ তৈরির জন্য ব্যবহৃত হয়। প্রতিটি টেমপ্লেট ইঞ্জিনের নিজস্ব সিনট্যাক্স এবং সুবিধা রয়েছে, তবে এগুলোর মূল উদ্দেশ্য হল একই – HTML পেজে ডায়নামিক কনটেন্ট ইনজেক্ট করা। আপনি আপনার প্রোজেক্টের প্রয়োজন অনুযায়ী এই টেমপ্লেট ইঞ্জিনগুলির যেকোনো একটি নির্বাচন করতে পারেন।
Read more
