[ตอนที่ 4] เวิร์คช้อปการสร้างเว็บไซต์อย่างง่ายด้วยคชสาร

ในบทนี้เราจะมาสร้างเมนูให้กับเว็บไซต์ของเรากัน ซึ่งคชสารสนับสนุนเมนูแบบ Responsive ด้วยแล้ว ทำให้การสร้างเมนูแบบ Responsive ไม่ยากอีกต่อไป (รวมถึง GCSS ซึ่งเป็น CSS Framework ของคชสารก็ยังสนับสนุน Responsive ด้วย)
  1. ขั้นตอนแรก เราจะมาสร้างรายการเมนูกันก่อน ผมจะสร้างคลาส 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 ระดับ (ดูโค้ดเต็มๆได้ที่โค้ดที่ดาวน์โหลด)
  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} เพื่อแสดงผลว่าเมนูนี้ถูกเลือกอยู่
เสร็จแล้วลองเรียกเว็บไซต์ดูผลงาน
0SHAREFacebookLINE it!

เรื่องที่เกี่ยวข้อง