ออกแบบและใช้งาน 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>
ตัวอย่าง