Full-Stack PHP 8 ตอนที่ 7: การทำฟอร์มรับ-ส่งข้อมูล

บทความนี้เป็นส่วนหนึ่งของซีรีส์ Full-Stack PHP 8 + Bootstrap 5 + MySQL — สร้างเว็บไซต์แบบ Full Stack ตั้งแต่พื้นฐานจนใช้งานได้จริง พร้อมสร้างและเผยแพร่เว็บไซต์ Portfolio ของตนเอง (เรียบเรียงจากคู่มืออบรมของ Wutthiphon Tassana — Wirabyte CO., LTD.) — ตอนที่ 7/10

ที่ผ่านมาเว็บของเราแสดงผลฝ่ายเดียว บทนี้จะทำให้เว็บรับข้อมูลจากผู้ใช้ได้เป็นครั้งแรกผ่านฟอร์ม (Form) เช่น ช่องกรอกชื่อ ช่องข้อความ และปุ่มกด เมื่อผู้ใช้กดปุ่ม ข้อมูลทั้งหมดในฟอร์มจะถูกส่งไปให้ไฟล์ PHP ประมวลผลต่อ

การสร้างฟอร์ม

ฟอร์มสร้างด้วย tag form โดยมี attribute สำคัญที่ต้องกำหนด ดังนี้

action คือไฟล์ปลายทางที่จะรับข้อมูลไปประมวลผล
method คือวิธีส่งข้อมูล มี get และ post
ช่องกรอกทุกช่องต้องมี attribute name เพราะชื่อนี้จะกลายเป็นชื่อสำหรับเรียกข้อมูลในฝั่ง PHP

ตัวอย่าง

<form action="action.php" method="post">
<label>ชื่อ</label>
<input type="text" name="name" class="form-control">
<label>ข้อความ</label>
<textarea name="message" class="form-control"></textarea>
<button type="submit" class="btn btn-primary">บันทึกข้อความ</button>
</form>

ตัวแปรรับข้อมูล $_GET $_POST

ฝั่งไฟล์ที่รับข้อมูล PHP เตรียมตัวแปรพิเศษไว้ให้ 2 ตัวตามวิธีส่งของฟอร์ม เรียกใช้ด้วยชื่อของช่องกรอก เช่น $_POST[‘name’] คือค่าจากช่องที่ตั้ง name=”name” ไว้

ตัวแปร	ความหมาย
$_GET	รับข้อมูลที่แนบมากับ URL มองเห็นได้ เช่น project.php?id=5 เหมาะกับการเปิดดูข้อมูล เพราะคัดลอกลิงก์ส่งต่อได้
$_POST	รับข้อมูลที่ส่งมาแบบไม่แสดงบน URL เหมาะกับการส่งข้อมูลไปบันทึก เช่น ฟอร์มสมัครสมาชิก ฟอร์มเพิ่มผลงาน

ตัวอย่าง

<?php
// รับค่าจากฟอร์มที่ส่งแบบ post
$name = $_POST['name'];
$message = $_POST['message'];
echo "คุณ " . $name . " ส่งข้อความว่า " . $message;
?>
<?php
// รับค่าที่แนบมากับ URL เช่น project.php?id=5
$id = $_GET['id'];
echo "กำลังเปิดดูผลงานหมายเลข " . $id;
?>

การประมวลผลข้อมูลด้วยไฟล์ศูนย์กลาง และการส่งต่อหน้าด้วย header Location

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

เส้นทางของข้อมูลจากฟอร์ม ผ่านไฟล์ประมวลผล จนกลับมาแสดงบนหน้าเว็บ

ตัวอย่าง ฝั่งฟอร์ม (เพิ่มช่องซ่อนบอกชื่องาน)

<form action="action.php" method="post">
<input type="hidden" name="action" value="add_message">
...
</form>

ตัวอย่าง ฝั่งไฟล์ประมวลผล (action.php)

<?php
if ($_POST) {
if ($_POST['action'] == "add_message") {
// ประมวลผลตรงนี้ เช่น บันทึกลงฐานข้อมูล (เรียนในบทถัดไป)
header("Location: index.php");
exit;
}
}
?>

ข้อควรระวัง: ห้ามแสดงผล HTML ใด ๆ ออกไปก่อนเรียกใช้คำสั่ง header ไม่เช่นนั้นการส่งต่อหน้าจะไม่ทำงาน