ExpressJS একটি সাদামাটা ওজনের ফ্রেমওয়ার্ক, যা আপনাকে বিভিন্ন ধরনের টেমপ্লেট ইঞ্জিন ব্যবহার করার সুবিধা দেয়। টেমপ্লেট ইঞ্জিনগুলো ব্যবহার করে আপনি ডায়নামিক HTML পেজ তৈরি করতে পারেন, যা রেন্ডার করার সময় ডাটা ইনজেক্ট করতে সাহায্য করে। ExpressJS এ জনপ্রিয় কিছু টেমপ্লেট ইঞ্জিনের মধ্যে রয়েছে EJS, Pug, এবং Handlebars। এখানে আমরা দেখব কীভাবে Express অ্যাপ্লিকেশনে টেমপ্লেট ইঞ্জিন ইন্টিগ্রেট করা যায়।
১. ExpressJS তে টেমপ্লেট ইঞ্জিন কনফিগারেশন
ExpressJS তে টেমপ্লেট ইঞ্জিন কনফিগার করা বেশ সহজ। সাধারণত, টেমপ্লেট ইঞ্জিন ব্যবহারের জন্য নিচের কিছু ধাপ অনুসরণ করতে হয়।
১.১. টেমপ্লেট ইঞ্জিন ইন্সটল করা
প্রথমে, আপনি যেই টেমপ্লেট ইঞ্জিনটি ব্যবহার করতে চান তা ইনস্টল করতে হবে। চলুন, আমরা EJS (একটি জনপ্রিয় টেমপ্লেট ইঞ্জিন) ব্যবহার করি:
npm install ejs
১.২. Express অ্যাপ্লিকেশনে টেমপ্লেট ইঞ্জিন কনফিগার করা
একবার টেমপ্লেট ইঞ্জিন ইনস্টল হলে, Express অ্যাপ্লিকেশনে সেটি কনফিগার করতে হবে। নিচে EJS টেমপ্লেট ইঞ্জিন ব্যবহার করে কনফিগার করার উদাহরণ দেওয়া হল:
const express = require('express');
const app = express();
const port = 3000;
// EJS টেমপ্লেট ইঞ্জিন সেট করা
app.set('view engine', 'ejs');
// ডিরেক্টরি সেট করা যেখানে টেমপ্লেট ফাইল থাকবে
app.set('views', './views');
// রাউট তৈরি
app.get('/', (req, res) => {
res.render('index', { title: 'Express EJS Example' });
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
এই কোডের মধ্যে:
app.set('view engine', 'ejs');— এই লাইনটি Express কে জানাচ্ছে যে আমরা EJS টেমপ্লেট ইঞ্জিন ব্যবহার করছি।app.set('views', './views');— এই লাইনটি টেমপ্লেট ফাইলের লোকেশন নির্দেশ করে, অর্থাৎviews/ফোল্ডারে টেমপ্লেট ফাইল থাকবে।
২. EJS টেমপ্লেট তৈরি করা
EJS টেমপ্লেট ইঞ্জিন ব্যবহার করার জন্য আপনাকে views/ ফোল্ডারে .ejs এক্সটেনশন সহ ফাইল তৈরি করতে হবে।
২.১. views/index.ejs ফাইল তৈরি করা
<!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>Welcome to <%= title %></h1>
<p>This is an example of EJS template engine integration with ExpressJS.</p>
</body>
</html>
এখানে, <%= title %> হল EJS এর সঠিক সিনট্যাক্স, যা ডাটা ইনজেক্ট করার জন্য ব্যবহৃত হয়। এখানে title ডাটা app.get() রাউটে সরবরাহ করা হয়েছে।
৩. Express অ্যাপ চালানো
এখন, আপনার অ্যাপটি চালু করতে, টার্মিনালে নিচের কমান্ডটি রান করুন:
node app.js
এরপর, ব্রাউজারে গিয়ে http://localhost:3000 URL টি ভিজিট করুন। আপনি দেখতে পাবেন:
Welcome to Express EJS Example
This is an example of EJS template engine integration with ExpressJS.
৪. আরও কিছু জনপ্রিয় টেমপ্লেট ইঞ্জিন
ExpressJS তে আপনি বিভিন্ন ধরনের টেমপ্লেট ইঞ্জিন ব্যবহার করতে পারেন। এখানে আরও কিছু জনপ্রিয় টেমপ্লেট ইঞ্জিনের উদাহরণ দেওয়া হলো:
৪.১. Pug (পূর্বে Jade)
Pug (পূর্বে Jade) একটি শক্তিশালী এবং ব্যবহারকারী-বান্ধব টেমপ্লেট ইঞ্জিন, যা HTML ফাইল গুলি কম এবং পরিষ্কারভাবে লিখতে সহায়তা করে।
ইনস্টল:
npm install pugকনফিগারেশন:
app.set('view engine', 'pug'); app.set('views', './views');Pug টেমপ্লেট (উদাহরণ):
doctype html html head title= title body h1 Welcome to #{title} p This is an example of Pug template engine integration with ExpressJS.
৪.২. Handlebars
Handlebars একটি জনপ্রিয় টেমপ্লেট ইঞ্জিন যা আরও বেশি বৈশিষ্ট্য প্রদান করে যেমন হেল্পার ফাংশন, কন্ডিশনাল স্টেটমেন্ট ইত্যাদি।
ইনস্টল:
npm install express-handlebarsকনফিগারেশন:
const exphbs = require('express-handlebars'); app.engine('handlebars', exphbs()); app.set('view engine', 'handlebars');Handlebars টেমপ্লেট (উদাহরণ):
<html> <head> <title>{{title}}</title> </head> <body> <h1>Welcome to {{title}}</h1> <p>This is an example of Handlebars template engine integration with ExpressJS.</p> </body> </html>
৫. ডাটা ইনজেকশন এবং লুপ
ExpressJS এবং টেমপ্লেট ইঞ্জিন ব্যবহার করার সময় আপনি ডাইনামিক ডাটা ইনজেক্ট করতে পারবেন। উদাহরণস্বরূপ, আপনি রাউটে একটি অ্যারে পাস করতে পারেন এবং সেই অ্যারে দিয়ে টেমপ্লেটে লুপ চালাতে পারেন।
৫.১. ডাটা ইনজেকশন উদাহরণ (EJS)
app.get('/users', (req, res) => {
const users = ['Alice', 'Bob', 'Charlie'];
res.render('users', { users: users });
});
views/users.ejs:
<ul>
<% users.forEach(user => { %>
<li><%= user %></li>
<% }); %>
</ul>
সারাংশ
ExpressJS এর সাথে টেমপ্লেট ইঞ্জিন ইন্টিগ্রেশন অত্যন্ত সহজ এবং কার্যকরী। আপনি EJS, Pug, Handlebars বা অন্যান্য টেমপ্লেট ইঞ্জিন ব্যবহার করে ডাইনামিক HTML পেজ তৈরি করতে পারেন। ডাটা ইনজেকশন, লুপিং, কন্ডিশনাল স্টেটমেন্ট ইত্যাদি ফিচারগুলো আপনাকে দ্রুত এবং কার্যকরী ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্ট করতে সহায়তা করে।
ExpressJS অ্যাপ্লিকেশন তৈরি করার সময় ডায়নামিক HTML পেজ তৈরি করতে Template Engine ব্যবহার করা হয়। Template Engine হল এমন একটি প্রযুক্তি যা HTML পেজের ভিতরে ডায়নামিক কনটেন্ট যেমন ভেরিয়েবল, লুপ, কন্ডিশন ইত্যাদি সন্নিবেশ করতে সাহায্য করে। এটি একে একে প্রতিটি পেজে কন্টেন্ট জেনারেট করার জন্য উপযুক্ত, বিশেষ করে ওয়েব অ্যাপ্লিকেশনের ক্ষেত্রে।
Template Engine কি?
Template Engine হল একটি টুল বা লাইব্রেরি যা HTML বা অন্যান্য মার্কআপ ভাষার মধ্যে ডায়নামিক কন্টেন্ট (যেমন: ভেরিয়েবল, লুপ, কন্ডিশন, ফাংশন) সন্নিবেশ করায়। এটি মূলত দুটি অংশ নিয়ে কাজ করে:
- Template: এই অংশে HTML কোড থাকে, যেখানে ডায়নামিক কন্টেন্টের জন্য প্লেসহোল্ডার (যেমন:
{{name}}) থাকবে। - Data: এই অংশে আপনি ডায়নামিক ডেটা পাস করেন, যেটি টেমপ্লেটে প্লেসহোল্ডারগুলির জায়গায় রেন্ডার হবে।
Template Engine-এর উদাহরণ
কিছু জনপ্রিয় Template Engines হল:
- EJS (Embedded JavaScript Templates)
- Pug (আগের নাম ছিল Jade)
- Handlebars
- Mustache
Template Engine কেন ব্যবহার করা হয়?
১. ডায়নামিক কনটেন্ট তৈরি করতে সহায়তা করে
Template Engine ডায়নামিক HTML পেজ তৈরি করার জন্য খুবই কার্যকরী। আপনি যখন কোনো ওয়েব অ্যাপ্লিকেশন তৈরি করেন, তখন সাধারণত পেজের মধ্যে ভেরিয়েবল, লুপ বা কন্ডিশনাল স্টেটমেন্ট ব্যবহার করতে হয়। Template Engine এই প্রক্রিয়াটি সহজ করে দেয়।
উদাহরণ: যদি আপনার ব্যবহারকারীর নাম ডায়নামিকভাবে পরিবর্তিত হয়, তবে HTML পেজের মধ্যে সেটি উপস্থাপন করতে Template Engine ব্যবহার করা হয়।
<h1>Welcome, <%= userName %></h1>
এখানে userName একটি ডায়নামিক ভেরিয়েবল, যা সার্ভার থেকে পাস করা হবে এবং পেজ রেন্ডার হওয়ার সময় তার মান ঢোকানো হবে।
২. HTML কোড পুনরায় ব্যবহার করা যায়
Template Engine এর মাধ্যমে আপনি একবার একটি টেমপ্লেট তৈরি করে সেটি বিভিন্ন পেজে পুনরায় ব্যবহার করতে পারেন। এটি কোডের পুনরাবৃত্তি কমিয়ে দেয় এবং অ্যাপ্লিকেশনকে সহজ ও দ্রুত উন্নয়নযোগ্য করে তোলে।
উদাহরণ: আপনি যদি একটি কমন হেডার বা ফুটার ডিজাইন করতে চান, তবে আপনি সেটি আলাদা টেমপ্লেট ফাইলে লিখে তা বিভিন্ন পেজে ব্যবহার করতে পারেন।
<!-- header.ejs -->
<header>
<h1>My Web App</h1>
<nav>...</nav>
</header>
এটি app.js বা অন্যান্য পেজের মধ্যে include করে ব্যবহার করা যাবে।
৩. কোডের অর্গানাইজেশন বৃদ্ধি
Template Engine ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনের ফ্রন্টএন্ড এবং ব্যাকএন্ড কোড আলাদা রাখা যায়। ফ্রন্টএন্ড টেমপ্লেট কেবল HTML টেমপ্লেটের রেন্ডারিং করে, এবং ব্যাকএন্ড (ExpressJS) ডেটা সরবরাহ করে। এতে কোডের অর্গানাইজেশন উন্নত হয় এবং অ্যাপ্লিকেশন ডেভেলপমেন্ট সহজ হয়।
৪. UI এবং লজিকের মধ্যে আলাদা করা
Template Engine ব্যবহারের মাধ্যমে আপনি ফ্রন্টএন্ড এবং ব্যাকএন্ড লজিক আলাদা রাখতে পারেন। এতে UI (User Interface) কেবল ডেটা প্রদর্শন করবে এবং সার্ভার সাইড লজিক সরবরাহ করবে। এটি উন্নত কোড পরিচালনা এবং মেইনটেইনযোগ্যতা নিশ্চিত করে।
৫. পেজ রেন্ডারিংয়ের পারফরম্যান্স উন্নত করা
Template Engine HTML পেজের রেন্ডারিংয়ের সময় আরও উন্নত পারফরম্যান্স দিতে সাহায্য করে। এটি সাধারণত ইন-লাইনের জাভাস্ক্রিপ্ট কোড ব্যবহারের মাধ্যমে টেমপ্লেটকে দ্রুত রেন্ডার করে, এবং ডায়নামিক ডেটা সহজেই যুক্ত হয়।
ExpressJS-এ Template Engine ব্যবহার করা
ExpressJS-এর সাথে Template Engine ব্যবহার করতে, প্রথমে আপনাকে view engine সেট করতে হবে। ExpressJS কিছু বিল্ট-ইন Template Engine যেমন EJS ব্যবহার করতে পারে।
১. EJS টেমপ্লেট ইঞ্জিন ব্যবহার করা
EJS (Embedded JavaScript Templates) হল একটি সাধারণ এবং জনপ্রিয় টেমপ্লেট ইঞ্জিন যা ExpressJS-এর সাথে ব্যবহৃত হয়। এটি HTML কোডের মধ্যে জাভাস্ক্রিপ্ট কোড অন্তর্ভুক্ত করতে সহায়তা করে।
১.১. EJS ইনস্টল করা
npm install ejs --save
১.২. Express অ্যাপে EJS সেট করা
app.js বা প্রধান ফাইলে EJS ব্যবহার করার জন্য view engine হিসেবে সেট করতে হবে:
const express = require('express');
const app = express();
// EJS সেট করা
app.set('view engine', 'ejs');
// রুট রাউট
app.get('/', (req, res) => {
const data = { title: 'ExpressJS with EJS', userName: 'John' };
res.render('index', data); // 'index.ejs' ফাইলটি রেন্ডার হবে
});
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});
১.৩. EJS টেমপ্লেট তৈরি করা
এখন views/ ফোল্ডারে index.ejs নামক একটি ফাইল তৈরি করুন:
<!-- views/index.ejs -->
<!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>Welcome, <%= userName %>!</h1>
</body>
</html>
এখানে <%= userName %> ট্যাগটি আপনার app.js থেকে পাস করা ডেটা রেন্ডার করবে।
সারাংশ
Template Engine হল একটি অত্যন্ত কার্যকরী টুল যা ডায়নামিক কন্টেন্ট তৈরি করতে সাহায্য করে এবং HTML পেজের মধ্যে ডেটা প্লেসহোল্ডারগুলির মাধ্যমে কন্টেন্ট সন্নিবেশ করতে ব্যবহৃত হয়। ExpressJS অ্যাপ্লিকেশনে Template Engine ব্যবহারের মাধ্যমে আপনি কোডের পুনরাবৃত্তি কমাতে পারেন, UI এবং ব্যাকএন্ড লজিক আলাদা রাখতে পারেন, এবং অ্যাপ্লিকেশনকে আরও সুসংগঠিত ও মেইনটেইনযোগ্য করে তুলতে পারেন। EJS, Pug এবং Handlebars-এর মতো টেমপ্লেট ইঞ্জিনগুলো ExpressJS এর সাথে খুবই জনপ্রিয়ভাবে ব্যবহৃত হয়।
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 পেজে ডায়নামিক কনটেন্ট ইনজেক্ট করা। আপনি আপনার প্রোজেক্টের প্রয়োজন অনুযায়ী এই টেমপ্লেট ইঞ্জিনগুলির যেকোনো একটি নির্বাচন করতে পারেন।
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 বা অন্য যেকোনো টেমপ্লেট ইঞ্জিন ব্যবহারের মাধ্যমে আপনি সহজে ডায়নামিক কনটেন্ট তৈরি করতে পারবেন।
ExpressJS-এ Layouts এবং Partials ব্যবহৃত হয় ওয়েব পেজগুলোর পুনরায় ব্যবহারযোগ্য অংশগুলো (যেমন: হেডার, ফুটার, সাইডবার) সহজে পরিচালনা করতে। Layouts মূলত একটি ওয়েব পেজের কাঠামো (structure) তৈরি করে, যেখানে Partials হল ছোট ছোট টেমপ্লেট, যা বিভিন্ন জায়গায় পুনরায় ব্যবহার করা যায়।
এগুলো ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরও মডুলার এবং স্কেলেবল করতে পারেন, যেখানে একই অংশ বার বার ব্যবহার করা হয়।
Layouts কী?
Layouts হল একটি মূল টেমপ্লেট যা পেজের সাধারণ কাঠামো নির্ধারণ করে (যেমন হেডার, ফুটার, সাইডবার ইত্যাদি)। আপনি ওয়েব পেজের অন্যান্য অংশগুলোর জন্য dynamic content এক জায়গায় প্রবাহিত করতে পারেন।
Layouts-এর সুবিধা:
- ওয়েব পেজের কাঠামো এক জায়গায় রাখার মাধ্যমে কোড রিপিটেশন কমিয়ে আনা যায়।
- পেজের মূল অংশ পরিবর্তন করলে তা স্বয়ংক্রিয়ভাবে সব পেজে প্রভাব ফেলবে।
Partials কী?
Partials হল ছোট টেমপ্লেট ফাইল, যা Layouts বা অন্য টেমপ্লেটগুলির মধ্যে পুনরায় ব্যবহার করা যায়। উদাহরণস্বরূপ, আপনি হেডার, ফুটার বা নেভিগেশন বার একাধিক পেজে ব্যবহার করতে পারেন।
Partials-এর সুবিধা:
- কোডের পুনরাবৃত্তি কমায়।
- ছোট অংশ হিসেবে কোড মেইনটেইন করা সহজ হয়।
ExpressJS-এ Layouts এবং Partials ব্যবহার
ExpressJS-এ EJS (Embedded JavaScript) টেমপ্লেট ইঞ্জিন ব্যবহার করে Layouts এবং Partials সহজে ব্যবহার করা যায়। এখানে আমরা দেখব কিভাবে Layouts এবং Partials ব্যবহার করতে হয়।
১. EJS ইনস্টল করা
প্রথমে আপনাকে EJS টেমপ্লেট ইঞ্জিন ইনস্টল করতে হবে, কারণ এটি ExpressJS-এ Layouts এবং Partials ব্যবহার করার জন্য জনপ্রিয় ইঞ্জিন।
npm install ejs
২. Express অ্যাপ কনফিগার করা
আপনি EJS টেমপ্লেট ইঞ্জিন ব্যবহার করার জন্য Express অ্যাপ্লিকেশনটি কনফিগার করতে পারেন। app.js বা server.js ফাইলে নিচের কোডটি যোগ করুন:
const express = require('express');
const app = express();
const path = require('path');
// EJS টেমপ্লেট ইঞ্জিন সেট করা
app.set('view engine', 'ejs');
// ভিউ ফোল্ডারের পাথ নির্ধারণ করা
app.set('views', path.join(__dirname, 'views'));
// স্ট্যাটিক ফাইল সেবা
app.use(express.static(path.join(__dirname, 'public')));
// রুট রাউট
app.get('/', (req, res) => {
res.render('index', { title: 'Express with Layouts and Partials' });
});
// সার্ভার চালু করা
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});
এখন, Express অ্যাপ্লিকেশনটি EJS ব্যবহার করে টেমপ্লেট রেন্ডার করবে।
৩. Layouts ফাইল তৈরি করা
আপনি একটি Layout ফাইল তৈরি করতে পারেন যা সমস্ত পেজের কাঠামো ধারণ করবে। views/layouts ফোল্ডারে একটি layout.ejs ফাইল তৈরি করুন:
views/layouts/layout.ejs
<!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>
<header>
<h1>My Website Header</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<!-- এখানে dynamic content render হবে -->
<main>
<%- body %>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
এখানে <%- body %> দিয়ে মূল কনটেন্ট যোগ করা হবে, যেটি প্রতিটি পেজে ভিন্ন ভিন্ন থাকবে।
৪. Partials ফাইল তৈরি করা
এখন, আপনি একটি Partial তৈরি করতে পারেন যেটি যেকোনো পেজে পুনরায় ব্যবহার করা যাবে। উদাহরণস্বরূপ, একটি header.ejs partial তৈরি করতে পারেন:
views/partials/header.ejs
<header>
<h1>My Website Header</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
এটা পরে আপনার Layout বা অন্য যেকোনো পেজে ব্যবহার করা যাবে।
৫. Layouts এবং Partials ব্যবহার করা
এখন, আপনার মূল পেজগুলির জন্য Layouts এবং Partials ব্যবহার করতে পারেন। উদাহরণস্বরূপ, views/index.ejs ফাইল তৈরি করুন:
views/index.ejs
<%- include('partials/header') %>
<h2>Welcome to My Website!</h2>
<p>This is the home page.</p>
<%- include('partials/footer') %>
এখানে, include ট্যাগ ব্যবহার করে আপনি header.ejs এবং footer.ejs প Partial ফাইলগুলি লোড করেছেন।
এখন, আপনি app.js-এ রেন্ডার করা পেজটিতে Layouts ব্যবহার করতে পারেন।
views/index.ejs এর পরিবর্তন (Layouts ব্যবহার)
<%- layout('layouts/layout') %>
<h2>Welcome to My Website!</h2>
<p>This is the home page.</p>
এখানে, layout ট্যাগ ব্যবহার করে Layout ফাইল লোড করা হয়েছে।
৬. Partials ফাইল তৈরি করা
views/partials/footer.ejs
<footer>
<p>© 2024 My Website</p>
</footer>
৭. app.js-এ body অংশে ডাটা পাঠানো
এখন, index.ejs ফাইল রেন্ডার করার সময় আপনার ডাটা body অংশে পাঠানো হবে:
app.get('/', (req, res) => {
res.render('index', { title: 'Express with Layouts and Partials' });
});
সারাংশ
ExpressJS-এ Layouts এবং Partials ব্যবহার করা একাধিক টেমপ্লেটের পুনরায় ব্যবহারযোগ্য অংশগুলো ম্যানেজ করতে সাহায্য করে। Layouts পুরো পেজের কাঠামো সংজ্ঞায়িত করে, যেখানে Partials ছোট ছোট টেমপ্লেট, যেমন হেডার, ফুটার, সাইডবার ইত্যাদি ব্যবহার করার সুবিধা দেয়। EJS টেমপ্লেট ইঞ্জিন ব্যবহার করে আপনি সহজেই Layouts এবং Partials তৈরি করে Express অ্যাপ্লিকেশনকে আরও মডুলার ও স্কেলেবল করতে পারেন।
Read more
