java

สงวนลขิ สทิ ธต์ิ ามพระราชบญั ญตั ลิ ขิ สทิ ธ์ิ พ.ศ. 2537 โดยบรษิ ทั สวสั ดี ไอที จ�ำ กดั   หา้ มลอกเลยี นแบบ ไมว่ า่ สว่ นใดสว่ นหนง่ึ ของหนงั สอื เลม่ น ้ี ไมว่ า่ ในรปู แบบใด  นอกจากจะไดร้ บั อนญุ าตเปน็ ลายลกั ษณอ์ กั ษร รปู ภาพ เครอ่ื งหมายการคา้ ทอ่ี า้ งถงึ เปน็ ของบรษิ ทั นน้ั ๆ ขอ้ มลู บรรณานกุ รม จดั พมิ พโ์ ดย ศภุ ชัย สมพานชิ บรษิ ทั สวสั ดี ไอที จ�ำ กดั พัฒนาเวบ็ แอพดว้ ย JavaScript แบบ MEAN Stack 99/118 ถนนกาญจนาภเิ ษก  010/1 บรษิ ทั สวสั ดี ไอที จ�ำ กดั -- กรงุ เทพฯ : สงิ หาคม 2561 แขวงรามอนิ ทรา เขตคนั นายาว กรงุ เทพมหานคร 10230 1. พฒั นาเวบ็ แอพด้วย JavaScript แบบ MEAN โทรศพั ท ์ 0-2171-5383 Stack โทรสาร 0-2171-5384 (คูม่ ือคอมพวิ เตอร์) E-mail : [email protected] ชอ่ื เรื่อง l จ�ำ นวน 296 หน้า Website : www.sawasdeeit.com กองบรรณาธกิ าร โรงพมิ พ์ บรรณาธิการ ธารี บางแก้ว บรษิ ทั พี อาร์ คลั เลอรพ์ รน้ิ ท์ จ�ำ กดั นักเขยี น ศภุ ชัย สมพานิช 496 ซอยโชคชยั จงจ�ำ เรญิ ถนนสาธปุ ระดษิ ฐ์ จัดรปู เล่ม กชพร นวสำ�เภาเงิน แขวงบางโพงพาง เขตยานนาวา กรงุ เทพมหานคร 10120 จดั จำ� หนา่ ยโดย โทร. 0-2806-6344 / โทรสาร 0-2806-6344 บรษิ ัท ซเี อด็ ยเู คช่นั จำ�กดั (มหาชน) รหสั : 885-916-5001-19-1 1858/87-90 ถนนบางนา-ตราด เขตบางนา ราคา 229 บาท กรงุ เทพมหานคร 10260 โทรศัพท์ 0-2826-8000 / โทรสาร 0-2826-8356-9 Website : www.se-ed.com โปรแกรม เวบ็ ไซต์ และเทคโนโลยไี ดม้ กี ารพฒั นาไปตลอดเวลาตามบรษิ ทั ของผผู้ ลติ จงึ อาจท�ำ ใหเ้ นอ้ื หาบางประการในหนงั สอื เลม่ นม้ี ี HTML คณุ สมบตั ทิ แ่ี ตกตา่ งไปบา้ ง สว่ นชอ่ื รปู ภาพ สญั ลกั ษณ์ และเครอ่ื งหมายการคา้ ตา่ งๆ ทน่ี �ำ มาแสดง เปน็ เพยี งเพอ่ื ประกอบเนอ้ื หาเทา่ นน้ั บรษิ ทั สวสั ดี ไอที จ�ำ กดั ไมไ่ ดเ้ ปน็ เจา้ ของลขิ สทิ ธแ์ิ ตอ่ ยา่ งใด หากมขี อ้ แนะน�ำ ตดิ ตอ่ ไดท้ ่ี [email protected] .Net HTML

.Net HTMLค�ำน�ำ HTML การพัฒนาเว็บแอพโดยอาศัย MEAN Stack เป็นอีก 1 แพลตฟอร์มที่กำ�ลังได้รับ ความนิยมอย่างสูง ไม่ว่าจะเป็นองค์กรธุรกิจต่างๆ หรือ Startup จุดแข็งแกร่งที่สุดของ MEAN Stack ก็คือ นักพัฒนาโปรแกรมสามารถศึกษาและเรียนรู้ภาษา JavaScript กับ TypeScript เพียงเท่านั้น โดยครอบคลุมการทำ�งานทั้งฝั่ง Client และฝั่ง Server เป้าหมายหลักของเนื้อหาในหนังสือเล่มนี้ มุ่งเน้นมาที่ Mongo, Express และ Node (ฐานของ Express) เป็นหลัก โดยมี Angular เป็นส่วนเสริม คุณผู้อ่านที่มีคำ�ถาม, ข้อติติง, ข้อเสนอแนะ รวมถึงแจ้งข้อผิดพลาดต่างๆ ของ เนอื้ หาในหนงั สอื เลม่ นี้ สามารถโพสไดท้ ีแ่ ฟนเพจของผเู้ ขยี น https://www.facebook.com/ thaivb.net/ ศุภชัย สมพานิช กรกฎาคม 2561 HTML .Net HTML

CONTENS CHAPTER 1 เตรยี มความพร้อมก่อนพฒั นา Web Apps ด้วย MEAN Stack 1 ท�ำความรู้จกั กับ JavaScript ฝั่ง Server .....................................................................................................2 การพัฒนา Web Apps ด้วย MEAN Stack.................................................................................................3 Node.js คอื อะไร..........................................................................................................................................4 การดาวน์โหลดและตดิ ต้งั Node.js.............................................................................................................5 การดาวน์โหลดและตดิ ต้งั Express.js กบั Express-generator....................................................................6 การสร้างโปรเจก็ ต์ Express ใหม่ด้วย Express-generator...........................................................................9 การทดสอบรนั โปรเจ็กต์ Express..............................................................................................................12 วธิ ีการหยดุ รันโปรเจก็ ต์ของ Express........................................................................................................14 โปรแกรมทใ่ี ช้ส�ำหรบั พฒั นา Web Apps ด้วย MEAN Stack...................................................................14 การดาวน์โหลดตวั ตดิ ต้งั โปรแกรม Sublime Text.....................................................................................14 การตดิ ตงั้ โปรแกรม Sublime Text............................................................................................................15 การเปิดโปรเจก็ ต์ Express ด้วยโปรแกรม Sublime..................................................................................15 การดาวน์โหลดและตดิ ตง้ั โปรแกรม Visual Studio Code ........................................................................16 การเปิดโปรเจก็ ต์ Express ด้วยโปรแกรม Visual Studio Code................................................................17 เปิดโปรเจก็ ต์ผ่านทาง Command Prompt โดยตรง ................................................................................18 เปิดโปรเจก็ ต์แบบปกติ ............................................................................................................................19 สรุปท้ายบท...............................................................................................................................................20 CHAPTER 2 พ้ืนฐานการใช้งาน Express 21 การสร้างโปรเจก็ ต์ใหม่แบบว่าง................................................................................................................21 การสงั่ ให้ Express หยดุ ท�ำงาน.................................................................................................................28 การล้างหน้าจอ Command Prompt ด้วยค�ำสง่ั cls..................................................................................28 การส่งข้อมลู ในรปู แบบอ่นื ๆแสดงผลในบราวเซอร์...................................................................................28 ท�ำความเข้าใจขน้ั ต้นกบั ระบบพาธ URL (Route) ใน Express.................................................................30 การก�ำหนดให้ Restart โดยอตั โนมตั ดิ ้วย nodemon................................................................................31 ท�ำความรู้จกั กับระบบ JavaScript Module................................................................................................35 สรุปท้ายบท...............................................................................................................................................38 CHAPTER 3 ท�ำงานกบั ส่วนแสดงผลดว้ ย Pug และ Static Files 39 พน้ื ฐานการแสดงผลในหน้าเวบ็ เพจด้วย HTML5.....................................................................................39 ท�ำงานกบั ไฟล์ HTML (Static Files)..........................................................................................................41 การใช้งานไฟล์ HTML โดยตรง.................................................................................................................44 การตกแต่งไฟล์ HTML5 ด้วย CSS...........................................................................................................45 พื้นฐานการสร้างส่วนแสดงผลด้วย Pug...................................................................................................50 สรปุ ท้ายบท...............................................................................................................................................56 CHAPTER 4 ท�ำความรู้จักกับเสน้ ทาง (Route) 57 พน้ื ฐานการ Redirect ไปยงั พาธอ่ืน..........................................................................................................57 การจัดโครงสร้างเส้นทาง Route .............................................................................................................60 การสร้าง Library (หรอื Module) ขนึ้ มาใช้งานเอง ..................................................................................66 การสร้างฟังก์ชนั ใน Library ของเราเอง....................................................................................................71 HTML พน้ื ฐานการรบั -ส่งพารามเิ ตอร์แบบ Query String....................................................................................72 .Net I HTML

รายละเอียดโปรเจก็ ต์ทีไ่ ด้จาก express-generator ...................................................................................80 การทดสอบโปรเจก็ ต์ท่ไี ด้จาก express-generator.....................................................................................87 สรปุ ท้ายบท...............................................................................................................................................88 CHAPTER 5 ท�ำงานกับแบบฟอร์ม 89 พื้นฐานการท�ำงานกบั ฟอร์มและการอ่านค่าโดยอาศยั body-parser........................................................89 ขั้นตอนการสร้างแบบฟอร์มในระดบั พื้นฐาน............................................................................................91 การสร้างแบบฟอร์มด้วยไฟล์ HTML5 .....................................................................................................96 การสร้างแบบฟอร์มด้วย Pug.................................................................................................................100 การใช้งาน jQuery ใน MEAN Stack ......................................................................................................108 สรปุ ท้ายบท.............................................................................................................................................114 CHAPTER 6 การพัฒนา MEAN Stack ดว้ ยโปรแกรม Visual Studio 115 การดาวน์โหลดและตดิ ตง้ั Visual Studio 2017.......................................................................................116 การก�ำหนดให้ Visual Studio แสดงไดอะลอ็ กสร้างโปรเจก็ ต์ใหม่และแสดงหมายเลข บรรทดั ในตวั เขียนโค้ด.............................................................................................................................117 การสร้างโปรเจก็ ต์ Express ใน VS 2017................................................................................................118 การทดสอบรนั โปรเจก็ ต์ Express ใน Visual Studio 2017......................................................................119 การทดสอบและหยดุ โปรเจ็กต์ Express ใน Visual Studio.....................................................................120 การแปลงโปรเจก็ ต์ Express เดมิ ให้เป็นโปรเจก็ ต์ของ Visual Studio.....................................................121 การเปิดโปรเจก็ ต์ Express ของ Visaul Studio ด้วยวธิ ีป้อน Command Line.........................................125 การจดั เกบ็ ข้อมลู ในฝั่งผู้ใช้ด้วย Cookies โดยอาศยั cookie-parser........................................................126 สรุปท้ายบท.............................................................................................................................................132 CHAPTER 7 พืน้ ฐานการใช้งานระบบฐานขอ้ มลู Mongo 133 ระบบฐานข้อมูล Mongo คอื อะไร...........................................................................................................133 การดาวน์โหลดและตดิ ต้งั ฐานข้อมูล Mongo.........................................................................................134 วธิ ีการเปิดบรกิ ารฐานข้อมลู Mongo บน Windows...............................................................................137 พนื้ ฐานการใช้งานระบบฐานข้อมูล Mongo............................................................................................138 แสดงรายการฐานข้อมูลเท่าทม่ี อี ยู่.........................................................................................................139 การสง่ั ให้ฐานข้อมูล Mongo ท�ำงาน.......................................................................................................140 การสร้างฐานข้อมลู ใน Mongo ..............................................................................................................140 การสร้าง Collection ข้นึ มาเกบ็ ข้อมลู .....................................................................................................141 วิธีการตรวจสอบฐานข้อมูลและ Collection............................................................................................141 การใส่และแสดงข้อมลู ทอ่ี ยู่ใน Collection...............................................................................................142 สรุปท้ายบท.............................................................................................................................................144 CHAPTER 8 การท�ำงานกับระบบฐานขอ้ มูล Mongo 145 การดาวน์โหลดและตดิ ต้งั ตวั จดั การฐานข้อมลู Mongo ด้วย Robo 3T.................................................145 การเชอื่ มต่อ Robo 3T เข้ากบั ระบบฐานข้อมลู Mongo.........................................................................146 การก�ำหนดรปู แบบแสดงผลใน Robo 3T...............................................................................................148 HTML การเพิ่มข้อมูล (Insert Document) ในคอลเลก็ ชนั ..................................................................................149 .Net HITI MLการลบข้อมลู (Remove Document) ออกจากคอลเลก็ ชนั ....................................................................150

