บทที่ 10 การสร้างระบบค้นหาข้อมูล

 

ระบบค้นหาข้อมูล คือเว็บเพจที่ทำหน้าที่ในการเรียกค้นหาข้อมูลจากฐานข้อมูล และนำผลลัพธ์มาแสดงผลที่หน้าจอเว็บเพจ

 

รูปแสดงไฟล์ที่เกี่ยวข้องกับระบบค้นหาข้อมูล

 

ระบบค้นหาข้อมูลในส่วนที่จะอธิบายนี้ จะประกอบด้วยไฟล์ 2 ไฟล์

• search.php      ทำหน้าที่รับค่าคำค้น แล้วส่งไปเป็น URL Parameter ชื่อ keywords ไปให้ไฟล์ result.php
              ใช้เปรียบเทียบค้นหาข้อมูลจากตารางในฐานข้อมูล
  
• result.php     ทำหน้าแสดงรายละเอียดของพนักงานทีละคน โดยจะรับ URL Parameter ชื่อ keywords ใน
              รูปแบบ $_GET['keywords'] จากฟอร์มในไฟล์ search.php
  

 

ขั้นตอนการสร้างระบบค้นหาข้อมูลที่ยกมาอธิบายในที่นี้ แบ่งเป็นขั้นตอนดังต่อไปนี้

• การสร้างฟอร์มสำหรับพิมพ์คำค้น
  
• การค้นหาข้อมูลแบบเงื่อนไขเดียว
  
• การใช้งานระบบค้นหาข้อมูลแบบเงื่อนไขเดียว
  
• การค้นหาข้อมูลแบบหลายเงื่อนไข
  
• การใช้งานระบบค้นหาข้อมูลแบบหลายเงื่อนไข
  

 

 

(1) การสร้างฟอร์มสำหรับพิมพ์คำค้น

 

ขั้นตอนนี้จะเป็นการสร้างฟอร์มสำหรับพิมพ์คำค้น โดยการแทรกฟอร์มและอ็อบเจ็คต์ของฟอร์มชนิด Text Field สำหรับรับค่าคำค้น

 

ขั้นตอนการสร้างฟอร์มสำหรับพิมพ์คำค้น:

1. เริ่มต้นที่โปรแกรม Dreamweaver คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General
   คลิกเลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create เมื่อปรากฏเว็บเพจว่างๆ ขึ้นมา ให้บันทึกเป็นไฟล์ search.php
   
2. เลือกเมนู Modify > Page Properties เมื่อปรากฏไดอะล็อก Page Properties ขึ้นมา ให้กำหนด Properties ของเว็บเพจ
   ดังรายละเอียดด้านล่างนี้ หลังจากนั้นคลิกปุ่ม OK
   
   

ค่าของไดอะล็อก	ค่าที่กำหนด
Appearance > Background Image	images/bkg_search.gif
Title/Encoding > Title	Search employees
Title/Encoding > Document Type (DTD)	None
Title/Encoding > Encoding	Thai (Windows)

ตารางแสดงการกำหนดค่าใน Page Properties

 

รูปแสดงการกำหนด Page Properties

1. แทรกฟอร์มลงในเว็บเพจ โดยคลิกไปที่เมนู Insert > Form > Form
   
2. กำหนด Properties ของฟอร์ม โดยเลือกแท็ก <form> จาก Tag Selector หลังจากนั้นคลิกเมนู Window > Properties
   เมื่อปรากฏไดอะล็อก Properties ขึ้นมา ให้กำหนดค่าดังต่อไปนี้
   

 

ค่าของไดอะล็อก	ค่าที่กำหนด
Form name	fmSearch
Action	result.php
Method	GET

ตารางแสดงการกำหนด Property ของฟอร์ม

 

รูปแสดงการกำหนด Property ของฟอร์ม

 

1. แทรกตารางลงภายในแท็ก <FORM> โดยคลิกที่เมนู Insert > Table แล้วกำหนดค่าดังนี้
   

 

รูปแสดงการกำหนดค่าของไดอะล็อก Table

ค่าของไดอะล็อก ค่าที่กำหนด Rows 1 Columns 3 Table width 400 pixel Border thickness 1 pixels Cell padding 3 Cell spacing  1 ตารางแสดงการกำหนดค่าของไดอะล็อก Table

 

 

1. คอลัมน์ที่ 1 ของตาราง และให้แทรกข้อความ "คำค้น:" ลงไป
   
   

   
   

   รูปแสดงการแทรกข้อความ "คำค้น"
   

 

