ตัวอย่างการพัฒนา Web Application ด้วย NodeJS + Express ( ใช้ EJS เป็น template engine ) สำหรับผู้เริ่มต้น
ExpressJS นับว่าเป็น WebApplication Framework ซึ่งทำงานกับ NodeJs สำหรับการพัฒนาเว็บไซต์ที่ได้รับความนิยมมากในปัจจุบัน ในบทความนี้จะแสดงตัวอย่างการสร้างหน้าเว็บด้วย ทีละขั้นดังนี้
รับเขียนโปรแกรม NodeJS Javascript
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