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

ตอนที่ 3 จะเป็นตัวอย่างการสร้างเว็บไซต์ที่มีหน้าเพจ โดยที่เราจะมีการสร้างหน้าเพจขึ้น 2 หน้า หน้าแรกคือ home และอีกหน้าคือ about

กลไกการเรียกหน้าเพจของตัวอย่างนี้ ผมกำหนดให้มีการรับค่าจาก $_GET['module'] มาและทำการแสดงหน้าเพจที่เกี่ยวข้อง ยกตัวอย่างมีการเรียก URL http://domain.tld/?module=home จะเป็นการแสดงหน้า home หรือเมือเรียก http://domain.tld/?module=about จะแสดงหน้า about เป็นต้น

ตัวอย่างนี้ผมไม่ได้ใช้ฐานข้อมูลใดๆทั้งสิ้น แต่จะใช้วิธีการสร้างหน้า page ที่เป็น HTML มาให้คชสารเรียกมาแสดงเท่านั้น เช่น หน้า home ผมก็จะเขียนเนื้อหาลงใน home.html เป็นต้น
  1. อันดับแรก เราจะต้องสร้างไฟล์ HTML ลงใน Template ก่อน โดยสร้างไฟล์ skin/default/home.html สำหรับหน้า Home และ skin/default/about.html เสร็จแล้วใส่เนื่อหาที่ต้องการลงในนั้น (ดูโค้ดได้ที่ไฟล์ตัวอย่างที่ดาวน์โหลดนะครับ)
  2. เสร็จแล้วเราจะทำการสร้าง View เพื่อแสดงหน้าที่สร้างไว้
    namespace Index\Home;

    class View extends \Kotchasan\View
    {

      public function render()
      {
        // โหลด template หน้า home.html มาส่งให้ Controller (ไม่ต้องระบุ .html)
        return \Kotchasan\Template::load('', '', 'home');
      }

      // คืนค่าข้อความบนไตเติลบาร์เมื่อแสดงหน้านี้ ไปยัง Controller
      public function title()
      {
        return 'Home Page';
      }
    }

    ผมยกตัวอย่างหน้า home (Index\Home\View) เพียงหน้าเดียวนะครับ ซึ่งหน้านี้จะทำหน้าที่หลักในการโหลด home.html มาเท่านั้น (หน้า about ดูในไฟล์ตัวอย่าง)

    แถมให้อีกอันผมได้สร้าง Index\Pagenotfound\View ไว้ด้วย ซึ่งหน้านี้ผมจะใช้แสดงเมื่อมีการระบุค่า module มาไม่ถูกต้องหรือไม่มีอยู่จริง
    namespace Index\Pagenotfound;

    class View extends \Kotchasan\View
    {

      public function render()
      {
        return '<div class=error>ขออภัย ไม่พบหน้าที่เรียก</div>';
      }

      public function title()
      {
        return '404 Page not found!';
      }
    }

    สังเกตุนะครับว่าไฟล์นี้ไม่ได้โหลดจาก template แต่ใช้วิธีส่งออก HTML เลย
     
  3. ขั้นตอนต่อไปเราจะทำการแก้ไข Index\Index\Controller ตามนี้
    namespace Index\Index;

    use \Kotchasan\Http\Request;
    use \Kotchasan\Template;

    class Controller extends \Kotchasan\Controller
    {

      public function index(Request $request)
      {
        // รับค่าจาก $_GET['module'] ถ้าไม่มีการส่งค่ามาจะคืนค่า home โดยคืนค่าเป็น string ที่ตัวแปร module
        // method filter() กำหนดให้รับค่าเฉพาะตัวอักษรที่กำหนดเท่านั้น
        $module = $request->get('module', 'home')->filter('a-z');
        // กำหนดค่า template ที่ใช้งานอยู่
        Template::init('skin/'.self::$cfg->skin);
        // ตรวจสอบว่ามี View ของหน้าที่เรียกหรือไม่
        // เช่น Index\Home\View สำหรับหน้า home
        // ถ้าไม่พบหน้าที่เรียกจะคืนค่า Index\Pagenotfound\View
        $class = 'Index\\'.ucfirst($module).'\View';
        if (method_exists($class, 'render')) {
          // โหลดหน้าที่เรียก
          $content = createClass($class);
        } else {
          // โหลดหน้า Pagenotfound เมื่อไม่พบหน้าที่เรียก
          $content = createClass('Index\Pagenotfound\View');
        }
        // เริ่มต้นใช้งาน View
        $view = new \Kotchasan\View;
        // ใส่เนื้อหาลงใน View ตามที่กำหนดใน Template
        // ตาม method ของ View
        $view->setContents(array(
          // ข้อความจาก View แสดงบน title bar
          '/{TITLE}/' => $content->title(),
          // เนื้อหาหน้า View ที่เรียกใช้งาน
          '/{CONTENT}/' => $content->render(),
        ));
        // โหลด GCSS ลงใน template
        $view->addCSS(WEB_URL.'skin/gcss.css');
        // โหลด template หลัก (index.html)
        $template = Template::load('', '', 'index');
        // ส่งออก HTML
        echo $view->renderHTML($template);
      }
    }

    คำอธิบายอยู่ในโค้ดเลยครับ นอกจากนี้ตัวอย่างนี้ยังมีการเรียกใช้ GCSS ซึ่งเป็น CSS Framework หลักของคชสารอีกด้วย
$view->addCSS(WEB_URL.'skin/gcss.css');
  • ไฟล์ GCSS อยู่ที่ skin/gcss.css
  • WEB_URL เป็นตัวแปร Global ของคชสารเก็บค่า URL รวม path ของเว็บไซต์
เสร็จแล้วลองเรียกเว็บไซต์ดูครับ
0SHAREFacebookLINE it!