KoaJS এর টেমপ্লেট ইঞ্জিন ইন্টিগ্রেশন

কোআজেএস (KoaJS) - Web Development

279

KoaJS একটি মিনিমালিস্ট এবং কাস্টমাইজযোগ্য ওয়েব ফ্রেমওয়ার্ক, যা Node.js পরিবেশে ব্যবহৃত হয়। KoaJS সরাসরি কোনও টেমপ্লেট ইঞ্জিন অন্তর্ভুক্ত করে না, তবে আপনি সহজেই KoaJS এর সাথে বিভিন্ন টেমপ্লেট ইঞ্জিন ইন্টিগ্রেট করতে পারেন। টেমপ্লেট ইঞ্জিন ব্যবহার করার মাধ্যমে আপনি ডায়নামিক HTML পেজ তৈরি করতে পারবেন, যেখানে ডেটা ইন্টিগ্রেটেড হবে এবং ফ্রন্টএন্ডে পাঠানো হবে।

এই গাইডে, আমরা KoaJS এর সাথে জনপ্রিয় টেমপ্লেট ইঞ্জিন EJS (Embedded JavaScript Templates) এবং Pug (আগের নাম Jade) ইন্টিগ্রেট করার প্রক্রিয়া দেখব।

KoaJS এর সাথে EJS টেমপ্লেট ইঞ্জিন ইন্টিগ্রেশন

১. EJS ইনস্টল করা

প্রথমে, EJS টেমপ্লেট ইঞ্জিন ইনস্টল করতে হবে। আপনি NPM ব্যবহার করে এটি ইনস্টল করতে পারেন:

npm install koa-view ejs

koa-view: এটি KoaJS এর জন্য টেমপ্লেট ইঞ্জিন মিডলওয়্যার, যা বিভিন্ন টেমপ্লেট ইঞ্জিনের সাথে ইন্টিগ্রেট করতে সাহায্য করে।
ejs: এটি EJS টেমপ্লেট ইঞ্জিন।

২. KoaJS এর সাথে EJS কনফিগারেশন করা

EJS ইন্টিগ্রেট করার জন্য, আপনি koa-view মিডলওয়্যার ব্যবহার করবেন। এটি KoaJS অ্যাপ্লিকেশনে EJS টেমপ্লেট রেন্ডার করার জন্য ব্যবহৃত হবে।

const Koa = require('koa');
const path = require('path');
const render = require('koa-view');
const app = new Koa();

// koa-view মিডলওয়্যার ব্যবহার
app.use(render(app, {
  root: path.join(__dirname, 'views'),  // views ফোল্ডার
  default: 'ejs',  // ডিফল্ট টেমপ্লেট ইঞ্জিন
}));

// রাউট তৈরি করা
app.use(async (ctx) => {
  // ডেটা পাঠানো
  await ctx.render('index', { message: 'Hello from KoaJS with EJS!' });
});

// অ্যাপ চালু করা
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

৩. EJS টেমপ্লেট তৈরি করা

এখন একটি views নামক ফোল্ডার তৈরি করুন এবং এর মধ্যে index.ejs নামক একটি ফাইল তৈরি করুন:

<!DOCTYPE html>
<html>
<head>
  <title>KoaJS with EJS</title>
</head>
<body>
  <h1><%= message %></h1>
</body>
</html>

এখানে, <%= message %> হল EJS টেমপ্লেট সিনট্যাক্স, যা ডেটা ইন্টিগ্রেট করবে এবং রেন্ডার করা পেজে দেখাবে।

৪. অ্যাপ চালানো

এখন, http://localhost:3000 এ গিয়ে "Hello from KoaJS with EJS!" মেসেজ দেখতে পাবেন, কারণ আপনি EJS টেমপ্লেট ইঞ্জিন ব্যবহার করে ডায়নামিক HTML পেজ রেন্ডার করেছেন।

KoaJS এর সাথে Pug (Jade) টেমপ্লেট ইঞ্জিন ইন্টিগ্রেশন

১. Pug ইনস্টল করা

Pug (আগের নাম Jade) একটি আরেকটি জনপ্রিয় টেমপ্লেট ইঞ্জিন। এটি ইনস্টল করতে নিচের কমান্ডটি ব্যবহার করুন:

npm install koa-view pug

koa-view: এটি KoaJS এর জন্য একটি মিডলওয়্যার, যা টেমপ্লেট রেন্ডার করতে সাহায্য করে।
pug: এটি Pug টেমপ্লেট ইঞ্জিন।

২. KoaJS এর সাথে Pug কনফিগারেশন করা

Pug ইন্টিগ্রেট করার জন্য, আপনি koa-view মিডলওয়্যার ব্যবহার করবেন।

const Koa = require('koa');
const path = require('path');
const render = require('koa-view');
const app = new Koa();

