<?php Neverdie; ?>

PHP101 – การจัดการ Form และการรับข้อมูลผู้ใช้

Written by

chaisiri

in

ใน Module นี้ เราจะมาเรียนรู้เกี่ยวกับการสร้าง Form ใน HTML และการใช้ PHP เพื่อรับและประมวลผลข้อมูลที่ผู้ใช้ป้อนเข้ามา ซึ่งเป็นส่วนสำคัญในการสร้างเว็บไซต์ที่มีการโต้ตอบกับผู้ใช้งาน

การสร้าง Form ด้วย HTML

Form ใน HTML ใช้แท็ก <form> และมี Element ต่างๆ สำหรับให้ผู้ใช้ป้อนข้อมูล เช่น <input>, <textarea>, <select>, และ <button>

HTML
<form action="process.php" method="post">
  <label for="name">ชื่อ:</label><br>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">อีเมล:</label><br>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="ส่งข้อมูล">
</form>
  • action attribute: ระบุ URL ของไฟล์ที่จะประมวลผลข้อมูล Form (ในตัวอย่างคือ process.php)
  • method attribute: ระบุ HTTP method ที่ใช้ในการส่งข้อมูล (get หรือ post)
  • <input type="text" name="name">: ช่องสำหรับป้อนข้อความ
  • <input type="email" name="email">: ช่องสำหรับป้อนอีเมล
  • <input type="submit" value="ส่งข้อมูล">: ปุ่มสำหรับส่ง Form
  • name attribute: สำคัญมาก เพราะ PHP จะใช้ค่านี้เพื่อเข้าถึงข้อมูลที่ผู้ใช้ป้อน

HTTP Methods: GET และ POST

method attribute ในแท็ก <form> สามารถมีค่าได้ 2 แบบหลักๆ:

GET Method

ข้อมูล Form จะถูกส่งไปพร้อมกับ URL ในรูปแบบของ Query String (เช่น process.php?name=John&email=john@example.com)

ข้อดี: สามารถ Bookmark URL ได้ง่าย, เหมาะสำหรับข้อมูลที่ไม่ลับ

ข้อเสีย: มีข้อจำกัดเรื่องความยาวของ URL, ข้อมูลปรากฏใน URL อาจไม่ปลอดภัยสำหรับข้อมูลสำคัญ

HTML
<form action="process.php" method="get">
  <label for="search">ค้นหา:</label><br>
  <input type="text" id="search" name="search"><br><br>
  <input type="submit" value="ค้นหา">
</form>

POST Method

ข้อมูล Form จะถูกส่งไปในส่วนของ HTTP request body ทำให้ไม่ปรากฏใน URL

ข้อดี: ปลอดภัยกว่าสำหรับข้อมูลสำคัญ, ไม่จำกัดความยาวของข้อมูล

ข้อเสีย: ไม่สามารถ Bookmark URL ที่มีการส่งข้อมูลด้วย POST ได้โดยตรง

HTML
<form action="process.php" method="post">
  <label for="password">รหัสผ่าน:</label><br>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="เข้าสู่ระบบ">
</form>

คำแนะนำ: โดยทั่วไป ควรใช้ POST สำหรับข้อมูลที่ต้องการความปลอดภัย หรือมีปริมาณมาก

การรับข้อมูล Form ด้วย PHP

PHP มี Superglobal Arrays ที่ใช้สำหรับเข้าถึงข้อมูลที่ส่งมาจาก Form:

  • $_GET: ใช้สำหรับรับข้อมูลที่ส่งมาด้วย HTTP GET method (เป็น Associative Array ที่มี name attribute ของ Form Element เป็น Key และค่าที่ผู้ใช้ป้อนเป็น Value)
  • $_POST: ใช้สำหรับรับข้อมูลที่ส่งมาด้วย HTTP POST method (มีโครงสร้างเหมือน $_GET)
  • $_REQUEST: ใช้สำหรับรับข้อมูลที่ส่งมาทั้งด้วย GET และ POST method (ไม่แนะนำให้ใช้บ่อยนัก เพราะอาจทำให้สับสนว่าข้อมูลมาจากไหน)

สมมติว่าเรามี Form ที่ส่งข้อมูลด้วย POST method ไปยังไฟล์ process.php:

HTML
<!-- HTML Form (อยู่ในไฟล์ form.html) -->
<form action="process.php" method="post">
  <label for="name">ชื่อ:</label><br>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">อีเมล:</label><br>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="ส่งข้อมูล">
</form>

ในไฟล์ process.php เราสามารถรับข้อมูลได้ดังนี้:

PHP
<?php

  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST["name"];
    $email = $_POST["email"];

    echo "คุณชื่อ: " . $name . "<br>";
    echo "อีเมลของคุณคือ: " . $email;
  } else {
    echo "ไม่พบข้อมูลที่ส่งมาจาก Form ด้วย POST method";
  }

?>

คำอธิบาย:

  • $_SERVER["REQUEST_METHOD"]: เป็น Superglobal Variable ที่เก็บ HTTP method ที่ใช้ในการ Request
  • เราตรวจสอบว่า Request method เป็น POST ก่อนที่จะเข้าถึง $_POST array
  • $_POST["name"] และ $_POST["email"] ใช้เพื่อเข้าถึงค่าที่ผู้ใช้ป้อนใน Input fields ที่มี name attribute เป็น “name” และ “email”

ถ้า Form ถูกส่งด้วย GET method เราจะใช้ $_GET["name"] และ $_GET["email"] ใน process.php แทน

การตรวจสอบความถูกต้องของข้อมูล (Form Validation)

การตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้ป้อนเป็นสิ่งสำคัญ เพื่อให้แน่ใจว่าข้อมูลอยู่ในรูปแบบที่ถูกต้องและครบถ้วน คุณสามารถใช้ PHP ในการตรวจสอบข้อมูลฝั่ง Server หลังจากที่ Form ถูกส่งมาแล้ว

ตัวอย่างการตรวจสอบว่าช่องชื่อและอีเมลไม่ว่าง:

PHP
<?php

  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["name"])) {
      echo "กรุณากรอกชื่อ<br>";
    } else {
      $name = $_POST["name"];
      // ประมวลผลชื่อ
    }

    if (empty($_POST["email"])) {
      echo "กรุณากรอกอีเมล<br>";
    } else {
      $email = $_POST["email"];
      // ตรวจสอบรูปแบบอีเมล (ใช้ filter_var)
      if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo "รูปแบบอีเมลไม่ถูกต้อง<br>";
      } else {
        // ประมวลผลอีเมล
      }
    }

    // ถ้าไม่มีข้อผิดพลาด ให้ดำเนินการอื่นๆ เช่น บันทึกข้อมูลลงฐานข้อมูล
    if (!empty($_POST["name"]) && !empty($_POST["email"]) && filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {
      echo "ข้อมูลถูกต้อง สามารถดำเนินการต่อได้";
    }
  }

?>

PHP มีฟังก์ชันมากมายสำหรับการตรวจสอบข้อมูล เช่น empty(), isset(), filter_var(), และ Regular Expressions

การป้องกันการโจมตี (Security Considerations)

เมื่อรับข้อมูลจากผู้ใช้ สิ่งสำคัญคือต้องคำนึงถึงความปลอดภัย เพื่อป้องกันการโจมตีต่างๆ เช่น:

  • Cross-Site Scripting (XSS): ป้องกันโดยการ Escape ข้อมูลที่แสดงผลบนหน้าเว็บ (เช่น ใช้ htmlspecialchars())
  • SQL Injection: ป้องกันโดยการใช้ Prepared Statements หรือ Parameterized Queries เมื่อทำงานกับฐานข้อมูล
  • Form Hijacking: ใช้ HTTPS เพื่อเข้ารหัสการรับส่งข้อมูล

เราจะเรียนรู้เกี่ยวกับเรื่องความปลอดภัยมากขึ้นใน Module ต่อๆ ไป

กิจกรรมใน Module 7

  1. สร้าง Form HTML ที่มี Input fields หลากหลายประเภท (text, email, password, radio, checkbox, select, textarea)
  2. กำหนด action และ method ให้กับ Form
  3. สร้างไฟล์ PHP ที่รับข้อมูลจาก Form โดยใช้ทั้ง $_GET และ $_POST
  4. แสดงผลข้อมูลที่รับมาบนหน้าเว็บ PHP
  5. เพิ่มการตรวจสอบความถูกต้องของข้อมูลสำหรับ Input fields บางส่วน (เช่น ไม่ให้ว่าง, รูปแบบอีเมลถูกต้อง)
  6. (Optional) ลองใช้ htmlspecialchars() เพื่อป้องกัน XSS เบื้องต้น

ใน Module ถัดไป เราจะมาเรียนรู้เกี่ยวกับการจัดการ Session และ Cookie ซึ่งเป็นกลไกสำคัญในการจดจำผู้ใช้และการคงสถานะของเว็บไซต์ครับ!

ความคิดเห็น

More posts