កន្លង​មក​ ការបង្ហាញ​ទំព័រ​​ដែល​ជា​ឯកសារ​ប្រភេទ HTML ផ្សេង​ៗ​ ត្រូវបាន​ធ្វើ​ឡើង​ដោយ​ប្រើប្រាស់​ក្បួន​ឈ្មោះ «sendFile» នៅ​ក្នុង​សាស្ត្រា Express ។ ហើយ​ទំព័រទាំងនោះ​ត្រូវ​បាន​សរសេរ​រៀបចំឡើង​ដោយ​ប្រើប្រាស់​ភាសា HTML ។ ក៏ប៉ុន្តែ ​ភាសា HTML មិន​អនុញ្ញាត​អោយ​យើង​​អាច​យក​ទិន្នន័យ​ផ្សេង​ៗ​ពី​កម្មវិធី​ Node.js មក​សរសេរ​បង្ហាញ​នៅ​លើ​ទំព័រ​ណា​មួយ​បាន​ឡើយ យើង​ចាំបាច់​ត្រូវ​ប្រើប្រាស់​ភាសា​គំរូ​គេហទំព័រ​ណា​មួយ (templating language) ដើម្បី​អាចយក​​ទិន្នន័យ​ទាំង​នោះ មក​បង្ហាញ​នៅ​លើទំព័រ HTML ។

 

នៅ​ក្នុង​ចំណោម​​ភាសា​គំរូ​គេហទំព័រ​សំរាប់ប្រើប្រាស​ជាមួយ​នឹងសាស្ត្រា Express, ភាសា EJS (Effective JavaScript) មានលក្ខណៈ​ងាយ​ស្រួលគួរ​សម​ដែរ ព្រោះ​វា​អនុញ្ញាត​អោយយើង​​អាច​ប្រើប្រាស់​ភាសា JavaScript លាយ​ឡំ​ជាមួយ​នឹងពាក្យ​ពិសេស​ផ្សេង​ៗ​នៅ​ក្នុង​ភាសា​នោះ​​បាន​​។

 

ដើម្បី​អាច​ប្រើប្រាស់​ភាសា​នេះ​បាន​ យើងចាំបាច់ត្រូវ​ទាយ​យក​កម្មវិធី​របស់​ភាសា​នេះ​មកដំឡើង​នៅ​ក្នុង​កម្មវិធី​គេហទំព័រ​រប់ស​យើង​ ដោយ​ធ្វើដូច​ខាងក្រោម​នេះ៖

 

npm install ejs

 

បន្ទាប់ពី​មានកម្មវិធី EJS រួច​ហើយ គ្រប់​ឯកសារទាំងឡាយ​ណាដែល​ត្រូវ​បានសរសេរ​ជា​ភាសា EJS និង​មានឈ្មោះ .ejs នៅ​ខាង​ចុង​ នឹង​ត្រូវ​បក​ប្រែជា​ភាសា HTML ជា​ស្វ័យប្រវត្តិ នៅ​ពេល​ដែល​កម្មវិធី​គេហទំព័រ​មាន​ដំណើរការ​។ ពិនិត្យ​កម្មវិធី​ខាង​ក្រោម​នេះ៖

 

<!--index.ejs-->
<!doctype html>
<html lang="en">
  <head>
    <title>គេហទំព័រ​យើង</title>
  </head>
  <body>
    <%- include('header.ejs') %>
    <%- include('body.ejs') %>
    <%- include('footer.ejs') %>
  </body>
</html>

 

<!--header.ejs-->
<div class="header">
  ក្បាលគេហទំព័រ
</div>

 

<!--body.ejs-->
<div class="body">
  តួ​គេហទំព័រ
</div>

 

<!--footer.ejs-->
<div class="footer">
  ជើង​គេហទំព័រ
</div>

 

ជា​បំបូង យើង​ត្រូវបង្កើត​ថត​ថ្មីមួយ​មានឈ្មោះ​ថា views នៅ​ក្នុង​ថត​ជា​មួយ​ឯកសារ​ឈ្មោះ express.js ដើម្បី​​រក្សាឯកសារ​ទាំងបួន​​នេះ​ទុក​មួយ​អន្លើ​សិន​។

 

