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 এর সাথে খুবই জনপ্রিয়ভাবে ব্যবহৃত হয়।
Read more
