Knowledge 4 You.

ระบบเพิ่มข้อมูล คือเว็บเพจที่ทำหน้าที่ในการรับข้อมูลจากผู้ใช้ผ่านฟอร์ม และบันทึกการกรอกข้อมูลเข้าจัดเก็บในฐานข้อมูล ในที่นี้จะประกอบด้วยไฟล์ 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

ค่าของไดอะล็อก

ค่าที่กำหนด

ตารางแสดงการกำหนด 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