หน่วยที่ 6 ภาษา PHP กับการรับส่งข้อมูลผ่านฟอร์ม สาระการเรียนรู้ 1. การสร้างฟอร์มส าหรับส่งข้อมูล 2. การรับส่งข้อมูลจากฟอร์ม 3. การแทรกโค้ด JavaScript 4. การใช้งาน Session ผลการเรียนรู้ที่คาดหวัง 1. รู้เข้าใจ และมีทักษะการสร้างฟอร์มส าหรับส่งข้อมูลได้ 2. รู้เข้าใจ และมีทักษะการสร้างรับส่งข้อมูลจากฟอร์มได้ 3. รู้เข้าใจ และมีทักษะการแทรกโค้ด JavaScript 4. รู้เข้าใจ และมีทักษะการใช้งาน Session ได้ สมรรถนะการเรียนรู้ประจ าหน่วย 1. แสดงความรู้เกี่ยวกับการรับส่งข้อมูลผ่านฟอร์มด้วยภาษา PHP 2. แสดงความรู้เกี่ยวกับการแทรกโค้ด JavaScript 3. แสดงความรู้เกี่ยวกับการใช้งาน 4. พัฒนาเว็บไซต์ด้วยภาษา PHP การพัฒนาเว็บไซต์ในงานธุรกิจ 53

54 Website Developement in Business หน่วยที่6 ภาษา PHP กับการรับส่งข้อมูลผ่านฟอร์ม สาระส าคัญ ฟอร์ม (Form) ท าหน้าที่รับข้อมูลส าหรับการส่งต่อไปยังสคริปต์และการรับข้อมูลที่ส่งมาจาก ฟอร์ม (Form) นั้น มีวิธกีารส่งอยู่ 2 แบบ นั่นคือ แบบ GET กับแบบ POST แบบ GET นนั้จะส่ง ค่าผ่านทาง URL ท าให้ผู้ใช้งานสามารถมองเห็นข้อมูลที่ส่งไปได้แบบ POST นั้น เวลาส่ง ข้อมลู ผู้ใช้งานจะมองไม่เห็นข้อมูลที่ส่งไป และไม่มีข้อจ ากัดของเรื่องขนาดของขอ้มูลที่ส่งดว้ย โดยในบทนี้ จะอธิบายถึงการเขียนค าสั่งในภาษา PHP ส าหรับการสร้างฟอร์มส าหรับส่งข้อมูล การรับส่งข้อมูล จากฟอร์ม การแทรกโค้ด JavaScript การใช้งาน Session ในภาษา PHP การสร้างฟอร์มส าหรับการส่งข้อมูล ฟอร์ม (Form) ท าหน้าที่รับข้อมูลส าหรับการส่งต่อไปยังสคริปต์ที่ได้มีการพัฒนาขึ้น เพื่อใช้ในการ จัดการกับข้อมูล ซึ่งการสร้างฟอร์มสามารถสร้างช่องรับข้อมูลในรูปแบบต่าง ๆ ในบทนี้ผู้เขียนจะ สร้างฟอร์มโดยใช้เครื่องมือส าหรับการสร้างฟอร์มในโปรแกรม Adobe Dreamweaver CS6 ซึ่ง จะใช้เครื่องมือในพาเนล Insert Bar กลุ่มเครื่องมอืซึ่งเป็นส่วนที่ Forms รวบรวมเครื่องมือ ส าหรับใช้ในการสร้างแบบฟอร์ม และตัวเลือกต่าง ๆ ดังนี้ 1. ฟอร์ม (Form) เป็นเครื่องมือตัวแรกที่จะต้องวางก่อนการสร้างฟอร์มแบบใด ๆ ทุกครั้ง เพื่อก าหนดต าแหน่งที่จะส่งแบบฟอร์มไปประมวลผล รูปแบบ การก าหนดคุณสมบัติของฟอร์ม | 1 2 3 4

