ตัวอย่างการพัฒนา Web Application ด้วย NodeJS + Express ( ใช้ EJS เป็น template engine ) สำหรับผู้เริ่มต้น

ExpressJS นับว่าเป็น WebApplication Framework ซึ่งทำงานกับ NodeJs สำหรับการพัฒนาเว็บไซต์ที่ได้รับความนิยมมากในปัจจุบัน ในบทความนี้จะแสดงตัวอย่างการสร้างหน้าเว็บด้วย ทีละขั้นดังนี้

1.  สร้าง folder โดยพิมพ์คำสั่ง mkdir my_express_app แล้ว เข้าไปที่  folder ที่สร้างไว้โดยพิมพ์คำสั่ง cd my_express_app


2. install expressJS โดย พิมำ์คำสั่ง npm install express --save


3. เปิด VisualStudio Code โดย แล้วเลือก open folder ให้เลือก folder d:\\my_express_app


4. สร้างไฟล์ index.js




5. พิมพ์  code ในไฟล์ index.js

const express = require('express');//เรียก module express
const path = require('path');

const app = express();//สร้าง object express ชื่อ app
const port = process.env.PORT || 3000;//กำหนดให้ใช้ port 3000



app.get("/", (req, res) => { //แสดงข้อความ Hello World !!! เมื่อเข้ามาที่ http://localhost:3000/

    res.send("Hello World !!!");
   
});

app.listen(port);



6. รัน node js server โดย พิมพ์ node index.js


 เปิด browser โดย พิมพ์ url http://localhost:3000/ หน้าเว็บจะแสดงข้อความ HelloWorld


7.  ที่นี้ลองสร้างหน้าเว็บจาก esj template engine ดู ให้ install ejs module สำหรับอำนวยความสะดวกในในการสร้างหน้าเว็บ


8. สร้าง Folder views สำหรับเก็บ ไฟล์ .ejs ที่เป็น interface



9. สาร้างไฟล์ index.ejs สรำหรับ หน้าเว็บ


10. ในไฟล์ views/index.ejs ให้พิมพ์ html
<!doctype html>
<html >
  <head>
  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>

  </head>
  <body>
    <h1>Hello, world!</h1>

  </body>
</html>


11. แก้หน้า index.js

const express = require('express');
const path = require('path');

const app = express();
const port = process.env.PORT || 3000;
var contact_page = require('./contact');

app.set("view engine","ejs");// กำหนดให้ express js ใช้ ejs เป็น template engine

app.get("/", (req, res) => {

// กำหนดให้ แสดงหน้าเว็บจาก views/index.ejs เมื่อเข้ามาที่ http://localhost:3000/
    res.render("index");
   
});

app.listen(port);


12. รัน nodejs server อีกครั้ง โดย ไปที่ cd my_express_app และ พิพม์ node index.js เพื่อรันไฟล์ index.js


ผลลัพธ์คือ แสดง Hello World ใน browser ตามรูป


13.  เราจะลองสร้าง หน้า about ดู ให้สร้างไฟล์ about.ejs ในfolder view โดย มี code html ดังนี้
<!doctype html>
<html >
  <head>
  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>About</title>

  </head>
  <body>
    
    <h1>About</h1>

  </body>
</html>


14. เราจะกำหนดเข้าหน้าเว็บ http://localhost:3000/about ให้แสดง html จาก about.ejs   แก้ไฟล์ index.js โดยเพิ่มคำสั่งดังนี้

 app.get("/about", (req, res) => {

    res.render("about");
  
});

 ( เราเรียกการกำหนด แบบนี้ว่า การกำหนด route )


15.  รัน nodejs ใน comand line โดย พิมพ์ node index.js อีกครั้ง ถ้าเปิด browser ไปที่ http://localhost:3000/about  ใน browser จะแสดงดังรูป


16. ต่อมา หากเราต้องการ สร้าง link ระหว่าหน้า http://localhost:3000/ และหน้า http://localhost:3000/about ให้สร้าง ไฟล์ menu.ejs ใน folder views และสร้าง link ดังนี้

<ul>
    <li><a href="/">Home  </a></li>
    <li><a href="/about">About </a></li>
</ul>



17. ใส่ tag include <% include menu.ejs %> ในไฟล์ index.ejs และabout.ejs เพื่อนำ tag html ในไฟล์ menu.ejs มาแสดง




การเขียนไฟล์เมนูแยกในลักษณะนี้จะช่วยให้ สะดวกในการเพิ่มหน้าในอนาคตโดยสามารถเพิ่มหน้าในไฟล์ menu.ejs ที่เดียวไม่ต้องเพิ่มเมนูในทุกหน้า

ตัวอย่างการส่ง ค่า parameter ไปให้ไฟล์ .ejs 


ในการทำงาน WebApplication บางครั้งเราต้องการที่จะส่งค่า parameter ไปให้ไฟล์ ejs เราสามารถส่งค่า parameter ได้โดยใช้คำสั่ง res.render("ชื่อไฟล์ .ejs",{ชื่อตัวแปร:"ค่าที่จะส่งไป"});


ให้ลองเพิ่ม

res.render("index",{page:"index"});
res.render("about",{page:"about"});

ตามรูป ( ในที่นี้คือาการส่งตัวแปร page ไปให้ไฟล์ index.ejs และ about.ejs )



การนำค่า parameter ที่ส่งมาไปใช้งานเราสามารถนำชื่อตัวแปรที่ส่งมาใช้งานได้เลย
ในไฟล์  menu.ejs ให้แก้ไขใส่เงื่อนไข

<ul>
    <li><a href="/">Home <% if(page=="index"){ %> (Current Page) <% } %> </a></li>
    <li><a href="/about">About <% if(page=="about"){ %> (Current Page) <% } %></a></li>
</ul>

ในที่นี้คือ จะใส่ ข้อความ (Current Page) หลังชื่อเมนูตาม parameter ที่ส่งมา



เมื่อทดลองรัน ข้อความ (Current Page) จะไปอยู่หลังชื่อเมนู



ตัวอย่างการแยกไฟล์ในการจัดการ route

หากเราต้องการแยกไฟล์ จัดการ route ไม่ให้อยู่ในไฟล์ index.js อย่างเดียว ( หากการจัดการ route ไปอยู่ใน index.js ไฟล์เดียวอาจทำให้ยุ่งยากในการแก้ไขได้หากมีหน้าเว็บมากขึ้น  ) เราสามารถแบ่งการจัดการ route ไปอยู่ในไฟล์อื่นดังนี้

1. สร้างไฟล์ contact.js


2. ใส่ code

exports.contact=function(app){
    app.get("/contact", (req, res) => {

        res.send("<h1>Contact Page</h1>");
       
    });
};

ในที่นี้คือ กำหนดให้ แสดงข้อความ <h1>Contact Page</h1>  เมื่อเปิด browser ไปที่ http://localhost:3000/contact


3. แก้ code ในไฟล์ index.js

var contact_page = require('./contact'); //import module ไว้ในตัวแปร contact_page
และ contact_page.contact(app);//



 เมื่อรัน node js แล้ว เปิด http://localhost:3000/contact ใน browser จะได้ข้อความดังนี้



Download Source Code ได้ที่ https://github.com/nuntawa/sample_express_app