CONTENS การอัพเดตหรอื แก้ไข Document (Update Document) ในคอลเลก็ ชนั ...................................................151 การเพม่ิ ข้อมูล กรณโี ครงสร้างข้อมลู แตกต่างกนั .................................................................................154 การอัพเตดข้อมลู กรณโี ครงสร้างข้อมลู แตกต่างกนั ..............................................................................155 การเลอื กดขู ้อมูลแบบมเี งอื่ นไข...............................................................................................................157 การระบุเง่อื นไขกบั ข้อมูลประเภทตวั เลข................................................................................................158 การระบเุ ง่ือนไขกบั ข้อมูลประเภทข้อความ.............................................................................................161 การก�ำหนดจ�ำนวนข้อมูลทต่ี ้องการ (limit()) และข้อมลู ท่ยี กเว้น (skip()) ..............................................162 การสร้างคอลเลก็ ชนั ใหม่ .......................................................................................................................164 การลบคอลเล็กชนั ที่มีอยู่........................................................................................................................164 การ Backup และ Restore ฐานข้อมลู Mongo .....................................................................................165 สรปุ ท้ายบท.............................................................................................................................................166 CHAPTER 9 พื้นฐานการใช้งาน Express ร่วมกับฐานขอ้ มูล Mongo 167 การเชือ่ มต่อกบั ฐานข้อมูล Mongo ด้วย Mongoose..............................................................................167 การเพม่ิ Mongoose เพ่อื เชือ่ มต่อกับฐานข้อมลู Mongo ใน Visual Studio...........................................169 การตกแต่งส่วนแสดงผล Pug ด้วย CSS ...............................................................................................178 พ้ืนฐานการสร้างเมนูในส่วนแสดงผล Pug.............................................................................................181 การแยกส่วนแสดงผลย่อย (Partial View) ใน Pug..................................................................................186 สรปุ ท้ายบท.............................................................................................................................................188 CHAPTER 10 การเพม่ิ , แกไ้ ข,  ลบ,  ค้นหาและแสดงข้อมูล (CRUD) 189 การแสดงข้อมูล.......................................................................................................................................189 การเพ่ิมข้อมลู ..........................................................................................................................................191 การแก้ไขข้อมลู ........................................................................................................................................191 การลบข้อมลู ...........................................................................................................................................192 เทคนคิ การจดั สคริปต์ในไฟล์ Pug ด้วย Visual Studio...........................................................................193 โครงสร้างโปรเจก็ ต์ CRUD......................................................................................................................194 สรปุ ท้ายบท.............................................................................................................................................210 CHAPTER 11 เตรียมความพรอ้ มกอ่ นเข้าสโู่ ลกของ Angular 211 Angular คอื อะไร......................................................................................................................................211 ท�ำไมต้องสร้างส่วนแสดงผลด้วย Angular..............................................................................................212 การติดต้ังส่วน Extension ให้กบั Visual Studio Code............................................................................213 การสร้างโปรเจก็ ต์ Angular ด้วย Angular CLI........................................................................................214 การสร้างโปรเจก็ ต์ Angular ด้วย Angular CLI........................................................................................215 การรันและหยดุ โปรเจก็ ต์ Angular ท่ไี ด้จาก Angular CLI.......................................................................217 สรปุ ท้ายบท.............................................................................................................................................218 CHAPTER 12 พนื้ ฐานการใชง้ าน Angular 219 รายละเอยี ดข้นั ต้นของ Angular..............................................................................................................219 หลักการสร้างส่วนแสดงผลย่อยโดยอาศยั คอมโปเนนท์........................................................................221 HTML ในโลกของ Angular......................................................................................................................222 HTML วธิ ีการเรยี กใช้คอมโปเนนท์.....................................................................................................................224 .Net III HTML

การเพ่มิ ส่วนแสดงผล (หรอื คอมโปเนนท์) ใหม่......................................................................................225 การสง่ั ให้คอมโปเนนท์ท�ำงาน.................................................................................................................228 ท�ำความรู้จกั กับคลาสในคอมโปเนนท์....................................................................................................231 วิธกี ารเกบ็ โปรเจ็กต์ Angular ทไ่ี ด้มาจาก Angular CLI..........................................................................235 การสร้างแบบฟอร์มและผูกตดิ ข้อมลู (Form & Data Binding)...............................................................236 สรุปท้ายบท.............................................................................................................................................240 CHAPTER 13 การพฒั นา Web Apps แบบ MEAN Stack ข้นั ต้น 241 เร่ิมต้น Setup โปรเจก็ ต์ MEAN Stack....................................................................................................241 การสัง่ รนั โปรเจก็ ต์ MEAN Stack............................................................................................................245 สคริปต์ express ของฝั่ง Server..............................................................................................................246 การสร้างเซอร์วสิ (Service) ใน Angular...................................................................................................248 สรปุ ท้ายบท.............................................................................................................................................258 CHAPTER 14 การใชง้ าน Angular ในโลกของ .NET Core 259 หน้าทข่ี อง Angular ใน ASP.NET Core MVC..........................................................................................259 การสร้างโปรเจก็ ต์ ASP.NET Core MVC ท่มี กี ารใช้งาน Angular .........................................................260 ท�ำความรู้จกั กบั โครงสร้างโปรเจก็ ต์ ASP.NET Core MVC ท่มี กี ารใช้งาน Angular...............................264 Controllers ใน ASP.NET Core MVC.......................................................................................................266 ส่วนแสดงผล (View) ใน ASP.NET Core MVC ท่มี กี ารใช้งาน Angular.................................................266 โครงสร้างโปรเจก็ ต์ Angular ใน ASP.NET Core MVC...........................................................................268 คอมโปเนนท์ของ Angular ใน ASP.NET Core MVC...............................................................................268 การจัดการเส้นทาง (Route) ของ Angular...............................................................................................273 พน้ื ฐานการท�ำงานกบั เหตกุ ารณ์ในคอมโปเนนท์ของ Angular...............................................................275 การท�ำงานร่วมกนั ระหว่างคอนโทรลเลอร์ของ ASP.NET Core MVC กับคอมโปเนนท์ของ Angular..................................................................................................................276 สรุปท้ายบท.............................................................................................................................................284 CHAPTER 15 การสรา้ งสว่ นแสดงผลแสดงในหนา้ จอทกุ ขนาด (Responsive Design) 285 หลกั การท�ำงานพน้ื ฐานของ Bootstrap .................................................................................................285 การติดตง้ั Bootstrap ในโปรเจก็ ต์แบบ Mongo, Express และ Node....................................................286 สรุปท้ายบท.............................................................................................................................................290 HTML .Net HIXTML

1Java script CHAPTER เตรยี มความพรอ้ มกอ่ นพฒั นา Web Apps ดว้ ย MEAN Stack ในปจั จบุ นั การพฒั นาWebApps แบบMEANStack กำ� ลงั ไดร้ บั ความนยิ มเปน็ อยา่ งมาก เพราะ ว่าสามารถพัฒนาโปรเจ็กต์ทั้งหมดโดยใช้ความรู้เพียงภาษาเดียว น่ันคือ ภาษา JavaScript ครอบคลุมการทำ� งานทงั้ ฝั่งผใู้ ช้งาน (Client) และฝงั่ ผ้ใู หบ้ ริการ (Server) ภาษา JavaScript มีความส�ำคัญเป็นอย่างมาก เปน็ ภาษาทเ่ี ราควรจะทราบ และต้อง เรยี นร้เู มื่อเข้ามาสโู่ ลกของ Web Apps ผูเ้ ขียนมขี อ้ แนะน�ำในขน้ั ตน้ ก่อนเลยวา่ ผ้อู า่ นไม่ตอ้ ง กลวั หรือมีข้อกังวลใดๆสำ� หรบั การเรียนรภู้ าษา JavaScript ในยคุ ปจั จุบนั วธิ ีการนำ� เสนอเน้ือหาของผูเ้ ขียน ม่งุ เนน้ ไปท่กี ารศกึ ษาและทำ� ความเขา้ ใจในแตล่ ะชิ้น ส่วน (Dependencies) ง่ายตอ่ การศกึ ษาส�ำหรับผเู้ ริม่ ตน้ โดยใช้ตวั อย่างแสดงให้เหน็ ผลลพั ธ์ ว่า เมื่อท�ำแบบนีผ้ ลทีไ่ ดค้ ืออะไร ครบทกุ หวั ข้อเพื่อใหท้ ราบว่าเราก�ำลังท�ำอะไรอย ู่ เน้ือหาที่นำ� เสนอในหนงั สอื เลม่ นี้ ประกอบด้วยโครงสร้าง 2 ส่วนหลกั ๆดงั นี้ 1. พัฒนาด้วยวิธกี ารป้อน Command Line เป็นวิธีที่มากับ Node โดยตรง กลา่ วคือ เราเปน็ ผูส้ ร้างทกุ อย่างในโปรเจก็ ตท์ ัง้ หมดต้งั แต่เรม่ิ ตน้ จนกลายเปน็ Web Apps 2. อาศยั โปรแกรมสำ�เรจ็ รูปช่วยในการท�ำ งาน ในปัจจุบนั มีโปรแกรมที่ชว่ ยใหเ้ ราสร้าง โปรเจ็กต์ของ MEAN Stack มากมาย ผเู้ ขียนเลอื กนำ�เสนอโดยใช้โปรแกรม Visual Studio แมว้ า่ โปรเจก็ ตข์ องแตล่ ะคนจะมที มี่ าแตกตา่ งกนั แตม่ โี ครงสรา้ งโปรเจก็ ตเ์ ปน็ มาตรฐาน เดียวกนั ทั้งหมด มขี ้อแตกต่างเพยี งแคว่ ่าตัวโปรแกรมชว่ ยใหท้ ำ� งานเร็วขึ้นเท่านน้ั .Net HTML HTML

ท�ำ ความรู้จกั กับ JavaScript ฝั่ง Server โดยปกติแล้วภาษา JavaScript ท่ีเราคุ้นเคยกันมาอย่างยาวนานน้ันท�ำงานอยู่ฝั่ง บราวเซอร์ (ฝงั่ ผูใ้ ชง้ าน - Client) แต่ JavaScript ทเ่ี รากำ� ลงั จะใชพ้ ฒั นา Web Apps บน แพลตฟอรม์ ท่เี รยี กว่า “MEAN Stack” เป็นภาษา JavaScript ท่ที �ำงานฝ่งั Server เพอ่ื ให้ ผูอ้ า่ นท�ำความรู้จกั กบั JavaScript ท่ีทำ� งานบนฝั่ง Server ให้เรว็ ทส่ี ดุ ขอยกตวั อยา่ งประกอบ ดังตอ่ ไปน้ี สมมตวิ า่ ผเู้ ขยี นตอ้ งการใชง้ าน jQuery ในไฟล์ HTML5 ผเู้ ขยี นไมส่ นใจวา่ ไฟลน์ มี้ หี นา้ ท่ี อะไร มีผลการทำ� งานอย่างไร ขอใหด้ ลู �ำดับขั้นตอนการเรียกใชง้ าน jQuery เปน็ หลกั เพราะ วา่ jQuery เปน็ JavaScript Library ประเภทหน่ึงเชน่ กนั ดังรูปท่ี 1-1 รปู ที ่ 1-1 แสดงการเรยี กใช้ jQuery Library ในไฟล์ HTML5 จากรูปท่ี 1-1 กอ่ นทีจ่ ะใช้ค�ำสั่งหรอื ฟังก์ชันใดๆกต็ ามของ jQuery จะตอ้ งอา้ งองิ กอ่ น เสมอโดยอาศยั อลิ เี มนต์<script>…</script> ของภาษา HTML5 เพอ่ื ใหส้ ามารถเรยี กใชฟ้ งั กช์ นั ตา่ งๆทอ่ี ยใู่ น jQuery ในหน้าเว็บเพจได้ ส่วนจะเรยี กใช้งานอะไรก็แลว้ แต่ความต้องการเรา กลา่ วโดยสรุปไดว้ า่ มีการทำ� งาน 2 ขนั้ ตอนยอ่ ย ดงั นี้ 1. อ้างอิง JavaScript Library กอ่ น ในกรณีน้ี คอื jQuery 2. เรยี กใชฟ้ ังกช์ ันตา่ งๆที่มีอยู่ 2

CHAPTER 1 เตรยี มความพร้อมกอ่ นพัฒนา Web Apps ด้วย MEAN Stack ผเู้ ขียนขา้ มมาท่ีการใชง้ าน JavaScript ฝง่ั Server กนั บา้ ง ส�ำหรบั ผู้อา่ นท่ไี ม่เคยศกึ ษา express มากอ่ น ยอ่ มทจี่ ะไมเ่ ขา้ ใจสครปิ ตต์ อ่ ไปนอ้ี ยา่ งแนน่ อน จดุ ประสงคข์ องผเู้ ขยี นตอ้ งการ ให้ผอู้ า่ นเหน็ ข้นั ตอนเท่านั้น ดังรูปท่ี 1-2 รูปท่ ี 1-2 กรณีใช้ JavaScript ฝง่ั Server จากรูปที่ 1-2 เหน็ ไดว้ ่าขนั้ ตอนการใชง้ าน JavaScript ฝงั่ Server เหมอื นกับฝั่ง Client กลา่ วคอื ตอ้ งอา้ งองิ ดว้ ยค�ำสัง่ var เพ่อื สร้างตัวแปรขึน้ มาก่อน แลว้ คอ่ ยนำ� ตวั แปรไปใช้งานใน ภายหลงั มขี อ้ แตกตา่ งท่ีส�ำคัญทีส่ ดุ คือ ไวยากรณห์ รือวิธีการเขียน ณ เวลานเี้ รายงั ไมท่ ราบความหมาย ไมท่ ราบหนา้ ท่ี ยงั ไมร่ ลู้ ำ� ดบั การทำ� งานของสครปิ ต์ ดังกล่าว เขียนไปเพื่ออะไร ท�ำไมต้องท�ำแบบนี้ เพราะว่าผู้เขียนยังไม่สนใจรายละเอียดใดๆ ทงั้ ส้นิ ขอให้ยึดถอื หลกั การน้ใี หแ้ มน่ ยำ� เป็นลำ� ดบั แรกก่อนเทา่ นัน้ การพฒั นา Web Apps ด้วย MEAN Stack การพัฒนา Web Apps ด้วย MEAN Stack ประกอบด้วย 4 ส่วนเรียงตามตัวอกั ษร เปน็ การพัฒนาโดยใชไ้ วยากรณภ์ าษา JavaScript เพียงภาษาเดียวท้ังระบบ ประกอบไปดว้ ย ÂÂ M มาจาก Mongo รบั ผดิ ชอบดา้ นระบบฐานขอ้ มลู ÂÂ E มาจาก Express คอื JavaScript Framework ทำ�งานบน Node เราสรา้ ง Web Apps ได้จากฟงั กช์ ันตา่ งๆของ Express ÂÂ A มาจาก Angular คือ JavaScript Library ทำ�งานฝั่ง Client (ฝ่ังบราวเซอร์) ชว่ ยในการทำ�งานด้านสว่ นแสดงผล ÂÂ N มาจาก Node คือ แพลตฟอร์มที่ทำ�ให้สามารถใช้งาน JavaScript บนฝ่ัง Server ได้ ScJraivpat 3

