Graphic ComScienceบทที่ 12 |
ระบบแก้ไขข้อมูล คือระบบเว็บเพจที่จัดทำขึ้นเพื่อให้ผู้ใช้สามารถเรียกดูข้อมูลเร็คคอร์ดเดิมจากตารางของฐานข้อมูล และผู้ใช้สามารถแก้ไขปรับปรุงข้อมูลให้เป็นปัจจุบัน หลังจากนั้นก็สามารถบันทึกข้อมูลที่แก้ไขแล้วลงในตารางของฐานข้อมูลได้
รูปแสดงไฟล์ที่เกี่ยวข้องในระบบแก้ไขข้อมูล
ระบบแก้ไขข้อมูลที่จะยกตัวอย่างนี้ ประกอบด้วยไฟล์ 2 ไฟล์ ดังรูป
? update.php ประกอบด้วย ฟอร์มสำหรับแสดงข้อมูลเดิมเพื่อให้ผู้ใช้ปรับปรุงแก้ไขข้อมูล
และ สคริปต์ PHP สำหรับจัดเก็บข้อมูลที่แก้ไขปรับปรุงแล้วลงตารางของฐานข้อมูล
? updateok.php สำหรับแสดงข้อความแจ้งผลการแก้ไขปรับปรุงข้อมูล
ขั้นตอนการสร้างระบบแก้ไขข้อมูลที่ยกมาอธิบายในที่นี้ แบ่งเป็นขั้นตอนดังต่อไปนี้
1. การสร้างฟอร์มสำหรับแก้ไขข้อมูล
2. การสร้าง recordset สำหรับค้นหาข้อมูลเร็คคอร์ดที่ต้องการแก้ไข
3. การแทรกสคริปต์สำหรับแสดงข้อมูลเดิมในฟอร์ม HTML
4. การแทรก Update Record Server Behavior ลงในเว็บเพจ
5. การส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแก้ไข
6. การแสดงผลการแก้ไขข้อมูล
7. การใช้งานระบบแก้ไขข้อมูล
(1) การสร้างฟอร์มสำหรับแก้ไขข้อมูล |
ขั้นตอนแรกนี้ จะเป็นการแทรกฟอร์มลงไปในเว็บเพจ สำหรับเป็นแบบฟอร์มเพื่อแสดงผลข้อมูลปัจจุบัน และผู้ใช้งานเว็บแอพพลิเคชั่นสามารถแก้ไขข้อมูล และบันทึกการแก้ไขลงในฐานข้อมูลได้
ขั้นตอนการสร้างฟอร์มสำหรับแก้ไขข้อมูล:
1. เริ่มต้นที่โปรแกรม Dreamweaver MX คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General คลิกเลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ update.php
2. แทรกฟอร์ม HTML สำหรับแก้ไขข้อมูลลงในเว็บเพจ โดยให้มีข้อความและชื่ออ็อบเจ็คต์ของฟอร์ม ดังรูป
รูปแสดงแบบฟอร์มสำหรับแก้ไขข้อมูล
NOTE: เปิดไฟล์ htmlform.htm จากขั้นตอนการสร้างฟอร์ม HTML หรือ \PHPWEB\labs\solutions\lab03_htmlform\htmlform.htm ขึ้นมาแล้วบันทึกเป็นไฟล์ PHPWEB\update.php (หากปรากฏไดอะล็อก Update Links? ให้คลิก No) |
3. ปรับแต่งรูปแบบของเว็บเพจโดยการแทรกไฟล์รูปภาพ และ ข้อความ
o กำหนด Document Title เป็น "Update an employee record" (ดังรูป)
o หัวข้อของเว็บเพจ ให้ใช้ไฟล์ images/title_update.gif (ดังรูป)
4. หน้าจอ Dreamweaver MX ที่เปิดไฟล์ update.php ให้ทำการกำหนดชื่อของฟอร์ม โดยคลิกแท็ก <FORM> ที่ Tag Selector
รูปแสดงการคลิกเลือกแท็ก <FORM> จาก Tag Selector
5. เปิดไดอะล็อก Properties โดยคลิกเมนู Window > Properties หลังจากนั้นให้พิมพ์ชื่อฟอร์ม frmUpdate ที่ช่อง Form name
รูปแสดง Property ของแท็ก <FORM>
ค่าของไดอะล็อก |
ค่าที่กำหนด |
Form name |
fmUpdate |
ตารางแสดงการกำหนด Property ของแท็ก <FORM>
จะเห็นได้ว่า ในการกำหนดคุณสมบัติของฟอร์ม HTML เรากำหนดเฉพาะคุณสมบัติในช่อง Form Name เท่านั้น ส่วนคุณสมบัติในช่องอื่นๆ ในขั้นตอนต่อไป Dreamweaver MX จะกำหนดให้เราเองโดยอัตโนมัติ
(2) การสร้าง recordset สำหรับค้นหาข้อมูลเร็คคอร์ดที่ต้องการแก้ไข |
ขั้นตอนนี้จะเป็นการค้นหาข้อมูลเร็คคอร์ดที่ต้องการแก้ไขเพื่อนำเอามาแสดงในฟอร์ม เป็นการแสดงสถานะของข้อมูลปัจจุบัน ก่อนที่จะมีการแก้ไขปรับปรุงข้อมูล
ขั้นตอนการสร้าง recordset สำหรับค้นหาข้อมูลเร็คคอร์ดที่ต้องการแก้ไข:
1. คลิกที่เมนู Window > Server Behaviors หลังจากนั้นให้คลิกปุ่มเครื่องหมายบวก |
รูปแสดงการคลิกเลือกเมนู Recordset จาก Server Behaviors |
2. เมื่อปรากฏไดอะล็อก Recordset ขึ้นมา ให้กำหนดค่าต่างๆ ดังรายละเอียดข้างล่างนี้ หลังจากนั้นคลิกปุ่ม OK
รูปแสดงไดอะล็อก Recordset |
|
3. บันทึกไฟล์ update.php
(3) การแสดงข้อมูลเดิมในฟอร์ม HTML |
การแสดงข้อมูลลงในฟอร์ม ก็คือการแทรกสคริปต์สำหรับนำเอาฟิลด์จากการสร้าง Recordset ในขั้นตอนการค้นหาข้อมูลมาแสดงผลในฟอร์มของเว็บเพจ เพื่อแสดงข้อมูลปัจจุบัน ก่อนที่จะแก้ไขปรับปรุง โดยวิธีการจะคล้ายกับขั้นตอนการทำระบบแสดงผลข้อมูลในไฟล์ detail.php
ขั้นตอนการแทรกสคริปต์สำหรับแสดงข้อมูลเดิมในฟอร์ม HTML:
1. เริ่มต้นเปิดโปรแกรม Dreamweaver MX ไปที่ไฟล์ update.php คลิกที่เมนู Window > Bindings หลังจากนั้นให้คลิกเครื่องหมายบวก 
หน้ารายการ Recordset (rsEmp) จะปรากฏชื่อฟิลด์ ให้คลิกเลือกและแทรกฟิลด์ลงในอ็อบเจ็คต์ของฟอร์มเพื่อแสดงผลข้อมูล ดังรูปด้านล่าง
รูปการแสดงผลข้อมูลในฟอร์ม (Bindings)
2. บันทึกไฟล์ update.php ก็เป็นอันเสร็จการแสดงผลข้อมูลลงในฟอร์ม
| (4) การแทรก Update Record Server Behavior ลงในเว็บเพจ |
การแทรก Update Record Server Behavior ก็คือการแทรกสคริปต์ PHP เพื่อสั่งให้บันทึกการแก้ไขข้อมูลลงตารางของฐานข้อมูล
ขั้นตอนการแทรก Update Record Server Behavior ลงในเว็บเพจ:
1. เริ่มต้นที่โปรแกรม Dreamweaver MX เปิดไฟล์ update.php หลังจากนั้นให้คลิกเม้าส์ที่ตำแหน่งใดๆ ภายใต้เส้นประสีแดง ที่เป็นขอบเขตของฟอร์ม
2. คลิกเมนู Insert > Form > Hidden Field หลังจากนั้นคลิกเม้าส์ที่อ็อบเจ็คต์ Hidden Field จะปรากฏไดอะล็อก Properties ของ Hidden Field (หากไม่ปรากฏไดอะล็อก Properties ให้คลิกที่เมนู Windows > Properties) และให้กำหนดค่าในไดอะล็อกดังต่อไปนี้
รูปแสดงการกำหนด Property ของ Hidden Field "key_empid"
ค่าของไดอะล็อก |
ค่าที่กำหนด |
HiddenField |
key_empid |
Value |
<?php echo $row_rsEmp[‘employeeid’]; ?> |
ตารางแสดงการกำหนด Property ของ Hidden Field "key_empid"
3. เปิดแถบ Server Behaviors โดยคลิกเมนู Window > Server Behaviors แล้วคลิกที่ปุ่มเครื่องหมายบวก เลือกรายการUpdate Record จากเมนู
ตารางแสดง Update Record Server Behaviors
4. เมื่อปรากฏไดอะล็อก Update Record ให้กำหนดค่าต่างๆ มีดังต่อไปนี้
รูปแสดงการกำหนดค่าต่างๆ ในไดอะล็อก Update Record
ค่าของไดอะล็อก |
ค่าที่กำหนด |
Submit Values From |
fmUpdate |
Connection |
dbconn |
Update Table |
employees |
Columns |
จับคู่ฟิลด์ของฐานข้อมูลกับอ็อบเจ็คต์ของฟอร์มดังต่อไปนี้ employeeid -> FORM.key_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
4. บันทึกไฟล์ update.php ก็เป็นอันเสร็จขั้นตอนการแทรก Update Record Server behavior
(5) การส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแก้ไข |
ขั้นตอนนี้ ก็คือการทำให้ไฟล์เว็บเพจ 2 ไฟล์ list.php และ update.php สามารถเชื่อมโยงเพื่อส่งและรับค่า URL Parameter กันได้นั่นเอง
ขั้นตอนการส่งและรับค่า URL Parameter เพื่อระบุเร็คคอร์ดที่ต้องการแก้ไข:
1. เริ่มต้นที่โปรแกรม Dreamweaver MX เปิดไฟล์ list.php ขึ้นมา แล้วลากเม้าส์ทำไฮไลต์ข้อความ "แก้ไข" ดังรูป
รูปแสดงการไฮไลต์ข้อความ "แก้ไข"
2. เปิดไดอะล็อก Properties โดยคลิกที่เมนู Window > Properties จะปรากฏไดอะล็อก Properties ขึ้นมา ให้คลิกไอคอนรูป Folder สีเหลือง (Browse for File) ที่ตำแหน่งช่อง Link เพื่อสร้างไฮเปอร์ลิงค์สำหรับ URL Parameter ไปหาไฟล์ update.php
รูปแสดง Property ของลิงค์ "แก้ไข"
3. เมื่อปรากฏไดอะล็อก Select File ขึ้นมา ให้คลิกเลือกไฟล์ update.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. ขั้นตอนสุดท้ายคือกำหนดให้ไฟล์ update.php รับค่า URL Parameter ที่ส่งมาจากไฟล์ list.php ซึ่งวิธีการทำนั้น เราได้ทำผ่านมาแล้วให้ย้อนกลับไปดูในขั้นตอน “การสร้าง recordset สำหรับค้นหาข้อมูลเร็คคอร์ดที่ต้องการแก้ไข" จะเห็นได้ว่า เราได้มีการเรียกใช้ URL Parameter “empid” ซึ่งก็คือค่า URL Parameter ที่ส่งไปจากไฟล์ list.php นั่นเอง
(6) การแสดงผลลัพธ์การแก้ไขข้อมูล |
ขั้นตอนสุดท้ายของระบบแก้ไขข้อมูลคือ การสร้างไฟล์แสดงผลการทำงาน ซึ่งจะประกอบด้วยข้อความ แสดงให้ผู้ใช้ทราบว่าการแก้ไขข้อมูลเสร็จเรียบร้อยแล้วเท่านั้น ให้สร้างเว็บเพจขึ้นมาและพิมพ์ข้อความสำหรับแสดงผลการแก้ไขข้อมูล บันทึกเป็นไฟล์ updateok.php
รูปแสดงการสร้างไฟล์ updateok.php
(7) การใช้งานระบบแก้ไขข้อมูล |
เริ่มต้นโดยใช้โปรแกรม Dreamweaver MX เปิดไฟล์ list.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ list.php หลังจากนั้นให้คลิกปุ่ม "แก้ไข" เพื่อแก้ไขข้อมูลแต่ละเร็คคอร์ด เสร็จแล้วคลิกปุ่ม Update เพื่อบันทึกข้อมูล รอดูผลที่จะแสดงจากไฟล์ updateok.php
