close

ব্যবহার Template Engine করে Express.js

ওয়েব বিকাশে, ইন্টারেক্টিভ এবং গতিশীল ব্যবহারকারীর অভিজ্ঞতা তৈরির জন্য ওয়েব পৃষ্ঠাগুলিতে সার্ভার থেকে ডেটা প্রদর্শন করা অত্যন্ত গুরুত্বপূর্ণ। এই যেখানে Template Engine উদ্ধার Express.js আসা. A Template Engine হল একটি টুল যা আপনাকে সার্ভার থেকে এইচটিএমএল কোডে ডেটা ইনজেকশনের মাধ্যমে গতিশীল HTML টেমপ্লেট তৈরি করতে দেয়।

কেন ব্যবহার করবেন Template Engine ?

Template Engine সার্ভার থেকে আসা ডেটা থেকে এইচটিএমএল মার্কআপকে আলাদা করতে সহায়তা করুন। এটি আপনাকে কোডের প্রতিটি লাইনে ডেটা এম্বেড না করেই আরও সহজে HTML কোড পরিচালনা করতে দেয়। পরিবর্তে, আপনি HTML কোডের মধ্যে "প্লেসহোল্ডার" বা "ট্যাগ" তৈরি করবেন, যা Template Engine পরে সার্ভার-সাইড ডেটা দিয়ে পূরণ করবে।

ব্যবহার Template Engine করে Express.js

Express.js বিভিন্ন সমর্থন করে template engine, যেমন Pug(পূর্বে Jade নামে পরিচিত) এবং EJS(Embedded JavaScript)। নিচে Pug এবং EJS ব্যবহারের উদাহরণ দেওয়া হল Express.js:

Pug ব্যবহার করে Template Engine

pug পাগ ইনস্টল করুন: আপনাকে npm এর মাধ্যমে প্যাকেজটি ইনস্টল করতে হবে । 

npm install pug --save

কনফিগার করুন Template Engine: আপনার অ্যাপ্লিকেশনের কনফিগারেশন ফাইলে(যেমন, app.js), Pug কে সংজ্ঞায়িত করুন template engine । 

app.set('view engine', 'pug');

একটি পাগ টেমপ্লেট তৈরি করুন: ডিরেক্টরিতে পাগ ফাইল তৈরি করুন views । উদাহরণস্বরূপ, একটি index.pug ফাইল তৈরি করুন:

doctype html  
html  
  head  
    title My Express App  
  body  
    h1 Welcome to My Express App  
    p #{message}

রুট হ্যান্ডলিং এবং ডেটা রেন্ডারিং: রুট হ্যান্ডলিং, আপনি ব্যবহার করে ডেটা পাস করতে template engine পারেন res.render() । 

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

EJS ব্যবহার করে Template Engine

EJS ইনস্টল করুন: ejs npm এর মাধ্যমে প্যাকেজটি ইনস্টল করুন। 

npm install ejs --save

কনফিগার করুন Template Engine: template engine আপনার অ্যাপ্লিকেশনের কনফিগারেশন হিসাবে EJS সংজ্ঞায়িত করুন। 

app.set('view engine', 'ejs');

একটি EJS টেমপ্লেট তৈরি করুন: ডিরেক্টরিতে EJS ফাইল তৈরি করুন views । উদাহরণস্বরূপ, একটি index.ejs ফাইল তৈরি করুন:

<!DOCTYPE html>  
<html>  
<head>  
  <title>My Express App</title>  
</head>  
<body>  
  <h1>Welcome to My Express App</h1>  
  <p><%= message %></p>  
</body>  
</html>

রুট হ্যান্ডলিং এবং ডেটা রেন্ডারিং: রুট হ্যান্ডলিং, ব্যবহার করে ডেটা পাস template engine করুন res.render() । 

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

 

উপসংহার

Template Engine ইন ব্যবহার করে Express.js আপনি গতিশীল ওয়েব পৃষ্ঠাগুলি তৈরি করতে এবং ব্যবহারকারীর ব্রাউজারে সার্ভার থেকে তথ্য প্রদর্শন করতে পারবেন। Pug, EJS, বা অন্যান্য ব্যবহার করে template engine, আপনি ইন্টারেক্টিভ এবং নমনীয় ওয়েব পৃষ্ঠাগুলি তৈরি করতে পারেন যা একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করে এবং HTML কোড এবং ডেটা পরিচালনাকে অপ্টিমাইজ করে৷