java

CHAPTER 5 ทำ�งานกบั แบบฟอร์ม 6. ต่อมา เปน็ การสรา้ งช่องรบั ข้อมลู และปุ่ม submit โดยที่ ÂÂ สร้างช่องรับข้อความ (input type=”text”) ที่ช่ือว่า txtFirstName (name= ”txtFirstName”) ก�ำหนดขอ้ ความลายนำ้� (placeholder=”Pleaseenterfirstname”) ในชอ่ งรบั ข้อความดว้ ย ÂÂ สร้างช่องรับข้อความ (input type=”text”) ที่ช่ือว่า txtFirstName (name= ”txtLastName”) ก�ำหนดขอ้ ความลายนำ้� (placeholder=”Pleaseenterlastname”) ในชอ่ งรบั ขอ้ ความด้วย ÂÂ สรา้ งป่มุ submit แบบฟอร์ม (button type=”submit”) ชอื่ อลิ เี มนตท์ ไี่ ดต้ งั้ ขนึ้ มาจะถกู น�ำ ไปใชอ้ า้ งองิ เมอื่ ตอ้ งการอา่ นคา่ ทผ่ี ใู้ ชง้ านปอ้ นเขา้ มา \\routes\\forms.js 1 ‘FirstName : ‘ + 2 ‘<input type=”text” name=”txtFirstName” placeholder=”Please enter firstname” />’ + 3 ‘<br />’ + 4 ‘LastName : ‘ + 5 ‘<input type=”text” name=”txtLastName” placeholder=”Please enter lastname” />’ + 6 ‘<br />’ + 7 ‘<button type=”submit”>Submit</button>’ + 8 ‘</form>’; 9 res.send(frm); 10 }); จากนัน้ ใช้เมธอด Send() ของพารามเิ ตอร์ res สง่ แบบฟอร์มว่างๆ ไปที่ Client (เครื่อง ผใู้ ช)้ กจ็ ะท�ำ ใหบ้ ราวเซอร์แสดงแบบฟอร์มว่างๆ ขึ้นมาใหผ้ ้ใู ชง้ านป้อนข้อมลู เมอ่ื ผใู้ ชง้ านปอ้ นขอ้ มลู ลงในแบบฟอรม์ แลว้ กดปมุ่ submit ผเู้ ขยี นก�ำ หนดไวใ้ นขณะสรา้ ง แบบฟอรม์ ว่าให้ไปท่ีพาธ / เช่นเดมิ แตก่ ำ�หนดให้เปน็ แบบเมธอด post 7. กลบั มาทไี่ ฟล์ app.js ต้องรองรบั การร้องขอไฟลท์ พ่ี าธ / แบบ post ดว้ ย (เกิดจาก ผู้ใช้กดป่มุ Submit แบบฟอร์ม) โดยอาศัยเมธอด post() ของตวั แปร app ในกรณี นี้เรามีการทำ�งานเพียงอย่างเดียวคือ ต้องการอ่านค่าที่ผู้ใช้งานป้อนเข้ามาในแบบ ฟอรม์ โดยท่ี hh สรา้ งตวั แปรทช่ี อ่ื วา่ firstname (var firstname) ท�ำ หนา้ ทเ่ี กบ็ ขอ้ ความทผ่ี ใู้ ชง้ าน ปอ้ นเข้ามาในชอ่ งรบั ขอ้ มูลท่ชี อ่ื วา่ txtFirstName (req.body.txtFirstName) ScJraivpat 95

hh สรา้ งตวั แปรทช่ี อ่ื วา่ lastname (var lastname) ทำ�หนา้ ทเ่ี กบ็ ขอ้ ความทผ่ี ใู้ ชง้ าน ปอ้ นเขา้ มาในช่องรบั ข้อมูลท่ชี ือ่ วา่ txtFirstName (req.body.txtLastName) app.js 1 app.post(‘/’, function (req, res) { 2 var firstname = req.body.txtFirstName; 3 var lastname = req.body.txtLastName; 8. ทา้ ยท่สี ดุ สร้างลงิ คก์ ลบั มาท่พี าธ / ด้วย (a href=”/”) ถือเป็นการรอ้ งขอขอ้ มูลแบบ get ตามปกติ เพอื่ กลบั มาทแี่ บบฟอรม์ แบบวา่ งๆ และแสดงชอ่ื -นามสกลุ ทผี่ ใู้ ชง้ าน ป้อนเข้ามาในสว่ นแสดงผล app.js 1 var fullname = ‘<a href=”/”>Home</a>’ + 2 ‘<br />’ + 3 ‘Hello : ‘ + firstname + ‘ ‘ + lastname; 4 5 res.send(fullname); 6 }); การสร้างแบบฟอร์มด้วยไฟล์ HTML5 จากตวั อย่างท่ีผา่ นมาเราสรา้ งแบบฟอรม์ ดว้ ยวิธกี ารเขียนอลิ เี มนต์ของ HTML5 โดยตรง เพอื่ แสดงใหเ้ ห็นวา่ เราสามารถเรียกใชอ้ ิลีเมนต์ของ HTML5 ได้จาก Express โดยตรง แต่ในทางปฏิบัติไม่แนะนำ�ให้สร้างหน้าเว็บเพจหรือสร้างแบบฟอร์มด้วยวิธีการแบบนี้ สามารถสร้างแบบฟอร์มแยกออกมาเปน็ ไฟล์ HTML5 ต่างหากได้อีกดว้ ย กลา่ วไดอ้ ีกนยั หนง่ึ วา่ เราสามารถนำ�ไฟล์ HTML5 ท่ีมีอยเู่ ดิม มาใชง้ านร่วมกบั โปรเจ็กต์ Express ได้นัน่ เอง ตัวอยา่ งท่ี 5-2 การสรา้ งแบบฟอร์มดว้ ยไฟล์ HTML5 ผเู้ ขยี นจะนำ�ตวั อย่างทแ่ี ล้วมาปรบั ปรงุ ใหม่ มขี นั้ ตอนดังนี้ 1. ถือว่า ไฟล์ HTML5 เป็นไฟล์ประเภท Static (หมายถึง เน้ือหาในไฟล์ไม่มีการ เปลี่ยนแปลง เราใช้งานเพียงอย่างเดียว) ดังนั้น จึงสร้างไฟล์ท่ีช่ือว่า login.html เกบ็ ไว้ในโฟลเดอรท์ ีช่ ื่อว่า public 96

CHAPTER 5 ท�ำ งานกบั แบบฟอร์ม สคริปต์ HTML5 ที่ 5-2 การสร้างแบบฟอร์มดว้ ยไฟล์ HTML5 (\\public\\login.html) 1 <form action=’/’ method=’post’> 2 <label>Username :</label><br /> 3 <input type=’text’ name=’txtUsername’ 4 placeholder=’กรุณาป้อน Username’ /><br /> 5 <label>Password : </label><br /> 6 <input type=’password’ name=’txtPassword’ 7 placeholder=’กรณุ าป้อนรหัสผ่าน’><br /> 8 <input type=’submit’ name=’submit’ value=’Submit’ /> 9 </form> รูปที่ 5-7 แสดงสครปิ ต์ HTML5 ในไฟล์ login.html จากรูปท่ี 5-7 ในไฟล์ login.html เปน็ แบบฟอร์ม login ง่ายๆ มีชอ่ งให้ป้อน Username 97 กบั รหัสผ่าน Password พบวา่ เม่ือมีการคลิกทป่ี ุ่ม Submit ก�ำ หนดให้ไปท่ีพาธ / ดว้ ยวธิ ี post (<form action=’/’ method=’post’>) 2. ตอ่ มา ที่ไฟล์ app.js ใหเ้ ขยี นสครปิ ต์รบั การท�ำ งานของไฟล์ login.html ดงั ต่อไปน้ี สคริปต์ Express ท่ี 5-2 การสรา้ งแบบฟอร์มดว้ ยไฟล์ HTML5 (app.js) 1 var express = require(‘express’); 2 var pug = require(‘pug’); 3 var path = require(‘path’); 4 var favicon = require(‘serve-favicon’); 5 var logger = require(‘morgan’); 6 var cookieParser = require(‘cookie-parser’); 7 var bodyParser = require(‘body-parser’); 8 var routes = require(‘./routes/index’); 9 var users = require(‘./routes/users’); 10 var app = express(); 11 12 app.set(‘views’, path.join(__dirname, ‘views’)); 13 app.set(‘view engine’, ‘pug’); ScJraivpat

