บทที่ 11 การสร้างระบบเพิ่มข้อมูล

 

 

ระบบเพิ่มข้อมูล คือเว็บเพจที่ทำหน้าที่ในการรับข้อมูลจากผู้ใช้ผ่านฟอร์ม และบันทึกการกรอกข้อมูลเข้าจัดเก็บในฐานข้อมูล
ในที่นี้จะประกอบด้วยไฟล์ 2 ไฟล์ ดังรูป

รูปแสดงไฟล์ที่เกี่ยวข้องกับระบบเพิ่มข้อมูล

• insert.php    ประกอบด้วยฟอร์มสำหรับเป็นแบบฟอร์มกรอกข้อมูลและสคริปต์สำหรับจัดเก็บข้อมูลลงตารางของฐานข้อมูล
  
• insertok.php     ประกอบด้วยข้อความแสดงผลการเพิ่มข้อมูล
  

ขั้นตอนการสร้างระบบเพิ่มข้อมูลที่ยกมาอธิบายในที่นี้ แบ่งเป็นขั้นตอนดังต่อไปนี้

• การสร้างฟอร์มกรอกข้อมูล
  
• การแทรก Insert Record Server Behavior ลงในเว็บเพจ
  
• การสร้างเว็บเพจแสดงผลลัพธ์การเพิ่มข้อมูล
  
• การใช้งานระบบเพิ่มข้อมูล
  

 

(1) การสร้างฟอร์มกรอกข้อมูล

    การสร้างฟอร์มกรอกข้อมูล คือ ขั้นตอนการสร้างแบบฟอร์มให้ผู้ใช้เว็บแอพพลิเคชั่น นำข้อมูลมากรอกในแบบฟอร์ม
และส่งข้อมูลไปประมวลผลบนแอพพลิเคชั่นเซิร์ฟเวอร์ เพื่อบันทึกลงตารางของฐานข้อมูล

ขั้นตอนการสร้างฟอร์มกรอกข้อมูล:

1. เริ่มต้นที่โปรแกรม Dreamweaver คลิกเมนู 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)

 

1. หน้าจอ Dreamweaver ที่เปิดไฟล์ insert.php ให้ทำการกำหนดชื่อของฟอร์ม โดยคลิกแท็ก <FORM> ที่ Tag Selector
   

   
    

   
   

   รูปแสดงการคลิกเลือกแท็ก <FORM> จาก Tag Selector
   
   

2. เปิดไดอะล็อก Properties โดยคลิกเมนู Window > Properties หลังจากนั้นให้พิมพ์ชื่อฟอร์ม fmAdd ที่ช่อง Form name
   

 

ค่าของไดอะล็อก	ค่าที่กำหนด
Form name	fmAdd

ตารางแสดงการกำหนด Property ของแท็ก <FORM>

 

รูปแสดง Property ของแท็ก <FORM>

 

จะเห็นได้ว่า ในการกำหนดคุณสมบัติของฟอร์ม เราไม่จำเป็นต้องกำหนดค่าใดๆ ในช่อง Action และ Method
เนื่องจากในขั้นตอนต่อไป Dreamweaver จะสร้างให้เราเองโดยอัตโนมัติ

 

 

(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

 

 

1. เมื่อปรากฏไดอะล็อก 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 เพื่อเพิ่มข้อมูล

 

1. บันทึกไฟล์ insert.php ก็เป็นอันเสร็จขั้นตอนการแทรก Insert Record Server behavior
   

 

 

(3) การสร้างเว็บเพจแสดงผลลัพธ์การเพิ่มข้อมูล

 

ขั้นตอนสุดท้ายของระบบเพิ่มข้อมูลคือ การสร้างไฟล์แสดงผลการทำงาน ซึ่งจะประกอบด้วยข้อความ แสดงให้ผู้ใช้
ทราบว่าการกรอกข้อมูลเสร็จเรียบร้อยแล้วเท่านั้น ให้สร้างเว็บเพจขึ้นมาและพิมพ์ข้อความสำหรับแสดงผลการเพิ่มข้อมูล
บันทึกเป็นไฟล์ Insertok.php

 

 

(4) การใช้งานระบบเพิ่มข้อมูล

 

เริ่มต้นโดยใช้โปรแกรม Dreamweaver เปิดไฟล์ insert.php ขึ้นมา แล้วกดปุ่ม F12 โปรแกรม Internet Explorer
จะถูกเปิดขึ้นมาเรียกใช้งานไฟล์ insert.php หลังจากนั้นให้ทดลองกรอกข้อมูลและคลิกปุ่ม Insert เพื่อบันทึกข้อมูล
เสร็จแล้วรอดูผลที่จะแสดงจากไฟล์ insertok.php