1. คอลัมน์ที่ 2 ของตาราง และให้แทรกอ็อบเจ็คต์ของฟอร์มชนิด Text Field ลงไป โดยคลิกที่เมนู
   Insert > Form > Text Field หลังจากนั้นให้กำหนดคุณสมบัติของ Text Field ดังต่อไปนี้
   

 

ค่าของไดอะล็อก	ค่าที่กำหนด
TextField	keywords
Char Width	25
Max Chars	25
Type	Single line

ตารางแสดงการกำหนด Property ของ Text Field

 

รูปแสดงการกำหนด Property ของ Text Field

 

รูปแสดงไฟล์ search.php หลังการแทรก Text Field

1. คอลัมน์ที่ 3 ของตาราง ให้แทรกอ็อบเจ็คต์ของฟอร์มชนิด Button ลงไป โดยคลิกที่เมนู Insert > Form > Button หลังจากนั้นให้กำหนดคุณสมบัติของ Button โดยไปที่เมนู Window > Properties แล้วให้กำหนดค่าดังนี้
   

 

ค่าของไดอะล็อก	ค่าที่กำหนด
Label	Search
Action	Submit form

ตารางแสดงการกำหนด Property ของ Button

รูปแสดงการกำหนด Property ของ Button

 

1. บันทึกไฟล์ search.php
   

   
   

   รูปแสดงหน้าจอไฟล์ search.php หลังการแทรก Button
   

 

(2) การค้นหาข้อมูลแบบเงื่อนไขเดียว (Basic)

 

ขั้นตอนนี้ จะเป็นการ Recordset (Query) สำหรับค้นหาข้อมูลจากฐานข้อมูล โดยจะมีการกำหนดเงื่อนไขในการค้นหาข้อมูลจาก
URL Parameter ชื่อ $_GET['keywords'] ที่ส่งมาจากไฟล์ searchadv.php

การแทรก Recordset (Query) นี้ จะคล้ายกับขั้นตอนการสร้างในไฟล์ list.php เพื่อเป็นการประหยัดเวลา จึงแนะนำให้เปิดไฟล์
list.php ขึ้นมาแล้วบันทึกเป็นไฟล์ resultadv.php

 

ขั้นตอนการค้นหาข้อมูลแบบเงื่อนไขเดียว (Basic):

1. เปิดไฟล์ list.php ของระบบแสดงผลข้อมูลขึ้นมา ให้บันทึก (SAVE AS…) เป็นไฟล์ result.php
   
2. คลิกที่เมนู Window > Bindings ดับเบิลคลิกที่รายการ Recordset (rsEmp) เมื่อปรากฏไดอะล็อก Recordset ขึ้นมา
   ให้กำหนดค่าของตัวแปรต่างๆ ดังรายละเอียดต่อไปนี้
   
   

NOTE: เปิดไฟล์ list.php จากขั้นตอนการสร้างระบบแสดงผลข้อมูลหรือ PHPWEB\labs\solutions\lab05_displayrecords\list.php ขึ้นมาแล้วบันทึกเป็นไฟล์ PHPWEB\result.php (หากปรากฏไดอะล็อก Update Links? ให้คลิก No)

 

รูปแสดงการดับเบิลคลิก Recordset (rsEmp)

รูปแสดงไดอะล็อก Recordset

 

ค่าของไดอะล็อก	ค่าที่กำหนด
Name	rsEmp
Connection	dbconn
Table	employees
Columns	employeeid, firstname, lastname, deptid, phone, extension
Filter	ช่องที่ 1: firstname หมายถึงให้ค้นหาจากฟิลด์ firstname
	ช่องที่ 2: contains หมายถึงให้ค้นหาแบบประกอบด้วย (LIKE)
	ช่องที่ 3: URL Parameter หมายถึง รับค่าคำค้นจาก URL Parameter (ส่งมาจากฟอร์มที่ METHOD="GET")
	ช่องที่ 4: keywords หมายถึง คำค้นถูกส่งมาเป็น URL Parameter ชื่อ keywords
Sort	Firstname , Ascending หมายถึง เรียงลำดับตาม firstname น้อยไปหามาก

 

 

 

 

(3) การใช้งานระบบค้นหาข้อมูลแบบเงื่อนไขเดียว (Basic)

 

เริ่มต้นโดยใช้โปรแกรม Dreamweaver เปิดไฟล์ search.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer
จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ search.php หลังจากนั้นให้พิมพ์คำค้น และคลิกปุ่ม Search เพื่อค้นหาข้อมูลจากฟิลด์ firstname

 

 

(4) การค้นหาข้อมูลแบบหลายเงื่อนไข

 

