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

ตอนที่ 2 นี้จะเป็นการออกแบบให้คชสารใช้งานร่วมกับ Template ซึ่ง Template ของคชสารจะถูกเก็บไว้ในไดเร็คทอรี่ skin/ โดยค่าเริ่มต้นคชสารจะใช้ชื่อ Template ว่า default (ค่ากำหนดนี้อยู่ที่ Kotchasan/config.php) โดยที่ชื่อ Template นี้คือชื่อไดเร็คทอรี่ที่เก็บไฟล์ Template นั่นเอง
  1. ก่อนอื่น สร้างไดเร็คทอรี่ skin/default/ (ตัวพิมพ์เล็กนะครับ)
  2. สร้างไฟล์ index.html ลงในไดเร็คทอรี่ skin/default/ ซึ่งจะเป็นไฟล์ Template หลักที่ใช้แสดงหน้าเว็บไซต์
    <!DOCTYPE html>
    <html>
      <head>
        <title>{TITLE}</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
      </head>
      <body>
        <div>{CONTENT}</div>
      </body>
    </html>

    หลักการ Template ของคชสารคือการแทนที่ข้อความหรือโค้ดที่ต้องการลงบนตัวแปรใน HTML ตัวอย่างนี้ {TITLE} และ {CONTENT} คือตัวแปร (เราสามารถกำหนดรูปแบบตัวแปรเป็นอย่างอื่นได้ โดยการกำหนดค่าตอนที่จะแทนที่ข้อมูลลงใน View ให้สัมพันธ์กัน)
  3. ขั้นตอนต่อไปให้ทำการแก้ไข Index\Index\Controller ให้เรียกใช้ View
    namespace Index\Index;

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

    class Controller extends \Kotchasan\Controller
    {

      public function index(Request $request)
      {
        // กำหนดค่า template ที่ต้องการใช้งาน
        Template::init('skin/'.self::$cfg->skin);
        // สร้าง View
        $view = new \Kotchasan\View;
        // แทนที่ข้อความลงใน View
        $view->setContents(array(
          '/{TITLE}/' => self::$cfg->web_title,
          '/{CONTENT}/' => self::$cfg->web_description 
        ));
        // โหลดไฟล์ Template (index.html)
        $template = Template::load('', '', 'index');
        // แสดงผล
        echo $view->renderHTML($template);
      }
    }

    คำอธิบายอยู่ในโค้ดนะครับ ผมอธิบายเพิ่มบางส่วนดังนี้
    • self::$cfg->skin เป็นตัวแปรระบุ Template ที่ใช้งานอยู่ อยู่ในไฟล์ Kotchasan/config.php ซึ่งค่าเริ่มต้นคือ default ตามที่เราสร้าง Template ไว้ รวมกับโฟลเดอร์ skin/ ซึ่งเป็นไดเร็คทอรี่ที่เก็บ Template
    • $view->setContents(); เป็นเมธอดสำหรับแทนที่ตัวแปรลงในไฟล์ สังเกตุนะครับว่าผมใช้ /{TITLE}/ ซึ่งเป็นรูปแบบ pcre เนื่องจากเมธอดนี้รองรับการใช้งาน pcre ด้วยนั่นเอง ดังนั้นถ้ามีการกำหนดค่าเป็นอย่างอื่นให้ระบุให้ถูกต้องตามรูปแบบด้วย
    • {TITLE} จะถูกแทนที่ด้วย web_title และ {DESCRIPTION} จะถูกแทนที่ด้วย web_description (ดูใน Kotchasan/config.php)
เสร็จแล้วลองเรียกหน้าเว็บดูอีกครั้งครับ
0SHAREFacebookLINE it!