node js ejs

អ្វីទៅ 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
មួយ function

file 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}`)
})
Tags
Reactions

Post a Comment

0 Comments