នៅ​លើបន្ទាត់​លេខ​ 8 ការសរសេរ​ថា <%- include('header.ejs') %> គឺ​ជា​បញ្ជា​នៅ​ក្នុង​ភាសា EJS តំរូវ​អោយ​បញ្ជូល​ឯកសារ​ឈ្មោះ header.ejs នៅ​កន្លែង​នោះ​។

 

នៅ​លើបន្ទាត់​លេខ​ 9 ការសរសេរ​ថា <%- include('body.ejs') %> គឺ​ជា​បញ្ជា​នៅ​ក្នុង​ភាសា EJS តំរូវ​អោយ​បញ្ជូល​ឯកសារ​ឈ្មោះ body.ejs នៅ​កន្លែង​នោះ​។

 

នៅ​លើបន្ទាត់​លេខ​ 10 ការសរសេរ​ថា <%- include('footer.ejs') %> គឺ​ជា​បញ្ជា​នៅ​ក្នុង​ភាសា EJS តំរូវ​អោយ​បញ្ជូល​ឯកសារ​ឈ្មោះ footer.ejs នៅ​កន្លែង​នោះ​។

 

ក៏ប៉ុន្តែ ទោះ​ជា​យ៉ាងណាក៏​ដោយ មុន​នឹង​អាចអនុញ្ញាត​អោយ​កម្មវិធី EJS បកប្រែ​ឯកសារទាំងឡាយ​ដែល​ត្រូវ​បាន​រៀបរៀង​ឡើង​ដោយ​ប្រើប្រាស់​ភាសា EJS យើង​ចាំបាច់​ត្រូវ​ធ្វើ​ការកែកុន​មួយ​ចំនួន​នៅ​ក្នុង​ឯកសារ express.js ជា​មុន​សិន​។ ពិនិត្យកម្មវិធី​ខាង​ក្រោម​នេះ៖

 

var http = require('http');
var express = require('express');
var app = express();
var path = require('path');
var port = process.env.PORT || 3000;
 
//កំណត់​យក​ថត​ឈ្មោះ views សំរាប់​រក្សាទុក​ឯកសារ​ជា​ភាសា EJS ទាំងឡាយ​
app.set('views', path.join(__dirname, 'views'));
//កំណត់យក​កម្មវិធី EJS សំរាប់​បកប្រែ​​ឯកសារទាំងឡាយ​នៅ​ក្នុង​ថត​ឈ្មោះ views
app.set('view engine', 'ejs');
  
app.get('/', function (req, res) {
  //យក​ឯកសារ​ឈ្មោះ index នៅ​ក្នុង​ថត​ឈ្មោះ views មក​បកប្រែ
  //ដើម្បី​​បង្ហាញ​ព័ត៌មាន​ទាំងឡាយ​​នៅ​លើ​ browser
  res.render('index')
});
 
app.listen(port, function() {
  console.log('The server is running at port '+port);
});

 

នៅ​លើបន្ទាត់លេខ 8 ការសរសេរថា app.set('views', path.join(__dirname, 'views')); គឺជាការកំណត់​យក​ថត​ឈ្មោះ views សំរាប់​រក្សាទុក​រាល់​ឯកសារជា​ភាសា EJS ទាំងឡាយ​។ 

 

នៅ​លើ​បន្ទាត់​លេខ 10 ការសរសេរ​ថា app.set('view engine', 'ejs'); គឺ​ជា​ការកំណត់យក​កម្មវិធី EJS សំរាប់​បកប្រែ​បណ្តា​ឯកសារ EJS ទាំងឡាយ​។

 

នៅ​លើ​បន្ទាត់​លខ 15 ការសរសេរ​ថា res.render('index') គឺ​ជាការតំរូវ​អោយ​យក​ឯកសារ​ឈ្មោះ index នៅ​ក្នុង​ថត​ឈ្មោះ views មក​បកប្រែ​ពី​ភាសា EJS ទៅ​ជា​ភាសា HTML ដើម្បី​បង្ហាញ​ព័ត៌មាន​ទាំងឡាយ​នៅ​លើ​ browser ៕