บทที่ 12 การสร้างระบบแก้ไขข้อมูล

 

    ระบบแก้ไขข้อมูล คือระบบเว็บเพจที่จัดทำขึ้นเพื่อให้ผู้ใช้สามารถเรียกดูข้อมูลเร็คคอร์ดเดิมจากตารางของฐานข้อมูล
และผู้ใช้สามารถแก้ไขปรับปรุงข้อมูลให้เป็นปัจจุบัน หลังจากนั้นก็สามารถบันทึกข้อมูลที่แก้ไขแล้วลงในตารางของฐานข้อมูลได้

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

ระบบแก้ไขข้อมูลที่จะยกตัวอย่างนี้ ประกอบด้วยไฟล์ 2 ไฟล์ ดังรูป

• update.php    ประกอบด้วย ฟอร์มสำหรับแสดงข้อมูลเดิมเพื่อให้ผู้ใช้ปรับปรุงแก้ไขข้อมูล
          และ สคริปต์ PHP สำหรับจัดเก็บข้อมูลที่แก้ไขปรับปรุงแล้วลงตารางของฐานข้อมูล
  
• updateok.php สำหรับแสดงข้อความแจ้งผลการแก้ไขปรับปรุงข้อมูล
  

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

• การสร้างฟอร์มสำหรับแก้ไขข้อมูล
  
• การสร้าง recordset สำหรับค้นหาข้อมูลเร็คคอร์ดที่ต้องการแก้ไข
  
• การแทรกสคริปต์สำหรับแสดงข้อมูลเดิมในฟอร์ม HTML
  
• การแทรก Update Record Server Behavior ลงในเว็บเพจ
  
• การส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแก้ไข
  
• การแสดงผลการแก้ไขข้อมูล
  
• การใช้งานระบบแก้ไขข้อมูล
  

 

(1) การสร้างฟอร์มสำหรับแก้ไขข้อมูล

 

 

ขั้นตอนแรกนี้ จะเป็นการแทรกฟอร์มลงไปในเว็บเพจ สำหรับเป็นแบบฟอร์มเพื่อแสดงผลข้อมูลปัจจุบัน
และผู้ใช้งานเว็บแอพพลิเคชั่นสามารถแก้ไขข้อมูล และบันทึกการแก้ไขลงในฐานข้อมูลได้

ขั้นตอนการสร้างฟอร์มสำหรับแก้ไขข้อมูล:

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

รูปแสดงแบบฟอร์มสำหรับแก้ไขข้อมูล

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

 

• ปรับแต่งรูปแบบของเว็บเพจโดยการแทรกไฟล์รูปภาพ และ ข้อความ
  
  • กำหนด Document Title เป็น "Update an employee record" (ดังรูป)
    
  • หัวข้อของเว็บเพจ ให้ใช้ไฟล์ images/title_update.gif (ดังรูป)
    

 

• หน้าจอ Dreamweaver ที่เปิดไฟล์ update.php ให้ทำการกำหนดชื่อของฟอร์ม โดยคลิกแท็ก <FORM> ที่ Tag Selector
  
  

  
  

  รูปแสดงการคลิกเลือกแท็ก <FORM> จาก Tag Selector
  

  
   

• เปิดไดอะล็อก Properties โดยคลิกเมนู Window > Properties หลังจากนั้นให้พิมพ์ชื่อฟอร์ม frmUpdate ที่ช่อง Form name
  

  
   

  
  

  รูปแสดง Property ของแท็ก <FORM>
  

 

ค่าของไดอะล็อก	ค่าที่กำหนด
Form name	fmUpdate

ตารางแสดงการกำหนด Property ของแท็ก <FORM>

 

จะเห็นได้ว่า ในการกำหนดคุณสมบัติของฟอร์ม HTML เรากำหนดเฉพาะคุณสมบัติในช่อง Form Name เท่านั้น
ส่วนคุณสมบัติในช่องอื่นๆ ในขั้นตอนต่อไป Dreamweaver จะกำหนดให้เราเองโดยอัตโนมัติ

 

(2) การสร้าง recordset สำหรับค้นหาข้อมูลเร็คคอร์ดที่ต้องการแก้ไข

 

 

ขั้นตอนนี้จะเป็นการค้นหาข้อมูลเร็คคอร์ดที่ต้องการแก้ไขเพื่อนำเอามาแสดงในฟอร์ม เป็นการแสดงสถานะของข้อมูลปัจจุบัน
ก่อนที่จะมีการแก้ไขปรับปรุงข้อมูล

ขั้นตอนการสร้าง recordset สำหรับค้นหาข้อมูลเร็คคอร์ดที่ต้องการแก้ไข:

คลิกที่เมนู Window > Server Behaviors หลังจากนั้นให้คลิกปุ่มเครื่องหมายบวก และเลือกรายการ Recordset

รูปแสดงการคลิกเลือกเมนู Recordset จาก Server Behaviors

 

1. เมื่อปรากฏไดอะล็อก Recordset ขึ้นมา ให้กำหนดค่าต่างๆ ดังรายละเอียดข้างล่างนี้ หลังจากนั้นคลิกปุ่ม OK
   

 

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

ค่าของไดอะล็อก ค่าที่กำหนด Name  rsEmp Connection  dbconn  Table  employees  Column  All  Filter  employeeid และ = URL Parameter  empid

 

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

 

 

