บทที่ 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 ให้ทดสอบคลิกที่ข้อมูล ชื่อ-นามสกุลของพนักงานแต่ละคน
จะปรากฏหน้าเว็บเพจแสดงรายละเอียดประวัติข้อมูลพนักงานทีละคน