บทที่ 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