(3) การแสดงข้อมูลเดิมในฟอร์ม HTML

    การแสดงข้อมูลลงในฟอร์ม ก็คือการแทรกสคริปต์สำหรับนำเอาฟิลด์จากการสร้าง Recordset ในขั้นตอนการค้นหาข้อมูลมา
แสดงผลในฟอร์มของเว็บเพจ เพื่อแสดงข้อมูลปัจจุบัน ก่อนที่จะแก้ไขปรับปรุง โดยวิธีการจะคล้ายกับขั้นตอนการทำระบบแสดงผลข้อมูล
ในไฟล์ detail.php

 

ขั้นตอนการแทรกสคริปต์สำหรับแสดงข้อมูลเดิมในฟอร์ม HTML:

1. เริ่มต้นเปิดโปรแกรม Dreamweaver ไปที่ไฟล์ update.php คลิกที่เมนู Window > Bindings หลังจากนั้นให้คลิกเครื่องหมายบวก
   หน้ารายการ Recordset (rsEmp) จะปรากฏชื่อฟิลด์ ให้คลิกเลือกและแทรกฟิลด์ลงในอ็อบเจ็คต์ของฟอร์มเพื่อแสดงผลข้อมูล ดังรูปด้านล่าง
   

   
   
   

   รูปการแสดงผลข้อมูลในฟอร์ม (Bindings)
   

 

1. บันทึกไฟล์ update.php ก็เป็นอันเสร็จการแสดงผลข้อมูลลงในฟอร์ม
   

 

 

(4) การแทรก Update Record Server Behavior ลงในเว็บเพจ

 

 

 

การแทรก Update Record Server Behavior ก็คือการแทรกสคริปต์ PHP เพื่อสั่งให้บันทึกการแก้ไขข้อมูลลงตารางของฐานข้อมูล

ขั้นตอนการแทรก Update Record Server Behavior ลงในเว็บเพจ:

 

1. เริ่มต้นที่โปรแกรม Dreamweaver เปิดไฟล์ update.php หลังจากนั้นให้คลิกเม้าส์ที่ตำแหน่งใดๆ ภายใต้เส้นประสีแดง ที่เป็นขอบเขตของฟอร์ม
   
2. คลิกเมนู Insert > Form > Hidden Field หลังจากนั้นคลิกเม้าส์ที่อ็อบเจ็คต์ Hidden Field จะปรากฏไดอะล็อก Properties ของ Hidden Field
   (หากไม่ปรากฏไดอะล็อก Properties ให้คลิกที่เมนู Windows > Properties) และให้กำหนดค่าในไดอะล็อกดังต่อไปนี้
   
   

   
   

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

    

ค่าของไดอะล็อก	ค่าที่กำหนด
HiddenField	empid
Value	<?php echo $row_rsEmp['employeeid']; ?>

ตารางแสดงการกำหนด Property ของ Hidden Field "empid"

 

1. เปิดแถบ Server Behaviors โดยคลิกเมนู Window > Server Behaviors แล้วคลิกที่ปุ่มเครื่องหมายบวก
   เลือกรายการUpdate Record จากเมนู
   

   
   

   ตารางแสดง Update Record Server Behaviors
   

2. เมื่อปรากฏไดอะล็อก Update Record ให้กำหนดค่าต่างๆ มีดังต่อไปนี้
   
   

   
   

   รูปแสดงการกำหนดค่าต่างๆ ในไดอะล็อก Update Record
   
   

ค่าของไดอะล็อก	ค่าที่กำหนด
Submit Values From	fmUpdate
Connection	dbconn
Update Table	employees
Columns	จับคู่ฟิลด์ของฐานข้อมูลกับอ็อบเจ็คต์ของฟอร์มดังต่อไปนี้ employeeid -> FORM.empid firstname -> FORM.firstname lastname -> FORM.lastname birthdate -> FORM.birthdate startdate -> FORM.startdate deptid -> FORM.deptid phone -> FORM.phone extension -> FORM.extension email -> FORM.email notes -> FORM.notes photo -> FORM.photo
After Updating, Go To	updateok.php

ตารางแสดงการกำหนดค่าต่างๆ ในไดอะล็อก Update Record

 

1. บันทึกไฟล์ update.php ก็เป็นอันเสร็จขั้นตอนการแทรก Update Record Server behavior
   
   
   

   
    

   
    

(5) การส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแก้ไข

 

ขั้นตอนนี้ ก็คือการทำให้ไฟล์เว็บเพจ 2 ไฟล์ list.php และ update.php สามารถเชื่อมโยงเพื่อส่งและรับค่า URL Parameter กันได้นั่นเอง

ขั้นตอนการส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแก้ไข:

1. เริ่มต้นที่โปรแกรม Dreamweaver เปิดไฟล์ list.php ขึ้นมา แล้วลากเม้าส์ทำไฮไลต์ข้อความ "แก้ไข" ดังรูป
   

 

รูปแสดงการไฮไลต์ข้อความ "แก้ไข"

 

1. เปิดไดอะล็อก Properties โดยคลิกที่เมนู Window > Properties จะปรากฏไดอะล็อก Properties ขึ้นมา ให้คลิกไอคอนรูป
   Folder สีเหลือง (Browse for File) ที่ตำแหน่งช่อง Link เพื่อสร้างไฮเปอร์ลิงค์สำหรับ URL Parameter ไปหาไฟล์ update.php
   
   

   
   

   รูปแสดง Property ของลิงค์ "แก้ไข"
   

 

