1. บทที่ 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. การใช้งานระบบแสดงผลข้อมูล
dulyawat@hotmail.com การสร้างระบบแสดงผลข้อมูล 50

2. (1) การสร้างตารางสำหรับแสดงผลข้อมูล
ขั้นตอนนี้ จะเป็นการสร้างตารางสำหรับแสดงผลข้อมูล โดยจะเป็นการแสดงข้อมูลทีละหลายๆ เร็คคอร์ดลงในเว็บ
เพจ พร้อมทั้งมีการปรับแต่งรูปแบบโดยใช้เครื่องมือของ Dreamweaver
ขั้นตอน:
1. เริ่มต้นที่โปรแกรม Dreamweaver คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ
General เลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ list.php
2. เลือกเมนู 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
3. แทรกตาราง HTML สำหรับแสดงผล โดยคลิกเมนู Insert > Table เมื่อปรากฏไดอะล็อก Table ขึ้นมา ให้กำหนดค่าดังนี้
ค่าของไดอะล็อก
ค่าที่กำหนด
Rows
3
Columns
4
Table width
770 pixel
Border thichness
1 pixels
Cell padding
1
Cell spacing
1
ตารางแสดงการกำหนดค่าในไดอะล็อก Table
dulyawat@hotmail.com การสร้างระบบแสดงผลข้อมูล 51

3. รูปแสดงการกำหนดค่าในไดอะล็อก Table
4. ปรับแต่งตารางโดยการแทรกไฟล์รูปภาพ และข้อความลงในตารางและส่วนต่างๆ ของเว็บเพจ
เมื่อเสร็จแล้วจะได้เว็บเพจ ดังรูปด้านล่าง
Document Title
title_list.gif
รูปแสดงหน้าเว็บเพจ list.php
NOTE: เปิดไฟล์ htmltable.htm ในขั้นตอนที่ผ่านมา หรือ PHPWEBlabssolutionslab01_basichtmlhtmltable.htm
ขึ้นมาแล้วบันทึกเป็นไฟล์ PHPWEBlist.php (หากปรากฏไดอะล็อก Update Links? ให้คลิก No)
dulyawat@hotmail.com การสร้างระบบแสดงผลข้อมูล 52

