Kotchasan PHP Framework

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

ในบทนี้เราจะมาสร้างเมนูให้กับเว็บไซต์ของเรากัน ซึ่งคชสารสนับสนุนเมนูแบบ Responsive ด้วยแล้ว ทำให้การสร้างเมนูแบบ Responsive ไม่ยากอีกต่อไป (รวมถึง GCSS ซึ่งเป็น CSS Framework ของคชสารก็ยังสนับสนุน Responsive ด้วย)
        
  1. ขั้นตอนแรก เราจะมาสร้างรายการเมนูกันก่อน ผมจะสร้างคลาส Index\Menu\Model เพื่อเก็บรายการเมนูที่สามารถใช้งานได้namespace Index\Menu;
        
        class Model
        {
        
          public 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/goragod/kotchasan-site',
                    'target' => '_blank'
                  )
                )
              )
            );
          }
        }
    เมธอด get() จะทำหน้าที่ส่งออกรายการเมนู ซึ่งอยู่ในรูป Array นอกจากนี้จะเห็นว่าในโค้ดเมนูรายการสุดท้าย  (download) ยังแสดงให้เห็นว่าเมนูของคชสารยังสนับสนุนเมนูย่อยอีกด้วย ซึ่งคชสารสนับสนุนเมนูย่อยได้ 2 ระดับ (ดูโค้ดเต็มๆได้ที่โค้ดที่ดาวน์โหลด)
  2.     
  3. ขั้นตอนต่อมาเราจะไปแทรก 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} เพื่อแสดงผลว่าเมนูนี้ถูกเลือกอยู่
เสร็จแล้วลองเรียกเว็บไซต์ดูผลงาน