หน่วยที่6 ภาษา PHP กับการรับส่งข้อมูลผ่านฟอร์ม การพัฒนาเว็บไซต์ในงานธุรกิจ 55 1.1 ก าหนดชื่อฟอร์ม เช่น สร้างฟอร์มสมาชิก สามารถก าหนดชื่อฟอร์มเป็น Member ใน กรณีที่ไม่มีการก าหนดชื่อฟอร์มจะเป็น Form ให้อัตโนมัติ 1.2 ก าหนด Action ที่จะส่งค่าไปให้ยังไฟล์ใด ๆ ในการรับค่าประมวลผล 1.3 การก าหนดรูปแบบการส่งข้อมูลไปยังเซิร์ฟเวอร์โดยฟอร์มสามารถที่จะส่งได้ทั้ง 2 รูปแบบ คือ POST และ GET • POST เป็นการส่งข้อมูลจากฟอร์มไปยังสคริปต์โดยตรง โดยไม่ผ่าน URL ท าให้ ไม่สามารถมองเห็น ข้อมูลที่ส่งไป แบบนี้จะเหมาะกับข้อมูลขนาดใหญ่หรือข้อมูลที่ต้องการปิด เป็นความลับ • GET เป็นการส่งข้อมูลจากฟอร์มผ่านทาง URL ของเว็บเพจโดยตรง วิธีนจี้ะ ไม่ปลอดภัยเพราะข้อมลูที่ ส่งผ่านไปยังสคริปต์จะถูกแสดงออกมาในรูปแบบของข้อความธรรมดา ใน URL และสามารถมองเห็นใน Address Bar ของเว็บเบราว์เซอร์ 1.4 ก าหนด Enctype เป็นการอนุญาตให้ฟอร์มส่งข้อมูลได้หลายประเภทพร้อมกัน เช่น ข้อความ และรูปภาพ ซึ่งควรก าหนดเป็น Multipart/form- name="ชื่อ Text name=“ชื่อText Field" id="textfield"> การก าหนดคุณสมบัติของช่องรับข้อความ 1 2 3 4 5

56 Website Developement in Business หน่วยที่6 ภาษา PHP กับการรับส่งข้อมูลผ่านฟอร์ม 2.1 TextField: ก าหนดหรือตั้งชื่อให้กับช่องรับข้อความ เช่น ต้องการป้อนชื่อลูกค้า อาจตั้งชื่อเป็น txtnamecust เป็นต้น แต่ที่ส าคัญก็ควรตั้งชื่อให้สอดคล้องกับรายละเอียดที่ต้องการป้อน หรือใหส้อดคล้อง กับฟิลด์ในฐานข้อมูล 2.2 Char width: ก าหนดความกว้างของช่องรับข้อความ 2.3 Max chars: ก าหนดจ านวนตัวอักษรสูงสุดที่จะป้อนข้อความได้ 2.4 Init val: ก าหนดค่าเริ่มต้นที่ใช้ในการแสดงในช่องรับข้อความ อาจจะไม่ก าหนด ก็ได้แล้วแต่กรณี 2.5 Class: ซึ่งอาจจะก าหนดหรือไม่ก็ได้เพื่อให้เป็นสไตล์อาจมีการเรียกใช้Class ที่มีการสร้างสไตล์ หรือมีการเรียกใช้ไฟล์ Css ก็ได้ ผลลัพธ์ และเครื่องมือนี้สามารถกา หนดคุณสมบัติType ให้เป็น Multiline ในกรณีที่ต้องการ ให้ช่องรับ ข้อมูลพิมพ์ ได้หลายบรรทัด และก าหนดให้เป็น Password ในกรณีทตี่้องการไม่ให้แสดงข้อมูลที่ ป้อนให้เห็น แต่จะแสดงเป็นเครื่องหมาย • แทนขอ้ความที่พิมพ์แทน 1 2 3. ปุ่มฟิลด์ซ่อน (Hidden Field) เป็น Object ที่ไม่แสดงรูปลักษณ์ให้เห็นในหน้าเว็บเพจ ผู้ใช้จึง ไม่สามารถก าหนดค่าหรือทราบค่าที่จะส่งไปยังเครื่องเซิรฟเ์วอร์หรือส่งจากไฟล์PHP หนึ่ง ไปยังไฟล์PHP หนึ่ง และสามารถน าข้อมลูที่อยู่ใน Hidden Field นั้น ได้ตามปกติ รูปแบบ

