Graphic ComScienceบทที่ 14 |
การตรวจสอบข้อมูลของฟอร์ม คือ ขั้นตอนที่ช่วยในการตรวจสอบให้ข้อมูลที่รับจากฟอร์ม HTML มีความถูกต้อง ตรงตามที่ต้องการให้มากที่สุด โดยการตรวจสอบสามารถสร้างทำได้หลายวิธีการ ในที่นี้จะยกวิธีการใช้ JavaScript และ PHP มาอธิบาย
การตรวจสอบแบ่งได้เป็น 2 แบบ ตามลักษณะการทำงาน
? การตรวจสอบฟอร์มด้วย JavaScript (Client-Side)
? การตรวจสอบฟอร์มด้วย PHP (Server-Side)
การตรวจสอบฟอร์มด้วย JavaScript (Client-Side) |
การตรวจสอบด้วย JavaScript จะทำงานในลักษณะ Client-Side หรือ การทำงานจะเกิดขึ้นที่เครื่องที่เปิดใช้งานเว็บเบราเซอร์ เมื่อเราใช้เว็บเบราเซอร์เปิดไปเว็บเพจที่มีการกรอกข้อมูลใดๆ เช่น เว็บเพจสำหรับสมัครสมาชิก ผู้พัฒนาเว็บเพจนั้นได้เขียนโค้ด JavaScript เพื่อตรวจสอบการกรอกข้อมูลไว้ในเว็บเพจนั้นแล้ว เช่น ตรวจสอบรูปแบบการกรอกข้อมูล E-mail เป็นต้น โค้ด JavaScript เหล่านั้น จะถูกส่งมาให้เว็บเบราเซอร์ไปเปิดใช้งาน เพื่อให้เว็บเบราเซอร์ทำหน้าที่ประมวลผลคำสั่งและตรวจสอบข้อมูลให้ เป็นการตรวจสอบที่เครื่องคอมพิวเตอร์ที่ติดต่อไปขอใช้บริการ จึงเรียกว่าวิธีการ Client-Side
ขั้นตอนการสร้างระบบตรวจสอบข้อมูลแบบ Client-Side:
1. เริ่มต้นที่ Dreamweaver MX คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General คลิกเลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ validate.php
2. แทรกฟอร์ม HTML ลงในเว็บเพจ และกำหนดชื่อฟอร์มเป็น registerForm ดังรูป
รูปแสดงแบบฟอร์ม HTML
3. คลิกปุ่ม 
เพื่อสวิทช์ไป Design View คลิกเลือกแท็ก <FORM> จาก Tag Selector บนขอบล่างของหน้าต่าง
รูปแสดงการคลิกเลือกแท็ก <FORM>
4. คลิกเมนู Window > Behaviors หลังจากนั้นคลิกปุ่ม 
และเลือกเมนู Validate Form
5. เมื่อปรากฏไดอะล็อก Validate Form ขึ้นมา ให้กำหนดค่าต่างๆ ดังต่อไปนี้
การตรวจสอบ รหัสบัตรประจำตัวประชาชน (13 หลัก)
รูปแสดงการตรวจสอบรหัสบัตรประจำตัวประชาชน |
1. Named fields: เลือก “cid” 1. Value: เช็ค Required 2. Accept: เช็ค Number from
|
การตรวจสอบ ชื่อ
รูปแสดงการตรวจสอบ ชื่อ |
1. Named fields: เลือก “firstname” 2. Value: คลิกช่อง Required 3. Accept: คลิกช่อง Anything
|
การตรวจสอบ นามสกุล
รูปแสดงการตรวจสอบ นามสกุล |
4. Named fields: เลือก “lastname” 5. Value: คลิกช่อง Required 6. Accept: คลิกช่อง Anything |
การตรวจสอบ ที่อยู่ E-mail
รูปแสดงการตรวจสอบ ที่อยู่ E-mail |
1. Named fields: เลือก “email” 2. Value: คลิกช่อง Required 3. Accept: คลิกช่อง Email address
|
การทดสอบระบบตรวจสอบข้อมูลแบบ Client-Side:
1. เริ่มต้นที่ Dreamweaver MX กด F12 หน้าจอของไฟล์ที่ต้องการทดสอบ
2. เมื่อปรากฏหน้าจอของ Internet Explorer ให้ทดสอบการกรอกข้อมูลแบบต่างๆ และให้สังเกตไดอะล็อกของ JavaScript จะแสดงข้อผิดพลาด แจ้งผลการกรอกข้อมูลที่ไม่ถูกต้อง ดังรูป
รูปแสดงผลการตรวจสอบฟอร์มที่ไม่ได้กรอก email ไม่ถูกต้อง |
|
รูปแสดงผลการตรวจสอบฟอร์มที่กรอก email รูปแบบไม่ถูกต้อง |
รูปแสดงผลการตรวจสอบฟอร์มที่ไม่ได้กรอก cid, firstname, lastname และ email |
การตรวจสอบฟอร์มด้วย PHP (Server-Side) |
การตรวจสอบด้วย PHP จะทำงานในลักษณะ Server-Side ซึ่งจะตรงข้ามกับวิธีการ Client-Side การทำงานจะเกิดขึ้นที่เครื่องเว็บเซิร์ฟเวอร์ เมื่อเราใช้เว็บเบราเซอร์เปิดไปเว็บเพจที่มีการกรอกข้อมูลใดๆ เช่น เว็บเพจสำหรับสมัครสมาชิก เป็นต้น ผู้พัฒนาเว็บเพจนั้นได้เขียนโค้ด PHP เพื่อตรวจสอบการกรอกข้อมูลไว้ในเว็บเพจนั้นแล้ว เช่น ตรวจสอบรูปแบบการกรอกข้อมูล E-mail เป็นต้น โค้ด PHP เหล่านั้น จะทำการประมวลผลและตรวจสอบข้อมูล ผลลัพธ์ซึ่งเป็นผลการตรวจสอบข้อมูล จะถูกส่งมาให้เว็บเบราเซอร์ไปแสดงผลให้ผู้กรอกข้อมูลได้เห็น เป็นการตรวจสอบที่เครื่องคอมพิวเตอร์ที่ให้บริการ จึงเรียกว่าวิธีการ Server-Side
ขั้นตอนการสร้างระบบตรวจสอบข้อมูลแบบ Server-Side:
1. เริ่มต้นที่ Dreamweaver MX คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General คลิกเลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ validate_serverside.php
2. แทรกฟอร์ม HTML ลงในเว็บเพจ และกำหนดชื่อฟอร์มเป็น registerForm ดังรูป
รูปแสดงแบบฟอร์ม HTML
3. คลิกปุ่ม 
เพื่อสวิทช์ไป Code View
4. เปิดและปิดบล็อก <?php ……………………. ?> ของภาษา PHP ที่บรรทัดด้านบนของไฟล์
5. แทรกโค้ดตรวจสอบการกรอกข้อมูลทุกฟิลด์ ที่บรรทัดที่ 1 ของไฟล์ ดังต่อไปนี้ หลังจากนั้นให้บันทึกไฟล์
<?php if ( count($_POST) > 0 ) { //begin Form submitted if ( empty($_POST['cid']) || empty($_POST['firstname']) || empty($_POST['lastname']) || empty($_POST['email']) ) { echo "<li>รหัสบัตรประจำตัวประชาชน ชื่อ นามสกุล หรือ E-mail ไม่ถูกต้อง</li>"; exit; } elseif ( !is_numeric($_POST['cid']) || (strlen($_POST['cid']) > 13) ) { echo "<li>รูปแบบของ รหัสบัตรประจำตัวประชาชน ไม่ถูกต้อง</li>"; exit; } elseif ( !is_numeric(strpos($_POST['email'], "@")) ) { echo "<li>รูปแบบของ E-mail ไม่ถูกต้อง</li>"; exit; } } //end Form submited ?> |
โค้ดตรวจสอบข้อมูล
การทดสอบระบบตรวจสอบข้อมูลแบบ Server-Side:
1. เริ่มต้นที่ Dreamweaver MX กด F12 หน้าจอของไฟล์ที่ต้องการทดสอบ
2. เมื่อปรากฏหน้าจอของ Internet Explorer ให้ทดสอบการกรอกข้อมูลแบบต่างๆ และให้สังเกตไดอะล็อกของ JavaScript จะแสดงข้อผิดพลาด แจ้งผลการกรอกข้อมูลที่ไม่ถูกต้อง ดังรูป
|
รูปแสดงผลการตรวจสอบฟอร์มที่ไม่ได้กรอก cid, firstname, lastname และ email |
รูปแสดงผลการตรวจสอบฟอร์มที่กรอก รหัสบัตรประจำตัวประชาชน รูปแบบไม่ถูกต้อง |
รูปแสดงผลการตรวจสอบฟอร์มที่กรอก email รูปแบบไม่ถูกต้อง |
สรุป |
การตรวจสอบความถูกต้องของข้อมูล มีความสำคัญต่อความถูกต้องของข้อมูล การเลือกวิธีการว่าจะตรวจสอบด้วย JavaScript (Client-Side) หรือ PHP (Server-Side) ขึ้นอยู่กับความถนัดและความเหมาะสมของการใช้งาน เช่น หากต้องการระบบการกรอกข้อมูลที่มีการ Interactive มากกว่าก็ให้เลือกแบบ JavaScript แต่หากต้องการการตรวจสอบแบบไม่ต้อง Interactive มากแต่มีความยืดหยุ่นในการเขียนโค้ดมากกว่า ก็ให้เลือกวิธีการใช้ PHP (Server-Side)