สครปิ ต์ Express ที่ 5-2 การสร้างแบบฟอร์มด้วยไฟล์ HTML5 (app.js) 14 15 app.use(logger(‘dev’)); 16 app.use(bodyParser.json()); 17 app.use(bodyParser.urlencoded({ extended: false })); 18 app.use(cookieParser()); 19 app.use(express.static(path.join(__dirname, ‘public’))); 20 21 app.use(‘/’, routes); 22 app.use(‘/users’, users); 23 24 app.get(‘/login’, function (req, res) { 25 res.redirect(‘login.html’); 26 //res.sendFile(‘public/login.html’, {root : __dirname}); 27 //res.sendFile(__dirname + ‘/public/login.html’); 28 }); 29 30 app.post(‘/’, function (req, res) { 31 var username = req.body.txtUsername; 32 var password = req.body.txtPassword; 33 34 var data = ‘<a href=”/”>Home</a>’ + 35 ‘<br />’ + 36 ‘คณุ ปอ้ นขอ้ มูล : ‘ + username + ‘ ‘ + password; 37 38 res.send(data); 39 }); 40 41 app.use(function (req, res, next) { 42 var err = new Error(‘Not Found’); 43 err.status = 404; 44 next(err); 45 }); 46 47 if (app.get(‘env’) === ‘development’) { 48 app.use(function (err, req, res, next) { 49 res.status(err.status || 500); 50 res.render(‘error’, { 51 message: err.message, 52 error: err 53 }); 98

CHAPTER 5 ท�ำ งานกับแบบฟอร์ม สครปิ ต์ Express ที่ 5-2 การสร้างแบบฟอรม์ ดว้ ยไฟล์ HTML5 (app.js) 54 }); 55 } 56 57 app.use(function (err, req, res, next) { 58 res.status(err.status || 500); 59 res.render(‘error’, { 60 message: err.message, 61 error: {} 62 }); 63 }); 64 65 66 module.exports = app; 3. ทา้ ยทส่ี ดุ ใหท้ ดสอบโปรเจก็ ต์ (พมิ พค์ �ำ สงั่ npm start) ไปทพี่ าธ /login พบวา่ มแี บบ ฟอรม์ ส�ำ หรบั login ซง่ึ เกิดจากไฟล์ login.html ปรากฎขึ้นมา เมื่อกดปุ่ม Submit ก็จะมีการอ่านคา่ Username กับรหสั Password ที่ปอ้ นเขา้ มาดว้ ย รูปที ่ 5-8 ผลการรันตัวอย่าง ที่ 5-2 จากรปู ท่ี 5-8 ผูเ้ ขียนปอ้ น Username เป็น express ส่วนรหัสผา่ น Password คือ 1111 เห็นไดว้ า่ เราสามารถอ่านคา่ จากแบบฟอร์ม HTML ได้เชน่ กนั อธิบายการทำ�งานของสครปิ ต์ 1. การท�ำ งานเรม่ิ ต้นทไ่ี ฟล์ app.js เรากำ�หนดไว้ว่า เมื่อมกี ารรอ้ งขอมาท่ี / แบบ get ก�ำ หนดให้ redirect ไปทไ่ี ฟล์ login.html ไดเ้ ลย เพราะว่าเรากำ�หนดไวข้ า้ งต้นแลว้ ว่าตอ้ งการใชไ้ ฟล์ Static ท่อี ย่ใู นโฟลเดอรท์ ี่ช่ือว่า public app.js 1 app.use(express.static(path.join(__dirname, ‘public’))); 2… 3… 4 app.get(‘/login’, function (req, res) { 5 res.redirect(‘login.html’); ScJraivpat 99

2. ต่อมา เมื่อผู้ใช้งานเห็นแบบฟอร์มท่ีเกิดจากไฟล์ login.html แล้วกดปุ่ม Submit ในแบบฟอรม์ กำ�หนดไวช้ ัดเจนว่าใหไ้ ปที่ / แต่เป็นการร้องขอแบบ post \\public\\login.html 1 <form action=’/’ method=’post’> 3. ต่อมา ท่ีไฟล์ app.js เราต้องเขียนรองรับการร้องขอมาท่ีพาธ / แบบ post ด้วย ในกรณีน้กี ็คือ อ่านคา่ ออกมาจากแบบฟอรม์ โดยอาศยั body-parser นน่ั เอง app.js 1 app.post(‘/’, function (req, res) { 2 var username = req.body.txtUsername; 3 var password = req.body.txtPassword; 4 5 var data = ‘<a href=”/”>Home</a>’ + 6 ‘<br />’ + 7 ‘คุณปอ้ นข้อมูล : ‘ + username + ‘ ‘ + password; 8 9 res.send(data); 10 }); 4. การเรยี กใชง้ านไฟล์HTML ทอี่ ยใู่ นโฟลเดอร์public สามารถใชเ้ มธอดsendFile() ของ พารามเิ ตอร์res กไ็ ด้ เราตอ้ งระบพุ าธเตม็ ของไฟล์HTML ทจ่ี ะสง่ ไปฝงั่ ผใู้ ชง้ าน ในกรณนี ้ี น�ำ เสนอ 2 แบบ app.js 1 res.sendFile(‘public/login.html’, {root : __dirname}); 2 หรือ 3 res.sendFile(__dirname + ‘/public/login.html’); การสร้างแบบฟอรม์ ด้วย Pug Pug เปน็ ชนิ้ สว่ นทร่ี บั ผดิ ชอบดา้ นการสรา้ งสว่ นแสดงผลตามมาตรฐานHTML5 ในMEAN Stack จงึ ไม่แปลกอะไร ถา้ เราจะสร้างแบบฟอรม์ ดว้ ย Pug โดยตรง ตวั อย่างที่ 5-3 การสร้างแบบฟอร์มด้วย Pug 100

CHAPTER 5 ท�ำ งานกบั แบบฟอรม์ มีขั้นตอนดงั น้ี 1. ในตัวอย่างนี้มีทั้งการสร้างแบบฟอร์มโดยอาศัย Pug ยังรวมไปถึงเราต้องการอ่าน ค่าออกมาจากแบบฟอรม์ ด้วย จงึ ตอ้ งใชช้ ิ้นสว่ น 2 อย่าง ดังน้ี hh Pug สำ�หรับสร้างแบบ ฟอรม์ hh body-parser สำ�หรับ ตรวจสอบค่าที่ถูกป้อนใน แบบฟอรม์ รูปที่ 5-9 แสดงรายการ d e p e n d e n c i e s ใ น ไ ฟ ล์ package.json 2. ต่อมา ที่ไฟล์ app.js ผู้เขียนใช้พาธ / เช่ือมโยงไปยังไฟล์ index.js ที่เก็บอยู่ใน โฟลเดอร์ \\routes เพื่อสร้างแบบฟอร์มใน index.pug ดังสคริปต์ดังต่อไปนี้ สครปิ ต์ Express ที่ 5-3 การสร้างแบบฟอรม์ ด้วย Pug (app.js) 1 var express = require(‘express’); 2 var pug = require(‘pug’); 3 var path = require(‘path’); 4 var favicon = require(‘serve-favicon’); 5 var logger = require(‘morgan’); 6 var cookieParser = require(‘cookie-parser’); 7 var bodyParser = require(‘body-parser’); 8 9 var routes = require(‘./routes/index’); 10 var users = require(‘./routes/users’); 11 12 var app = express(); 13 14 app.set(‘views’, path.join(__dirname, ‘views’)); 15 app.set(‘view engine’, ‘pug’); 16 17 app.use(logger(‘dev’)); 18 app.use(bodyParser.json()); ScJraivpat 101

สคริปต์ Express ท่ี 5-3 การสรา้ งแบบฟอรม์ ดว้ ย Pug (app.js) 18 app.use(bodyParser.urlencoded({ extended: false })); 19 app.use(cookieParser()); 20 app.use(express.static(path.join(__dirname, ‘public’))); 21 22 app.use(‘/’, routes); 23 app.use(‘/users’, users); 24 25 app.post(‘/’, function (req, res) { 26 var username = req.body.txtUsername; 27 var password = req.body.txtPassword; 28 29 var data = ‘<a href=”/”>Home</a>’ + ‘<br />’ + 30 ‘คณุ ป้อนข้อมูล : ‘ + username + ‘ ‘ + password; 31 32 res.send(data); 33 }); 34 35 app.use(function (req, res, next) { 36 var err = new Error(‘Not Found’); 37 err.status = 404; 38 next(err); 39 }); 40 41 if (app.get(‘env’) === ‘development’) { 42 app.use(function (err, req, res, next) { 43 res.status(err.status || 500); 44 res.render(‘error’, { 45 message: err.message, 46 error: err 47 }); 48 }); 49 } 50 51 app.use(function (err, req, res, next) { 52 res.status(err.status || 500); 53 res.render(‘error’, { 54 message: err.message, 55 error: {} 56 }); 57 }); 58 59 module.exports = app; 102

CHAPTER 5 ท�ำ งานกับแบบฟอร์ม 3. ต่อมา ท่ีไฟล์ index.js ในโฟลเดอร์ \\routes ส่ังให้ใช้ส่วนแสดงผลท่ีชื่อว่า index. pug โดยอาศัยเมธอด render() ดังสครปิ ตต์ อ่ ไปนี้ รูปที ่ 5-10 แสดงไฟล์ index.js ในโฟลเดอร์ routes สคริปต์ Express ท่ี 5-3 การสรา้ งแบบฟอรม์ ดว้ ย Pug (\\routes\\index.js) 1 var express = require(‘express’); 2 var router = express.Router(); 3 4 router.get(‘/’, function (req, res, next) { 5 res.render(‘index’, { title: ‘Express’ }); 6 }); 7 8 module.exports = router; 4. สว่ นแสดงผลทเ่ี กดิ จาก Pug เกบ็ อยใู่ นโฟลเดอร์ \\views เกดิ จากการท�ำ งาน 2 สว่ น ดงั น้ี ÂÂ ไฟล์ layout.pug ทำ�หนา้ ที่ก�ำ หนดโครงสรา้ งตามมาตรฐาน HTML5 ÂÂ ไฟล์ index.pug ทำ�หนา้ ท่ีเก็บแบบฟอร์มตามทเี่ ราตอ้ งการ ดังสครปิ ตต์ อ่ ไปน้ี รปู ท่ ี 5-11 สว่ นแสดงผล index.pug ในโฟลเดอร์ views ScJraivpat 103

สครปิ ต์ Pug ท่ี 5-3 การสร้างแบบฟอรม์ ดว้ ย Pug (\\views\\layout.pug) 1 doctype html 2 html 3 head 4 title= title 5 link(rel=’stylesheet’, href=’/stylesheets/style.css’) 6 body 7 block content สครปิ ต์ Pug ท่ี 5-3 การสร้างแบบฟอรม์ ดว้ ย Pug (\\views\\index.pug) 1 extends layout 2 3 block content 4 form(name=’userlogin’, method=’post’) 5 div 6 label UserName : 7 input(type=’text’, name=’txtUsername’) 8 div 9 label Password : 10 input(type=’password’, name=’txtPassword’) 11 div 12 input(type=’submit’, value=’login’) 5. ท้ายทีส่ ุด ใหท้ ดสอบรนั โปรเจก็ ต์ดว้ ยค�ำ สง่ั npm start เมอื่ มีการรอ้ งขอมาท่พี าธ / กจ็ ะแบบฟอรม์ Login ดังรูปท่ี 5-12 รปู ท ี่ 5-12 ผลการรนั ตวั อยา่ งท่ี 5-3 จากรูปที่ 5-12 ผู้เขียนป้อน UserName และ Password แล้วกดปุ่ม login การท�ำ งาน ของตัวอยา่ งนีก้ ค็ ือ อา่ นคา่ ทเี่ ราปอ้ นออกมาน่นั เอง แบบฟอรม์ Login ทเี่ หน็ จากรอ้ งขอขอ้ มลู มาทพ่ี าธ / เกดิ มาจากการท�ำ งาน layout.pug และ index.pug เมือ่ ถกู แปลงมาเปน็ ไฟล์ HTML5 แสดงผลในบราวเซอร์ ดงั สคริปตต์ อ่ ไปนี้ 104

CHAPTER 5 ทำ�งานกับแบบฟอรม์ HTML5 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Express</title> 5 <link rel=”stylesheet” href=”/stylesheets/style.css”> 6 </head> 7 <body> 8 <form name=”userlogin” method=”post”> 9 <div> 10 <label>UserName :</label> 11 12 <input type=”text” name=”txtUsername”> 13 </div> 14 <div> 15 <label>Password :</label> 16 <input type=”password” name=”txtPassword”> 17 </div> 18 <div> 19 <input type=”submit” value=”login”> 20 </div> 21 </form> 22 </body> 23 </html> อธบิ ายการทำ�งานของสครปิ ต์ 1. ที่ไฟล์ app.js สร้างตวั แปรทช่ี อ่ื ว่า routes ทำ�หน้าที่แทนไฟล์ index.js ทีเ่ ก็บอยใู่ น โฟลเดอร์ \\routes จากนนั้ ก�ำ หนดว่าเม่อื มีการร้องขอมาทีพ่ าธ / กจ็ ะใช้พาธทเ่ี กบ็ อยู่ในตวั แปร routes กลา่ วไดอ้ กี นัยหน่งึ วา่ สั่งให้ไฟล์ index.js ท�ำ งานน่ันเอง app.js 1 var routes = require(‘./routes/index’); 2… 3… 4… 5 app.use(‘/’, routes); ScJraivpat 105

2. ต่อมา การทำ�งานภายในไฟล์ index.js มีเพียงอย่างเดียว น่ันคือ สั่งให้ส่วน แสดงผล index.pug ทำ�งาน ผ่านทางเมธอด render() \\routes\\index.js 1 router.get(‘/’, function (req, res, next) { 2 res.render(‘index’, { title: ‘Express’ }); 3 }); 3. ต่อมา ที่สว่ นแสดงผล index.pug ผู้เขียนสรา้ งแบบฟอรม์ Login ไว้ท่นี ่ี ต้ังช่ือแบบ ฟอร์มนว้ี า่ userlogin (แอต็ ทริบิวต์ name=’userlogin’) เมือ่ ผใู้ ช้งาน Submit แบบ ฟอร์ม ใหส้ ง่ ข้อมูลด้วยวิธี post (แอต็ ทริบิวต์ method=’post’) ไปทีฝ่ ง่ั Server \\views\\index.pug 1 form(name=’userlogin’, method=’post’) 4. ในแบบฟอร์ม ให้สร้างแบบฟอร์มตามทตี่ อ้ งการ ในกรณีนี้ คือ ÂÂ สร้างช่องรับข้อความแบบ text (type=’text’) ต้ังชื่อว่า txtUsername (name=’txtUsername’) ÂÂ ช่องรับรหัสผ่านแบบ password (type=’password’) ต้ังชื่อว่า txtPassword (name=’txtPassword’) \\views\\index.pug 1 div 2 label UserName : 3 input(type=’text’, name=’txtUsername’) 4 div 5 label Password : 6 input(type=’password’, name=’txtPassword’) 5. สว่ นสดุ ท้ายของแบบฟอร์ม สร้างปุม่ Submit (type=’submit’) \\views\\index.pug 1 div 2 label UserName : 3 input(type=’text’, name=’txtUsername’) 4 div 5 label Password : 6 input(type=’password’, name=’txtPassword’) 106

CHAPTER 5 ท�ำ งานกับแบบฟอร์ม \\views\\index.pug 1 div 2 input(type=’submit’, value=’login’) 6. ตอ่ มา เมือ่ ผใู้ ชง้ าน Submit แบบฟอรม์ โดยการกดป่มุ login ท�ำ ให้เกิดการสง่ ข้อมลู ดว้ ยวธิ ี post มาทฝี่ งั่ Server สง่ ผลใหเ้ ราตอ้ งเขยี นรองรบั การท�ำ งานของพาธ / แบบ post ดว้ ย การทำ�งานของพาธ / แบบ post มเี พยี งอยา่ งเดยี ว นนั่ คือ อา่ นค่าสง่ิ ทถี่ กู สง่ มากบั การ Submit แบบฟอร์มนนั่ เอง ในกรณีนีม้ ี 2 สว่ น คอื ÂÂ ตวั แปร username (var username) เกบ็ ค่าที่ไดจ้ ากอิลีเมนต์ทช่ี อ่ื ว่า txtUsername (req.body.txtUsername) ÂÂ ตัวแปร password (var password) เกบ็ ค่าทไี่ ดจ้ ากอิลเี มนต์ทชี่ ือ่ วา่ txtPassword (req.body.txtPassword) app.js 1 app.post(‘/’, function (req, res) { 2 var username = req.body.txtUsername; 3 var password = req.body.txtPassword; 7. ท้ายทสี่ ุด สงั่ ให้แสดง username และ password ตามค่าที่อา่ นไดม้ า app.js 1 var data = ‘<a href=”/”>Home</a>’ + ‘<br />’ + 2 ‘คณุ ปอ้ นขอ้ มูล : ‘ + username + ‘ ‘ + password; 3 4 res.send(data); 5 }); ScJraivpat 107

การใช้งาน jQuery ใน MEAN Stack “jQuery” เปน็ JavaScript Library อีกตัวหนง่ึ ที่นกั พัฒนาสาย Web Apps น�ำ มาใช้งาน เมือ่ เข้ามาสู่โลกของการพฒั นา Web Apps แบบ MEAN Stack เราสามารถใช้งาน jQuery ได้ เช่นกัน โดยที่ผู้เขยี นขอแบ่งหนา้ ที่พนื้ ฐานของ jQuery ออกเป็น 2 สว่ น ดังน้ี 1. ท�ำ งานกบั อลิ เี มนต์ต่างๆ ภายในสว่ นแสดงผล เชน่ สงั่ ให้อา่ นขอ้ มูลในแบบฟอร์ม เปน็ ตน้ 2. ร้องขอข้อมูลไปยังพาธตามทีก่ ำ�หนดไว้ ตวั อยา่ งท่ี 5-4 การใชง้ าน jQuery ใน MEAN Stack เปา้ หมายของตวั อย่างนี้ ผูเ้ ขยี นสรา้ งแบบฟอรม์ Login ขึน้ มาดว้ ยไฟล์ HTML5 ก�ำ หนด ให้ jQuery อยูใ่ นฐานะเป็นตวั กลาง ท�ำ หน้าทอี่ ่านคา่ Username กบั รหัสผา่ น Password สง่ ตอ่ ไปยงั พาธตามท่กี ำ�หนดไวเ้ พ่ืออา่ นคา่ ทผ่ี ู้ใช้งานปอ้ นเขา้ มา มขี ั้นตอนดงั นี้ 1. ที่ไฟล์ app.js เมื่อมีการร้องขอมาท่ีพาธ /login กำ�หนดให้ไฟล์ HTML5 ที่ช่ือว่า login.html (เก็บอยใู่ นโฟลเดอร์ \\public) ท�ำ งาน สครปิ ต์ Express ท่ี 5-4 การใชง้ าน jQuery ใน MEAN Stack (app.js) 1 var express = require(‘express’); 2 var pug = require(‘pug’); 3 var path = require(‘path’); 4 var favicon = require(‘serve-favicon’); 5 var logger = require(‘morgan’); 6 var cookieParser = require(‘cookie-parser’); 7 var bodyParser = require(‘body-parser’); 8 9 var routes = require(‘./routes/index’); 10 var users = require(‘./routes/users’); 11 12 var app = express(); 13 14 app.set(‘views’, path.join(__dirname, ‘views’)); 15 app.set(‘view engine’, ‘pug’); 16 17 app.use(logger(‘dev’)); 18 app.use(bodyParser.json()); 19 app.use(bodyParser.urlencoded({ extended: false })); 20 app.use(cookieParser()); 21 app.use(express.static(path.join(__dirname, ‘public’))); 108

CHAPTER 5 ท�ำ งานกับแบบฟอรม์ สคริปต์ Express ท่ี 5-4 การใชง้ าน jQuery ใน MEAN Stack (app.js) (ต่อ) 22 23 app.use(‘/’, routes); 24 app.use(‘/users’, users); 25 26 app.get(‘/login’, function (req, res) { 27 res.sendFile(‘public/login.html’, { root: __dirname }); 28 }); 29 30 app.post(‘/login’, function (req, res) { 31 var username = req.body.txtUsername; 32 var password = req.body.txtPassword; 33 34 console.log(“Username : “ + username + “ \\nPassword : “ + password); 35 res.end(“yes”); 36 }); 37 38 app.use(function (req, res, next) { 39 var err = new Error(‘Not Found’); 40 err.status = 404; 41 next(err); 42 }); 43 44 if (app.get(‘env’) === ‘development’) { 45 app.use(function (err, req, res, next) { 46 res.status(err.status || 500); 47 res.render(‘error’, { 48 message: err.message, 49 error: err 50 }); 51 }); 52 } 53 54 app.use(function (err, req, res, next) { 55 res.status(err.status || 500); 56 res.render(‘error’, { 57 message: err.message, 58 error: {} 59 }); 60 }); 61 62 63 module.exports = app; ScJraivpat 109

2. ท่ีไฟล์ login.html ในโฟลเดอร์ \\public ท�ำ หน้าท่ีสรา้ งแบบฟอรม์ Login ให้เขยี น สคริปต์ HTML5 ดังตอ่ ไปน้ี สครปิ ต์ HTML5 ท่ี 5-4 การใชง้ าน jQuery ใน MEAN Stack (\\public\\login.html 1 <html> 2 <head> 3 <title>Simple login</title> 4 <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script> 5 <script> 6 $(document).ready(function(){ 7 var user,pass; 8 $(“#submit”).click(function(){ 9 user=$(“#txtUsername”).val(); 10 pass=$(“#txtPassword”).val(); 11 $.post(“http://localhost:3000/login”,{txtUsername: user,txtPassword: pass}, function(data){ 12 if(data) 13 { 14 alert(“Login สำ�เร็จ”); 15 } 16 }); 17 }); 18 }); 19 </script> 20 </head> 21 <body> 22 <h1>Login</h1> 23 Username : <input type=”text” id=”txtUsername” maxlength=”16”><br> 24 Password : <input type=”password” id=”txtPassword” maxlength=”16”><br> 25 <input type=”button” id=”submit” value=”Submit”> 26 </body> 27 </html> รปู ที่ 5-13 สครปิ ต์ในไฟล์ login.html 110

CHAPTER 5 ท�ำ งานกบั แบบฟอรม์ 3. ท้ายทส่ี ุด ให้ลองรันโปรเจ็กตด์ ้วยค�ำ ส่ัง npm start จากนนั้ ไปทพ่ี าธ /login ใหป้ ้อน Username และ Password เข้าไป พบว่าจะมีการตรวจสอบการ Login ให้ด้วย ดังรปู ที่ 5-14 รูปที่ 5-14 สผลการรัน ตัวอยา่ งที่ 5-4 4. หลังจากทมี่ ีการตรวจสอบการ Login แล้ว ใหไ้ ปดูทีห่ น้าต่าง Command Prompt พบวา่ ผเู้ ขยี นก�ำ หนดใหแ้ สดงUsername กบั รหสั ผา่ นPassword ดว้ ย ดงั รปู ที่ 5-15 รปู ที่ 5-15 แสดง Username กับรหสั ผ่าน Password ทถ่ี กู ปอ้ นเข้ามา จากรปู ที่ 5-15 ผู้เขียนปอ้ น Username คอื test ส่วนรหสั ผา่ น คือ 1234 อธิบายการทำ�งานของสคริปต์ 1. เรม่ิ ตน้ ทีไ่ ฟล์ app.js เมือ่ มกี ารรอ้ งขอมาที่พาธ /login ก�ำ หนดให้ไฟล์ login.html ทเ่ี ก็บอยใู่ นโฟลเดอร์ public ปรากฎข้ึนมา app.js 1 app.get(‘/login’, function (req, res) { 2 res.sendFile(‘public/login.html’, { root: __dirname }); 3 }); 2. ตอ่ มา ในไฟล์login.html ท�ำ หนา้ ทสี่ รา้ งแบบฟอรม์ Login ทส่ี ว่ นหวั ของไฟล์ ก�ำ หนด ใหใ้ ช้ jQuery แบบขอใช้บริการผ่าน Content Delivery Network (CDN) กอ่ น \\public\\login.html 111 1 <head> 2 <title>Simple login</title> 3 <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script> ScJraivpat

3. ตอ่ มา ที่ส่วนของ <body>…</body> สร้างชอ่ งรบั ขอ้ ความขึ้นมา 2 ช่อง โดยที่ ÂÂ ช่อง Username ใช้อิลีเมนต์แบบ text (แอ็ตทริบิวต์ type=”text”) ตั้งช่ือว่า txtUsername (แอต็ ทรบิ วิ ต์ id=”txtUsername”) จ�ำ กดั จ�ำ นวนตวั อกั ษร 16 ตวั อกั ษร (แอ็ตทริบวิ ต์ maxlength=”16”) ÂÂ ช่อง Password ใช้อลิ เี มนตแ์ บบ text (แอต็ ทรบิ วิ ต์ type=”password”) ต้งั ชือ่ ว่า txtPassword (แอต็ ทรบิ วิ ต์ id=”txtPassword”) จำ�กดั จ�ำ นวนตวั อักษร 16 ตวั อักษร (แอ็ตทริบวิ ต์ maxlength=”16”) ÂÂ ปุ่ม Submit แบบฟอรม์ ใช้อิลีเมนต์แบบ button (แอ็ตทรบิ วิ ต์ type=”button”) ต้งั ช่ือว่า submit (แอต็ ทริบิวต์ id=”submit”) \\public\\login.html 1 <body> 2 <h1>Login</h1> 3 Username : <input type=”text” id=”txtUsername” maxlength=”16”><br> 4 Password : <input type=”password” id=”txtPassword” maxlength=”16”><br> 5 <input type=”button” id=”submit” value=”Submit”> 6 </body> 4. ตอ่ มา เราจะใช้ความสามารถของ jQuery เข้ามาท�ำ หนา้ ทอ่ี ่านคา่ Username และ Password ท่ีผใู้ ชง้ านป้อนเข้ามา โดยการสรา้ งตวั แปรทีช่ อ่ื ว่า user และ pass (var user,pass) ขนึ้ มาก่อน ทำ�หนา้ ที่เกบ็ Username และ Password ทีถ่ กู ปอ้ นเข้ามา \\public\\login.html 1 <script> 2 $(document).ready(function(){ 3 var user,pass; 5. ตอ่ มา เมอ่ื ผใู้ ชง้ าน Submit แบบฟอร์ม ส่งผลใหเ้ กดิ เหตกุ ารณ์ click() ทีป่ มุ่ submit ใหท้ ำ�ส่งิ น้ี ÂÂ อา่ น Username ออกมาจากอลิ ีเมนต์ท่ีชือ่ ว่า txtUsername เกบ็ ไว้ที่ตัวแปร user ÂÂ อ่าน Password ออกมาจากอิลเี มนต์ท่ชี อื่ ว่า txtPassword เกบ็ ไว้ทตี่ วั แปร pass 112

CHAPTER 5 ทำ�งานกับแบบฟอรม์ \\public\\login.html 1 $(“#submit”).click(function(){ 2 user=$(“#txtUsername”).val(); 3 pass=$(“#txtPassword”).val(); 6. การ Submit แบบฟอร์ม หมายถึง การส่งข้อมูลแบบ Post ไปท่ีฝ่ัง Server ให้ใช้ เมธอด Post() สั่งใหเ้ กดิ การรอ้ งขอไปที่พาธ /login แบบ post โดยการสง่ ค่า user (ร่วมกับ txtUsername) และ pass (ร่วมกบั txtPassword) ไปดว้ ย ก็จะมกี ารรอผล การทำ�งานกลับมาดว้ ย ผา่ นทางพารามิเตอร์ data ผ้เู ขยี นก�ำ หนดไวว้ า่ ให้แสดงการแจ้งเดอื นแบบ alert ว่า “Login ส�ำ เร็จ” \\public\\login.html 1 $.post(“http://localhost:3000/login”,{txtUsername: user,txtPassword: pass}, function(data){ 2 if(data) 3{ 4 alert(“Login ส�ำ เรจ็ ”); 5} 6 }); 7. ขา้ มมาท่ฝี ่ัง Server ในไฟล์ app.js เราต้องรองรับการรอ้ งขอข้อมลู ของพาธ /login แบบ post ดว้ ย ซ่งึ เกดิ มาจากการ Submit แบบฟอรม์ ในไฟล์ login.htm นนั่ เอง โดยอาศัยเมธอด post() ของตวั แปร app การทำ�งานภายในมเี พยี งอย่างเดยี ว คือ สงั่ ให้แสดง Username กับ Password โดยท่ี ÂÂ ตัวแปร username (var username) ให้อ่านค่าออกมาจากอิลีเมนต์ที่ช่ือว่า txtUsername ÂÂ ตัวแปร password (var password) ให้อ่านค่าออกมาจากอิลีเมนต์ท่ีช่ือว่า txtPassword app.js 1 app.post(‘/login’, function (req, res) { 2 var username = req.body.txtUsername; 3 var password = req.body.txtPassword; ScJraivpat 113

8. ท้ายท่สี ุด ส่ังใหแ้ สดง Username และ Password ในหน้าตา่ ง Command Prompt ดว้ ย app.js 1 console.log(“Username : “ + username + “ \\nPassword : “ + password); 2 res.end(“yes”); 3 }); สรปุ ท้ายบท แบบฟอร์มท่ีผู้เขียนนำ�เสนอในบทน้ีมีหน้าท่ีเหมือนกันหมด เพราะว่าต้องการ แสดงใหเ้ หน็ ความแตกตา่ งของแตล่ ะวธิ นี น่ั เอง ในทางปฏบิ ตั เิ ราสามารถน�ำ ไปประยกุ ต์ สร้างแบบฟอรม์ อื่นๆ ไดต้ ามทตี่ อ้ งการ 114

6Java script CHAPTER การพฒั นา MEAN Stack ดว้ ยโปรแกรม Visual Studio เนอ้ื หาตงั้ แตบ่ ทที่1 ถงึ บทที่5 ผเู้ ขยี นน�ำ เสนอวธิ กี ารพฒั นาWebApps บนแพลตฟอรม์ ของ MEAN Stack เริม่ ตน้ ตั้งแต่ทำ�ความรู้จักกบั แต่ละชน้ิ ส่วนวา่ มีหนา้ ทอี่ ะไรกันบ้าง ไล่ล�ำ ดบั มาจนกระท่ังถึงการสร้างโปรเจ็กต์ด้วย Express-generator ซ่ึงเป็นเคร่ืองมือที่ช่วยสร้างโปร เจก็ ตท์ ่มี หี ลายชิ้นส่วนตง้ั แต่เรม่ิ ตน้ มคี วามสมบูรณ์ในระดับหนึง่ เพอ่ื ลดระยะเวลาในการเรมิ่ ต้นสรา้ งโปรเจก็ ต์ ประกอบดว้ ย 3 ส่วน ดงั นี้ 1. สร้างโปรเจก็ ต์ Express ด้วยวิธปี ้อนคำ�สั่ง Command Line บน Node 2. เขียนสคริปต์ด้วยโปรแกรม Visual Studio Code (หรือโปรแกรมเขียนโค้ดอืน่ ๆ ) 3. ทดสอบโปรเจก็ ตด์ ว้ ยวธิ ปี ้อนค�ำ ส่ัง Command Line บน Node เชน่ กัน ส่ิงท่ีได้ศึกษาท่ีผ่านมาท้ังหมด เป็นวิธีท่ีมากับ Node โดยตรง เราเป็นผู้ป้อนคำ�สั่ง Command Line ตา่ งๆ ด้วยตวั เอง ป้อนคำ�ส่งั เพอื่ ดาวนโ์ หลด, เพื่อตดิ ตัง้ , เพื่อรันโปรเจ็กต์ เป็นตน้ ถอื เปน็ ความรู้ตน้ ทางท่ีตอ้ งทราบ และใชง้ านให้เปน็ ในปจั จุบันมโี ปรแกรมตา่ งๆ หลายตัว ทีส่ ามารถสร้างโปรเจ็กต์ของ Node + Express ขน้ึ มา โดยท่เี ราไมจ่ �ำ เป็นตอ้ งป้อนคำ�ส่งั Command Line เลย แต่เปน็ วิธีทผ่ี ู้เขียนไมแ่ นะนำ� ให้เริ่มต้นศึกษาด้วยการใช้โปรแกรมเหล่าน้ี โดยมีเหตุผลว่าเน้ือแท้ของการเรียนรู้ท่ียั่งยืน คือ เราต้องรจู้ กั กบั ช้ินสว่ นต่างๆ ที่ต้นทางให้ชัดเจนว่ามที ม่ี าอยา่ งไร มีหน้าทอ่ี ะไร ทำ�ไปเพ่อื อะไร ส่วนปลายทางจะใช้เคร่ืองมือหรอื ใช้โปรแกรมอะไรกแ็ ลว้ แต่ความถนดั ของเรา แมว้ า่ เนอ้ื หาของหนงั สอื เลม่ นผ้ี เู้ ขยี นแนะน�ำ ใหใ้ ชโ้ ปรแกรมVisualStudio เพยี งโปรแกรม HTML .Net HTML

เดยี ว แตถ่ า้ ในภายหลงั มโี ปรแกรมอนื่ ๆ ทสี่ นบั สนนุ การสรา้ งโปรเจก็ ตข์ องNode+Express คดิ ว่า ความรู้ต้นทางเดมิ ที่เรามอี ยู่ จะทำ�ใหใ้ ชง้ านโปรแกรมตา่ งๆ เหล่านไี้ ดอ้ ย่างมปี ระสิทธภิ าพ การดาวน์โหลดและติดตงั้ Visual Studio 2017 ตัวโปรแกรม Visual Studio 2017 สามารถนำ� มาใช้พัฒนา Web Apps แบบ MEAN Stack ได้เช่น กัน สามารถดาวน์โหลด มาใช้งานฟรีได้ท่ี https:// www.visualstudio.com/ downloads/ รปู ท่ ี 6-1 แสดงเว็บไซด์ทีใ่ ห้ดาวนโ์ หลด VS 2017 จากรูปท่ี 6-1 ให้เลอื ก Visual Studio Community 2017 ซึง่ เป็นเวอรช์ ันท่ีสามารถใช้ งานไดฟ้ รี โดยการคลิกที่ปมุ่ เพอ่ื ดาวน์โหลดและตดิ ต้งั วิธกี ารติดตั้งของ Visual Studio 2017 แตกตา่ งไปจากเวอรช์ นั เดมิ ตรงทส่ี ามารถเลอื ก ติดตั้งช้นิ ส่วนเทา่ ที่ต้องการใช้งาน ในข้นั ตน้ น้ผี ู้เขยี นแนะนำ�ให้ตดิ ตั้ง 3 หมวด 1. หมวด .NET desktop development 2. หมวด ASP.NET and web development 3. หมวด Node.js development ร า ย ก า ร ติ ด ตั้ ง ข อ ง หมวดที่ 3 ก็คอื เนอ้ื หาทเ่ี รา จะใช้งานกันในหนังสือเล่มนี้ ดงั รูปที่ 6-2 รปู ท ี่ 6-2 แสดงการเลือก ประเภทที่ตอ้ งการตดิ ตงั้ 116

CHAPTER 6 การพัฒนา MEAN Stack ดว้ ยโปรแกรม Visual Studio จากรปู ท่ี 6-2 สามารถ ดรู ายละเอยี ดของแตล่ ะหมวด ได้ท่ีแถบด้านขวามือ จาก นั้นคลิกที่ปุ่ม Install เพื่อ ดาวน์โหลดและติดต้ังตาม รายการท่ีเลือก เป็นข้ันตอน อัตโนมัตทิ ัง้ หมด ให้ Restart 1 ครัง้ VS 2017 ก็จะพร้อมใช้งานแล้ว ดงั รูปที่ 6-3 รปู ท่ี 6-3 แสดงการตดิ ตงั้ ตวั โปรแกรม Visual Studio 2017 เสรจ็ สมบรู ณ์แล้ว การพัฒนา Web Apps แบบ MEAN Stack ด้วยโปรแกรม Visual Studio 2017 ตอ้ ง อาศยั NodeJS เช่นกนั เราตดิ ต้ังมาแล้วในบทที่ 1 สง่ ผลให้ Visual Studio พรอ้ มใช้งานไดท้ ันที การกำ�หนดให้ Visual Studio แสดงไดอะล็อกสร้างโปรเจ็กต์ใหมแ่ ละ แสดงหมายเลขบรรทดั ในตวั เขียนโคด้ หลังจากท่ีติดต้ังโปรแกรม Visual Studio เสร็จเรียบร้อยแล้ว ก็ต้องมีการปรับแต่งเล็ก น้อย เพอ่ื ใหเ้ หมาะสมกับการใชง้ าน มขี ั้นตอนดังนี้ 1. กำ�หนดให้โปรแกรม Visual Studio แสดงไดอะล็อกสร้างโปรเจ็กต์ใหม่เสมอ โดย การเลอื กเมนู Tools > Options… ดังรปู ที่ 6-4 รูปท ่ี 6-4 แสดงการก�ำ หนดใหแ้ สดงไดอะลอ็ กสรา้ งโปรเจก็ ตใ์ หม่ ScJraivpat 117

จากรปู ท่ี 6-4 ท่ีหัวข้อ Environment > Startup ทรี่ ายการ At startup: ใหเ้ ลอื กรายการ Show New Project dialog box 2. ต่อมา กำ�หนดให้ตัวเขียนโค้ด (Text Editor) ของ Visual Studio แสดงหมายเลข บรรทัดกำ�กบั โค้ดไว้ ก�ำ หนดได้ท่ีหวั ขอ้ Text Editor > Al Languages ใหเ้ ลือกตัว เลือก Line numbers รปู ท่ี 6-5 แสดงการกำ�หนด ให้แสดงหมายเลขบรรทัดใน Code Editor การสรา้ งโปรเจ็กต์ Express ใน VS 2017 ทห่ี น้าจอสร้างโปรเจก็ ต์ใหม่ (New Project) ทห่ี วั ข้อ JavaScript > Node.js สามารถ เลือกสร้างโปรเจ็กต์ Node + Express ได้หลายลักษณะ ผู้เขียนแนะนำ�โปรเจ็กต์แบบ Basic Node.js Express 4 Application. เปน็ โครงสร้างโปรเจ็กต์ท่ีมีความสมบูรณใ์ นระดบั หน่ึง เทยี บ เท่ากบั ที่สรา้ งดว้ ย express-generator ในขน้ั ตน้ นี้ ผเู้ ขยี นสรา้ งโปรเจก็ ตท์ ชี่ อ่ื วา่ BasicExpress เกบ็ ไวท้ พ่ี าธE:\\Projects เชน่ เดมิ รปู ท่ ี 6-6 แสดงการสรา้ งโปรเจก็ ต์ Express ใน VS 2017 118

CHAPTER 6 การพฒั นา MEAN Stack ด้วยโปรแกรม Visual Studio จากรปู ท่ี 6-6 ไฟลท์ ท่ี �ำ งานเปน็ ล�ำ ดบั แรก คอื app.js มสี ครปิ ตท์ เ่ี ราคนุ้ เคยกนั เปน็ อยา่ งดี ใหค้ ลกิ ทป่ี ุ่ม ในหน้าตา่ ง Solution Explorer เพอ่ื ก�ำ หนดให้ Visual Studio แสดงรายการ ไฟล์และโฟลเดอรท์ งั้ หมดของโปรเจ็กตป์ ัจจบุ นั โครงสรา้ งโปรเจก็ ตท์ ไี่ ดม้ าเหมอื นกบั โปรเจก็ ตท์ เี่ ราไดจ้ าก การปอ้ น Command Line ทุกประการ เพราะวา่ Visual Studio ทำ�ให้เราท้ังหมดโดยอัตโนมัติ เป็นการลดเวลาในการเร่ิมต้นโปร เจก็ ตเ์ ป็นอย่างมาก รูปท ่ี 6-7 แสดงโครงสรา้ งโปรเจก็ ตท์ ไ่ี ดม้ าในหนา้ ตา่ ง Solution Explorer การทดสอบรนั โปรเจก็ ต์ Express ใน Visual Studio 2017 หลังจากท่ีสร้างโปรเจ็กต์ Express ขึ้นมาใน VS 2017 แล้ว ให้ดับเบิ้ลคลิกที่ไฟล์ package.json เพอื่ ตรวจสอบชนิ้ สว่ นdependencies ทใ่ี ชใ้ นโปรเจก็ ตป์ จั จบุ นั ทถ่ี กู สรา้ งขนึ้ มา รายการช้นิ สว่ นท่เี ราใช้ใน dependencies จะแสดงอยู่ภายใต้รายการ npm สอดคล้อง กันเสมอ ดังรปู ท่ี 6-8 รูปท่ ี 6-8 แสดงชน้ิ สว่ นทใ่ี ช้ในโปรเจก็ ตป์ จั จบุ นั โดยอตั โนมตั ิ ScJraivpat 119

ในกรณีทโ่ี ปรเจก็ ตป์ ัจจุบนั ยังไม่มกี ารดาวนโ์ หลดและติดตงั้ ชนิ้ สว่ นเหลา่ นี้ (รายการท่มี ี คำ�ว่า missing ต่อท้าย) เราจะรอให้ VS 2017 ดาวน์โหลดให้โดยอัตโนมัติ หรือจะส่ังให้ ดาวน์โหลดรายการเหล่านีก้ ็ได้ มีขั้นตอนดงั นี้ 1. ให้คลิกขวาท่ีรายการ npm เลือกคำ�ส่ัง Install New npm Packages… เพ่ือ ดาวนโ์ หลดและตดิ ตง้ั รายการdependencies ตา่ งๆ ทเ่ี ราระบไุ วใ้ นไฟล์package. json โดยอตั โนมัติ ดังรูปท่ี 6-9 รปู ท ่ี 6-9 แสดงการดาวนโ์ หลดและตดิ ตง้ั รายการ dependencies 2. ต่อมา ใหส้ งั เกตรายการตา่ งๆ ท่แี สดงอย่ใู นหน้าต่าง Solution Explorer ไม่มีค�ำ วา่ missing ตอ่ ทา้ ยแล้ว ถือวา่ โปรเจก็ ตป์ ัจจุบนั พรอ้ มทดสอบแล้ว ดงั รูปที่ 6-10 รูปที ่ 6-10 แสดงการดาวนโ์ หลด และติดตง้ั เสร็จสมบรู ณ์ จากรูปท่ี 6-10 หน้าต่าง Output ด้านล่างของ Visual Studio จะแสดงรายการที่ถูก ดาวนโ์ หลดและติดตงั้ ลงในโปรเจก็ ตป์ จั จบุ ันของเราดว้ ย การทดสอบและหยุดโปรเจก็ ต์ Express ใน Visual Studio การทดสอบรันโปรเจ็กต์แบบ Express ของ Visual Studio ไม่ต้องพิมพ์คำ�สั่งใน Command Prompt ใดๆ ทง้ั สิ้น เราสามารถคลกิ ที่ปุ่ม เลอื กบราวเซอร์ทดสอบ โปรเจ็กต์ได้เลย ดงั รูปท่ี 6-11 120

CHAPTER 6 การพฒั นา MEAN Stack ดว้ ยโปรแกรม Visual Studio ÂÂ คลิกเพื่อรนั โปรเจ็กต์ Express รปู ท ่ี 6-11 ผลการทดสอบรันโปรเจ็กตด์ ว้ ย VS 2017 จากรูปท่ี 6-11 Visual Studio จะเปิด Command Line และเปิดบราวเซอร์ทดสอบ โปรเจ็กตโ์ ดยอตั โนมตั ทิ ง้ั หมด โดยไมต่ ้องปอ้ นค�ำ สั่ง Command Line ใดๆ ท้ังสนิ้ กลา่ วได้ อีกนยั หนง่ึ ว่า ตัวโปรแกรม Visual Studio เป็นทง้ั ผู้สร้าง เขยี นสคริปต์ และทดสอบโปรเจ็กต์ ไดใ้ นตวั มันเอง ในกรณที ่ีต้องการหยุดทดสอบโปรเจก็ ตป์ จั จบุ ัน มี 2 แบบ ดงั น้ี ÂÂ คลิกท่ปี มุ่ เพ่ือหยดุ ชัว่ คราว รูปท่ ี 6-12 กรณตี อ้ งการหยดุ ทดสอบโปรเจ็กต์ ÂÂ คลกิ ท่ีปุม่ เพ่อื หยดุ ถาวร การแปลงโปรเจ็กต์ Express เดมิ ใหเ้ ปน็ โปรเจ็กตข์ อง Visual Studio ในกรณีท่ีมีโปรเจ็กต์ Node + Express เดิม ที่ได้มาจากการสร้างด้วยการป้อนคำ�สั่ง Command Line โดยตรง แล้วต้องการแปลงมาเป็นโปรเจ็กต์ของ Visual Studio สามารถ ท�ำ ไดเ้ ช่นกัน ScJraivpat 121

ผู้เขียนนำ�โปรเจ็กต์ที่ชื่อว่า Basic Route เก็บอยู่ในโฟลเดอร์ E:\\Projects ถูก สร้างข้ึนมาจาก Node + Express โดยตรง ต้องการแปลงโปรเจ็กต์น้ี ให้กลายเป็นโปร เจ็กตข์ อง Visual Studio รูปท่ ี 6-13 แสดงโปรเจก็ ต์ทีช่ อื่ ว่า Basic Route ตวั อยา่ งที่ 6-1 การแปลงเป็นโปรเจ็กต์ของ Visual Studio มีขั้นตอนดังนี้ 1. ที่หน้าจอเลือกสรา้ งโปรเจ็กต์ใหม่ (New Project) ของ Visual Studio ให้เลือก From Existing Node.js code ตั้งช่ือโปรเจก็ ต์ใหมน่ ้ีว่า BasicRouteVS ดงั รปู ที่ 6-14 รูปท่ี 6-14 แสดงการเลอื กโปรเจ็กต์ Basic Route จากรปู ที่ 6-14 ให้คลกิ ทปี่ ุ่ม เลอื กโปรเจ็กตท์ ต่ี อ้ งการแปลง ในกรณนี ค้ี ือ โปรเจ็กต์ ทเ่ี กบ็ อย่ใู นพาธ E:\\Projects\\Basic Route 2. ตอ่ มา เปน็ ขน้ั ตอนการก�ำ หนดชอื่ ไฟลท์ ตี่ อ้ งท�ำ งานเปน็ ล�ำ ดบั แรก อาจจะเปน็ ไฟลท์ ่ี ชอื่ วา่ index.js หรอื app.js ก็ได้เป็นไปตามโครงสรา้ งโปรเจ็กต์ Express เดมิ ของgik ในกรณีนีค้ อื ไฟล์ทชี่ ่อื วา่ index.js ดงั รูปที่ 6-15 122

CHAPTER 6 การพัฒนา MEAN Stack ด้วยโปรแกรม Visual Studio รูปท่ ี 6-15 แสดงการก�ำ หนดไฟลท์ ที่ �ำ งานเปน็ ล�ำ ดบั แรก จากรูปที่ 6-15 โครงสร้างโปรเจ็กต์ Express ของ Visual Studio ต้องมีไฟล์เรียกโปร เจ็กตด์ ว้ ย เราจะตั้งช่อื อะไรก็ได้ ในกรณนี ้ีตั้งชอ่ื ว่า BasicRouteVS ใหส้ อดคล้องกบั โปรเจก็ ต์ เดมิ ทไ่ี ด้มา 3. ตอ่ มา โปรเจก็ ต์ทไ่ี ด้มาจะถกู เปดิ ใน Visual Studio ให้ Save โปรเจก็ ต์ด้วย พบว่า สามารถทำ�งานได้ตามปกติ โดยมีไฟล์ index.js ทำ�หน้าท่ีเป็นไฟล์ลำ�ดับแรกของ โปรเจ็กตต์ ามที่เราเลอื กไว้ในขั้นตอนแปลงโปรเจ็กต์ รูปท ี่ 6-16 แสดงโปรเจ็กต์ BasicRouteVS ใน Visual Studio ต่อมา เมื่อได้โปรเจ็กต์ใหม่ที่มีโครงสร้างของ Visual Studio ให้อัพเดตช้ินส่วนต่างๆ เปน็ เวอร์ชันลา่ สุดด้วย Visual Studio ดังรูปที่ 6-17 ScJraivpat 123

รูปท่ี 6-17 แสดงการอัพเดตรายการ dependencies ตา่ งๆ ใหเ้ ปน็ เวอรช์ นั ลา่ สดุ จากรูปที่ 6-17 ทหี่ น้าตา่ ง Output ดา้ นลา่ ง จะแสดงใหเ้ ห็นรายการทม่ี ีการอัพเดตช้นิ ส่วนต่างๆ ให้เป็นเวอร์ชันล่าสุดเท่าท่ีมีอยู่ให้กับโปรเจ็กต์ปัจจุบันโดยอัตโนมัติท้ังหมด เท่าท่ี ระบุไว้ในไฟล์ package.json 4. ต่อมา ผู้เขียนลองรันโปรเจ็กต์ปัจจุบัน ใน Visual Studio โดยการเลือกที่ปุ่ม โปรเจ็กต์ของเรา ยัง คงรนั อยทู่ ่ีพาธ localhost:3000 ตามเดมิ โดยทีไ่ ม่ตอ้ งปอ้ น Command Line ด้วย ตัวเอง รปู ท่ ี 6-18 กรณีรนั โปรเจก็ ต์ใน VS 2017 จากรูปท่ี 6-18 เราสามารถเขา้ มาทหี่ นา้ เวบ็ เพจได้ท่พี อร์ต 3000 เช่นเดมิ 5. ท้ายที่สุด ผู้เขียนลองไปดูว่า โครงสร้าง โปรเจก็ ตเ์ ปลย่ี นแปลงไปอยา่ งไร พบวา่ มี ไฟลท์ ีท่ �ำ หน้าท่เี รียกโปรเจ็กต์ของ Visual Studio เพิ่มขึน้ มาใหม่ ดังรปู ท่ี 6-19 รูปที ่ 6-19 แสดงตัวเรียกโปรเจ็กต์ Visaul Studio 124

CHAPTER 6 การพัฒนา MEAN Stack ด้วยโปรแกรม Visual Studio การเปดิ โปรเจก็ ต์ Express ของ Visaul Studio ดว้ ยวธิ ปี อ้ น Command Line ในกรณีท่ีมีโปรเจ็กต์ Express ที่เกิดมาจาก Visual Studio สามารถส่ังให้ทำ�งานด้วยวิธี ปอ้ น Command Line ไดเ้ ชน่ กัน มขี นั้ ตอนดังน้ี 1. ผู้เขียนมีโปรเจ็กต์ Express ของ Visual Studio ท่ีชื่อว่า UsingJson เก็บอยทู่ พ่ี าธ E:\\ Projects ตอ้ งการเปิดโปรเจก็ ต์น้ดี ้วยวิธกี าร ป้อนคำ�สัง่ Command Line โดยตรง รูปท ่ี 6-20 แสดงโปรเจ็กต์ท่ีช่ือว่า UsingJson ใน พาธ E:\\Projects 2. ตอ่ มา ใหเ้ ขา้ ไปในโฟลเดอร์โปรเจก็ ตป์ จั จบุ นั กอ่ น ในกรณนี ค้ี อื โฟลเดอร์UsingJson ให้กดป่มุ Shift ท่ีคยี บ์ อรด์ ค้างไวก้ ่อน จากนั้นคลิกขวาบรเิ วณพ้ืนท่ีว่าง เลอื ก ค�ำ สง่ั Open command window here (หรอื คำ�ส่ัง Open PowerShell windows here) เพื่อเปิดหน้าต่างปอ้ นคำ�สง่ั Command Line รูปท ่ี 6-21 แสดงการเปดิ หนา้ ตา่ ง Command Prompt ในโฟลเดอรโ์ ปรเจก็ ตป์ จั จบุ นั ScJraivpat 125

จากรปู ที่ 6-21 ใหร้ นั โปรเจก็ ตด์ ว้ ยค�ำ ส่ัง npm start 3. ทา้ ยทส่ี ดุ ใหเ้ ขา้ หนา้ เวบ็ เพจผา่ นทางพาธ localhost:3000 พบวา่ สามารถรันโปรเจก็ ตท์ ีเ่ กิดจาก Visual Studio ผ่าน ทาง Command Line ได้เช่นกนั ดังรูปท่ี 6-22 รปู ที ่ 6-22 ผลการรนั โปรเจก็ ต์ Visual Studio ดว้ ย Command Line การจดั เก็บขอ้ มูลในฝง่ั ผู้ใช้ด้วย Cookies โดยอาศยั cookie-parser เมอื่ เขา้ มาสโู่ ลกของการพฒั นาWebApps ไมว่ า่ จะใชภ้ าษาใดหรอื แพลตฟอรม์ ใดกต็ าม การทำ�งานกับสถานะ (State Management) ระหวา่ งฝ่ังผู้ใช้งาน (บราวเซอร์หรือ Client) กบั ฝ่ังเซิร์ฟเวอร์ (Server) เป็นอีกหน่ึงหัวข้อท่ีต้องศึกษา เพราะว่าการทำ�งานของฝั่ง Client ท่ีมี ตอ่ ฝ่ัง Server ก็คอื อยู่ในลกั ษณะรอ้ งขอขอ้ มูล (Request) ในแตล่ ะคร้งั ไม่ไดม้ กี ารเชือ่ มตอ่ อยตู่ ลอดเวลา คุ้กก้ี (Cookie) เป็นวิธีการจัดเก็บข้อมูลรูปแบบไฟล์ในฝั่งบราวเซอร์ หรือฝั่งผู้ใช้งาน (Client) นิยมใชเ้ กบ็ ข้อมูลพน้ื ฐานตา่ งๆ ประกอบดว้ ยการทำ�งาน 3 สว่ น ดังน้ี 1. การสร้างคกุ้ กขี้ ึน้ มาเพอ่ื เก็บขอ้ มูล และยงั รวมไปถึงแก้ไขขอ้ มูลท่ีอยใู่ นคกุ้ กอี้ ีกดว้ ย (หมายถึง การเพมิ่ ข้อมลู ชดุ เดิมซ้ำ� ) 2. การอ่านขอ้ มูลที่เก็บอยูใ่ นคกุ้ กี้ 3. การล้างขอ้ มูลท่ีเกบ็ อยใู่ นคกุ้ กี้ ชิ้นสว่ น (dependencies) ท่ีมีหนา้ ทรี่ บั ผิดชอบเก่ียวกับค้กุ ก้ใี นโลกของ MEAN Stack กค็ ือ cookie-parser ตัวอย่างท่ี 6-1 การจดั เก็บขอ้ มูลในฝง่ั ผู้ใชด้ ว้ ย Cookies โดยอาศยั cookie-parser มีข้ันตอนดังนี้ 1. สรา้ งโปรเจก็ ตท์ ีช่ ่ือวา่ UsingCookie ให้ดูท่ีไฟล์ package.json พบว่ามีการระบใุ ห้ ใช้ cookie-parser เวอร์ชนั ล่าสุดเท่าท่ีมอี ยใู่ หโ้ ดยอัตโนมัติ ถือว่าโปรเจก็ ต์ปัจจุบัน พร้อมใชง้ าน cookie แล้ว 126

CHAPTER 6 การพัฒนา MEAN Stack ดว้ ยโปรแกรม Visual Studio รูปท่ี 6-23 แสดงการใชช้ น้ิ สว่ น ที่ชื่อว่า cookie-parser 2. ตอ่ มา ทีไ่ ฟล์ app.js ให้เขียนสครปิ ต์ตอ่ ไปนี้ สครปิ ต์ Express ที่ 6-1 การจัดเก็บขอ้ มูลในฝั่งผู้ใช้ดว้ ย Cookies โดยอาศัย cookie-parser (app.js) 1 ‘use strict’; 2 var debug = require(‘debug’); 3 var express = require(‘express’); 4 var path = require(‘path’); 5 var favicon = require(‘serve-favicon’); 6 var logger = require(‘morgan’); 7 var cookieParser = require(‘cookie-parser’); 8 var bodyParser = require(‘body-parser’); 9 10 var routes = require(‘./routes/index’); 11 var users = require(‘./routes/users’); 12 13 var app = express(); 14 15 app.set(‘views’, path.join(__dirname, ‘views’)); 16 app.set(‘view engine’, ‘pug’); 17 18 app.use(logger(‘dev’)); 19 app.use(bodyParser.json()); 20 app.use(bodyParser.urlencoded({ extended: false })); 21 app.use(cookieParser()); 22 app.use(express.static(path.join(__dirname, ‘public’))); 23 24 app.use(‘/’, routes); ScJraivpat 127

สครปิ ต์ Express ท่ี 6-1 การจัดเกบ็ ข้อมลู ในฝัง่ ผใู้ ช้ดว้ ย Cookies โดยอาศยั cookie-parser (app.js) 25 app.use(‘/users’, users); 26 27 app.get(‘/setmycookie’, function (req, res) { 28 res.cookie(‘username’, ‘นายศุภชัย สมพานชิ ’, { maxAge: 500000, httpOnly: true }); 29 res.cookie(‘products’, { item: [200, 400] }, { maxAge: 500000 }); 30 res.send(‘สร้าง Cookie เรยี บร้อยแล้ว’); 31 }); 32 33 app.get(‘/readmycookie’, function (req, res) { 34 var username = “ชอ่ื -สกลุ : “ + req.cookies.username; 35 var products = “ข้อมลู สินคา้ : “ + JSON.stringify(req.cookies.products); 36 37 res.send(username + “<br />” + products.toString()); 38 }); 39 40 app.get(‘/deletemycookie’, function (req, res) { 41 res.clearCookie(‘username’); 42 res.clearCookie(‘products’); 43 res.send(‘ลา้ ง Cookie หมดแลว้ ’); 44 }); 45 46 app.use(function (req, res, next) { 47 var err = new Error(‘Not Found’); 48 err.status = 404; 49 next(err); 50 }); 51 52 if (app.get(‘env’) === ‘development’) { 53 app.use(function (err, req, res, next) { 54 res.status(err.status || 500); 55 res.render(‘error’, { 56 message: err.message, 57 error: err 58 }); 59 }); 60 } 61 62 app.use(function (err, req, res, next) { 128

CHAPTER 6 การพฒั นา MEAN Stack ดว้ ยโปรแกรม Visual Studio สครปิ ต์ Express ที่ 6-1 การจดั เกบ็ ขอ้ มูลในฝั่งผใู้ ชด้ ้วย Cookies โดยอาศยั cookie-parser (app.js) 63 res.status(err.status || 500); 64 res.render(‘error’, { 65 message: err.message, 66 error: {} 67 }); 68 }); 69 70 app.set(‘port’, process.env.PORT || 3000); 71 72 var server = app.listen(app.get(‘port’), function () { 73 debug(‘Express server listening on port ‘ + server.address().port); 74 }); ให้ทดสอบรนั โปรเจก็ ต์ โดยที่ผู้เขียนกำ�หนดไว้ว่า ถา้ ตอ้ งการสรา้ งคุ้กกี้ขึ้นมา กำ�หนด ให้ร้องขอไปที่พาธ /setmycookie ดงั รปู ที่ 6-24 รูปท่ี 6-24 กรณสี รา้ งคกุ้ กเ้ี พอ่ื เกบ็ ขอ้ มลู ใน ฝงั่ ผู้ใชง้ าน 4. ในกรณีทต่ี ้องการอ่านข้อมลู จากคุก้ ก้ที ี่เก็บไว้ให้ไปทีพ่ าธ /readmycookie ข้อมลู ท่ี จดั เก็บมี 2 รูปแบบ ดงั นี้ hh ข้อความธรรมดา ในกรณนี คี้ อื ชอื่ -สกุลผเู้ ขียน hh ข้อมูลตามโครงสร้าง JSON ในกรณีน้ีคือ ข้อมูลสินค้าที่ประกอบด้วยคำ�ว่า “item” และตวั เลขจำ�นวนเตม็ 200 กับ 400 รูปท่ี 6-25 กรณีอ่านขอ้ มูลออกมาจากคกุ้ ก้ี 5. ท้ายที่สุด ถ้าต้องการลบข้อมูลที่เก็บอยู่ในคุ้กก้ี ให้ไปพาธ /deletemycookie ดังรปู ที่ 6-26 ScJraivpat 129

รูปที่ 6-26 กรณลี บขอ้ มลู ในคกุ้ ก้ี จากรูปที่ 6-26 ในกรณีทลี่ บคกุ้ ก้ีออกหมดแล้ว (โดยไปท่ีพาธ /deletemycookie) ถ้า อา่ นค่าค้กุ ก้ีอกี ครัง้ (โดยไปที่พาธ /readmycookie) กจ็ ะพบว่าข้อมลู ทง้ั 2 ส่วน หายไปแลว้ อธิบายการท�ำ งานของสครปิ ต์ 1. การท�ำ งานกับคกุ้ ก้ี ใหส้ รา้ งตวั แปรที่ชื่อวา่ cookieParser ท�ำ หนา้ ท่เี ป็นตวั แทนชน้ิ ส่วน cookie-parser ก่อน จากน้ันส่ังให้ใช้งานได้ในโปรเจ็กต์ปัจจุบันด้วยเมธอด use() app.js 1 var cookieParser = require(‘cookie-parser’); 2… 3… 4… 5 app.use(cookieParser()); 2. ตอ่ มา ก�ำ หนดใหพ้ าธ /setmycookie ทำ�หน้าที่สร้างคุ้กกี้ขึ้นมา เพื่อเก็บข้อมูลไว้ ในฝั่งบราวเซอร์ มี 2 รูปแบบ ดงั น้ี ÂÂ ขอ้ ความธรรมดา ในกรณีนสี้ รา้ งข้อมลู ทชี่ ่ือว่า username กำ�หนดให้เกบ็ ชือ่ -สกลุ ผูเ้ ขยี น app.js 1 app.get(‘/setmycookie’, function (req, res) { 2 res.cookie(‘username’, ‘นายศภุ ชัย สมพานิช’, { maxAge: 500000, httpOnly: true }); ÂÂ ข้อความท่มี ีโครงสรา้ งแบบ JSON ในกรณีน้ีสร้างขอ้ มลู ท่ีชอื่ ว่า products กำ�หนด ให้เก็บข้อมลู 2 ส่วน คือ คำ�ว่า item และตัวเลขจำ�นวนเตม็ 200 กบั 400 ขึ้นอยู่ กบั ว่าเราจะเกบ็ ข้อมูลด้วยโครงสร้างทซี่ บั ซอ้ นอย่างไร 130

CHAPTER 6 การพัฒนา MEAN Stack ด้วยโปรแกรม Visual Studio app.js 1 res.cookie(‘products’, { item : [200, 400] }, { maxAge: 500000 }); 2 res.send(‘สรา้ ง Cookie เรยี บรอ้ ยแล้ว’); 3 }); ส่วนฟิลด์ maxAge หมายถึง กำ�หนดอายุของคุ้กกี้ มีหน่วยเป็นมิลลิวินาที (1000 มี ค่าเท่ากับ 1 วนิ าท)ี 3. ต่อมา ท่ีพาธ /readmycookies ทำ�หน้าที่อ่านข้อมูลออกมาจากคุ้กกี้ ให้ระบุช่ือ ข้อมูลตามทต่ี อ้ งการ ในกรณนี เ้ี รามีข้อมูลอยู่ 2 ชือ่ hh ขอ้ มูลท่ีชอ่ื วา่ username เปน็ ข้อมลู แบบขอ้ ความธรรมดา สามารถอา่ นคา่ ออก มาได้โดยตรง (req.cookies.username) hh ขอ้ มลู ทช่ี ื่อว่า products เป็นขอ้ มลู ทมี่ ีโครงสรา้ งซบั ซ้อน ตอ้ งใช้ฟงั ก์ชนั JSON เข้ามาชว่ ยอา่ นคา่ (JSON.stringify(req.cookies.products))) app.js 1 app.get(‘/readmycookie’, function (req, res) { 2 var username = “ช่ือ-สกุล : “ + req.cookies.username; 3 var products = “ขอ้ มูลสินคา้ : “ + JSON.stringify(req.cookies.products); 4 5 res.send(username + “<br />” + products.toString()); 6 }); 4. ท้ายที่สุด การลบข้อมูลออกจากคุ้กกี้ท่ีเราสร้างขึ้นมา เป็นหน้าที่ของเมธอด clearCookie() ร่วมกับการระบุช่ือข้อมูลที่ต้องการลบ ในกรณีน้ีมี 2 ชุด คือ username และ products app.js 1 app.get(‘/deletemycookie’, function (req, res) { 2 res.clearCookie(‘username’); 3 res.clearCookie(‘products’); 4 res.send(‘ล้าง Cookie หมดแลว้ ’); 5 }); ScJraivpat 131

สรปุ ท้ายบท การพัฒนา MEAN Stack ในโปรแกรม Visual Studio ค่อนข้างสะดวกและ รวดเรว็ เพราะวา่ เราไมต่ อ้ งปอ้ นค�ำ สงั่ Command Line ดว้ ยตวั เอง กจ็ ะชว่ ยลดระยะ เวลาการเรยี นรู้ได้เป็นอยา่ งมาก 132

7Java script CHAPTER พน้ื ฐานการใชง้ านระบบฐานขอ้ มลู Mongo จากทผี่ เู้ ขยี นกลา่ วไวในตอนตน้ ทวี่ า่ โลกของการพฒั นาWebApps ดว้ ยMEANStack ประกอบ ไปด้วย 4 ส่วนตามตัวอักษร MEAN โดยเน้ือหาท่ีได้ศึกษามาตั้งแต่ต้นเป็นการใช้งาน Node (ตวั อักษร N) รว่ มกับ Express (ตัวอักษร E) เพ่ือสร้าง Web Apps ตามความต้องการของเรา สำ�หรับเน้ือหาในบทนเ้ี ปน็ การใชง้ านระบบฐานขอ้ มลู Mongo (หรอื เรียกว่า MongoDB กไ็ ด้) หมายถึง ตัวอักษร M น่ันเอง ระบบฐานขอ้ มลู Mongo คืออะไร ระบบฐานข้อมูลของ Mongo มีวิธีการจัดเก็บข้อมูลแตกต่างไปจากระบบฐานข้อมูล RDBMS (ย่อมาจากค�ำ วา่ Relational Database Management System) เชน่ SQL Server, MySQL ท่เี ราค้นุ เคย กลา่ วคือเปน็ การใช้ JSON เขา้ มาทำ�หน้าทีก่ �ำ หนดรูปแบบในการจัดเก็บ ข้อมูลตามโครงสร้างท่ีเราต้องการ ส่วนการเก็บข้อมูลของฐานข้อมูลในระบบ RDBMS ใช้รูป แบบตารางเขา้ มาท�ำ หน้าทจี่ ัดเกบ็ ข้อมลู ส่งผลใหก้ ารทำ�งานกับระบบฐานข้อมูล Mongo จงึ ไมไ่ ด้ใชภ้ าษา SQL เขา้ มาทำ�หน้าท่ี ควิ รข่ี อ้ มลู แตอ่ ยา่ งใด แตจ่ ะมองขอ้ มลู ทเี่ กบ็ อยใู่ นระบบ Mongo เปน็ ขอ้ มลู ทอ่ี ยใู่ น Colection ทเี่ ราก�ำ ลงั สนใจอยู่ เราตอ้ งการท�ำ อะไรกบั ขอ้ มลู ชดุ นี้ เรยี กระบบจดั เกบ็ ขอ้ มลู กลมุ่ นวี้ า่ NoSQL ตารางต่อไปนีแ้ สดงการเปรียบเทียบคำ�ที่ใชเ้ รยี ก ระหวา่ งระบบฐานข้อมูล RDBMS กับ Mongo .Net HTML HTML

ระบบฐานข้อมลู RDBMS ระบบฐานขอ้ มูล Mongo ตาราง (Table) Col ection แถวหรอื เร็คคอร์ด (Row) Document ฟลิ ด์หรอื คอลัมน์ (Column) Field การดาวน์โหลดและติดต้ังฐานขอ้ มลู Mongo สามารถใชง้ านระบบฐานขอ้ มลู Mongo ไดฟ้ รี มีดงั น้ี 1. ใหไ้ ปทเี่ ว็บไซด์ https://www.mongodb.org/ เพื่อดาวนโ์ หลดตวั ติดต้ังฐานข้อมลู Mongo ดงั รูปที่ 7-1 รปู ที ่ 7-1 แสดงการดาวนโ์ หลดตัวติดตง้ั ระบบฐานข้อมูล Mongo จากรูปท่ี 7-1 ในกรณีนี้ผู้เขียนต้องการติดตั้งฐานข้อมูล Mongo บน Windows แบบ 64 บติ จงึ เลอื กรายการ Windows 64-bit 2008 R2+ 2. ให้ติดตั้งตามขั้นตอนท่ีปรากฎขึ้นมา ผู้ เขียนใช้ค่าเริ่มต้นท้ังหมดท่ีมากับตัวติด ต้ัง ส่งผลให้ตัวโปรแกรม Mongo ของ ผู้เขียนถูกติดตั้งอยู่ท่ีพาธ C:\\Program Files\\MongoDB\\Server ตามเวอร์ชัน เท่าท่ีมอี ยใู่ นปัจจบุ ัน 134

CHAPTER 7 พนื้ ฐานการใช้งานระบบฐานข้อมลู Mongo รูปท่ ี 7-2 แสดงการตดิ ตงั้ ระบบฐานขอ้ มลู Mongo รูปที่ 7-3 แสดงรายการไฟลท์ ถี่ กู ตดิ ตง้ั ในพาธ C:\\ Program Files\\MongoDB\\Server\\3.4\\bin 3. ตอ่ มา ตอ้ งสร้างโฟลเดอร์ขึ้นมาเพอื่ จดั เกบ็ ฐานข้อมูล ในกรณนี ้ี คอื hh สรา้ งโฟลเดอร์ทช่ี ือ่ วา่ data ไวท้ ี่ไดรฟ์ C:\\ hh สร้างโฟลเดอรย์ อ่ ยท่ีชอ่ื วา่ db กับ log ไว้ในโฟลเดอร์ data อีกชน้ั หน่ึง ScJraivpat 135

รปู ท ่ี 7-4 แสดงการสรา้ งโฟลเดอรย์ อ่ ย db กบั log 4. ตอ่ มา ใหส้ รา้ งไฟลข์ อ้ ความทชี่ อ่ื วา่ mongod.cfg ดว้ ยโปรแกรม Notepad ก�ำ หนด ให้โปรแกรม Mongo รับทราบว่าเราต้องการใช้โฟลเดอร์ C:\\data (ที่มีโฟลเดอร์ ย่อย db กบั log อยภู่ ายใน) จดั เกบ็ ระบบฐานขอ้ มลู ดงั รูปท่ี 7-5 รปู ที่ 7-5 รายละเอยี ดในไฟล์ mongod.cfg 5. เราจะใชไ้ ฟล์ mongod.cfg ในฐานะเปน็ ไฟล์ Config ให้ Copy ไฟล์ไปวางไว้ที่ พาธ C:\\Program Files\\MongoDB\\ Server\\3.4 ดังรูปท่ี 7-6 รปู ท ี่ 7-6 แสดงท่เี กบ็ ไฟล์ mongod.cfg 6. ตอ่ มา ใหเ้ ปิด Command Prompt ข้ึนมา จากนัน้ ป้อนค�ำ สั่งต่อไปน้ี (อยูบ่ รรทดั เดียวกันทั้งหมด) แล้วกดปุ่ม Enter เพ่ือติดตั้ง บอกให้โปรแกรม Mongo ใช้ค่า Config ตามที่เรากำ�หนดไว้ในไฟล์ mongod.cfg (ระบุตามเวอร์ชัน MongoDB ของคณุ เป็นหลกั ) Command Prompt 1 “C:\\Program Files\\MongoDB\\Server\\3.4\\bin\\mongod.exe” --config “C:\\Program Files\\MongoDB\\Serv- er\\3.4\\mongod.cfg” --install 136

CHAPTER 7 พืน้ ฐานการใชง้ านระบบฐานขอ้ มลู Mongo จากค�ำ สงั่ ข้างต้น ใหร้ ะบุพาธเวอร์ชนั ตามทต่ี ิดตง้ั ในเคร่ืองของเรา รปู ท่ี 7-7 แสดงการติดต้ังไฟล์ mongod.cfg ให้คณุ Restart เครอ่ื ง PC ก่อน 1 ครงั้ จากรูปท่ี 7-7 ถือวา่ การติดตง้ั ไฟล์ mongod.cfg เสรจ็ สมบูรณ์แล้ว 7. ในกรณที ไ่ี มส่ ามารถตดิ ตง้ั ไฟล์ mongod.cfg กอ็ าจจะตอ้ งรนั Command Prompt ในฐานะ administrator ผู้เขยี นแนะน�ำ ให้สรา้ ง Shortcut ตัว Command Prompt ไวท้ ี่ Taskbar ของ Windows ก่อน เพ่ือสะดวกในการเรียกใช้งาน จากนั้นให้คลิกขวาที่ไอคอนและคลิกขวาท่ี Command Prompt อีกครั้งหน่ึง เลือกเมนู Run as administrator เพ่ือรันคำ�ส่ังข้างต้นอีกคร้ังในฐานะ administrator ดังรูปที่ 7-8 รูปท่ ี 7-8 กรณีรนั Command Prompt ในฐานะ administrator วิธกี ารเปดิ บรกิ ารฐานข้อมลู Mongo บน Windows หลังจากท่ตี ดิ ต้งั และ Config ฐานข้อมูล Mongo เสรจ็ เรียบร้อยแลว้ กจ็ ะเขา้ ส่ขู น้ั ตอน เปิดบริการระบบฐานข้อมูล Mongo ใน Windows ของเรา เพ่ือให้สามารถใช้งานฐานข้อมูล Mongo ได้นนั่ เอง มีขั้นตอนดังนี้ 1. ท่ี This PC ใหค้ ลิกขวา เลอื กคำ�ส่งั Manage ดังรปู ท่ี 7-9 ScJraivpat 137

รูปที่ 7-9 แสดง Services ของฐานขอ้ มลู Mongo จากรูปท่ี 7-9 ที่หัวข้อ Services and Applications ให้คลิกที่รายการ Services เพื่อ ตรวจสอบรายการ Services ตา่ งๆ ใน Windows พบวา่ จะมีรายการของระบบฐานข้อมลู Mongo อยู่ด้วย แตถ่ กู ก�ำ หนดใหอ้ ยใู่ นสถานะ ปิดบรกิ ารอยู่ ถา้ ไม่พบรายการบรกิ ารของฐานขอ้ มลู Mongo ก็ให้ Restart เครือ่ ง 1 ครัง้ ก่อน 2. การเปิดบริการระบบฐานข้อมูล Mongo ใหค้ ลกิ ขวา เลอื กค�ำ ส่งั Start ดงั รูปที่ 7-10 รปู ที ่ 7-10 แสดงการเปดิ บรกิ ารระบบฐานขอ้ มลู Mongo จากรปู ที่ 7-10 ท่คี อลมั น์ Startup Type ก�ำ หนดใหเ้ ปิดบริการฐานข้อมลู Mongo ใน แบบ Automatic หมายถึง ทุกคร้ังทเ่ี ปิด Windows ขึ้นมา กจ็ ะเปิดบรกิ ารนโ้ี ดยอตั โนมตั ิด้วย พนื้ ฐานการใช้งานระบบฐานขอ้ มลู Mongo เราจะมาลองใชง้ านระบบฐานขอ้ มลู Mongo ในระดบั พนื้ ฐานทส่ี ดุ นนั่ คอื เชอื่ มตอ่ ระบบ ฐานขอ้ มูล มีขน้ั ตอนดงั น้ี 1. ใหเ้ ปิด Command Prompt ขน้ึ มา จากน้ันป้อนค�ำ ส่งั ตอ่ ไปนี้ hh คำ�ส่ัง cd C:\\Program Files\\MongoDB\\Server\\3.4\\bin แล้วกดปุ่ม Enter หมายถงึ ก�ำ หนดใหไ้ ปทพี่ าธของ Mongo hh คำ�สง่ั mongo แล้วกดปมุ่ Enter หมายถึง สั่งใหฐ้ านข้อมูล Mongo ท�ำ งาน 138

CHAPTER 7 พื้นฐานการใช้งานระบบฐานข้อมลู Mongo Command Prompt 1 cd C:\\Program Files\\MongoDB\\Server\\3.4\\bin 2 mongo รปู ท ่ี 7-11 แสดงการเชื่อมตอ่ กบั ระบบฐานขอ้ มูล Mongo แลว้ จากรปู ที่ 7-11 ถอื ว่าระบบฐานข้อมลู Mongo พรอ้ มใชง้ านแลว้ แสดงรายการฐานข้อมลู เทา่ ทีม่ อี ยู่ ค�ำ สงั่ ล�ำ ดบั แรกทตี่ อ้ งใชง้ านให้เปน็ นนั่ คอื การแสดงรายการฐานข้อมูลท้ังหมดเท่าทีม่ ี อยู่ โดยการป้อนคำ�สั่งต่อไปนี้ Mongo Command Prompt 1 show databases ค�ำ สั่ง mongo หมายถึง ส่ังใหเ้ ปิดบริการฐานขอ้ มูล mongo เป็นค�ำ สงั่ ท่ตี ้องใชเ้ สมอ สว่ นค�ำ ส่ัง show databases หมายถึง แสดงรายการฐานข้อมูลทัง้ หมดเท่าท่มี ีอยู่ รูปท ี่ 7-12 แสดงรายการฐานขอ้ มลู เท่าท่มี อี ยู่ จากรูปที่ 7-12 ในกรณีน้ีเรายังไม่ได้สร้างฐานข้อมูลใดๆท้ังส้ิน ยังไม่ควรไปยุ่งกับฐาน ขอ้ มูลระบบนี้ ถือว่าเคร่ืองพร้อมใชง้ านระบบฐานขอ้ มูล Mongo แลว้ ScJraivpat 139

การสง่ั ให้ฐานข้อมูล Mongo ทำ�งาน ทุกๆ ครง้ั ทตี่ อ้ งการท�ำ งานกบั ข้อมูลที่ถูกเก็บอยู่ในระบบฐานขอ้ มลู Mongo จะตอ้ งสัง่ ใหเ้ ปิดใช้บรกิ ารกอ่ นเสมอ ให้ไปทีพ่ าธท่ีติดต้งั ฐานขอ้ มูล Mongo โดยปกติแล้วอยู่ท่ี C:\\Program Files\\Mongo\\ Server\\x.xx\\bin ให้พมิ พ์ต่อไปน้ี เพอื่ เปดิ บริการฐานขอ้ มูล Mongo ก่อนเสมอ Mongo Command Prompt 1 mongo รูปที่ 7-13 แสดงการเปิด Command Prompt ในพาธของ Mongo การสรา้ งฐานขอ้ มูลใน Mongo การสร้างฐานข้อมูลขน้ึ มาในฐานข้อมูล Mongo เช่น ผู้เขยี นต้องการสรา้ งฐานข้อมูลท่ี ช่อื ว่า myshops ข้ึนมา ท�ำ หนา้ ทีเ่ กบ็ ข้อมลู สนิ คา้ ทง้ั หมด ให้พิมพค์ ำ�สง่ั ตอ่ ไปน้ี Mongo Command Prompt 1 use myshops ค�ำ สัง่ ข้างต้นเป็นการบอก Mongo วา่ เราต้องการใชฐ้ านข้อมลู ทช่ี ่อื ว่า myshops แยก ออกเปน็ 2 กรณี ÂÂ กรณีมฐี านข้อมูล myshops อยูแ่ ล้ว ก็จะอยูใ่ นสถานะพรอ้ มใชง้ านฐานขอ้ มูลนี้ ÂÂ กรณไี ม่มฐี านขอ้ มูล myshops ตวั Mongo ก็จะสร้างฐานขอ้ มูลที่ช่ือว่า myshops ใหโ้ ดยอัตโนมตั ิ ในกรณีนีเ้ ป็นการใชง้ านฐานข้อมลู Mongo ครั้งแรก ไมม่ ีฐานขอ้ มลู ท่ชี ่อื วา่ myshops แนน่ อน จงึ ตรงกบั กรณีท่ี 2 นั่นคือ เราก�ำ ลงั สร้างฐานขอ้ มูลทชี่ ื่อวา่ myshops ขึ้นมาใหม่ 140

CHAPTER 7 พ้นื ฐานการใช้งานระบบฐานขอ้ มูล Mongo รปู ท ่ี 7-14 แสดงการสร้างฐานข้อมูลท่ีชื่อว่า myshops ข้นึ มาใหม่ การสรา้ ง Collection ขนึ้ มาเก็บขอ้ มลู การท�ำ งานล�ำ ดบั ตอ่ มากค็ อื เราตอ้ งเปน็ ผกู้ �ำ หนดวา่ จะเกบ็ ขอ้ มลู อะไรบา้ ง ตอนนผี้ เู้ ขยี น ตอ้ งการเก็บรายชื่อหนังสือ จึงสรา้ ง Colection ทช่ี ื่อว่า books ขึน้ มา Colection ที่กล่าวถึง เทียบได้กับตาราง (Table) ในระบบฐานข้อมูล RDBMS ให้ใช้ เมธอด createColection() ดงั ค�ำ ส่งั ตอ่ ไปนี้ Mongo Command Prompt 1 db.createCollection(‘books’); รูปท ี่ 7-15 แสดงการสรา้ ง Collection ท่ีชื่อว่า books จากรปู ที่ 7-15 Colection ที่ชื่อวา่ books เป็นของฐานข้อมูลที่ชอ่ื วา่ myshops วธิ ีการตรวจสอบฐานขอ้ มลู และ Collection คำ�สัง่ พ้ืนฐานลำ�ดบั แรกทต่ี อ้ งทราบ มี 2 ค�ำ สงั่ ดังน้ี 1. คำ�ส่ัง show dbs หรือคำ�สั่ง show databases ทำ�หน้าที่สั่งให้แสดงฐานข้อมูล ท้ังหมดเท่าท่ีมีอยู่ ในกรณีนี้พบว่ามีฐานข้อมูลที่ช่ือว่า myshops ท่ีเราเพิ่งสร้างขึ้น มาอยูด่ ว้ ย ดังรปู ท่ี 7-16 Mongo Command Prompt 1 show dbs รปู ท ่ี 7-16 กรณแี สดงฐานข้อมลู ท้งั หมดเท่าทมี่ ีอยู่ ScJraivpat 141

จากรปู ท่ี 7-16 ตอนนเี้ รามีฐานขอ้ มลู ทีช่ อ่ื วา่ myshops แล้ว เป็นฐานขอ้ มูลว่าง 2. ค�ำ สัง่ show colections ท�ำ หน้าที่ส่งั ใหแ้ สดง ‘Colection เทา่ ทมี่ ีอยูใ่ นฐานข้อมูล ปัจจบุ ัน’ ณ ตอนน้เี รากำ�ลงั ใช้งานฐานขอ้ มลู myshops พบวา่ มี Colection ทีช่ ่ือ ว่า books ดงั รูปท่ี 7-17 Mongo Command Prompt 1 show collections รปู ท่ี 7-17 แสดง Collection ทช่ี อื่ ว่า books อยู่ในฐานขอ้ มูล myshops การใสแ่ ละแสดงขอ้ มลู ที่อยู่ใน Collection กอ่ นทเี่ ขา้ สขู่ นั้ ตอนการเพม่ิ ขอ้ มลู ลงในColection ทชี่ อื่ วา่ books ผเู้ ขยี นตอ้ งการตรวจ สอบวา่ ใน books มีขอ้ มลู หนงั สือเกบ็ อยูห่ รือไม่ โดยการพมิ พ์คำ�ส่งั ตอ่ ไปนี้ Mongo Command Prompt 1 db.books.find(); รูปท่ี 7-18 การก�ำ หนดให้แสดงขอ้ มูลทเ่ี ก็บอยู่ใน books จากรปู ที่ 7-18 เมธอด find() ท�ำ หน้าทค่ี ้นหาข้อมลู ท่ีเกบ็ อยู่ใน books พบว่าในกรณีนี้ เราเพงิ่ สรา้ ง books ขนึ้ มาใหม่ ยังไมม่ ีขอ้ มลู หนงั สอื ใดๆ ทั้งสิน้ 1. การเพิ่มขอ้ มลู เขา้ ไปใน Colection ให้ใชค้ ำ�ส่งั Insert() ในกรณีนผ้ี ู้เขยี นกำ�หนดให้ books เก็บข้อมูลท่ีมโี ครงสรา้ ง 3 สว่ น ดงั น้ี hh isbn หมายถึง รหัสหนังสอื กำ�หนดค่า ‘1111’ hh title หมายถึง ช่ือหนังสือ ก�ำ หนดคา่ เป็นข้อความ ‘Basic using Mongo’ hh price หมายถึง ราคาหนังสือ ก�ำ หนดเป็นตวั เลขจ�ำ นวนเตม็ 250 142

CHAPTER 7 พ้ืนฐานการใชง้ านระบบฐานข้อมลู Mongo Mongo Command Prompt 1 db.books.insert( 2{ 3 ‘isbn’: ‘1111’, 4 ‘title’: ‘Basic Using Mongo’, 5 ‘price’: 250 6 }); ผู้เขียนแบ่งแยกบรรทัดเพื่อให้เห็นชัดเจนย่ิงขึ้น แยกกำ�หนดค่าเป็นคู่ๆ แต่ในขณะท่ี ปอ้ นคา่ ใน Command Prompt ขอใหเ้ ราปอ้ นบรรทดั เดียวกนั แล้วกดปุ่ม Enter ดงั รูปท่ี 7-19 รูปท่ี 7-19 แสดงการเพ่ิมข้อมูล หนงั สอื 1 รายการ จากรูปที่ 7-16 ข้อมูลหนังสือเล่มแรกรหัส 1111 ถูกใส่เข้ามาใน Collection ท่ีช่ือว่า books เรยี บรอ้ ยแล้ว 2. ต่อมา ผู้เขียนป้อนคำ�สั่ง db.books.find(); อีกครั้ง เพ่ือแสดงข้อมูลเท่าท่ีมีอยู่ใน books พบว่ามีการแสดงขอ้ มลู ทเี่ ราเพม่ิ เข้าไปถกู ต้องจ�ำ นวน 1 รายการ แตอ่ ยู่ใน รูปแบบท่ดี ขู ้อมลู ยาก ดังรปู ท่ี 7-20 Mongo Command Prompt 1 db.books.find(); รูปท ี่ 7-20 แสดงรายการหนังสือ เทา่ ทม่ี อี ยู่ (1 รายการ) จากรูปที่ 7-20 พบว่าขอ้ มูลหนังสือทป่ี รากฎขึ้นมาดูข้อมลู ยาก 3. สามารถป้อนคำ�สั่งต่อไปนี้ เพื่อกำ�หนดให้จัดรูปแบบของข้อมูลได้อีกด้วย ดังรูปที่ 7-21 Mongo Command Prompt 1 db.books.find().pretty(); ScJraivpat 143

รปู ที่ 7-21 แสดงการจัดผลลพั ธข์ อ้ มูลท่มี ีอยู่ จากรูปที่ 7-21 พบว่าข้อมูลหนังสือที่ปรากฎข้ึนมาถูกจัดระเบียบให้ดูง่ายข้ึน และที่ สำ�คัญมีข้อมูลเพิ่มข้ึนมา 1 ฟิลด์โดยอัตโนมัติ ชื่อว่า ฟิลด์ _id ทำ�หน้าท่ีบอกความแตกต่าง ของขอ้ มูลแต่ละชุดท่อี ยใู่ น books คลา้ ยกบั Primary Key ในระบบฐานข้อมูล RDBMS นนั่ เอง 4. ต่อมา ผเู้ ขียนเพิ่มขอ้ มลู หนังสือเข้าไปอีก 2 เล่ม ดังสครปิ ต์ตอ่ ไปน้ี Mongo Command Prompt 1 db.books.insert({ 2 ‘isbn’: ‘2222’, 3 ‘title’: ‘Using Express’, 4 ‘price’: 279 5 }); 6 7 db.books.insert({ 8 ‘isbn’: ‘3333’, 9 ‘title’: ‘Using Node.js’, 10 ‘price’: 350 11 }); รูปท ่ี 7-22 แสดงขอ้ มลู หนงั สอื 3 เลม่ ทอ่ี ยใู่ น books จากรูปที่ 7-22 ผู้เขียนพิมพ์คำ�ส่ัง db.books.find().pretty(); เพ่ือแสดงข้อมูลท้ังหมด เท่าทีม่ ีอยูใ่ นปัจจบุ นั นัน่ คือ 3 เลม่ สรปุ ท้ายบท การท�ำ งานกบั ระบบฐานขอ้ มลู Mongo ทนี่ �ำ เสนอในบทนี้ เปน็ เพยี งการท�ำ งาน ในขั้นตน้ ทตี่ อ้ งทราบ ยังไม่มีการใชง้ านรว่ มกับ Node + Express ใดๆ ทั้งส้นิ 144