การพัฒนาเว็บไซต์ในงานธุรกิจ 57 หน่วยที่6 ภาษา PHP กับการรับส่งข้อมูลผ่านฟอร์ม การก าหนดคุณสมบัติของ Hidden Field 1 2 3.1 Hidden Field: เป็นการก าหนดชื่อของ HiddenField เพื่อใช้ในการก าหนดตัวแปร เก็บค่าในช่อง HiddenField นั้น 3.2 Vlue: ก าหนดค่าเรมิ่ต้นที่ใช้ในการแสดงในช่อง HiddenField 4. ช่องรับข้อความแบบหลายบรรทัด (Text Area) ใช้รับข้อมูลจากผู้เข้าชม ส าหรับ ค าถาม ปลายเปิด (ค าถามประเภทพิมพ์ตอบ) ที่อนุญาตให้ตอบด้วยค าตอบยาว เช่น ที่อยู่ข้อเสนอแนะ เปน็ต้น รูปแบบ หน่วยที่6 ภาษา PHP กับการรับส่งข้อมูลผ่านฟอร์ม การพัฒนาเว็บไซต์ในงานธุรกิจ 63 9.3 Action: เป็นการก าหนดค่าเริ่มต้นที่ตอ้งการส่งไปยังฟอร์มขณะที่คลกิ ปุ่มมี2 สถานะ คือ Silent times (ส่งค่าไปยังฟอร์มเพื่อประมวลผล) และ Reset form (ในกรณีที่ไม่ ต้องการส่ง หรือยกเลิกฟอร์ม) เคล็ดลับการแทรก HTML ใน PHP ส าหรับการสร้างฟอร์มสามารถสร้างฟอร์มในหน้าออกแบบด้วยวิธีการทวั่ไปได้แต่ ชุดค าสั่งที่ได้มาจะอยู่ในรปูแบบของภาษา HTML และถ้าต้องการน าชุดค าสั่งนั้นเข้าไปไว้ในแท็ก ของภาษา PHP ให้ด าเนินการดังนี้ 1. ในชุดค าสั่งของ HTML จะมีเครื่องหมาย “ ที่เป็นการระบุค่าต่าง ๆ ก่อนทจี่ะน าชุดค าสั่ง 1. ใน ชุดค าสั่งของ H ไปไว้ในแท็กของภาษา PHP ต้องทา การเปลี่ยนเครื่องหมายดับเบิลโค้ด (4) เป็น ซิงเกลโค้ด ( ) ก่อน โดยท าการ ิ้ Copy รูปแบบของค าสั่งนั้นไปวางไว้ที่โปรแกรม Editor ใด ๆ ก็ ได้ เช่น Note pad แล้วอาศัยการ Replace โดยไปที่เมนูEdit > Replace แสดงดังภาพ

65 Website Developement in Business หน่วยที่6 ภาษา PHP กับการรับส่งข้อมูลผ่านฟอร์ม 2. จากนั้นให้ท าการ copy รูปแบบสั่งที่ได้เปลี่ยนสัญลักษณจ์ากเครื่องหมายดับเบิลโค้ด (“) เป็นซิงเกิลโค้ด (‘) เรียบร้อยแล้วไปวางในหน้าต่าง Code ในโปรแกรม Adobe Dreamweaver CS6 แล้วเขียนให้อยู่ในรูปแบบของภาษา PHP โดยใช้ค าสั่ง echo หรือ print ให้แสดงผลทางจอภาพ แสดงดังภาพ เช่น การรับส่งข้อมูลจากฟอร์ม 1. การสร้างฟอร์ม เป็นการรับข้อมูลจากผู้ใช้ผ่านฟอร์ม และส่งค่าที่ในฟอรม์ ไปประมวลผล ยังไฟล์ที่ ต้องการ หรือจะประมวลผลในไฟล์เดียวกัน ให้เรามาฝึกการสร้างฟอร์มบันทึกข้อมูลสินค้า โดยส่ง ข้อมูลแบบ POST ดังตัวอย่าง ดังนี้

ส่วนประกอบของฟอร์ม คุณสมบัติ ค่าทกี่ าหนด Form ID From1 Action Detailproduct.php Method POST Ectype Multipart/form-submit" name="submit" id="submit" value="บันทึกข้อมูล" style="width:120px;