เราสามารถแบ่งสว่ นประกอบทั้ง 4 ส่วน ออกเป็น 2 กลมุ่ ดังนี้ รูปท ี่ 1-3 แสดงแบบจ�ำ ลองหนา้ ทขี่ องทง้ั 4 ส่วน จากรปู ที่ 1-3 ทฝี่ ง่ั Client แมว้ า่ จะระบเุ พยี งแค่ Angular กบั HTML แตย่ งั สามารถใชง้ าน JavaScript Library หรอื JavaScript Framework อนื่ ๆไดด้ ว้ ย เชน่ jQuery, Bootstrap เปน็ ตน้ ในทางกลบั กนั ฝง่ั Server ตวั ฐานขอ้ มลู MongoDB สามารถเปลย่ี นไปใชฐ้ านขอ้ มลู อนื่ ๆ ไดอ้ ีกด้วย เช่น SQL Server, MySQL เปน็ ตน้ แนวทางการนำ� เสนอในหนังสือเลม่ นเ้ี ป็นการใชง้ าน 3 ส่วนหลัก ดงั น้ี 1. M (MongoDB) รบั ผดิ ชอบงานด้านฐานข้อมูล 2. E (Express) รับผิดชอบงานฝั่ง Server และ Client บางสว่ น 3. N (Node) ไม่ได้ใชง้ านโดยตรง ทำ�ผ่านทาง Express แม้ว่าผู้เขียนจะเน้นมาที่ 3 ส่วนหลัก แต่ก็เพียงพอที่จะให้ผู้อ่านใช้เป็นพื้นฐานปูทาง ไปส่กู ารใช้งานในระดบั ต่อไป Node.js คอื อะไร ในปจั จบุ นั นกั พฒั นาสาย Web Apps มกี ารใชง้ าน JavaScript Library หรอื JavaScript Framework ต่างๆมากมาย เช่น Bootstrap, Angular เป็นต้น น�ำเข้ามาใช้งานภายใน โปรเจ็กต์ของเราเพือ่ ชว่ ยงานในด้านต่างๆเชน่ งานดา้ นการออกแบบหนา้ เวบ็ เพจ หรือชว่ ยใน การทำ� งานรว่ มกับสคริปต์ฝั่ง Server เปน็ ตน้ Node.js เปน็ แพลตฟอรม์ หนงึ่ ทถี่ กู สรา้ งขนึ้ มาโดยมหี ลกั การทำ� งานทวี่ า่ เปน็ การใชง้ าน JavaScript ฝ่ัง Server ซงึ่ มคี วามแตกต่างจาก JavaScript แบบปกติ ท่ีทำ� งานฝั่ง Client (ทำ� งานฝ่งั ผู้ใช้งาน) ขอบเขตเน้ือหาของหนังสือเล่มน้ีเราไม่ได้ใช้ประโยชน์ของ Node.js โดยตรง แต่ใช้ ผลผลติ ท่ไี ดจ้ าก Node.js เข้ามาช่วยเรียกใช้ JavaScript Library หรอื JavaScript Framework ตา่ งๆท่มี อี ยู่อย่างมากมายไดส้ ะดวกยิง่ ขนึ้ 4

CHAPTER 1 เตรียมความพร้อมก่อนพฒั นา Web Apps ด้วย MEAN Stack การดาวน์โหลดและตดิ ต้งั Node.js 1. ใหไ้ ปทเี่ วบ็ ไซต์ https://nodejs.org/en/ เพอ่ื ดาวนโ์ หลดตวั ตดิ ตง้ั Node.js เวอรช์ นั ลา่ สุดกอ่ น ขอใหเ้ ลอื กตวั ติดตั้งให้ตรงกบั ระบบปฏิบัติการท่ีเราใช้งาน ในกรณีน้ผี ู้เขียนใช้ Windows 64 บิต จงึ เลือกตดิ ต้งั แบบ x64 และสามารถดาวน์โหลด เวอร์ชนั อ่ืนโดยการคลิกท่ี Other Downloads รปู ที ่ 1-4 แสดงการดาวนโ์ หลด Node.js เวอรช์ นั Current จากรูปท่ี 1-4 มีข้อแนะน�ำเพ่ิมเติมว่าขอให้เลือกดาวน์โหลดเฉพาะเวอร์ชัน Stable (เวอรช์ นั เสถียร) เทา่ น้ัน 2. ตอ่ มา ใหต้ ดิ ตงั้ Node.js โดยใช้ค่าเริม่ ต้นทมี่ ากบั ตวั ตดิ ตงั้ ทงั้ หมด ดังรูปที่ 1-5 ScJraivpat 5

รปู ที ่ 1-5 แสดงการตดิ ตงั้ Node.js 3. ต่อมา ให้เปิด Command Prompt ข้ึนมา ป้อนคำ�ส่ังต่อไปนี้เพื่อตรวจสอบว่า การตดิ ตงั้ Node.js สำ�เร็จหรือไม่ Command Prompt 1 node --version รูปท่ี 1-6 แสดงการตรวจสอบเวอร์ชัน Node.js จากรปู ที่ 1-6 พบว่าผเู้ ขียนติดตั้ง Node.js เสร็จสมบูรณ์แล้ว OTE สว่ นพาธทเ่ี หน็ (C:\\Users\\Thaivb>) ใน Command Prompt เปน็ ไปตามชื่อเครื่องที่ตงั้ ขน้ึ มาในขณะ ตดิ ตัง้ Windows ไม่จ�ำ เปน็ ตอ้ งเหมือนกับเครื่องของผู้เขยี น การดาวน์โหลดและติดตง้ั Express.js กบั Express-generator จดุ เริม่ ตน้ ในการพัฒนา Web Apps บนแพลตฟอร์ม MEAN Stack อาศัยค�ำสงั่ ของ Node.js ด้วยวธิ กี ารป้อนค�ำสงั่ ในหนา้ ตา่ ง Command Prompt โดยตรง เป็นคำ� สัง่ ท่ขี ้ึนต้น ด้วยคำ� ว่า npm 6

CHAPTER 1 เตรียมความพรอ้ มกอ่ นพัฒนา Web Apps ดว้ ย MEAN Stack ค�ำสั่ง npm (ยอ่ มาจากคำ� วา่ Node Package Manager) ทำ� หน้าที่ดาวนโ์ หลด และ ติดตงั้ ช้นิ ส่วนต่างๆ(เรยี กวา่ Dependencies) ทตี่ ้องการใชง้ านเขา้ มาในโปรเจ็กตข์ องเรา ในขน้ั ตน้ น้ี ต้องดาวน์โหลดและติดต้ังอยา่ งนอ้ ย 2 รายการ ดังน้ี 1. Express (หรอื Express.js) เป็น JavaScript Framework ทที่ ำ�งานฝ่งั Server รว่ ม กับ Node 2. Express-generator เปน็ ตวั ช่วยสร้างโปรเจก็ ต์ใหเ้ ราเรม่ิ ต้นพัฒนา Web Apps บน MEAN Stack ได้งา่ ยและรวดเร็วยิง่ ขึน้ ผเู้ ขียนเร่ิมตน้ ท่กี ารดาวน์โหลดและติดตง้ั Express.js กอ่ น มขี ั้นตอนดงั นี้ 1. ให้เปิด Command Prompt ข้ึนมา พิมพ์คำ�ส่ังต่อไปนี้แล้วกดปุ่ม Enter เพ่ือ ดาวน์โหลดและติดตั้ง Express เวอร์ชันล่าสุดเท่าท่ีมีอยู่ลงในเคร่ือง โดยต้องระบุ พารามิเตอร์ -g ดว้ ย ดังรูปที่ 1-7 Command Prompt 1 npm install -g express รปู ที่ 1-7 ป้อนคำ�สั่งเพื่อดาวน์โหลดและติดต้ัง Express จากรูปที่ 1-7 เมื่อ Command Prompt ขน้ึ บรรทัดใหม่ หมายความว่าการดาวนโ์ หลด และตดิ ตงั้ เสรจ็ สมบรู ณแ์ ล้ว ดงั รูปที่ 1-8 รูปท ่ี 1-8 กรณีดาวน์โหลดและติดตั้ง Express สมบูรณแ์ ลว้ จากรปู ท่ี 1-8 ใหร้ อการดาวน์โหลดและติดตั้ง Express จนขึ้น Command Prompt บรรทดั ใหม่ ถอื วา่ ตดิ ตง้ั เสร็จสมบูรณพ์ รอ้ มใชง้ านแล้ว ScJraivpat 7

2. การดาวน์โหลด Express ที่มีการ ติดต้ังด้วยพารามิเตอร์ -g จะถูก เก็บไว้ที่พาธ C:\\Users\\******\\ AppData\\Roaming\\npm\\node_ modules\\express ดังรปู ที่ 1-9 รปู ที ่ 1-9 แสดงพาธทใ่ี ชจ้ ดั เกบ็ Express 3. ตอ่ มา เปน็ ขน้ั ตอนการดาวนโ์ หลดและตดิ ตง้ั ตวั Express-generator ทำ�หนา้ ทช่ี ว่ ยสรา้ ง โปรเจก็ ต์ Express ใหก้ บั เรา ใหพ้ มิ พค์ ำ�สง่ั ตอ่ ไปนแ้ี ลว้ กดปมุ่ Enter ดงั รปู ท่ี 1-10 Command Prompt 1 npm install -g express-generator รปู ท่ี 1-10 แสดงการตดิ ตงั้ Express-generator เสรจ็ สมบรู ณแ์ ลว้ จากรูปที่ 1-10 ถา้ Command Prompt ขนึ้ บรรทดั ใหม่ แสดงวา่ การดาวน์โหลดและ ตดิ ต้งั express-generator เสร็จสมบรู ณแ์ ล้ว ถือวา่ เครือ่ งของเราพร้อมสรา้ งโปรเจ็กต์ Express ในขนั้ ต้นได้แล้ว 8

CHAPTER 1 เตรียมความพรอ้ มกอ่ นพฒั นา Web Apps ดว้ ย MEAN Stack การสร้างโปรเจก็ ต์ Express ใหม่ดว้ ย Express-generator หลังจากท่ดี าวน์โหลดและติดตั้ง express และ express-generator เสรจ็ สมบูรณแ์ ลว้ เนื้อหาล�ำดับแรกทตี่ ้องทราบกอ่ นเลยมี 2 ส่วน ดังนี้ 1. วิธกี ารสรา้ งโปรเจก็ ต์ express 2. วธิ กี ารทดสอบโปรเจก็ ตข์ องเรา ตวั อยา่ งโปรเจก็ ต์ Express ของผเู้ ขยี นจะเกบ็ ไวท้ พี่ าธ E:\\Projects สว่ นของผอู้ า่ นจะเกบ็ ไวท้ พ่ี าธใดก็ได้ตามทีต่ อ้ งการ ให้ป้อนคำ� สง่ั Command Prompt ตามพาธของผอู้ ่านเป็นหลัก ขนั้ ตอนการสรา้ งโปรเจ็กต์ Express มีดงั น้ี 1. ให้เปดิ Command Prompt ไปที่พาธ E:\\Projects กอ่ น (หรอื พาธตามท่ตี ้องการ) ในกรณนี ี้ คือ hh คำ�สั่ง E: หมายถงึ ใหไ้ ปทีไ่ ดรฟ์ E: กอ่ น hh คำ�สั่ง cd Projects หมายถึง ให้ Command Prompt เข้าไปทำ�งานในพาธ E:\\Projects hh ค�ำ สง่ั express HeloWorld - -view=pug หมายถึง สรา้ งโปรเจก็ ต์ Express ที่ ช่ือวา่ HeloWorld โดยใชส้ ว่ นแสดงผลแบบ pug จากนัน้ พิมพ์คำ� สงั่ express HeloWorld แล้วกดปุ่ม Enter เพ่อื สรา้ งโปรเจก็ ต์ทช่ี ื่อว่า HeloWorld เกบ็ ไวใ้ นโฟลเดอร์ยอ่ ยท่ีช่อื วา่ HeloWorld ในพาธ E:\\Projects Command Prompt 1 C:\\Users\\Thaivb>E: 2 E:\\>cd Projects 3 E:\\Projects>express HelloWorld - -view=pug ScJraivpat 9

