1 เอกสารประกอบการสอน หน่วยท่ี 7 การใชง้ าน PHP รว่ มกบั ฟอร์ม รหสั วิชา : 20204-2107 ชอ่ื วิชา : การเขียนโปรแกรมภาษาคอมพวิ เตอร์ ทฤษฏี 2 ชม. / ปฏิบตั ิ 2 ชม. (สอนคร้ังที่ 8 ชัว่ โมงท่ี 29-32) ระดับประกาศนยี บตั รวชิ าชีพ พุทธศักราช 2562 ประเภทวิชา พาณิชยกรรม สาขาวิชา คอมพวิ เตอรธ์ ุรกิจ จดั ทาโดย นางสาวสโรธร ศรีชัย ตาแหนง่ พนกั งานราชการ บรหิ ารธรุ กจิ บณั ฑิต (ระบบสารสนเทศทางคอมพวิ เตอร์) ระบบสารสนเทศทางคอมพิวเตอร์ การจดั การระบบสารสนเทศ
2 หน่วยท่ี 7 การใชง้ าน PHP รว่ มกับฟอร์ม สาระการเรยี นรู้ เรอื่ ง การสรา้ งฟอรม์ 1. การสร้างส่วนรบั ขอ้ มลู Text Field 2. การสร้างสว่ นรบั ขอ้ มูลแบบ Text Area 3. การสร้างสว่ นรับขอ้ มลู แบบ Check Box 4. การสรา้ งสว่ นรับข้อมลู แบบ Radio Button 5. การสรา้ งสว่ นรับข้อมลู แบบ List/Menu 6. การสร้างส่วนรับขอ้ มลู แบบ Button
3 แบบทดสอบก่อนเรียน หน่วยท่ี 7 การใชง้ าน PHP รว่ มกับฟอรม์ เวลา 10 นาที เรื่อง การสรา้ งฟอร์ม คาชีแ้ จง แบบทดสอบเป็นแบบปรนัย 4 ตวั เลือก จานวน 10 ขอ้ คะแนนเต็ม 10 คะแนน คาส่ัง จงเลือกคาตอบทีถ่ กู ทสี่ ุดเพยี งคาตอบเดียว สแกน QR code เพือ่ ทาแบบทดสอบ ข้อที่ 1) การสรา้ งเวบ็ เพจทม่ี กี ารแลกเปลีย่ นข้อมูลชองผู้ใชเ้ ว็บเพจนนั้ ต้องกาหนดองคป์ ระกอบอะไร ก. เฟรม ข. ฟอร์ม ค. เว็บบอร์ด ง. กระดานข่าว ขอ้ ท่ี 2) ข้อใดเป็นรปู แบบคาสง่ั ในการสรา้ งฟอร์มเพื่อใชก้ ับงาน PHP ท่ีถูกต้อง ก. <form name=”Login” method=”POST” action=”URL”> ข. <form name=”Login” method=”POST” action=”URL”></form> ค. </form name=”Login” method=”POST” action=”UR”L></form> ง. <form name=”Login” method=”POST” action=”URL”><form> ข้อที่ 3) ในการแทรกช่องรับข้อมูลประเภทต่างๆ นน้ั ตอ้ งอยู่ภายในแท็กคาส่ังใด ก. <?PHP …. ?> ข. <HTML> ….. </HTML> ค. <Form> ….. </Form> ง. <Frame> ….. </Frame> ขอ้ ที่ 4) คาสง่ั Input type = “text”> เป็นการกาหนดชอ่ งรบั ข้อมูลประเภทใด ก. Button ข. Radio ค. Checkbox ง. Text Field ข้อที่ 5) ข้อใดเป็นการสรา้ งส่วนรับขอ้ มูลแบบ Text Field ทถี่ กู ตอ้ ง ก. <input type=“text” name=“user”> ข. <input type=“text” name=”user”></input> ค. <input type=”text field” name=”user”> ง. <input type=”text field” name=”user”></input>
4 ขอ้ ท่ี 6) ข้อใดถกู ตอ้ งในการสรา้ งชอ่ งรบั ข้อมูลประเภท Password ก. <Input type=”text”> ข. <Input type =”submit”> ค. <Input type=”password”> ง. <Input type=”reset”> ขอ้ ที่ 7) ข้อใดเป็นการสรา้ งสว่ นรบั ข้อมูลแบบ Check Box ท่ถี กู ต้อง ก. <Input=”text name=”user”> ข. <checkbox-“comment” cols=”70” rows=”70”>computer</checkbox> ค. <input type=”check box” name=”user”> ง. <input type=”checkbox” name=”book> value=”cartoon”>cartoon ข้อท่ี 8) ถ้าต้องการสรา้ งกลอ่ งรบั ข้อมลู จากผู้ชมเว็บสาหรับคาถามปลายเปดิ ประเภทพิมพต์ อบยาวๆ ควรใชเ้ คร่ืองมอื ใด ก. Text Field ข. Text Area ค. Check Box ง. List/Menu ข้อที่ 9 ข้อใดเป็นการสรา้ งสว่ นรับข้อมลู แบบ Button ท่ีถกู ตอ้ ง ก. <file field=”text” name=”user”> ข. <input type =”submit” name=”submit” value=”ตกลง” ค. <input type=”button” name=”submit”> ง. <input type=”text field” name=”user”></input> ขอ้ ที่ 10 ถา้ ตอ้ งให้เลือกขอ้ มูลไดม้ ากกวา่ 1 ตวั เลอื ก ตักเรยี นจะเลอื กชอ่ งรบั ขอ้ มลู ประเภทใด ก. Checkbox ข. Radio button ค. Text area ง. Select **************
5 หนว่ ยท่ี 7 ใบความรู้ การใชง้ าน PHP เรือ่ ง การสร้างฟอรม์ ร่วมกบั ฟอร์ม ฟอร์ม (Form) คือองค์ประกอบอยา่ งหน่ึงของเว็บไซต์ที่ใชส้ าหรับรับข้อมูลจากผู้ เข้าชม เพื่อส่งไปทางานกับเซิร์ฟเวอร์ โดยฟอร์มจะส่งค่าต่าง ๆ ท่ีถูกกรอกเข้าไปใน เครื่องมือต่าง ๆ ไปทางานต่อ ทาให้ได้ทราบข้อมูลของผู้ใชไ้ ด้มากขน้ึ แล้วยังทาให้ผูเ้ ข้าชม ไดม้ สี ่วนร่วมกับเวบ็ ไซต์ สว่ นรับขอ้ มลู มีดงั น.ี้ . รายการ ตัวอย่าง สว่ นรับข้อมูลแบบ Text Field สว่ นรบั ข้อมลู แบบ Text Area สว่ นรับข้อมลู แบบ Check Box ส่วนรบั ขอ้ มลู แบบ Radio Button ส่วนรับขอ้ มูลแบบ List/Menu ปุ่มส่ังงาน Button
6 1. การสรา้ งส่วนรบั ข้อมลู Text Field Text Field คือ ส่วนรับข้อความ หรือ กล่องรับข้อความ ในลักษณะบรรทัดเดียว จะใช้ใน การรับขอ้ มลู รปู แบบส้ัน ๆ เชน่ ชื่อผู้ใช้งาน รหสั ผ่าน ชือ่ นามสกลุ อเี มล เป็นตน้ รูปแบบในการใช้คาสั่ง <input name=”name” type=”text” size=30” maxlength=”30”> ช่ือ คาอธิบาย name ชือ่ ของกลอ่ งรบั ขอ้ มลู Text Field type กาหนดลักษณะการรบั ขอ้ มูลใหม้ ีประเภทเปน็ การรับขอ้ ความ size กาหนดขนาดความกว้างของ Text Field ใหก้ วา้ งกต่ี ัวอักษร maxlength กาหนดจานวนตวั อักษรท่ีจะกรอกไดส้ ูงสดุ ใน Text Field ขั้นตอนการสร้างฟอร์มและเพ่ิมส่วนรับข้อมูลแบบ Text Field ให้เปิดโปรแกรม Notepad++ ขน้ึ มาแล้วทาการสร้างไฟลใ์ หม่ แลว้ ทาการเขียนโคด้ ดงั น้ี (บันทึกไฟล์ ชือ่ : workshop21.php) ผลการใช้คาสง่ั ส่วนรบั ขอ้ มูลแบบ Text Field
7 2. การสรา้ งส่วนรับข้อมูล Text Area Text Area คือ ส่วนรับข้อมูลที่สามารถรับข้อมูลได้แบบหลายบรรทัด หรือ ประเภทท่ี ตอ้ งการ ใช้สาหรับข้อมลู ทมี่ คี วามยาว เช่น ท่อี ยปู่ จั จบุ ัน ส่วนแสดงความคิดเหน็ ข้อเสนอแนะ เป็นต้น รูปแบบในการใช้คาสง่ั <textarea name=”ชื่อของส่วนรับขอ้ มูล” cols = “จานวนตัวอักษร” rows = “จานวน แถว”></textara> ชือ่ คาอธบิ าย name ชื่อของกล่องรบั ข้อมูล Text Area rows จานวนแถวของขอ้ ความและใชแ้ สดงผลว่าเป็นกีแ่ ถวในบราวเซอร์ cols จานวนตวั อักษรทรี่ ับไดใ้ นแต่ละแถว ขน้ั ตอนการสร้างฟอร์มและเพ่มิ ส่วนรบั ข้อมูลแบบ Text area ใหเ้ ปดิ โปรแกรม Notepad++ ขึ้นมาแลว้ ทาการสร้างไฟลใ์ หม่ แล้วทาการเขยี นโคด้ ดงั น้ี (บันทกึ ไฟล์ ช่อื : workshop22.php) ผลการใชค้ าสัง่ ส่วนรบั ขอ้ มูลแบบ Text area
8 3. การสร้างสว่ นรบั ขอ้ มลู Check box Check Box คือ ส่วนรับข้อมูลท่ีมีลักษณะเป็นปุ่มสี่เหล่ียม ท่ีมีไว้สาหรับเลือก โดยมี คุณสมบัติในการเลือกได้มากกว่า 1 ข้อ จะนิยมนามาใช้ในลักษณะรับข้อมูลชนิดที่สามารถเลือกได้ หลายข้อ เช่น หนังสือที่ชอบอ่าน หนังสือท่ีชอบดู กีฬาท่ีช่ืนชอบ เป็นต้น ซ่ึงมีรูปแบบในการใช้คาส่ัง สร้างสว่ นรับขอ้ มลู แบบ Check Box ดังน้ี รปู แบบในการใชค้ าสั่ง <input type = “checkbox” name = “ช่อื ของ Checkbox” value = “คา่ เริม่ ต้นของ Checkbox”> ชือ่ คาอธบิ าย name เป็นช่ือของข้อมูลท่ีให้เลือกจากกลุ่ม checkbox ซ่ึงกลุ่มตัวเลือกเดียวกัน ตอ้ งตงั้ ช่ือใหเ้ หมอื นกนั value เป็นค่าท่ีบอกว่าตัวเลือกนี้เก็บค่าอะไรไว้ ในกลุ่มตัวเลือกเดียวกัน ค่าน้ีควร แตกตา่ งกัน ขั้นตอนการสร้างฟอร์มและเพิ่มส่วนรับข้อมูลแบบ Check Box ให้เปิดโปรแกรม Notepad++ ข้ึนมาแล้วทาการสรา้ งไฟล์ใหม่ แลว้ ทาการเขียนโค้ด ดังน้ี (บนั ทกึ ไฟล์ ชือ่ : workshop23.php) ผลการใช้คาสงั่ สว่ นรบั ขอ้ มูลแบบ Check Box
9 4. การสร้างส่วนรับข้อมูลแบบ Radio Button Radio Button คอื ส่วนรบั ขอ้ มลู ที่มลี ักษณะคลา้ ยกนั กับ Checkbox เป็นสว่ นรบั ขอ้ มลู ท่ี เป็นลักษณะป่มุ เช่นเดยี วกัน แต่มคี วามแตกตา่ งกนั คือ Radio Button จะเป็นป่มุ วงกลม และ คุณสมบตั ิในการเลือกปมุ่ แบบนีจ้ ะสามารถเลอื กได้อย่างใดอย่างหน่งึ เชน่ นาไปใชก้ ับแบบสอบถามให้ เลอื กเพศ ชาย หรือ หญงิ เพียงเท่านนั้ รปู แบบในการใชค้ าสง่ั <input type =“radio” name =“ช่ือของ radio” value=“ค่าของ radio”> ชอ่ื คาอธิบาย name เป็นช่ือของข้อมูลท่ใี ห้เลอื กจากกลุ่ม radio button ซ่ึงกล่มุ ตัวเลือกเดียวกัน ต้องตัง้ ชือ่ ใหเ้ หมือนกัน value เป็นค่าที่บอกว่าตัวเลือกนี้เก็บค่าอะไรไว้ ในกลุ่มตัวเลือกเดียวกัน ค่าน้ีควร แตกตา่ งกนั ข้ันตอนการสร้างฟอร์มและเพ่ิมส่วนรับข้อมูลแบบ Radio Button ให้เปิดโปรแกรม Notepad++ ขนึ้ มาแล้วทาการสร้างไฟล์ใหม่ แลว้ ทาการเขียนโค้ด ดงั นี้ (บนั ทกึ ไฟล์ ชือ่ : workshop24.php) ผลการใช้คาสัง่ ส่วนรบั ข้อมลู แบบ Radio Button
10 5. การสร้างสว่ นรับข้อมลู แบบ List/Menu List/Menu คือ ส่วนรบั ขอ้ มลู ทีม่ ีลกั ษณะแบบเมนใู หเ้ ลือก และสามารถเลอื กได้แค่ 1 อยา่ ง เท่านั้น จากตัวเลอื กท้งั หมด โดยจะมีลกั ษณะเป็นดรอปดาวน์ เมือ่ ทาการคลิกจะมีตัวเลือกเลื่อนลงมา ดา้ นล่างใหท้ าการคลกิ เลอื ก จะนาไปใช้งาน เชน่ การเลือกแผนกวชิ า การเลือกระดบั ชัน้ การเลอื ก จังหวัด เปน็ ตน้ รปู แบบในการใช้คาส่งั <select name = “ช่อื ของ List menu” size = “จานวนรายการทใี่ ห้มองเห็น”> <option value = “ค่าของรายการท่ี 1”> รายการท่ี 1 </option> <option value = “คา่ ของรายการท่ี 2”> รายการท่ี 2 </option> ….. </select> ชอ่ื คาอธบิ าย name เป็นคา่ กาหนดชื่อของแทก็ value เป็นคา่ ทีเ่ ก็บไวใ้ นแทก็ option วา่ ถ้าเลือกตัวเลอื กนจี้ ะไดค้ า่ อะไร size เป็นคา่ ท่แี สดงผลบนบราวเซอรก์ ี่บรรทัด ข้ันตอนการสร้างฟอร์มและเพิ่มส่วนรับข้อมูลแบบ List/Menu ให้เปิดโปรแกรม Notepad++ ขน้ึ มาแล้วทาการสรา้ งไฟล์ใหม่ แล้วทาการเขียนโคด้ ดังน้ี (บนั ทึกไฟล์ ชือ่ : workshop25.php)
11 ผลการใชค้ าสงั่ ส่วนรบั ขอ้ มลู แบบ Lint/Menu
12 6. การสร้างส่วนรบั ข้อมลู แบบ Button Button คือ ปมุ่ มีคณุ สมบัตใิ นการคลกิ เพ่ือทาใหข้ ้อมลู จากฟอร์มทผ่ี ใู้ ช้งานไดก้ รอกข้อมลู ลงไปใหท้ างานใน 2 ลกั ษณะ คอื submit หรือ reset Submit คอื เม่อื มกี ารคลิกทีป่ ุม่ ทม่ี คี ณุ สมบัติ submit ขอ้ มูลจากฟอรม์ จะถกู ส่งไปประมวล ยงั เซริ ์ฟเวอร์ ท่ีอา้ งองิ ถึง URL ปลายทางในตาแหน่ง action ของฟอร์ม Reset คอื เม่อื มกี ารคลกิ ที่ปุ่ม Reset ขอ้ มูลตา่ ง ๆ ทผี่ ใู้ ช้งานไดท้ าการกรอกลงไปในฟอร์ม จะถกู ลบออกจากฟอร์ม เพอ่ื ทาการป้อนข้อมูลใหม่ รูปแบบในการใชค้ าสั่ง <input type = “submit/reset” name “ช่ือของ button” value = “ค่าของขอ้ มูล”> ชอ่ื คาอธบิ าย value เปน็ คา่ ทจี่ ะแสดงบนตัวปมุ่ ในบราวเซอร์ ข้ันตอนการสร้างฟอร์มและเพ่ิมส่วนรับข้อมูลแบบ List/Menu ให้เปิดโปรแกรม Notepad++ ขึน้ มาแลว้ ทาการสรา้ งไฟลใ์ หม่ แลว้ ทาการเขียนโค้ด ดงั นี้ (บนั ทึกไฟล์ ช่อื : workshop26.php) ผลการใช้คาส่ังส่วนรับขอ้ มูลแบบ Button
13 แบบฝกึ หัดหนว่ ยที่ 7 เรื่อง การใชง้ าน PHP ร่วมกนั กับฟอร์ม คาช้ีแจง... ใหน้ กั เรียนเลือกคาตอบเตมิ ในชอ่ งว่างให้ถูกต้อง (ข้อละ 1 คะแนน) Text Field Text Area Password Field Radio button Checkbox Select (List/Menu) Button submit reset 1 2 3 4 5 6 7 8
14 ใบงานท่ี 7.1 หน่วยที่ 7 การใชง้ าน PHP รว่ มกนั กับฟอร์ม จดุ ประสงค์ เพือ่ ให้ผเู้ รียนสามารถ 1. สรา้ งฟอรม์ และสว่ นรบั ขอ้ มลู ได้ 2. อธบิ ายขั้นตอนการสรา้ งฟอร์มและส่วนรับขอ้ มลู และทดสอบโปรแกรมได้ วสั ดุ/อปุ กรณ์ เคร่อื งคอมพิวเตอร์ สือ่ การเรียน การสอน 1. โปรแกรม Notepad++ 2. โปรแกรม Appserv 3. โปรแกรมเว็บบราวเซอร์ (Google chrome) 4. หนังสอื เรียน วิชาการเขียนโปรแกรมภาษาคอมพิวเตอร์ รหัสวชิ า 20204-2107 ทักษะ 1. ประยกุ ต์ใชง้ านสว่ นรบั ข้อมูลแบบตา่ ง ๆ ในการเขยี นโปรแกรมไดถ้ ูกตอ้ งตามหลักการ 2. ทดสอบผลการใช้งานส่วนรบั ข้อมูลแบบต่างๆ ในการเขยี นโปรแกรมไดถ้ กู ตอ้ งตามหลกั การ คาสั่ง : ให้นกั เรียน สรา้ งฟอรม์ และเพิม่ สว่ นรบั ขอ้ มูลแบบ Text Field / Text Area / Check Box Radio Button / List/menu และ Button ดังน้ี 1. สรา้ งไฟลใ์ หม่แล้วบันทึกเปน็ ชอื่ ไฟล์ job7_1_เลขท่นี ักเรียน.php 2. สรา้ งฟอรม์ ใหม้ อี งคป์ ระกอบดังรปู 3. ส่งงานโดย Upload file ช่ือไฟล์ job7_1_เลขทีน่ กั เรียน.php ท่นี ี่ >> https://forms.gle/Sf27LXvoDDhLmcxe8 สแกน QR Code >>
15 แบบทดสอบหลงั เรยี น หน่วยที่ 7 การใช้งาน PHP รว่ มกับฟอรม์ เวลา 10 นาที เรอื่ ง การสร้างฟอรม์ คาชแ้ี จง แบบทดสอบเป็นแบบปรนยั 4 ตัวเลอื ก จานวน 10 ข้อ คะแนนเต็ม 10 คะแนน คาส่งั จงเลือกคาตอบทถี่ ูกทส่ี ดุ เพียงคาตอบเดียว สแกน QR code เพื่อทาแบบทดสอบ ขอ้ ท่ี 1) การสรา้ งเวบ็ เพจทมี่ กี ารแลกเปลยี่ นขอ้ มูลชองผู้ใช้เว็บเพจนนั้ ตอ้ งกาหนดองค์ประกอบอะไร ก. เฟรม ข. ฟอร์ม ค. เว็บบอรด์ ง. กระดานข่าว ข้อที่ 2) ขอ้ ใดเป็นรูปแบบคาส่ังในการสรา้ งฟอร์มเพอ่ื ใชก้ บั งาน PHP ท่ถี กู ต้อง ก. <form name=”Login” method=”POST” action=”URL”> ข. <form name=”Login” method=”POST” action=”URL”></form> ค. </form name=”Login” method=”POST” action=”UR”L></form> ง. <form name=”Login” method=”POST” action=”URL”><form> ขอ้ ที่ 3) ในการแทรกชอ่ งรบั ขอ้ มูลประเภทต่างๆ น้นั ต้องอยภู่ ายในแทก็ คาสัง่ ใด ก. <?PHP …. ?> ข. <HTML> ….. </HTML> ค. <Form> ….. </Form> ง. <Frame> ….. </Frame> ขอ้ ท่ี 4) คาส่งั Input type = “text”> เป็นการกาหนดชอ่ งรับข้อมูลประเภทใด ก. Button ข. Radio ค. Checkbox ง. Text Field ข้อท่ี 5) ขอ้ ใดเป็นการสรา้ งส่วนรับขอ้ มูลแบบ Text Field ทถ่ี กู ตอ้ ง ก. <input type=“text” name=“user”> ข. <input type=“text” name=”user”></input> ค. <input type=”text field” name=”user”> ง. <input type=”text field” name=”user”></input>
16 ขอ้ ท่ี 6) ข้อใดถูกต้องในการสร้างช่องรับข้อมูลประเภท Password ก. <Input type=”text”> ข. <Input type =”submit”> ค. <Input type=”password”> ง. <Input type=”reset”> ขอ้ ท่ี 7) ข้อใดเป็นการสร้างสว่ นรับขอ้ มลู แบบ Check Box ท่ถี กู ต้อง ก. <Input=”text name=”user”> ข. <checkbox-“comment” cols=”70” rows=”70”>computer</checkbox> ค. <input type=”check box” name=”user”> ง. <input type=”checkbox” name=”book> value=”cartoon”>cartoon ขอ้ ที่ 8) ถ้าตอ้ งการสรา้ งกลอ่ งรบั ข้อมลู จากผชู้ มเว็บสาหรับคาถามปลายเปิด ประเภทพิมพ์ตอบยาวๆ ควรใชเ้ ครอื่ งมือใด ก. Text Field ข. Text Area ค. Check Box ง. List/Menu ขอ้ ท่ี 9 ขอ้ ใดเป็นการสรา้ งสว่ นรับขอ้ มูลแบบ Button ที่ถูกตอ้ ง ก. <file field=”text” name=”user”> ข. <input type =”submit” name=”submit” value=”ตกลง” ค. <input type=”button” name=”submit”> ง. <input type=”text field” name=”user”></input> ขอ้ ที่ 10 ถ้าตอ้ งใหเ้ ลือกข้อมลู ไดม้ ากกวา่ 1 ตวั เลอื ก ตักเรยี นจะเลือกชอ่ งรบั ข้อมลู ประเภทใด ก. Checkbox ข. Radio button ค. Text area ง. Select ************** https://online.pubhtml5.com/qxrj/ccwn/
17
Search
Read the Text Version
- 1 - 17
Pages:
