พัฒนาเว็บด้วย AngularJS สาํ หรบั มอื ใหม่ ทีต้องการใชง้ านจรงิ แจกฟรีในกลมุ่ เฟสบุค “กลุ่มนักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- บริษัท Control C จาํ กดั ถาวร ศรเี สนพิลา (อ. กบ) สาํ หรับผเู้ รมิ ต้น Angular.JS เพือใช้งานจริง เกรนิ นํา สวัสดีครบั ก่อนจะเขา้ เรืองผมขออนญุ าตแิ นะทํา ทักทายกบั ผู้ อ่านกอ่ นเพือใหท้ ราบถึงจุดประสงค์ของหนังสือเลม่ นวี ่าจัดทําขนึ มา เพืออะไร และเพือคนกลุ่มไหน ตอ้ งขอเรียนอยา่ งตรงมาตรงไปครับวา่ ผมจดั ทําหนังสอื เล่ม นีโดยไม่ไดห้ วังว่าจะขายเปนเรืองเปนราวอะไร แตต่ ้องการแจกใน กลมุ่ “กลุ่มนกั เขียนโปรแกรม” เมือสมาชกิ ในกลมุ่ มีจํานวนครบ 5,000 คน ซงึ ตอนนีกใ็ กล้เข้ามาทกุ ขณะแล้ว จดุ ประสงคเ์ พือแจกฟรี ส่วนกลมุ่ เปาหมายนนั ผมเนน้ วา่ สําหรับคนทตี อ้ งการนําเอา Angular.JS ไปใชใ้ นการทํางานของทา่ น โดยไม่ต้องเรยี นเปนคอรส์ ยาวเหยียด ทใี ชเ้ วลามาก โดยผมได้ รวบรวมจุดสาํ คญั ทเี ราได้ใช้บอ่ ยๆ ในการทาํ งานจรงิ เพือลดระยะ เวลาในการเรยี นรู้ของผอู้ ่าน ดงั นันหมายความวา่ บางส่วนผมก็อาจ จะไมไ่ ดก้ ล่าวถึง เพราะหากมีพืนฐานการใช้งานจากความรูใ้ นหนงั สอื นีแลว้ ผอู้ ่านจะสามารถไปต่อยอดศกึ ษาจากแหลง่ อืนไดโ้ ดยไม่ยาก สุดทา้ ยผมขอเรียนใหท้ ราบว่า ตวั หนงั สอื ในหนังสอื เลม่ นีอาจ จะมขี นาดใหญ่สักหน่อยเพือให้อา่ นงา่ ย และผมขอยาํ ทงิ ทา้ ยวา่ เนือหาการเขยี นการอธิบายนันผมจะใช้ภาษาง่ายๆ ไมว่ ชิ าการ ซงึ ไม่ใช่แนวทางทผี มถนดั จะเรียกว่าเหมอื นการเล่าสกู่ นั ฟงก็ว่าได้ ไม่ ไดอ้ อกแนวสอนเปนเรอื งเปนราวเหมือนการเรียนหนงั สือในห้อง หรอื คอร์สอบรมต่างๆ --------------------------------------------------------------------------------------------------------------------------- หน้า 2
พัฒนาเว็บด้วย AngularJS สําหรับมือใหม่ ทตี อ้ งการใชง้ านจรงิ แจกฟรใี นกล่มุ เฟสบุค “กลมุ่ นกั เขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- ผมขอขอบคณุ ทุกท่านทีตดิ ตามผมงานต่างๆ มาโดยตลอด ไมว่ ่าจะเปนบทความ หนังสอื คลปิ สอน หรือแมแ้ ต่โปรแกรมทผี มจัด ทําขนึ มาทงั หมดทังปวงนนั จะเกดิ ขนึ ไมไ่ ดเ้ ลยหากขาดกาํ ลงั ใจ และ แรงสนบั สนนุ จากฐานผู้ชม ผมและทีมงานจะจดั ทาํ สิงต่างๆ ทีเปน ประโยชนอ์ อกมาอย่างต่อเนือง แมบ้ างอย่างอาจจะไมไ่ ด้เปนเนือหาที ทันสมัยอะไรมากนกั แต่ก็อาจเกดิ คณุ คา่ แกค่ นอ่านบางท่านได้ ไม่ มากกน็ ้อย รู้จักกับ Angular.JS กันก่อน ในหัวขอ้ นเี รามาดกู นั ก่อนครบั ว่าอะไรคือ Angular.JS ผมจะ ขอเล่าแบบสรุปเลยเนาะ ไม่เข้าเรอื งอะไรให้กวา้ งเกนิ ไป คือมันเปน เพียงชุดคําสัง JS จะเรียกว่าเปน Library ก็ได้นะใหเ้ ราแค่เพียง import ใส่ในโปรเจคแลว้ กใ็ ชง้ านได้เลย โดยไอ้ตัวนีจะชว่ ยใหก้ ารเขยี นโค้ดเราเปนระบบ อ่านง่าย ทุก อยา่ งถกู แยกจากกันอย่างชดั เจน ทงั สว่ นของ การแสดงผลคา่ ตวั แปร ลอจิก การเชอื มตอ่ กับ API ภายนอก จรงิ ๆ ถ้าถามว่าไมใ่ ช้ไดไ้ หม ใช้ jQuery ไดไ้ หมคาํ ตอบกค็ ือ ได้ครับ แต่ถ้าใช้ตัว Angular.JS มาชว่ ยงานจะทําให้โค้ดเปนระบบ ขึนเยอะ ง่ายต่อการพัฒนาระบบทมี ขี นาดใหญข่ นึ ผมก็จะสรุปไว้ ประมาณนกี ่อนครับเพือไม่ให้ผู้อา่ นเสียเวลาเยอะในการทําความเข้าใจ เดยี วเรามาดูหน้าตาของ Angular.JS กันสักนดิ นึงเผอื จะไดเ้ ปนพืน ฐานไปสู่การทาํ ความเขา้ ใจในหวั ขอ้ อนื ตอ่ ไปอีก การแสดงคา่ ตวั แปรใช้ {{ var_name }} เชน่ <div>Name is {{ name }}</div> เทา่ นีครับมนั กจ็ ะแสดงคา่ ได้ละ สว่ นตัวแปรนันๆ จะมีคา่ อะไรอยูท่ เี รา เขยี นกําหนดไวใ้ ห้ โดยทกุ อย่างจะถูกเก็บไว้ใน $scope หรอื ห้อง เก็บคา่ ตวั แปรนนั เอง หัวขอ้ หน้าผมจะมาอธบิ ายเพิมเตมิ อีกหน่อย เกยี วกบั พืนฐานของ Angular.JS แล้วจากนนั จะคอ่ ยพาโหลด ติด ตัง ทดสอบการทํางานกนั สาํ หรับหัวข้อนเี ราเอาเท่านีกอ่ นเนอะ --------------------------------------------------------------------------------------------------------------------------- หน้า 3
พัฒนาเว็บดว้ ย AngularJS สําหรบั มอื ใหม่ ทตี อ้ งการใชง้ านจรงิ แจกฟรีในกล่มุ เฟสบุค “กลุม่ นักเขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- โครงสรา้ งของ Angular.JS แบบสรปุ้ สรุป สาํ หรับส่วนนีนะครบั ผมจะพามาดูโครงสรา้ ง Angular.JS แบบง่ายๆ กันเลย ขอพู ดแบบสรุปเลยวา่ ทกุ อย่างจะอยูใ่ ตก้ รอบ ของ module แลว้ ใน module จะมี controller จากนันคา่ ตวั แปร และลอจิกการทํางาน จะอยู่ใน controller อกี ต่อหนึง งง ใช่มะ มา ดภู าพกนั ดีกวา่ [Module] ● Controller ○ Variable ○ Logic เรมิ ต้นเราตอ้ งสรา้ ง app กอ่ นดว้ ยโคด้ แบบน ี var myModule = angular.module(‘myApp’, []); ทีนีกส็ ร้าง controller ให้อยใู่ ต้ module นีอีกท ี myModule.controller(‘MyController’, function($scope) { … }); หากจะให้มตี ัวแปรอะไรก็จดั ไปได้เลยด้วยโค้ดงา่ ยๆ นีครับ $scope.varName = valueOfVariable; พอจะเอาคา่ ตัวแปรไปแสดงผลกแ็ คว่ างในทที ีตอ้ งการ <div>{{ varName}}</div> จบปง งา่ ยเลยใช่ไหม --------------------------------------------------------------------------------------------------------------------------- หน้า 4
พัฒนาเวบ็ ดว้ ย AngularJS สําหรับมือใหม่ ทตี ้องการใช้งานจรงิ แจกฟรีในกล่มุ เฟสบคุ “กลุ่มนกั เขยี นโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- Download and Install ดีกว่า คนั ไม้คันมอื เต็มทนแลว้ หลังจากเขียนอะไรทีไมเ่ หน็ ภาพมา หลายหนา้ ทีนีผมขอพาดาวโหลดมาเล่นกันเลยจะดีกว่า เพราะชอบ อะไรทเี หน็ ผลไวๆ แล้วคอ่ ยเขา้ ใจไปทลี ะน้อยพร้อมกัน เรมิ จากไปเวบ็ www.angularjs.org กนั กดทปี มุ Download ได้เลยครับจะพบหน้าน ี --------------------------------------------------------------------------------------------------------------------------- หน้า 5
พัฒนาเว็บด้วย AngularJS สาํ หรบั มือใหม่ ทีตอ้ งการใชง้ านจริง แจกฟรใี นกลมุ่ เฟสบคุ “กลมุ่ นักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- กดกดทปี มุ Download จะพบหน้าโคด้ แบบนี (แตบ่ างทมี นั ก็ดาว โหลดเกบ็ ลงในคอมนะ) ใหเ้ รากดกอปปโค้ดทงั หมดนีเกบ็ ไวก้ ่อน (จาํ ใหไ้ ด้นะวา่ เรากอปแล้ว) ทนี ไี ปทําการเปดโปรแกรม Visual Studio Code จากนีจะเรียกวา่ VSCode นะ (ใครยังไม่มีหามาไว้เลยโดยไว) ทาํ การสร้างไฟล์ขนึ มา ตังชอื วา่ angular.js วางโค้ดเมือกีเข้าไป (ที เรากอปไว้กอ่ นน)ี --------------------------------------------------------------------------------------------------------------------------- หน้า 6
พัฒนาเวบ็ ดว้ ย AngularJS สาํ หรับมอื ใหม่ ทตี อ้ งการใชง้ านจริง แจกฟรใี นกลมุ่ เฟสบุค “กลมุ่ นักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- ทนี สี ร้างไฟลม์ าอกี ตงั ชอื ว่า hello.html ครับ เก็บไว้ทีเดยี วกันดว้ ยนะ โอเคเนาะแลว้ จากนันเราก็ทาํ การเขยี นโค้ดลงในไฟล์ hello.html ดังน ี --------------------------------------------------------------------------------------------------------------------------- หน้า 7
พัฒนาเวบ็ ดว้ ย AngularJS สาํ หรับมอื ใหม่ ทีต้องการใชง้ านจรงิ แจกฟรีในกลุม่ เฟสบคุ “กลุม่ นกั เขยี นโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- วิธที ดสอบการทํางานใหด้ บั เบลิ คลิกไฟล์ hello.html กจ็ ะพบกบั ผลดังน ี หลกั การจํางา่ ยๆ ก่อนจบบทนผี มอยากแนะนําวา่ ให้เราจดจําวา่ อะไรอยูใ่ ต้ อะไร และตวั ไหนต้องไปวางตรงไหน โดยผมสรุปเปนแผนภาพให้ดังน ี ข้อสําคัญมากๆ คือตัวพิมพ์เลก็ ตัวพิมพ์ใหญ่เอาใหถ้ ูกต้องนะครับ มันจะ มองว่าเปนคนละตัว หากเราพิมพ์ผดิ พลาดไปโปรแกรมกจ็ ะรันไม่ได ้ สิงทแี ก้ไขเปนชืออนื อะไรกไ็ ด้ คอื ตวั ทผี มวางเปนกล่องสีเหลียมทัง 4 จุด นี จะตงั ชืออะไรก็ได้ครบั แตว่ ่าเอาทีสอื ความหมายให้เขา้ ใจงา่ ยๆ กพ็ อเนอะ โอเค สําหรบั หวั ข้อนเี รากไ็ ดเ้ ลน่ กันหอมปากหอมคอละ พบกันอีกทีในหัวขอ้ ต่อไปเน้อ --------------------------------------------------------------------------------------------------------------------------- หน้า 8
พัฒนาเวบ็ ดว้ ย AngularJS สําหรับมอื ใหม่ ทีตอ้ งการใช้งานจรงิ แจกฟรใี นกลุ่มเฟสบคุ “กลุม่ นักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- กอ่ นจะไปหวั ขอ้ อืนๆ ต่อ ผมขออนญุ าติพืนทเี ล็กน้อยเพืออธบิ ายอะไรสกั หน่อยกอ่ นนะครบั ตลอดเนือหาในหนงั สือนีผมจะเนน้ วา่ สําหรับคนทาํ งาน ดงั นันเราจะไม่ไดม้ า อธบิ ายกันขนาดว่า บรรทัดนีคืออะไร คํานันคาํ นีคืออะไร เพราะว่าหากต้อง บอกกันทกุ โค้ดขนาดนันจะทาํ ให้ตอ้ งใช้เนอื ทีเยอะมาก และโดยทัวไปหากคน ทาํ งานอา่ นดกู ็เข้าใจได้อยา่ งรวดเรว็ ดังนนั ผมจะอธิบายเฉพาะส่วนสาํ คญั จริงๆ และจะพยายามยกตัวอย่างทกี ระชบั ไมเ่ ยินเยอ้ เพือประหยัดเวลา การเรียนร้ขู องคนอ่าน การสรา้ งตวั แปรหลายตวั พรอ้ มกันทเี ดยี ว ตวั อย่างนเี ราจะมาดูวา่ หากโปรแกรมเราตอ้ งการเกบ็ คา่ ต่างๆ หลาย อย่างไว้ในตัวแปรหลายตัวจะทาํ อย่างไร หรอื บางทีอาจจะเกบ็ ใส่ตัวแปร เดียว จะต้องทาํ อยา่ งไร มีวิธกี ารไหนบ้าง และเอาไปใชง้ านตอ้ งเขียนยงั ไง เรมิ จากง่ายๆ กอ่ น $scope สามารถเกบ็ ตวั แปรได้ไม่จาํ กดั เช่นเรา ต้องการเก็บตวั แปร 2-3 ตวั แบบน ี $scope.x = 10; $scope.y = 20; $scope.z = 30; ง่ายๆ แบบนเี ลยครบั พออยากเอาไปแสดงผลก็แค่วาง {{ x }} จบ คา่ ตวั แปรจะมาทันที ณ จุดทีเราวางตัวแปรเอาไว้ จดุ สําคญั คือว่าหากค่าตัวแปร มกี ารเปลียน ณ เวลาใดก็ตาม ทกุ ๆ จุดทวี างตัวแปรนีไว้จะเปลียนค่าทันท ี มาดูโคด้ กันดกี ว่าครบั จะได้เห็นภาพกนั แบบจะจะ --------------------------------------------------------------------------------------------------------------------------- หน้า 9
พัฒนาเว็บด้วย AngularJS สําหรับมอื ใหม่ ทตี ้องการใชง้ านจรงิ แจกฟรีในกล่มุ เฟสบุค “กล่มุ นกั เขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- ผลการทาํ งาน --------------------------------------------------------------------------------------------------------------------------- หน้า 10
พัฒนาเว็บด้วย AngularJS สําหรบั มอื ใหม่ ทตี อ้ งการใชง้ านจรงิ แจกฟรใี นกลมุ่ เฟสบุค “กลุ่มนกั เขียนโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- การสรา้ ง เก็บ และใช้งานตวั แปรแบบ Array เปนอกี หัวข้อทยี งั ไงก็ต้องเขยี น เพราะไดใ้ ชแ้ นน่ อนไมว่ ่าจะไปเขียน โปรแกรมแบบไหน โดยปกติเราจะเก็บค่าตา่ งๆ ไว้เปนชุดขอ้ มูลอยูแ่ ลว้ เช่น ข้อมลู ลกู ค้าจากฐานขอ้ มลู แลว้ ส่งมาเก็บใส่ Array สุดท้ายเอาไป loop แสดงผลในรูปแบบตารางเพือให้ แกไ้ ข ลบ และจัดการได้อย่างง่าย เรามาดกู นั วา่ จะเขยี นโคด้ ไดอ้ ยา่ งไร โดยผมจะยกตวั อย่างโคด้ นีให้ดคู รบั พอต้องการแสดงผลก็ทําการ loop ด้วยการใช้ ng-repeat ตามในภาพ เน้อ ขออธบิ ายดว้ ยแผนภาพอีกสกั นดิ เพือจะได้เห็นวา่ ส่วนไหน ไปเชือม โยงกันอย่างไร เพราะจากนีเราต้องใช้ความร้ตู รงนกี ันอกี เยอะ (กนั งงไว้ ก่อน) --------------------------------------------------------------------------------------------------------------------------- หน้า 11
พัฒนาเวบ็ ด้วย AngularJS สาํ หรับมอื ใหม่ ทตี ้องการใช้งานจรงิ แจกฟรีในกลมุ่ เฟสบคุ “กลมุ่ นักเขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- ผลการทํางานของโค้ดน ี --------------------------------------------------------------------------------------------------------------------------- หน้า 12
พัฒนาเวบ็ ด้วย AngularJS สําหรับมือใหม่ ทีตอ้ งการใช้งานจรงิ แจกฟรใี นกลุ่มเฟสบคุ “กลมุ่ นกั เขียนโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- การใชง้ าน ng-if ตรวจสอบเงือนไข สําหรับการเขยี นโปรแกรมทตี ้องการแสดงผลซับซ้อน มเี งอื นไขเขา้ มาเกียวขอ้ ง ทีนีล่ะเราต้องไดใ้ ช้คําสังพิเศษตัวหนงึ ชอื วา่ ng-if ครับ ซึง วางในหน้าของ HTML เพือเช็คคา่ ตวั แปรนนั ๆ ได้เลย ซงึ จะเชค็ ตัวแปร เดยี ว หรือวา่ ตวั แปรแบบ Array ขณะมีการ loop ก็ได้ ขอยกเอา ตวั อย่างโค้ดกอ่ นหนา้ นีมาเขยี นเพิมอีกนดิ หน่อย เพือประหยดั ระยะเวลาใน การเรียนของผู้อ่านนะครบั ซึงผมจะเตมิ ไปอีกเล็กน้อยดังน ี --------------------------------------------------------------------------------------------------------------------------- หน้า 13
พัฒนาเว็บดว้ ย AngularJS สําหรับมือใหม่ ทตี อ้ งการใช้งานจริง แจกฟรใี นกล่มุ เฟสบุค “กล่มุ นักเขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- ผลการทาํ งานของโคด้ ขออธบิ ายทิงทา้ ยเล็กน้อยกอ่ นจบหวั ขอ้ นเี นาะ คอื การใช้ ng-if เนียเราจะ ใช้เพือตรวจสอบคา่ ต่างๆ ว่าเปนจรงิ หรอื ไม่ หากจรงิ โปรแกรมก็จะแสดง ผล หรอื ทาํ งานในส่วนที ng-if ครอบเอาไว้ ซึงตรงนเี ราจะเพิมเติมเงอื นไข && || ได้หมดตามตอ้ งการเหมือนกับเราทเี ขียน if ธรรมดาในภาษา JavaScript นันแหละ เพียงแคแ่ ยกมาเขียนใสส่ ่วนของ HTML Code เทา่ นันเอง --------------------------------------------------------------------------------------------------------------------------- หน้า 14
พัฒนาเวบ็ ดว้ ย AngularJS สาํ หรับมือใหม่ ทีต้องการใช้งานจริง แจกฟรใี นกลุม่ เฟสบคุ “กลุ่มนักเขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- รู้จักและใช้งาน ng-click ของดยี ์ ทโี ลกรอ อันนเี ปนอีกสว่ นนงึ ทชี อบมากๆ ใน Angular.JS คอื การจดั การ event click ของสงิ ตา่ งๆ บนหนา้ จอ โดยปกติเนียเราก็ใส ่ onClick=”myFunction()” อยู่แล้วในโค้ด JavaScript แต่ทีนีมนั จะมอง ไมเ่ ห็นพวก function ทเี ราสรา้ งไวใ้ น $scope ของ controller ดงั นัน เพือให้เห็นเราต้องใช้คําวา่ ng-click เชน่ <button ng-click=”myFunc()”>Click Here</button> แบบนคี รับ ส่วนไอ้ตวั myFunc เราก็ไปเขียนใส่ไวใ้ น $scope อีกทีโดย กาํ หนดให้เปน function เหมอื นกบั JS Code ธรรมดานแี หละ เพือให้เห็นภาพการใช้งานมาลองดูโค้ดในภาพนกี นั ครบั ผลการทาํ งาน --------------------------------------------------------------------------------------------------------------------------- หน้า 15
พัฒนาเว็บด้วย AngularJS สาํ หรับมือใหม่ ทตี ้องการใช้งานจริง แจกฟรใี นกลมุ่ เฟสบคุ “กลุม่ นกั เขียนโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- เมอื เราคลิกปมุ หน้าเว็บก็จะแสดงคา่ ตัวแปรออกมาให้เห็น ภาพความสมั พันธข์ องคา่ ตา่ งๆ กับโคด้ ทเี ราเขยี นไปเมอื ก ี ขออธิบายเสริมเล็กนอ้ ยกอ่ นจบหัวข้อนีไปครบั เมอื เราคลิกที button ตัว ng-click จะไปวงิ หา function ชือว่า showMessage() ทอี ยูใ่ น $scope ภายใต้ controller ชือว่า MyController จากนันส่วนนีเองก็มี การสรา้ งตัวแปรชือ message ในบรรทัดที 7 นนั เอง และค่าตัวแปรก็จะ ถูกนํามาแสดงทบี รรทดั 17 ตามในภาพน ี หากเราใช้ onClick=”showMessage()” จะไม่พบการทํางานใดเพราะ JavaScript ไมอ่ าจมองเห็น function ทีอยูใ่ น $scope ของ Angular.JS ได ้ --------------------------------------------------------------------------------------------------------------------------- หน้า 16
พัฒนาเวบ็ ดว้ ย AngularJS สาํ หรบั มือใหม่ ทตี ้องการใชง้ านจรงิ แจกฟรีในกล่มุ เฟสบคุ “กล่มุ นักเขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- ใช้งานรว่ มกับ form ตวั อยา่ งทผี า่ นมาหลายๆ หัวขอ้ ผมไดอ้ ธิบายเกยี วกบั การใชง้ าน Angular พืนฐานไปพอสมควร บัดนีก็ไดเ้ วลาทเี ราจะมาเริมทาํ อะไรจรงิ ๆ จงั ๆ กนั มากขนึ อีกหน่อยเพราะว่ายังไงซะเรากห็ นไี มพ่ ้นการทําเว็บ หรือ เขียนโปรแกรมเกยี วกบั รับค่าจาก Form อยูแ่ ล้วแหละ ดงั นันตวั อยา่ งนี ผมจะเขียนเรอื งนี และอธิบายให้เหน็ วา่ ตวั แปรมนั มายงั ไง ไปยังไง เอ้าเรมิ กนั ดกี ว่ากบั โค้ดตัวอยา่ งแบบบา้ นๆ นีครบั ครงั แรกทเี ห็นโค้ดนหี ลายคนอาจจะรอ้ งออกมาว่า “อิหยงั วะ” ทาํ ไมต้อง เขียนให้ย่งุ ยากขนาดนีก็แคร่ บั คา่ จาก Form เอง เดยี วผมขออธบิ ายก่อน นะครับ ว่าทําไมต้องพาเขียนแบบนี (ทังทีเขยี นให้กระชับกวา่ นีกไ็ ด)้ เพราะ วา่ ผมตอ้ งการให้เหน็ ภาพของตวั แปรในกรณที ีมันแยกกันอย่รู ะหว่างตวั ที สาํ หรับ input กบั อีกตวั ทีใชส้ ําหรับ output เลยแยกเปน name และ nameValue --------------------------------------------------------------------------------------------------------------------------- หน้า 17
พัฒนาเวบ็ ด้วย AngularJS สําหรับมอื ใหม่ ทีตอ้ งการใชง้ านจรงิ แจกฟรีในกลุ่มเฟสบุค “กล่มุ นักเขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- ผลการทาํ งานกอ่ นกดปมุ เมือกดปมุ แลว้ เรามาดูผังความสัมพันธ์กันก่อนว่าโค้ดแต่ละส่วน ไปมาอย่างไร --------------------------------------------------------------------------------------------------------------------------- หน้า 18
พัฒนาเว็บดว้ ย AngularJS สาํ หรับมอื ใหม่ ทีตอ้ งการใชง้ านจริง แจกฟรีในกล่มุ เฟสบุค “กลุ่มนกั เขยี นโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- ทนี ีเห็นแล้วใชไ่ หมครบั ว่าพอเรากดแลว้ ค่าไหนไปไหน อย่างไร เอาละ่ มาดู ตวั อยา่ งกนั ตอ่ อีก จะสาธติ การเขยี นแบบเก็บคา่ จาก Form ลงใน object เพือให้โคด้ กระชับกวา่ เดิม แกไ้ ขโค้ดใหมใ่ หห้ น้าตาเปนแบบนีครับ ขอไม่แคปผลการทํางานอกี รอบนะ เพราะว่ามนั กท็ ํางานไดเ้ หมอื นเดิมแหละ แคโ่ คด้ เราเปลียนไป ดเู ปนระบบระเบียบมากขนึ กว่าเดิมเทา่ นนั เอง ไมม่ อี ะไร --------------------------------------------------------------------------------------------------------------------------- หน้า 19
พัฒนาเวบ็ ดว้ ย AngularJS สําหรบั มือใหม่ ทีตอ้ งการใชง้ านจรงิ แจกฟรใี นกลมุ่ เฟสบคุ “กลุม่ นักเขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- 2 Way Binding ปราบเซียน ประเดน็ เรอื งนเี ปนทถี กเถยี งกันอย่างกวา้ งขวางมากในบรรดาคน เขียน Angular.JS ว่าเปนปญหาให้เกิดการเขยี นโปรแกรมทียุ่งยากเกินไป แตค่ วามจริงมันไม่มีอะไรในกอไผ่ เปนเพียงเรืองความไม่เข้าใจ หรือเข้าใจ คลาดเคลือนของคนทยี ังใช้งาน Angular.JS ไม่มากพอเทา่ นันเอง กอ่ นไปดโู คด้ ตอ้ งขออธิบายสักนิดนึงกอ่ นวา่ 2 Way แปลวา่ 2 เส้นทางส่วน Binding กค็ ือผกู แปลกันแบบงา่ ยคือ การผูกตวั แปรไว้ 2 เส้นทางแต่เอาจริงๆ แลว้ เนยี หลายทางกวา่ นนั กไ็ ด้ เช่นเรามีการสร้าง Form และผูกกบั ตวั แปรไวจ้ ากนนั มกี ารเอาตัวแปรนไี ปใชใ้ นจุดอนื บนหน้า เดียวกันด้วย หากว่าคา่ ตวั แปรโดนเปลียนจะดว้ ยบรรทดั ไหนก็แลว้ แต่ ทุก จดุ จะเปลยี นกนั หมดเลย ไม่สนใจวา่ ตอนทีเปลียนคา่ นนั เปลียนเพราะโค้ด บรรทัดไหน บนก่อน หรือวา่ ล่างก่อน (งงใช่มะ) เพือให้เห็นภาพมากขนึ เรามาลองดโู คด้ 2 Way แบบพืนๆ กอ่ น เอา ทเี รียบง่ายสุดเลยกับตัวอยา่ งนคี รบั ผลการทํางาน --------------------------------------------------------------------------------------------------------------------------- หน้า 20
พัฒนาเวบ็ ดว้ ย AngularJS สาํ หรบั มือใหม่ ทตี อ้ งการใช้งานจรงิ แจกฟรใี นกล่มุ เฟสบุค “กลุ่มนักเขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- ในกรณนี ีหากคุณกรอกคา่ อะไรลงไป จะทําใหต้ ัวแปรนนั เปลียนคา่ และจุดที วางตัวแปรไวก้ จ็ ะเปลยี นค่าไปดว้ ยทันทเี ลย โดยไมต่ ้องสังอะไรแม้แต่ บรรทดั เดียว เรามาดอู ะไรกันต่ออกี หนอ่ ย ผลการทํางาน --------------------------------------------------------------------------------------------------------------------------- หน้า 21
พัฒนาเว็บด้วย AngularJS สาํ หรับมอื ใหม่ ทตี ้องการใช้งานจริง แจกฟรใี นกลุ่มเฟสบคุ “กลมุ่ นกั เขยี นโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- จดั การ loop ดว้ ย angular.forEach หวั ข้อนเี รามาดกู ันในสว่ นของการจัดการกบั ตัวแปรทเี ปน array แลว้ ทาํ การ loop เพืออ่านคา่ หรอื เอาค่าในแต่ละรอบไปทํางานอยา่ งอนื เชน่ เราตอ้ งการคน้ หาสนิ คา้ ทรี าคาเกนิ 100 บาท แลว้ แยกไปใส่ array อกี ชุด ก็ทาํ ไดง้ ่ายๆ ลองมาดตู วั อย่างแรกกัน ผลการทํางาน --------------------------------------------------------------------------------------------------------------------------- หน้า 22
พัฒนาเว็บดว้ ย AngularJS สาํ หรับมือใหม่ ทีตอ้ งการใช้งานจริง แจกฟรีในกลุ่มเฟสบคุ “กลุม่ นักเขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- ใหท้ าํ การคลิกขวาเพือเปดหน้าตา่ ง inspect เผือมีบางท่านไมร่ ้วู ธิ กี ารดัง นันผมขอสาธิตตามขนั ตอนนนี ะครบั จะพบหน้าต่างแบบน ี ทนี ีพอเรากดปมุ กใ็ ห้มาดูทสี ่วนของ console จะพบวา่ มขี อ้ มลู ออกมา ดังน ี --------------------------------------------------------------------------------------------------------------------------- หน้า 23
พัฒนาเว็บด้วย AngularJS สาํ หรบั มอื ใหม่ ทตี ้องการใชง้ านจรงิ แจกฟรีในกลมุ่ เฟสบคุ “กลุ่มนักเขียนโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- หากเราต้องการจัดการขอ้ มูลในแตล่ ะรอบใช้ if มาช่วยได ้ ผลการทาํ งาน --------------------------------------------------------------------------------------------------------------------------- หน้า 24
พัฒนาเวบ็ ดว้ ย AngularJS สําหรบั มอื ใหม่ ทตี ้องการใชง้ านจรงิ แจกฟรีในกล่มุ เฟสบคุ “กลมุ่ นกั เขียนโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- เลน่ กบั Arrow Function ของใหมท่ ชี าวเดฟรอคอย แต่ก่อนเวลาเราเขยี นพวก function ใน JavaScript ตอ้ งเขียน ยาวเปนกิโล ทีนีเขามีการเขียนแบบใหม่เขา้ มาช่วยใหโ้ ค้ดกระชบั มากขนึ เรียกว่า Arrow Function ครบั โดยใช้ () แทนคาํ วา่ function แล้วใช ้ => มาต่อ เช่น $scope.myFunction = () => { } ง่ายไหมล่ะครับจากนีไปในเนือหาหนงั สอื เล่มนผี มจะเขียน function ตา่ งๆ ดว้ ยวธิ ีการแบบ arrow function ไปจนหนา้ สดุ ท้ายเลยนะครบั เพราะว่า เปนรูปแบบมาตรฐานทีเหลา่ โปรแกรมเมอร์ยุคใหม่ใช้กนั แทนแบบเกา่ การทาํ route แบบง่ายๆ แตเ่ จง๋ โคตรรรรรรร ในส่วนนีผมจะพารูจ้ ักกบั route และใช้งานกันครบั กอ่ นอนื ขอ อธบิ ายก่อนวา่ การทํา route หมายถึงการเชือมต่อส่วนตา่ งๆ เขา้ กบั controller หมายความวา่ คุณจะทาํ เว็บหลายๆ หนา้ แยกจากกันได้ โดย อาจจะแยกคนละ controller ก็ได้ แล้วคลกิ ไปหนา้ ใหม่ (โดยทีหนา้ เวบ็ ไมร่ ี เฟรสเลย) มาดวู ธิ ีการกนั ครับเรมิ ต้นให้เราไปทเี วบ็ angularjs.org แลว้ กดทดี าว โหลด --------------------------------------------------------------------------------------------------------------------------- หน้า 25
พัฒนาเวบ็ ดว้ ย AngularJS สาํ หรบั มือใหม่ ทีตอ้ งการใช้งานจรงิ แจกฟรใี นกลุ่มเฟสบคุ “กลุ่มนกั เขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- ให้เลือกเปนแบบ zip ตามภาพน ี พอโหลดมาแลว้ ให้ทาํ การแตกไฟลอ์ อก จะพบว่ามไี ฟลม์ ากมายในนันตาม ภาพน ี --------------------------------------------------------------------------------------------------------------------------- หน้า 26
พัฒนาเวบ็ ดว้ ย AngularJS สาํ หรับมือใหม่ ทีต้องการใชง้ านจรงิ แจกฟรใี นกลุ่มเฟสบุค “กลมุ่ นกั เขียนโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- เลอื นมาล่างๆ จะพบว่ามีไฟล์ angular-route.js ตามภาพน ี ทาํ การกอปปไฟลน์ ีไปวางในโปรเจคโค้ดของเราขา้ งๆ กับ angular.js และ ให้สร้างไฟลต์ า่ งๆ ตามภาพนี แตว่ า่ ยงั ไม่ตอ้ งเขียนโคด้ ใดๆ เข้าไปนะครับ เดียวผมจะพาเขยี นทีละจดุ เพือให้สามารถใชง้ านการ route ไดเ้ ราตอ้ งนาํ โปรเจคไปรันกับ web server ต่างๆ ในทีนีขอใช้ apache web server ซงึ มมี ากับ โปรแกรม xampp เลยครับ หากทา่ นใดยังไม่ได้โหลดมาเก็บไว้รบกวน ทําการหาโหลดมาไว้ก่อน และทําการ start server ดว้ ย (เลือก start apache อย่างเดียวก็ไดค้ รับ) ทนี กี ็เอาโคด้ เราไปวางในนัน ต่อมาให้ทาํ การ --------------------------------------------------------------------------------------------------------------------------- หน้า 27
พัฒนาเว็บดว้ ย AngularJS สําหรบั มอื ใหม่ ทตี อ้ งการใช้งานจรงิ แจกฟรีในกลุ่มเฟสบุค “กลุม่ นักเขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- เปดไฟล์ index.html เขียนโคด้ ลงไปดังนี (สว่ นหน้าอนื ๆ ทีพาสร้างเขยี น อะไรลงไปก็ได้นะครบั ) อธบิ ายสกั หน่อย บรรทัดที 2: เปนการอา้ งองิ ไปหา route library ของ angularjs บรรทดั ที 4: ส่วนของ [‘ngRoute’] คอื การเรยี กใช้ Router Library ร่วมกับ app บรรทัดที 6-20: เปนการกาํ หนดผกู route เขา้ กับไฟล์ html ทเี ราสร้างไว ้ --------------------------------------------------------------------------------------------------------------------------- หน้า 28
พัฒนาเวบ็ ดว้ ย AngularJS สาํ หรับมอื ใหม่ ทีต้องการใช้งานจริง แจกฟรีในกล่มุ เฟสบุค “กลุ่มนกั เขยี นโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- บรรทดั ที 25-28: เปนการสร้างเมนู และผกู เข้ากับ route เวลาเราคลกิ หน้าต่างๆ บรรทดั ที 30: กาํ หนด ng-view ให้ร้วู ่าจดุ นจี ะเปลยี นแปลงเมอื มีการคลิก ไปหน้าอืน ทดสอบการทาํ งานจะพบวา่ เราคลิกไปหน้าตา่ งๆ ได้เลยโดยทเี วบ็ เราไม่รี เฟรส วิธีการนปี ระหยดั ทรพั ยากรเซิฟเวอรเ์ พราะไม่ตอ้ งโหลดอะไรเดิมๆ มาอีก และทําเทมเพลตง่ายขนึ ดว้ ย เชือมต่อ API ภายนอกงา้ ยง่าย จนตอ้ งรอ้ ง ตวั อยา่ งนีจะพาทําการเชือมต่อไปที api ภายนอกครับโดยมีวธิ ีเขยี น งา่ ยๆ เลยเพียงแคเ่ รียก $http ก็ใช้ไดเ้ ลย ส่วนจะส่ง get หรือ post ก็ แลว้ แต่เราตอ้ งการเดียวผมพาทาํ การสง่ 2 แบบนีกอ่ นดว้ ยตวั อยา่ งง่ายๆ กัน --------------------------------------------------------------------------------------------------------------------------- หน้า 29
พัฒนาเว็บด้วย AngularJS สาํ หรับมอื ใหม่ ทตี ้องการใชง้ านจริง แจกฟรีในกล่มุ เฟสบุค “กลมุ่ นกั เขยี นโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- หากต้องการส่งคา่ ไปพร้อมกับ parameter ตา่ งๆ ก็สามารถทําได้โดย การเติมโคด้ เขา้ ไปอกี ดังน ี --------------------------------------------------------------------------------------------------------------------------- หน้า 30
พัฒนาเวบ็ ดว้ ย AngularJS สําหรบั มอื ใหม่ ทีต้องการใชง้ านจริง แจกฟรีในกลุม่ เฟสบคุ “กลมุ่ นกั เขยี นโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- จัดการขอ้ มูลใน DropdownList สดุ ยอดโค้ดปราบเซียน สาํ หรับหัวขอ้ นีสาํ คัญมากๆ สมยั ทผี มหดั เขยี น Angular.JS ใหม่ๆ เรอื งนที าํ เอาปวดหวั ได้เหมือนกนั เพราะว่ามันจะผกู ค่ากันตรงๆ แล้ว กําหนด default value ไมไ่ ด้ ดงั นนั ผมเลยคดิ วา่ น่าจะตอ้ งทาํ ตวั อยา่ งนี ไว้ในหนงั สือด้วย ลองกนั ดคู รับ --------------------------------------------------------------------------------------------------------------------------- หน้า 31
พัฒนาเว็บดว้ ย AngularJS สําหรบั มอื ใหม่ ทตี ้องการใช้งานจริง แจกฟรใี นกลุม่ เฟสบุค “กลุ่มนกั เขียนโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- ผลการทํางาน แต่ถ้าหากเราต้องการนําคา่ ไปใชก้ ต็ อ้ งสร้าง ng-model มาผกู แล้ว กําหนดคา่ เรมิ ต้นใหก้ บั ข้อมลู --------------------------------------------------------------------------------------------------------------------------- หน้า 32
พัฒนาเว็บด้วย AngularJS สําหรบั มือใหม่ ทตี อ้ งการใชง้ านจริง แจกฟรีในกลุ่มเฟสบุค “กลมุ่ นักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- ผลการทาํ งานจะพบว่ามนั ไม่มคี า่ เริมตน้ ให ้ ดังนนั เราต้องเติมโค้ดไปอกี ดงั น ี ผลการทํางาน ใช้งาน ng-blur สําหรับส่วนนถี ือวา่ ได้ว่านยิ มใช้กนั มาก โดยสว่ นใหญจ่ ะใชก้ บั textbox เวลาทเี ราเอาเมาสไ์ ปกด แลว้ ออกจาก textbox เขาเรียกว่า เหตกุ าร blur event เรามาทดลองเขียนโค้ดกนั ดคู รับ --------------------------------------------------------------------------------------------------------------------------- หน้า 33
พัฒนาเวบ็ ด้วย AngularJS สาํ หรบั มือใหม่ ทตี อ้ งการใชง้ านจรงิ แจกฟรใี นกล่มุ เฟสบุค “กลุ่มนักเขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- ผลการทาํ งาน เมอื เอาเมาสไ์ ปกด แลว้ จากนนั กดทอี ืนหรอื กด tab บนคีย์บอร์ด ใช้งาน ng-submit ในบางกรณีทเี ราทําฟอรม์ แล้วต้องการให้ผู้ใชง้ านกดปมุ enter เพือ เปนการ submit ขอ้ มูลไปยงั function ตา่ งๆ สามารถทําได้โดยใช ้ ng-submit แต่วา่ ต้องใช้รว่ มกบั <form> tag นะครบั เชน่ การทาํ ฟอม --------------------------------------------------------------------------------------------------------------------------- หน้า 34
พัฒนาเว็บด้วย AngularJS สาํ หรับมอื ใหม่ ทีต้องการใช้งานจรงิ แจกฟรีในกลุ่มเฟสบคุ “กลุ่มนักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- บนั ทกึ ข้อมูล ฟอม login เขา้ ระบบอะไรพวกนี ส่วนมากคนใช้งานมักจะไม่ คอ่ ยอยากกดเมาสไ์ ปคลกิ ปมุ (ยกเว้นคนใชจ้ อสัมผสั ) เราลองมาดู ตวั อย่างโค้ดกนั ผลการทํางาน เมือเอาเมาสไ์ ปคลิกใสช่ ่อง textbox แล้วกด enter ใชง้ าน ng-change สําหรับบาง ui component เราอาจจะต้องใช้เหตุการณ ์ ng-change เพือจัดการเมอื มกี ารเปลยี นค่าในนัน เช่นในกรณขี อง dropdownlist พวกจังหวัด อาํ เภอ ประมาณนี หรืออย่างประเภทสินคา้ --------------------------------------------------------------------------------------------------------------------------- หน้า 35
พัฒนาเวบ็ ดว้ ย AngularJS สาํ หรบั มอื ใหม่ ทีตอ้ งการใช้งานจริง แจกฟรีในกลมุ่ เฟสบุค “กลมุ่ นักเขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- พอเลือกกท็ าํ การกรอกสนิ คา้ ใน table เอาละ่ ครับเดียวมาลองใช้งานกนั ดู สักหนอ่ ย ผลการทํางาน เมอื ทําการเปลียน หรือเลอื กรายการต่างๆ ใน select น ี ใช้งาน filter สาํ หรบั การใช้งาน filter คอื การกรองขอ้ มลู ทมี าจาก $scope เพือ ให้ง่ายในการคน้ หา โดยทเี ราไม่ตอ้ งไปแตะส่วนฐานข้อมลู เลย ช่วยใหล้ ด ภาระการทาํ งานของฐานข้อมูลไปไดม้ าก เชน่ ตอ้ งการค้นหา สินค้าทีชือมี --------------------------------------------------------------------------------------------------------------------------- หน้า 36
พัฒนาเว็บดว้ ย AngularJS สําหรบั มือใหม่ ทตี ้องการใช้งานจรงิ แจกฟรใี นกล่มุ เฟสบุค “กล่มุ นักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- ตัวอักษร “ก” ในชือสินคา้ เมอื พบแล้วตวั filter จะทําการคนื ค่ารายการ กลบั มาเปน array ให้เราไปทําการ loop แสดงผลได้ตามต้องการ เพือ ความเข้าใจมาลองเขียนโคด้ ตามตวั อย่างนกี ันครบั ผลการทํางาน เมือลองทําการปอนอกั ษรลงในชอ่ งค้นหา ใชง้ าน orderBy อีกหวั ข้อหนึงทนี า่ สนใจมากคอื การเรียงลาํ ดบั ข้อมลู เพือแสดงผลให้ สวยงาม โดยทเี ราไม่ตอ้ งไปใชพ้ ลังของฐานขอ้ มลู เลย นนั ก็คือการใช ้ orderBy ซงึ มีอยแู่ ล้วใน angularjs ครบั เขยี นง่ายดว้ ยนะ จะเรียงจาก --------------------------------------------------------------------------------------------------------------------------- หน้า 37
พัฒนาเวบ็ ด้วย AngularJS สําหรับมือใหม่ ทีตอ้ งการใชง้ านจริง แจกฟรใี นกล่มุ เฟสบคุ “กล่มุ นักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- น้อยไปมาก หรอื ว่าจากมากไปหานอ้ ยกไ็ ด้ แลว้ แตเ่ ราตอ้ งการเลย เดียว ผมสาธิตตัวอยา่ งให้ด ู ● หากเราต้องการเรียงจากนอ้ ยไปหามากก็แคแ่ กไ้ ข true เปน false ผลการทํางาน Workshop ระบบสมดุ โทรศพั ท์ ดว้ ย Node.js สําหรบั ตัวอยา่ งเวคิ ชอปนีผมจะไม่พู ดถงึ การตดิ ตัง Node.JS นะ ครบั ให้ผ้อู า่ นทีต้องการทําตามเวิคชอปหาข้อมูลวธิ ีการติดตงั และคอนฟก เบืองต้นดว้ ยตวั เอง หรอื หากจะให้ดศี กึ ษาการเขียนโปรแกรมดว้ ย --------------------------------------------------------------------------------------------------------------------------- หน้า 38
พัฒนาเวบ็ ด้วย AngularJS สําหรับมือใหม่ ทตี ้องการใช้งานจรงิ แจกฟรีในกลมุ่ เฟสบุค “กลุ่มนักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- Node.JS กอ่ นกจ็ ะดมี ากๆ ยงั ไงผมขอเรมิ ด้วยการเช็คเวอรช์ ันของ Node.JS ในเครอื งก่อนเพือจะได้ไปทศิ ทางเดยี วกัน ทนี ีเราทําการสร้างโปรเจคด้วย ExpressJS กันครับ (ใครทยี งั ไมไ่ ด้ติดตัง ดวู ิธกี ารติดตังไดท้ ี expressjs.com นะครับ) พอเราติดตัง express generator มาแล้วก็ทําการสรา้ งโปรเจคครับ ใน ตัวอย่างนผี มจะทําการสรา้ งโดยเลอื กใช้ ejs เปนตวั ออกแบบหนา้ เวบ็ เพือ ให้งา่ ยตอ่ การพัฒนาชินงาน จะได้โครงสร้างโปรเจคมาดงั น ี --------------------------------------------------------------------------------------------------------------------------- หน้า 39
พัฒนาเวบ็ ดว้ ย AngularJS สําหรบั มือใหม่ ทตี ้องการใชง้ านจริง แจกฟรใี นกลุ่มเฟสบุค “กลุ่มนักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- เขา้ ไปใน myapp ติดตังตวั เสริมต่างๆ ติดตัง nodemon ทดสอบการทาํ งานของ server --------------------------------------------------------------------------------------------------------------------------- หน้า 40
พัฒนาเวบ็ ดว้ ย AngularJS สาํ หรับมือใหม่ ทีต้องการใชง้ านจริง แจกฟรใี นกลมุ่ เฟสบุค “กลุ่มนกั เขยี นโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- เปดที Chrome แลว้ ทดสอบด ู พอทดสอบผ่านแล้วใหก้ ด ctrl + c เพือปด server ก่อนเพราะเรายังตอ้ ง ลงตวั เสริมกนั ต่ออกี นนั คอื ติดตงั ตัวเชอื มต่อ mysql ทาํ การสรา้ งฐานขอ้ มูลชือว่า db_phonebook --------------------------------------------------------------------------------------------------------------------------- หน้า 41
พัฒนาเวบ็ ดว้ ย AngularJS สาํ หรบั มือใหม่ ทตี ้องการใช้งานจริง แจกฟรใี นกล่มุ เฟสบคุ “กลุ่มนักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- สร้างตารางให้มีโครงสร้างดังน ี ดาวโหลดโปรแกรม postman มาลงไวก้ อ่ นเพือใชท้ ดสอบ API ทเี ราจะทาํ กนั ครับ ใครโหลดแล้วขา้ มจดุ นีได้เลยใครยงั ไม่โหลดหามาลงไวเ้ ลยเน้อ จากนนั ไปทีโปรเจคเราเขยี นโค้ดดังน ี --------------------------------------------------------------------------------------------------------------------------- หน้า 42
พัฒนาเว็บดว้ ย AngularJS สาํ หรับมอื ใหม่ ทตี ้องการใชง้ านจริง แจกฟรีในกลมุ่ เฟสบคุ “กลมุ่ นกั เขียนโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- อธบิ ายโค้ดทลี ะสว่ นดงั น ี 1. เปนการนําเข้าไลบราลีเพือให้เชือมตอ่ กับฐาน mysql ได ้ 2. ทาํ การเชือมตอ่ กับฐาน mysql ครบั 3. สรา้ ง route ชือ /insert และเขยี นโคด้ เชอื มตอ่ ฐาน จากนนั ก็ ทําการสังให้ insert ขอ้ มลู เข้าไป ทาํ การ start โปรแกรมใน nodejs --------------------------------------------------------------------------------------------------------------------------- หน้า 43
พัฒนาเวบ็ ด้วย AngularJS สาํ หรบั มือใหม่ ทีตอ้ งการใชง้ านจริง แจกฟรใี นกลมุ่ เฟสบุค “กลุ่มนกั เขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- เปดโปรแกรม postman แล้วทดสอบการทํางานของโปรแกรมเรา เพือให้เข้าใจสาํ หรบั มือใหม่กับโปรแกรม postman ขออธิบายตามภาพและ จดุ ทผี มไฮไลสีเหลอื ง ดงั น ี 1. เลือกการส่งขอ้ มลู เปนแบบ POST และส่งไปยงั api ทีเราเขียนไว้ กอ่ นหนา้ น ี 2. เลอื กส่งขอ้ มลู โดยระบุวา่ สง่ ไปทาง body 3. เลอื กว่าส่งข้อมูลไปแบบ x-www-form-urlencoded 4. กําหนดตัวแปรทีจะสง่ ไป ประกอบดว้ ย name, phone 5. ผลตอบกลบั จากทาง nodejs server เมอื ไปดขู ้อมลู ในฐานจะพบวา่ มีรายการเพิมเข้ามา --------------------------------------------------------------------------------------------------------------------------- หน้า 44
พัฒนาเว็บดว้ ย AngularJS สําหรบั มือใหม่ ทีต้องการใชง้ านจรงิ แจกฟรีในกลุม่ เฟสบุค “กลุม่ นักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- จบไปกบั ตัว api แรกของเราทนี จี ะพาสรา้ งเพิมอกี พอเราทาํ ครบหมด สามารถเอา api เหลา่ นีไปใชต้ อ่ ไดก้ ับ frontend อนื เช่น angularjs, react, vuejs, android app, ios, desktop โดยทเี ราไม่ต้องให้สิง เหลา่ นันต่อกบั ฐานข้อมลู เลย เอาล่ะครบั เรามาต่อกันเนอะให้เติมโคด้ เข้าไปอีกในไฟล์ index.js ดงั น ี ทดสอบการทํางานใน postman กันครบั --------------------------------------------------------------------------------------------------------------------------- หน้า 45
พัฒนาเว็บด้วย AngularJS สําหรบั มอื ใหม่ ทตี อ้ งการใชง้ านจริง แจกฟรใี นกล่มุ เฟสบุค “กลุ่มนักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- อธิบายการทาํ งาน 1. ทาํ การส่งข้อมูลไปแบบ GET ไปยัง phonebookAll 2. ผลตอบกลบั จากทาง NodeJS เพือใหก้ ารเขยี นโค้ดกระชับมากขนึ และงา่ ยต่อการจดั การประสทิ ธิภาพ ของการใชง้ านฐานข้อมลู ขอใหแ้ กไ้ ขโคด้ เชอื มต่อฐานดงั น ี วิธกี ารนีจะทําการเชอื มต่อแบบ pool คือไมต่ อ้ งคอยเปด ปด การเชือมตอ่ ใหม่ทุกครัง จะมปี ระสทิ ธภิ าพกวา่ และเขยี นโคด้ ง่ายกวา่ ดว้ ย --------------------------------------------------------------------------------------------------------------------------- หน้า 46
พัฒนาเว็บดว้ ย AngularJS สําหรบั มอื ใหม่ ทตี อ้ งการใช้งานจรงิ แจกฟรใี นกลุ่มเฟสบุค “กลมุ่ นักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- ต่อมาทําการเติมโค้ดเขา้ ไปอกี ในไฟล์ index.js ทดสอบการทาํ งานที postman ขออธิบายเล็กน้อยนะครบั สาํ หรบั ด้านบนคอื การสง่ คา่ แบบ GET ไปท ี phonebookInfo/1 โดยที 1 กค็ ือรหสั id ทีจะไปคน้ ในฐานข้อมูลนนั เอง ส่วนดา้ นลา่ งคือผลที NodeJS ตอบมาครับ แก้ไขโคด้ สว่ นของการ insert อีกนิดหน่อย --------------------------------------------------------------------------------------------------------------------------- หน้า 47
พัฒนาเว็บด้วย AngularJS สาํ หรบั มอื ใหม่ ทตี ้องการใช้งานจรงิ แจกฟรีในกลมุ่ เฟสบคุ “กลมุ่ นกั เขยี นโปรแกรม” โดย อ.กบ ถาวร ศรเี สนพิลา --------------------------------------------------------------------------------------------------------------------------- ใสข่ ้อมลู เขา้ ไปอีก 2 รายการ ทนี เี รามาเขยี น api เพิมอกี ทดสอบการทาํ งานดว้ ย postman --------------------------------------------------------------------------------------------------------------------------- หน้า 48
พัฒนาเวบ็ ด้วย AngularJS สําหรบั มอื ใหม่ ทตี ้องการใชง้ านจริง แจกฟรีในกลุ่มเฟสบคุ “กล่มุ นกั เขียนโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- จะพบวา่ รายการหายไปละ เขยี น api เพิมเขา้ ไปอีก --------------------------------------------------------------------------------------------------------------------------- หน้า 49
พัฒนาเว็บดว้ ย AngularJS สาํ หรบั มอื ใหม่ ทตี อ้ งการใชง้ านจริง แจกฟรใี นกลมุ่ เฟสบุค “กลุ่มนักเขยี นโปรแกรม” โดย อ.กบ ถาวร ศรีเสนพิลา --------------------------------------------------------------------------------------------------------------------------- ทดสอบการทํางานดว้ ย postman สําหรับสว่ นนีขอไม่อธิบายนะครบั เพราะว่าผู้อ่านทที ําตามมาเรอื ยๆ จะเขา้ ใจ แต่ละจุดได้เลยโดยทีผมไมต่ ้องอธิบายอะไรเพิมเตมิ จะพบว่าขอ้ มลู มกี ารอัพเดตเรียบร้อย --------------------------------------------------------------------------------------------------------------------------- หน้า 50
Search