รูปท ่ี 1-11 แสดงการสรา้ งโปรเจก็ ตท์ ชี่ อื่ วา่ HelloWorld จากรูปท่ี 1-11 ถ้าค�ำสั่ง Command Prompt ข้ึนบรรทัดใหม่ แสดงว่าการสร้าง โปรเจก็ ต์ Express ในขัน้ ต้นเสร็จแลว้ 2. ต่อมา ให้ลองไปทโ่ี ฟลเดอรจ์ ัดเก็บโปรเจก็ ต์ express ของเรา ในกรณนี ้คี อื พาธ E:\\ Projects\\HeloWorld พบวา่ จะมรี ายการไฟล์ต่างๆดังรูปที่ 1-12 รปู ที ่ 1-12 แสดงรายการไฟล์ในโฟลเดอร์ HelloWorld 10

CHAPTER 1 เตรียมความพร้อมก่อนพัฒนา Web Apps ดว้ ย MEAN Stack จากรปู ท่ี 1-12 ณ ตอนน้ีเรายงั ไม่ทราบว่าแตล่ ะโฟลเดอร์มีไฟลอ์ ะไรเกบ็ อยบู่ ้าง และ แตล่ ะไฟลท์ ำ� หนา้ ทอ่ี ะไร ในขนั้ ตน้ นผ้ี เู้ ขยี นยงั ไมส่ นใจการทำ� งานของสครปิ ตใ์ นไฟลใ์ ดๆทง้ั สน้ิ ต้องการทดสอบรันโปรเจก็ ต์ HeloWorld ให้ไดก้ ่อนวา่ มหี น้าตา มกี ารทำ� งานอยา่ งไรเทา่ นั้น 3. ต่อมา เพอ่ื ใหโ้ ปรเจก็ ต์ express ทไี่ ดม้ าสามารถทดสอบรนั โปรเจก็ ต์ได้ ขอให้พมิ พ์ คำ�สั่ง ดงั นี้ hh คำ�ส่ัง cd HeloWorld เข้าไปในโฟลเดอร์โปรเจ็กต์ HeloWorld ของเรากอ่ น hh พิมพ์คำ�สั่ง npm instal เพื่อดาวน์โหลดและติดตั้งรายการช้ินส่วนต่างๆให้กับ โปรเจ็กต์ HeloWorld เพือ่ ใหส้ ามารถทำ�งานได้ ดังรูปท่ี 1-13 Command Prompt 1 E:\\Projects>cd HelloWorld 2 E:\\Projects\\HelloWorld>npm install รูปท ่ี 1-13 แสดงการดาวนโ์ หลดรายการไฟลเ์ พม่ิ เตมิ ใหก้ บั โปรเจก็ ต์ HelloWorld ณ ตอนนเ้ี รายงั คงไม่สนใจรายการไฟล์ทถ่ี ูกดาวนโ์ หลดมาวา่ แต่ละไฟลท์ ำ� หนา้ ทอี่ ะไร กนั บา้ ง 4. ให้ไปดูท่ีโฟลเดอร์โปรเจ็กต์ HelloWorld อีกครั้ง พบว่ามีโฟลเดอร์ท่ีช่ือว่า node_ modules เพม่ิ เตมิ ขน้ึ มา เมอ่ื เขา้ ไปดดู า้ นในพบวา่ มรี ายการโฟลเดอรแ์ ละไฟลต์ า่ งๆ มากมาย ดงั รปู ที่ 1-14 ScJraivpat 11

รปู ที่ 1-14 รายการไฟลท์ ถ่ี กู ดาวนโ์ หลดเพมิ่ เตมิ ใหก้ บั โปรเจก็ ต์ HelloWorld ณ จุดนี้ถอื ว่า Web Apps แรกของเราทช่ี ื่อวา่ HeloWorld พร้อมทำ� งานแล้ว โดยที่เรา ยงั ไม่ทราบเลยวา่ ในโปรเจ็กตม์ ไี ฟล์อะไรบา้ ง มีหลกั การทำ� งานอยา่ งไร การทดสอบรนั โปรเจก็ ต์ Express จากทผี่ เู้ ขยี นกลา่ วไวใ้ นตอนตน้ ทวี่ า่ เรายงั ไมส่ นใจสครปิ ตแ์ ละหนา้ ทข่ี องแตล่ ะไฟล์ เรา ตอ้ งการรนั โปรเจ็กตท์ ี่สรา้ งขน้ึ มาให้ไดก้ ่อน มขี ้ันตอนดังน้ี 1. ท่ี Command Prompt ให้พมิ พ์คำ�สง่ั npm start แลว้ กดปมุ่ Enter เพอื่ ส่ังใหฝ้ ั่ง Node + Express ทำ�งาน ดงั รูปท่ี 1-15 Command Prompt 1 npm start รูปท่ ี 1-14 แสดงการส่งั ให้รนั Node + Express จากรปู ที่ 1-15 หนา้ จอ Command Prompt ขา้ งตน้ ถอื วา่ โปรเจก็ ต์ HeloWorld ทำ� งาน แลว้ ในระหว่างการรันโปรเจก็ ตใ์ หเ้ ปดิ หนา้ จอ Command Prompt น้ีค้างไว้ตลอดเวลา 2. วิธีการเข้าหน้าเว็บที่เกิดจากโปรเจ็กต์ HelloWorld ให้ป้อน URL ในบราวเซอร์ว่า http://localhost:3000/ โดยทต่ี วั เลข3000 หมายถงึ เลขพอรต์ Default ของExpress ผลการทำ�งานแสดงดังรูปที่ 1-16 12

CHAPTER 1 เตรียมความพร้อมกอ่ นพฒั นา Web Apps ด้วย MEAN Stack รปู ท ่ี 1-16 แสดงหนา้ ตาแรกของโปรเจ็กต์ HelloWorld จากรูปที่ 1-16 เรายังไมท่ ราบว่าเวบ็ หน้าแรกที่เห็นมาจากไฟลไ์ หน มีหลักการทำ� งาน อย่างไร แต่ร้อู ย่างหน่ึงว่าโปรเจ็กต์ HeloWorld ของเราทำ� งานได้แลว้ เป็น Web Apps ท่เี กิด มาจากการทำ� งานของ Express บน Node 3. ในขณะเขา้ เวบ็ เพจทเ่ี กดิ จากโปรเจก็ ต์ HeloWorld ขอใหย้ อ้ นกลบั ไปดทู ี่Command Prompt ท่ีเปดิ อยู่ พบวา่ มีการแจง้ ผลการทำ�งานด้วย ที่นา่ สนใจมี ดังนี้ ÂÂ คำ�ส่งั GET หมายถึง มีการรอ้ งขอไฟลด์ ้วยวิธแี บบ GET ÂÂ ระยะเวลาที่ตอบสนอง (ร้องขอไฟล์และตอบสนองกลับ) 224.698 ms ตัวเลข ยิ่งนอ้ ยยง่ิ ดี ÂÂ รายการไฟลอ์ น่ื ๆ(ถ้ามี) ทสี่ ่งใหก้ บั เครือ่ งลูกเปน็ หน้าเวบ็ เพจทเี่ ห็นในบราวเซอร์ รูปท่ ี 1-17 แสดงผลการตอบ สนองของ Express ทมี่ ตี อ่ บราวเซอร์ (ฝัง่ Client) ของเรา จากรปู ที่ 1-17 ได้ Web Apps แบบง่ายๆขนึ้ มา 1 เว็บ โดยทเี่ รายังไม่รู้จกั และใชง้ าน Express ไม่เป็นเลย เนื้อหาในหัวข้อต่อๆไปเราจะเร่ิมท�ำความรู้จักกับที่มาแต่ละช้ินส่วนว่า มหี ลักการและมีวธิ ีการอยา่ งไร ScJraivpat 13

วิธกี ารหยุดรันโปรเจ็กตข์ อง Express ที่หน้าจอ Command Prompt สามารถกดป่มุ Ctrl + C บนคยี ์บอรด์ แล้วตอบ y กด ป่มุ Enter เพื่อหยุดการทำ� งานของ express โปรแกรมที่ใช้ส�ำ หรบั พัฒนา Web Apps ดว้ ย MEAN Stack สามารถใช้ Text Editor ตวั ใดก็ไดเ้ ข้ามาท�ำหน้าทเ่ี ขยี นสครปิ ตใ์ นโปรเจ็กต์ ส�ำหรับ เน้ือหาท่ีน�ำเสนอในหนังสอื เล่มนี้ผเู้ ขยี นขอแนะนำ� 2 ตวั ดังนี้ 1. โปรแกรม Sublime 2. โปรแกรม Visual Studio Code แม้ว่าผูเ้ ขียนแนะน�ำเพียง 2 โปรแกรม แตเ่ นื้อหาที่นำ� เสนอในหนังสือเล่มน้ีสามารถใช้ งานร่วมกับ Text Editor ใดก็ได้ ผู้เขียนไมไ่ ดเ้ น้นท่ีตวั โปรแกรม แตเ่ นน้ ท่เี นือ้ หาของ MEAT Stack เป็นหลัก ตวั โปรแกรมเปน็ เพยี งเครอื่ งมอื เทา่ นน้ั การดาวน์โหลดตวั ติดตงั้ โปรแกรม Sublime Text สามารถดาวนโ์ หลดตัวโปรแกรม Sublime Text มาใช้งานไดฟ้ รที ีเ่ วบ็ ไซด์ http://www. sublimetext.com/3 ดังรูปที่ 1-18 รปู ท่ ี 1-18 แสดงการดาวนโ์ หลดตวั ตดิ ตงั้ โปรแกรม Sublime Text จากรปู ท่ี 1-18 ผเู้ ขียนใช้ระบบปฏิบตั ิการ Windows แบบ 64 บติ จงึ เลอื กตัวตดิ ตัง้ แบบ Windows 64 bit 14

CHAPTER 1 เตรียมความพรอ้ มกอ่ นพฒั นา Web Apps ดว้ ย MEAN Stack การตดิ ต้ังโปรแกรม Sublime Text หลังจากทด่ี าวน์โหลดตัวตดิ ต้ังของโปรแกรม Sublime Text มาแลว้ ก็จะเขา้ สู่ข้ันตอน การตดิ ต้งั มีข้นั ตอนดงั นี้ ให้ดับเบ้ิลคลิกไฟล์ที่ดาวน์โหลดมา เพ่ือติดตั้งโปรแกรมโดยใช้ค่าเร่ิมต้นที่มากับ ตัวตดิ ตั้งท้งั หมด ดังรูปที่ 1-19 รปู ท่ ี 1-19 แสดงการตดิ ตง้ั โปรแกรม Sublime Text การเปิดโปรเจ็กต์ Express ดว้ ยโปรแกรม Sublime การเปิดโปรเจ็กตข์ อง Express ดว้ ยโปรแกรม Sublime มีขนั้ ตอนดงั นี้ 1. ตวั โปรเจก็ ตท์ ไี่ ดจ้ ากExpress อยใู่ นลกั ษณะเปน็ รายการไฟลต์ า่ งๆเกบ็ อยใู่ นโฟลเดอร์ หลัก ให้เลอื กเมนู File > Open Folder… รปู ท ่ี 1-20 แสดงการเลอื กเมนู Open Folder… 2. ในกรณีน้ีโฟลเ์ ดอรห์ ลักของโปรเจ็กตท์ ีเ่ รากำ�ลงั จะเปดิ ชือ่ วา่ โฟลเดอร์ HeloWorld เกบ็ อยู่ท่ีพาธ E:\\Projects พบว่าตัวโปรแกรม Sublime ก็จะแสดงรายการโฟลเดอร์ และรายการไฟลท์ งั้ หมดเปน็ ลำ�ดบั ชั้นตามจรงิ ดงั รูปท่ี 1-21 ScJraivpat 15

รปู ท ี่ 1-21 รายการไฟลต์ า่ งๆของโปรเจก็ ต์ HelloWorld ในโปรแกรม Sublime การดาวน์โหลดและติดตัง้ โปรแกรม Visual Studio Code Visual Studio Code เป็น Text Editor หรอื โปรแกรมเขียนโค้ดของไมโครซอฟท์ รองรับ การเขยี นโปรแกรมได้หลายภาษา ตวั โปรแกรม Visual Studio Code รองรับการใช้งานไดท้ ้งั บน Windows, macOS และ Linux สามารถดาวนโ์ หลดมาใชง้ านไดฟ้ รี การใชง้ านงา่ ย และ มปี ระสิทธิภาพสูง เป็นอกี 1 โปรแกรมท่ไี ม่ควรพลาด 1. สามารถดาวน์โหลดและติดต้งั Visual Studio Code เวอรช์ นั ล่าสุดได้ฟรีท่ี https:// www.visualstudio.com/downloads/ ดงั รูปที่ 1-22 16

CHAPTER 1 เตรียมความพรอ้ มก่อนพัฒนา Web Apps ดว้ ย MEAN Stack รปู ท ี่ 1-22 แสดงการดาวนโ์ หลดตวั ตดิ ตงั้ Visual Studio Code จากรูปที่ 1-22 ผู้เขยี นใช้ Windows แบบ 64 บติ จึงเลอื กตดิ ตง้ั แบบ Windows x64 แบบ Stable 2. ต่อมา ให้ดับเบ้ิลคลิกไฟล์ท่ีดาวน์โหลดมา เพ่ือเริ่มต้นติดต้ัง ขอให้ใช้ค่าเร่ิมต้น ท้งั หมดทีม่ ากับตัวตดิ ตั้ง ดังรูปท่ี 1-23 รูปท ี่ 1-23 แสดงการตดิ ตง้ั Visual Studio Code เสรจ็ สมบรู ณ์ ScJraivpat 17

