អ្វីទៅ ejs គឺ Embedded JavaScript templating ហើយវាសម្រាប់បង្ហាញ html ជាមួយ javascript ដើម្បីធ្វើ page សម្រាប់បង្ហាញទិន្ន័យជំនួស file html
យើង install npm package មានដូចជា
npm init npm i express body-parser ejs
ដើម្បីដំណើរការ ejs នៅក្នុង node js មុនដំបូងយើងត្រូវបង្កើត folder ឈ្មោះថា views សម្រាប់ដាក់ file ejs
const express = require("express")
const bodyParser = require("body-parser")
const app = express()
app.set('view engine', "ejs")
app.get('/', (req, res) => {
res.render('list', { kindOfDay: day })
})
សម្រាប់ app.set('view engine', "ejs") គឹហៅ folder views មកប្រើ
បោះទិន្ន័យពី node js ទៅឲ្យ ejs សម្រាប់អ្នកបង្ហាញវា
const express = require("express")
const bodyParser = require("body-parser")
const app = express()
app.set("view engine", "ejs");
app.get('/',(req,res)=>{
res.render("home", {hello: "Helo Ros Dul study ejs node js"})
// hello គឺសម្រាប់ហៅ key ពី file home.ejs
})
const port = process.env.PORT || 2000;
app.listen(port, () => {
console.log(`Server runnig port ${port}`)
})
យើងបានបង្កើត file ejs មួយឈ្មោះថា home.ejs នៅក្នុង folder views
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ejs test</title>
</head>
<body>
<h1><%= hello %></h1>
<!-- hello នេះគឺជា key សម្រាប់ហៅទៅប្រើនៅក្នុង app.js-->
</body>
</html>
លំហាត់ បង្ហាញថ្ងៃ
const express = require("express")
const bodyParser = require("body-parser")
const app = express()
app.set('view engine', "ejs")
app.get('/', (req, res) => {
const date = new Date()
const currentDay = date.getDay()
let day = ""
switch (currentDay) {
case 0:
day = "Sunday"
break;
case 1:
day = "Monday"
break;
case 2:
day = "Tuesday"
break;
case 3:
day = "Wednesday"
break;
case 4:
day = "Thursday"
break;
case 5:
day = "Friday"
break;
case 6:
day = "Saterday"
default:
break;
console.log("Error current equal" + currentDay)
}
res.render('list', { kindOfDay: day })
})
const port = process.env.PORT || 2000;
app.listen(port, () => {
console.log(`Server runnig port ${port}`)
})
<body>
<h1>Today is <%= kindOfDay %></h1>
</body>
</html>
code inside EJS templetes
ដើម្បីឲ្យកូដ javascript ដើរនៅក្នុង ejs បានយើងត្រូវ <% code %> ក្នុងមួយ line ក្នុងមួយ line កូដដូចឧទាហរណ៍ខាងក្រោមនេះ
</head>
<body>
<% if(kindOfDay === "saterday" || kindOfDay === "sunday"){ %>
<h1 style="color: red;"><%= kindOfDay %></h1>
<% }else{ %>
<h1 style="color: blue;"><%= kindOfDay %></h1>
<% } %>
</body>
</html>
កូដសម្រាប់ទាញថ្ងៃខែឆ្នាំ
index.js
const express = require("express")
const bodyParser = require("body-parser")
const app = express()
app.set('view engine', "ejs")
app.get('/', (req, res) => {
var today = new Date()
var options = {
weekday: "long",
day: "numeric",
month: "long",
year: "numeric"
}
var date = today.toLocaleString("km-KH",options)
res.render('index.ejs', {dul1: date})
})
const port = process.env.PORT || 2000;
app.listen(port, () => {
console.log(`Server runnig port ${port}`)
})
index.ejs
</head>
<body>
<h1><%= dul1 %></h1>
</body>
</html>
Passing data from your webpage to server
មេរៀននេះបានសិក្សាបោះទិន្ន័យពី webpage របស់យើងចូលទៅក្នុង server រួចហើយបោះទិន្ន័យពី server ទៅ webpage យើងវិញ
index.ejs </head>
<style>
body{
background-color: rgb(219, 219, 219);
margin-left: 50px;
}
</style>
<body>
<h1><%= dul1 %></h1><!-- Show Date-->
<ul>
<li>Cooking</li>
<li>Eating</li>
<li>Travel</li>
<!--ទី២ Loop ទិន្ន័យពី Server រួចដាក់នៅ webpage -->
<% for(i in listItems){ %>
<li><%= listItems[i] %></li>
<% } %>
</ul>
<!--ទី១ បោះទិន្ន័យទៅឲ្យ Server -->
<form action="/" method="post">
<input type="text" placeholder="input data" name="txt">
<button type="submit"> submit</button>
</form>
</body>
</html>
app.js
const express = require("express")
const bodyParser = require("body-parser")
const app = express()
app.set('view engine', "ejs")
app.use(bodyParser.urlencoded({extended: true}))
var items = []
app.get('/', (req, res) => {
var today = new Date()
var options = {
weekday: "long",
day: "numeric",
month: "long",
year: "numeric"
}
var date = today.toLocaleString("km-KH",options)
res.render('index.ejs', {dul1: date, listItems: items})
})
// Get value from form ejs templete
app.post('/',(req,res)=>{
let item = req.body.txt
items.push(item)
res.redirect("/")//Go go home page
})
const port = process.env.PORT || 2000;
app.listen(port, () => {
console.log(`Server runnig port ${port}`)
})
Note:នៅក្នុង method post យើងមិនអាចបោះទិន្ន័យតាមនេះទៀតបានទេ ដោយសារយើងមានការបោះទិន្ន័យនៅតាម method get រួចហើយ។ ដូចនេះយើងត្រូវបោះទិន្ន័យបានតែមួយផ្លូវទេចំនៅផេកតែមួយ
EJS playout
យើងចែកកូនរបស់យើងជាកញ្ចប់រួចបញ្ចូលវាតែមួយ
Module expport function
មួយ functionfile date.js
file app.js
ពីរ function
ចំពោះ export មានច្រើន function យើងត្រូវប្រើ module.exports.ឈ្មោះ function = ឈ្មោះ function
យើងអាចធ្វើទម្រងនេះក៏បាន
exports.getDate = function (){
const today = new Date();
const options = {
weekday: "long",
day: "numeric",
month: "long",
year: "numeric"
}
let date = today.toLocaleString("km-KH",options);
return date;
}
exports.getDay = function (){
const today = new Date();
const options = {
weekday: "long",
}
let date = today.toLocaleString("km-KH",options);
return date;
}
const express = require("express")
const bodyParser = require("body-parser")
const app = express()
app.set('view engine', "ejs")
app.use(bodyParser.urlencoded({extended: true}))
var items = []
const dates = require(__dirname + "/date.js")
app.get('/', (req, res) => {
/** ពីរខាងក្រោមនឹងប្រើមួយណាក៏បាន */
const date = dates.getDate();
//const date = dates.getDay();
res.render('index.ejs', {dul1: date, listItems: items})
})
// Get value from form ejs templete
app.post('/',(req,res)=>{
let item = req.body.txt
items.push(item)
res.redirect("/")//Go go home page
})
const port = process.env.PORT || 2000;
app.listen(port, () => {
console.log(`Server runnig port ${port}`)
})
0 Comments