1. เมื่อปรากฏไดอะล็อก Select File ขึ้นมา ให้คลิกเลือกไฟล์ update.php เป็นการกำหนดว่าจะส่งค่า URL Parameter ไปที่ไฟล์นี้
   หลังจากนั้นให้คลิกปุ่ม Parameters… ที่ด้านล่างของไดอะล็อก Select File เพื่อกำหนดการส่งค่า URL Parameter
   

   
    

   
   

   
   

   รูปแสดงขั้นตอนการสร้างลิงค์ พร้อมกับการกำหนด "Parameters…"
   

   
    

2. เมื่อปรากฏไดอะล็อก Parameters ขึ้นมา ที่ช่อง Name ให้พิมพ์ชื่อ URL Parameter ที่ต้องการจะส่งไป
   ในที่นี้ให้เราพิมพ์ empid หลังจากนั้นให้ไปที่ช่อง Value เพื่อกำหนดค่าที่จะส่งไป ในที่นี้เราต้องการกำหนดค่า
   ให้เปลี่ยนไปแบบ Dynamic ตามข้อมูลที่แสดงในแต่ละเร็คคอร์ด ให้คลิกปุ่ม Dynamic Data ที่ช่อง Value
   

   
    

   
   

   รูปแสดงขั้นตอนการสร้างลิงค์ พร้อมกับการกำหนด "Parameters…"
   

 

ค่าของไดอะล็อก	ค่าที่กำหนด
Name	empid
Value	<?php echo $row_rsEmp['employeeid']; ?>

ตารางแสดงการกำหนดค่า URL Parameter ในไดอะล็อก "Parameters"

1. เมื่อปรากฏไดอะล็อก Dynamic Data ขึ้นมา ให้คลิกเลือกฟิลด์ employeeid จาก Recordset (rsEmp) หลังจากนั้นคลิกปุ่ม OK
   
   

   
   

   รูปแสดงการเลือกฟิลด์ employeeid จาก Recordset
   

 

1. บันทึกไฟล์ list.php ก็เป็นเสร็จขั้นตอนการกำหนดการส่งค่า URL Parameter
   
2. ขั้นตอนสุดท้ายคือกำหนดให้ไฟล์ update.php รับค่า URL Parameter ที่ส่งมาจากไฟล์ list.php ซึ่งวิธีการทำนั้น
   เราได้ทำผ่านมาแล้วให้ย้อนกลับไปดูในขั้นตอน "การสร้าง recordset สำหรับค้นหาข้อมูลเร็คคอร์ดที่ต้องการแก้ไข"
   จะเห็นได้ว่า เราได้มีการเรียกใช้ URL Parameter "empid" ซึ่งก็คือค่า URL Parameter ที่ส่งไปจากไฟล์ list.php นั่นเอง
   

 

 

 

(6) การแสดงผลลัพธ์การแก้ไขข้อมูล

 

 

 

ขั้นตอนสุดท้ายของระบบแก้ไขข้อมูลคือ การสร้างไฟล์แสดงผลการทำงาน ซึ่งจะประกอบด้วยข้อความ แสดงให้ผู้ใช้
ทราบว่าการแก้ไขข้อมูลเสร็จเรียบร้อยแล้วเท่านั้น ให้สร้างเว็บเพจขึ้นมาและพิมพ์ข้อความสำหรับแสดงผลการแก้ไขข้อมูล
บันทึกเป็นไฟล์ updateok.php

 

รูปแสดงการสร้างไฟล์ updateok.php

 

 

 

(7) การใช้งานระบบแก้ไขข้อมูล

 

เริ่มต้นโดยใช้โปรแกรม Dreamweaver เปิดไฟล์ list.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer
จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ list.php หลังจากนั้นให้คลิกปุ่ม "แก้ไข" เพื่อแก้ไขข้อมูลแต่ละเร็คคอร์ด เสร็จแล้วคลิกปุ่ม
Update เพื่อบันทึกข้อมูล รอดูผลที่จะแสดงจากไฟล์ updateok.php

 

 

บทที่ 11 การสร้างระบบเพิ่มข้อมูล

 

 

ระบบเพิ่มข้อมูล คือเว็บเพจที่ทำหน้าที่ในการรับข้อมูลจากผู้ใช้ผ่านฟอร์ม และบันทึกการกรอกข้อมูลเข้าจัดเก็บในฐานข้อมูล
ในที่นี้จะประกอบด้วยไฟล์ 2 ไฟล์ ดังรูป

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

• insert.php    ประกอบด้วยฟอร์มสำหรับเป็นแบบฟอร์มกรอกข้อมูลและสคริปต์สำหรับจัดเก็บข้อมูลลงตารางของฐานข้อมูล
  
• insertok.php     ประกอบด้วยข้อความแสดงผลการเพิ่มข้อมูล
  

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

• การสร้างฟอร์มกรอกข้อมูล
  
• การแทรก Insert Record Server Behavior ลงในเว็บเพจ
  
• การสร้างเว็บเพจแสดงผลลัพธ์การเพิ่มข้อมูล
  
• การใช้งานระบบเพิ่มข้อมูล
  

 

(1) การสร้างฟอร์มกรอกข้อมูล

    การสร้างฟอร์มกรอกข้อมูล คือ ขั้นตอนการสร้างแบบฟอร์มให้ผู้ใช้เว็บแอพพลิเคชั่น นำข้อมูลมากรอกในแบบฟอร์ม
และส่งข้อมูลไปประมวลผลบนแอพพลิเคชั่นเซิร์ฟเวอร์ เพื่อบันทึกลงตารางของฐานข้อมูล

