วิชา การเขียนโปรแกรมคอมพวิเตอร์เพื่องานสารสนเทศ1

136 เอกสารอา้ งอิง ชาญชัย ศภุ อรรถกร. (2558). สร้างเว็บแอพพริเคชนั PHP MySQL+AJAX jQuery ฉบบั สมบูรณ์. กรุงเทพฯ: รไี วว่า. สมศกั ดิ์ โชคชัยชตุ กิ ลุ . (2550). Insight PHP ฉบับสมบรู ณ.์ กรงุ เทพฯ: โปรวชิ ัน่ Joyce Farrell. (2013). A Beginner’s Guide to Programming Logic and Design Introductory. 7th ed. China: Course Technology, Cengage Learning. Tutorial Republic. (2016). PHP-tutorial. 2016, May 31. [online], Available HTTP: https://www.tutorialrepublic.com/php-tutorial/ W. Jason Gilmore. (2010). Beginning PHP and MySQL From Novice to Professional. 4th ed. USA.

แผนบริหารการสอนประจาบทท่ี 7 เนอ้ื หาประจาบทที่ 7 การสรา้ งฟอรม์ (HTML Form) รบั สง่ ข้อมลู การทางานของฟอร์ม การสร้างฟอร์มรับข้อมูล ชอ่ งรบั ขอ้ มลู ต่างๆ ในฟอรม์ การสง่ ผ่านข้อมูลระหว่างเวบ็ เพจ คกุ กี้ (Cookie) และ เซสชั่น (Session) วัตถปุ ระสงคเ์ ชงิ พฤตกิ รรม เมอื่ ศึกษาบทเรยี นน้แี ล้ว ผเู้ รียนมพี ฤติกรรมดังน้ี 1. อธบิ ายเกยี่ วกับฟอร์ม องคป์ ระกอบของฟอร์ม และการส่งผ่านขอ้ มูลระหว่างเวบ็ เพจ 2. บอกหลักการทางานของคุกกี้ และเซสช่นั 3. สามารถเขียนโปรแกรมสร้างฟอร์มรับส่งข้อมูล และแสดงผลข้อมูลที่รับมาจากเว็บ เซริ ์ฟเวอรต์ ามแบบฝึกหดั ประจาบทได้อย่างเหมาะสม 4. สามารถเขียนโปรแกรมทีน่ าคกุ กหี้ รือเซสชนั่ ไปประยกุ ต์ได้ วธิ ีสอนและกิจกรรมการเรียนการสอน 1. วิธีสอน 1.1 บรรยาย สาธติ 1.2 อภิปราย คน้ ควา้ เพ่ิมเติม 1.3 นักศกึ ษาทาแบบฝึกหัด และผสู้ อนตรวจแบบฝึกหดั 1.4 มอบหมายแบบฝกึ หดั เป็นการบ้านเพื่อทบทวนบทเรยี น 2. กจิ กรรมการเรียนการสอน สปั ดาห์ 13-16 (16 ชว่ั โมง) 2.1 ผ้สู อนอธิบายและสาธติ เนื้อหา เปิดโอกาสใหผ้ ู้เรยี นซักถามปัญหาในหวั ขอ้ ที่ยงั ไม่เขา้ ใจ ให้ผเู้ รียนคน้ คว้าเพมิ่ เตมิ จากอินเตอรเ์ นต็ และเอกสารประกอบการสอน อภิปราย และสรปุ เนอ้ื หาสาระสาคัญรว่ มกนั 2.2 ผ้เู รียนทาแบบฝึกหดั ประจาบทและตอบคาถามลงใน Google Classroom เพ่อื ให้ผ้สู อนตรวจ อธิบายและช้แี จงคาตอบท่ีถกู ต้อง

138 สอื่ การเรยี นการสอน 1. เอกสารประกอบการสอนการเขียนโปรแกรมคอมพวิ เตอรเ์ พอ่ื งานสารสนเทศ 1 2. เครอ่ื งคอมพวิ เตอร์ 3. PowerPoint เนอ้ื หาบทที่ 7 4. ส่ือออนไลน์ช่วยสอน : โปรแกรม Google Classroom การวัดผลและประเมินผล 1. การวัดผล สังเกตจากการตอบคาถาม ตรวจแบบฝึกหดั 2. การประเมินผล ผู้เรียนสามารถตอบคาถามและทาแบบฝึกหัดไดถ้ กู ต้อง ร้อยละ 80

บทท่ี 7 การสร้างฟอร์ม (HTML Form) รับส่งข้อมูล การเขียนโปรแกรมบางระบบงานต้องการให้ผู้ใช้กรอกข้อมูลบางอย่างตามท่ีต้องการนั้น จาเป็นจะต้องศึกษาเก่ียวกับฟอร์มหรือช่องรับข้อมูลเพื่อท่ีจะได้เลือกใช้งานอย่างเหมาะสม เช่น ระบบงานรบั สมัครสมาชกิ ห้องสมดุ ท่ผี สู้ มคั รจะตอ้ งกรอกขอ้ มลู สว่ นตัวให้กบั ระบบ เป็นตน้ ซึ่งภายใน บทน้ีจะกล่าวถึงหลักการทางานของฟอร์ม การสร้างฟอร์มเพ่ือกรอกรายละเอียดท่ีต้องการด้วยภาษา HTML การส่งผ่านข้อมูลระหว่างเว็บเพจ ท้ายบทได้เพิ่มเน้ือหาเก่ียวกับหลักการทางานของตัวแปร ประเภทคุกก้ี และเซสชันที่ใช้ในการติดตามการทางานของผู้ใช้ในระบบ โดยจะเก็บข้อมูลการใช้งาน ต่างๆ ของผู้ใช้ไว้ ทาให้ง่ายในการติดตามและเพิ่มความปลอดภัยของข้อมูล เพ่ือเป็นพ้ืนฐานในการ เขยี นโปรแกรมระบบงานทม่ี ีการจดั เกบ็ ขอ้ มูลลงในฐานข้อมูลต่อไป การทางานของฟอร์ม ฟอร์ม (Form) คือหน้าเว็บที่รวมช่องรับข้อมูลต่างๆ เช่น ช่องกรอกข้อความบรรทัดเดียว (text field) ช่องกรอกข้อความแบบหลายบรรทัด (text area) กล่องตัวเลือก (checkbox) ปุ่ม ตัวเลือก (radio button) รายการตัวเลือก (select) และปุ่มกด (button) เป็นต้น โดยสามารถสร้าง ด้วยภาษา HTML พร้อมกาหนดวิธีการส่งข้อมูล และระบุไฟล์ปลายทางท่ีจะส่งข้อมูลไปประมวลผล ซึ่งเป็นไฟล์ประเภทสคริปต์ที่สร้างด้วยภาษาต่างๆ เช่น สร้างด้วยภาษา PHP, ASP, JavaScript และ Perl เป็นต้น ไฟล์สคิปต์เหล่านี้จะทางานก็ต่อเมื่อมีการร้องขอ (request) เข้าไปยังเครื่องเซิร์ฟเวอร์ เท่านั้น ฟอร์มจะไม่สามารถแสดงผลจากการป้อนข้อมูลออกทางเว็บเบราว์เซอร์ได้ ตัวอย่างฟอร์มรับ ข้อมูลจากภาพท่ี 7.1 เป็นหน้าจอแรกสาหรับล็อกอินก่อนเข้าใช้งานระบบสารสนเทศต่างๆ ท่ีผู้ใช้มี สิทธิ์ และภาพที่ 7.2 แสดงการทางานของฟอรม์ (guru99, 2016) ภาพท่ี 7.1 หน้าจอล็อกอนิ (Login Form)