// koa-view মিডলওয়্যার ব্যবহার
app.use(render(app, {
  root: path.join(__dirname, 'views'),  // views ফোল্ডার
  default: 'pug',  // ডিফল্ট টেমপ্লেট ইঞ্জিন
}));

// রাউট তৈরি করা
app.use(async (ctx) => {
  // ডেটা পাঠানো
  await ctx.render('index', { title: 'KoaJS with Pug', message: 'Hello from Pug!' });
});

// অ্যাপ চালু করা
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

৩. Pug টেমপ্লেট তৈরি করা

এখন একটি views নামক ফোল্ডার তৈরি করুন এবং এর মধ্যে index.pug নামক একটি ফাইল তৈরি করুন:

doctype html
html
  head
    title= title
  body
    h1= message

এখানে, title এবং message হল ডেটা যা KoaJS থেকে টেমপ্লেটে পাঠানো হয়েছে এবং তা <h1> এবং <title> ট্যাগে রেন্ডার হবে।

৪. অ্যাপ চালানো

এখন, http://localhost:3000 এ গিয়ে "Hello from Pug!" মেসেজ দেখতে পাবেন।

সারাংশ

KoaJS-এ টেমপ্লেট ইঞ্জিন ইন্টিগ্রেট করা খুবই সহজ এবং নমনীয়। আপনি EJS বা Pug এর মতো জনপ্রিয় টেমপ্লেট ইঞ্জিন ব্যবহার করে ডায়নামিক HTML পেজ তৈরি করতে পারেন। KoaJS এর সাথে টেমপ্লেট ইঞ্জিন ইন্টিগ্রেট করতে koa-view মিডলওয়্যার ব্যবহার করা হয়, যা টেমপ্লেট রেন্ডার করতে সহায়তা করে। এতে ডেভেলপাররা খুব সহজেই KoaJS অ্যাপ্লিকেশনে টেমপ্লেট ইঞ্জিন ব্যবহার করে ডায়নামিক কনটেন্ট তৈরি করতে সক্ষম হয়।

Content added By

Rezwan Siddiki Tamim

koa-views ব্যবহার করে টেমপ্লেট ইঞ্জিন ইন্টিগ্রেশন

263

KoaJS একটি লঘু এবং কাস্টমাইজযোগ্য ওয়েব ফ্রেমওয়ার্ক, যা Node.js প্ল্যাটফর্মে ব্যবহৃত হয়। আপনি যদি KoaJS ব্যবহার করে টেমপ্লেট ইঞ্জিনের মাধ্যমে HTML ফাইল রেন্ডার করতে চান, তবে koa-views প্যাকেজটি ব্যবহার করতে পারেন। এটি বিভিন্ন টেমপ্লেট ইঞ্জিন যেমন EJS, Pug, Handlebars ইত্যাদি সমর্থন করে এবং KoaJS অ্যাপ্লিকেশনের মধ্যে টেমপ্লেট রেন্ডারিং সহজে এক্সটেন্ড করতে সক্ষম।

এই টিউটোরিয়ালে আমরা koa-views এবং EJS টেমপ্লেট ইঞ্জিন ব্যবহার করে কিভাবে টেমপ্লেট ইন্টিগ্রেশন করতে হয়, তা আলোচনা করব।

koa-views ইনস্টল করা

প্রথমে, আপনাকে koa-views প্যাকেজটি ইনস্টল করতে হবে। এটি KoaJS-এ টেমপ্লেট রেন্ডারিংয়ের জন্য প্রয়োজনীয় মিডলওয়্যার সরবরাহ করে।

ইনস্টলেশন:

npm install koa-views
npm install ejs  # EJS টেমপ্লেট ইঞ্জিন ইনস্টল করা

এখানে koa-views ইনস্টল করা হচ্ছে, এবং EJS টেমপ্লেট ইঞ্জিন ইনস্টল করা হয়েছে (যেহেতু আমরা EJS ব্যবহার করবো)।

koa-views ব্যবহার করে টেমপ্লেট রেন্ডারিং

একবার koa-views ইনস্টল হয়ে গেলে, আপনাকে এই মিডলওয়্যারটি Koa অ্যাপ্লিকেশনে যুক্ত করতে হবে এবং টেমপ্লেট রেন্ডারিংয়ের জন্য সঠিক কনফিগারেশন সেট করতে হবে।

১. KoaJS অ্যাপ্লিকেশন তৈরি করা

এখানে একটি সিম্পল KoaJS অ্যাপ্লিকেশন তৈরি করা হচ্ছে যা koa-views ব্যবহার করে EJS টেমপ্লেট রেন্ডার করবে।

const Koa = require('koa');
const path = require('path');
const views = require('koa-views');
const app = new Koa();