ขั้นตอนการสร้างฟอร์มกรอกข้อมูล:

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

 

รูปแสดงแบบฟอร์มกรอกข้อมูล

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

 

1. หน้าจอ Dreamweaver ที่เปิดไฟล์ insert.php ให้ทำการกำหนดชื่อของฟอร์ม โดยคลิกแท็ก <FORM> ที่ Tag Selector
   

   
    

   
   

   รูปแสดงการคลิกเลือกแท็ก <FORM> จาก Tag Selector
   
   

2. เปิดไดอะล็อก Properties โดยคลิกเมนู Window > Properties หลังจากนั้นให้พิมพ์ชื่อฟอร์ม fmAdd ที่ช่อง Form name
   

 

ค่าของไดอะล็อก	ค่าที่กำหนด
Form name	fmAdd

ตารางแสดงการกำหนด Property ของแท็ก <FORM>

 

รูปแสดง Property ของแท็ก <FORM>

 

จะเห็นได้ว่า ในการกำหนดคุณสมบัติของฟอร์ม เราไม่จำเป็นต้องกำหนดค่าใดๆ ในช่อง Action และ Method
เนื่องจากในขั้นตอนต่อไป Dreamweaver จะสร้างให้เราเองโดยอัตโนมัติ

 

 

(2) การแทรก Insert Record Server Behavior ลงในเว็บเพจ

 

การแทรก Insert Record Server Behavior เป็นการแทรกสคริปต์ PHP เพื่อบันทึกข้อมูลลงตารางของฐานข้อมูล

ขั้นตอนการแทรก Insert Record Server Behavior ลงในเว็บเพจ:

1. เปิดแถบ Server Behaviors โดยคลิกเมนู Window > Server Behaviors แล้วคลิกที่ปุ่มเครื่องหมายบวก
   เลือกรายการ Insert Record จากเมนู
   

ดังรูป

 

รูปแสดงการคลิกเลือกเมนู Insert Record จาก Server Behaviors

 

 

1. เมื่อปรากฏไดอะล็อก Insert Record ขั้นตอนต่อจากนี้ ก็จะเป็นการกำหนดค่าในไดอะล็อก Insert Record
   ซึ่งรายละเอียดการกำหนดค่าต่างๆ มีดังต่อไปนี้
   
   

   
   

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

 

ค่าของไดอะล็อก	ค่าที่กำหนด
Submit Values From	fmAdd
Connection	dbconn
Insert Table	employees
Columns	จับคู่ฟิลด์ของฐานข้อมูลกับอ็อบเจ็คต์ของฟอร์มดังต่อไปนี้ firstname -> firstname lastname -> lastname birthdate -> birthdate startdate -> startdate deptid -> deptid phone -> phone extension -> extension email -> email notes -> notes photo -> photo
After Inserting, Go To	insertok.php

ตารางแสดงการเลือกฟิลด์จากไดอะล็อก Insert Record เพื่อเพิ่มข้อมูล

 

1. บันทึกไฟล์ insert.php ก็เป็นอันเสร็จขั้นตอนการแทรก Insert Record Server behavior
   

 

 

(3) การสร้างเว็บเพจแสดงผลลัพธ์การเพิ่มข้อมูล

 

ขั้นตอนสุดท้ายของระบบเพิ่มข้อมูลคือ การสร้างไฟล์แสดงผลการทำงาน ซึ่งจะประกอบด้วยข้อความ แสดงให้ผู้ใช้
ทราบว่าการกรอกข้อมูลเสร็จเรียบร้อยแล้วเท่านั้น ให้สร้างเว็บเพจขึ้นมาและพิมพ์ข้อความสำหรับแสดงผลการเพิ่มข้อมูล
บันทึกเป็นไฟล์ Insertok.php

 

 

(4) การใช้งานระบบเพิ่มข้อมูล

 

เริ่มต้นโดยใช้โปรแกรม Dreamweaver เปิดไฟล์ insert.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer
จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ insert.php หลังจากนั้นให้ทดลองกรอกข้อมูลและคลิกปุ่ม Insert เพื่อบันทึกข้อมูล
เสร็จแล้วรอดูผลที่จะแสดงจากไฟล์ insertok.php

 

 

 

 

บทที่ 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 ทีละเงื่อนไข

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

 

 

 

บทที่ 9 การแบ่งหน้าแสดงผลข้อมูล

 

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

ในบทนี้จะกล่าวถึงการแสดงผลข้อมูลโดยแบ่งผลลัพธ์ออกเป็นหลายๆ หน้า โดยขั้นตอนการแบ่งหน้าแสดงผลนี้ จะทำต่อจากขั้นตอนการแสดงผลข้อมูลที่ผ่านมา

 

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

• การกำหนดจำนวนเร็คคอร์ดสำหรับแสดงผลต่อ 1 หน้า
  
• การสร้างลิงค์สำหรับคลิกแสดงผลทีละ 1 หน้า
  
• การใช้งานระบบแสดงผลข้อมูลแบบแบ่งหน้า
  

 

 

(1) การกำหนดจำนวนเร็คคอร์ดแสดงผลต่อ 1 หน้า

 

ในขั้นตอนนี้ จะเป็นการกำหนดให้เว็บเพจแสดงผลวนซ้ำจนกว่าจะครบจำนวนเร็คคอร์ดต่อ 1 หน้าที่ระบุ