รูปท ี่ 1-24 แสดงสภาพแวดลอ้ มของตวั โปรแกรม Visual Studio Code การเปดิ โปรเจก็ ต์ Express ดว้ ยโปรแกรม Visual Studio Code เราจะมาลองใชโ้ ปรแกรมประเภท Text Editor เปดิ โปรเจก็ ต์ Express ของเรา เพอ่ื เรมิ่ ตน้ ศกึ ษาการเขยี นสครปิ ต์ตา่ งๆโดยท่ีผูเ้ ขยี นจะเนน้ ท่ตี วั โปรแกรม Visual Studio Code เป็นหลกั (จะใชโ้ ปรแกรมอน่ื ๆกไ็ ด้ ไมม่ ผี ลแต่อยา่ งใด) การเปดิ โปรเจ็กต์ Express ด้วยโปรแกรม Visual Studio Code สามารถท�ำได้ 2 วธิ ี ดงั นี้ เปดิ โปรเจ็กตผ์ ่านทาง Command Prompt โดยตรง เปน็ วธิ ที ผี่ เู้ ขยี นแนะนำ� ใหใ้ ชง้ าน เพราะวา่ สะดวกและรวดเรว็ เปน็ อยา่ งมาก โดยใชค้ ำ� สง่ั Command Prompt 1 Code . หลกั การท�ำงานของคำ� ส่ัง Code . ก็คือ ถา้ Command Prompt อยใู่ นพาธใด คำ� สง่ั Code . นี้ จะเปิดโปรแกรม Visual Studio Code ที่พาธน้ันใหโ้ ดยอตั โนมตั ิ รูปที่ 1-25 แสดงการป้อน ค�ำ สง่ั Code 18

CHAPTER 1 เตรียมความพร้อมกอ่ นพัฒนา Web Apps ด้วย MEAN Stack จากรูปท่ี 1-25 ณ ปัจจบุ นั Command Prompt อยูท่ ี่พาธ E:\\Projects\\HeloWorld ซึ่ง เปน็ พาธทีจ่ ดั เกบ็ โปรเจ็กต์ HeloWorld ของเรา เมอ่ื พิมพ์คำ� สัง่ Code . แลว้ กดปมุ่ Enter ผลท่ไี ด้คือ โปรแกรม Visual Studio Code เปิดโปรเจก็ ต์ HeloWorld ในโฟลเดอรป์ ัจจบุ นั ให้โดยอัตโนมตั ินัน่ เอง ดงั รปู ท่ี 1-26 รปู ท่ ี 1-26 แสดงโปรเจก็ ต์ HelloWorld ถกู เปดิ ดว้ ยโปรแกรม Visual Studio Code เปิดโปรเจ็กตแ์ บบปกติ ให้เปิดโปรแกรม Visual Studio Code ขึน้ มาก่อน จากน้ันเลอื กเมนู File > Open Folder… ใหเ้ ลอื กพาธทจ่ี ดั เกบ็ โปรเจก็ ต์ Express ในกรณนี ี้ คอื พาธ E:\\Projects\\HeloExpress ScJraivpat 19

รปู ที่ 1-27 กรณเี ปดิ โปรเจก็ ต์ HelloWorld แบบปกติ สรปุ ทา้ ยบท เนื้อหาในบทน้ีเป็นการเตรียมความพร้อมให้เคร่ืองของเราให้สามารถพัฒนา Web Apps ดว้ ย MEAN Stack ส่วนเนือ้ หาจะเร่มิ ตงั้ แตบ่ ทท่ี 2 เปน็ ต้นไปว่าสว่ น ประกอบตา่ งๆทเ่ี ราดาวนโ์ หลดมา คอื อะไร มีทม่ี าอยา่ งไร และทำ� หนา้ ที่อะไร 20

2Java script CHAPTER พนื้ ฐานการใชง้ าน Express โครงสรา้ งโปรเจก็ ตท์ ไ่ี ดม้ าจากExpress-generator เกดิ จากการประกอบกนั ของชน้ิ สว่ นหลายๆ ชิ้นเข้าด้วยกัน ถ้าผู้อ่านเป็นคนท่ีเคยพัฒนา Web Apps ด้วย Express หรือ MEAN Stack มาก่อนแลว้ จดุ เร่มิ ต้นโปรเจ็กต์ที่มาจาก Express-generator ถือเป็นการเรม่ิ ตน้ พฒั นาท่ีดี ในทางกลับกันถ้าเป็นมือใหม่ไม่เคยใช้งาน Express หรือ MEAN Stack มาก่อนเลย ผเู้ ขยี นไมแ่ นะน�ำ ใหเ้ รม่ิ ตน้ ดว้ ยExpress-generator ขอใหเ้ รม่ิ จากจดุ ทไ่ี มม่ อี ะไรเลย แลว้ คอ่ ยๆ สรา้ งชิ้นส่วนแตล่ ะชนิ้ น�ำ เขา้ มาประกอบกนั เปน็ Web Apps ในแพลตฟอรม์ ของ MEAN Stack ผู้เขียนจะกลับมาที่จุดเร่ิมต้นน่ันคือ การใช้งาน Express ร่วมกับ Node ก่อน เพื่อให้ ทำ�ความรู้จักกับช้ินส่วนแต่ละชิ้น (Dependencies) ว่ามีท่ีมาอย่างไร มีการทำ�งาน มีหน้าที่ อะไรบ้าง เป็นการเร่ิมต้นทำ�ความรู้จักกับช้ินส่วนต่างๆท่ีเราเป็นผู้ส่ังให้ดาวน์โหลดและติดต้ัง ในโปรเจก็ ตข์ องเราเอง การสร้างโปรเจ็กต์ใหมแ่ บบวา่ ง ผู้เขียนยังคงสร้างโปรเจ็กตเ์ ก็บไวท้ พี่ าธ E:\\Projects เช่นเดมิ มขี น้ั ตอนดังน้ี 1. ให้เปิด Command Prompt ขึ้นมา พิมพ์คำ�สั่งต่อไปน้ีเพ่ือไปที่พาธ E:\\Projects (หรอื พาธเกบ็ โปรเจก็ ต์ตามท่ีต้องการ) จากนน้ั เพ่ิมค�ำ สัง่ npm init เพือ่ สร้างไฟลท์ ี่ ชือ่ วา่ package.json HTML .Net HTML

ไฟล์ package.json ที่สร้างขึ้นมามีความสำ�คัญมาก ทำ�หน้าที่กำ�หนดโครงสร้าง โปรเจ็กตว์ า่ ตอ้ งมีการใชง้ านชิน้ ส่วนใดบ้าง ช้ินส่วนท่ีผู้เขยี นกลา่ วถึง เรียกวา่ dependencies Command Prompt 1 C:\\Users\\Thaivb>E: 2 E:\\>cd Projects 3 E:\\Projects>npm init รปู ท่ี 2-1 แสดงการเรม่ิ ตน้ สรา้ ง โปรเจก็ ตแ์ บบว่างๆ จากรูปท่ี 2-1 ค�ำ ถามแรกที่ตอ้ งปอ้ นก็คอื ชื่อโปรเจก็ ต์ ในกรณีน้ตี ัง้ ช่อื วา่ heloexpress ส่วนค�ำ ถามอ่ืนๆจะปอ้ นหรือไม่ปอ้ นก็ได้ ดงั รปู ที่ 2-2 รูปที่ 2-2 แสดงการสร้างไฟล์ package.json 22

CHAPTER 2 พ้นื ฐานการใช้งาน Express จากรปู ท่ี 2-2 ค�ำ ถามสดุ ทา้ ยให้ตอบ yes เพ่ือสรา้ งไฟล์ package.json ขนึ้ มา เก็บไว้ท่ี พาธ E:\\Projects สว่ นหวั ขอ้ entry point หมายถึง ไฟล์ทที่ �ำ งานเปน็ ลำ�ดบั แรกชื่อวา่ index.js 2. ตอ่ มา ใหเ้ ปดิ โปรแกรม Text Editor ทใ่ี ชง้ าน จะเปน็ โปรแกรมไหนกไ็ ดไ้ มม่ ผี ลตอ่ การ เขยี นโคด้ ใดๆทง้ั สน้ิ ในกรณนี ผ้ี เู้ ขยี นเลอื กใชโ้ ปรแกรม Visual Studio Code เปน็ หลกั ใหเ้ ลอื กเมนู File > Open Folder… เพ่อื เปดิ โปรเจ็กต์ ในโหมดแบบเปดิ ทงั้ โฟลเดอร์ ในกรณนี อ้ี ยทู่ พ่ี าธ E:\\Projects หรือพมิ พ์ค�ำ สัง่ code . ตอ่ เลยก็ได้ ดงั รปู ท่ี 2-3 รูปท ่ี 2-3 แสดงรายละเอยี ดขนั้ ตน้ ของไฟล์ package.json จากรปู ท่ี 2-3 รายละเอยี ดขน้ั ตน้ ในไฟล์ package.json บอกไวว้ า่ ตอ้ งสรา้ งไฟลท์ ช่ี อ่ื วา่ index.js ท�ำ หนา้ ทเ่ี ปน็ ไฟลแ์ รกของโปรเจก็ ต์ สว่ นขอ้ มลู อน่ื ๆเปน็ ไปตามทเ่ี ราปอ้ นในขณะสรา้ งขน้ึ มา 3. ชิน้ ส่วนล�ำ ดบั แรกทต่ี ้องการใช้งานกค็ อื Express ให้กลบั ไปที่ Command Prompt (อยใู่ นพาธ E:\\Projects) ใหพ้ มิ พค์ �ำ สงั่ ตอ่ ไปนแ้ี ลว้ กดปมุ่ Enter เพอ่ื ดาวนโ์ หลดและ ติดตงั้ Express ให้กบั โปรเจก็ ต์ปจั จุบัน พารามิเตอร์ --save หมายถึง ให้บันทึก Express และเวอร์ชันที่ดาวน์โหลดมาเก็บไว้ ในไฟล์ package.json ดว้ ย Command Prompt 1 npm install - -save express ScJraivpat 23

รูปท่ ี 2-4 แสดงการดาวน์โหลด และตดิ ตง้ั Express เสรจ็ สมบรู ณแ์ ล้ว จากรปู ที่2-4 ใหร้ อจนกระทงั่ ขน้ึ CommandPrompt บรรทดั ใหม่ ถอื วา่ การดาวนโ์ หลด และติดตั้ง Express ให้กบั โปรเจ็กตป์ จั จุบนั เสร็จสมบูรณ์แลว้ 4. ใหก้ ลบั มาดทู ไ่ี ฟล์package.json อกี ครงั้ พบวา่ ทห่ี วั ขอ้ dependencies ในกรณนี มี้ ี การระบใุ หใ้ ชง้ านExpress เวอรช์ นั ลา่ สดุ 4.xx โดยอตั โนมตั ิ(เวอรช์ นั ทเี่ ราดาวนโ์ หลด มาใช้งานเป็นไปตามชว่ งเวลาทสี่ รา้ งโปรเจ็กตข์ น้ึ มา) เป็นผลมาจากค�ำ ส่งั - -save รวมทั้งมีโฟลเดอร์ node_modules + รายการไฟล์ต่างๆอยู่ภายในเพ่ิมเข้ามาด้วย ดังรูปที่ 2-5 รูปที ่ 2-5 แสดงรายละเอยี ดของ Express เวอร์ชัน 4.xx ท่ีดาวนโ์ หลดมา 24

CHAPTER 2 พ้นื ฐานการใชง้ าน Express การบันทึกรายการ dependencies ต่างๆ(ผู้เขียนขอเรียกว่า ชิ้นส่วน) ไว้ในไฟล์ package.json มีหน้าท่พี ืน้ ฐาน 2 อย่าง ดงั นี้ ÂÂ บอกว่าโปรเจก็ ตป์ จั จุบัน ก�ำ ลังใช้งานชิน้ ส่วนอะไรบา้ ง เวอรช์ นั อะไร ÂÂ ในกรณที ่ีตอ้ งกลับมาเปดิ โปรเจก็ ตเ์ ดมิ แลว้ ตอ้ งการโหลดช้ินสว่ นเดิม หรอื ชนิ้ ส่วน อน่ื ๆเพมิ่ เตมิ หรอื มกี ารอพั เดตชน้ิ สว่ นเปน็ เวอรช์ นั ใหม่ สามารถดาวนโ์ หลดและตดิ ตงั้ หลายรายการได้ในเวลาเดยี วกนั ในขัน้ ต้นนผี้ ูเ้ ขียนใชเ้ พียง Express ตัวเดยี ว ยังไมไ่ ด้ใช้ประโยชนอ์ ืน่ ๆ 5. ตอ่ มา ให้คลิกท่ปี มุ่ เพื่อสร้างไฟลว์ ่างๆขนึ้ มา ตัง้ ชื่อวา่ index.js อยู่ในระดบั เดียวกบั ไฟล์ package.json รปู ที ่ 2-6 แสดงการสรา้ งไฟลท์ ชี่ อ่ื วา่ index.js จากรปู ท่ี 2-6 โปรเจ็กต์ปจั จบุ นั กำ�หนดใหไ้ ฟล์ index.js ทำ�งานเปน็ ล�ำ ดับแรกในไฟล์ package.json 6. จากนน้ั ใหเ้ ขียนสคริปต์ในไฟล์ index.js ดังตอ่ ไปนี้ index.js 1 var express = require(‘express’); 2 var app = express(); 3 4 app.get(‘/’, function (req, res) { 5 res.send(‘Hello Express’); 6 }); 7 8 app.listen(3000, function () { 9 console.log(‘Express running on port 3000’) 10 }); ScJraivpat 25

