ฟอร์มทำหน้าที่ในการติดต่อสื่อสารหรือโต้ตอบกับผู้ใช้เว็บไซต์ในลักษณะการรับส่งข้อมูล เมื่อ
ผู้ใช้กรอกข้อมูลในฟอร์มและคลิกปุ่มส่งข้อมูล ข้อมูลเหล่านั้นก็จะถูกส่งไปประมวลผลที่เซิร์ฟเวอร์ ฟอร์มจะประกอบไปด้วยอ็อบเจ็คต์ต่างๆ ซึ่งแต่ละอ็อบเจ็คต์ก็มีลักษณะการโต้ตอบกับผู้ใช้แตกต่างกันไป รายละเอียดการทำงานแต่ละอ็อบเจ็คต์จะกล่าวถึงในลำดับต่อไป นอกจากนั้นภายในแท็กฟอร์มยังมีพารามิเตอร์ที่เราสามารถกำหนดค่าเป็นการระบุให้ส่งค่าไปยังไฟล์สคริปต์บนเซิร์ฟเวอร์หรือโปรแกรมอื่นๆ เพื่อทำหน้าที่ประมวลผลข้อมูลที่ถูกส่งมากับฟอร์มได้อีกด้วย
วิธีการทำงานของฟอร์มมีดังนี้
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. คลิกวางตำแหน่งเคอร์เซอร์ลงภายในขอบเขตของฟอร์ม หลังจากนั้นให้คลิกเลือกแท็ก
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
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 " >
ชื่อ: < br >
นามสกุล: < input name =" lastname" type ="text " size=" 32" maxlength = "30" > < br >
< input name =" btnSubmit" typ e=" submit" value= " บันทึก" >
< input name = " btnReset" type= "reset " value= " ยกเลิก" >
< / form >
< / body >
< / html>
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 >
10. ทดสอบการทำงานของฟอร์ม โดยเปิด Dreamweaver MX ไปที่หน้าจอไฟล์ form.php หลังจากนั้นกดปุ่ม F12 จะปรากฏหน้าจอ Internet Explorer เป็นแบบฟอร์มกรอกข้อมูล ให้กรอกข้อมูล แล้วคลิกปุ่ม "บันทึก" ให้สังเกตผลลัพธ์การทำงานของเว็บเพจ
11. เปลี่ยน METHOD ของฟอร์มในไฟล์ form.php จาก METHOD="POST" เป็น METHOD="GET"
12. เปลี่ยนชื่อตัวแปรในไฟล์ formprocess.php จาก $_ POST['firstname’ ] เป็น $_ GET['firstname' ] และ
$_ POST[' lastname'] เป็น $_ GET ['lastname ']
13. ทดสอบการทำงานของฟอร์มใหม่อีกครั้ง ให้สังเกตผลลัพธ์การทำงานของเว็บเพจ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น