Graphic ComScienceบทที่ 11การสร้างระบบเพิ่มข้อมูล |
ระบบเพิ่มข้อมูล คือเว็บเพจที่ทำหน้าที่ในการรับข้อมูลจากผู้ใช้ผ่านฟอร์ม และบันทึกการกรอกข้อมูลเข้าจัดเก็บในฐานข้อมูล ในที่นี้จะประกอบด้วยไฟล์ 2 ไฟล์ ดังรูป
รูปแสดงไฟล์ที่เกี่ยวข้องกับระบบเพิ่มข้อมูล
? insert.php ประกอบด้วยฟอร์มสำหรับเป็นแบบฟอร์มกรอกข้อมูลและสคริปต์สำหรับจัดเก็บข้อมูลลงตารางของฐานข้อมูล
? insertok.php ประกอบด้วยข้อความแสดงผลการเพิ่มข้อมูล
ขั้นตอนการสร้างระบบเพิ่มข้อมูลที่ยกมาอธิบายในที่นี้ แบ่งเป็นขั้นตอนดังต่อไปนี้
1. การสร้างฟอร์มกรอกข้อมูล
2. การแทรก Insert Record Server Behavior ลงในเว็บเพจ
3. การสร้างเว็บเพจแสดงผลลัพธ์การเพิ่มข้อมูล
4. การใช้งานระบบเพิ่มข้อมูล
(1) การสร้างฟอร์มกรอกข้อมูล |
การสร้างฟอร์มกรอกข้อมูล คือ ขั้นตอนการสร้างแบบฟอร์มให้ผู้ใช้เว็บแอพพลิเคชั่น นำข้อมูลมากรอกในแบบฟอร์ม และส่งข้อมูลไปประมวลผลบนแอพพลิเคชั่นเซิร์ฟเวอร์ เพื่อบันทึกลงตารางของฐานข้อมูล
ขั้นตอนการสร้างฟอร์มกรอกข้อมูล:
1. เริ่มต้นที่โปรแกรม Dreamweaver MX คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General คลิกเลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ insert.php
2. แทรกฟอร์ม HTML สำหรับกรอกข้อมูลลงในเว็บเพจ โดยให้มีข้อความและชื่ออ็อบเจ็คต์ของฟอร์ม ดังรูป
รูปแสดงแบบฟอร์มกรอกข้อมูล
NOTE: เปิดไฟล์ htmlform.htm จากขั้นตอนการสร้างฟอร์ม HTML หรือ \PHPWEB\labs\solutions\lab03_htmlform\htmlform.htm ขึ้นมาแล้วบันทึกเป็นไฟล์ PHPWEB\insert.php (หากปรากฏไดอะล็อก Update Links? ให้คลิก No) |
3. หน้าจอ Dreamweaver MX ที่เปิดไฟล์ insert.php ให้ทำการกำหนดชื่อของฟอร์ม โดยคลิกแท็ก <FORM> ที่ Tag Selector
รูปแสดงการคลิกเลือกแท็ก <FORM> จาก Tag Selector
4. เปิดไดอะล็อก Properties โดยคลิกเมนู Window > Properties หลังจากนั้นให้พิมพ์ชื่อฟอร์ม frmAdd ที่ช่อง Form name
ค่าของไดอะล็อก |
ค่าที่กำหนด |
Form name |
fmAdd |
ตารางแสดงการกำหนด Property ของแท็ก <FORM>
รูปแสดง Property ของแท็ก <FORM>
จะเห็นได้ว่า ในการกำหนดคุณสมบัติของฟอร์ม เราไม่จำเป็นต้องกำหนดค่าใดๆ ในช่อง Action และ Method เนื่องจากในขั้นตอนต่อไป Dreamweaver MX จะสร้างให้เราเองโดยอัตโนมัติ
(2) การแทรก Insert Record Server Behavior ลงในเว็บเพจ |
การแทรก Insert Record Server Behavior เป็นการแทรกสคริปต์ PHP เพื่อบันทึกข้อมูลลงตารางของฐานข้อมูล
ขั้นตอนการแทรก Insert Record Server Behavior ลงในเว็บเพจ:
1. เปิดแถบ Server Behaviors โดยคลิกเมนู Window > Server Behaviors แล้วคลิกที่ปุ่มเครื่องหมายบวก 
เลือกรายการ
Insert Record จากเมนู
ดังรูป
รูปแสดงการคลิกเลือกเมนู Insert Record จาก Server Behaviors
2. เมื่อปรากฏไดอะล็อก Insert Record ขั้นตอนต่อจากนี้ ก็จะเป็นการกำหนดค่าในไดอะล็อก Insert Record ซึ่งรายละเอียดการกำหนดค่าต่างๆ มีดังต่อไปนี้
รูปแสดงไดอะล็อก Insert Record
ค่าของไดอะล็อก |
ค่าที่กำหนด |
Submit Values From |
fmAdd |
Connection |
dbconn |
Insert Table |
employees |
Columns |
จับคู่ฟิลด์ของฐานข้อมูลกับอ็อบเจ็คต์ของฟอร์มดังต่อไปนี้ firstname -> firstname lastname -> lastname birthdate -> birthdate startdate -> startdate deptid -> deptid phone -> phone extension -> extension email -> email notes -> notes photo -> photo |
After Inserting, Go To |
insertok.php |
ตารางแสดงการเลือกฟิลด์จากไดอะล็อก Insert Record เพื่อเพิ่มข้อมูล
3. บันทึกไฟล์ insert.php ก็เป็นอันเสร็จขั้นตอนการแทรก Insert Record Server behavior
(3) การสร้างเว็บเพจแสดงผลลัพธ์การเพิ่มข้อมูล |
ขั้นตอนสุดท้ายของระบบเพิ่มข้อมูลคือ การสร้างไฟล์แสดงผลการทำงาน ซึ่งจะประกอบด้วยข้อความ แสดงให้ผู้ใช้ทราบว่าการกรอกข้อมูลเสร็จเรียบร้อยแล้วเท่านั้น ให้สร้างเว็บเพจขึ้นมาและพิมพ์ข้อความสำหรับแสดงผลการเพิ่มข้อมูล บันทึกเป็นไฟล์ Insertok.php
(4) การใช้งานระบบเพิ่มข้อมูล |
เริ่มต้นโดยใช้โปรแกรม Dreamweaver MX เปิดไฟล์ insert.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ insert.php หลังจากนั้นให้ทดลองกรอกข้อมูลและคลิกปุ่ม Insert เพื่อบันทึกข้อมูล เสร็จแล้วรอดูผลที่จะแสดงจากไฟล์ insertok.php