// koa-views মিডলওয়্যার ব্যবহার করা
app.use(views(path.join(__dirname, '/views'), {
  extension: 'ejs'  // EJS টেমপ্লেট ইঞ্জিন ব্যবহার করা
}));

// রাউট তৈরি করা
app.use(async (ctx) => {
  await ctx.render('index', { title: 'KoaJS with EJS' });
});

// অ্যাপ চালু করা
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

কোডের ব্যাখ্যা:

views মিডলওয়্যার: koa-views মিডলওয়্যার ব্যবহার করা হয়েছে, যা views ডিরেক্টরি থেকে .ejs ফাইল রেন্ডার করবে।
ctx.render(): ctx.render() ব্যবহার করে আমরা টেমপ্লেট রেন্ডার করেছি এবং সেটির সাথে ডেটা পাস করেছি। এখানে title একটি ডাটা প্যারামিটার হিসেবে পাস করা হয়েছে যা EJS টেমপ্লেটের মধ্যে ব্যবহার করা হবে।

২. views ডিরেক্টরি তৈরি করা

এখন views নামক একটি ফোল্ডার তৈরি করুন এবং সেখানে একটি index.ejs ফাইল তৈরি করুন।

project-folder/
│
├── views/
│   └── index.ejs
│
└── app.js

৩. EJS টেমপ্লেট তৈরি করা

views/index.ejs ফাইলটি তৈরি করুন এবং তাতে কিছু HTML এবং 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>
</body>
</html>

এখানে, <%= title %> হচ্ছে EJS টেমপ্লেট ইঞ্জিনের সিনট্যাক্স, যা আমাদের পাস করা title ভেরিয়েবলকে রেন্ডার করবে।

সার্ভার চালানো

এখন, আপনি আপনার অ্যাপ্লিকেশন চালু করতে পারেন:

node app.js

এখন, আপনার ব্রাউজারে গিয়ে http://localhost:3000 এ প্রবেশ করলে আপনি EJS টেমপ্লেট দ্বারা রেন্ডার করা একটি HTML পেজ দেখতে পাবেন, যেখানে KoaJS with EJS লেখা থাকবে।

কাস্টম ডেটা পাস করা

EJS টেমপ্লেটে আরও ডেটা পাস করা খুব সহজ। আপনি টেমপ্লেটের মধ্যে যেকোনো ডেটা পাস করতে পারেন। উদাহরণস্বরূপ:

app.use(async (ctx) => {
  const user = { name: 'John', age: 30 };
  await ctx.render('index', { title: 'User Info', user: user });
});

এখন, views/index.ejs ফাইলে আপনি এই ডেটা ব্যবহার করতে পারেন:

<h2>User Name: <%= user.name %></h2>
<h3>Age: <%= user.age %></h3>

এটি ইউজারের নাম এবং বয়স পেজে রেন্ডার করবে।

koa-views কাস্টমাইজেশন

koa-views অনেক কাস্টমাইজেশন সমর্থন করে, যেমন:

Template Engine পরিবর্তন: আপনি EJS এর পরিবর্তে অন্য টেমপ্লেট ইঞ্জিন যেমন Pug, Handlebars ব্যবহার করতে পারেন।
Dynamic Views Path: যদি আপনি চান, তবে ডাইনামিকভাবে বিভিন্ন টেমপ্লেট পাথ ব্যবহার করতে পারেন।
Cache Control: টেমপ্লেট ক্যাশ কন্ট্রোল সিস্টেম যুক্ত করতে পারেন।

উদাহরণ:

app.use(views(path.join(__dirname, '/views'), {
  extension: 'ejs',
  map: { html: 'ejs' },  // টেমপ্লেট এক্সটেনশন ম্যাপ করা
  cache: false  // ক্যাশিং বন্ধ করা
}));

সারাংশ

KoaJS-এ koa-views ব্যবহার করে টেমপ্লেট ইঞ্জিন ইন্টিগ্রেশন করা খুবই সহজ। এটি আপনাকে KoaJS অ্যাপ্লিকেশনে HTML টেমপ্লেট রেন্ডারিংয়ের জন্য অত্যন্ত সহজ এবং শক্তিশালী উপায় প্রদান করে। আপনি EJS, Pug, Handlebars সহ বিভিন্ন টেমপ্লেট ইঞ্জিন ব্যবহার করতে পারেন। KoaJS-এর মাধ্যমে টেমপ্লেট রেন্ডারিং এর ফলে অ্যাপ্লিকেশন ডেভেলপমেন্ট আরও সহজ এবং মডিউলার হয়ে ওঠে।

Content added By

Rezwan Siddiki Tamim

Pug, EJS, Handlebars এর সাথে কাজ করা

205

