ในบทนี้เราจะมาสร้างเมนูให้กับเว็บไซต์ของเรากัน ซึ่งคชสารสนับสนุนเมนูแบบ Responsive ด้วยแล้ว ทำให้การสร้างเมนูแบบ Responsive ไม่ยากอีกต่อไป (รวมถึง GCSS ซึ่งเป็น CSS Framework ของคชสารก็ยังสนับสนุน Responsive ด้วย)
- ขั้นตอนแรก เราจะมาสร้างรายการเมนูกันก่อน ผมจะสร้างคลาส Index\Menu\Model เพื่อเก็บรายการเมนูที่สามารถใช้งานได้
namespace Index\Menu;
class Model
{
public static function get()
{
return array(
'home' => array(
'text' => 'HOME',
'url' => 'index.php'
),
'about' => array(
'text' => 'ABOUT',
'url' => 'index.php?module=about'
),
'download' => array(
'text' => 'DOWNLOAD',
'submenus' => array(
'kotchasan' => array(
'text' => 'Kotchasan',
'url' => 'http://www.kotchasan.com',
'target' => '_blank'
),
'github' => array(
'text' => 'Github',
'url' => 'https://github.com/goragodwiriya/kotchasan-site',
'target' => '_blank'
)
)
)
);
}
}
เมธอด get() จะทำหน้าที่ส่งออกรายการเมนู ซึ่งอยู่ในรูป Array นอกจากนี้จะเห็นว่าในโค้ดเมนูรายการสุดท้าย (download) ยังแสดงให้เห็นว่าเมนูของคชสารยังสนับสนุนเมนูย่อยอีกด้วย ซึ่งคชสารสนับสนุนเมนูย่อยได้ 2 ระดับ (ดูโค้ดเต็มๆได้ที่โค้ดที่ดาวน์โหลด)
- ขั้นตอนต่อมาเราจะไปแทรก Template ส่วนของเมนูลงใน index.html
<body>
<nav><ul>{TOPMENU}</ul></nav>
<div>{CONTENT}</div>
</body>
ส่วนที่เพิ่มมาใหม่คือ template ของเมนูนั่นเอง
สุดท้ายเราต้องเขียนโค้ดเพื่อจะแทนที่เมนูลงใน Template ที่เมธอด setContents() ของ View ใน Index\Index\Controller ซึ่งคชสารมีคลาสสำหรับการสร้างเมนูไว้พร้อมแล้ว$view->setContents(array(
// ข้อความจาก View แสดงบน title bar
'/{TITLE}/' => $content->title(),
// เนื้อหาหน้า View ที่เรียกใช้งาน
'/{CONTENT}/' => $content->render(),
// แสดงเมนู
'/{TOPMENU}/' => \Kotchasan\Menu::render(\Index\Menu\Model::get(), $module)
));
- \Kotchasan\Menu::render(); คือคำสั่งสำหรับสร้างเมนูของคชสาร รับอาร์กิวเมนต์สองตัวคือตัวแรกเป็นข้อมูลเมนู ซึ่งมีรูปแบบตามที่เราสร้างไว้ใน \Index\Menu\Model
- ส่วนอาร์กิวเมนต์ตัวที่สองใช้สำหรับระบุค่าเมนูที่จะเลือก ซึ่งจะตรงกันกับค่าคีย์ของข้อมูลเมนู (ดูในโค้ดส่วนที่เป็นสีม่วง) ซึ่งตัวอย่างนี้เป็นการรับค่าโมดูล (module) ที่เรียกมานั่นเอง และเมนูที่สร้างแล้วจะถูกนำไปใส่ลง Template ที่ตำแหน่ง {TOPMENU} เพื่อแสดงผลว่าเมนูนี้ถูกเลือกอยู่
เสร็จแล้วลองเรียกเว็บไซต์ดูผลงาน
อิอิ อ่านกี่ทีก้อยังงง ว่าไปอ่านรู้เรื่องได้ยังงัย
จริงด้วยแหะ ตอนมองผ่านเหมือนไม่รู้เรื่องพออ่านจริงๆก็อ่านได้ ^^
oh สุดยอดอ้ะขนาดพิมไม่ค่อยเป็นคำยังอ่านได้สบาย ๆ Lnw
ใช่ๆๆๆๆ