Graphic ComScienceบทที่ 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 MX
ขั้นตอน:
1. เริ่มต้นที่โปรแกรม Dreamweaver MX คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General เลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ list.php
2. เลือกเมนู Modify > Page Properties… เมื่อปรากฏไดอะล็อก Page Properties ขึ้นมา ให้กำหนด Properties ของเว็บเพจ ดังรายละเอียดด้านล่างนี้ หลังจากนั้นคลิกปุ่ม OK
ค่าของไดอะล็อก |
ค่าที่กำหนด |
Title |
List Employees |
Background Image |
images/bkg_list.gif |
Encoding |
Thai (Windows) |
ตารางแสดงการกำหนดค่าในไดอะล็อก Page Properties
3. แทรกตาราง HTML สำหรับแสดงผล โดยคลิกเมนู Insert > Table เมื่อปรากฏไดอะล็อก Table ขึ้นมา ให้กำหนดค่าดังนี้
ค่าของไดอะล็อก |
ค่าที่กำหนด |
Rows |
3 |
Columns |
4 |
Table width |
95 percent |
Border thichness |
1 pixels |
Cell padding |
1 |
Cell spacing |
1 |
ตารางแสดงการกำหนดค่าในไดอะล็อก Table
รูปแสดงการกำหนดค่าในไดอะล็อก Table
4. ปรับแต่งตารางโดยการแทรกไฟล์รูปภาพ และข้อความลงในตารางและส่วนต่างๆ ของเว็บเพจ
เมื่อเสร็จแล้วจะได้เว็บเพจ ดังรูปด้านล่าง
รูปแสดงหน้าเว็บเพจ 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 |
(3) การแทรกสคริปต์สำหรับแสดงผลข้อมูลลงในเว็บเพจ |
การแทรกสคริปต์สำหรับแสดงผลข้อมูล ก็คือการแทรกสคริปต์ PHP สำหรับนำเอาข้อมูลจากเร็คคอร์ดเซ็ตที่ได้จากขั้นตอนที่แล้ว มาแสดงผลข้อมูลในเว็บเพจ
ขั้นตอน:
1. คลิกไปที่เมนู Windows > Bindings หลังจากนั้นให้คลิกเครื่องหมายบวก 
หน้ารายการ Recordset (rsEmp) จะปรากฏชื่อฟิลด์ของตารางในฐานข้อมูล ให้คลิกเลือกและแทรกฟิลด์ลงเว็บเพจ เพื่อแสดงผลข้อมูล ตามขั้นตอน ดังรูปด้านล่าง
คอลัมน์ของตาราง |
ฟิลด์ของ Recordset (rsEmp) |
ชื่อ-นามสกุล |
firstname, lastname |
แผนก |
deptid |
โทรศัพท์ |
phone , extension |
ตารางแสดงการเลือกฟิลด์จากเร็คคอร์ดเซ็ตวางลงในเว็บเพจ
รูปแสดงการเลือกฟิลด์จากเร็คคอร์ดเซ็ตวางลงในเว็บเพจ
2. บันทึกไฟล์ list.php
3. สามารถทดสอบดูผลการทำงานได้ โดยกดปุ่ม F12 จากหน้าจอ Dreamweaver MX
(4) การตรวจสอบว่ามีข้อมูลสำหรับแสดงผลหรือไม่ |
การตรวจสอบข้อมูลก่อนการแสดง จะเป็นขั้นตอนที่ช่วยให้เว็บแอพพลิเคชั่นน่าใช้ยิ่งขึ้น หากการตรวจสอบไม่พบข้อมูลที่จะแสดงผล ควรมีข้อความแจ้งผู้ใช้งานว่า “ไม่มีข้อมูลแสดงผล”
ขั้นตอน:
1. คลิกที่แถบ Application > Server Behaviors หรือไปที่เมนู Window > Server Behaviors หลังจากนั้นให้คลิกเครื่องหมายบวก เพื่อเลือกเมนู Repeat Region > Show If Recordset Is Not Empty 
รูปการกำหนดการตรวจสอบว่ามีข้อมูลหรือไม่
รูปการเลือกเมนู Server Behaviors เพื่อตรวจสอบว่ามีข้อมูลหรือไม่
(5) การวนลูปแสดงผลซ้ำ (Repeat) |
ในขั้นตอนที่แล้ว หากลองทดสอบการทำงานของเว็บเพจ จะเป็นว่ามีการแสดงผลข้อมูลออกมาจำนวน 1 เร็คคอร์ด ซึ่งที่จริงแล้ว ข้อมูลอาจจะมีมากกว่า 1 เร็คคอร์ดก็ได้ ดังนั้นในขั้นตอนนี้ จะเป็นการกำหนดให้เว็บเพจแสดงผลวนซ้ำจนกว่าจะครบทุกเร็คคอร์ด
ขั้นตอน:
1. เริ่มต้นที่หน้าจอ Dreamweaver MX เปิดไฟล์ 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 MX คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General คลิกเลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ detail.php
2. แทรกตาราง HTML สำหรับแสดงข้อมูลลงในเว็บเพจ โดยให้มีหน้าเว็บเพจ ดังรูป
รูปแสดงแบบตารางสำหรับแสดงผลข้อมูล
NOTE: |
3. เลือกเมนู Modify > Page Properties เมื่อปรากฏไดอะล็อก Page Properties ขึ้นมา ให้กำหนด Properties ของเว็บเพจ ดังรายละเอียดด้านล่างนี้ หลังจากนั้นคลิกปุ่ม OK
ค่าของไดอะล็อก |
ค่าที่กำหนด |
Title |
Employee Details |
Background Images |
images/bkg_detail.gif |
Document Encoding |
Thai Windows-874 |
4. คลิกที่เมนู Window > Bindings หลังจากนั้นให้คลิกปุ่มเครื่องหมายบวก 
และเลือกรายการ Recordset (Query)
เมื่อปรากฏไดอะล็อก Recordset ขึ้นมา ให้กำหนดค่าต่างๆ ดังรายละเอียดข้างล่างนี้ หลังจากนั้นให้คลิกปุ่ม OK
รูปแสดงไดอะล็อก Recordset |
|
5. บันทึกไฟล์ detail.php
(7) การแทรกสคริปต์สำหรับแสดงผลข้อมูลทีละ 1 เร็คคอร์ดลงในเว็บเพจ |
การแทรกสคริปต์ในขั้นตอนนี้ จะกระทำในไฟล์ detail.php จะเป็นการแทรกสคริปต์สำหรับนำเอาฟิลด์จากการสร้าง Recordset ในขั้นตอนการค้นหาข้อมูลที่ต้องการแสดงรายละเอียดทีละ 1 เร็คคอร์ด มาแสดงผลในเว็บเพจ โดยวิธีการจะคล้ายกับขั้นตอนการทำไฟล์ list.php
ขั้นตอนการแทรกสคริปต์สำหรับแสดงผลข้อมูลทีละ 1 เร็คคอร์ดลงในเว็บเพจ:
1. เริ่มต้นที่ไฟล์ detail.php คลิกที่เมนู Window > Bindings หลังจากนั้นให้คลิกเครื่องหมายบวก หน้ารายการ Recordset (rsEmp) จะปรากฏชื่อฟิลด์ ให้คลิกเลือกและแทรกฟิลด์ลงเว็บเพจ เพื่อแสดงผลข้อมูล ตามขั้นตอนที่เคยทำในไฟล์ list.php ที่ผ่านมา ดังรูป
รูปการแสดงผลข้อมูลในตาราง (Bindings)
2. สำหรับฟิลด์ 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 MX เปิดไฟล์ list.php ขึ้นมา แล้วลากเม้าส์ทำไฮไลต์ตำแหน่งแสดงผลฟิลด์ firstname และ lastname ดังรูป
รูปแสดงการลากเม้าส์ทำไฮไลต์ฟิลด์ firstname และ lastname
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
รูปแสดงขั้นตอนการสร้างลิงค์ พร้อมกับการกำหนด "Parameters…"
4. เมื่อปรากฏไดอะล็อก Parameters ขึ้นมา ที่ช่อง Name ให้พิมพ์ชื่อ URL Parameter ที่ต้องการจะส่งไป ในที่นี้ให้เราพิมพ์ empid หลังจากนั้นให้ไปที่ช่อง Value เพื่อกำหนดค่าที่จะส่งไป ในที่นี้เราต้องการกำหนดค่าให้เปลี่ยนไปแบบ Dynamic ตามข้อมูลที่แสดงในแต่ละเร็คคอร์ด ให้คลิกปุ่ม Dynamic Data ที่ช่อง Value
รูปแสดงขั้นตอนการสร้างลิงค์ พร้อมกับการกำหนด "Parameters…"
ค่าของไดอะล็อก |
ค่าที่กำหนด |
Name |
empid |
Value |
<?php echo $row_rsEmp['employeeid']; ?> |
ตารางแสดงการกำหนดค่า URL Parameter ในไดอะล็อก “Parameters”
5. เมื่อปรากฏไดอะล็อก Dynamic Data ขึ้นมา ให้คลิกเลือกฟิลด์ employeeid จาก Recordset (rsEmp)
หลังจากนั้นคลิกปุ่ม OK
รูปแสดงการเลือกฟิลด์ employeeid จาก Recordset
6. บันทึกไฟล์ list.php ก็เป็นเสร็จขั้นตอนการกำหนดการส่งค่า URL Parameter
7. ขั้นตอนสุดท้ายคือกำหนดให้ไฟล์ detail.php รับค่า URL Parameter ที่ส่งมาจากไฟล์ list.php ซึ่งวิธีการทำนั้น เราได้ทำผ่านมาแล้วให้ย้อนกลับไปดูในขั้นตอน "การค้นหาข้อมูลที่ต้องการแสดงรายละเอียดทีละ 1 เร็คคอร์ด" จะเห็นได้ว่า เราได้มีการเรียกใช้ URL Parameter “empid” ซึ่งก็คือค่า URL Parameter ที่ส่งไปจากไฟล์ list.php นั่นเอง
(9) การใช้งานระบบแสดงผลข้อมูล |
เริ่มต้นโดยใช้โปรแกรม Dreamweaver MX เปิดไฟล์ list.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ list.php ให้ทดสอบคลิกที่ข้อมูล ชื่อ-นามสกุลของพนักงานแต่ละคน จะปรากฏหน้าเว็บเพจแสดงรายละเอียดประวัติข้อมูลพนักงานทีละคน