KoaJS একটি শক্তিশালী ওয়েব ফ্রেমওয়ার্ক যা Node.js পরিবেশে অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য ব্যবহৃত হয়। KoaJS নিজে HTML টেমপ্লেট ইঞ্জিন সরবরাহ না করলেও, এটি অন্যান্য জনপ্রিয় টেমপ্লেট ইঞ্জিন যেমন Pug, EJS, এবং Handlebars এর সাথে সহজেই কাজ করতে পারে। এই টেমপ্লেট ইঞ্জিনগুলির সাহায্যে আপনি ডাইনামিক HTML পেজ তৈরি করতে পারেন, যা ডেটা পাস করে ক্লায়েন্টে রেন্ডার করা যায়।

এখানে আমরা Pug, EJS, এবং Handlebars ব্যবহার করে কিভাবে KoaJS অ্যাপে টেমপ্লেট ইঞ্জিন ইন্টিগ্রেট করা যায় তা দেখব।

১. Pug এর সাথে কাজ করা

Pug (আগে যা Jade নামে পরিচিত ছিল) একটি সিম্পল এবং মিনিমালিস্ট টেমপ্লেট ইঞ্জিন যা HTML কোডকে সাদাসিধে ও কমপ্যাক্ট করে তৈরি করতে সাহায্য করে। KoaJS-এ Pug ব্যবহার করার জন্য koa-pug প্যাকেজটি ইনস্টল করতে হয়।

Pug ইনস্টল করা:

npm install koa-pug pug

Pug কনফিগারেশন এবং ব্যবহার:

const Koa = require('koa');
const Router = require('koa-router');
const Pug = require('koa-pug');
const app = new Koa();
const router = new Router();

// Pug কনফিগারেশন
const pug = new Pug({
  viewPath: './views',  // আপনার টেমপ্লেট ফোল্ডার
  app: app              // Koa অ্যাপ্লিকেশন ইনস্ট্যান্স
});