ในขั้นตอนที่ผ่านมา เราได้ค้นหาข้อมูลโดยในการ Filter ข้อมูลนั้นจะเป็นการเปรียบเทียบค่าฟิลด์ firstname กับ URL Parameter
$_GET['keywords'] ซึ่งก็หมายถึง ค้นหาข้อมูลจากฟิลด์ firstname ฟิลด์เดียวเท่านั้น

การค้นหาด้วยเงื่อนไขที่ซับซ้อนมากกว่านี้ สามารถทำได้โดยการดับเบิลคลิก Recordset(rsEmp) ขึ้นมา แล้วคลิกปุ่ม Advanced…
เพื่อเข้าไปเพิ่มเติมเงื่อนไขการค้นหาข้อมูล

 

ขั้นตอนการค้นหาข้อมูลแบบหลายเงื่อนไข:

 

1. เปิดไฟล์ list.php ของระบบแสดงผลข้อมูลขึ้นมา ให้บันทึก (SAVE AS…) เป็นไฟล์ result.php
   
2. คลิกที่เมนู Window > Bindings ดับเบิลคลิกที่รายการ Recordset (rsEmp) เมื่อปรากฏไดอะล็อก Recordset ขึ้นมา
   ให้คลิกปุ่ม Advanced… เพื่อกำหนดแก้ไขคำสั่ง SQL สำหรับค้นหาหลายเงื่อนไข
   

 

 

รูปแสดงการดับเบิลคลิก Recordset (rsEmp)

รูปแสดงไดอะล็อก Recordset

 

รูปแสดงไดอะล็อก Recordset ในโหมด Advanced

 

1. เมื่ออยู่ในโหมด Advanced จะเห็นว่าในช่อง SQL จะแสดงชุดคำสั่ง SQL ในการเรียกค้นหาข้อมูล ดังรูปคำสั่งด้านล่าง
   แล้วทดสอบการค้นหาโดยการกด F12
   
   

SELECT employeeid, firstname, lastname, phone, extension FROM employees WHERE (employees.firstname LIKE '%colname%') ORDER BY firstname ASC

รูปแสดงการกำหนดเงื่อนไขให้ค้นหาจาก firstname

 

1. ปรับคำสั่งในไดอะล็อก Recordset ดังรูปคำสั่งด้านล่าง เพื่อ JOIN ตาราง departments เอาฟิลด์ชื่อแผนก (deptname)
   มาแสดงผลและเพิ่มเงื่อนไขให้ค้นหาจากฟิลด์ firstname และ lastname หลังจากนั้นให้ทดสอบการค้นหาโดยเปิด
   Dreamweaver ไปที่ไฟล์ search.php แล้วกด F12
   
   

SELECT employees.*, departments.deptname FROM employees, departments WHERE employees.deptid = departments.deptid AND ( employees.firstname LIKE '%colname%' OR employees.lastname LIKE '%colname%' ) ORDER BY firstname ASC

รูปแสดงการ JOIN ตาราง departments เพื่อเอาชื่อแผนกมาแสดง และค้นหาจาก fistname และ lastname

1. ปรับคำสั่งในไดอะล็อก Recordset ดังรูปคำสั่งด้านล่าง และเพิ่มเงื่อนไขให้ค้นหาจากฟิลด์ employeeid firstname
   lastname email และ deptname หลังจากนั้นให้ทดสอบการค้นหาโดยเปิด Dreamweaver ไปที่ไฟล์ searchadv.php
   แล้วกด F12
   

   
    

SELECT employees.*, departments.deptname FROM employees, departments WHERE employees.deptid = departments.deptid AND ( employees.employeeid LIKE '%colname%' OR employees.firstname LIKE '%colname%' OR employees.lastname LIKE '%colname%' OR employees.email LIKE '%colname%' OR departments.phone LIKE '%colname%' ) ORDER BY firstname ASC

รูปแสดงการกำหนดเงื่อนไขให้ค้นหาจากฟิลด์ firstname, lastname, email, phone

 

1. บันทึกไฟล์ resultadv.php
   

 

 

 

(5) การใช้งานระบบค้นหาข้อมูลแบบหลายเงื่อนไข (Advanced)

 

เริ่มต้นโดยใช้โปรแกรม Dreamweaver เปิดไฟล์ searchadv.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer
จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ searchadv.php หลังจากนั้นให้พิมพ์คำค้น และคลิกปุ่ม Search เพื่อค้นหาข้อมูล
โดยให้ทดสอบพิมพ์คำค้นที่ตรงกับค่าในฟิลด์ employeeid firstname lastname email และ deptname ทีละเงื่อนไข

แล้วสังเกตผลลัพธ์ว่าถูกต้องหรือไม่