Form Handling

สุรวุฒ ปันฉาย 630710852

PHP Form Handling: ความเข้าใจพื้นฐาน

การจัดการฟอร์มใน PHP เป็นส่วนสำคัญของการพัฒนาเว็บที่ช่วยให้เราสามารถรับข้อมูลจากผู้ใช้ เช่น การกรอกชื่อ อีเมล หรือรหัสผ่าน โดยข้อมูลเหล่านี้จะถูกส่งไปยังเซิร์ฟเวอร์ผ่าน HTTP requests ซึ่งใน PHP มีการจัดการข้อมูลเหล่านี้ด้วย superglobals ที่ชื่อว่า $_GET และ $_POST

รูปแบบการส่งข้อมูลใน PHP

ฟอร์มสามารถส่งข้อมูลได้สองรูปแบบหลัก คือ GET และ POST ซึ่งแต่ละแบบก็จะมีข้อดีและข้อจำกัดที่แตกต่างกัน

1. PHP GET Form (การส่งข้อมูลผ่าน GET)

GET เป็นรูปแบบการส่งข้อมูลแบบพื้นฐาน (default) ซึ่งข้อมูลที่ส่งผ่าน GET จะถูกแนบไปกับ URL ของเบราว์เซอร์ เช่น ?key=value ข้อมูลที่ส่งผ่านวิธีนี้จะสามารถมองเห็นได้ใน URL ของเบราว์เซอร์ จึงมีความปลอดภัยต่ำ และปริมาณข้อมูลที่ส่งได้มีจำกัด

ตัวอย่าง: รับข้อมูลจากฟอร์มแบบ GET

ไฟล์: form1.html

HTML

<form action="welcome.php" method="get">  
    Name: <input type="text" name="name"/>  
    <input type="submit" value="visit"/>  
</form>

ไฟล์: welcome.php

PHP

<?php  
    $name = $_GET["name"]; // รับค่าจากฟิลด์ "name"
    echo "Welcome, $name";  // แสดงชื่อผู้ใช้ที่กรอก
?>

เมื่อผู้ใช้กรอกข้อมูลแล้วกด submit ข้อมูลจะถูกส่งไปยัง welcome.php ผ่าน URL เช่น: name = JJ

arduino

เมื่อส่งฟอร์มผ่าน GET URL ที่ปรากฏในเบราว์เซอร์จะเป็นแบบนี้:
http://www.example.com/welcome.php?name=JJ

ข้อดีและข้อเสียของการใช้ GET

ข้อดี

• ข้อมูลถูกส่งผ่าน URL ทำให้สามารถบุ๊กมาร์กหรือแชร์ลิงก์ได้

• สามารถตรวจสอบค่าตัวแปรได้ง่ายผ่าน URL

ข้อเสีย

• ความปลอดภัยต่ำ ข้อมูลสำคัญเช่น รหัสผ่านสามารถเห็นได้ชัดเจน

• จำกัดขนาดข้อมูลที่ส่ง (ประมาณ 2000 ตัวอักษร)

2. PHP POST Form (การส่งข้อมูลผ่าน POST)

POST เป็นวิธีที่นิยมมากกว่าในการส่งข้อมูลที่มีปริมาณมาก หรือข้อมูลที่เป็นความลับ เช่น การส่งรหัสผ่าน การลงทะเบียนผู้ใช้ หรือการอัปโหลดไฟล์ ข้อมูลที่ส่งผ่าน POST จะไม่ปรากฏใน URL ซึ่งทำให้มีความปลอดภัยสูงกว่าการใช้ GET

ตัวอย่าง: รับข้อมูลจากฟอร์มแบบ POST

ไฟล์: form1.html

HTML

<form action="welcome.php" method="post">  
    Name: <input type="text" name="name"/>  
    <input type="submit" value="visit"/>  
</form>

ไฟล์: welcome.php

PHP

<?php  
    $name = $_POST["name"]; // รับค่าจากฟิลด์ "name"
    echo "Welcome, $name";  // แสดงชื่อผู้ใช้ที่กรอก
?>

ในตัวอย่างนี้ เมื่อผู้ใช้กรอกชื่อและรหัสผ่านในฟอร์มแล้วกดปุ่ม submit ข้อมูลจะถูกส่งไปที่ login.php ผ่าน POST ซึ่งข้อมูลจะถูกซ่อนไว้ใน request body และไม่ปรากฏใน URL

arduino

เมื่อส่งฟอร์มผ่าน POST URL ที่ปรากฏในเบราว์เซอร์จะเป็นแบบนี้:
http://www.example.com/login.php

ข้อดีของและข้อเสียของการใช้ POST

