Chapter VI : การบันทึกข้อมูลผ่านเว็บเพจ

งานนำเสนอเรื่อง: "Chapter VI : การบันทึกข้อมูลผ่านเว็บเพจ"— ใบสำเนางานนำเสนอ:

1 Chapter VI : การบันทึกข้อมูลผ่านเว็บเพจ

2 Over view Insert form data insert.php query database

3 นอกจากการใช้ phpMyadmin ในการบันทึกข้อมูลในฐานข้อมูลแล้ว ยังสามารถ ประยุกต์ใช้คำสั่งของ php ช่วยในการบันทึกข้อมูลตัวอักขระ หรือ แม้กระทั่งข้อมูลภาพ ได้อีกด้วย เพื่อความเข้าใจขั้นต้น ในตัวอย่างต่อไปนี้ จะเป็นการบันทึกข้อมูลในลักษณะพื้นฐานก่อน (ยังไม่จัดการข้อมูลภาพ) สร้างฟอร์มบันทึกข้อมูล 1. ไฟล์ connect.php 2. หน้าเว็บเพจแสดงข้อมูล list.php 3. ตารางที่มีข้อมูล nisit ในฐานข้อมูล prg2x 4. ฟอร์มรับข้อมูล form_insert.php 5. หน้าเว็บเพจบันทึกข้อมูลสู่ฐานข้อมูล insert.php

4 Step:1 สร้าง form_insert.php 1. ก่อนเริ่มสร้างฟอร์มรับข้อมูล พิจารณาตาราง nisit ก่อนในเบื้องต้นว่ามีการเก็บข้อมูลอะไร และ ข้อมูลที่จำเป็นต้องป้อน ได้แก่ฟิลด์ไหนบ้าง 2. ฟิลด์ aid มีคุณสมบัติเพิ่มข้อมูลตัวเลขอัตโนมัติ ดังนั้นหากมีการเพิ่มข้อมูลระเบียนใหม่ ไม่จำเป็นต้องป้อน ค่าสำหรับฟิลด์นี้

5 Step:2 3. ฟิลด์ x เป็นข้อมูลเกี่ยวกับเพศ กรณีของข้อมูลที่ต้องการคือ male แทน เพศชาย หรือ female แทน เพศหญิง และในการรับข้อมูลที่มีตัวเลือกในลักษณะนี้ สามารถใช้ radiobutton เพื่อเป็นตัวเลือกให้ง่ายต่อการป้อนข้อมูล จำเป็นต้องมี 4. ตั้งชื่อให้ radiobutton นี้เป็น fx (ทั้ง 2 ออปเจ็ค) โดยมี value ต่างกันคือ female และ male ในเบื้องต้นควรกำหนดค่าเริ่มต้นไว้ให้เพื่อป้องกันไม่ให้ผู้ใช้ลืมให้ข้อมูลสำหรับส่วนนี้ โดยการกำหนด ให้มีสถานะเป็น checked ในเพศ male หรือ female ไว้ก่อน

6 Step:3 5. ฟิลด์ nid ใช้จัดเก็บข้อมูลรหัสนิสิต ตั้งชื่อออปเจ็คเป็น fnid ไม่ต้องกำหนด value จำเป็นต้องมี 6. ฟิลด์ fname สำหรับจัดเก็บ คำนำหน้าชื่อ ชื่อ และ นามสกุล ตั้งชื่อออปเจ็คเป็น ffname ไม่ต้องกำหนด value

7 Step:4 7. ฟิลด์ note สำหรับเก็บข้อความจากผู้ดูแลระบบ ซึ่งไม่จำเป็นต้องรับข้อมูลจากผู้ใช้ ไม่จำเป็นต้องป้อน 8. ฟิลด์ tel สำหรับเก็บข้อมูลหมายเลขโทรศัพท์ ตั้งชื่อสำหรับออปเจ็คนี้เป็น ftel จำเป็นต้องมี 9. ฟิลด์ mail สำหรับเก็บข้อมูลอีเมลล์ ตั้งชื่อสำหรับออปเจ็คนี้เป็น fmail