รปู ที่ 2-7 แสดงสครปิ ตท์ อ่ี ยูใ่ นไฟล์ index.js จากรูปที่ 2-7 การทำ�งานของสครปิ ตน์ ก้ี ็คือ แสดงขอ้ ความ Helo Express ในบราวเซอร์ เป็นหนา้ จอแรก 7. การสัง่ รนั โปรเจก็ ตน์ ้ีใหก้ ลับมาท่ี Command Prompt พมิ พค์ �ำ สง่ั ตอ่ ไปนี้ เพอ่ื สง่ั ให้ Express เร่ิมต้นท�ำ งานพร้อมให้บริการ ในกรณีนผ้ี ูเ้ ขียนก�ำ หนดให้ Express บริการ ท่ีพอรต์ 3000 Command Prompt 1 node index คำ�สงั่ node index หมายถึง สั่งให้ไฟลท์ ี่ช่อื ว่า index (.js) ทำ�งาน รูปท ่ี 2-8 แสดง Express อยู่ในสถานะพร้อมให้ บรกิ ารแลว้ 8. ทา้ ยท่สี ุด ใหเ้ ปิดบราวเซอรข์ ้ึนมา พิมพ์ URL ว่า localhost:3000 กจ็ ะได้ข้อความ Helo Express ตามทเ่ี รากำ�หนดไวใ้ นฝงั่ Express แลว้ ดังรปู ท่ี 2-9 รูปท่ี 2-9 ผลการท�ำ งานทไ่ี ด้ในบราวเซอร์ 26

CHAPTER 2 พน้ื ฐานการใชง้ าน Express อธิบายการทำ�งานของสคริปต์ 1. เร่ิมต้น ให้สร้างตัวแปรที่ช่ือว่า express (var express) ทำ�หน้าท่ีอ้างอิง Express Library (require(‘express’)) จากนั้นสร้างตัวแปรที่ช่ือว่า app ทำ�หน้าท่ีแทน express (var app = express()) index.js 1 var express = require(‘express’); 2 var app = express(); หลักการท�ำ งานพน้ื ฐานของ Express เราตอ้ งเปน็ ผกู้ �ำ หนดว่าในแต่ละเส้นทาง (Route) ตอ้ งท�ำ อะไรบา้ ง โดยปกตแิ ลว้ การเขา้ หนา้ เวบ็ ไซต์ เชน่ localhost:3000 มคี วามหมายเดยี วกบั localhost:3000/ แปลความหมายไดว้ า่ เมอื่ มกี ารรอ้ งขอไฟลท์ เ่ี วบ็ รทู (Webroot) แลว้ ใหท้ �ำ อะไร 2. ในกรณีน้ีผู้เขียนกำ�หนดไว้ว่า เมื่อมีการร้องขอแบบ get (เป็นการร้องขอไฟล์โดย ทว่ั ไป) เขา้ มาทเ่ี วบ็ รทู (หรอื พาธ /) ก�ำ หนดใหส้ ง่ ขอ้ ความ Helo Express ตอบกลบั ไป โดยอาศัยพารามเิ ตอรท์ ช่ี ่อื วา่ res ร่วมกับเมธอด send() ต่อมา กำ�หนดให้บริการท่ีพอร์ต 3000 พร้อมกับแสดงข้อความ Express running on port 3000 เพ่ือแจง้ ให้เราทราบว่า ฝั่ง Express พร้อมใหบ้ รกิ ารแลว้ index.js 1 app.get(‘/’, function (req, res) { 2 res.send(‘Hello Express’); 3 }); จากหลักการทำ�งานพ้ืนฐานของ Express ขา้ งต้น เม่ือเข้ามาขอไฟล์ท่ี localhost:3000/ กจ็ ะได้ข้อความข้างต้นแสดงผลในบราวเซอรข์ องเรา index.js 1 app.listen(3000, function () { 2 console.log(‘Express running on port 3000’) 3 }); ScJraivpat 27

การสง่ั ให้ Express หยุดท�ำ งาน ในกรณีท่ีมีการแก้ไขเขียนสครปิ ตใ์ หมเ่ พ่มิ เติม หรอื เพิ่มเติมไฟลใ์ หม่ ทกุ กรณีท่ีเกิดการ เปล่ยี นแปลงในโปรเจก็ ต์ ใหท้ �ำ ดงั น้ี ÂÂ ต้องสั่งให้ Express เดิมหยุดให้บริการก่อนด้วยการกดปุ่ม Ctrl + C ในหน้า Command Prompt ตอบ y แลว้ กดปมุ่ Enter ÂÂ แลว้ ส่ังให้ Express รนั ใหม่อีกคร้งั ดว้ ยคำ�สัง่ node index การกระทำ�ข้างต้นเกิดขึ้นเสมอบ่อยครั้ง เมื่อ โปรเจ็กต์ของเราอยู่ในขั้นตอนกำ�ลังพัฒนาอยู่ เม่ือสั่ง หยุดและรันโปรเจ็กต์ใหม่แปลความหมายได้ว่า สั่งให้ อา่ นโครงสรา้ งไฟลแ์ ละสครปิ ตใ์ หมท่ ง้ั หมดอกี ครงั้ นน่ั เอง รปู ที่ 2-10 กรณีสัง่ ให้ Express หยดุ ทำ�งาน การลา้ งหน้าจอ Command Prompt ด้วยคำ�สั่ง cls เมอ่ื ปอ้ นค�ำ สงั่ ตา่ งๆใน Command Prompt หลายๆครงั้ สง่ ผลใหห้ นา้ ตา่ ง Command Prompt เตม็ ไปดว้ ยคำ�สงั่ และขอ้ ความตา่ งๆมากมาย สามารถใชค้ ำ�สั่ง cls เข้ามาท�ำ หน้าทีล่ า้ งหน้าจอ Command Prompt ให้ว่างไดเ้ ชน่ กัน เป็นค�ำ สงั่ ท่ตี ้องใช้งานบ่อยอกี คำ�ส่ังหนึง่ เลยทเี ดียว รปู ที ่ 2-11 แสดงการลา้ งหนา้ จอ Command Prompt ดว้ ยค�ำ สงั่ cls การสง่ ขอ้ มลู ในรูปแบบอ่ืนๆแสดงผลในบราวเซอร์ สามารถสง่ ขอ้ ความและอลิ เี มนตข์ องภาษาHTML โดยตรงไดเ้ ชน่ กนั เชน่ ผเู้ ขยี นตอ้ งการ สร้างรายการข้อมูล 2 รายการ จัดให้อยู่ในรูปแบบ list โดยอาศัยอิลีเมนต์ <ul>…</ul> กับ อิลเี มนต์ <li>…</li> ของภาษา HTML5 ดงั สคริปตต์ ่อไปนี้ 28

CHAPTER 2 พื้นฐานการใชง้ าน Express index.js 1 var express = require(‘express’); 2 var app = express(); 3 4 app.get(‘/’, function (req, res) { 5 var myList = ‘<ul><li>Android</li><li>iOS</li></ul>’; 6 res.send(myList); 7 }); 8 9 app.listen(3000, function () { 10 console.log(‘Express running on port 3000’) 11 }); รปู ท่ ี 2-12 แสดง list ทีไ่ ด้ หรือจะส่งข้อมูลในรปู แบบอารเ์ รยก์ ไ็ ด้ เชน่ ผเู้ ขยี นมีอาร์เรย์ท่มี ีขอ้ มูล 3 ชดุ เกบ็ อยใู่ น ตวั แปร arr ดังสครปิ ตต์ อ่ ไปนี้ index.js 1 var express = require(‘express’); 2 var app = express(); 3 4 app.get(‘/’, function (req, res) { 5 var arr = [‘Android’, ‘iOS’, ‘Windows’]; 6 res.send(arr); 7 }); 8 9 app.listen(3000, function () { 10 console.log(‘Express running on port 3000’) 11 }); ScJraivpat 29

รปู ที่ 2-13 กรณสี ่งขอ้ มลู เป็นอาร์เรย์ ท�ำ ความเข้าใจข้นั ตน้ กับระบบพาธ URL (Route) ใน Express เน้ือหาทีผ่ ่านมาพบวา่ เราสนใจเพียงแคก่ ารรอ้ งขอ URL มาที่พาธรทู / เท่านน้ั กลา่ วคอื เมอ่ื ผูใ้ ชง้ านพิมพ์ URL วา่ localhost:3000/ แปลความหมายไดว้ า่ เมอื่ มาท่ีพาธ / แล้วใหท้ ำ� อะไร เราจะมาลองสรา้ งเสน้ ทาง URL (Route) อน่ื ๆเพมิ่ เตมิ ตวั อย่างที่ 2-1 ทำ�ความเข้าใจขนั้ ตน้ กบั ระบบพาธ URL (Route) ใน Express เพื่อให้เห็นการกำ�หนด Route ได้อย่างชัดเจนยิ่งข้ึน ผู้เขียนกำ�หนด Route เพิ่มเติม อีก 2 ช่องทาง ดงั นี้ ÂÂ เสน้ ทาง /About ก�ำ หนดใหแ้ สดงขอ้ ความ Helo from About ÂÂ เส้นทาง /Contact ก�ำ หนดให้แสดงข้อความ Helo from Contact สครปิ ต์ Express ท่ี 2-1 ทำ�ความเข้าใจขั้นตน้ กับระบบพาธ URL (Route) ใน Express (index.js) 1 var express = require(‘express’); 2 var app = express(); 3 app.get(‘/’, function (req, res) { res.send(‘Hello Express’); 4 5 6 }); 7 appr.egse.st(e‘/nAdb(o‘Huet’,llofufnroctmionAb(roeuqt,’)res) { 8 9 10 }); 11 appr.egse.st(e‘/nCdo(n‘Htaecllto’, ffruonmctiConon(traecqt,’)res) { 12 13 14 }); 15 app.listen(3000, function () { console.log(‘Express running on port 3000’) 16 17 18 }); 30

CHAPTER 2 พน้ื ฐานการใช้งาน Express รปู ท่ ี 2-14 แสดงสคริปต ์ ใหมใ่ นไฟล์ index.js 1. ในกรณีท่รี ้องขอไฟล์ท่ีพาธ /About กจ็ ะได้ข้อความ Helo from About ตามทเ่ี รา ก�ำ หนดไว้ รปู ท ี่ 2-15 กรณไี ปทเ่ี สน้ ทาง /About 2. ส่วนกรณไี ปทพ่ี าธ /Contact ก็จะไดข้ ้อความ Helo from Contact รูปท่ ี 2-16 กรณไี ปทเี่ ส้นทาง /Contact จากผลการทำ�งานขา้ งต้น แสดงให้เห็นว่าการทำ�งานของฝง่ั Express เราเปน็ ผกู้ �ำ หนด เส้นทางและวิธีการทำ�งานเองว่า เม่อื ฝัง่ ผใู้ ชง้ าน (ฝ่ัง Client) ร้องขอไฟล์เข้ามาแลว้ ให้ท�ำ อะไร กรณีน้ีก�ำ หนดไว้ 3 เส้นทาง คือ พาธ /, /About และพาธ /Contact การกำ�หนดให้ Restart โดยอตั โนมตั ิดว้ ย nodemon รูปแบบการพัฒนา Web Apps ในแพลตฟอรม์ MEAN Stack ก็คอื อาศัยวิธกี ารป้อน คำ�สัง่ ผ่านทาง Command Prompt หน่ึงในค�ำ สง่ั ท่ีเราต้องใชง้ านบ่อยคร้งั ท่ีสดุ กค็ อื ÂÂ การสัง่ ให้ Node + Express หยดุ ดว้ ยการกดปมุ่ Ctrl + C ÂÂ สงั่ รนั โปรเจก็ ต์ใหมอ่ กี ครงั้ เพอ่ื ใหไ้ ดผ้ ลการท�ำ งานลา่ สดุ ทเ่ี กดิ จากการแกไ้ ขสครปิ ต์ ไฟลต์ ่างๆในโปรเจ็กตข์ องเรา ScJraivpat 31

