PHP กับ HTML: การทำงานร่วมกันเบื้องต้น

PHP เป็นภาษา scripting ที่ทำงานบนฝั่ง Server (Server-Side Scripting Language) ซึ่งหมายความว่าโค้ด PHP จะถูกประมวลผลบน Server ก่อนที่จะส่งผลลัพธ์กลับไปยัง Browser ของผู้ใช้งาน สิ่งนี้ทำให้ PHP เหมาะสมอย่างยิ่งสำหรับการสร้างเว็บไซต์แบบ Dynamic ที่มีการเปลี่ยนแปลงเนื้อหาอยู่เสมอ

ในบทเรียนนี้ เราจะมาเรียนรู้วิธีการผสาน PHP เข้ากับ HTML เพื่อสร้างเว็บไซต์ที่สามารถรับข้อมูลจากผู้ใช้งาน ประมวลผลข้อมูล และแสดงผลลัพธ์ได้อย่าง Dynamic

การใช้แท็ก <?php ?>

แท็ก <?php ?> เป็นแท็กที่ใช้ในการบอก Server ว่าส่วนนี้คือโค้ด PHP Server จะทำการประมวลผลโค้ด PHP ที่อยู่ภายในแท็กนี้ และแทนที่ด้วยผลลัพธ์ที่ได้จากการประมวลผล

รูปแบบการใช้งาน:

<?php
    // โค้ด PHP ของคุณจะอยู่ตรงนี้
?>

ตัวอย่าง:

<!DOCTYPE html>
<html>
<head>
    <title>PHP กับ HTML</title>
</head>
<body>
    <h1>สวัสดีจาก HTML!</h1>

    <?php
        echo "<p>สวัสดีจาก PHP!</p>";
    ?>

</body>
</html>

ในตัวอย่างนี้ เราได้ฝังโค้ด PHP ไว้ภายใน HTML โดยใช้แท็ก <?php ?> โค้ด PHP echo "<p>สวัสดีจาก PHP!</p>"; จะทำการแสดงข้อความ "สวัสดีจาก PHP!" ภายในแท็ก <p> เมื่อ Browser แสดงผลหน้าเว็บเพจ ผู้ใช้งานจะเห็นทั้งข้อความ "สวัสดีจาก HTML!" และ "สวัสดีจาก PHP!"

คำอธิบาย:

<!DOCTYPE html> ประกาศว่าเป็นเอกสาร HTML5
<html> คือ root element ของหน้าเว็บ
<head> ประกอบด้วย metadata เช่น title
<body> คือส่วนที่แสดงเนื้อหาหลักของหน้าเว็บ
<h1> คือ heading ระดับ 1
<p> คือ paragraph
echo เป็นคำสั่งใน PHP ที่ใช้สำหรับแสดงผลข้อมูล

การส่งข้อมูลจาก HTML ไป PHP

เราสามารถส่งข้อมูลจาก HTML ไปยัง PHP ได้โดยใช้ Form และ method GET หรือ POST

Method GET

Method GET จะส่งข้อมูลผ่านทาง URL ซึ่งข้อมูลจะปรากฏอยู่ใน address bar ของ Browser เหมาะสำหรับข้อมูลที่ไม่เป็นความลับ และมีขนาดไม่ใหญ่มาก

ตัวอย่าง:

<!DOCTYPE html>
<html>
<head>
    <title>ส่งข้อมูลด้วย GET</title>
</head>
<body>
    <form action="process_get.php" method="get">
        ชื่อ: <input type="text" name="name"><br><br>
        <input type="submit" value="ส่ง">
    </form>
</body>
</html>

ไฟล์ process_get.php:

<?php
    if (isset($_GET["name"])) {
        $name = $_GET["name"];
        echo "<p>สวัสดี, " . htmlspecialchars($name) . "!</p>";
    } else {
        echo "<p>กรุณากรอกชื่อ.</p>";
    }
?>

คำอธิบาย:

<form action="process_get.php" method="get"> สร้าง Form ที่จะส่งข้อมูลไปยัง process_get.php ด้วย method GET
<input type="text" name="name"> สร้าง input field สำหรับให้ผู้ใช้กรอกชื่อ โดยมี attribute name เป็น name
$_GET["name"] เป็น Superglobal ใน PHP ที่ใช้สำหรับเข้าถึงข้อมูลที่ถูกส่งมาด้วย method GET
isset($_GET["name"]) ตรวจสอบว่ามีการส่งค่า name มาหรือไม่
htmlspecialchars($name) ป้องกัน XSS (Cross-Site Scripting) โดยการแปลง character ที่มีความหมายพิเศษใน HTML เป็น entity

Method POST

Method POST จะส่งข้อมูลผ่านทาง HTTP body ซึ่งข้อมูลจะไม่ปรากฏอยู่ใน address bar ของ Browser เหมาะสำหรับข้อมูลที่เป็นความลับ และมีขนาดใหญ่

ตัวอย่าง:

<!DOCTYPE html>
<html>
<head>
    <title>ส่งข้อมูลด้วย POST</title>
</head>
<body>
    <form action="process_post.php" method="post">
        ชื่อ: <input type="text" name="name"><br><br>
        <input type="submit" value="ส่ง">
    </form>
</body>
</html>

ไฟล์ process_post.php:

<?php
    if (isset($_POST["name"])) {
        $name = $_POST["name"];
        echo "<p>สวัสดี, " . htmlspecialchars($name) . "!</p>";
    } else {
        echo "<p>กรุณากรอกชื่อ.</p>";
    }
?>

คำอธิบาย:

<form action="process_post.php" method="post"> สร้าง Form ที่จะส่งข้อมูลไปยัง process_post.php ด้วย method POST
$_POST["name"] เป็น Superglobal ใน PHP ที่ใช้สำหรับเข้าถึงข้อมูลที่ถูกส่งมาด้วย method POST

ข้อแตกต่างระหว่าง GET และ POST:

GET: ข้อมูลปรากฏใน URL, เหมาะสำหรับข้อมูลที่ไม่เป็นความลับ, ขนาดข้อมูลจำกัด
POST: ข้อมูลไม่ปรากฏใน URL, เหมาะสำหรับข้อมูลที่เป็นความลับ, ขนาดข้อมูลมากกว่า GET

การแสดงผลข้อมูลจาก PHP ไป HTML

เราสามารถแสดงผลข้อมูลจาก PHP ไปยัง HTML ได้โดยใช้คำสั่ง echo หรือ print

<?php
    $name = "John Doe";
    echo "<p>ชื่อ: " . $name . "</p>";
    print "<p>ชื่อ: " . $name . "</p>";
?>

ทั้ง echo และ print ทำงานเหมือนกัน คือใช้สำหรับแสดงผลข้อมูล แต่ echo เร็วกว่าเล็กน้อย และสามารถรับ argument ได้หลายตัวคั่นด้วย comma (,) ในขณะที่ print รับได้ argument เดียว

นอกจากนี้ เรายังสามารถใช้ short echo tag <?= ?> ซึ่งเป็น shorthand สำหรับ <?php echo ?>

<?php
    $name = "John Doe";
?>

<p>ชื่อ: <?= $name ?></p>

ข้อควรระวัง: การใช้ short echo tag อาจไม่สามารถใช้ได้ในทุก Server ขึ้นอยู่กับการตั้งค่าของ PHP configuration (short_open_tag)

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