Tag Archives: template engine

มาลองใช้งาน Template Engine กัน

2 Jun

เชื่อว่าผู้อ่านทั้งหลายที่เคยลองเขียน Web Application (ในที่นี้จะขอกล่าวถึงเฉพาะการเขียน Web Application ด้วยภาษา PHP) ไม่ว่าจะเพิ่งหัดใหม่หรืออยู่ในระดับมือโปร น่าจะคุ้นเคยกับการแทรกสคริปต์ PHP เข้าไปใน HTML แล้วเซฟไฟล์ด้วยนามสกุล .php กันเป็นอย่างดี
ว่าแต่ ว่ามีผู้อ่านคนไหนเคยสงสัยมั้ยครับว่า การแทรกสคริปต์เข้าไปใน HTML อย่างนี้ ถ้าเกิดในอนาคตเราอยากจะเปลี่ยนดีไซน์ให้มัน จะทำอย่างไรล่ะ
ถ้าท่านสงสัย ท่านน่าจะเจอคำตอบที่ถูกใจแล้วล่ะครับ

จากปัญหาที่ได้กล่าวมาข้างต้น จะเห็นว่าเป็นปัญหาที่เกิดจากการที่เราเขียนโปรแกรมให้ส่วนของ Presentation กับ Logic มันปนกันอยู่
ทีนี้เวลาเราอยากจะแก้ Presentation เราก็ต้องมาพะวงว่ามันจะไปทำให้ Logic มันผิดหรือเปล่า
หรือ เวลาเราอยากจะเพิ่มฟังก์ชันการทำงาน (หรือก็คือต้องแก้ไข Logic) เราก็ต้องมาพะวงอีกล่ะว่ามันจะไปทำให้ Presentation เพี้ยนไปอีกหรือเปล่า

ด้วยเหตุผลเหล่านี้ จึงเกิดเครื่องมือที่เรียกว่า Template Engine ขึ้นมาครับ
Template Engine คืออะไร ขออธิบายสั้นๆ ว่า มันคือ Tools ตัวหนึ่งที่ช่วยแบ่งแยกส่วน Presentation กับ Logic ให้แยกออกจากกันคนละไฟล์ครับ
เมื่อเราแยกทั้งสองส่วนออกจากกันได้แล้ว พอเราอยากแก้เพียงส่วนใดส่วนหนึ่ง เราก็ไม่ต้องไปกังวลว่าจะเกิดผลกระทบขึ้นกับอีกส่วนหรือไม่อีกต่อไป
มา ถึงตรงนี้แล้ว เชื่อหลายคนคงเริ่มจินตนาการแล้วล่ะว่าจะทำให้เว็บไซต์ที่เราเขียนขึ้นมา เองสามารถเปลี่ยน Theme ได้อย่างสะดวกสบายขึ้นเหมือนกับที่ CMS หลายๆ ยี่ห้อสามารถทำได้
แต่ก่อนที่จะไปถึงตรงนั้น เราควรจะรู้วิธีการใช้งาน Template Engine กันก่อนใช่มั้ยครับ ดังนั้น มาเริ่มกันเลยดีกว่า

Template Engine สำหรับ Web Application ที่เขียนด้วยภาษา PHP ที่เป็นที่นิยมกัน หลายๆ คนอาจจะเคยได้ยินชื่อมาบ้าง นั่นคือ smarty
แต่ในที่นี้ ผมขอยกตัวอย่างการใช้งาน Template Engine ที่พัฒนาขึ้นโดย Nathan Codding แห่ง phpBB group
สำหรับใครที่ต้องการซอร์สโค้ด สามารถดาวน์โหลดได้จาก http://www.phpbb.com/
สำหรับ คนที่หาไม่เจอ ขอบอกว่า ดาวน์โหลดซอร์สโค้ดของ phpBB ทั้งชุดนั่นแหละครับ ชุดที่ใครหลายๆ คนเอามาใช้ติดตั้งเป็นเว็บบอร์ดสำเร็จรูปกัน
ไฟล์ที่เราสนใจคือ template.php จะอยู่ที่ /phpBB2/include/template.php
วิธีการใช้งานมีขั้นตอนดังนี้
ตัวอย่างไฟล์ HTML ชื่อ index_body.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Using Template Engine</title>
</head>

<body>
<h1 align=”center”>{title}</h1>
<table width=”350″ border=”1″ align=”center”>
<tr bgcolor=”#CCFFFF”>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
</tr>
<!– BEGIN person –>
<tr>
<td>{person.fname}</td>
<td>{person.lname}</td>
<td>{person.gender}</td>
</tr>
<!– END person –>
</table>
<p align=”center”> </p>
</body>
</html>