140 ภาพท่ี 7.2 การทางานของฟอรม์ (Form HTML) ท่มี า : (guru99, 2016) จากภาพที่ 7.2 หน้าเว็บ Login form สาหรับให้ผู้ใช้กรอกรายละเอียดตามที่ระบบงาน ต้องการ จากน้ันกดปุ่มยืนยันการทางาน เพื่อส่งข้อมูลดังกล่าวตามวิธีการส่งท่ีกาหนดไปยังไฟล์ ปลายทางที่เก็บไว้ในเครื่องเซิร์ฟเวอร์ (server.php) ไฟล์ดังกล่าวเมื่อถูกร้องขอจะประมวลผลท่ีฝั่ง เซิร์ฟเวอร์ การสร้างฟอรม์ รบั ข้อมลู สาหรับการสร้างฟอร์มรับข้อมูลน้ันจะสร้างจากคาสั่งภาษา HTML ผ่านเครื่องมือหรือ โปรแกรมประเภท “text editor” เช่น Notepad หรือ Editplus เป็นต้น หรือใช้โปรแกรม DreamweaverCS6 ก็ได้ตามความถนัดของนักเขียนโปรแกรม คาส่ังในภาษา HTML ท่ีใช้คือ แท็ก <form>….</form> มรี ปู แบบการสรา้ งดังน้ี (สมศกั ดิ์ โชคชยั ชุตกิ ลุ , 2550: 162-162; พรวนา รัตนชู โชค, 2557: 107-108) ชอ่ื ฟอรม์ วธิ ีการส่ง ข้อมลู รปู แบบ < form name= \"form_name\" method= \"get| post\" action= \"url\"> .... < / form> ไฟลป์ ลายทางท่จี ะส่งไป ประมวลผล จากรูปแบบขา้ งตน้ แท็ก <form> ประกอบด้วยแอตตรบิ วิ ต์หลักท่ีจะต้องกาหนดสาหรับการ ใชง้ าน ซ่ึงมรี ายละเอียดท่ีแสดงไวใ้ นตารางที่ 7.1 ดังน้ี

141 ตารางที่ 7.1 รายละเอียดแอตตริบวิ ตห์ ลกั ของ แทก็ <form> แอตตรบิ วิ ต์ รายละเอียด Name กาหนดชื่อฟอรม์ เพ่ือใช้ในการอ้างถงึ ฟอร์ม Action กาหนดพาธและชอ่ื ไฟลป์ ลายทางทจี่ ะส่งข้อมูลใหไ้ ปประมวลผล หรอื สามารถระบเุ ป็น url ได้ Method กาหนดวิธกี ารส่งข้อมลู ไปยังไฟล์ปลายทางทรี่ ะบุไว้ใน แอตตริบวิ ต์ Action มีอยู่ 2 วิธีให้เลอื กคือ 1. get วิธีนจี้ ะนาคา่ ของช่องรับข้อมลู รวมไปกบั ไฟล์ปลายทาง หรือ url ดังภาพท่ี 7.3 2. post การส่งขอ้ มลู วธิ นี เ้ี หมาะกบั งานท่ึต้องการเก็บข้อมลู เปน็ ความลบั โดยจะไมเ่ ห็นค่าของช่องรับข้อมลู ทีส่ ่งไปยังไฟล์ปลายทาง ดงั ภาพที่ 7.4 Enctype กาหนดชนิดการเขา้ รหัสขอ้ มูล โดยคา่ โดยปริยายคือ “application/x- www-form-urlencode” สว่ นกรณที ี่มีการอัพโหลดไฟลข์ ึ้นไปเกบ็ ไว้ เซอร์เฟอร์จะกาหนดคา่ เป็น “multipart/form-data” ภาพที่ 7.3 ผลการส่งข้อมลู แบบ get ทมี่ า : (guru99, 2016) จากภาพท่ี 7.3 แท็ก <form> ในภาษา HTML ได้กาหนดค่าของแอตตริบิวต์ action เป็น registration_form.php ซ่ึงเป็นไฟล์ปลายทางท่ีจะส่งข้อมูลจากช่องรับข้อมูลไปประมวลผล จากนั้น กาหนดค่าของแอตตริบวิ ต์ method เปน็ get ซึ่งเป็นวธิ กี ารส่งข้อมูลทีน่ าค่าจากช่องรบั ข้อมูลต่อท้าย ไปกับ url ซึง่ จะมองเห็นคา่ ขอ้ มลู ท่สี ง่ ไปมอี ะไรบ้าง

142 ภาพท่ี 7.4 ผลการสง่ ข้อมูลแบบ post ทมี่ า : (guru99, 2016) จากภาพที่ 7.4 มกี ารกาหนดคา่ ให้กับแอตตริบวิ ตเ์ หมือนกบั ไฟล์ในภาพท่ี 7.3 แต่ต่างกันตรง การกาหนดค่าให้กับแอตตริบิวต์ method ซึ่งกาหนดค่าเป็น post น้ันคือจะไม่สามารถมองเห็นวา่ ส่ง ค่าอะไรบ้างจากชอ่ งรับข้อมลู ไปให้ไฟล์ปลายทางท่จี ะประมวลผล ชอ่ งรับข้อมลู ต่างๆ ในฟอรม์ ภายในแท็ก <form> มีช่องรับข้อมูลให้เลือกใช้ตามความเหมาะสมอยู่หลายชนิด สามารถ สร้างช่องรับข้อมูลโดยใช้แท็กของภาษา HTML คือ <input>, <textarea>…..</textarea> และ <select>…</select> โดยจะแทรกลงไประหว่างแท็ก <form>...</form> ซึ่งมีรายละเอียดการใช้ งานดังนี้ (ชาญชยั ศภุ อรรถกร, 2558: 140-150; tutorialspoint, 2016) 1. การสร้างชอ่ งรบั ข้อมูลด้วยแท็ก <input> ผา่ นการกาหนดคา่ ใหก้ ับแอตตรบิ วิ ต์ type ของ แท็ก <input> ซึง่ มดี ้วยกนั อย่หู ลายประเภทดังแสดงตามตารางที่ 7.2 ตารางที่ 7.2 รายละเอยี ดคา่ ท่กี าหนดให้กบั แอตตริบิวต์ type ของแท็ก <input> แอตตริบิวต์ type รายละเอยี ด <input type=\"text\"> ชอ่ งรับบรรทัดเดยี ว ทส่ี ามารถกาหนดจานวนตัวอักษรทร่ี บั ได้และ ความกวา้ งของช่องรับ <input type=\"password\"> ช่องรบั รหัสผา่ นบรรทดั เดยี ว <input type=\"hidden\"> ช่องรบั ซอ่ นค่า คา่ ท่รี บั จะไม่แสดงท่หี น้าเวบ็ แต่ส่งไปมาระหวา่ ง หน้าเว็บได้

