ออกแบบและใช้งาน Template (ตอนที่ 2)
ผมได้พูดถึงภาพรวมของ Template ไปแล้ว เราจะมาเริ่มต้นออกแบบ Template อย่างง่ายๆด้วย PHP กัน
หลักการของ Template แบบนี้คือ ใช้ หน้าแรกของเว็บไซต์ (index.php) เป็น Template และส่วนควบคุมทั้งหมด และใช้การ include หน้าในส่วนเนื้อหาเข้ามา ซึ่งเรามักจะพบการใช้ Template แบบนี้ ในเว็บไซต์ทั่วไป
โค้ดด้านบนเป็นไฟล์ index.php ซึ่งมีลักษณะเป็น Template จากโค้ดซึ่งเป็นส่วนโครงร่างเว็บทั้งหมด ตามตัวอย่างนี้ จะมีหน้าทั้งหมด 2 หน้าตามเมนู คือ หน้าที่ 1(module1) และ หน้าที่ 2(module2)
โค้ด PHP ในส่วนของ #content เป็นการคัดเลือกเอาหน้าที่ต้องการแสดงมาจาก module ที่ส่งมา ค่าที่ส่งมา จะถูกตรวจสอบว่ามีไฟล์ที่ต้องการหรือไม่(หน้าที่ต้องการ เป็นชื่อโมดูล นามสกุล php) ถ้ามีก็จะไป include ไฟล์เข้ามาแสดงในส่วน content ถ้าไม่มี ก็ไปเอามาจาก หน้าแรก(หรือหน้าที่กำหนด) มาแสดง
สำหรับโค้ดใน module1.php หรือ module2.php ตามตัวอย่างนี้มีโค้ดเหมือนกันครับ (เพื่อแสดงว่ากำลังเรียกหน้าใดเท่านั้น)
ซึ่งเป็น PHP หรือ HTML ก็ได้ หรือแม้แต่จะ query ออกมาจากฐานข้อมูลก็ได้
ส่วนรูปร่างหน้าตา หรือความสวยงาม อาจใช้ CSS เพื่อจัดการตามความต้องการได้ครับ
ตัวอย่าง
หลักการของ 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"></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 เพื่อจัดการตามความต้องการได้ครับ
ตัวอย่าง