เมื่อใดก็ตามที่มีการแก้ไขสคริปต์, เพิ่ม, ลบรายการไฟล์ หรือการกระทำ�ใดก็ตามท่ี ท�ำ ใหโ้ ปรเจก็ ต์เกดิ การเปลีย่ นแปลงไปจากเดิม จะตอ้ งส่งั ให้ Node + Express หยดุ และรนั ใหม่ ทกุ คร้ัง เพือ่ ให้ Node + Express อ่านโครงสร้างและสครปิ ต์ใหม่ลา่ สดุ เสมอ การกดปมุ่ Ctrl + C และพมิ พค์ �ำสง่ั node index บอ่ ยครง้ั ถอื เปน็ การท�ำงานซำ้� ไปซำ้� มา มีวธิ ที จี่ ะท�ำให้ไม่ต้องสั่ง Node + Express หยุดและรนั ใหม่ทกุ ครัง้ อีกต่อไปนน่ั คือ อาศยั ชิน้ ส่วนที่ชอ่ื ว่า nodemon ในกรณที ่ตี อ้ งการใหโ้ ปรเจก็ ตม์ ีการใชง้ าน node mon มขี ั้นตอนดงั น้ี 1. ใหไ้ ปทโ่ี ฟลเดอรโ์ ปรเจก็ ตข์ องเรากอ่ น ในกรณนี ้ี คอื E:\\Projects (หรอื โฟลเดอรท์ เ่ี กบ็ โปรเจก็ ตข์ องผอู้ า่ น) จากนน้ั ปอ้ นค�ำ สง่ั npm instal --save nodemon ดงั รปู ท่ี 2-17 Command Prompt 1 C:\\Users\\Thaivb>E: 2 E:\\>cd Projects 3 E:\\Projects>npm install - -save nodemon รูปท่ี 2-17 แสดงการดาวนโ์ หลดและตดิ ตง้ั nodemon ใหก้ บั โปรเจ็กตป์ จั จบุ ัน จากรปู ท่ี 2-17 พารามเิ ตอร์ --save หมายถงึ ใหใ้ ส่ nodemon และเวอรช์ นั ทด่ี าวนโ์ หลดมา ไวใ้ นไฟล์ package.json เชน่ เดิม 2. หลงั จากทด่ี าวน์โหลดและตดิ ตงั้ nodemon ใหก้ บั โปรเจก็ ตป์ จั จบุ นั เสรจ็ แลว้ ใหล้ อง เปดิ ไฟล์ package.json พบวา่ มีการบนั ทกึ nodemon ไว้ในสว่ น dependencies แล้วดังรปู ที่ 2-18 32

CHAPTER 2 พ้ืนฐานการใช้งาน Express รูปที ่ 2-18 แสดงการกำ�หนดให้ใช้ nodemon ใน dependencies จากรปู ท่ี 2-18 ความหมายกค็ ือ โปรเจก็ ต์ปัจจบุ นั มกี ารใชง้ าน 2 ชน้ิ สว่ น คือ express และ nodemon ซึ่งเปน็ ชน้ิ สว่ นที่เราเป็นผกู้ �ำ หนดเองทงั้ หมด หน้าท่ีของ nodemon ก็คือ จะคอยจับตาดูหรือเฝ้ามองโปรเจ็กต์ของเราว่ามีการ ปล่ียนแปลงใดๆหรือไม่ หากว่ามีการเปลี่ยนแปลงใดๆก็ตามเกิดขึ้นก็จะมีการส่ังให้ node + express ทำ�การ Restart ให้โดยอัตโนมัติ ส่งผลให้เราสามารถทดสอบโปรเจ็กต์ได้อย่าง ต่อเนอื่ งน่ันเอง 3. ตอ่ มา หลงั จากทต่ี ดิ ตง้ั nodemon แลว้ ใหแ้ กไ้ ขไฟล์ package.json ใหมท่ ห่ี วั ขอ้ scripts โดยการเพม่ิ ค�ำ สง่ั ใหม่ start : nodemon index.js เพอ่ื สง่ั ให้ nodemon ท�ำ งาน package.json 1{ 2 name : helloexpress , 3 version : 1.0.0 , 4 description : , 5 main : index.js , 6 scripts : { 7 start : nodemon index.js 8 }, 9 author : , 10 license : ISC , 11 dependencies : { 12 express : ^4.15.4 , 13 nodemon : ^1.12.0 14 } 15 } ScJraivpat 33

ความหมายของคำ�ส่ัง ข้างต้นก็คือ เม่อื มีการใช้คำ�ส่งั npm start ก็จะกำ�หนดให้ nodemon สั่งให้ไฟล์ที่ชื่อว่า index.js ทำ�งานเป็นลำ�ดับแรก และจับตาดูการเปลี่ยนแปลงที่ เกดิ ขนึ้ ดว้ ย รปู ท่ี 2-19 แสดงการเพม่ิ ค�ำ สั่งของ nodemon ในไฟล์ package.json 4. ต่อมา เราจะสง่ั ใหโ้ ปรเจก็ ตป์ จั จบุ นั ทำ�งาน ดว้ ยคำ�สัง่ npm start เห็นไดว้ ่ามคี วาม แตกตา่ งไปจากคำ�ส่ังเดิม Command Prompt 1 npm start รปู ท ี่ 2-20 แสดงข้อความหลังส่ังให้รันโปรเจ็กต์ ปัจจบุ ัน 5. ต่อมา ผ้เู ขยี นเข้าเวบ็ ทดสอบตามปกติ ดงั รปู ท่ี 2-21 รูปท ่ี 2-21 แสดงการเขา้ เวบ็ ทดสอบตามปกติ 6. ตอ่ มา มกี ารแกไ้ ขสครปิ ต์ในไฟล์index.js ใหม่ จากเดมิ ใหส้ ง่ ขอ้ ความHeloExpress แกไ้ ขใหมเ่ ปน็ ขอ้ ความ Helo Express 2017 และตอ้ งมกี ารบนั ทกึ ไฟลใ์ หมด่ ว้ ย เพือ่ ใหเ้ กิดการเปล่ียนแปลงจรงิ 34

CHAPTER 2 พน้ื ฐานการใช้งาน Express รปู ที่ 2-22 เมอื่ เกดิ การแกไ้ ขสครปิ ตใ์ หม่ จากรูปที่ 2-22 พบว่า nodemon ตรวจพบความเปล่ียนแปลง เกิดข้ึนหลังจากท่ีเรา บันทกึ ไฟล์ index.js โดยอตั โนมัติ 7. ทา้ ยที่สุด ใหไ้ ปที่บราวเซอร์ แล้ว refresh 1 ครั้ง พบว่าได้ผลการทดสอบใหมล่ า่ สดุ ทนั ทีโดยท่ีไมต่ ้องไปปอ้ นค�ำ สั่งหยดุ และรนั ซ�ำ้ แต่อยา่ งใด รูปท่ี 2-23 แสดงผลการท�ำ งานลา่ สดุ ทไ่ี ดท้ นั ที ท�ำ ความรจู้ กั กบั ระบบ JavaScript Module เม่ือเข้ามาสู่โลกของการพัฒนา Web Apps แบบ MEAN Stack หน่ึงในหลักการพ้ืน ฐานท่ตี ้องทราบก็คอื วธิ ีการอา้ งองิ JavaScript เพ่ือนำ�มาใช้งานในโปรเจ็กต์ ใหด้ สู คริปต์ต่อ ไปนป้ี ระกอบค�ำ อธิบาย index.js 1 var express = require(‘express’); 2 var app = express(); 3… 4… 5… ScJraivpat 35

การเขียนสครปิ ต์ขา้ งตน้ มาจากตัวอย่างทผี่ า่ นมา กล่าวคอื 1. โหลด express (require(‘express’)) มาเก็บไว้ท่ีตวั แปรทีช่ อ่ื ว่า express กอ่ น (var express) เปน็ โมดลู ส�ำ เร็จรปู ท่ีมคี นสรา้ งไวใ้ หแ้ ลว้ เราอยใู่ นฐานะเป็นผเู้ รยี กใชง้ าน เท่านนั้ 2. เม่ือตอ้ งการใชง้ านฟังก์ชันใดของ express กจ็ ะสัง่ ผา่ นทางตัวแปร app (var app = express()) กค็ ือ สครปิ ต์ในบรรทัดตอ่ ๆมานนั่ เอง เพ่ือให้เห็นหลักการอา้ งอิง JavaScript ในระดับพ้ืนฐานของ Express ชดั เจนยิ่งขนึ้ ให้ ดูตัวอยา่ งต่อไปน้ี ตวั อยา่ งท่ี 2-2 ทำ�ความรู้จกั กับระบบ JavaScript Module มขี ้ันตอนดังนี้ 1. สร้างโปรเจก็ ตว์ ่างๆ ข้ึนมากอ่ น ตงั้ ชอ่ื วา่ usingjsmodule 2. ต่อมา คลกิ ที่ปุ่ม สร้างไฟล์ JavaScript ทีช่ ่อื วา่ person.js อยู่ในระดบั เดียวกบั ไฟล์ index.js จากน้นั ให้เขียนสคริปต์ ดังต่อไปนี้ สคริปต์ JavaScript ที่ 2-2 ท�ำ ความรู้จักกบั ระบบ JavaScript Module (person.js) 1 var msg = Hello MEAN Stack ; 2 3 exports.Hello = function() { 4 console.log(msg); 5 }; รปู ที่ 2-24 แสดงสคริปต์ในไฟล์ person.js 3. ต่อมา การเรียกใช้งาน person.js อยู่ในไฟล์หลักของเรา นั่นคือ index.js ดังโค้ด ต่อไปน้ี 36

CHAPTER 2 พนื้ ฐานการใชง้ าน Express สครปิ ต์ JavaScript ที่ 2-2 ทำ�ความร้จู ักกบั ระบบ JavaScript Module (index.js) 1 var express = require(‘express’); 2 var app = express(); 3 4 var p = require(‘./person’); 5 p.Hello(); app.get(‘/’, function (req, res) { res.send(‘Hello Express’); }); app.listen(3000, function () { console.log(‘Express running on port 3000’) }); รปู ที่ 2-25 แสดงการเรียกใช้งาน person.js ใน index.js 4. ทา้ ยทสี่ ดุ ใหพ้ มิ พค์ �ำ สง่ั nodeindex เพอื่ รนั โปรเจก็ ต์ พบวา่ มขี อ้ ความHeloMEAN Stack ปรากฎขนึ้ มาในหน้าตา่ ง Command Prompt หมายถึง สามารถสั่งใหไ้ ฟล์ person.js ทำ�งานส�ำ เร็จน่นั เอง การส่ังใหไ้ ฟล์ person.js ท�ำ งานสำ�เร็จ กล่าว ได้อีกนัยหน่ึงว่า น่ีคือวิธีการอ้างอิง JavaScript ใน โลกของ MEAN Stack น่นั เอง รปู ท่ ี 2-26 แสดงขอ้ ความทไี่ ดจ้ ากไฟล์ person.js อธบิ ายการทำ�งานของสครปิ ต์ 1. เรม่ิ ตน้ ท่ไี ฟล์ person.js สรา้ งตวั แปรท่ชี อ่ื ว่า msg ขึน้ มากอ่ น ท�ำ หนา้ ทีเ่ กบ็ ขอ้ ความ Helo MEAN Stack ScJraivpat 37

person.js 1 var msg = Hello MEAN Stack ; 2. ต่อมาตอ้ งก�ำ หนดว่า ไฟล์ person.js ท่ีไดส้ ร้างขึ้นมา มีหน้าทอี่ ะไรบา้ ง ในกรณนี ี้ ผู้เขยี นก�ำ หนดไว้เพยี งหนา้ ทีเ่ ดยี ว คอื สร้างฟงั กช์ ันทช่ี ่ือว่า Helo ขนึ้ มาก่อน การทำ�งานของฟังก์ชนั Helo ก็คือ สง่ั ใหแ้ สดงขอ้ ความท่เี กบ็ อยูใ่ นตัวแปร msg นน่ั เอง person.js 1 exports.Hello = function() { 2 console.log(msg); 3 }; 3. การเรียกใช้งานโมดูล person ท่ีเราสร้างข้ึนมา อยู่ในไฟล์ index.js ประกอบด้วย 2 ขน้ั ตอนยอ่ ย คอื ÂÂ สร้างตัวแปรที่ชื่อวา่ p ท�ำ หน้าท่โี หลดโมดลู person (.js) ขึน้ มากอ่ น index.js 1 var p = require(‘./person’); ÂÂ ภายในโมดลู person(อา้ งองิ ผา่ นทางตวั แปรp) มเี พยี ง1 ฟงั กช์ นั เทา่ นน้ั ชอ่ื วา่ Helo() ถอื เปน็ การสง่ั ใหท้ �ำ งาน กจ็ ะไดข้ อ้ ความตามทเ่ี ราก�ำ หนดไวใ้ นหนา้ ตา่ ง Command Prompt นน่ั เอง index.js 1 p.Hello(); จากผลการทำ�งานข้างต้นแสดงให้เห็นวิธีการอ้างอิง JavaScript ถือเป็นหลักการ พนื้ ฐานท่ีต้องทำ�ความเขา้ ใจเป็นล�ำ ดับแรกๆ กอ่ นท่ีจะเข้าสู่เนื้อหาในระดบั ตอ่ ไป สรปุ ท้ายบท เราเรม่ิ รจู้ กั กบั ชน้ิ สว่ นพน้ื ฐานล�ำ ดบั แรกๆแลว้ น�ำ มาประกอบรวมกนั เปน็ Web Apps ดว้ ย Express ในขนั้ ตน้ เนอื้ หาในบทตอ่ ๆ ไปกจ็ ะเรม่ิ ใชง้ านชน้ิ สว่ นอนื่ เพมิ่ มาก ขน้ึ เรือ่ ยๆ เพื่อใหท้ ราบวา่ ชน้ิ ส่วนแตล่ ะชนิ้ มหี นา้ ท่ีอะไรนั่นเอง 38