สิ่งที่อยากให้สังเกต มีดังนี้

  1. {title} การที่เราเอา { กับ } ไปครอบไว้ที่ข้อความ “title” นั่นเปรียบเหมือนกับเราสร้างตัวแปรชื่อ title เอาไว้ ทีนี้เมื่อเราเขียนส่วน Logic เราก็สามารถนำข้อความใดๆ ไปแทนที่ตรงตำแหน่งของ {title} ได้
  2. ส่วนที่ถูกครอบด้วย Comment นั่นคือ <!– BEGIN person –> และ <!– END person –>
    ส่วนนี้บอกว่าจะเกิดการวนลูปตรงนี้นะ โดย <!– BEGIN person –> จะเป็นจุดเริ่มต้นลูป (เสมือนปีกกาเปิดในภาษา C)
    ส่วน <!– END person –> จะเป็นจุดสิ้นสุดของลูป
  3. ตัวแปรที่อยู่ระหว่าง <!– BEGIN person –> กับ <!– END person –>
    สังเกตว่าตัวแปรแต่ละตัวจะขึ้นต้นด้วย person ตามด้วย .
    ตรงนี้ขอให้คิดว่า person คือ Array ซึ่งมี index คือ fname, lname และ gender
    เมื่อการวนลูปเกิดขึ้น โปรแกรมจะทำการนำค่าของ person.fname, person.lname และ person.gender ไปแทนที่ในตำแหน่งที่เรากำหนดไว้

อ้อ ถ้าเกิดเราอยากใช้ชื่ออื่นแทน person เช่น จะใช้คำว่า temp อย่าลืมแก้คำที่อยู่ในคอมเมนต์ด้วยนะครับ โดยแก้เป็น และ ตามลำดับ

จบในส่วนของ Presentation กันแล้ว มาเริ่มกันที่ส่วนของ Logic กันได้เลย
มาดูตัวอย่างโค้ดกันก่อน
ชื่อไฟล์ index.php

  1. <?php
  2. include(“includes/template.php”);
  3. $template = new Template(“./templates/”);
  4. $template->set_filenames(array(“body” => “index_body.html”));
  5. $template->assign_var(“title”, “This is TITLE”);
  6. $arr[] = array(“firstname” => “Warot”,
  7. “lastname” => “Anusakprasit”,
  8. “gender” => “male”);
  9. $arr[] = array(“firstname” => “Thaksin”,
  10. “lastname” => “Shinawatra”,
  11. “gender” => “male”);
  12. $arr[] = array(“firstname” => “Khemanij”,
  13. “lastname” => “Jamikorn”,
  14. “gender” => “female”);
  15. foreach($arr as $value) {
  16. $data["fname"] = $value["firstname"];
  17. $data["lname"] = $value["lastname"];
  18. $data["gender"] = $value["gender"];
  19. $template->assign_block_vars(“person”, $data);
  20. }
  21. $template->pparse(“body”);
  22. ?>

บรรทัดที่ 2 คือ include ไฟล์ template.php เข้ามาก่อน มิฉะนั้นจะไม่สามารถใช้งานได้
บรรทัดที่ 4 คือ สร้าง object ของคลาส Template โดยมีพารามิเตอร์ 1 ตัว คือพาธที่เก็บไฟล์ html ไว้ ในที่นี้จะเก็บไว้ในโฟลเดอร์ชื่อ templates
บรรทัดที่ 5 บอกไฟล์สคริปต์ index.php มองหาไฟล์ index_body.html
บรรทัดที่ 7 บอกให้นำข้อความ “This is TITLE” ไปแทนที่ {title} ด้วยฟังก์ชัน assign_var
บรรทัดที่ 9-17 สร้าง Array ชื่อ $arr ที่เก็บชื่อ สกุล และเพศ เอาไว้ เพื่อนำไปแทนที่ในตำแหน่งของ person
บรรทัดที่ 19-25 นำค่าจาก Array ชื่อ $arr ไปใส่แทนที่ person.fname, person.lname และ person.gender ตามลำดับ โดยนำไปฝากไว้ใน Array ชื่อ $data แล้วให้ $data ไปใส่ใน “person” อีกที ด้วยคำสั่ง assign_block_vars
บรรทัดที่ 26 หลังจาก assign อะไรต่อมิอะไรเรียบร้อยแล้ว อย่าลืมสั่งให้มันโหลดไฟล์เพื่อแสดงผล

ขั้นตอนสุดท้าย เปิด web server จำลอง หรืออัพโหลดขึ้น server จริง แล้วลองรันดูครับ ที่เหลือจะลองแก้อะไรก็ตามสบายแล้ว

ง่ายล่ะสิ !!!

จากตัวอย่างข้างต้น ขอสรุปการทำงานของฟังก์ชันที่สำคัญๆ ดังนี้

  1. constructor สร้าง object ของคลาส Template และสั่งให้มองหาตำแหน่งที่เก็บ HTML ไว้
  2. set_filenames สั่งให้ Handler มองหาไฟล์ HTML ตามที่พารามิเตอร์ระบุ
  3. assign_var แทนที่ตำแหน่งที่กำหนดไว้ใน HTML ด้วย String ตามที่เราต้องการ
  4. assign_block_vars แทนที่ตำแหน่งที่กำหนดไว้ใน HTML ด้วย String ตามที่เราต้องการ แบบ Iterative
  5. pparse โหลดและคอมไพล์ไฟล์

ยังมีวิธีการใช้งานที่ advance ยิ่งกว่านี้อีกมากครับ สามารถเข้าไปศึกษาได้ที่ http://area51.phpbb.com/docs/coding-guidelines.html#templating