4. (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
dulyawat@hotmail.com การสร้างระบบแสดงผลข้อมูล 53

5. (3) การแทรกสคริปต์สำหรับแสดงผลข้อมูลลงในเว็บเพจ
การแทรกสคริปต์สำหรับแสดงผลข้อมูล ก็คือการแทรกสคริปต์ PHP สำหรับนำเอาข้อมูลจากเร็คคอร์ดเซ็ตที่ได้จาก
ขั้นตอนที่แล้ว มาแสดงผลข้อมูลในเว็บเพจ
ขั้นตอน:
1. คลิกไปที่เมนู Windows > Bindings หลังจากนั้นให้คลิกเครื่องหมายบวก หน้ารายการ Recordset (rsEmp) จะ
ปรากฏชื่อฟิลด์ของตารางในฐานข้อมูล ให้คลิกเลือกและแทรกฟิลด์ลงเว็บเพจ เพื่อแสดงผลข้อมูล ตามขั้นตอน ดังรูป
ด้านล่าง
คอลัมน์ของตาราง
ฟิลด์ของ Recordset (rsEmp)
ชื่อ-นามสกุล
firstname, lastname
แผนก
deptid
โทรศัพท์
phone , extension
ตารางแสดงการเลือกฟิลด์จากเร็คคอร์ดเซ็ตวางลงในเว็บเพจ
รูปแสดงการเลือกฟิลด์จากเร็คคอร์ดเซ็ตวางลงในเว็บเพจ
2. บันทึกไฟล์ list.php
3. สามารถทดสอบดูผลการทำงานได้ โดยกดปุ่ม F12 จากหน้าจอ Dreamweaver
dulyawat@hotmail.com การสร้างระบบแสดงผลข้อมูล 54

6. (4) การตรวจสอบว่ามีข้อมูลสำหรับแสดงผลหรือไม่
การตรวจสอบข้อมูลก่อนการแสดง จะเป็นขั้นตอนที่ช่วยให้เว็บแอพพลิเคชั่นน่าใช้ยิ่งขึ้น หากการตรวจสอบไม่พบ
ข้อมูลที่จะแสดงผล ควรมีข้อความแจ้งผู้ใช้งานว่า “ไม่มีข้อมูล”
ขั้นตอน:
1. คลิกที่เมนู Window > Server Behaviors หลังจากนั้นให้คลิกเครื่องหมายบวก เพื่อเลือกเมนู
Show Region > Show If Recordset Is Not Empty
รูปการกำหนดการตรวจสอบว่ามีข้อมูลหรือไม่
รูปการเลือกเมนู Server Behaviors เพื่อตรวจสอบว่ามีข้อมูลหรือไม่
dulyawat@hotmail.com การสร้างระบบแสดงผลข้อมูล 55

7. (5) การวนลูปแสดงผลซ้ำ (Repeat)
ในขั้นตอนที่แล้ว หากลองทดสอบการทำงานของเว็บเพจ จะเป็นว่ามีการแสดงผลข้อมูลออกมาจำนวน 1 เร็คคอร์ด
ซึ่งที่จริงแล้ว ข้อมูลอาจจะมีมากกว่า 1 เร็คคอร์ดก็ได้ ดังนั้นในขั้นตอนนี้ จะเป็นการกำหนดให้เว็บเพจแสดงผลวนซ้ำจนกว่า
จะครบทุกเร็คคอร์ด
ขั้นตอน:
1. เริ่มต้นที่หน้าจอ Dreamweaver เปิดไฟล์ list.php ให้คลิกเลือกบริเวณที่ต้องการแสดงผลข้อมูลวนซ้ำ คือบรรทัดที่ 2
ของตาราง เพื่อให้ตำแหน่งของเคอร์เซอร์อยู่ภายในบริเวณบรรทัดที่แสดงผล หลังจากนั้นให้คลิกเลือกแท็ก <TR> บน
Tag Selector
รูปการกำหนดการวนลูปแสดงผลซ้ำ
2. จากนั้นคลิกที่เมนู Window > Server Behaviors หลังจากนั้นให้คลิกเครื่องหมายบวก เพื่อเลือกเมนู Repeat Region
เมื่อปรากฏไดอะล็อก Repeat Region ให้กำหนดค่าต่างๆ ดังรายละเอียดข้างล่างนี้ หลังจากนั้นให้คลิกปุ่ม OK
รูปการกำหนดแสดงผลทุกเร็คคอร์ด
รูปแสดงการกำหนด Repeat Region
dulyawat@hotmail.com การสร้างระบบแสดงผลข้อมูล 56

8. 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 สำหรับแสดงข้อมูลลงในเว็บเพจ โดยให้มีหน้าเว็บเพจ ดังรูป
Document Title
รูปแสดงแบบตารางสำหรับแสดงผลข้อมูล
NOTE: เปิดไฟล์ htmltable2.htm จากขั้นตอนที่ผ่านมา หรือ PHPWEBlabssolutionslab01_basichtmlhtmltable2.htm
ขึ้นมาแล้วบันทึกเป็นไฟล์ PHPWEBdetail.php (หากปรากฏไดอะล็อก Update Links? ให้คลิก No)
Imagestitle_detail.gif
dulyawat@hotmail.com การสร้างระบบแสดงผลข้อมูล 57

9. 3. เลือกเมนู Modify > Page Properties เมื่อปรากฏไดอะล็อก Page Properties ขึ้นมา ให้กำหนด Properties ของเว็บเพจ ดัง
รายละเอียดด้านล่างนี้ หลังจากนั้นคลิกปุ่ม OK
ค่าของไดอะล็อก
ค่าที่กำหนด
images/bkg_detail.gif
Appearance > Background Image
Employee Details
Title/Encoding > Title
Title/Encoding > Document Type (DTD)
None
Title/Encoding > Encoding
Thai (Windows)
4. คลิกที่เมนู Window > Bindings หลังจากนั้นให้คลิกปุ่มเครื่องหมายบวก และเลือกรายการ Recordset (Query)
เมื่อปรากฏไดอะล็อก Recordset ขึ้นมา ให้กำหนดค่าต่างๆ ดังรายละเอียดข้างล่างนี้ หลังจากนั้นให้คลิกปุ่ม OK
ค่าของไดอะล็อก
ค่าที่กำหนด
Name
rsEmp
Connection
dbconn
Table
employees
Column
All
Filter
employeeid และ =
U
RL Parameter
empid
รูปแสดงไดอะล็อก Recordset
5. บันทึกไฟล์ detail.php
(7) การแทรกสคริปต์สำหรับแสดงผลข้อมูลทีละ 1 เร็คคอร์ดลงในเว็บเพจ
การแทรกสคริปต์ในขั้นตอนนี้ จะกระทำในไฟล์ detail.php จะเป็นการแทรกสคริปต์สำหรับนำเอาฟิลด์จากการสร้าง
Recordset ในขั้นตอนการค้นหาข้อมูลที่ต้องการแสดงรายละเอียดทีละ 1 เร็คคอร์ด มาแสดงผลในเว็บเพจ โดยวิธีการจะคล้าย
กับขั้นตอนการทำไฟล์ list.php
dulyawat@hotmail.com การสร้างระบบแสดงผลข้อมูล 58

10. ขั้
นตอนการแทรกสคริปต์สำหรับแสดงผลข้อมูลทีละ 1 เร็คคอร์ดลงในเว็บเพจ:
1. เริ่มต้นที่ไฟล์ detail.php คลิกที่เมนู Window > Bindings หลังจากนั้นให้คลิกเครื่องหมายบวก หน้ารายการ
Recordset (rsEmp) จะปรากฏชื่อฟิลด์ ให้คลิกเลือกและแทรกฟิลด์ลงเว็บเพจ เพื่อแสดงผลข้อมูล ตามขั้นตอนที่เคยทำใน
ไฟล์ list.php ที่ผ่านมา ดังรูป
รูปการแสดงผลข้อมูลในตาราง (Bindings)
2. สำหรับฟิลด์ photo ซึ่งเก็บชื่อไฟล์รูปภาพพนักงาน เช่น Amit_Kelly.jpg เราต้องการให้แสดงในลักษณะรูปภาพ โดยให้
เอาไฟล์รูปภาพ photosAmit_Kelly.jpg มาแสดงบนเว็บเพจ ให้คลิกที่เมนู Insert > Image จะปรากฏไดอะล็อก
Select Image Source ให้กำหนดค่าต่างๆ ดังตารางด้านล่าง หลังจากนั้นให้คลิกปุ่ม OK
ค่าของไดอะล็อก
ค่าที่กำหนด
Select File Name From
Data Sources
Field
photo
Format
None
photos/<?php echo $row_rsEmp[‘photo’]; ?>
URL
ตารางแสดงการกำหนดค่าในไดอะล็อก Select Image Source เพื่อแสดงไฟล์รูปภาพ
(1) คลิกตำแหน่งที่ต้องการแสดงผล
(2) คลิกฟิลด์ที่ต้องการแสดงผล
(3) คลิกปุ่ม Insert
dulyawat@hotmail.com การสร้างระบบแสดงผลข้อมูล 59

11. รูปแสดงการกำหนดค่าในไดอะล็อก Select Image Source เพื่อแสดงไฟล์รูปภาพ
(8) การส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแสดงผล
ขั้นตอนนี้ ก็คือการทำให้ไฟล์เว็บเพจ 2 ไฟล์ list.php และ detail.php สามารถเชื่อมโยงเพื่อส่งและรับค่า URL
Parameter กันได้นั่นเอง
ขั้
นตอนการสง่และรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแสดงผล:
1. เริ่มต้นที่โปรแกรม Dreamweaver เปิดไฟล์ list.php ขึ้นมา แล้วลากเม้าส์ทำไฮไลต์ตำแหน่งแสดงผลฟิลด์ firstname และ
lastname ดังรูป
ร
ูปแสดงการลากเม้าส์ทำไฮไลต์ฟิลด์ firstname และ lastname
(1) คลิกเลือก Data sources
(2) คลิกเลือกฟิลด์ photo
(3) ระบุชื่อโฟลเดอร์ photos/ หน้าชื่อฟิลด์
ลากเม้าส์ทำไฮไลต์ฟิลด์ firstname , lastname
dulyawat@hotmail.com การสร้างระบบแสดงผลข้อมูล 60

12. 2. เปิดไดอะล็อก Properties โดยคลิกที่เมนู Window > Properties จะปรากฏไดอะล็อก Properties ขึ้นมา ให้คลิกไอคอนรูป
Folder สีเหลือง (Browse for File) ที่ตำแหน่งช่อง Link เพื่อสร้างไฮเปอร์ลิงค์สำหรับ URL Parameter ไปหาไฟล์
detail.php
รูปแสดง Property ของลิงค์บริเวณที่ลากเม้าส์ฟิลด์ firstname และ lastname
3. เมื่อปรากฏไดอะล็อก Select File ขึ้นมา ให้คลิกเลือกไฟล์ detail.php เป็นการกำหนดว่าจะส่งค่า URL Parameter ไปที่
ไฟล์นี้ หลังจากนั้นให้คลิกปุ่ม Parameters… ที่ด้านล่างของไดอะล็อก Select File เพื่อกำหนดการส่งค่า URL Parameter
(1) คลิก detail.php
(2) คลิก Parameters…
รูปแสดงขั้นตอนการสร้างลิงค์ พร้อมกับการกำหนด "Parameters…"
4. เมื่อปรากฏไดอะล็อก Parameters ขึ้นมา ที่ช่อง Name ให้พิมพ์ชื่อ URL Parameter ที่ต้องการจะส่งไป ในที่นี้ให้เรา
พิมพ์ empid หลังจากนั้นให้ไปที่ช่อง Value เพื่อกำหนดค่าที่จะส่งไป ในที่นี้เราต้องการกำหนดค่าให้เปลี่ยนไปแบบ
Dynamic ตามข้อมูลที่แสดงในแต่ละเร็คคอร์ด ให้คลิกปุ่ม Dynamic Data ที่ช่อง Value
dulyawat@hotmail.com การสร้างระบบแสดงผลข้อมูล 61

13. รูปแสดงขั้นตอนการสร้างลิงค์ พร้อมกับการกำหนด "Parameters…"
ค่าของไดอะล็อก
ค่าที่กำหนด
Name
empid
<?php echo $row_rsEmp['employeeid']; ?>
Value
ตารางแสดงการกำหนดค่า URL Parameter ในไดอะล็อก “Parameters”
5. เมื่อปรากฏไดอะล็อก Dynamic Data ขึ้นมา ให้คลิกเลือกฟิลด์ employeeid จาก Recordset (rsEmp)
หลังจากนั้นคลิกปุ่ม OK
รูปแสดงการเลือกฟิลด์ employeeid จาก Recordset
6. บันทึกไฟล์ list.php ก็เป็นเสร็จขั้นตอนการกำหนดการส่งค่า URL Parameter
dulyawat@hotmail.com การสร้างระบบแสดงผลข้อมูล 62

14. dulyawat@hotmail.com การสร้างระบบแสดงผลข้อมูล 63
7. ขั้นตอนสุดท้ายคือกำหนดให้ไฟล์ detail.php รับค่า URL Parameter ที่ส่งมาจากไฟล์ list.php ซึ่งวิธีการทำนั้น เราได้ทำ
ผ่านมาแล้วให้ย้อนกลับไปดูในขั้นตอน "การค้นหาข้อมูลที่ต้องการแสดงรายละเอียดทีละ 1 เร็คคอร์ด" จะเห็นได้ว่า เรา
ได้มีการเรียกใช้ URL Parameter “empid” ซึ่งก็คือค่า URL Parameter ที่ส่งไปจากไฟล์ list.php นั่นเอง
(9) การใช้งานระบบแสดงผลข้อมูล
เริ่มต้นโดยใช้โปรแกรม Dreamweaver เปิดไฟล์ list.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer จะถูก
เปิดขึ้นมาเรียกใช้งานไฟล์ list.php ให้ทดสอบคลิกที่ข้อมูล ชื่อ-นามสกุลของพนักงานแต่ละคน จะปรากฏหน้าเว็บเพจแสดง
รายละเอียดประวัติข้อมูลพนักงานทีละคน