ขั้นตอนการกำหนดจำนวนเร็คคอร์ดแสดงผลต่อ 1 หน้า:

1. เริ่มต้นที่หน้าจอ Dreamweaver เปิดไฟล์ list.php คลิกเลือกบริเวณที่ต้องการแสดงผลข้อมูลวนซ้ำ คือบรรทัดที่ 2 ของตาราง เพื่อให้ตำแหน่งของเคอร์เซอร์อยู่ภายในบริเวณบรรทัดที่แสดงผล หลังจากนั้นให้คลิกเลือกแท็ก <TR> บน Tag Selector
   

   
   

   รูปแสดงการกำหนดการวนลูปแสดงผลซ้ำ
   
   

2. คลิกที่เมนู Window > Server Behaviors หลังจากนั้นให้ดับเบิลคลิกรายการ Repeat Region ที่ได้สร้างไว้ก่อนหน้านี้
   ดังรูป
   
   

รูปแสดงไดอะล็อก Repeat Region แสดงการกำหนดแสดงผล 10 เร็คคอร์ดต่อ 1 หน้า

 

(2) การสร้างลิงค์สำหรับคลิกแสดงผลทีละ 1 หน้า

 

ในขั้นตอนการกำหนดจำนวนเร็คคอร์ดแสดงผลต่อ 1 หน้า ที่ผ่านมา จะเห็นว่าเราได้กำหนดให้แสดงผลข้อมูล
ครั้งละ 10 เร็คคอร์ด ดังนั้น หากลองทดสอบการทำงานไฟล์ list.php จะพบว่ามีข้อมูลที่แสดงผลเพียง 10 เร็คคอร์ด
เท่านั้น ซึ่งในความเป็นจริงอาจจะมีมากกว่านั้นก็ได้ ในส่วนนี้ก็จะเป็นการสร้างลิงค์สำหรับคลิกกลับไป-มาทีละ 10 เร็คคอร์ด
หรือแล้วแต่จำนวนที่เรากำหนดในขั้นตอนการแสดงผลซ้ำนั่นเอง

 

ขั้นตอน:

1. เริ่มต้นที่หน้าจอ Dreamweaver เปิดไฟล์ list.php
   
2. คลิกเม้าส์เพื่อวางเคอร์เซอร์ที่ตำแหน่งด้านล่างถัดจากตารางแสดงผล หลังจากนั้นให้คลิกเลือกเมนู
   Insert > Application Objects > Display Record Count > Recordset Navigation Status
   

 

 

1. เมื่อปรากฏไดอะล็อก Recordset Navigation Status ขึ้นมา เป็นการให้เลือกว่าจะกระทำกับ Recordset ใด
   (กรณีที่ใน 1 เว็บเพจมีการสร้างหลาย Recordset) ในที่นี้ให้เลือก rsEmp หลังจากนั้นให้คลิก OK
   

 

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

จะปรากฏข้อความแสดงสถานะว่าขณะนี้กำลังแสดงผลเร็คคอร์ดใดบ้าง

รูปแสดง Recordset Navigation Status

 

1. คลิกเลือกเมนู Insert > Application Objects > Recordset Paging > Recordset Navigation Bar
   
2. เมื่อปรากฏไดอะล็อก Recordset Navigation Bar ขึ้นมา เป็นการให้เลือกว่าจะกระทำกับ Recordset ใด
   (กรณีที่ใน 1 เว็บเพจมีการสร้างหลาย Recordset) ในที่นี้ให้เลือก rsEmp ในช่อง Display Using ให้เลือก Text หลังจากนั้นให้คลิก OK
   
   

   
   

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

   
   จะปรากฏลิงค์สำหรับคลิกเพื่อแสดงผลข้อมูลกลับไป-มาทีละ 10 เร็คคอร์ด หรือแล้วแต่จำนวนที่เรากำหนดในขั้นตอนการแสดงผลซ้ำ
   

รูปแสดง Recordset Navigation Bar

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

 

 

(3) การใช้งานระบบแสดงผลข้อมูลแบบแบ่งหน้า

 

เริ่มต้นโดยใช้โปรแกรม Dreamweaver เปิดไฟล์ list.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer
จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ list.php หลังจากนั้นทดสอบคลิกที่ลิงค์ First Previous Next และ Last ด้านล่างของหน้าเว็บเพจ
เร็คคอร์ดที่แสดงผลจะปรากฏขึ้นมาทีละ 10 เร็คคอร์ด

 

 

บทที่ 8 การสร้างระบบแสดงผลข้อมูล

 

ในเนื้อหาที่ผ่านมา เราได้ผ่านขั้นตอนการกำหนดเว็บไซต์สำหรับการพัฒนาเว็บแอพพลิเคชั่น PHP_MySQL และการกำหนดการติดต่อกับฐานข้อมูลมาแล้ว เนื้อหาในบทนี้จะกล่าวถึงการสร้างเว็บเพจที่สามารถเรียกใช้ข้อมูลจากตารางในฐานข้อมูลมาแสดงผลบนเว็บเพจ

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

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

 

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

list.php        ทำหน้าที่แสดงข้อมูลพนักงานหน้าละหลายเร็คคอร์ด มีลิงค์สำหรับคลิกส่ง URL Parameter ไปยัง
    ไฟล์ detail.php เพื่อดูรายละเอียดพนักงานแต่ละคน

detail.php     ทำหน้าแสดงรายละเอียดของพนักงานแต่ละคน โดยรับค่า URL Parameter จากไฟล์ list.php

 

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