8 Step:5 10. ฟิลด์ pic สำหรับเก็บชื่อและนามสกุล(ชนิด) ของภาพ ตั้งชื่อออปเจ็คเป็น fpic จำเป็นต้องมี 11. สร้าง 2 button ที่มี type=“submit” และ type=“reset”

9 Step:6 12. เขียนแท็กฟอร์ม ครอบตารางนี้ โดยส่วนเปิดแท็ก มีคำสั่งคือ <form enctype=“multipart/form-data” method=“post” action=“insert.php”> * ส่วนของการกำหนด enctype ใช้เมื่อมีการส่งข้อมูลขนาดใหญ่ (ภาพ ไฟล์ เป็นต้น) * การส่งข้อมูลขนาดใหญ่ จะต้องใช้ method=“post” เท่านั้น

10 ตัวอย่างโค้ด form_insert.php

11 ตัวอย่างโค้ด form_insert.php (ต่อ)

12 Step:7 สร้าง insert.php 1. สร้างไฟล์ใหม่ 1 ไฟล์ และบันทึกชื่อ insert.php * ไฟล์นี้ต้องถูกบันทึกไว้ในโฟลเดอร์เดียวกันกับ ไฟล์ connect.php , form_insert.php และ list.php 2. เรียกขอการเชื่อมต่อ เซิฟเวอร์และฐานข้อมูล ด้วยคำสั่ง include (“connect.php”); 3. ทำการรับค่าทั้งหมด ที่ถูกส่งมาจากหน้า form_insert.php $px =$_POST[“fx”]; $pnid =$_POST[“fnid”]; $pfname =$_POST[“ffname”]; $ptel =$_POST[“ftel”]; $pmail =$_POST[“fmail”]; * ยังไม่ทำการรับตัวแปรภาพ เนื่องจากต้องใช้ชุดคำสั่งพิเศษ

13 Step:8 4. เขียนคำสั่งในการบันทึกสู่ฐานข้อมูล ตามลำดับฟิลด์ ด้วยคำสั่ง $q=mysql_query(“insert into nisit values(‘ ’,’$px’,’$pnid’,’$pfname’,‘ ’, ’$ptel’,’$pmail’,’ ’)”); 5. ตรวจสอบตัวแปร $q ว่าประมวลผลได้หรือไม่ เพื่อเลือกทำต่อ มีรูปแบบดังนี้ if(!$q) { // สิ่งที่ให้ทำเมื่อ ไม่สามารถป้อนข้อมูลได้ } else { // สิ่งที่ให้ทำเมื่อ ป้อนข้อมูลได้ }

14 Step:9 ตัวอย่างโค้ดในส่วนของการเลือกทำ 6. กำหนดสิ่งที่ต้องทำเมื่อ ป้อนข้อมูลไม่ได้ จากโค้ดตัวอย่าง กำหนดให้ตัวแปร $msg เก็บข้อความ Fail to insert… แล้วประวิงเวลา 1 วินาที ก่อนจะกลับไปยังหน้า list.php พร้อมกับตัวแปรแฝง msg (ตัวแปรที่เก็บข้อความ) 7. สิ่งที่ต้องทำเมื่อ ป้อนข้อมูลสำเร็จ กำหนดให้ตัวแปร $msg เก็บข้อความ Record has been added ! แล้วประวิงเวลา 1 วินาที ก่อนจะกลับไปยังหน้า list.php พร้อมกับตัวแปรแฝง msg (ตัวแปรที่เก็บข้อความ)

15 Step:10 8. ปิดการเชื่อมต่อ สำหรับเพจ insert.php ด้วยคำสั่ง mysql_close($connect); 9. เปิดไฟล์ list.php เพื่อแก้ไขให้แสดงข้อความ จาก insert.php ที่มีการส่งตัวแปร msg แฝงมากับ url จากโค้ด “list.php?msg=$msg” ซึ่งเป็นลักษณะการส่งค่าแบบ GET 10. ทำการรับ และแสดงข้อความจากตัวแปร msg ในส่วนบนของตาราง ด้วยคำสั่ง echo $_GET[“msg”];

16 ตัวอย่างโค้ด insert.php