A-AA+then

ผมได้พูดถึงภาพรวมของ 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 เพื่อจัดการตามความต้องการได้ครับ

ตัวอย่าง

Relate

^