GORAGOD.com

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

ในบทนี้เราจะมาลองทำเว็บที่เป็นไดนามิคเมนูกัน ไดนามิคเมนูในที่นี้จะหมายถึงเว็บที่สามารถเพิ่มหรือลดเมนูได้ด้วยการ config หรือแม้กระทั่ง query ออกมาจากฐานข้อมูล ตัวอย่างของ Template ในลักษณะนี้ก็คือ CMS ทั่วไปแหละครับ ที่สามารถเพิ่มหน้าหรือสร้างโมดูลใหม่ด้วยการ config

หลักการของ Template แบบนี้ก็ต่างจาก Template แบบเดิมๆที่เราศึกษาไปแค่ส่วนเมนูเท่านั้นครับ เนื่องจากการเพิ่มหรือลดหน้าไม่ได้มีความเกี่ยวพันใดๆกีบเนื้อหา แต่สิ่งที่เพิ่มขึ้นมามีเพียงเมนูสำหรับเรียกใช้โมดูลนั้นๆ เท่านั้น
<?php
    $config[moudles] = array('module1', 'module2'); // แอเรย์กำหนดว่ามีโมดูลใดติดตั้งไว้บ้าง
    $config[menutitle] = array('หน้าที่ 1', 'หน้าที่ 2'); // แอเรย์กำหนดข้อความบนเมนู สัมพันธ์กันกับ โมดูลที่ติดตั้ง
   
    $module = $_GET[module]; // ชื่อโมดูลที่ต้องการ
    $module = is_file("$module.php") ? $module : $config[moudles][0]; // ตรวจสอบโมดูลที่เรียก ถ้าไม่มีใช้โมดูลแรก
?>
<!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" />
    <style type="text/css">
    /* CSS ของเมนู ปกติ */
    #topmenu li {
        float: left;
        margin-right: 10px;
        border: 1px solid red;
    }
     /* CSS ของเมนูที่ถูกเลือก */
    #topmenu li.select {
        background-color: #FFFFFF;
        font-weight: bold;
    }   
    </style>

</head>
<body>
    <div id="header">{HEADER}</div>
    <ul id="topmenu">
        <?php
            // โค้ดส่วนกำหนดเมนู
            $menu = '<li{SELECT}><a href="index.php?module={MODULE}">{TITLE}</a></li>'; // template ของเมนู
            $patt = array('/{SELECT}/',  '/{MODULE}/', '/{TITLE}/'); // ตัวแปรต่างๆภายใน template ที่จะถูกแทนที่ด้วยค่าที่กำหนด
            // วนลูปสร้า่งเมนูทีละอัน
            foreach($config[moudles] AS $i => $item){
                unset($replace); // เตรียมตัวแปร เคลียร์ข้อมูล
                $replace[] = $module == $item ? ' class="select"' : ''; // ตรวจสอบว่าเป็นโมดูลที่เลือกหรือไม่ SELECT
                $replace[] = $item; // ชื่อเมนู MODULE
                $replace[] = $config[menutitle][$i]; // ข้อความบนเมนู TITLE
                $menus[] = preg_replace($patt, $replace, $menu); // แทนที่ลงใน Template ของเมนู
            }
            echo implode("\n", $menus); // แสดงผลเมนู
        ?>
    </ul>
    <div id="warper-content">
        <div id="content">
        <?php
            include("$module.php"); // include โมดูลที่ต้องการมาแสดงในส่วน CONTENT
        ?>
        </div>
        <div id="sidebar">{SIDEBAR}</div>
    </div>
    <div id="footer">{FOOTER}</div>
</body>
</html>

หลักการของ Template แบบนี้ก็เหมือนกับแบบทั่วๆไปครับ ต่างกันแค่ ต้องมีการกำหนค่า config เพื่อให้รู้จักโมดูลที่ติดตั้ง ได้แก่ ชื่อโมดูล และข้อความที่จะแสดงบนเมนู
// แอเรย์กำหนดว่ามีโมดูลใดติดตั้งไว้บ้าง
$config[moudles] = array('module1', 'module2');
// แอเรย์กำหนดข้อความบนเมนู สัมพันธ์กันกับ โมดูลที่ติดตั้ง
$config[menutitle] = array('หน้าที่ 1', 'หน้าที่ 2');

และอีกส่วนก็คือการแสดงผลเมนู ในส่วนของ #topmenu
<?php
  $menu = '<li{SELECT}><a href="index.php?module={MODULE}">{TITLE}</a></li>'; // template ของเมนู
  $patt = array('/{SELECT}/',  '/{MODULE}/', '/{TITLE}/'); // ตัวแปรต่างๆภายใน template ที่จะถูกแทนที่ด้วยค่าที่กำหนด
  foreach($config[moudles] AS $i => $item){
        unset($replace); // เตรียมตัวแปร เคลียร์ข้อมูล
        $replace[] = $module == $item ? ' class="select"' : ''; // ตรวจสอบว่าเป็นโมดูลที่เลือหรือไม่ SELECT
        $replace[] = $item; // ชื่อเมนู MODULE
        $replace[] = $config[menutitle][$i]; // ข้อความบนเมนู TITLE
        $menus[] = preg_replace($patt, $replace, $menu); // แทนที่ลงใน Template ของเมนู
    }
    echo implode("\n", $menus); // แสดงผลเมนู
?>

ในส่วนนี้จะเป็นการใช้ PHP เพื่ออ่านค่าโมดูลที่ติดตั้ง และนำมาวนลูปเพื่อสร้างเมนู พร้อมทั้งการทำ Highlight เมนูที่เลือก

ถ้าจะสังเกตุให้ดี ลักษณะของเมนูแบบนี้ก็เหมือนเป็น Template ย่อยๆ ซึ่งหมายถึงโค้ดที่เป็น Template ในส่วนของเมนูนั่นเอง
<li{SELECT}><a href="index.php?module={MODULE}">{TITLE}</a></li>

ตัวอย่าง