Graphic ComScienceบทที่ 6
การใช้งานฟอร์มกับ PHP
ฟอร์มทำหน้าที่ในการติดต่อสื่อสารหรือโต้ตอบกับผู้ใช้เว็บไซต์ในลักษณะการรับส่งข้อมูล เมื่อผู้ใช้กรอกข้อมูลในฟอร์มและคลิกปุ่มส่งข้อมูล ข้อมูลเหล่านั้นก็จะถูกส่งไปประมวลผลที่เซิร์ฟเวอร์ ฟอร์มจะประกอบไปด้วยอ็อบเจ็คต์ต่างๆ ซึ่งแต่ละอ็อบเจ็คต์ก็มีลักษณะการโต้ตอบกับผู้ใช้แตกต่างกันไป รายละเอียดการทำงานแต่ละอ็อบเจ็คต์จะกล่าวถึงในลำดับต่อไป นอกจากนั้นภายในแท็กฟอร์มยังมีพารามิเตอร์ที่เราสามารถกำหนดค่าเป็นการระบุให้ส่งค่าไปยังไฟล์สคริปต์บนเซิร์ฟเวอร์หรือโปรแกรมอื่นๆ เพื่อทำหน้าที่ประมวลผลข้อมูลที่ถูกส่งมากับฟอร์มได้อีกด้วย
รูปแสดงการทำงานของฟอร์ม
วิธีการทำงานของฟอร์ม
จากรูปด้านบน แสดงวิธีการทำงานของฟอร์มดังนี้
1) เริ่มต้นเมื่อผู้ใช้กรอกแบบฟอร์มบนเว็บเพจและคลิกปุ่มส่งข้อมูลมาที่เว็บเซิร์ฟเวอร์
2) ข้อมูลจากฟอร์มจะถูกประมวลผลที่ไฟล์ PHP, ASP หรือไฟล์ CGI อื่นๆบนเว็บเซิร์ฟเวอร์
3) เมื่อประมวลผลเสร็จแล้ว ผลลัพธ์จะถูกส่งกลับไปให้ผู้ใช้ในรูปแบบเอกสาร HTML เพื่อให้เว็บเบราเซอร์แสดงผล
การสร้างและใช้งานฟอร์มกับ PHP |
ขั้นตอนการสร้างฟอร์ม:
1. เปิดโปรแกรม Dreamweaver MX คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General เลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ form.php
2. ที่หน้าจอของเว็บเพจ ให้คลิกเพื่อวางเคอร์เซอร์ในตำแหน่งที่ต้องการสร้างฟอร์ม หลังจากนั้นคลิกที่เมนู
Insert > Form > Form ฟอร์มจะถูกแทรกลงในเว็บเพจ หากอยู่ใน Design View จะเห็นขอบเขตของฟอร์มแสดงเป็นเส้นประสีแดง (หากไม่มีเส้นประสีแสดงขึ้นมา ให้คลิกที่เมนู View > Visual Aids > Invisible Elements)
รูปแสดงเว็บเพจที่แทรกฟอร์ม
3. คลิกวางตำแหน่งเคอร์เซอร์ลงภายในขอบเขตของฟอร์ม หลังจากนั้นให้คลิกเลือกแท็ก <form> จาก Tag Selector บริเวณขอบล่างซ้ายของเว็บเพจ เมื่อปรากฏไดอะล็อก Properties ช่อง Form Name ให้กำหนดชื่อของฟอร์ม เท่ากับ fmProcess ชื่อของฟอร์มนี้จะถูกใช้เพื่ออ้างอิงในสคริปต์ PHP
รูปแสดง Property ของฟอร์ม
4. ไดอะล็อก Properties ช่อง Action ให้กำหนดชื่อไฟล์ หรือ URL ของสคริปต์ที่จะใช้ในการประมวลผลฟอร์ม เท่ากับ formprocess.php (หากต้องการระบุเป็น URL ให้พิมพ์เป็น http://localhost/phpweb/formprocess.php)
5. ไดอะล็อก Properties ช่อง Method ให้เลือกรูปแบบการส่งข้อมูลจากฟอร์มไปที่เว็บเซิร์ฟเวอร์ ซึ่งมีให้เลือก 3 รูปแบบ คือ
การทำงานของ METHOD:
· POST ส่งข้อมูลโดยส่งข้อมูลส่งไปกับ HTTP Request
· GET ส่งข้อมูลโดยการแปะค่าเป็น URL Parameter (Query String) ไปกับ URL (ข้อมูลที่ส่งจะแสดงอยู่บน URL ของเว็บเบราเซอร์)
· DEFAULT ส่งข้อมูลโดยขึ้นอยู่กับค่า default ของเว็บเบราเซอร์ โดยปกติจะเป็นแบบ GET
NOTE: วิธีการส่งข้อมูลแบบ GET ไม่ควรใช้กับฟอร์มที่มีการส่งข้อมูลจำนวนมาก รวมทั้งไม่ควรใช้ในการส่งข้อมูลที่เป็นความลับ เช่น username, password หรือเลขที่บัตรเครดิต เป็นต้น เนื่องจากวิธีการส่งแบบ GET นี้ ข้อมูลที่เราส่งจะถูกแสดงบน URL เช่น http://localhost/phpweb/detail.php?empid=01020489 |
6. ไดอะล็อก Properties ช่อง Enctype ให้ระบุชนิดของการเข้ารหัสข้อมูล โดยค่า default ของ Enctype จะเป็น application/x-www-form-urlencode ซึ่งจะถูกใช้ร่วมกับ method แบบ POST หากใช้ฟอร์มในการอัปโหลดไฟล์ ให้เลือก Enctype เป็นแบบ multipart/form-data
7. ไดอะล็อก Properties ช่อง Target ให้พิมพ์ชื่อหน้าจอของเว็บเบราเซอร์ที่ต้องการแสดงผลลัพธ์ของฟอร์มหรือเลือกจากรายการที่กำหนดไว้ให้ หากเว็บเบราเซอร์ยังไม่มีชื่อหน้าจอที่ระบุ เว็บเบราเซอร์จะสร้างหน้าจอชื่อที่ระบุขึ้นมาใหม่ ตัวเลือกที่กำหนดไว้ให้ในช่อง Target
การทำงานของ TARGET:
· _blank ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอเว็บเบราเซอร์ที่สร้างขึ้นมาใหม่
· _parent ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอหลัก (parent) ของหน้าจอเว็บเบราเซอร์ขณะนั้น
· _self ผลลัพธ์จะแสดงที่หน้าจอเว็บเบราเซอร์เดียวกับฟอร์ม
· _top ผลลัพธ์ของฟอร์มจะแสดงที่หน้าจอหลัก ในกรณีที่หน้าจอเว็บเบราเซอร์แบ่งเป็นหลายเฟรม
8. คลิกปุ่ม Code View 
เพื่อเขียนโค้ด HTML ดังรูปด้านล่าง หลังจากนั้นบันทึกไฟล์ form.php
<html> <body> <form action="formprocess.php" method="POST" name="fmProcess"> ชื่อ: <input name="firstname" type="text" size="32" maxlength="30"> <br> นามสกุล: <input name="lastname" type="text" size="32" maxlength="30"> <br> <input name="btnSubmit" type="submit" value="บันทึก"> <input name="btnReset" type="reset" value="ยกเลิก"> </form> </body> </html> |
รูปแสดงโค้ดไฟล์ form.php
9. เปิดโปรแกรม Dreamweaver MX คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General เลือก Dynamic Page > PHP คลิกปุ่ม Create หลังจากนั้นให้เพื่อเขียนโค้ด PHP ดังรูปด้านล่าง บันทึกเป็นไฟล์ formprocess.php
<html> <body>
<?php echo "ชื่อ: " . $_POST['firstname'] . "<br>"; echo "นามสกุล: " . $_POST['lastname'] . "<br>"; ?>
</body> </html> |
รูปแสดงโค้ดไฟล์ formprocess.php
10. ทดสอบการทำงานของฟอร์ม โดยเปิด Dreamweaver MX ไปที่หน้าจอไฟล์ form.php หลังจากนั้นกดปุ่ม F12 จะปรากฏหน้าจอ Internet Explorer เป็นแบบฟอร์มกรอกข้อมูล ให้กรอกข้อมูล แล้วคลิกปุ่ม "บันทึก" ให้สังเกตผลลัพธ์การทำงานของเว็บเพจ
รูปแสดงการทำงานของไฟล์ form.php
รูปแสดงการทำงานของไฟล์ formprocess.php
11. เปลี่ยน METHOD ของฟอร์มในไฟล์ form.php จาก METHOD="POST" เป็น METHOD="GET"
12. เปลี่ยนชื่อตัวแปรในไฟล์ formprocess.php จาก $_POST['firstname’] เป็น $_GET['firstname']
และ $_POST['lastname'] เป็น $_GET['lastname']
13. ทดสอบการทำงานของฟอร์มใหม่อีกครั้ง ให้สังเกตผลลัพธ์การทำงานของเว็บเพจ
การใช้งานอ็อบเจ็คต์ของฟอร์มชนิดต่างๆ |
อ็อบเจ็คต์ คือส่วนของฟอร์มที่ใช้ในการรับข้อมูลจากผู้ใช้ ก่อนที่จะแทรกอ็อบเจ็คต์ลงบนเว็บเพจ ต้องมีการสร้างหรือแทรกฟอร์มลงในเว็บเพจก่อนเสมอ หากมีการแทรกอ็อบเจ็คต์ลงในส่วนที่ไม่มีฟอร์ม Dreamweaver จะถามโดยปรากฏไดอะล็อก “Add form tags?” ให้เลือก Yes เพื่อให้ Dreamweaver สร้างแท็กฟอร์มสำหรับอ็อบเจ็คต์นั้น
รูปแสดงฟอร์มและอ็อบเจ็คต์บน Insert Bar
การใช้งานอ็อบเจ็คต์ Text Field
อ็อบเจ็คต์ชนิด Text Field จะมีหน้าที่ในการรับค่าข้อมูล เพื่อใช้ในการจัดเก็บข้อมูลหรือส่งค่าบางอย่างที่ต้องการค้นหา เช่น ใช้ในการค้นหาข้อมูล (Search Engine) เป็นต้น
วิธีการสร้าง Text Field ทำได้โดยการคลิกเมนู Insert > Form > Text Field เสร็จแล้วให้กำหนดคุณสมบัติของ Text Field โดยให้คลิกเลือกที่ Text Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Text Field แสดงในไดอะล็อก Properties
รูปแสดง Property ของอ็อบเจ็คต์ Text Field แบบ Single line
คุณสมบัติของอ็อบเจ็คต์ Text Field:
· TextField กำหนดชื่อของอ็อบเจ็คต์ Text Field
· Char Width กำหนดความกว้างของ Text Field
· Max Chars กำหนดจำนวนตัวอักษรสูงสุดที่กรอกข้อมูลได้ของ Text Field
· Type กำหนดชนิดของ Text Field มี 3 ลักษณะ คือ
o Single Line กำหนดให้แสดงเป็นแบบบรรทัด (Textarea)
o Multi Line กำหนดให้แสดงเป็นแบบหลายบรรทัด
o Password กำหนดให้แสดงแบบรหัสผ่าน
· Init Val กำหนดค่าเริ่มต้น
รูปแสดงการใช้งานอ็อบเจ็คต์ Text Field
การใช้งานอ็อบเจ็คต์ Textarea
อ็อบเจ็คต์ชนิด Textarea จะมีหน้าที่ในการรับค่าข้อมูลที่มีขนาดใหญ่ เช่น ที่อยู่ เป็นต้น
วิธีการสร้าง Text Field ทำได้โดยการคลิกเมนู Insert > Form > Textarea เสร็จแล้วให้กำหนดคุณสมบัติของ Textarea โดยให้คลิกเลือกที่ Textarea ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Textarea แสดงในไดอะล็อก Properties
รูปแสดง Property ของอ็อบเจ็คต์ Textarea
คุณสมบัติของอ็อบเจ็คต์ Textarea:
· TextField กำหนดชื่อของอ็อบเจ็คต์ Textarea
· Char Width กำหนดความกว้างของ Textarea
· Max Chars กำหนดจำนวนตัวอักษรสูงสุดที่กรอกข้อมูลได้ของ Textarea
· Type กำหนดชนิดของ Textarea คือ Multi Line
· Init Val กำหนดค่าเริ่มต้น
รูปแสดงการใช้งานอ็อบเจ็คต์ Textarea
การใช้งานอ็อบเจ็คต์ Button
อ็อบเจ็คต์ชนิด Button มักถูกนำมาใช้เพื่อทำหน้าที่ในการยืนยันการเพิ่มข้อมูล แก้ไขข้อมูล การลบข้อมูล หรือยกเลิกการใช้งาน
วิธีการสร้าง Button ทำได้โดยการคลิกเมนู Insert > Form > Button เสร็จแล้วให้กำหนดคุณสมบัติของ Button โดยให้คลิกเลือกที่ Button ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Button แสดงในไดอะล็อก Properties
รูปแสดง Property ของอ็อบเจ็คต์ Button
คุณสมบัติของอ็อบเจ็คต์ Button:
· Button name กำหนดชื่อของอ็อบเจ็คต์ Button
· Label กำหนดข้อความที่จะแสดงบนปุ่ม Button
· Action กำหนดชนิดของ Action มี 3 ลักษณะ คือ
o Submit Form กำหนดให้ใช้สำหรับส่งฟอร์มไปประมวลผล
o Reset Form กำหนดให้ใช้สำหรับยกเลิกการกรอกข้อมูลในฟอร์ม
o None กำหนดให้เป็นปุ่มที่คลิกแล้วไม่ทำงานใดๆ
รูปแสดงการใช้งานอ็อบเจ็คต์ Button
การใช้งานอ็อบเจ็คต์ Check Box
อ็อบเจ็คต์ชนิด Check Box ทำหน้าที่เพื่อแสดงตัวเลือกให้ผู้ใช้ได้เลือกตัวเลือกที่กำหนดให้ ซึ่งสามารถเลือกได้มากกว่า 1 ตัวเลือก
วิธีการสร้าง Check Box ทำได้โดยการคลิกเมนู Insert > Form > Check Box เสร็จแล้วให้กำหนดคุณสมบัติของ Check Box โดยให้คลิกเลือกที่ Check Box ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Check Box แสดงในไดอะล็อก Properties
รูปแสดง Property ของอ็อบเจ็คต์ Check Box
คุณสมบัติของอ็อบเจ็คต์ Check Box:
· CheckBox กำหนดชื่อของอ็อบเจ็คต์ Check Box
· Checked Value กำหนดค่าให้ Check Box
· Initial State กำหนดสถานะเริ่มต้นเมื่อแสดงบนเว็บเพจ มี 2 ลักษณะ คือ
o Checked กำหนดให้เริ่มต้นโดยให้สถานะเป็นถูกเลือกไว้
o Unchecked กำหนดให้เริ่มต้นโดยสถานะไม่ให้ถูกเลือก
รูปแสดงการใช้งานอ็อบเจ็คต์ Check Box
การใช้งานอ็อบเจ็คต์ Radio Button
อ็อบเจ็คต์ชนิด Radio Button ทำหน้าที่เพื่อแสดงตัวเลือกให้ผู้ใช้ได้เลือกตัวเลือกที่กำหนดให้ ซึ่งสามารถเลือกได้เพียง 1 ตัวเลือกเท่านั้น เช่น การเลือกระบุเพศ ชาย หรือ หญิง จะเป็นการเลือกเพศใดเพศหนึ่งเพียงเพศเดียวเท่านั้น
วิธีการสร้าง Radio Button ทำได้โดยการคลิกเมนู Insert > Form > Radio Button เสร็จแล้วให้กำหนดคุณสมบัติของ Radio Button โดยให้คลิกเลือกที่ Radio Button ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Radio Button แสดงในไดอะล็อก Properties
รูปแสดง Property ของอ็อบเจ็คต์ Radio button
คุณสมบัติของอ็อบเจ็คต์ Radio Button:
· RadioButton กำหนดชื่อของอ็อบเจ็คต์ Radio Button หากเป็นการเลือกอย่างใดอย่างหนึ่ง จากตัวเลือกตั้งแต่ 2 ตัวขึ้นไป จะต้องกำหนดชื่อของ Radio Button ทุกตัวให้ชื่อเหมือนกัน มิฉะนั้น การทำงานของ Radio Button จะไม่ถูกต้อง
· Checked Value กำหนดค่าให้ Radio Button
· Initial State กำหนดสถานะเริ่มต้นเมื่อแสดงบนเว็บเพจ มี 2 ลักษณะ คือ
o Checked กำหนดให้เริ่มต้นโดยให้สถานะเป็นถูกเลือกไว้
o Unchecked กำหนดให้เริ่มต้นโดยสถานะไม่ให้ถูกเลือก
รูปแสดงการใช้งานอ็อบเจ็คต์ Radio Button
การใช้งานอ็อบเจ็คต์ List/Menu
อ็อบเจ็คต์ชนิด List/Menu ทำหน้าที่เพื่อกำหนดค่าโดยที่ใช้ไม่ต้องพิมพ์ตัวเลือกที่ต้องการลงไป เพียงแค่คลิกเลือกรายการต่างๆ ที่ไดกำหนดไว้ให้แล้วเท่านั้น สามารถเลือกได้เพียง 1 ตัวเท่านั้น
วิธีการสร้าง List/Menu ทำได้โดยการคลิกเมนู Insert > Form > List/Menu เสร็จแล้วให้กำหนดคุณสมบัติของ List/Menu โดยให้คลิกเลือกที่ List/Menu ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ List/Menu แสดงในไดอะล็อก Properties
รูปแสดงการกำหนด Property ของอ็อบเจ็คต์ List/Menu
คุณสมบัติของอ็อบเจ็คต์ List/Menu:
· List/Menu กำหนดชื่อของอ็อบเจ็คต์ List/Menu
· Type เลือกการทำงานเป็นแบบ Menu หรือ List
· Initially Selected แสดงค่าตัวเลือกที่กำหนดมาจาก List Values
รูปแสดงการใช้งานอ็อบเจ็คต์ List/Menu
การใช้งานอ็อบเจ็คต์ File Field
อ็อบเจ็คต์ชนิด File Field นี้ ทำหน้าที่ในการแสดงรายชื่อไฟล์ต่างๆ เพื่อให้ผู้ใช้เว็บไซต์สามารถเลือกไฟล์เหล่านั้นขึ้นมาใช้งาน เช่น การอัปโหลดไฟล์ เป็นต้น
วิธีการสร้าง File Field ทำได้โดยการคลิกเมนู Insert > Form > File Field เสร็จแล้วให้กำหนดคุณสมบัติของ File Field โดยให้คลิกเลือกที่ File Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ File Field แสดงในไดอะล็อก Properties
รูปแสดง Property ของอ็อบเจ็คต์ File Field
คุณสมบัติของอ็อบเจ็คต์ File Field:
· FileField กำหนดชื่อของอ็อบเจ็คต์ File Field
· Char Width กำหนดความกว้างของ File Field
· Max Chars กำหนดจำนวนตัวอักษรสูงสุด
รูปแสดงการใช้งานอ็อบเจ็คต์ File Field
การใช้งานอ็อบเจ็คต์ Hidden Field
อ็อบเจ็คต์ชนิด Hidden Field นี้ จะทำงานในลักษณะล่องหน กล่าวคือ มีจุดประสงค์เพื่อใช้ในการประมวลผลข้อมูล ที่ได้รับจากการใช้งานฟอร์มต่างๆ ซึ่งฟิลด์แบบ Hidden Field นี้ จะไม่มีการติดต่อสื่อสารกับผู้ใช้งานฟอร์ม แต่อย่างใด รวมทั้งไม่มีการแสดงผลบนหน้าเว็บเพจด้วย
วิธีการสร้าง Hidden Field ทำได้โดยการคลิกเมนู Insert > Form > Hidden Field เสร็จแล้วให้กำหนดคุณสมบัติของ Hidden Field โดยให้คลิกเลือกที่ Hidden Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Hidden Field แสดงในไดอะล็อก Hidden Field
รูปแสดง Property ของอ็อบเจ็คต์ Hidden Field
คุณสมบัติของอ็อบเจ็คต์ Hidden Field:
· HiddenField กำหนดชื่อของอ็อบเจ็คต์ Hidden Field
· Value กำหนดค่าเริ่มต้นสำหรับ Hidden Field
รูปแสดงการใช้งานอ็อบเจ็คต์ Hidden Field
การใช้งานอ็อบเจ็คต์ Image Field
อ็อบเจ็คต์ชนิด Image Field นี้ เราสามารถใส่รูปลงในฟอร์มเพื่อทำให้เว็บเพจนั้นดูมีสีสันดูสวยงามขึ้นยิ่งขึ้น หรืออาจใช้ประโยชน์ในการใช้แทนปุ่ม Button ก็ได้
วิธีการสร้าง Image Field ทำได้โดยการคลิกเมนู Insert > Form > Image Field เสร็จแล้วให้กำหนดคุณสมบัติของ List/Menu โดยให้คลิกเลือกที่ Image Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Image Field แสดงในไดอะล็อก Image Field
รูปแสดง Property ของอ็อบเจ็คต์ Image Field
คุณสมบัติของอ็อบเจ็คต์ Image Field:
· ImageField กำหนดชื่อของอ็อบเจ็คต์ Image Field
· W กำหนดค่าความกว้างของ Image Field ที่แสดง
· H กำหนดค่าความสูงของ Image Field ที่แสดง
· Src ชื่อไฟล์รูปภาพของ Image Field ที่แสดง
· Alt กำหนดข้อควาที่จะใช้แสดงแทน ในกรณีที่ไม่พบไฟล์รูปภาพ
· Align กำหนดตำแหน่งการแสดง Image Field
รูปแสดงการใช้งานอ็อบเจ็คต์ Image Field
Exercise:
1. สร้างฟอร์มสำหรับกรอกข้อมูลพนักงาน บันทึกเป็นไฟล์ htmlform.htm ดังรูปด้านล่าง
Hint:
- ประยุกต์การใช้งานแท็ก <TABLE> <IMG> <A> และ <FORM>
- Backgroung Image ใช้ไฟล์ PHPWEB\images\bkg_insert.gif
- Title ใช้ไฟล์ PHPWEB\images\title_insert.gif
