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

01 ก.ย. 2559 5,662 0 ความคิดเห็น

ตอนที่ 2 นี้จะเป็นการออกแบบให้คชสารใช้งานร่วมกับ Template ซึ่ง Template ของคชสารจะถูกเก็บไว้ในไดเร็คทอรี่ skin/ โดยค่าเริ่มต้นคชสารจะใช้ชื่อ Template ว่า default (ค่ากำหนดนี้อยู่ที่ Kotchasan/config.php) โดยที่ชื่อ Template นี้คือชื่อไดเร็คทอรี่ที่เก็บไฟล์ Template นั่นเอง

ก่อนอื่น สร้างไดเร็คทอรี่ skin/default/ (ตัวพิมพ์เล็กนะครับ)
สร้างไฟล์ 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 ให้สัมพันธ์กัน)
ขั้นตอนต่อไปให้ทำการแก้ไข 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)

เสร็จแล้วลองเรียกหน้าเว็บดูอีกครั้งครับ

บทความที่เกี่ยวข้อง