Knowledge 4 You.

การตรวจสอบข้อมูลของฟอร์ม คือ ขั้นตอนที่ช่วยในการตรวจสอบให้ข้อมูลที่รับจากฟอร์ม 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 และระบุ 0 to 9999999999999 รูปแสดงการตรวจสอบรหัสบัตรประจำตัวประชาชน

 การตรวจสอบ ชื่อ

1. Named fields: เลือก firstname 2. Value: คลิกช่อง Required 3. Accept: คลิกช่อง Anything รูปแสดงการตรวจสอบ ชื่อ

 การตรวจสอบ นามสกุล

4. Named fields: เลือก lastname 5. Value: คลิกช่อง Required 6. Accept: คลิกช่อง Anything รูปแสดงการตรวจสอบ นามสกุล

 การตรวจสอบ ที่อยู่ E-mail

1. Named fields: เลือก email 2. Value: คลิกช่อง Required 3. Accept: คลิกช่อง Email address รูปแสดงการตรวจสอบ ที่อยู่ E-mail

การทดสอบระบบตรวจสอบข้อมูลแบบ 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กด F12 หน้าจอของไฟล์ที่ต้องการทดสอบ

2. เมื่อปรากฏหน้าจอของ Internet Explorer ให้ทดสอบการกรอกข้อมูลแบบต่างๆ และให้สังเกตไดอะล็อกของ JavaScript จะแสดงข้อผิดพลาด แจ้งผลการกรอกข้อมูลที่ไม่ถูกต้อง ดังรูป

รูปแสดงผลการตรวจสอบฟอร์มที่ไม่ได้กรอก cid, firstname, lastname และ email

รูปแสดงผลการตรวจสอบฟอร์มที่กรอก รหัสบัตรประจำตัวประชาชน รูปแบบไม่ถูกต้อง

รูปแสดงผลการตรวจสอบฟอร์มที่กรอก email รูปแบบไม่ถูกต้อง

สรุป

การตรวจสอบความถูกต้องของข้อมูล มีความสำคัญต่อความถูกต้องของข้อมูล การเลือกวิธีการว่าจะตรวจสอบด้วย JavaScript (Client-Side) หรือ PHP (Server-Side) ขึ้นอยู่กับความถนัดและความเหมาะสมของการใช้งาน เช่น หากต้องการระบบการกรอกข้อมูลที่มีการ Interactive มากกว่าก็ให้เลือกแบบ JavaScript แต่หากต้องการการตรวจสอบแบบไม่ต้อง Interactive มากแต่มีความยืดหยุ่นในการเขียนโค้ดมากกว่า ก็ให้เลือกวิธีการใช้ PHP (Server-Side)