[ตอนที่ 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.     
  3. เสร็จแล้วเราจะทำการสร้าง 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 เลย
         
  4.     
  5. ขั้นตอนต่อไปเราจะทำการแก้ไข 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(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!

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

^