สร้าง Dynamic Content ด้วย Switch Case

ก่อนอื่นนะครับผมขออธิบายถึงคำสั่ง “Switch Case” ก่อนนะครับ Switch Case ก็คือ คำสั่งที่ใช้ในการกำหนดเงื่อนไขเพื่อที่จะเลือกทำ จะมีรูปแบบ Syntax ดังนี้

<?php
switch (n) {
    case label1:
        code to be executed if n=label1;
        break;
    case label2:
        code to be executed if n=label2;
        break;
    case label3:
        code to be executed if n=label3;
        break;
    ...
    default:
        code to be executed if n is different from all labels;
}
?>

เมื่อเราทำความรู้จักกับ Switch Case แล้วเรามาเริ่มทำกันเลยนะครับ เริ่มจากสร้างไฟล์ PHP เตรียมไว้ตามรูป ซึ่งในแต่ละไฟล์ ใส่เนื้อหาอะไรไปก็ได้นะครับ

Dynamic Content 1

ต่อมาเปิดไฟล์ index.php แล้วพิมพ์โค้ดดังนี้

<html>
    <head>
        <title>PHP Dynamic Website</title>
        <meta charset="utf8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header>
            <h1 style="text-align: center">
                This is Header
            </h1>
            <nav>
                <ul>
                    <li><a href="<?php $_SERVER['PHP_SELF'] ?>?page=home">Home</a></li>
                    <li><a href="<?php $_SERVER['PHP_SELF'] ?>?page=about">About</a></li>
                    <li><a href="<?php $_SERVER['PHP_SELF'] ?>?page=portfolio">Portfolio</a></li>
                    <li><a href="<?php $_SERVER['PHP_SELF'] ?>?page=contact">Contact</a></li>
                </ul>
            </nav>
            <hr>
        </header>

        <div class="content">
        <?php        
        switch (@$_GET['page']) {
            case "about":
                include "about.php";
                break;
            case "portfolio":
                include "portfolio.php";
                break;
            case "contact":
                include "contact.php";
                break;
            default :
                include "home.php";
        }
        ?>
        </div>

        <footer>
            <hr>
            <p style="text-align: center">This is Footer</p>
        </footer>
    </body>
</html>

แล้วทำการรัน จะได้หน้าตาแบบในรูปครับ

Dynamic Content 2

เมื่อลองกดที่ลิงค์แล้ว จะมีการเปลี่ยนแปลงที่ส่วนของ content เพราะมันมีการส่งตัวแปลง $page มากับ query string ซึ่งเราได้ใส่ คำสั่ง switch case เข้ามาตรวจสอบ และหากค่าที่อยู่ในตัวแปล page เข้าไปที่เงื่อนไขไหน มันก็จะเรียกไฟล์ หรือเนื้อหาที่อยู่ในเงื่อนไขนั้นออกมาแสดง เท่านี้ก็เป็นอันเสร็จครับ 🙂