เมนูด้านข้างของ GCMS เวอร์ชั่น 3

เมนูด้านข้างของ GCMS ก็เป็นอีกส่วนหนึ่งที่สามารถสร้างได้อัตโนมัติด้วยโค้ดหรือโมดูลได้ นอกจากการสร้างโดยตรงจาก template ซึ่งเมนูในส่วนนี้เราสามารถเขียนเองตรงๆบน skin/sidebar.html ได้ หากเป็นเมนูทั่วๆไป แต่ถ้าต้องการสร้างจากโค้ดหรือสามารถกำหนดได้โดยโค้ด ต้องดัดแปลงและทำความเข้าใจกันเล็กน้อยครับ

ส่วนของ sidebar ถ้าตามที่ผมกำหนดไว้ จะอยู่ที่ skin/sidebar.html
[code]<div id="login-div">{LOGIN}</div>
<div class="counter-box">{COUNTER}</div>
<div class="friends-box">
<a href="http://www.goragod.com" title="Goragod.com :: ออกแบบเว็บไซต์ด้วย AJAX และ PHP" target="_blank"><img src="http://www.goragod.com/smalllogo.gif" alt="Goragod.com :: ออกแบบเว็บไซต์ด้วย AJAX และ PHP" style="border:1px solid #000000" /></a>

</div>[/code]
tag a คือตัวอย่างเมนูที่เขียนเองครับ สามารถจัดการและเขียนเองลงบน sidebar ตรงๆ ได้ ส่วน login-div และ counter-box ก็คือส่วนของกรอบ login และ กรอบ counter ตามลำดับ

หากต้องการสร้างเมนูภายใน sidebar จากโค้ด ผมยกตัวอย่างเช่น การนำลิสต์รายการบล๊อกล่าสุด 10 รายการไปไว้ที่เมนูด้านข้าง สามารถดำเนินการได้ดังนี้
[code]<div id="login-div">{LOGIN}</div>
<div id="blog-div">{BLOG}</div>
<div class="counter-box">{COUNTER}</div>
<div class="friends-box">
<a href="http://www.goragod.com" title="Goragod.com :: ออกแบบเว็บไซต์ด้วย AJAX และ PHP" target="_blank"><img src="http://www.goragod.com/smalllogo.gif" alt="Goragod.com :: ออกแบบเว็บไซต์ด้วย AJAX และ PHP" style="border:1px solid #000000" /></a>
</div>[/code]
ขั้นตอนแรกต้องกำหนดพื้นที่ส่วนที่จะแสดงผลก่อนคือ <div id="blog-div">{BLOG}</div> เพื่อเป็นโครงสร้างหลักของเมนู ซี่งเมนูของบล๊อกจะมาแสดงแทนที่ {BLOG} ในส่วนนี้

ขั้นตอนที่ 2 เขียนโค้ดเพื่อ query ข้อมูลออกมาจาก db เพื่อมากำหนดเมนู
[code]<?php
    // สำหรับการโหลดหน้าเว็บในครั้งแรกเท่านั้น
    if (defined('MAIN_INIT')) {
        // โหลด rss
        $header[] = '<link rel="alternate" type="application/rss+xml" title="'.$config[$module][menu].'" href="'.$config[web_url].'/'.$module.'.rss" />';
        // เมนูด้านข้างสำหรับบทความใหม่ 10 รายการ
        $blog = array();
        $sql = "SELECT * FROM $prefix$config[db_blog] ORDER BY id DESC LIMIT 10";
        foreach ($db->customQuery($sql) AS $item) {
            $blog[] = '<li><a href="'.getURL('blog', $item[topic], '', '').'">'.$item[topic].'</a></li>';
        }
        $skin = preg_replace('/{BLOG}/', implode("\n", $blog), $skin);

    }
?>[/code]
สิ่งที่ต้องทำก็คือ แก้ไขไฟล์ modules/blog/inint.php ครับ ซึ่งไฟล์นี้ สามารถที่จะมีหรือไม่ก็ได้ภายในทุกโมดูล และไฟล์นี้ จะถูกเรียกทุกครั้งที่มีการเรียกหน้าเว็บหลักในครั้งแรก ให้เพิมเติมโค้ดในส่วนสีแดงลงในไฟล์นี้ครับ

โค้ดไม่ได้ทำอะไรมากแค่ query ข้อมูลของ blog ล่าสุด 10 รายการเท่านั้น แล้วนำไปแทนที่ลงใน {BLOG} ตามที่ผมได้เกริ่นไว้

ที่เหลือสุดท้าย คือ ตกแต่งเมนูให้สวยงามด้วย CSS ครับ
16 สค. 2552 14:22 | 0 | ดู 734 | เมนูด้านข้างของ GCMS เวอร์ชั่น 3