การส่งข้อมูลผ่านแบบ Form หน้าเว็บ

การส่งข้อมูลผ่านแบบ Form หน้าเว็บ

ผมเชื่อว่าต้องมีคนเคยสงสัยเหมือนผมแน่ๆเลย ว่าแบบ form หน้าเว็บนั้น ทำงานอย่างไร เราจะทำเองได้หรือไม่ ยากหรือเปล่า.... คำตอบก็คือ ทำเองได้ง่าย ไม่ยาก วันนี้ก็จะมาบอกวิธีการสร้าง และการใช้งานกันแบบละเอียดเลยครับ

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

ซึ่ง อาจจะเป็นที่น่าตกใจสำหรับมือใหม่เอาสักหน่อย เพราะว่า งานนี้ต้องใช้ภาษา php แล้วล่ะครับ แต่ไม่ต้องตกใจมากไปครับ เพราะว่าเราจะเอามาใช้งานให้ดูแค่คำสั่งพื้นฐานจริงๆ เท่าที่จำเป็นต้องใช้เท่านั้นครับ

เอาล่ะครับ เข้าเรื่องเลยดีกว่า ตอนนี้นะครับ ผมจะมีไฟล์ให้โหลดเพื่อประกอบการศึกษา งานนี้ครับ นั่นก็คือไฟล์ start.htm และไฟล์ input.php นะครับ โดยเมื่อโหลดไป เปิดดูด้วย text editor ทั่วๆไปครับ และเนื่องจากโค้ด ต้องมีภาษา php ด้วย ดังนั้น หากเครื่องไหนยังไม่จำลองเครื่องตัวเองเป็น server ก็ค้นบทความในเว็บเราได้เลยครับเขียนเอาไว้แล้ว หรือใช้ host free ที่รองรับ ภาษา php ทั่วไปก็ได้ทั้งนั้นครับให้ผลที่เหมือนกัน

เรามาเริ่มดูที่ form ที่1(start.htm)

โค้ดฟอร์ม รับค่าจากผู้ใช้งาน

เห็นบรรทัดที่ 2 และ 3 ไหมครับ ว่า มันคือ ช่องการรับข้อมูลตามรูปด้านบน อันที่ 1 และ 2 ตามลำดับครับ โดยที่ผมบอกว่า มีตัวแปรชื่อ name และ surname นั้น ลองสังเกต ที่ name=" ของ input แต่ละตัวสิครับ มันจะชื่อเดียวกับตัวแปรนั่นเองครับ

ตัวแปรคืออะไร? ให้เรามองง่ายๆว่า ตัวแปรเหมือนกล่องเปล่า 1 ใบ เราก็เพียงแค่ตั้งชื่อให้กล่องนั้นชื่อว่า name และ surname เท่านั้น ซึ่ง ข้างในกล่องจะมีอะไรนั้นก็ขึ้นอยู่กับ สิ่งที่เรากรอกลงไปนั่นเอง

ต่อมาในบรรทัดที่ 4 นั้น จะเห็นได้ว่า เป็น input เหมือนกัน แต่ว่า มันคือ submit นั่นคือปุ่มกดนั่นเองครับ

และย้อนไปดูที่บรรทัดแรก ให้สังเกต 2 อย่างครับ ที่จำเป็นจะต้องสนใจ นั่นคือ method และ action ในที่นี้ post เราไม่ต้องเปลี่ยนอะไร แต่ที่เราจะเปลี่ยนเวลาไปใช้งานอื่นนั่นก็คือ input.php นั่นเองครับ มันคือไฟล์ปลายทางที่เราจะส่งค่าไปให้ ด้วยรูปแบบ post ครับ เดี๋ยว post get เราจะกล่าวอีกครั้งในบทความอื่นครับ

และหากดูดีๆ จะไม่มี input ตัวใด อยู่นอกคำสั่ง form เลยนะครับ อยู่ใน tag เปิด และปิด ของ คำสั่ง form ทั้งหมดครับ

ทีนี้เราก็มารันฝั่งรับข้อมูลบ้างครับ หลังจากที่รัน เราก็จะได้ดังนี้ครับ

ผลที่ได้จากการรับค่า

เรามาดูโค้ดครับ ทำไมจึงได้เช่นนี้

โค้ดหน้าที่รับข้อมูลจาก form

จากโค้ดนะครับ ไล่ทีละบรรทัดเลย

1.เป็นคำสั่งเปิดให้รันภาษา php (นามสกุลไฟล์ ต้องเป็น .php ด้วยนะครับ)
2.เป็นการรับค่าจากตัวแปร name ในหน้าก่อนที่ส่งมาให้หน้านี้ เข้ามาเก็บในตัวแปรที่ชื่อ name ในหน้านี้ (รับแบบ POST เพราะส่งมาแบบPOST)
3.เป็นการรับค่าจากตัวแปร surname ในหน้าก่อนที่ส่งมาให้หน้านี้ เข้ามาเก็บในตัวแปรที่ชื่อ surname ในหน้านี้ (รับแบบ POST เพราะส่งมาแบบPOST)
4.แสดงค่าตัวแปร ที่เก็บใน ตัวแปร name (ผมพิมพ์หน้าก่อนว่า ทดสอบชื่อ) และแสดงผล tag ขึ้นบรรทัดใหม่ของ HTML ธรรมดาครับ (อันนี้ไม่เกี่ยวกับ form แค่จัดรูปแบบเฉยๆ)
5.แสดงค่าตัวแปร ที่เก็บใน ตัวแปร surname (ผมพิมพ์หน้าก่อนว่า ทดสอบนามสกุล)
6.คำสั่งปิด การรันภาษา php

เอาล่ะครับ ก็จบกระบวนการการรับส่งค่าที่หน้าเว็บแล้วนะครับ อันนี้แนะนำกันเป็นแค่เบื้องต้นครับ เพื่อทำความเข้าใจกับมันนั่นเอง สำหรับงานแบบนี้ ผมแนะนำให้ใช้ web editor ครับ เช่น dreamweaver จะช่วยในการสร้าง tag สร้างวัตถุได้มากกว่านี้ครับ

สำหรับบางคนที่จะแย้งว่า ฝั่งรับ ไม่ต้องมีบรรทัดที่ 2 กับ3 ก็รันได้ อันนี้ผมก็ไม่เถียงนะครับ แต่!!! บางระบบ จะใช้งานไม่ได้ครับ โดยเฉพาะ ระบบ ที่ register_global = off ... เอาเถอะครับ เดี๋ยวจะงงกันไปใหญ่ เอาเป็นว่าเราเขียนโค้ดที่ใช้ได้กับทุกระบบ ย่อมไม่ดีกว่าเหรอ จริงไหมครับ เพราะว่าผมเจอเยอะมาก ที่คนไทยชอบเขียนโค้ด โดยที่ไม่มีบรรทัดที่ 2 และ 3 แล้วทดสอบแต่ในเครื่องตัวเองใช้งานได้ พอใช้ server จริงกลับใช้ไม่ได้ ก็โทษว่าเป็นที่ server ทั้งที่จริงๆเป็นที่โค้ดเองนั่นล่ะครับ ไม่เขียนให้ครอบคลุมทุกระบบ

Create: Modify : 2007-03-02 07:00:00 Read : 15757 URL :