ออกแบบและใช้งาน Template (ตอนที่ 2)

ผมได้พูดถึงภาพรวมของ Template ไปแล้ว เราจะมาเริ่มต้นออกแบบ Template อย่างง่ายๆด้วย PHP กัน

หลักการของ Template แบบนี้คือ ใช้ หน้าแรกของเว็บไซต์ (index.php) เป็น Template และส่วนควบคุมทั้งหมด และใช้การ include หน้าในส่วนเนื้อหาเข้ามา ซึ่งเรามักจะพบการใช้ Template แบบนี้ ในเว็บไซต์ทั่วไป

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>ตัวอย่าง Template</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

    <div id="header">{HEADER}</div>

    <ul id="topmenu">

        <!-- เมนูหลัก -->

        <li><a href="index.php?module=module1">หน้าที่ 1</a></li>

        <li><a href="index.php?module=module2">หน้าที่ 2</a></li>

    </ul>

    <div id="warper-content">

        <div id="content">

        <?php

            $module = $_GET[module]; // ชื่อโมดูลที่ต้องการ

            $module = is_file("$module.php") ? $module : 'module1'; // ตรวจสอบโมดูลที่เรียก ถ้าไม่มีใช้โมดูลแรก

            include("$module.php"); // include โมดูลที่ต้องการมาแสดงในส่วน CONTENT

        ?>

        </div>

        <div id="sidebar">{SIDEBAR}</div>

    </div>

    <div id="footer">{FOOTER}</div>

</body>

</html>

โค้ดด้านบนเป็นไฟล์ index.php ซึ่งมีลักษณะเป็น Template จากโค้ดซึ่งเป็นส่วนโครงร่างเว็บทั้งหมด ตามตัวอย่างนี้ จะมีหน้าทั้งหมด 2 หน้าตามเมนู คือ หน้าที่ 1(module1) และ หน้าที่ 2(module2)

โค้ด PHP ในส่วนของ #content เป็นการคัดเลือกเอาหน้าที่ต้องการแสดงมาจาก module ที่ส่งมา ค่าที่ส่งมา จะถูกตรวจสอบว่ามีไฟล์ที่ต้องการหรือไม่(หน้าที่ต้องการ เป็นชื่อโมดูล นามสกุล php) ถ้ามีก็จะไป include ไฟล์เข้ามาแสดงในส่วน content ถ้าไม่มี ก็ไปเอามาจาก หน้าแรก(หรือหน้าที่กำหนด) มาแสดง

สำหรับโค้ดใน module1.php หรือ module2.php ตามตัวอย่างนี้มีโค้ดเหมือนกันครับ (เพื่อแสดงว่ากำลังเรียกหน้าใดเท่านั้น)

<p>หน้านี้ถูกเรียกมาที่ไฟล์ <?php echo __FILE__?></p>

<p>ชื่อโมดูล : <?php echo $_GET[module]?></p>

ซึ่งเป็น PHP หรือ HTML ก็ได้ หรือแม้แต่จะ query ออกมาจากฐานข้อมูลก็ได้

ส่วนรูปร่างหน้าตา หรือความสวยงาม อาจใช้ CSS เพื่อจัดการตามความต้องการได้ครับ

ตัวอย่าง