รวมโค้ด PHP เข้ากับ HTML

รวมโค้ด PHP เข้ากับ HTML: สร้าง Dynamic Web Pages

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

Dynamic Web Pages คืออะไร? ลองนึกภาพเว็บไซต์ที่คุณเห็นข้อมูลที่แตกต่างกันไปขึ้นอยู่กับผู้ใช้งานที่ล็อกอิน หรือสินค้าที่แสดงผลตามการค้นหา นั่นคือตัวอย่างของ Dynamic Web Pages ซึ่งแตกต่างจาก Static Web Pages ที่แสดงเนื้อหาเดิมเสมอ ไม่ว่าใครจะเข้าชม

ทำไมต้องรวม PHP กับ HTML?

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

Echo ใน HTML: พื้นฐานการแสดงผลข้อมูล

คำสั่ง echo คือหัวใจสำคัญในการแสดงผลข้อมูลจาก PHP ไปยัง HTML โดยพื้นฐานแล้ว echo จะส่งข้อความหรือค่าของตัวแปรไปยัง Browser เพื่อแสดงผลในหน้าเว็บ

ตัวอย่าง:

<!DOCTYPE html>
<html>
<head>
    <title>Echo ใน HTML</title>
</head>
<body>
    <h1>สวัสดีจาก PHP!</h1>
    <p>วันนี้วันที่: <?php echo date("d/m/Y"); ?></p>
</body>
</html>

คำอธิบาย:

• เราใช้แท็ก <?php และ ?> เพื่อระบุส่วนที่เป็นโค้ด PHP
• ภายในแท็ก PHP เราใช้ฟังก์ชัน date("d/m/Y") เพื่อดึงวันที่ปัจจุบัน และใช้ echo เพื่อแสดงผลวันที่นั้นในแท็ก <p>
• ผลลัพธ์ที่ได้คือหน้าเว็บที่มีหัวข้อ "สวัสดีจาก PHP!" และข้อความ "วันนี้วันที่:" ตามด้วยวันที่ปัจจุบัน

ข้อควรจำ: โค้ด PHP จะถูกประมวลผลบน Server ก่อนที่จะส่ง HTML ไปยัง Browser ดังนั้น Browser จะเห็นเพียง HTML ที่ถูกสร้างขึ้น ไม่เห็นโค้ด PHP

การแทรกตัวแปรใน HTML

การแทรกตัวแปรใน HTML ทำให้เราสามารถแสดงผลข้อมูลที่เปลี่ยนแปลงได้ตามค่าของตัวแปร

ตัวอย่าง:

<!DOCTYPE html>
<html>
<head>
    <title>การแทรกตัวแปรใน HTML</title>
</head>
<body>
    <?php
        $name = "John Doe";
        $age = 30;
    ?>

    <h2>ข้อมูลผู้ใช้</h2>
    <p>ชื่อ: <?php echo $name; ?></p>
    <p>อายุ: <?php echo $age; ?> ปี</p>
</body>
</html>

คำอธิบาย:

• เราประกาศตัวแปร $name และ $age ในส่วนของ PHP
• เราใช้ echo เพื่อแสดงผลค่าของตัวแปรเหล่านั้นในแท็ก <p>
• ผลลัพธ์ที่ได้คือหน้าเว็บที่แสดงข้อมูลผู้ใช้ โดยมีชื่อและอายุที่กำหนดไว้ในตัวแปร

Shortcut: นอกจาก echo แล้ว เรายังสามารถใช้ shorthand <?= $variable; ?> เพื่อแสดงผลค่าของตัวแปรได้ (ต้องเปิดใช้งาน short_open_tag ใน php.ini)

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

การใช้ PHP ใน HTML Forms: รับข้อมูลจากผู้ใช้

HTML Forms เป็นเครื่องมือที่ใช้ในการรับข้อมูลจากผู้ใช้ เช่น ชื่อ, อีเมล, หรือข้อความ การใช้ PHP ร่วมกับ HTML Forms ช่วยให้เราสามารถประมวลผลข้อมูลที่ผู้ใช้ป้อนเข้ามาได้

ตัวอย่าง:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Forms กับ PHP</title>
</head>
<body>
    <h2>ฟอร์มลงทะเบียน</h2>

    <form action="process.php" method="post">
        <label for="name">ชื่อ:</label>
        <input type="text" id="name" name="name"><br><br>

        <label for="email">อีเมล:</label>
        <input type="email" id="email" name="email"><br><br>

        <input type="submit" value="สมัครสมาชิก">
    </form>
</body>
</html>

คำอธิบาย:

• เราสร้างฟอร์ม HTML ที่มีช่องให้ผู้ใช้ป้อนชื่อและอีเมล
• Attribute action="process.php" ในแท็ก <form> ระบุว่าข้อมูลที่ป้อนจะถูกส่งไปยังไฟล์ process.php เพื่อประมวลผล
• Attribute method="post" ระบุวิธีการส่งข้อมูล (POST method)

ไฟล์ process.php:

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

        echo "<h2>ข้อมูลที่ได้รับ:</h2>";
        echo "<p>ชื่อ: " . htmlspecialchars($name) . "</p>";
        echo "<p>อีเมล: " . htmlspecialchars($email) . "</p>";
    } else {
        echo "<p>ไม่มีข้อมูลที่ส่งมา</p>";
    }
?>

คำอธิบาย:

• เราตรวจสอบว่ามีการส่งข้อมูลมาด้วย POST method หรือไม่
• เราใช้ $_POST["name"] และ $_POST["email"] เพื่อดึงข้อมูลที่ผู้ใช้ป้อนเข้ามา
• เราใช้ฟังก์ชัน htmlspecialchars() เพื่อป้องกันการโจมตีแบบ Cross-Site Scripting (XSS) โดยการแปลง characters พิเศษให้เป็น HTML entities
• เราแสดงผลข้อมูลที่ได้รับในรูปแบบ HTML

สำคัญ: การตรวจสอบและ sanitize ข้อมูลที่ได้รับจาก Forms เป็นสิ่งสำคัญเพื่อป้องกันช่องโหว่ด้านความปลอดภัย

สรุป

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

ในบทถัดไป เราจะเรียนรู้เกี่ยวกับการจัดการ Form Data ด้วย PHP อย่างละเอียด รวมถึงเทคนิคการตรวจสอบและ sanitize ข้อมูลเพื่อความปลอดภัย