3Java script CHAPTER ทำ� งานกบั สว่ นแสดงผลดว้ ย Pug และ Static Files ช้ินส่วนล�ำดับต่อมาที่ผู้เขียนจะน�ำเสนอเป็นเน้ือหาในบทน้ีก็คือ ชิ้นส่วนท่ีท�ำหน้าที่สร้างส่วน แสดงผลในหนา้ เว็บเพจตามมาตรฐานของ HTML5 ในโลกของ MEAN Stack ชน้ิ ส่วนที่ท�ำหนา้ ที่แสดงผลมีหลายตวั ขอบเขตการน�ำเสนอ ของบทน้เี ปน็ การใช้งานชน้ิ ส่วนท่ชี ื่อว่า Pug (ช่อื เดิมคอื JADE) ผเู้ ขยี นขอแยกออกเปน็ 2 ส่วนใหญ่ๆ ดงั น้ี ÂÂ แสดงผลโดยอาศัยไฟลป์ ระเภท Static Files เช่น ไฟล์ HTML5 อยใู่ นฐานะเป็นไฟล์ ท่ีสามารถแสดงผลได้ด้วยตัวเอง โดยท่ีไม่ต้องพ่ึงพาไฟล์อ่ืนๆ เพิ่มเติม เราถือว่า ไฟล์ HTML5 เป็นไฟล์ที่มีเนื้อหาไม่เปล่ียนแปลง ตอนสร้างขึ้นมาเป็นอย่างไรตอน แสดงผลสครปิ ตใ์ นไฟล์กย็ งั คงอยู่ในสภาพเดิม ÂÂ แสดงผลโดยอาศยั Pug เปน็ ช้นิ ส่วนทท่ี ำ�หน้าที่สร้างสว่ นแสดงผล (User Interface – UI) หน้าตาเว็บเพจเป็นอย่างไรอยู่ท่ีการใช้งานชิ้นส่วนนี้น่ันเอง เช่น สร้างหน้า จอสำ�หรบั แสดงรายการสินคา้ การเพ่ิมข้อมลู เปน็ ต้น พ้ืนฐานการแสดงผลในหน้าเวบ็ เพจด้วย HTML5 กอ่ นทจ่ี ะเขา้ สกู่ ารใชง้ าน Pug เพอ่ื สรา้ งสว่ นแสดงผลภายในโปรเจก็ ตข์ องเรา ผเู้ ขยี นขอ ยอ้ นกลบั ไปทพ่ี น้ื ฐานเดมิ ของการสรา้ งสว่ นแสดงผลในหนา้ เวบ็ เพจตามมาตรฐาน HTML5 กอ่ น สว่ นแสดงผลในหนา้ เวบ็ เพจทป่ี รากฎในบราวเซอรต์ อ้ งมโี ครงสรา้ งเปน็ ไปตามมาตรฐาน ของ HTML5 ไม่วา่ จะพัฒนา Web Apps ดว้ ยภาษาอะไรกต็ าม ดังสคริปต์ HTML5 ต่อไปน้ี HTML .Net HTML

\\public\\products.html 1 <!DOCTYPE html> 2 <html lang=“th”> 3 <head> 4 <title>ข้อความแสดงในแทบ็ </title> 5 <meta charset=“utf-8” /> 6 </head> 7 <body> 8 <h1>สวัสดจี า้ </h1> 9 </body> 10 </html> จากสครปิ ต์ข้างตน้ อะไรก็ตามทอ่ี ยรู่ ะหว่างอลิ ีเมนต์ <body>…</body> คือ เนื้อหาที่ จะปรากฎในบราวเซอรพ์ บวา่ ผูเ้ ขียนกำ� หนดใหแ้ สดงขอ้ ความ สวสั ดีจา้ กำ� หนดใหข้ ้อความมี ขนาดตัวอกั ษรระดับ h1 ดงั รปู ท่ี 3-1 รูปท่ ี 3-1 สว่ นแสดงผลทไ่ี ด้มา จากรปู ท่ี 3-1 ผู้เขยี นก�ำลงั จะบอกคณุ ว่า ÂÂ ขอ้ ความ “สวัสดจี ้า” อยใู่ นฐานะเปน็ ข้อมลู ÂÂ อิลเี มนต์ <h1>…</h1> เป็นอลิ เี มนตต์ ามมาตรฐาน HTML5 ทำ�หนา้ ท่กี ำ�หนดขนาด หรอื รูปแบบตวั อกั ษร หมายความว่าภายในเอกสาร HTML5 (นามสกลุ .htm หรือ .html) มที ้งั ชดุ คำ� สงั่ ของ HTML5 และข้อมลู ทเ่ี ราต้องการแสดงในหน้าเว็บเพจอยู่ในไฟลเ์ ดียวกนั เปลีย่ นแปลงค่าไม่ได้ (ในขณะสร้างไฟล์ขึ้นมา) ต้องก�ำหนดท้ังชุดค�ำสั่งและข้อมูลให้เสร็จสมบูรณ์ เพ่ือสร้างไฟล์ HTML5 ขน้ึ มา เราจึงถอื วา่ ไฟล์ HTML5 เป็นไฟลป์ ระเภท Static Files (ไฟล์ที่เปล่ยี นแปลงเนือ้ หา ภายในไมไ่ ด้) อยูใ่ นฐานะเช่นเดยี วกบั ไฟลร์ ูปภาพต่างๆ เราต้องการสร้างไฟล์ HTML5 ท่ีสามารถแสดงผลภาษาไทยได้ด้วย จึงต้องก�ำหนด <meta charset = “utf-8”> อยรู่ ะหวา่ งอิลีเมนต์ <head>…</head> ไว้เสมอ 40

CHAPTER 3 ทำ�งานกบั สว่ นแสดงผลด้วย Pug และ Static Files อิลีเมนต์ใดก็ตามท่ีอยู่ระหว่างอิลีเมนต์ <head>…</head> ถือว่าเป็นส่วนหัวของ เอกสาร โดยปกตแิ ลว้ ยงั ใชเ้ ปน็ พนื้ ทส่ี ำ� หรบั อา้ งองิ สครปิ ตต์ า่ งๆ ทตี่ อ้ งการใชง้ านภายในเอกสาร อีกด้วย แตส่ ามารถอา้ งอิงสคริปตต์ ่างๆ ระหวา่ งอิลเี มนต์ <body>…</body> กไ็ ด้เชน่ กัน ท�ำ งานกบั ไฟล์ HTML (Static Files) Static Files หมายถึง ไฟล์ที่ไม่มีการเปลี่ยนแปลง เป็นไฟล์ท่ีอยู่ในสถานะรอเรียก ใชง้ าน เช่น ไฟล์รูปภาพ, ไฟล์ HTML, ไฟล์ข้อความธรรม, CSS, JavaScript เป็นตน้ เหน็ ได้ วา่ ไฟลเ์ หลา่ นเ้ี ราไมไ่ ดเ้ ขา้ ไปยงุ่ กบั เนอื้ หาภายในไฟลแ์ ตอ่ ยา่ งใด โดยปกตแิ ลว้ ไฟลเ์ หลา่ นจี้ ะถกู เกบ็ อยู่ในโฟลเดอรท์ ี่ชือ่ วา่ public การทำ� งานลำ� ดบั แรกทเ่ี ปน็ พนื้ ฐานทส่ี ดุ นนั่ คอื เราตอ้ งการแสดงหนา้ เวบ็ เพจทไี่ ดจ้ ากไฟล์ HTML ที่เรามอี ย่ใู น Express โดยท่ตี วั อยา่ งโปรเจ็กตท์ ง้ั หมดเก็บอยู่ทพี่ าธ E:\\Projects (หรอื เกบ็ อย่ใู นพาธตามท่ีผอู้ ่านตอ้ งการ) ตวั อย่างที่ 3-1 ท�ำ งานกบั ไฟล์ HTML (Static Files) มีข้ันตอนดงั น้ี 1. ให้เปิด Command Prompt ขึ้นมา ไปท่ีพาธ E:\\Projects ก่อน จากนั้นพิมพ์ คำ�สง่ั npm init เพอ่ื สรา้ งไฟล์ package.json ในพาธ E:\\Projects ขน้ึ มากอ่ น ตง้ั ชอื่ โปรเจ็กตน์ ว้ี ่า usingstaticfiles ดงั รปู ท่ี 3-2 Command Prompt 1 C:\\Users\\Thaivb>E: 2 E:\\>cd Projects 3 E:\\Projects>npm init รูปท่ี 3-2 แสดงไฟล์ package.json ทไี่ ดม้ า ScJraivpat 41

2. ต่อมา ให้พิมพ์คำ�ส่ังต่อไปน้ี เพ่ือดาวน์โหลดและติดตั้ง express ให้กับโปรเจ็กต์ usingstaticfiles ดังรปู ท่ี 3-3 Command Prompt 1 npm install - -save express รูปที ่ 3-3 แสดงการดาวนโ์ หลดและตดิ ตงั้ express ใหก้ บั โปรเจก็ ตป์ จั จบุ นั 3. ต่อมา ใหใ้ ช้โปรแกรม Visual Studio Code เปดิ โฟลเดอร์ E:\\Projects ขึ้นมา ผู้ เขียนสนใจท่ไี ฟล์ package.json เปน็ อนั ดบั แรก พบวา่ ที่หัวขอ้ dependencies มี การบันทึกการใช้งาน express ไว้ด้วย อันเนอ่ื งมาจากคำ�ส่ัง - -save นัน่ เอง รปู ท่ ี 3-4 แสดงการบนั ทกึ ใชง้ าน express ในไฟล์ package.json 4. ให้คลิกท่ี สร้างโฟลเดอร์ที่ชื่อว่า public ข้ึนมาก่อน จากนั้นคลิกท่ีปุ่ม สรา้ งไฟล์ HTML5 ท่ีชื่อวา่ products.html เกบ็ อยูใ่ นโฟลเดอร์ public ผู้เขียนสมมติว่าให้ ไฟล์นี้ท�ำหน้าที่แสดงรายการ สินค้า ซึง่ เป็นสครปิ ต์ HTML5 พ้ืนฐาน ดังรูปที่ 3-5 รูปท ่ี 3-5 แสดงไฟล์ products. html ในโฟลเดอร์ public 42

CHAPTER 3 ท�ำ งานกับส่วนแสดงผลดว้ ย Pug และ Static Files จากรปู ท่ี 3-5 เปา้ หมายของตัวอย่างนี้ก็คอื แสดงหน้าเวบ็ เพจทีเ่ กดิ จากไฟล์ HTML5 ที่ ชอื่ ว่า products.html (อยใู่ นฐานะเปน็ Static File หรอื ไฟล์ที่มีเน้ือหาไมม่ กี ารเปล่ียนแปลง) ดว้ ย Express 5. ต่อมา ให้สร้างไฟล์ที่ชื่อวา่ index.js ทำ�หนา้ ทเ่ี ปน็ ไฟลล์ ำ�ดบั แรกของโปรเจ็กต์ จาก นัน้ ให้เขียนสครปิ ตต์ ่อไปน้ี เพ่ือเรียกใชง้ านไฟล์ products.html รปู ท่ ี 3-6 แสดงสคริปต์ใน ไฟล์ index.js สครปิ ต์ Express ท่ี 3-1 ทำ�งานกบั ไฟล์ HTML (Static Files) (index.js) 1 var express = require(‘express’); 2 var app = express(); 3 4 app.use(express.static(__dirname + ‘/public’)); 5 6 app.get(‘/’, function (req, res) { 7 res.send(‘Hello Express’); 8 }); 9 10 app.get(‘/Products’, function (req, res) { 11 res.redirect(‘products.html’) 12 }); 13 14 app.listen(3000, function () { 15 console.log(‘Express running on port 3000’) 16 }); ให้ทดสอบรันโปรเจก็ ต์ด้วยค�ำสงั่ node index ที่ Command Prompt จากนน้ั เปิด บราวเซอรข์ น้ึ มา ก�ำหนดให้เข้าไปที่พาธ localhost:3000/products พบว่าเป็นการสง่ั ใหแ้ สดง ผลจากไฟล์ products.html ดังรปู ที่ 3-7 ScJraivpat 43

รปู ท ี่ 3-7 ผลการรัน ตวั อย่างที่ 3-1 จากรูปที่ 3-7 ส่วนแสดงผลทเี่ ห็นเกิดจากการแสดงผลของไฟล์ products.html อธิบายการท�ำ งานของสครปิ ต์ 1. ให้ขอใช้บรกิ ารไฟล์ Static ของ Express (express.static) กอ่ น จากน้ันกำ�หนดให้ โปรเจก็ ตป์ จั จบุ นั อา้ งองิ โฟลเดอร์public เพราะวา่ เรากำ�หนดใหโ้ ฟลเดอรน์ ที้ ำ�หนา้ ท่ี จัดเก็บ Static Files index.js 1 app.use(express.static(__dirname + ‘/public’)); 2. ผู้เขียนกำ�หนดว่าเมื่อมีการร้องขอแบบ get มาท่ีพาธ /Products กำ�หนดให้ไปที่ ไฟล์ products.html index.js 1 app.get(‘/Products’, function (req, res) { 2 res.redirect(‘products.html’) 3 }); การใช้งานไฟล์ HTML โดยตรง ในกรณีท่ีไมต่ ้องการใชง้ าน express.static สามารถเรยี กใช้งานไฟล์ HTML โดยตรงเชน่ กัน ดังสคริปตต์ อ่ ไปนี้ index.js 1 var express = require(‘express’); 2 var app = express(); 3 4 app.get(‘/’, function (req, res) { 5 res.send(‘Hello Express’); 6 }); 7 44