หน่วยที่ 7 การใช้งาน PHP ร่วมกับฟอร์ม เนื้อหาสาระ (Content) 7.1 การสร้างฟอร์ม การสร้างแบบฟอร์ม หรือเรียกอีกอย่างที่นิยมกันในกลุ่มผู้เขียนโปรแกรมในภาษา PHP คือ ฟอร์ม เป็นการสร้างหน้าเว็บแอปพลิเคชันให้มีความสามารถติดต่อรับข้อมูลจากผู้ใช้งาน และส่งข้อมูลนั้นไป ประมวลผลที่ฝั่งเซิร์ฟเวอร์ เป็นการทำให้ผู้ใช้งานได้มีส่วนร่วมเกี่ยวกับเว็บแอปพลิเคชัน เช่น ฟอร์มสำหรับ สมัครสมาชิกฟอร์มกระทู้, ฟอร์มเว็บบอร์ด เป็นต้น มีรูปแบบการใช้งานคำสั่งในการสร้างฟอร์มดังนี้ ภายใต้ Tag form name คือ ชื่อของฟอร์ม, method คือ รูปแบบในการส่งข้อมูล มี 2 แบบคือ Get กับ Post, action คือ ตำแหน่งของ URL ที่จะนำข้อมูลจากฟอร์มไปประมวลผล รูปที่ 7.1 ตัวอย่างแบบฟอร์ม <form name="ชื่อฟอร์ม" method="post หรือ get" action="URL"> (แท็กเปิดคำสั่งสร้างฟอร์ม) .ส่วนประกอบของฟอร์ม </form> (แท็กปิดคำสั่งสร้างฟอร์ม) หรือ <form> ส่วนประกอบของฟอร์ม </form>
แบบฟอร์มเป็นส่วนประกอบหนึ่งของเว็บแอปพลิเคชันที่มีความสำคัญทำให้เว็บมีความน่าสนใจและมี รูปแบบการทำงานที่หลากหลาย เช่น การทำเว็บค้นหาข้อมูลจากอินเทอร์เน็ต การแสดงความคิดเห็น การ กรอกข้อมูลออนไลน์ การซื้อสินค้าออนไลน์ การทำข้อสอบออนไลน์ แบบสอบถามออนไลน์ และฟอร์มนั้นจะมี องค์ประกอบต่าง ๆ ที่จะเรียนรู้ในหน่วยการเรียนนี้ เช่น ช่องกรอกข้อความ ตัวเลือกแบบต่าง ๆ ปุ่ม เป็นส่วนที่ ใช้ในการรับข้อมูลจากผู้ใช้ ดังรูปที่ 7.1 7.1.1 การสร้างส่วนรับข้อมูล Text Field Text Field คือ ส่วนรับข้อความ หรือ กล่องรับข้อความในลักษณะบรรทัดเดียว จะใช้ในการรับ ข้อมูล รูปแบบสั้น ๆ เช่น ชื่อผู้ใช้งาน รหัสผ่าน ชื่อ นามสกุล อีเมล เป็นต้น ซึ่งมีรูปแบบในการใช้คำสั่งสร้างส่วนรับ ข้อมูลแบบ Text Field ดังนี้ ตารางที่ 7.1 อธิบายคำสั่งสร้างส่วนรับข้อมูล Text Field คำสั่ง ความหมาย name ชื่อของส่วนรับข้อมูล Text Field หรือชื่อกล่องรับข้อมูล Text Field type กำหนดลักษณะการรับข้อมูลให้มีประเภทเป็นการรับข้อความ size กำหนดขนาดความกว้างของ Text Field maxlength กำหนดจำนวนตัวอักษรที่จะกรอกได้สูงสุดใน Text Field ขั้นตอนในการสร้างฟอร์มและเพิ่มส่วนรับข้อมูลแบบ Text Field ลงไปในฟอร์มมีขั้นตอนดังนี้ ให้เปิด โปรแกรม Notepad++ ขึ้นมาทำการสร้างไฟล์ใหม่ แล้วทำการเขียนโค้ดดังนี้ <input name="name" type = "text" size= "30" maxlength = "30">
รูปที่ 7.2 การใช้คำสั่งสร้างส่วนรับข้อมูล และผลการใช้คำสั่งส่วนรับข้อมูลแบบ Text Field (ชื่อไฟล์ : workshop21.php) 7.1.2 การสร้างส่วนรับข้อมูลแบบ Text Area Text Area คือ ส่วนรับข้อมูลที่สามารถรับข้อมูลได้แบบหลายบรรทัด หรือ ประเภทที่ต้องการ ใช้ สำหรับข้อมูลที่มีความยาว เช่น ที่อยู่ปัจจุบัน ส่วนแสดงความคิดเห็น ข้อเสนอแนะ เป็นต้น ซึ่งมีรูปแบบใน การ ใช้คำสั่งสร้างส่วนรับข้อมูลแบบ Text Area ดังนี้ ขั้นตอนในการสร้างฟอร์มและเพิ่มส่วนรับข้อมูลแบบ Text Area ลงไปในฟอร์มมีขั้นตอนดังนี้ ให้เปิด โปรแกรม Notepad++ ขึ้นมาทำการสร้างไฟล์ใหม่ แล้วทำการเขียนโค้ดดังนี้ <textarea name = "ชื่อของส่วนรับข้อมูล" cols = "จำนวนคอลัมน์" rows= "จํานวนแถว"> </textarea>
รูปที่ 7.3 การใช้คำสั่งสร้างส่วนรับข้อมูล Text Area (ชื่อไฟล์ : workshop22.php) รูปที่ 7.4 ผลการใช้คำสั่งสร้างส่วนรับข้อมูล Text Area (ชื่อไฟล์ : workshop22.php) 7.1.3 การสร้างส่วนรับข้อมูลแบบ Check Box Check Box คือ ส่วนรับข้อมูลที่มีลักษณะเป็นปุ่มสี่เหลี่ยม ที่มีไว้สำหรับเลือก โดยมีคุณสมบัติ ในการ เลือกได้มากกว่า 1 หัวข้อ จะนิยมนำมาใช้ในลักษณะรับข้อมูลชนิดที่สามารถเลือกได้หลายข้อ เช่น หนังสือที่ ชอบอ่าน หนังที่ชอบดู กีฬาที่ชื่นชอบ เป็นต้น ซึ่งมีรูปแบบในการใช้คำสั่งสร้างส่วนรับข้อมูลแบบ Check Box ดังนี้ ขั้นตอนในการสร้างฟอร์มและเพิ่มส่วนรับข้อมูลแบบ Check Box ลงไปในฟอร์มมีขั้นตอนดังนี้ ให้เปิด โปรแกรม Notepad++ ขึ้นมาทำการสร้างไฟล์ใหม่ แล้วทำการเขียนโค้ดดังนี้ <input type="checkbox" name = "ชื่อของ checkbox" value = "ค่าเริ่มต้นของ checkbox">
รูปที่ 7.5 การใช้คำสั่งสร้างส่วนรับข้อมูล Checkbox (ชื่อไฟล์ : workshop23.php) รูปที่ 7.6 ผลการใช้คำสั่งสร้างส่วนรับข้อมูล Checkbox (ชื่อไฟล์ : workshop23.php) 7.1.4 การสร้างส่วนรับข้อมูลแบบ Radio Button Radio Button คือ ส่วนรับข้อมูลที่มีลักษณะคล้ายกันกับแบบ Checkbox เป็นส่วนรับข้อมูลที่ เป็น ลักษณะปุ่มเช่นเดียวกัน แต่มีความแตกต่างกันคือ Radio Button จะเป็นปุ่มวงกลม และคุณสมบัติในการ เลือกปุ่มแบบนี้จะสามารถเลือกได้อย่างใดอย่างหนึ่ง เช่น นำไปใช้กับแบบสอบถามให้เลือกเพศ ชาย หรือ หญิง เพียงเท่านั้น ซึ่งมีรูปแบบในการใช้คำสั่งสร้างส่วนรับข้อมูลแบบ Radio Button ดังนี้ ขั้นตอนในการสร้างฟอร์มและเพิ่มส่วนรับข้อมูลแบบ Radio Button ลงไปในฟอร์มมีขั้นตอนดังนี้ ให้ เปิดโปรแกรม Notepad++ ขึ้นมาทำการสร้างไฟล์ใหม่ แล้วทำการเขียนโค้ดดังนี้ <input type="radio" name = "ชื่อของ radio" value = "ของ radio">
รูปที่ 7.7 การใช้คำสั่งสร้างส่วนรับข้อมูล Radio Button (ชื่อไฟล์ : workshop24.php) รูปที่ 7.8 ผลการใช้คำสั่งสร้างส่วนรับข้อมูล Radio Button (ชื่อไฟล์ : workshop24.php) 7.1.5 การสร้างส่วนรับข้อมูลแบบ List/Menu List/Menu คือ ส่วนรับข้อมูลที่มีลักษณะแบบเมนูให้เลือก และสามารถเลือกได้แค่ 1 อย่าง เท่านั้น จากตัวเลือกทั้งหมด โดยจะมีลักษณะเป็นตรอปดาวน์ เมื่อทำการคลิกจะมีตัวเลือกเลื่อนลงมาด้านล่างให้ ทำ การคลิกเลือก จะนำไปใช้งาน เช่น การเลือกแผนกวิชา การเลือกระดับชั้น การเลือกจังหวัด เป็นต้น ซึ่งมี รูปแบบในการใช้คำสั่งสร้างส่วนรับข้อมูลแบบ List/Menu ดังนี้ <select name = "ชื่อของ List menu" size = "จำนวนรายการที่ให้มองเห็น"> <option value = "ค่าของรายการที่ 1"> รายการที่ 1 </option> <option value = "ค่าของรายการที่ 2 ">รายการที่ 2 </option> …….. option ที่ N </select>
ขั้นตอนในการสร้างฟอร์มและเพิ่มส่วนรับข้อมูลแบบ List/menu ลงไปในฟอร์มมีขั้นตอนดังนี้ ให้เปิด โปรแกรม Notepad++ ขึ้นมาทำการสร้างไฟล์ใหม่ แล้วทำการเขียนโค้ดดังนี้ รูปที่ 7.9 การใช้คำสั่งสร้างส่วนรับข้อมูล List/menu (ชื่อไฟล์ : workshop25.php) รูปที่ 7.10 ผลการใช้คำสั่งสร้างส่วนรับข้อมูล List/menu (ชื่อไฟล์ : workshop25.php) 7.1.6 การสร้างส่วนรับข้อมูลแบบ File Field File Field คือ ส่วนรับข้อมูลที่ใช้ในการเลือกไฟล์เพื่ออัปโหลดไฟล์จากเครื่องไปยังเว็บ โดยมี รูปแบบ การใช้งานดังนี้ ขั้นตอนในการสร้างฟอร์มและเพิ่มส่วนรับข้อมูลแบบ File Field ลงไปในฟอร์มมีขั้นตอนดังนี้ให้ เปิด โปรแกรม Notepad++ ขึ้นมาทําการสร้างไฟล์ใหม่ แล้วทำการเขียนโค้ดดังนี้ <input type= "file" name "ชื่อของ file field">
รูปที่ 7.11 การใช้คำสั่งสร้างส่วนรับข้อมูล File Field (ชื่อไฟล์ : workshopfile.php) รูปที่ 7.12 ผลการใช้คำสั่งสร้างส่วนรับข้อมูล File Field (ชื่อไฟล์ : workshopfile.php) 7.1.7 การสร้างส่วนรับข้อมูลแบบ Button Button คือ ปุ่ม มีคุณสมบัติในการคลิกเพื่อทำให้ข้อมูลจากฟอร์มที่ผู้ใช้งานได้กรอกข้อมูลลงไป ให้ ทำงานใน 2 ลักษณะคือ Submit หรือ Reset Submit คือ เมื่อมีการคลิกปุ่มที่มีคุณสมบัติเป็น Submit ข้อมูลจากฟอร์มจะถูกส่งไปประมวล ยัง เซิร์ฟเวอร์ ที่อ้างอิงถึง URL ปลายทางในตำแหน่ง action ของฟอร์ม Reset คือ เมื่อมีการคลิกที่ปุ่ม Reset ข้อมูลต่างๆ ที่ผู้ใช้งานได้ทำการกรอกลงไปในฟอร์มจะถูก ลบ ออกจากฟอร์ม เพื่อทำการป้อนข้อมูลใหม่ รูปแบบในการใช้คำสั่งสร้าง Button มีดังนี้ ขั้นตอนในการสร้างฟอร์มและเพิ่มส่วนรับข้อมูลแบบ List/menu ลงไปในฟอร์มมีขั้นตอนดังนี้ให้เปิด โปรแกรม Notepad++ ขึ้นมาแล้วทำการสร้างไฟล์ใหม่ แล้วทำการเขียนโค้ดดังนี้ <input type="submit/reset" name "ชื่อของ button" value="ค่าของข้อมูล">
รูปที่ 7.13 การใช้คำสั่งสร้างส่วนรับข้อมูล Button (ชื่อไฟล์ : workshop26.php) รูปที่ 7.14 ผลการใช้คำสั่งสร้างส่วนรับข้อมูล (ชื่อไฟล์ : workshop26.php) 7.2 การสร้างฟอร์มและส่วนรับข้อมูลเพื่อใช้งาน การสร้างฟอร์มและส่วนรับข้อมูลเพื่อใช้งาน คือ การสร้างฟอร์มพร้อมกับส่วนรับข้อมูลให้มี องค์ประกอบ ในแต่ละส่วนอยู่ภายในหน้าเว็บแอปพลิเคชันหน้าเดียวให้สามารถรับข้อมูลได้อย่างสมบูรณ์เช่น มีส่วนของ Text Field, Text Area, Radio Button, Checkbox, List/Menu เป็นต้น ขั้นตอนในการสร้างฟอร์มและเพิ่มส่วนรับข้อมูลเพื่อใช้งาน ให้เปิดโปรแกรม Notepad++ ขึ้นมาทำ การ สร้างไฟล์ใหม่ แล้วทำการเขียนโค้ดดังนี้
รูปที่ 7.15 การใช้คำสั่งสร้างฟอร์มและส่วนรับข้อมูล (ชื่อไฟล์ : workshop27.php) รูปที่ 7.16 ผลการใช้คำสั่ง สร้างฟอร์มและส่วนรับข้อมูล (ชื่อไฟล์ : workshop27.php) 7.3 การใช้ตารางในการจัดการฟอร์ม ในการสร้างฟอร์มสำหรับใช้ในการรับส่งข้อมูลจากผู้ใช้งานเพื่อส่งไปประมวลผลที่ฝั่งเซิร์ฟเวอร์นั้นถ้า การ สร้างฟอร์มจากคำสั่งต่าง ๆ เช่น เพิ่มส่วนรับข้อมูลแบบต่าง ๆ เข้ามานั้น เป็นการสร้างแบบฟอร์มเพื่อ ทดสอบ การใช้งานซึ่งเมื่อแสดงผลแล้วองค์ประกอบของส่วนรับข้อมูลนั้นจะไม่สวยงาม ที่ใช้เป็นส่วนประสาน เพื่อรับข้อมูลจากผู้ใช้งานนั้นต้องมีความสวยงาม แต่ลักษณะการใช้งานจริงฟอร์ม มีความน่าสนใจ จึงจำเป็นที่ ต้องจัดวาง องค์ประกอบของฟอร์มให้มีความเหมาะสม โดยการสร้างตารางเพื่อใช้จัดการฟอร์มให้มี องค์ประกอบที่มีความสวยงาม ด้วย Tag คำสั่งภาษา HTML ซึ่งมีรูปแบบดังนี้ <table> <tr> <td>ข้อมูลในตาราง</td> </tr> </table>
<table>...</table> เป็นคำสั่งสร้างตาราง ใช้กำหนดขอบเขตของตารางรวมถึงการกำหนด รายละเอียด ต่าง ๆ ที่มีการแสดงผลของตาราง <tr>…</tr> เป็นคำสั่งที่ใช้กำหนดแถวของตาราง เป็นคำสั่งคู่ที่ต้องมีทั้งแท็กเปิดและแท็กปิดการใช้ แท็ก <tr>…</tr> 1 ครั้ง หมายถึง 1 แถว <td>...</td> เป็นคำสั่งที่ใช้กำหนดจำนวนคอลัมน์ของตารางและใช้แสดงข้อมูลของแต่ละเซลล์ของ ตาราง เป็นคำสั่งคู่ที่ต้องมีทั้งแท็กเปิดและแท็กปิด การใช้แท็ก <td>…</td> 1 ครั้ง หมายถึง 1 คอลัมน์ หรือ 1 เซลล์ รูปที่ 7.17 การใช้คำสั่งสร้างตาราง การประยุกต์ใช้คำสั่งสร้างตารางเพื่อจัดการฟอร์มรับส่ง สำหรับนำไปใช้งานในการสร้างเว็บแอปพลิเค ชัน ให้มีความสวยงาม มีวิธีสร้างดังนี้ ให้เปิดโปรแกรม Notepad++ ขึ้นมาแล้วทำการสร้างไฟล์ใหม่ แล้วทำเขียนโค้ดดังนี้ รูปที่ 7.18 การใช้ตารางจัดการฟอร์มรับส่งข้อมูล (ชื่อไฟล์ : workshop28.php)
รูปที่ 7.19 การใช้ตารางจัดการฟอร์มรับส่งข้อมูล (ชื่อไฟล์ : workshop28.php) ต่อ รูปที่ 7.20 การใช้ตารางจัดการฟอร์มรับส่งข้อมูล (ชื่อไฟล์ : workshop28.php) ต่อ รูปที่ 7.21 ผลการใช้ตารางจัดการฟอร์มรับส่งข้อมูล (ชื่อไฟล์ : workshop28.php)
รูปที่ 7.22 ผลการใช้คำสั่งสร้างฟอร์มรับส่งข้อมูลที่ไม่ได้ใช้ตารางจัดการฟอร์ม (ชื่อไฟล์ : workshop27.php) 7.4 การเขียนโปรแกรมส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์ การเขียนโปรแกรมส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์ เป็นขั้นตอนในการเขียนโค้ดเพื่อส่งไปให้เว็บเซิร์ฟเวอร์ ได้ทำการประมวลผลและนำค่าที่ได้จากฟอร์มที่ข้อมูล ไปแสดงผลบนเว็บบราว์เซอร์ ซึ่งภาษา PHP จะเป็นการ ประมวลผลบนฝั่งเซิร์ฟเวอร์ ในการแสดงผลนั้นสามารถแสดงผลผ่านเว็บบราว์เซอร์ได้จากหลากหลายอุปกรณ์ เช่น หน้าจอโน้ตบุ๊ก หน้าจอคอมพิวเตอร์ แท็บเล็ต มือถือ เป็นต้น และวิธีในการส่งผ่านข้อมูลมี 2 วิธี คือ การ ส่งข้อมูลในรูปแบบ POST และการส่งข้อมูลในรูปแบบ GET 7.4.1 การส่งข้อมูลในรูปแบบ POST การส่งข้อมูลในรูปแบบ POST เป็นการส่งข้อมูลจากฟอร์มไปยังสคริปต์ โดยค่าที่ได้จากฟอร์ม นั้นจะ ไม่ผ่าน URL ไม่สามารถมองเห็นข้อมูลผ่านทาง URL เป็นรูปแบบการส่งข้อมูลที่มีความปลอดภัยและส่ง ข้อมูล ได้มากกว่ารูปแบบ GET ในการส่งข้อมูลในรูปแบบ POST ในหน่วยการเรียนนี้ จะใช้ฟอร์มที่ได้ทำการสร้างขึ้นจากไฟล์ workshop28.php ในหัวข้อที่ผ่านมาเพื่อทำการเขียนโปรแกรมส่งค่าจากฟอร์มไปประมวลผล มีขั้นตอน ดังต่อไปนี้ 1. ให้เปิดโปรแกรม Notepad++ ขึ้นมาแล้วทำการไปที่ ไฟล์> เปิด เพื่อทำการเปิดไฟล์ workshop28.php ขึ้นมาเพื่อกำหนด action และ method ให้กับไฟล์
รูปที่ 7.23 การเปิดไฟล์จากโปรแกรม notepad++ 2. จากนั้นไฟล์ workshop28.php จะถูกเปิดขึ้นมา ให้ทําการกำหนด action ให้กับฟอร์มคือ ไฟล์ ภาษา PHP ที่จะทำการประมวลผลข้อมูลที่ได้รับจากฟอร์ม ให้ชื่อ check.php และกำหนด method ให้กับ ฟอร์มเป็นรูปแบบ POST รูปที่ 7.24 การกำหนด action และรูปแบบการส่งข้อมูล POST ให้ฟอร์ม (ชื่อไฟล์ : workshop28.php) 3. หลังจากได้กำหนด action และรูปแบบการส่งข้อมูลจากฟอร์มให้กับไฟล์แล้ว ให้สร้างไฟล์ ใหม่ จากโปรแกรม Notepad++ ขึ้นมาแล้วตั้งชื่อไฟล์ให้ตรงกับ action ที่กำหนดไว้คือ check.php ดังนั้นให้ ทำ การตั้งชื่อไฟล์โดยการ "บันทึกเป็น" ชื่อไฟล์ check.php รูปที่ 7.25 การสร้างไฟล์ใหม่และบันทึกเป็น (ชื่อไฟล์ : check.php)
4. ให้ทำการเขียนโปรแกรมนำค่าจากฟอร์มไปประมวลผลและแสดงผลผ่านทางเว็บบราว์เซอร์ รูปที่ 7.26 การเขียนคำสั่งแสดงผลที่รับค่าจากฟอร์ม (ชื่อไฟล์ : check.php) รูปที่ 7.27 ฟอร์มรับข้อมูล (ชื่อไฟล์ : workshop28.php)
5. จากฟอร์มรับส่งข้อมูลชื่อไฟล์ workshop28.php มีคุณสมบัติของส่วนรับข้อมูล ดังนี้ ตารางที่ 7.1 ฟิลด์ในการเก็บข้อมูลของฟอร์มรับส่งข้อมูล ชื่อ ประเภท เก็บค่าข้อมูล Fistname (ชื่อ) Text Field เก็บชื่อ Lastname (สกุล) Text Field เก็บนามสกุล User (ชื่อผู้ใช้งาน) Text Field เก็บชื่อผู้ใช้งาน Password (รหัสผ่าน) Password เก็บรหัสผ่านผู้ใช้งาน Gender (เพศ) Radio Button เก็บข้อมูลเพศ Age (อายุ) List/Menu เก็บอายุผู้ใช้งาน ปุ่ม (ตกลง) Submit กดเพื่อส่งค่าไปยังไฟล์ check.php ให้ประมวลผล ปุ่ม (ยกเลิก) Reset กดเพื่อยกเลิกข้อมูลในฟอร์มทั้งหมด รูปที่ 7.28 ผลการรับค่าข้อมูลจากฟอร์มและแสดงผล (ชื่อไฟล์ : check.php) จากการเขียนโปรแกรมเพื่อนำข้อมูลจากฟอร์มไปประมวลผลยังเว็บเซิร์ฟเวอร์ โดยมีรูปแบบ การส่ง ข้อมูลในรูปแบบ POST นั้น มีไฟล์ที่เกี่ยวข้องและทำงานร่วมกันอยู่ 2 ไฟล์ คือ 1. ไฟล์ที่ 1 เป็นฟอร์มสำหรับรับค่าข้อมูลจากผู้ใช้งานชื่อไฟล์ workshop28.php ซึ่งมีหน้าที่ ในการ รับข้อมูลโดยมีส่วนรับข้อมูลที่ประกอบด้วย Text Field, Radio Button, List/Menu, Checkbox 2. ไฟล์ที่ 2 เป็นไฟล์สำหรับประมวลผลข้อมูลที่ได้จากฟอร์มเมื่อมีการกรอกข้อมูลในฟอร์มและกด ปุ่ม ตกลงบนฟอร์ม ข้อมูลที่ได้รับนั้นจะถูกส่งมาประมวลผลโดยไฟล์ check.php และนำข้อมูลจากฟอร์มที่ได้ นั้น ไปแสดงผลผ่านเว็บบราว์เซอร์ ซึ่งการส่งข้อมูลแบบ POST จะไม่แสดงข้อมูลบน URL โดยการทำงานของ ทั้ง สองไฟล์มีการทำงานดังนี้
รูปที่ 7.29 การทำงานของ PHP รูปที่ 7.30 การส่งข้อมุลจากฟอร์มไปยังประมวลผล รูปที่ 7.31 การแสดงผลค่าที่ได้รับจากฟอร์มในรูปแบบ POST เริ่มต้นการทำงานจากการกรอกข้อมูลลงไปในฟอร์มที่ชื่อไฟล์ workshop28.php เมื่อมีการกดปุ่ม ตก ลง ข้อมูลที่กรอกในฟอร์มจะถูกส่งไปประมวลผล ยังไฟล์ check.php หรือไฟล์ที่ระบุส่วนของ action ของ ฟอร์ม โดยมีตัวแปรในการรับค่าข้อมูลเพื่อจะนำไปประมวลผลที่ตรงตามฟอร์ม เช่น text field ของชื่อ ในส่วน ของ <input type = "text" name = "fistname"> ตัวแปรที่ใช้ในการรับค่าเพื่อประมวลในไฟล์ check.php จำเป็นที่ต้องสร้างตัวแปรที่จะแสดงผล ชื่อ $fistname แล้วใช้คำสั่ง echo "$fistname"; เพื่อแสดงค่าที่ได้ ผ่าน ทางเว็บบราว์เซอร์ โดยมีรูปแบบการส่งข้อมูลแบบ POST ที่บน URL นั้นจะไม่แสดงข้อมูลอะไรที่ได้ส่งมา ซึ่งจะ แตกต่างจากการส่งแบบ GET ซึ่งจะได้เรียนรู้ในหัวข้อต่อไป
7.4.2 การส่งข้อมูลในรูปแบบ GET การส่งข้อมูลในรูปแบบ GET จะมีลักษณะในการส่งข้อมูลผ่านทาง URL หรือ address bar โดย ข้อมูลที่ได้กรอกลงไปในฟอร์มนั้นจะถูกส่งต่อท้ายไฟล์ เช่น ชื่อไฟล์?fistname=suriyun ในการส่งข้อมูลในรูปแบบ GET ในหน่วยการเรียนนี้ จะใช้ฟอร์มที่ได้ทำการสร้างขึ้นจากไฟล์ workshop28.php ในหัวข้อที่ผ่านมาเพื่อทำการเขียนโปรแกรมส่งคำจากฟอร์มไปประมวลผล มีขั้นตอน ดังต่อไปนี้ 1.ให้เปิดโปรแกรม Notepad++ ขึ้นมาแล้วทำการไปที่ ไฟล์> เปิด เพื่อทำการเปิดไฟล์ workshop28.php ขึ้นมาเพื่อกำหนด action และ method ให้กับไฟล์ รูปที่ 7.32 การเปิดไฟล์จากโปรแกรม Notepad++ 2. จากนั้นไฟล์ workshop28.php จะถูกเปิดขึ้นมา ให้ทำการกำหนด action ให้กับฟอร์มคือ ไฟล์ ภาษา PHP ที่จะทำการประมวลผลข้อมูลที่ได้รับจากฟอร์ม ให้ชื่อ checkget.php และกำหนด method ให้กับฟอร์มเป็นรูปแบบ GET
รูปที่ 7.33 การกำหนด action และรูปแบบการส่งข้อมูล GET ให้ฟอร์ม (ชื่อไฟล์ : workshop28.php) 3. หลังจากได้กำหนด action และรูปแบบการส่งข้อมูลจากฟอร์ม ให้กับไฟล์แล้วให้สร้างไฟล์ ใหม่ จากโปรแกรม Notepad++ ขึ้นมาแล้วตั้งชื่อไฟล์ให้ตรงกับ action ที่กำหนดไว้คือ checkget.php ดังนั้น ให้ ทำการตั้งชื่อไฟล์โดยการ "บันทึกเป็น" ชื่อไฟล์ checkget.php รูปที่ 7.34 การสร้างไฟล์ใหม่และบันทึกเป็น (ชื่อไฟล์ : checkget.php) 4. ให้ทำการเขียนโปรแกรมนำค่าจากฟอร์มไปประมวลผลและแสดงผลผ่านทางเว็บบราว์เซอร์ รูปที่ 7.35 การเขียนคำสั่งแสดงผลที่รับค่าจากฟอร์ม (ชื่อไฟล์ : checkget.php)
รูปที่ 7.36 ฟอร์มรับข้อมูล (ชื่อไฟล์ : workshop28.php) จากฟอร์มรับส่งข้อมูลชื่อไฟล์ workshop28.php มีคุณสมบัติของส่วนรับข้อมูล ดังนี้ ตารางที่ 7.2 ฟิลด์ในการเก็บข้อมูลของฟอร์มรับส่งข้อมูล ชื่อ ประเภท เก็บค่าข้อมูล Fistname (ชื่อ) Text Field เก็บชื่อ Lastname (สกุล) Text Field เก็บนามสกุล User (ชื่อผู้ใช้งาน) Text Field เก็บชื่อผู้ใช้งาน Password (รหัสผ่าน) Password เก็บรหัสผ่านผู้ใช้งาน Gender (เพศ) Radio Button เก็บข้อมูลเพศ Age (อายุ) List/Menu เก็บอายุผู้ใช้งาน ปุ่ม (ตกลง) Submit กดเพื่อส่งค่าไปยังไฟล์ check.php ให้ประมวลผล ปุ่ม (ยกเลิก) Reset กดเพื่อยกเลิกข้อมูลในฟอร์มทั้งหมด รูปที่ 7.37 ผลการรับค่าข้อมูลจากฟอร์มและแสดงผลข้อมูล (ชื่อไฟล์ : checkget.php)
จากการเขียนโปรแกรมเพื่อนำข้อมูลจากฟอร์มไปประมวลผลยังเว็บเซิร์ฟเวอร์ โดยมีรูปแบบ การส่ง ข้อมูลในรูปแบบ GET นั้น มีไฟล์ที่เกี่ยวข้องและทำงานร่วมกัน 2 ไฟล์ คือ 1. ไฟล์ที่ 1 เป็นฟอร์มสำหรับรับค่าข้อมูลจากผู้ใช้งานชื่อไฟล์ workshop28.php ซึ่งมีหน้าที่ ในการ รับข้อมูลโดยมีส่วนรับข้อมูลที่ประกอบด้วย Text Field, Radio button, List/Menu, Checkbox 2. ไฟล์ที่ 2 เป็นไฟล์สำหรับประมวลผลข้อมูลที่ได้จากฟอร์มเมื่อมีการกรอกข้อมูลในฟอร์มและ กดปุ่ม ตกลงบนฟอร์ม ข้อมูลที่ได้รับนั้นจะถูกส่งมาประมวลผลโดยไฟล์ checkget.php และนำข้อมูลจากฟอร์มที่ ได้ นั้นไปแสดงผลผ่านเว็บบราว์เซอร์ ซึ่งการส่งข้อมูลแบบ GET ข้อมูลนั้นจะแสดงบน URL หรือ Address Bar การส่งข้อมูลแบบ GET จะมีการทำงานเร็วกว่าการส่งแบบ POST การส่งข้อมูลแบบนี้จะนำไปใช้กับการส่ง ข้อมูลพวก ID เพื่อใช้ในการค้นหาข้อมูลจากฐานข้อมูลโดยใช้ ID อ้างอิง ซึ่งการทำงานของทั้ง 2 ไฟล์มีการ ทำงานดังนี้ รูปที่ 7.38 การทำงานของ PHP รูปที่ 7.39 การส่งข้อมูลจากฟอร์มไปประมวลผล
รูปที่ 7.40 การแสดงผลค่าที่ได้รับจากฟอร์มในรูปแบบ GET เริ่มต้นการทำงานจากการกรอกข้อมูลลงไปในฟอร์มที่ชื่อไฟล์ workshop28.php เมื่อมีการกดปุ่ม ตกลง ข้อมูลที่กรอกในฟอร์มจะถูกส่งไปประมวลผล ยังไฟล์ checkget.php หรือไฟล์ที่ระบุส่วนของ action ของฟอร์ม โดยมีตัวแปรในการรับคำข้อมูลเพื่อจะนำไปประมวลผลที่ตรงตามฟอร์ม เช่น text field ของชื่อ ใน ส่วนของ <input type = "text" name = "fistname" > ตัวแปรที่ใช้ในค่าเพื่อประมวลในไฟล์ check.get php จำเป็นต้องสร้างตัวแปรที่จะแสดงผล ชื่อ $fistname แล้วใช้คำสั่ง echo "$fristname", เพื่อแสดงค่าที่ ได้ ผ่านทางเว็บบราว์เซอร์ โดยมีรูปแบบการส่งข้อมูลแบบ GET บน URL หรือ Address Bar นั้นจะแสดง ข้อมูลที่ กรอกในฟอร์ม การส่งข้อมูลแบบนี้จะส่งได้รวดเร็วกว่าแบบ POST 7.4.3 การแสดงผลข้อมูลจากฟอร์มให้สวยงาม ในการนำข้อมูลจากฟอร์มที่มีการรับค่าข้อมูลจากผู้ใช้งานเมื่อทำการประมวลผลแล้ว จะถูกแสดงผล ผ่านทางเว็บบราว์เซอร์ โดยข้อมูลที่ส่งมาแสดงผลยังขาดความหน้าสนใจ ในหัวข้อนี้จะเป็นการแทรก โค้ด HTML ลงใน PHP เพื่อให้การแสดงผลมีความสวยงามยิ่งขึ้น การแทรกโค้ด HTML ลงใน PHP ได้เรียนรู้ไป แล้วในหน่วยการเรียนที่ 3 ซึ่งการทำให้การแสดงผลข้อมูลจากฟอร์มสวยงาม มีขั้นตอนดังนี้ 1. ให้เปิดโปรแกรม Notepad++ ขึ้นมาแล้วทำการไปที่ ไฟล์> เปิด เพื่อทำการเปิดไฟล์ check.php ขึ้นมาเพื่อทำการแทรกโค้ด HTML เพื่อจัดการหน้าเว็บแอปพลิเคชันให้สวยงาม รูปที่ 7.14 การเปิดไฟล์จากโปรแกรม Notepad++
2. จากนั้นให้ทำการแก้ไขโค้ดของไฟล์ check.php ดังนี้ รูปที่ 7.42 การแทรกโค้ด HTML ใน PHP ในการแสดงผลข้อมูลจากฟอร์ม รูปที่ 7.43 การแสดงผลข้อมูลจากฟอร์มก่อนแทรกโค้ด HTML ใน PHP รูปที่ 7.44 การแสดงผลข้อมูลจากฟอร์มหลังแทรกโค้ด HTML ใน PHP
สรุปสาระสำคัญ การสร้างแบบฟอร์ม หรือเรียกอีกอย่างที่นิยมกันในกลุ่มผู้เขียนโปรแกรมในภาษา PHP คือ ฟอร์ม เป็น สร้างหน้าเว็บแอปพลิเคชันให้มีความสามารถติดต่อรับข้อมูลจากผู้ใช้งาน และส่งข้อมูลนั้นไปประมวลผลที่ ฝั่งเซิร์ฟเวอร์ Text Field คือ ส่วนรับข้อความ หรือ กล่องรับข้อความในลักษณะบรรทัดเดียว จะใช้ในการรับข้อมูล รูปแบบสั้น ๆ เช่น ชื่อผู้ใช้งาน รหัสผ่าน ชื่อ นามสกุล อีเมล เป็นต้น Text Area คือ ส่วนรับข้อมูลที่สามารถรับข้อมูลได้แบบหลายบรรทัด หรือ ประเภทที่ต้องการใช้ สำหรับข้อมูลที่มีความยาว เช่น ที่อยู่ปัจจุบัน ส่วนแสดงความคิดเห็น ข้อเสนอแนะ เป็นต้น Check Box คือ ส่วนรับข้อมูลที่มีลักษณะเป็นปุ่มสี่เหลี่ยม ที่มีไว้สำหรับเลือก โดยมีคุณสมบัติในการ เลือก ได้มากว่า 1 หัวข้อ จะนิยมนำมาใช้ในลักษณะ เช่น หนังสือที่ชอบอ่าน หนังที่ชอบดู กีฬาที่ชื่นชอบ เป็น ต้น Radio Button คือ ส่วนรับข้อมูลที่มีลักษณะคล้ายกับแบบ Checkbox เป็นส่วนรับข้อมูลที่เป็น ลักษณะปุ่มเช่นเดียวกัน แต่มีความแตกต่างกันคือ Radio Button จะเป็นปุ่มวงกลม และคุณสมบัติในการ เลือก ปุ่มแบบนี้จะสามารถเลือกได้อย่างใดอย่างหนึ่ง เช่น นำไปใช้กับแบบสอบถามให้เลือกเพศ ชาย หรือ หญิง เพียง เท่านั้น List/Menu คือ ส่วนรับข้อมูลที่มีลักษณะแบบเมนูให้เลือก และสามารถเลือกได้ 1 อย่างเท่านั้น จาก ตัวเลือกทั้งหมด Button คือ ปุ่ม มีคุณสมบัติในการคลิกเพื่อทำให้ข้อมูลจากฟอร์มที่ผู้ใช้งานได้กรอกข้อมูลลงไปให้ ทํางานใน 2 ลักษณะ คือ Submit หรือ Reset การเขียนโปรแกรมส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์เป็นขั้นตอนในการเขียนโค้ดเพื่อส่งไปให้เว็บ เซิร์ฟเวอร์ ได้ทำการประมวลผลและนำค่าที่ได้จากฟอร์มที่ได้รับข้อมูล ไปแสดงผลบนเว็บบราว์เซอร์ ซึ่งภาษา PHP จะ เป็นการประมวลผลบนฝั่งเซิร์ฟเวอร์ ในการแสดงผลนั้นสามารถแสดงผลผ่านเว็บบราว์เซอร์ใต้จาก หลากหลาย อุปกรณ์ เช่น หน้าจอโน้ตบุ๊ก หน้าจอคอมพิวเตอร์ แท็บเล็ต มือถือ เป็นต้น และวิธีในการส่งผ่าน ข้อมูลนั้นมี 2 วิธี คือ การส่งข้อมูลในรูปแบบ POST และการส่งข้อมูลในรูปแบบ GET การส่งข้อมูลในรูปแบบ POST เป็นการส่งข้อมูลจากฟอร์มไปยังสคริปต์ โดยที่ค่าที่ได้จากฟอร์มนั้น จะ ไม่ผ่าน URL ไม่สามารถมองเห็นข้อมูลผ่านทาง URL เป็นรูปแบบการส่งข้อมูลที่มีความปลอดภัยและส่ง ข้อมูล ได้มากกว่ารูปแบบ GET การส่งข้อมูลในรูปแบบ GET จะมีลักษณะในการส่งข้อมูลผ่านทาง URL หรือ Address Bar โดย ข้อมูล ที่ได้กรอกลงไปในฟอร์มนั้นจะถูกส่งต่อท้ายไฟล์ เช่น ชื่อไฟล์ ?fistname=suriyun