143 แอตตรบิ วิ ต์ type รายละเอยี ด <input type=\"checkbox\"> กล่องตวั เลอื ก เป็นตวั เลอื กทเ่ี ลือกไดห้ ลายตัวเลอื ก <input type=\"radio\"> ุป่มตวั เลือก เปน็ ตวั เลือกท่ีสามารถเลือกไดเ้ พยี งตัวเลือกเดียว <input type=\"submit\"> ป่มุ กดยืนยนั การทางาน <input type=\"reset\"> ปมุ่ กดยกเลิกการทางาน <input type=\"button\"> ปุ่มกด <input type=\"file\"> ช่องรบั ชือ่ ไฟล์ ใช้สาหรับเลือกชื่อไฟล์ เพ่ืออัพโหลดไปเก็บไว้บน เซริ ์ฟเวอร์ ตัวอย่างการใช้งานแท็ก <input> และกาหนดค่าให้กับแอตตริบิวต์ type ที่ทาไปแทรกไว้ใน แท็ก <form> ซ่ึงในการสร้างฟอร์มรับข้อมูลน้ันจะใช้โปรแกรม Dreamweaver ในการดาเนินงาน โดยโปรแกรมไดเ้ ตรยี มเครอื่ งมอื Forms เพื่อใชส้ ร้างฟอร์มดังภาพที่ 7. 5 ดังนี้ เครอื่ งมอื Form แทก็ <form> ช่องรบั บรรทดั เดียว ช่องรับซอ่ นคา่ ช่องรับหลายบรรทัด รายการตวั เลือก ช่องรบั ชื่อไฟล์ ปมุ่ กด กล่องตัวเลอื ก ปุ่มตวั เลือก ภาพที่ 7.5 เครอ่ื งมือ Forms ท่ใี ชใ้ นการสรา้ งฟอร์ม

144 การสร้างฟอรม์ รบั ข้อมูลดว้ ยโปรแกรม Dreamweaver สามารถดาเนนิ การดังภาพที่ 7.6 1. คลิกที่ Form 2.ปรากฏเสน้ ประสีแดง หน้าจอออกแบบ 3.ท่ี Properties สามารถกาหนด 4.ไฟลป์ ลายทางในการส่ง แอตตรบิ วิ ตข์ อง <form> ได้ ขอ้ มลู ไปประมวลผล 5.ชื่อฟอร์ม 6.วิธกี ารสง่ ข้อมลู 7.วิธกี ารเขา้ รหสั ขอ้ มลู ภาพท่ี 7.6 การสร้างฟอร์มรบั ข้อมูลด้วยโปรแกรม Dreamweaver จากภาพท่ี 7.6 ชุดคาสงั่ ภาษา HTML เรมิ่ ต้นทีโ่ ปรแกรม Dreamweaver สรา้ งไว้ให้คือ < html> < body> < form name= \"form1\" method= \"post\" action= \"\"> < / form> < / body> < / html> ซ่ึงสามารถกาหนดค่าแอตตริบิวต์หลักของแท็ก <form> ได้ตามการนาไปใช้งาน เช่น จาก ชุดคาสั่งข้างต้น แอตตริบิวต์ name มีค่าเป็น “form1” แอตตริบิวต์ method มีค่าเป็น “post” และแอตตริบิวต์ action ยังไม่ระบุค่า เป็นต้น นักเขียนโปรแกรมสามารถแก้ไขหรือกาหนดค่าของ แอตตรบิ ิวตอ์ นื่ เพิ่มเติมไดเ้ ช่นกนั เมื่อเร่ิมต้นสร้างฟอร์มด้วยแท็ก <form> แล้วต่อจากน้ันจะเป็นการเพิ่มช่องรับข้อมูลที่นา แทก็ <input> รปู แบบตา่ งๆ มาแทรกภายในแทก็ <form> ดงั นี้

145 ตัวอย่างท่ี 7.1 เพิ่มและกาหนดคุณสมบัติ (Properties) ของช่องรับบรรทัดเดียว (text field) มี ขนั้ ตอนดงั น้ี 1. แทรกตารางหรือแท็ก <table> เพ่ือจัดตาแหน่งของช่องรับข้อมูลบนหน้าจอให้น่าใช้งาน ซ่ึงจะต้องแทรกระหว่างแท็ก <form> หรือเส้นประสีแดง น้ันคือต้องวางเคาร์เซอร์ในเส้นประสีแดง กอ่ น แล้วจึงเรม่ิ ดาเนนิ การตามขน้ั ตอนในภาพที่ 7.7a ภาพที่ 7.7b และ ภาพท่ี 7.7c 2. คลิกที่ Table 1. ท่ี Insert แลว้ เลอื ก Common จะแสดงหน้าจอดงั ภาพที่ 7.7b ภาพที่ 7.7a การเลอื กแท็ก <table> 3. เบื้องตน้ กาหนดจานวน แถวและคอลมั นข์ อง Table 4. เลอื กรูปแบบของ Table ให้หัวตารางแสดงตวั อักษรเขม้ 5. กดปมุ่ OK แลว้ จะแสดง ดงั หน้าจอภาพที่ 7.7c ภาพที่ 7.7b ขน้ั ตอนการสรา้ งตาราง

146 6. ตาราง 2 คอลมั น์ 9 แถว 7. คณุ สมบตั ขิ องตารางให้กาหนดค่าดงั นี้ แทรกอยใู่ นแทก็ <form> ความกว้าง (W) ของตารางเป็น 60% ตาแหนง่ ตาราง (Align) เปน็ “Center” ภาพท่ี 7.7c ตารางและการกาหนดคณุ สมบัติของตาราง 2. แทรกช่องรับบรรทัดเดียวหรือ “text field” วางเคอรเ์ ซอร์ในตาแหน่งทจ่ี ะแทรก จากนน้ั ดาเนินการตามขน้ั ตอนในภาพท่ี 7.8a ภาพท่ี 7.8b และ ภาพที่ 7.8c 1. พมิ พข์ อ้ ความ 3. ที่ Forms คลิก “text ตามตัวอยา่ ง field” เพือ่ แทรกใน ตาแหน่งท่จี ะให้กรอกชอ่ื 2. คลกิ ตาแหนง่ ท่ีจะ แทรก “text field” ภาพที่ 7.8a ใส่รายละเอียดท่ีต้องการลงในตาราง

5. Properties ของ “text 147 field” สาหรบั กรอกชอ่ื 4. คลิกท่ี “text field” เพ่อื กาหนด Properties ภาพที่ 7.8b การกาหนด Properties ของ “text field” สาหรับกรอกช่อื สาหรบั การสร้างช่องรบั บรรทัดเดยี วสาหรบั กรอกนามสกลุ ให้ทาซ้าขนั้ ตอนท่ี 2-4 จากน้นั กาหนด Properties ของ “text field” สาหรบั กรอกนามสกลุ รายละเอียดตามภาพท่ี 7.8c ภาพท่ี 7.8c การกาหนด Properties ของ “text field” สาหรบั กรอกนามสกลุ ผลลัพธ์ที่ไดจ้ ะแสดงดงั ภาพที่ 7.9 ภาพที่ 7.9 ผลลัพธ์และชุดคาสง่ั การแทรกช่องรบั บรรทดั เดียวสาหรบั กรอกชือ่ และนามสกลุ

148 ตัวอย่างท่ี 7.2 เพิ่มและกาหนดคุณสมบัติ (Properties) ของช่องรับรหัสผ่านบรรทัดเดียว (text field) โดยจะแทรกต่อท้ายการสรา้ งชอ่ งรับขอ้ มูลจากตวั อย่างที่ 7.1 มีขน้ั ตอนดังนี้ 1. พิมพ์ข้อความ 2. คลิกตาแหน่งทีจ่ ะ ตามตัวอย่าง แทรก “text field” 3. ที่ Forms คลกิ “text field” เพ่อื แทรกในตาแหน่ง ที่จะใหก้ รอกรหสั ผู้ใช้ 4. คลกิ ที่ “text field” เพือ่ กาหนด Properties 5. Properties ของ “text field” สาหรบั กรอกรหสั ผใู้ ช้ ภาพท่ี 7.10 แทรกชอ่ งรบั บรรทดั เดียวสาหรับกรอกรหสั ผู้ใช้

149 จากนัน้ ใหแ้ ทรกชอ่ งรับรหสั ผ่านบรรทัดเดยี ว เพื่อให้กรอกรหสั ผา่ น โดยดาเนินการซ้าตาม ขั้นตอนที่ 2-5 ของภาพที่ 7.10 จากน้นั กาหนดรายละเอยี ดเพิม่ เติมดังภาพท่ี 7.11 6. คลกิ ท่ี “text field” เพ่ือ กาหนด Properties 7. Properties ของ “text field” สาหรบั กรอกรหสั ผา่ น ภาพที่ 7.11 แทรกชอ่ งรบั รหัสผา่ นบรรทดั เดียวสาหรับกรอกรหสั ผ่าน จะไดผ้ ลลพั ธด์ ังภาพท่ี 7.12 ภาพท่ี 7.12 ผลลพั ธ์การแทรกชอ่ งรับรหัสผ่านบรรทัดเดยี วสาหรบั กรอกรหัสผ้ใู ช้ และรหัสผา่ น

150 ตวั อย่างที่ 7.3 เพม่ิ และกาหนดคณุ สมบตั ิ (Properties) ของกล่องตวั เลือก (checkbox) โดยจะแทรก ตอ่ ท้ายการสร้างชอ่ งรับขอ้ มลู จากตวั อยา่ งท่ี 7.2 มีขน้ั ตอนดงั นี้ 2. คลกิ ตาแหน่งทจี่ ะ แทรก “checkbox” 1. พิมพข์ ้อความ ตามตัวอยา่ ง 3. ท่ี Forms คลกิ “checkbox” 4. แสดง “checkbox” พิมพข์ ้อความตามตัวอยา่ ง ตอ่ ทา้ ย “checkbox” 5. คลกิ “checkbox” เพ่อื กาหนด Properties 6. ชอื่ ของ “checkbox” 7. คา่ ของ “checkbox” เปน็ “check_book” เปน็ “1” ภาพที่ 7.13 ข้ันตอนการเพ่ิมช่องรบั ข้อมูลแบบกล่องตวั เลือก (checkbox) “วชิ าการ หนังสือเรยี น”

151 กล่องตัวเลือกสามารถสรา้ งได้หลายตัว โดยใหท้ าซา้ ขั้นตอน 2-7 แลว้ กาหนดคุณสมบัตขิ อง แต่ละกล่องตวั เลอื ก ซงึ่ ชอ่ื ของกลอ่ งตวั เลือกจะต้งั เปน็ ช่ือเดียวกนั เน่ืองจากเป็นข้อมูลประเภท เดยี วกนั ดงั ภาพที่ 7.14 8. ทาซ้าขัน้ ตอน 2-7 พิมพ์ ข้อความตามตวั อยา่ ง 9. คลกิ “checkbox” เพอื่ กาหนด Properties 10. ช่ือของ “checkbox” 11. คา่ ของ “checkbox” เปน็ “check_book” เป็น “2” ภาพท่ี 7.14 เพ่ิมกล่องตัวเลอื ก “นวนิยาย เรอื่ งส้ัน การ์ตูน” 12. ทาซ้าข้ันตอน 2-7 พมิ พ์ ข้อความตามตวั อยา่ ง 13. คลกิ “checkbox” เพ่อื กาหนด Properties 14. ชื่อของ “checkbox” 15. คา่ ของ “checkbox” เป็น “check_book” เป็น “3” ภาพที่ 7.15 เพิ่มกล่องตวั เลอื ก “วารสาร หนงั สอื พิมพ์ นิตยสาร”

152 12. ทาซา้ ขน้ั ตอน 2-7 พมิ พ์ ขอ้ ความตามตัวอยา่ ง 13. คลกิ “checkbox” 16. คลิกเมื่อ เพอื่ กาหนด Properties ตอ้ งการให้ 15. ค่าของ “checkbox” เป็น “4” “checkbox” มคี า่ เรมิ่ ต้นเปน็ ถกู เลือก  (Checked) 14. ชอื่ ของ “checkbox” เปน็ “check_book” ภาพท่ี 7.16 เพิ่มกล่องตวั เลอื ก “ท่วั ไป” ผลลพั ธ์จากการเพ่ิมกล่องตัวเลือกแสดงดังภาพที่ 7.17 ภาพที่ 7.17 การเพิ่มกลอ่ งตวั เลอื กของประเภทหนังสือทชี่ อบอา่ น

153 ตัวอย่างท่ี 7.4 เพ่ิมและกาหนดคุณสมบัติ (Properties) ของปุ่มตัวเลือก โดยจะแทรกต่อท้ายการ สรา้ งชอ่ งรับขอ้ มลู จากตวั อยา่ งท่ี 7.3 มีขน้ั ตอนดังนี้ 1. พิมพ์ “เพศ” 2. คลิกตาแหน่งทีจ่ ะ แทรก “radio button” 3. ท่ี Forms คลกิ “radio button” 4. แสดง “radio button” พมิ พ์ “ชาย” ต่อทา้ ย “checkbox” 5. คลกิ “radio button” เพอ่ื กาหนด Properties 6. ชอ่ื ของ “radio button” เป็น “gender” 7. คา่ ของ “radio button” เป็น “1” ภาพที่ 7.18 ขน้ั ตอนการเพม่ิ ปมุ่ ตวั เลอื ก “เพศ” (radio button) สาหรบั “ชาย”

154 ปุม่ ตัวเลือก “เพศ” ต้องมีทง้ั “ชาย” และ “หญิง” ซง่ึ ปมุ่ ตัวเลือก “ชาย” ไดส้ ร้างไปแล้ว ถัด มาให้สร้างปุ่มตัวเลือก “หญิง” ซ่ึงจะมีข้ันตอนเหมือนกัน ต่างกันตรงกาหนดคุณสมบัติของปุ่มเลือก นน้ั คอื ใหท้ าซา้ ขน้ั ตอน 2-6 สว่ นขนั้ ตอนที่ 7 กาหนดค่าของปุ่มตัวเลอื กเป็น “2” ดังภาพท่ี 7.19 1. คลิก “radio button” เพอื่ กาหนด Properties 2. ช่ือของ “radio button” เป็น “gender” 3. คา่ ของ “radio button” เปน็ “2” ภาพที่ 7.19 ขัน้ ตอนการเพมิ่ ปุ่มตัวเลือก “เพศ” (radio button) สาหรับ “หญิง” ผลลพั ธ์จากการเพ่ิมป่มุ ตัวเลอื ก “เพศ” แสดงดังภาพที่ 7.20 ภาพที่ 7.20 การเพ่ิมปุ่มตัวเลอื ก “เพศ” ปมุ่ ทีใ่ หเ้ ลือกคือ “ชาย” และ “หญงิ ”

155 ตัวอย่างท่ี 7.5 เพ่ิมและกาหนดคุณสมบัติ (Properties) ของช่องรับช่ือไฟล์ (file field) โดยจะแทรก ตอ่ ทา้ ยการสรา้ งช่องรับข้อมลู จากตัวอยา่ งที่ 7.4 มขี ้ันตอนดงั นี้ 1. พิมพ์ “ไฟล์ ภาพผูส้ มัคร” 2. คลิกตาแหน่งท่จี ะ แทรก “file field” 3. ท่ี Forms คลิก “file field” 4. แสดง “file field” และ ปุม่ “Browse…” คู่กนั 5. คลิก “file field” เพอ่ื กาหนด Properties 6. ตง้ั ช่ือเปน็ “FF_photo” 7.กาหนดความกว้างของ “file field” เปน็ 40 8.จานวนตัวอกั ษรท่ี “file field” รับได้ ถา้ ไม่ กาหนด “file field” จะรับตัวอักษรไดไ้ ม่จากดั ภาพที่ 7.21 ขัน้ ตอนการเพิม่ ช่องรบั ช่อื ไฟล์

156 ตัวอย่างท่ี 7.6 เพิ่มและกาหนดคุณสมบัติ (Properties) ของปุ่มกดยืนยันและยกเลิกการทางาน ป่มุ กดท่วั ไป โดยจะแทรกไวต้ าแหนง่ ทา้ ยของฟอร์มมีขน้ั ตอนดงั นี้ 1. เตรยี มพนื้ ทีใ่ นการ แทรก “button” 2. ท่ี Forms คลกิ “button” 3. แสดงปุ่ม จากนนั้ ให้ คลิกทปี่ ุ่มเพือ่ กาหนด Properties 4. ตั้งชือ่ เป็น “btn_submit” 5. กาหนดคา่ เปน็ 6. ประเภทของปมุ่ เลอื ก “Submit” “Submit form” จะเป็น การยนื ยันสง่ ขอ้ มลู ภาพท่ี 7.22 ขนั้ ตอนการเพม่ิ ปุ่ม “Submit”

157 ถัดไปทาการเพิม่ ปุ่ม “Reset” เพอื่ ยกเลิกข้อมลู โดยทาซ้าขั้นตอน 1-3 จากภาพที่ 7.22 จากนนั้ กาหนดคุณสมบตั ิให้ปุ่มตามรายละเอียดดังภาพที่ 7.23 1. แสดงปมุ่ จากน้นั คลกิ ที่ ปุม่ เพื่อกาหนด Properties 5. ประเภทของป่มุ เลอื ก “None” จะเปน็ ปมุ่ ทัว่ ไป 2. ตัง้ ชือ่ เป็น “btn_reset” 3. กาหนดคา่ เปน็ 4. ประเภทของปุ่ม เลือก “Reset” “reset form” จะเปน็ การยกเลิกข้อมูล ภาพท่ี 7.23 ขนั้ ตอนการเพิ่มปุ่ม “Reset” 2. การสร้างชอ่ งรับข้อมูลด้วยแทก็ <textarea>…..</textarea> หรอื ชอ่ งรับหลายบรรทัด ซึ่งเป็นชอ่ งรบั ข้อควาหลายบรรทดั สามารถกาหนดขนาดความกวา้ งและจานวนบรรทัดของช่องรับ ข้อมลู ได้ รายละเอียดการใช้งานตามตวั อย่างท่ี 7.7 ตัวอยา่ งท่ี 7.7 เพิ่มและกาหนดคุณสมบัติ (Properties) ของช่องรับหลายบรรทัด โดยจะแทรกไวก้ ่อน การสร้างชอ่ งรับข้อมูลในตวั อย่างท่ี 7.6 มีข้นั ตอนดังน้ี 1. พิมพ์ “ท่ีอยู่” 2. คลิกตาแหน่งท่ีจะ แทรก “Textarea”

158 3. ท่ี Forms คลิก “Textarea” 4. แสดง “Textarea” ให้คลิก เพอื่ กาหนด Properties Scroll bar 6. กาหนดความกว้างของช่องรบั เป็น 45 7. กาหนดจานวนบรรทดั ของช่องรบั เป็น 5 โดยไม่ปรากฏ scroll bar 5. ตงั้ ชอ่ื เป็น “address” 8. เลอื กเป็น “Multi line” เท่านน้ั 9. ค่าเรมิ่ ตน้ “Init val” ไมต่ ้องกาหนด 10. เลอื ก “Disabled” เม่ือต้องการให้ “Textarae” แสดงอยา่ งเดยี ว และเลือก “Read-only” เมื่อตอ้ งการให้ “Textarae” อา่ นไดอ้ ย่างเดยี ว ภาพที่ 7.24 ขน้ั ตอนการเพิม่ ชอ่ งรบั หลายบรรทัด “ที่อยู่” 3. การสรา้ งช่องรับข้อมูลด้วยแทก็ <select>…</select> หรอื รายการตวั เลอื ก เปน็ ชอ่ งรบั ขอ้ มลู แบบแสดงรายการใหเ้ ลือกมีลักษณะคลา้ ยเมนู ดงั รายละเอียดตามตัวอยา่ งการใชง้ านท่ี 7.8

159 ตัวอย่างที่ 7.8 เพ่ิมและกาหนดคณุ สมบัติ (Properties) ของรายการตัวเลอื ก หรอื Select (List/Menu) โดยจะแทรกไว้ต่อท้ายการสร้างชอ่ งรบั ขอ้ มลู ในตวั อย่างที่ 7.7 มขี น้ั ตอนดังนี้ 1. พิมพ์ “คณะท่ี 2. คลิกตาแหนง่ ทจ่ี ะแทรก สงั กดั ” “Select (List/Menu)” 3. ท่ี Forms คลิก “Select(List/Menu)” 4. แสดง “Select(List/Menu)” ให้คลิกเพือ่ กาหนด Properties 6. เลอื กชนดิ เป็น “List” 7. กดปุ่ม “List Values” เพือ่ กาหนดรายการตัวเลือก 5. ตั้งชอ่ื เป็น “dept”

160 9.ปรากฏหน้าจอ “List Values” ใหก้ รอกรายการตัวเลือก 10.เพมิ่ รายการตวั เลือก และคา่ ของรายการ 11.เพม่ิ รายการตัวเลือกถัดไป 12. กดเพม่ิ (+) หรือลบ 14. กดปมุ่ “OK” เมอ่ื กาหนดรายการตวั เลือก (-) รายการตวั เลือกได้ เรียบรอ้ ย และกลบั ไปยงั หน้าจอกาหนด Properties 13. กดเพื่อจดั ลาดบั รายการตัวเลอื กก่อนหลงั 15. กดเลอื กรายการ ตวั เลอื ก ใหเ้ ป็นค่าเร่มิ ตน้ ภาพท่ี 7.25 ข้นั ตอนการเพมิ่ รายการตวั เลอื ก “คณะทีส่ งั กัด”

161 ผลลพั ธ์ในการสรา้ งฟอรม์ รบั ข้อมูลในการสมัครสมาชิดห้องสมุด แสดงดงั ภาพที่ 7.26 ภาพที่ 7.26 หน้าจอฟอรม์ รบั สมคั รสมาชกิ ห้องสมดุ การสง่ ผ่านขอ้ มลู ระหว่างเวบ็ เพจ จากหัวข้อท่ีผ่านมาเราได้สร้างฟอร์มรับข้อมูลต่างๆ แล้วต่อไปจะเป็นการการเขียนโปรแกรม เพื่อทาการรับข้อมูลนาเข้าจากฟอร์ม และนาไปประมวลผล จากฟอร์มรับสมัครสมาชิกเม่ือผู้ใช้กรอก ข้อมูลเรียบร้อยแล้ว และกดปุ่ม “Submit” ยืนยันการส่งข้อมูลไปยังไฟล์ท่ีชื่อ member_list.php ประมวลผลโดยกาหนดที่แอตตริบวิ ต์ action ดังภาพที่ 7.27 1. กาหนดไฟล์ปลายทาง member_list.php 2. กาหนดวธิ กี ารสง่ ขอ้ มลู (Method) เป็น GET ภาพที่ 7.27 การกาหนดแอตตริบวิ ต์ของแทก็ <form> ที่ DreamweaverCS6

162 ส่วนโปรแกรม member_list.php มีหน้าที่รับค่าที่ผู้ใช้นาเข้า ผ่านตัวแปร $_POST หรือ$_GET ท่ีกาหนดให้กับแอตตริบิวต์ method โดยใช้ชื่อของช่องรับข้อมูลเป็นดัชนี เช่น $_GET[‘fname’] เปน็ ค่าในช่องชอ่ื $_GET[‘lname’] เป็นคา่ ในช่องนามสกุล เปน็ ตน้ การแสดงผลลัพธ์ว่ามีข้อมูลนาเข้าอะไรบ้าง จะใช้คาส่ัง echo แสดงค่าของช่องรับข้อมูล ต่างๆ ผ่านตวั แปร $_GET ทอี่ ้างอิงดว้ ยชอ่ื ช่องรับขอ้ มลู รายละเอยี ดดงั ภาพท่ี 7.28 ผลจากการส่งขอ้ มลู ซึ่งสามารถ ปรับรูปแบบการแสดงได้ ผลลพั ธ์ ภาพท่ี 7.28 ชุดคาส่งั ในโปรแกรม member_list.php สาหรบั แสดงค่าออกทางหน้าเว็บ คกุ กี้ (Cookie) และ เซสชั่น (Session) คุณสมบัติอีกอย่างหน่ึงของโปรแกรมภาษา PHP คือ คุกก้ีและเซสชัน ท่ีมีไว้สาหรับติดตาม และตรวจสอบการทางานของผู้ใช้ ซึ่งจะช่วยเพ่ิมความปลอดภัย และรักษาข้อมูลบางอย่างของผู้ใชไ้ ว้ เช่น การล็อกอินเข้าสู่ระบบ ระบบจะเก็บช่ือผู้ใช้งานไว้ตลอดจนกว่าผู้ใช้จะออกจากระบบหรือหมด เวลาการใช้งาน เป็นต้น การทางานในลักษณะน้ีจะสามารถทาได้โดยใช้คุกกี้ และเซสชัน ซ่ึงมี รายละเอียดดังน้ี (พรวนา รัตนชูโชค, 2557: 137-150)

163 1. คุกกี้ (Cookie) คุกกี้ เป็นตัวแปรที่เคร่ืองเซิร์ฟเวอร์ส่งไปเก็บไว้ในเคร่ืองของผู้ใช้ โดยเว็บเบราว์เซอร์จะสง่ ข้อมูลของผู้ใช้ท่ีจัดเก็บไว้ในเครื่องมายงั เว็บเซิร์ฟเวอร์ พร้อมท้ังนาคุกก้ีดังกลา่ วมาเก็บไว้ในตัวแปรทา ให้สามารถตรวจสอบค่าตา่ งๆ ของผ้ใู ช้ได้ การสร้างและใช้งานคกุ กีด้ ังตวั อย่างที่ 7.9 ตัวอย่างที่ 7.9 การใชง้ านตวั แปรคุกกี้ < ?php $cookie_name = \"user\"; $cookie_value = \"waraporn_kh\"; setcookie($cookie_name, $cookie_value, time() + (86400 * 30)); / / 86400 = 1 day ?> < html> < body> < ?php if(isset($_COOKI E[ $cookie_name] )) { echo \"Cookie '\" . $cookie_name . \"' is set!< br> \"; echo \"Value is: \" . $_COOKI E[ $cookie_name] ; } else { echo \"Cookie named '\" . $cookie_name . \"' is not set!\"; } ?> < / body> < / html> จากตัวอย่างข้างต้นประกาศตัวแปรช่ือ “cookie_name” มีค่าเป็น “user” และตัวแปร “cookie_value” มีค่าเป็น “waraporn_kh” จากนั้นเรียกใช้ฟังก์ชัน setcookie เพื่อสร้างตัวแปร คุกก้ีตามค่าที่เก็บในตัวแปร “cookie_name” และมีค่าตามค่าที่เก็บในตัวแปร “cookie_value” และกาหนดตัวแปรคุกกี้ให้มีอายุ 30 วัน (หน่วยเป็นวนิ าที) จากนั้นแทรกสคริปต์ภาษา PHP ในภาษา HTML โดยใช้คาส่ัง if เพื่อตรวจสอบตัวแปรก่อนว่ามีค่าจริงอยู่หรือไม่ หรือหมดอายุไปแล้ว จากการ เรยี กใช้ฟงั กช์ ัน isset() ถ้ายงั มีคา่ อยู่หรือเง่ือนไขเป็นจริงให้แสดงข้อความ “Cookie ” ตามด้วยชื่อตัว แปร “cookie_name” ตามด้วย “ is set !” แล้วให้ขึ้นบรรทัดใหม่ จากน้ันแสดงข้อความ “Value is: ” ตามด้วยค่าของตัวแปรคุกก้ี \"cookie_name\" ออกทางเว็บเบราว์เซอร์ แต่ถ้าเง่ือนไขเป็นเท็จจะ แสดงข้อความ “Cookie named ” ตามด้วยค่าตัวแปร “cookie_name” และข้อความ “is not set!” 2. เซสชนั (Session) เซสชัน เป็นตัวแปรท่ีใช้เก็บข้อมลู บางอย่างของผ้ใู ช้ไว้ที่เคร่ืองเซิร์ฟเวอร์ สามารถนาข้อมูลไป ใช้งานในเว็บเพจอื่นๆ ได้ เน่ืองจากค่าของข้อมูลที่เก็บในตัวแปรเซสชันจะยังอยู่จนกว่าจะถูกทาลาย หรอื เม่อื ผู้ใชป้ ดิ เวบ็ เบราว์เซอร์ โดยจะมีการทางานเม่ือผใู้ ช้รอ้ งขอเวบ็ เพจผา่ นทางเว็บเบราว์เซอร์ เม่ือ เซิร์ฟเวอร์ได้รบั การร้องขอจะประมวลผลและสง่ เว็บเพจดังกล่าวกลับมาให้กับผู้ใช้ หากหน้าเว็บเพจท่ี

164 มีการเรียกใชม้ ีคาสงั่ session_start() ซ่ึงเป็นการกาหนดุใหโปรแกรมเร่ิมต้นเก็บค่าของตัวแปรเซสชัน โดย PHP จะสร้างหมายเลขเซสชัน (Session ID) แล้วส่งมายังเคร่ืองของผู้ใช้ ถ้ามีผู้ใช้หลายคนท่ีร้อง ขอเวบ็ เพจเดยี วกนั ในเวลาเดียวกันกจ็ ะไดร้ บั หมายเลขเซสชันแตจ่ ะมีค่าไมซ่ า้ กัน มีตวั อยา่ งการใชง้ าน ดงั นี้ ตัวอย่างที่ 7.10 การใชง้ านตัวแปรเซสชัน < ?php / / Start the session session_st ar t ( ) ; ?> < !DOCTYPE html> < html> < body> < ?php / / Set session variables $_SESSI ON[ \"fav_color\"] = \"green\"; $_SESSI ON[ \"fav_animal\"] = \"cat\"; echo \"Session variables are set.\"; ?> < / body> < / html> จากตวั อย่างข้างต้นโปรแกรมเรียกใช้ฟังกช์ ัน session_start() เพอ่ื ประกาศการเร่มิ ตน้ ใช้งาน ตัวแปรเซสชัน จากน้ันแทรกสคริปต์ภาษา PHP ในภาษา HTML โดยกาหนดตัวแปรเซสชันช่ือ “fav_color” มีค่าเป็น “green” และตัวแปร “fav_animal” เป็น “cat” จากนั้นแสดงข้อความว่า “Session variable are set.” น่นั คอื ได้กาหนดค่าให้ตัวแปรเซสชันแล้ว สรุป ฟอร์มหมายถึงเว็บเพจท่ีรวมช่องรับข้อมูล เช่น ช่องกรอกข้อความ กล่องตัวเลือก รายการ ตัวเลอื ก หรอื ปมุ่ กด เป็นตน้ สามารถสรา้ งด้วยภาษา HTML พรอ้ มกาหนดวธิ กี ารส่งข้อมูล (Method) ระบไุ ฟล์ปลายทาง (Action) ทีจ่ ะสง่ ไปประมวลผล การสร้างฟอร์มข้อมลู สามารถใชเ้ ครอ่ื งมือประเภท Text Editor เช่น โปแกรม Notepad หรอื Editplus และเพือ่ ใหส้ ามารถสรา้ งฟอร์มไดง้ ่ายในเอกสาร ชุดนี้ได้เลือกใช้โปรแกรม DreamweaverCS6 ซ่ึงโปรแกรมได้เตรียมช่องรับข้อมูลต่างๆ ในฟอร์มให้ เลือกใช้งาน การกาหนดแอตตรบิ วิ ต์ของแต่ละชอ่ งรับข้อมูล กาหนดวธิ ีการการส่งขอ้ มูลไปประมวลผล ยงั ไฟล์ปลายทางท่ีกาหนด และภาษา PHP มีตัวแปรสาหรับการติดตามและตรวจสอบการทางานของ ผู้ใช้ด้วยตัวแปรคุกกี้ และเซสชัน โดยตัวแปรคุกกี้จะเก็บข้อมูลของผู้ใช้ไว้ที่เครื่องไอคเอ็นต์ของผู้ใช้ แล้วส่งข้อมูลกลับไปยังเคร่ืองเซิร์ฟเวอร์ และตัวแปรเซสชันเป็นตัวแปรท่ีใช้เก็บข้อมูลบางอย่างของ ผูใ้ ชไ้ วท้ เ่ี ครื่องเซิรฟ์ เวอร์

165 แบบฝึกหัด ให้นักศึกษาเขยี นโปรแกรมจากโจทนต์ อ่ ไปน้ี โดยใหร้ ับคา่ ที่จาเป็นต้องใช้ในการคานวณผา่ น หนอ้ จอ และหนา้ จอให้ออกแบบตามความเหมาะสม 1. ให้นักศกึ ษาเขยี นโปรแกรมรบั คา่ a b และ c จากหน้าจอ ตามรายละเอียดท่ีแสดงในผังงานตอ่ ไปน้ี St ar t Read a,b,c Sum= 0 Sum= a + b + c Write sum St op 2. ให้นกั ศกึ ษาเขียนโปรแกรมรบั ค่า score จากหนา้ จอ ตามรายละเอียดทแ่ี สดงในผังงานตอ่ ไปน้ี St ar t Read Score NY Score> = 60 Write “สอบไมผ่ า่ น” Write “สอบผา่ น” St op

166 3. ให้เขียนโปรแกรมคานวณรายรับหลังหักภาษีของพนักงานแตล่ ะคน โดยมเี ง่อื นไขว่า หากพนกั งาน มีรายได้มากกว่า 20,000 บาท ให้หักภาษี ณ ท่ีจ่าย 5% หากมีรายได้ต่ากว่าน้ีไม่ต้องหักภาษี กาหนดใหแ้ สดงคา่ ตอ่ ไปน้ี ชอ่ื -สกุลพนักงาน รายรบั ภาษหี ัก ณ ท่ีจ่าย และรายรับหลงั หักภาษี 4. เขียนโปรแกรมคานวณค่าคอมมิชช่ันของพนักงานขายในแต่ละเดือน โดยมีเง่ือนไขการคิดค่า คอมมิชช่นั ดงั น้ี 1.1. ถ้ายอดขาย มากกวา่ 25,000 บาท ให้ค่าคอมมิชช่ัน 7% ของยอดขาย 1.2. ถา้ ยอดขาย 2,000 -25,000 บาท ใหค้ า่ คอมมิชชัน่ 4% ของยอดขาย 1.3. ถา้ ยอดขาย ต่ากวา่ 2,000 บาท ให้คา่ คอมมิชช่ัน 2% ของยอดขาย 1.4. กาหนดให้แสดงคา่ ดงั นี้ ชอื่ -นามสกลุ พนกั งาน ยอดขาย และคา่ คอมมิชชัน่ ทไี่ ด้รบั 5. จงเขยี นฟงั กช์ นั เพื่อหาพื้นที่ส่เี หลี่ยม พรอ้ มกบั เรียกใช้งานฟงั กช์ นั ดังกล่าว การแสดงผลลพั ธ์ที่ได้ให้ กาหนดตามความเหมาะสม พนื้ ท่ี = กว้าง x ยาว 6. จงเขยี นฟังก์ชันเพื่อหาพ้ืนท่สี ามเหล่ยี ม พรอ้ มกบั เรียกใชง้ านฟงั ก์ชันดงั กลา่ ว การแสดงผลลัพธท์ ่ีได้ ใหก้ าหนดตามความเหมาะสม พน้ื ที่ = 0.5 x ฐาน x สูง 7. เขยี นโปรแกรมตดั เกรด โดยกาหนดเงื่อนไขดังนี้ โปรแกรมประกอบด้วย 2 ไฟล์ ดงั น้ี 7.1 โปรแกรมสาหรบั ป้อน ช่อื นามสกลุ รหัสนักศกึ ษา และ คะแนน 7.2 โปรแกรมสาหรับแสดงผลเกรดทไ่ี ด้ ของนักศกึ ษาคนนัน้ ๆ เงื่อนไขการตัดเกรดให้พิจารณาจากตารางตอ่ ไปน้ี ระดับคะแนน ความหมาย ค่าระดบั คะแนน คา่ ร้อยละ A ดเี ยย่ี ม 4.0 80 B+ ดมี าก 3.5 75-79 B ดี 3.0 70-74 C+ ดีพอใช้ 2.5 65-69 C พอใช้ 2.0 60-64 D+ ออ่ น 1.5 55-59 D ออ่ นมาก 1.0 50-54 E ตก 0.0 0-49

167 เอกสารอา้ งอิง ชาญชยั ศุภอรรถกร. (2558). สร้างเวบ็ แอพพริเคชัน PHP MySQL+AJAX jQuery ฉบบั สมบูรณ.์ กรงุ เทพฯ: รีไวว่า. พรวนา รตั นชโู ชค. (2557). การโปรแกรมบนเวิลด์ไวด์เวบ็ . [ม.ป.ท.]. สมศกั ด์ิ โชคชยั ชตุ กิ ุล. (2550). Insight PHP ฉบบั สมบรู ณ์. กรงุ เทพฯ: โปรวชิ ั่น Guru99. (2016). PHP forms handing. 2016, May 31. [online], Available HTTP: https://www.guru99.com/php-forms-handling.html Tutorial Republic. (2016). PHP-tutorial. 2016, May 31. [online], Available HTTP: https://www.tutorialrepublic.com/php-tutorial/

บรรณานุกรม โครงการสารานกุ รมไทยสาหรับเยาวชน. (2559). อนิ เทอร์เนต็ . [ออนไลน์], แหล่งท่ีมา HTTP: http://kanchanapisek.or.th/kp6/sub/book/book.php?book=25&chap=6&page=c hap6.htm ชาญชัย ศุภอรรถกร. (2558). สรา้ งเวบ็ แอพพริเคชนั PHP MySQL+AJAX jQuery ฉบบั สมบรู ณ์. กรุงเทพฯ: รีไวว่า. ณัฐพงษ์ วารีประเสริฐ และ สุธี พงศาสกลุ ชัย. (2552). โครงสร้างขอ้ มลู และอัลกอริทึม. กรุงเทพฯ: เคทพี ี คอมพ์ แอนด์ คอนซัลท์. ประสาท เนืองเฉลมิ . (2557). อินเทอรเ์ นต็ เพื่อการเรยี นร.ู้ กรุงเทพฯ: โอเดียนสโตร์. พรวนา รัตนชูโชค. (2557). การโปรแกรมบนเวลิ ดไ์ วด์เว็บ. [ม.ป.ท.]. รงุ่ ทิวา เสารส์ งิ ห.์ (2546). การเขียนโปรแกรมคอมพวิ เตอรเ์ บือ้ งต้น. กรงุ เทพฯ: ซีเอ็ดยูเคชน่ั . วิไลพร กุลตงั วฒั นา. (2554). โครงสร้างข้อมูลและข้ันตอนวิธี. อดุ รธานี: มหาวิทยาลัยอดุ รธานี สมศกั ดิ์ โชคชัยชตุ ิกุล. (2550). Insight PHP ฉบับสมบูรณ์. กรุงเทพฯ: โปรวิช่นั สานนท์ เจรญิ ฉาย. (2544). การเขียนโปรแกรมและอัลกอรทิ ึม(กรณีตวั อยา่ งภาษาซ)ี . กรงุ เทพฯ: โรงพมิ พม์ หาจฬุ าลงกรณราชวทิ ยาลัย วัดมหาธาตุ. อนรรฆนงค์ คณุ มณี. (2550). Basic of PHP. นนทบุรี: ไอดีซฯี . โอภาส เอ่ยี มสิริวงค์. (2557). วทิ ยาการคอมพิวเตอรแ์ ละเทคโนโลยีสารสนเทศ (ฉบับปรบั ปรุง เพ่มิ เตมิ ). กรุงเทพฯ: ซเี อด็ ยูเคชน่ั . 123RF. (2016). Vector - social network laptop.communication in the global computer networks. 2016, July 25. [online], Available HTTP: https://www.123rf.com/photo_11888394_social-network-laptop- communication-in-the-global-computer-networks.html Aditya varma. (2016). What is Web Server and Different Types of Web Servers?. 2016, July 25. [online], Available HTTP: https://www.fastwebhost.in/blog/ what-is-web-server-and-different-types-of-web-servers/ Appserv. (2559). AppServ คืออะไร. [ออนไลน์], แหล่งท่ีมา HTTP: https://www.appserv.org/th/ ASAP. (2016). Redes Estruturadas. 2016, July 10. [online], Available HTTP: http://www.asap-mz.com/?page_id=151 Berners-Lee. (1994). Addressing. 2016, July 20. [online], Available HTTP: https://www.w3.org/Addressing/URL/url-spec.txt

170 IBM Knowledge Center. (2016). Type of files. สบื คน้ เมือ่ 27 พฤษภาคม 2561, จาก https://www.ibm.com/support/knowledgecenter/en/ssw_aix_71/ com.ibm.aix. osdevice /filetypes.htm. Guru99. (2016). PHP forms handing. 2016, May 31. [online], Available HTTP: https://www.guru99.com/control-structures-and-loops.html Joyce Farrell. (2013). A Beginner’s Guide to Programming Logic and Design Introductory. 7th ed. China: Course Technology, Cengage Learning. Peter O'Shaughnessy. (2016). Think you know the top web browsers?. 2016, June 25. [online], Available HTTP: https://medium.com/samsung- internet-dev/think-you-know-the-top-web-browsers-458a0a070175 Php. (2016). Function Reference. 2016, September 20. [online], Available HTTP: http://php.net/manual/en/function.explode.php Robert W.Sebesta. (2006). Programming the World Wide Web. 3rd ed. USA: Pearson Education,Inc. SoraTemplates. (2016). Conditional if-else statement with example in c language.2016, May 31. [online], Available HTTP: https://dotprogramming. blogspot.com/2016/02/ conditional-if-else-statement-with.html. Tutorial Republic. (2016). PHP-tutorial. 2016, May 31. [online], Available HTTP: https://www.tutorialrepublic.com/php-tutorial/php-if-else-statements.php Tutorialspoint. (2016). PHP-Loop Types. 2016, June 25. [online], Available HTTP: https://www.tutorialspoint.com/php/php_loop_types.htm. W3schools.com. (1999-2018). PHP 5 Tutorial. 2016, July 25. [online], Available HTTP: https://www.w3schools.com/php/default.asp Web Developers Notes. (2016). What is web server – a computer OR a program?. 2016, July 12. [online], Available HTTP: https://www.webdevelopersnotes.com/what-is-web-server W. Jason Gilmore. (2010). Beginning PHP and MySQL From Novice to Professional. 4th ed. USA. Zentut. (2016). PHP if Statement. 2016, June 25. [online], Available HTTP: http://www.zentut.com/php-tutorial/php-if/