ข้อดี

• ข้อมูลจะไม่ปรากฏใน URL มีความปลอดภัยสูงกว่าการใช้ GET

• เหมาะสำหรับ ข้อมูลส่วนตัว หรือ รหัสผ่าน

ข้อเสีย

• ไม่สามารถบุ๊กมาร์กหรือแชร์ลิงก์ที่ส่งข้อมูลผ่าน POST ได้

• การตรวจสอบค่าตัวแปรต้องใช้เครื่องมือพิเศษ

ไม่สามารถบุ๊กมาร์กได้เพราะข้อมูลที่ส่งผ่าน POST จะไม่แสดงใน URL เมื่อเราบุ๊กมาร์กหรือนำลิงก์ไปเปิดใหม่ ข้อมูลที่เคยส่งจะไม่ถูกส่งไปด้วย ต้องส่งข้อมูลใหม่ทุกครั้งเมื่อมีการโหลดหน้าเว็บ

Form Handling ใน JavaScript ความเข้าใจพื้นฐาน

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

ตัวอย่างการส่งข้อมูลใน JavaScript

HTML

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Submit</button>
</form>
<div id="message"></div>

JavaScript

const form = document.getElementById('myForm');

form.addEventListener('submit', function (event) {
    event.preventDefault();
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    if (name === '' || email === '') {
        document.getElementById('message').textContent = 'กรุณากรอกข้อมูลให้ครบถ้วน!';
        return;
    }
    document.getElementById('message').textContent = `ขอบคุณ ${name} เราได้รับอีเมลของคุณแล้ว: ${email}`;
});

form.addEventListener('submit', function (event)

คือการบอกให้ฟอร์มรอการส่งข้อมูล (submit) เมื่อกดปุ่มส่งฟอร์ม ฟังก์ชันที่อยู่ข้างในจะถูกเรียกใช้งาน โดยใช้ event.preventDefault() จะหยุดการรีเฟรชหน้านั้น ทำให้เราสามารถตรวจสอบข้อมูลที่กรอกในฟอร์มก่อน จากนั้นเราสามารถเขียนโค้ดให้ตรวจสอบข้อมูลที่ผู้ใช้กรอกหรือทำอย่างอื่นก่อนส่งฟอร์มไปที่เซิร์ฟเวอร์ได้ เช่น แสดงข้อความเตือนถ้ากรอกข้อมูลไม่ครบ

เปรียบเทียบแบบเข้าใจง่ายระหว่าง PHP กับ JavaScript

PHP (Server-side)	JavaScript (Client-side)
ประมวลผลหลังจากส่งฟอร์มไปที่เซิร์ฟเวอร์	ประมวลผลข้อมูลในเบราว์เซอร์ทันที
หน้าเว็บต้องรีเฟรชใหม่เมื่อส่งฟอร์ม	ไม่ต้องรีเฟรชหน้าเว็บ ทำงานได้เร็ว
ปลอดภัยกว่า เนื่องจากข้อมูลถูกส่งไปที่เซิร์ฟเวอร์	ไม่ปลอดภัยเท่าฝั่งเซิร์ฟเวอร์ ต้องตรวจสอบอีกครั้งที่เซิร์ฟเวอร์
ใช้ได้เสมอ แม้ผู้ใช้ปิดการทำงาน JavaScript	ต้องเปิดการใช้งาน JavaScript ในเบราว์เซอร์
เหมาะสำหรับการประมวลผลข้อมูลที่ซับซ้อน	เหมาะสำหรับการตรวจสอบข้อมูลง่าย ๆ

แหล่งข้อมูลที่ใช้อ้างอิง

"PHP Form." Javatpoint, n.d. Web. 12 Oct. 2024. https://www.javatpoint.com/php-form.

"PHP Forms." W3Schools, n.d. Web. 12 Oct. 2024. https://www.w3schools.com/php/php_forms.asp.

"PHP Form Handling." TutorialsPoint, n.d. Web. 12 Oct. 2024. https://www.tutorialspoint.com/php/php_form_handling.htm.

"JavaScript DOM Forms." CodingDrills, n.d. Web. 13 Oct. 2024. https://www.codingdrills.com/tutorial/javascript-tutorial/dom-forms.

"JavaScript Form Validation." W3Schools, n.d. Web. 13 Oct. 2024. https://www.w3schools.com/js/js_validation.asp

"JavaScript Form." JavaScript Tutorial, n.d. Web. 15 Oct. 2024. https://www.javascripttutorial.net/javascript-dom/javascript-form/.

Slide Files

1MB

Slide_Form Handling.pdf.pdf

PDF

Open