// রাউট হ্যান্ডলিং
router.get('/', async (ctx) => {
  await ctx.render('index', { title: 'Hello Pug', message: 'Welcome to KoaJS with Pug!' });
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

এখানে, views ফোল্ডারে একটি index.pug ফাইল তৈরি করুন:

doctype html
html
  head
    title= title
  body
    h1= message

এখন http://localhost:3000 এ গিয়ে আপনি Pug দিয়ে রেন্ডার করা HTML দেখতে পারবেন।

২. EJS এর সাথে কাজ করা

EJS (Embedded JavaScript) একটি খুবই জনপ্রিয় টেমপ্লেট ইঞ্জিন যা ডাইনামিক HTML তৈরি করতে সাহায্য করে এবং সহজেই Node.js অ্যাপ্লিকেশনের সাথে ইন্টিগ্রেট করা যায়।

EJS ইনস্টল করা:

npm install koa-ejs ejs

EJS কনফিগারেশন এবং ব্যবহার:

const Koa = require('koa');
const Router = require('koa-router');
const render = require('koa-ejs');
const path = require('path');
const app = new Koa();
const router = new Router();

// EJS কনফিগারেশন
render(app, {
  root: path.join(__dirname, 'views'),  // টেমপ্লেট ফোল্ডার
  layout: false,  // লেআউট ব্যবহৃত হবে না
  viewExt: 'ejs',  // ফাইল এক্সটেনশন .ejs
});

// রাউট হ্যান্ডলিং
router.get('/', async (ctx) => {
  await ctx.render('index', { title: 'Hello EJS', message: 'Welcome to KoaJS with EJS!' });
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

এখানে, views ফোল্ডারে একটি index.ejs ফাইল তৈরি করুন:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= message %></h1>
  </body>
</html>

এখন http://localhost:3000 এ গিয়ে আপনি EJS দিয়ে রেন্ডার করা HTML দেখতে পারবেন।

৩. Handlebars এর সাথে কাজ করা

Handlebars একটি শক্তিশালী টেমপ্লেট ইঞ্জিন যা HTML এর ভিতরে ডাইনামিক ডেটা অন্তর্ভুক্ত করতে সাহায্য করে। KoaJS-এ Handlebars ব্যবহার করার জন্য koa-handlebars প্যাকেজটি ব্যবহার করা হয়।

Handlebars ইনস্টল করা:

npm install koa-handlebars handlebars

Handlebars কনফিগারেশন এবং ব্যবহার:

const Koa = require('koa');
const Router = require('koa-router');
const handlebars = require('koa-handlebars');
const app = new Koa();
const router = new Router();

// Handlebars কনফিগারেশন
app.use(handlebars({
  viewPath: './views',  // টেমপ্লেট ফোল্ডার
  extname: '.hbs',      // ফাইল এক্সটেনশন .hbs
}));

// রাউট হ্যান্ডলিং
router.get('/', async (ctx) => {
  await ctx.render('index', { title: 'Hello Handlebars', message: 'Welcome to KoaJS with Handlebars!' });
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

এখানে, views ফোল্ডারে একটি index.hbs ফাইল তৈরি করুন:

<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
  </head>
  <body>
    <h1>{{message}}</h1>
  </body>
</html>

এখন http://localhost:3000 এ গিয়ে আপনি Handlebars দিয়ে রেন্ডার করা HTML দেখতে পারবেন।

সারাংশ

KoaJS-এ Pug, EJS, এবং Handlebars এর মতো টেমপ্লেট ইঞ্জিন ব্যবহার করে ডাইনামিক HTML তৈরি করা সহজ। আপনি koa-pug, koa-ejs, বা koa-handlebars প্যাকেজ ব্যবহার করে এই টেমপ্লেট ইঞ্জিনগুলির সাথে কাস্টম টেমপ্লেট তৈরি করতে পারেন। KoaJS এর মিডলওয়্যার সিস্টেমের সাথে এই ইঞ্জিনগুলির ইন্টিগ্রেশন খুবই সহজ এবং এটি ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টকে আরও দ্রুত এবং কার্যকরী করে তোলে।

Content added By

Rezwan Siddiki Tamim

ডায়নামিক HTML পেজ রেন্ডার করা

321

KoaJS একটি শক্তিশালী এবং কাস্টমাইজযোগ্য ওয়েব ফ্রেমওয়ার্ক, তবে এতে ডায়নামিক HTML পেজ রেন্ডার করার জন্য কোনো বিল্ট-ইন সাপোর্ট নেই। তবে, আপনি Templating Engines (যেমন: Pug, EJS, Handlebars) ব্যবহার করে KoaJS অ্যাপ্লিকেশনে ডায়নামিক HTML পেজ রেন্ডার করতে পারেন। এখানে আমরা দেখব কিভাবে KoaJS-এ Pug (পূর্বে Jade) টেম্পলেট ইঞ্জিন ব্যবহার করে ডায়নামিক HTML পেজ রেন্ডার করা যায়।

১. Pug টেম্পলেট ইঞ্জিন ইনস্টল করা

প্রথমে আপনাকে Pug ইনস্টল করতে হবে, যা একটি জনপ্রিয় টেম্পলেট ইঞ্জিন। এটি HTML কোডে ডায়নামিক ডেটা ইনজেক্ট করার জন্য ব্যবহৃত হয়।

ইনস্টলেশন:

npm install pug

এছাড়া, KoaJS-এ Pug টেম্পলেট ইঞ্জিন ব্যবহার করার জন্য koa-views প্যাকেজটি ইনস্টল করতে হবে, যা KoaJS অ্যাপ্লিকেশনের সাথে টেম্পলেট রেন্ডারিং সরবরাহ করে।

npm install koa-views

২. Pug টেম্পলেট ইঞ্জিন কনফিগার করা

এখন আপনি koa-views এবং Pug কে কনফিগার করে টেম্পলেট রেন্ডারিং চালু করতে পারেন। নিচে একটি সাধারণ উদাহরণ দেওয়া হল।

উদাহরণ কোড:

const Koa = require('koa');
const path = require('path');
const koaViews = require('koa-views'); // টেম্পলেট ইঞ্জিন ব্যবহারের জন্য
const app = new Koa();

// koa-views কনফিগারেশন
app.use(koaViews(path.join(__dirname, '/views'), {
  extension: 'pug'  // Pug টেম্পলেট ইঞ্জিন ব্যবহার
}));

// রুট হ্যান্ডলার
app.use(async (ctx) => {
  const title = 'Welcome to KoaJS with Pug';
  await ctx.render('index', { title });  // 'index.pug' টেম্পলেট রেন্ডার করা
});

// অ্যাপ চালু করা
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

এখানে, koa-views মিডলওয়্যার ব্যবহার করে Pug টেম্পলেট ইঞ্জিন কনফিগার করা হয়েছে এবং index.pug টেম্পলেট রেন্ডার করা হচ্ছে। ctx.render() মেথডের মাধ্যমে টেম্পলেট রেন্ডার করা হয় এবং সেখানে ডায়নামিক ডেটা (যেমন title) পাঠানো হয়।

৩. Pug টেম্পলেট তৈরি করা

এখন, views ফোল্ডারে একটি index.pug টেম্পলেট তৈরি করতে হবে। এই টেম্পলেটে ডায়নামিক ডেটা ইনজেক্ট করা হবে।

`views/index.pug`:

doctype html
html
  head
    title= title
  body
    h1= title
    p Welcome to KoaJS with Pug Template Engine!

এখানে, title ডায়নামিক ডেটা হিসেবে পাস করা হচ্ছে এবং তা টেম্পলেটে রেন্ডার হবে। আপনি যদি অ্যাপ চালান, তাহলে পেজটি একটি শিরোনামসহ ডায়নামিকভাবে রেন্ডার হবে।

৪. অতিরিক্ত ডায়নামিক ডেটা পাস করা

আপনি যদি আরো ডায়নামিক ডেটা পাস করতে চান, যেমন লিস্ট বা অবজেক্ট, তাহলে আপনি সেগুলোও পাস করতে পারবেন। নিচে একটি উদাহরণ দেওয়া হল, যেখানে একটি অ্যারে পাস করা হয়েছে:

উদাহরণ কোড:

app.use(async (ctx) => {
  const title = 'Welcome to KoaJS with Pug';
  const users = [
    { name: 'John', age: 28 },
    { name: 'Jane', age: 32 },
    { name: 'Joe', age: 40 }
  ];
  await ctx.render('index', { title, users });
});

`views/index.pug`:

doctype html
html
  head
    title= title
  body
    h1= title
    p Welcome to KoaJS with Pug Template Engine!
    ul
      each user in users
        li= user.name + ' - ' + user.age

এখানে, users অ্যারে কন্টেন্টটি টেম্পলেটে রেন্ডার হবে, যেখানে প্রত্যেকটি ব্যবহারকারীর নাম এবং বয়স দেখানো হবে।

৫. কাস্টম টেম্পলেট ডিরেক্টরি

আপনি চাইলে টেম্পলেট ডিরেক্টরি কাস্টমাইজ করতে পারেন। যদি আপনার টেম্পলেটগুলি অন্য কোনো ডিরেক্টরিতে থাকে, তাহলে koa-views কনফিগারেশন পরিবর্তন করতে হবে।

উদাহরণ:

app.use(koaViews(path.join(__dirname, 'templates'), {
  extension: 'pug'
}));

এখানে templates ডিরেক্টরি থেকে টেম্পলেট ফাইলগুলি রেন্ডার করা হবে।

সারাংশ

KoaJS-এ Pug টেম্পলেট ইঞ্জিন ব্যবহার করে ডায়নামিক HTML পেজ রেন্ডার করা সম্ভব। আপনি koa-views এবং Pug প্যাকেজগুলি ইনস্টল এবং কনফিগার করে আপনার অ্যাপ্লিকেশনে ডায়নামিক টেম্পলেট রেন্ডারিং কার্যকরীভাবে ব্যবহার করতে পারেন। টেম্পলেটের মধ্যে ডায়নামিক ডেটা ইনজেক্ট করার মাধ্যমে আপনি ওয়েব পেজে কাস্টমাইজড কন্টেন্ট দেখাতে পারবেন।

Content added By

Rezwan Siddiki Tamim

টেমপ্লেট ইঞ্জিন কাস্টমাইজেশন এবং Layouts তৈরি করা

288

KoaJS একটি লঘু এবং কাস্টমাইজযোগ্য ওয়েব ফ্রেমওয়ার্ক, যা Node.js পরিবেশে ব্যবহৃত হয়। যখন আপনি KoaJS ব্যবহার করে ওয়েব অ্যাপ্লিকেশন তৈরি করেন, তখন আপনি সহজে টেমপ্লেট ইঞ্জিন ব্যবহার করে ডায়নামিক HTML পেজ তৈরি করতে পারেন। KoaJS-এ টেমপ্লেট ইঞ্জিন কাস্টমাইজ করার জন্য বেশ কিছু জনপ্রিয় টেমপ্লেট ইঞ্জিন যেমন Pug, EJS, Handlebars ইত্যাদি ব্যবহার করা যায়। এই টিউটোরিয়ালে আমরা দেখব কিভাবে KoaJS-এ টেমপ্লেট ইঞ্জিন কাস্টমাইজ এবং Layouts তৈরি করা যায়।

১. KoaJS-এ টেমপ্লেট ইঞ্জিন সেটআপ করা

Pug টেমপ্লেট ইঞ্জিন ব্যবহার করা

Pug (আগে Jade হিসেবে পরিচিত) একটি জনপ্রিয় টেমপ্লেট ইঞ্জিন, যা HTML ফাইল গুলি জেনারেট করতে ব্যবহৃত হয়। KoaJS-এ Pug ব্যবহার করার জন্য koa-pug প্যাকেজটি ইনস্টল করতে হবে। নিচে স্টেপ বাই স্টেপ নির্দেশনা দেওয়া হয়েছে।

১.১ koa-pug ইনস্টল করা

npm install koa-pug pug

১.২ Pug কনফিগারেশন এবং ব্যবহার করা

const Koa = require('koa');
const Router = require('koa-router');
const koaPug = require('koa-pug');
const path = require('path');

const app = new Koa();
const router = new Router();

// koa-pug কনফিগার করা
const pug = new koaPug({
  viewPath: path.resolve(__dirname, 'views'), // টেমপ্লেট ফাইলের পাথ
  app: app  // অ্যাপ্লিকেশনটি পাস করা
});

// রাউট হ্যান্ডলার
router.get('/', async (ctx) => {
  await ctx.render('index', { title: 'Welcome to KoaJS!' });
});

// রাউট মাউন্ট করা
app.use(router.routes()).use(router.allowedMethods());

// অ্যাপ চালু করা
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

এখানে, আমরা koa-pug মিডলওয়্যার ব্যবহার করে Pug টেমপ্লেট ইঞ্জিন কনফিগার করেছি। views ফোল্ডারে আমাদের পিজি টেমপ্লেট ফাইল থাকবে, এবং ctx.render() মেথডের মাধ্যমে টেমপ্লেট রেন্ডার করা হবে।

১.৩ Pug টেমপ্লেট ফাইল তৈরি করা

views ফোল্ডারে index.pug ফাইল তৈরি করুন:

html
  head
    title= title
  body
    h1= title
    p Welcome to the world of KoaJS!

এখানে, আমরা title প্যারামিটার পাস করছি এবং সেটি টেমপ্লেটে ব্যবহার করছি।

২. Layouts তৈরি করা

KoaJS-এ টেমপ্লেট ইঞ্জিন কাস্টমাইজেশনের একটি গুরুত্বপূর্ণ দিক হল Layouts তৈরি করা। Layouts মূলত একটি স্ট্যান্ডার্ড কাঠামো বা "স্ট্রাকচার" যা বিভিন্ন পৃষ্ঠার মধ্যে শেয়ার করা হয়, যেমন হেডার, ফুটার, সাইডবার ইত্যাদি। KoaJS-এ Layout তৈরি করার জন্য Pug বা EJS এর মতো টেমপ্লেট ইঞ্জিন ব্যবহার করা যায়।

২.১ Pug Layout তৈরি করা

এখন আমরা একটি সাধারণ Layout তৈরি করব, যা সকল পৃষ্ঠায় শেয়ার হবে (যেমন হেডার, ফুটার ইত্যাদি)।

প্রথমে, views/layout.pug ফাইলটি তৈরি করুন:

html
  head
    title= title
  body
    header
      h1 My Awesome Website
    main
      block content
    footer
      p © 2024 My Awesome Website

এখানে, block content অংশটি আপনি ডায়নামিক কনটেন্ট হিসেবে প্রতিটি পৃষ্ঠায় ব্যবহার করতে পারবেন।

২.২ Layout ব্যবহার করা

আপনি যখন ctx.render() কল করবেন, তখন আপনি Layout ব্যবহার করতে পারেন এবং কনটেন্ট ব্লকটি সেই Layout-এ রেন্ডার হবে।

router.get('/home', async (ctx) => {
  await ctx.render('home', { title: 'Home Page' });
});

এখন, home.pug ফাইল তৈরি করুন views/home.pug:

extends layout

block content
  h2 Welcome to the Home Page!
  p This is a dynamically generated page using KoaJS and Pug.

এখানে, আমরা extends layout দিয়ে Layout ব্যবহার করেছি এবং block content এর মধ্যে পেজের বিশেষ কনটেন্ট রেখেছি।

৩. EJS টেমপ্লেট ইঞ্জিন ব্যবহার করা

আপনি EJS (Embedded JavaScript) টেমপ্লেট ইঞ্জিনও ব্যবহার করতে পারেন KoaJS-এ। এটি একটি সহজ এবং শক্তিশালী টেমপ্লেট ইঞ্জিন যা বেশ জনপ্রিয়।

৩.১ EJS ইনস্টল করা

npm install koa-ejs ejs

৩.২ EJS কনফিগারেশন এবং ব্যবহার করা

const Koa = require('koa');
const Router = require('koa-router');
const koaEjs = require('koa-ejs');
const path = require('path');

const app = new Koa();
const router = new Router();

// koa-ejs কনফিগার করা
koaEjs(app, {
  root: path.join(__dirname, 'views'),  // টেমপ্লেট ফাইলের পাথ
  viewExt: 'ejs',  // ফাইল এক্সটেনশন
  cache: false,  // ডেভেলপমেন্টে ক্যাশ বন্ধ রাখা
  debug: true
});

// রাউট হ্যান্ডলার
router.get('/', async (ctx) => {
  await ctx.render('index', { title: 'Welcome to KoaJS with EJS!' });
});

// রাউট মাউন্ট করা
app.use(router.routes()).use(router.allowedMethods());

// অ্যাপ চালু করা
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

৩.৩ EJS টেমপ্লেট ফাইল তৈরি করা

views/index.ejs ফাইল তৈরি করুন:

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1><%= title %></h1>
  <p>Welcome to the world of KoaJS with EJS!</p>
</body>
</html>

এখানে, আমরা <%= title %> ব্যবহার করে ডায়নামিক কনটেন্ট রেন্ডার করেছি।

সারাংশ

KoaJS-এ টেমপ্লেট ইঞ্জিন কাস্টমাইজেশন এবং Layout তৈরি করা খুবই সহজ এবং কার্যকর। আপনি Pug, EJS বা অন্য কোনো টেমপ্লেট ইঞ্জিন ব্যবহার করে ডায়নামিক HTML পেজ তৈরি করতে পারেন এবং Layout ব্যবহার করে ওয়েব পৃষ্ঠাগুলির মধ্যে সাধারণ কাঠামো শেয়ার করতে পারেন। KoaJS-এর নমনীয়তা এবং কাস্টমাইজেশন ক্ষমতা আপনাকে প্রয়োজনীয় টেমপ্লেটিং সলিউশন তৈরি করতে সাহায্য করে, যাতে আপনার অ্যাপ্লিকেশন আরও গতিশীল এবং স্কেলেবল হয়।

Content added By

Rezwan Siddiki Tamim

KoaJS এর পরিচিতি KoaJS সেটআপ এবং ইনস্টলেশন KoaJS এর বেসিক কনফিগারেশন KoaJS Routing KoaJS Middleware বিস্তারিত

KoaJS এর টেমপ্লেট ইঞ্জিন ইন্টিগ্রেশন

KoaJS এর সাথে EJS টেমপ্লেট ইঞ্জিন ইন্টিগ্রেশন

১. EJS ইনস্টল করা

২. KoaJS এর সাথে EJS কনফিগারেশন করা

৩. EJS টেমপ্লেট তৈরি করা

৪. অ্যাপ চালানো

KoaJS এর সাথে Pug (Jade) টেমপ্লেট ইঞ্জিন ইন্টিগ্রেশন

১. Pug ইনস্টল করা

২. KoaJS এর সাথে Pug কনফিগারেশন করা

৩. Pug টেমপ্লেট তৈরি করা

৪. অ্যাপ চালানো

সারাংশ

koa-views ব্যবহার করে টেমপ্লেট ইঞ্জিন ইন্টিগ্রেশন

koa-views ইনস্টল করা

ইনস্টলেশন:

koa-views ব্যবহার করে টেমপ্লেট রেন্ডারিং

১. KoaJS অ্যাপ্লিকেশন তৈরি করা

কোডের ব্যাখ্যা:

২. views ডিরেক্টরি তৈরি করা

৩. EJS টেমপ্লেট তৈরি করা

সার্ভার চালানো

কাস্টম ডেটা পাস করা

koa-views কাস্টমাইজেশন

সারাংশ

Pug, EJS, Handlebars এর সাথে কাজ করা

১. Pug এর সাথে কাজ করা

Pug ইনস্টল করা:

Pug কনফিগারেশন এবং ব্যবহার:

২. EJS এর সাথে কাজ করা

EJS ইনস্টল করা:

EJS কনফিগারেশন এবং ব্যবহার:

৩. Handlebars এর সাথে কাজ করা

Handlebars ইনস্টল করা:

Handlebars কনফিগারেশন এবং ব্যবহার:

সারাংশ

ডায়নামিক HTML পেজ রেন্ডার করা

১. Pug টেম্পলেট ইঞ্জিন ইনস্টল করা

ইনস্টলেশন:

২. Pug টেম্পলেট ইঞ্জিন কনফিগার করা

উদাহরণ কোড:

৩. Pug টেম্পলেট তৈরি করা

views/index.pug:

৪. অতিরিক্ত ডায়নামিক ডেটা পাস করা

উদাহরণ কোড:

views/index.pug:

৫. কাস্টম টেম্পলেট ডিরেক্টরি

উদাহরণ:

সারাংশ

টেমপ্লেট ইঞ্জিন কাস্টমাইজেশন এবং Layouts তৈরি করা

১. KoaJS-এ টেমপ্লেট ইঞ্জিন সেটআপ করা

Pug টেমপ্লেট ইঞ্জিন ব্যবহার করা

১.১ koa-pug ইনস্টল করা

১.২ Pug কনফিগারেশন এবং ব্যবহার করা

১.৩ Pug টেমপ্লেট ফাইল তৈরি করা

২. Layouts তৈরি করা

২.১ Pug Layout তৈরি করা

২.২ Layout ব্যবহার করা

৩. EJS টেমপ্লেট ইঞ্জিন ব্যবহার করা

৩.১ EJS ইনস্টল করা

৩.২ EJS কনফিগারেশন এবং ব্যবহার করা

৩.৩ EJS টেমপ্লেট ফাইল তৈরি করা

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!

`views/index.pug`:

`views/index.pug`: