Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

0

Share

Dw ch08 display_records

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Dw ch08 display_records

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

Views

Total views

874

On Slideshare

0

From embeds

0

Number of embeds

540

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×