ออกแบบและใช้งาน Template (ตอนที่ 4)
ในบทนี้เราจะมาลองทำเว็บที่เป็นไดนามิคเมนูกัน ไดนามิคเมนูในที่นี้จะหมายถึงเว็บที่สามารถเพิ่มหรือลดเมนูได้ด้วยการ config หรือแม้กระทั่ง query ออกมาจากฐานข้อมูล ตัวอย่างของ Template ในลักษณะนี้ก็คือ CMS ทั่วไปแหละครับ ที่สามารถเพิ่มหน้าหรือสร้างโมดูลใหม่ด้วยการ config
หลักการของ Template แบบนี้ก็ต่างจาก Template แบบเดิมๆที่เราศึกษาไปแค่ส่วนเมนูเท่านั้นครับ เนื่องจากการเพิ่มหรือลดหน้าไม่ได้มีความเกี่ยวพันใดๆกีบเนื้อหา แต่สิ่งที่เพิ่มขึ้นมามีเพียงเมนูสำหรับเรียกใช้โมดูลนั้นๆ เท่านั้น
หลักการของ Template แบบนี้ก็เหมือนกับแบบทั่วๆไปครับ ต่างกันแค่ ต้องมีการกำหนค่า config เพื่อให้รู้จักโมดูลที่ติดตั้ง ได้แก่ ชื่อโมดูล และข้อความที่จะแสดงบนเมนู
และอีกส่วนก็คือการแสดงผลเมนู ในส่วนของ #topmenu
ในส่วนนี้จะเป็นการใช้ PHP เพื่ออ่านค่าโมดูลที่ติดตั้ง และนำมาวนลูปเพื่อสร้างเมนู พร้อมทั้งการทำ Highlight เมนูที่เลือก
ถ้าจะสังเกตุให้ดี ลักษณะของเมนูแบบนี้ก็เหมือนเป็น Template ย่อยๆ ซึ่งหมายถึงโค้ดที่เป็น Template ในส่วนของเมนูนั่นเอง
ตัวอย่าง
หลักการของ 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>ตัวอย่าง