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

หลายๆคนอาจเคยเห็นบางเว็บ ที่มีการทำ Highlight เมนูที่กำลังใช้งานหรือแสดงหน้านั้นๆอยู่ให้ต่างไปจากเมนูอื่น เราลองมาปรับปรุง Template ของเราให้สามารถทำ Highlightเมนูที่เลือกได้กัน

<?php

    $module = $_GET[module]; // ชื่อโมดูลที่ต้องการ

    $module = is_file("$module.php") ? $module : 'module1'; // ตรวจสอบโมดูลที่เรียก ถ้าไม่มีใช้โมดูลแรก

?>

<!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">

        <li<?php echo $module == 'module1' ? ' class="select"' : '' ?>><a href="index.php?module=module1">หน้าที่ 1</a></li>

        <li<?php echo $module == 'module2' ? ' class="select"' : '' ?>><a href="index.php?module=module2">หน้าที่ 2</a></li>

    </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>

ข้อสังเกตุสำหรับโค้ดด้านบน ก็คือ เราได้ย้ายเอาส่วนของ PHP ขึ้นไปไว้ด้านบนสุดของเพจ สำหรับ PHP ในส่วนที่เป็น HTML จะมีแค่ส่วนแสดงผลเท่านั้น เนื่องจากในการออกแบบเว็บไซต์โดยทั่วๆไป เราอาจต้องมีการประมวลผล PHP หรือทำการเตรียมส่วนประกอบต่างๆ ก่อนการแสดงผล เราจึงจำต้องให้ส่วนของ PHP ประมวลผลเสร็จก่อนแล้วค่อยแสดงผล (นี่เป็นเพียงวิธีหนึ่งเท่านั้น ในการใช้งานจริงอุปสรรคที่แต่ละคนพบอาจไม่เหมือนกัน สามารถเลี่ยงไปใช้วิธีที่เหมาะสมสำหรับแต่ละงานได้)

ในการทำ Highlight เมนู หลักการของมันก็แค่ ตรวจสอบว่า โมดูลที่เรียกตรงกับเมนูไหน ถ้าตรงกันก็ให้กำหนด class select ให้กับเมนูนั้นเท่านั้น (ใช้ PHP)

<li<?php echo $module == 'module1' ? ' class="select"' : '' ?>><a href="index.php?module=module1">หน้าที่ 1</a></li>

และในเวลาแสดงผลให้เรากำหนด CSS ของเมนูที่มี class เป็น select ให้ต่างจากเมนูปกติ

/* CSS ของเมนูที่ถูกเลือก */

#topmenu li.select {

    background-color: #FFFFFF;

    font-weight: bold;

}

ซึ่งในที่นี้ได้กำหนดให้เมนูที่เลือกมีพื้นหลังสีขาวและเป็นตัวหนา

ตัวอย่าง