1. การสร้างตารางสำหรับแสดงผลข้อมูล
   
2. การแทรก Recordset (Query) ลงในเว็บเพจ
   
3. การแทรกสคริปต์สำหรับแสดงผลข้อมูลลงในเว็บเพจ
   
4. การตรวจสอบว่ามีข้อมูลสำหรับแสดงผลหรือไม่
   
5. การวนลูปแสดงผลซ้ำ (Repeat)
   
6. การค้นหาข้อมูลที่ต้องการแสดงรายละเอียดทีละ 1 เร็คคอร์ด
   
7. การแทรกสคริปต์สำหรับแสดงผลข้อมูลทีละ 1 เร็คคอร์ดลงในเว็บเพจ
   
8. การส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแสดงผล
   
9. การใช้งานระบบแสดงผลข้อมูล
   

 

(1) การสร้างตารางสำหรับแสดงผลข้อมูล

 

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

 

ขั้นตอน:

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

เลือกเมนู Modify > Page Properties… เมื่อปรากฏไดอะล็อก Page Properties ขึ้นมา ให้กำหนด Properties ของเว็บเพจ ดังรายละเอียดด้านล่างนี้ หลังจากนั้นคลิกปุ่ม OK

 

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

ตารางแสดงการกำหนดค่าในไดอะล็อก Page Properties

 

แทรกตาราง HTML สำหรับแสดงผล โดยคลิกเมนู Insert > Table เมื่อปรากฏไดอะล็อก Table ขึ้นมา ให้กำหนดค่าดังนี้

 

ค่าของไดอะล็อก	ค่าที่กำหนด
Rows	3
Columns	4
Table width	770 pixel
Border thichness	1 pixels
Cell padding	1
Cell spacing	1

ตารางแสดงการกำหนดค่าในไดอะล็อก Table

 

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

ปรับแต่งตารางโดยการแทรกไฟล์รูปภาพ และข้อความลงในตารางและส่วนต่างๆ ของเว็บเพจ
เมื่อเสร็จแล้วจะได้เว็บเพจ ดังรูปด้านล่าง

 

รูปแสดงหน้าเว็บเพจ list.php

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

 

 

 

 

(2) การแทรก Recordset (Query) ลงในเว็บเพจ

 

การแทรก Recordset (Query) คือ ขั้นตอนการแทรกสคริปต์ PHP สำหรับการสร้างเร็คคอร์ดเซ็ต เพื่อนำข้อมูลจากเร็คคอร์ดเซ็ต มาแสดงบนเว็บเพจ ซึ่งจะกล่าวถึงในขั้นตอนต่อไป

ขั้นตอน:

1. คลิกที่เมนู Windows > Bindings หลังจากนั้นให้คลิกเครื่องหมายบวก เลือกเมนู Recordset (Query)
   
2. เมื่อปรากฏไดอะล็อก Recordset ขึ้นมา ให้กำหนดค่าต่างๆ ดังรายละเอียดข้างล่างนี้ หลังจากนั้นให้บันทึกไฟล์ list.php
   

 

ค่าของไดอะล็อก	ค่าที่กำหนด
Name	rsEmp
Connection	dbconn
Table	employees
Columns	All
Filter	None
Sort	firstname , Ascending

ตารางแสดงการกำหนดค่าไดอะล็อก Recordset

รูปแสดงการเลือกเมนู
Recordset (Query)

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

(3) การแทรกสคริปต์สำหรับแสดงผลข้อมูลลงในเว็บเพจ

 

การแทรกสคริปต์สำหรับแสดงผลข้อมูล ก็คือการแทรกสคริปต์ PHP สำหรับนำเอาข้อมูลจากเร็คคอร์ดเซ็ตที่ได้จากขั้นตอนที่แล้ว มาแสดงผลข้อมูลในเว็บเพจ

ขั้นตอน:

1. คลิกไปที่เมนู Windows > Bindings หลังจากนั้นให้คลิกเครื่องหมายบวก หน้ารายการ Recordset (rsEmp) จะปรากฏชื่อฟิลด์ของตารางในฐานข้อมูล ให้คลิกเลือกและแทรกฟิลด์ลงเว็บเพจ เพื่อแสดงผลข้อมูล ตามขั้นตอน ดังรูปด้านล่าง
   

 

คอลัมน์ของตาราง	ฟิลด์ของ Recordset (rsEmp)
ชื่อ-นามสกุล	firstname, lastname
แผนก	deptid
โทรศัพท์	phone , extension

ตารางแสดงการเลือกฟิลด์จากเร็คคอร์ดเซ็ตวางลงในเว็บเพจ

 

 

รูปแสดงการเลือกฟิลด์จากเร็คคอร์ดเซ็ตวางลงในเว็บเพจ

 

1. บันทึกไฟล์ list.php
   
2. สามารถทดสอบดูผลการทำงานได้ โดยกดปุ่ม F12 จากหน้าจอ Dreamweaver
   

 

 

(4) การตรวจสอบว่ามีข้อมูลสำหรับแสดงผลหรือไม่

    

การตรวจสอบข้อมูลก่อนการแสดง จะเป็นขั้นตอนที่ช่วยให้เว็บแอพพลิเคชั่นน่าใช้ยิ่งขึ้น หากการตรวจสอบไม่พบข้อมูลที่จะแสดงผล ควรมีข้อความแจ้งผู้ใช้งานว่า "ไม่มีข้อมูล"

ขั้นตอน:

1. คลิกที่เมนู Window > Server Behaviors หลังจากนั้นให้คลิกเครื่องหมายบวก เพื่อเลือกเมนู
   Show Region > Show If Recordset Is Not Empty
   
   
   

   รูปการกำหนดการตรวจสอบว่ามีข้อมูลหรือไม่
   

   
   

   รูปการเลือกเมนู Server Behaviors เพื่อตรวจสอบว่ามีข้อมูลหรือไม่
   

 

 

(5) การวนลูปแสดงผลซ้ำ (Repeat)

 

ในขั้นตอนที่แล้ว หากลองทดสอบการทำงานของเว็บเพจ จะเป็นว่ามีการแสดงผลข้อมูลออกมาจำนวน 1 เร็คคอร์ด ซึ่งที่จริงแล้ว ข้อมูลอาจจะมีมากกว่า 1 เร็คคอร์ดก็ได้ ดังนั้นในขั้นตอนนี้ จะเป็นการกำหนดให้เว็บเพจแสดงผลวนซ้ำจนกว่าจะครบทุกเร็คคอร์ด

ขั้นตอน:

1. เริ่มต้นที่หน้าจอ Dreamweaver เปิดไฟล์ list.php ให้คลิกเลือกบริเวณที่ต้องการแสดงผลข้อมูลวนซ้ำ คือบรรทัดที่ 2 ของตาราง เพื่อให้ตำแหน่งของเคอร์เซอร์อยู่ภายในบริเวณบรรทัดที่แสดงผล หลังจากนั้นให้คลิกเลือกแท็ก <TR> บน Tag Selector
   
   

   
   

   รูปการกำหนดการวนลูปแสดงผลซ้ำ
   
   

2. จากนั้นคลิกที่เมนู Window > Server Behaviors หลังจากนั้นให้คลิกเครื่องหมายบวก เพื่อเลือกเมนู Repeat Region เมื่อปรากฏไดอะล็อก Repeat Region ให้กำหนดค่าต่างๆ ดังรายละเอียดข้างล่างนี้ หลังจากนั้นให้คลิกปุ่ม OK
   
   

   รูปแสดงการกำหนด Repeat Region

   รูปการกำหนดแสดงผลทุกเร็คคอร์ด

   
    

3. บันทึกไฟล์ list.php
   
4. ทดสอบการทำงานของไฟล์ list.php โดยการกด F12
   

 

 

 

(6) การค้นหาข้อมูลที่ต้องการแสดงรายละเอียดทีละ 1 เร็คคอร์ด

    การแทรกสคริปต์ค้นหาข้อมูลนี้ จะเป็นการแทรกลงในไฟล์ detail.php เพื่อนำเอาข้อมูลพนักงานออกมาแสดงรายละเอียดในเว็บเพจทีละเร็คคอร์ด โดยเงื่อนไขการค้นหาข้อมูลนั้น จะใช้ฟิลด์ employeeid ของตารางในฐานข้อมูล เปรียบเทียบกับค่า URL Parameter "empid" ที่ถูกส่งมาจากไฟล์ list.php

ขั้นตอน:

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

   
   

   รูปแสดงแบบตารางสำหรับแสดงผลข้อมูล
   

NOTE: เปิดไฟล์ htmltable2.htm จากขั้นตอนที่ผ่านมา หรือ PHPWEB\labs\solutions\lab01_basichtml\htmltable2.htm ขึ้นมาแล้วบันทึกเป็นไฟล์ PHPWEB\detail.php (หากปรากฏไดอะล็อก Update Links? ให้คลิก No)

1. เลือกเมนู Modify > Page Properties เมื่อปรากฏไดอะล็อก Page Properties ขึ้นมา ให้กำหนด Properties ของเว็บเพจ ดังรายละเอียดด้านล่างนี้ หลังจากนั้นคลิกปุ่ม OK
   

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

 

1. คลิกที่เมนู Window > Bindings หลังจากนั้นให้คลิกปุ่มเครื่องหมายบวก และเลือกรายการ Recordset (Query)
   เมื่อปรากฏไดอะล็อก Recordset ขึ้นมา ให้กำหนดค่าต่างๆ ดังรายละเอียดข้างล่างนี้ หลังจากนั้นให้คลิกปุ่ม OK
   

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

   ค่าของไดอะล็อก ค่าที่กำหนด Name  rsEmp  Connection  dbconn  Table  employees  Column  All  Filter  employeeid และ = URL Parameter  empid

2. บันทึกไฟล์ detail.php
   

 

 

 

(7) การแทรกสคริปต์สำหรับแสดงผลข้อมูลทีละ 1 เร็คคอร์ดลงในเว็บเพจ

การแทรกสคริปต์ในขั้นตอนนี้ จะกระทำในไฟล์ detail.php จะเป็นการแทรกสคริปต์สำหรับนำเอาฟิลด์จากการสร้าง Recordset ในขั้นตอนการค้นหาข้อมูลที่ต้องการแสดงรายละเอียดทีละ 1 เร็คคอร์ด มาแสดงผลในเว็บเพจ โดยวิธีการจะคล้ายกับขั้นตอนการทำไฟล์ list.php

ขั้นตอนการแทรกสคริปต์สำหรับแสดงผลข้อมูลทีละ 1 เร็คคอร์ดลงในเว็บเพจ:

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

   
   

   รูปการแสดงผลข้อมูลในตาราง (Bindings)
   

 

1. สำหรับฟิลด์ photo ซึ่งเก็บชื่อไฟล์รูปภาพพนักงาน เช่น Amit_Kelly.jpg เราต้องการให้แสดงในลักษณะรูปภาพ โดยให้เอาไฟล์รูปภาพ
   
   photos\Amit_Kelly.jpg มาแสดงบนเว็บเพจ ให้คลิกที่เมนู Insert > Image จะปรากฏไดอะล็อก Select Image Source
   ให้กำหนดค่าต่างๆ ดังตารางด้านล่าง หลังจากนั้นให้คลิกปุ่ม OK
   

 

ค่าของไดอะล็อก	ค่าที่กำหนด
Select File Name From	Data Sources
Field	photo
Format	None
URL	photos/<?php echo $row_rsEmp['photo']; ?>

ตารางแสดงการกำหนดค่าในไดอะล็อก Select Image Source เพื่อแสดงไฟล์รูปภาพ

รูปแสดงการกำหนดค่าในไดอะล็อก Select Image Source เพื่อแสดงไฟล์รูปภาพ

 

 

(8) การส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแสดงผล

 

ขั้นตอนนี้ ก็คือการทำให้ไฟล์เว็บเพจ 2 ไฟล์ list.php และ detail.php สามารถเชื่อมโยงเพื่อส่งและรับค่า URL Parameter กันได้นั่นเอง

ขั้นตอนการส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแสดงผล:

1. เริ่มต้นที่โปรแกรม Dreamweaver เปิดไฟล์ list.php ขึ้นมา แล้วลากเม้าส์ทำไฮไลต์ตำแหน่งแสดงผลฟิลด์ firstname และ lastname ดังรูป
   

   
   

   รูปแสดงการลากเม้าส์ทำไฮไลต์ฟิลด์ firstname และ lastname
   

2. เปิดไดอะล็อก Properties โดยคลิกที่เมนู Window > Properties จะปรากฏไดอะล็อก Properties ขึ้นมา ให้คลิกไอคอนรูป Folder สีเหลือง (Browse for File) ที่ตำแหน่งช่อง Link เพื่อสร้างไฮเปอร์ลิงค์สำหรับ URL Parameter ไปหาไฟล์ detail.php
   

   
   

รูปแสดง Property ของลิงค์บริเวณที่ลากเม้าส์ฟิลด์ firstname และ lastname

 

1. เมื่อปรากฏไดอะล็อก Select File ขึ้นมา ให้คลิกเลือกไฟล์ detail.php เป็นการกำหนดว่าจะส่งค่า URL Parameter ไปที่ไฟล์นี้ หลังจากนั้นให้คลิกปุ่ม Parameters… ที่ด้านล่างของไดอะล็อก Select File เพื่อกำหนดการส่งค่า URL Parameter
   

 

รูปแสดงขั้นตอนการสร้างลิงค์ พร้อมกับการกำหนด "Parameters…"

 

1. เมื่อปรากฏไดอะล็อก Parameters ขึ้นมา ที่ช่อง Name ให้พิมพ์ชื่อ URL Parameter ที่ต้องการจะส่งไป ในที่นี้ให้เราพิมพ์ empid หลังจากนั้นให้ไปที่ช่อง Value เพื่อกำหนดค่าที่จะส่งไป ในที่นี้เราต้องการกำหนดค่าให้เปลี่ยนไปแบบ Dynamic ตามข้อมูลที่แสดงในแต่ละเร็คคอร์ด ให้คลิกปุ่ม Dynamic Data ที่ช่อง Value
   

   
    

   
   

   รูปแสดงขั้นตอนการสร้างลิงค์ พร้อมกับการกำหนด "Parameters…"
   

 

ค่าของไดอะล็อก	ค่าที่กำหนด
Name	empid
Value	<?php echo $row_rsEmp['employeeid']; ?>

ตารางแสดงการกำหนดค่า URL Parameter ในไดอะล็อก "Parameters"

 

1. เมื่อปรากฏไดอะล็อก Dynamic Data ขึ้นมา ให้คลิกเลือกฟิลด์ employeeid จาก Recordset (rsEmp)
   หลังจากนั้นคลิกปุ่ม OK
   

 

รูปแสดงการเลือกฟิลด์ employeeid จาก Recordset

 

1. บันทึกไฟล์ list.php ก็เป็นเสร็จขั้นตอนการกำหนดการส่งค่า URL Parameter
   
2. ขั้นตอนสุดท้ายคือกำหนดให้ไฟล์ detail.php รับค่า URL Parameter ที่ส่งมาจากไฟล์ list.php ซึ่งวิธีการทำนั้น
   เราได้ทำผ่านมาแล้วให้ย้อนกลับไปดูในขั้นตอน "การค้นหาข้อมูลที่ต้องการแสดงรายละเอียดทีละ 1 เร็คคอร์ด"
   
   จะเห็นได้ว่า เราได้มีการเรียกใช้ URL Parameter "empid" ซึ่งก็คือค่า URL Parameter ที่ส่งไปจากไฟล์ list.php นั่นเอง
   

 

 

 

 

(9) การใช้งานระบบแสดงผลข้อมูล

 

เริ่มต้นโดยใช้โปรแกรม Dreamweaver เปิดไฟล์ list.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer
จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ list.php ให้ทดสอบคลิกที่ข้อมูล ชื่อ-นามสกุลของพนักงานแต่ละคน
จะปรากฏหน้าเว็บเพจแสดงรายละเอียดประวัติข้อมูลพนักงานทีละคน