Sixhead Template PHP Template Engine ไทยทำตอนที่ 3
เข้าตอนนี้จะเริ่มพูดถึงเทคนิคขั้นสูงขึ้นเพื่อความสะดวกในการใช้งาน Sixhead Template ครับ น่าจะมึนกันไปพักใหญ่ๆสำหรับคนที่ศึกษา Sixhead Tempalte นะครับเพราะโดยหลักการแล้วแทบจะฉีกตำราวิธีคิดเดิมๆที่เคยอ่านในหนังสือมา
ด้วยวิธีคิดแบบนี้แหล่ะครับ เราจะได้เห็น อนาคตการพัฒนา PHP Framework เกิดขึ้น ไว้หาโอกาสเหมาะๆ ผมจะไป Review PHP Hoffman Framework ของ @FordAntiTrust ต่อ (หาคนสอนอยู่ผมค่อนข้างโง่เรื่อง Framework)
มาดูเทคนิคเพิ่มเติมของ Sixhead Template กันต่อครับคิดว่า ตอนนี้น่าจะเป็นตอนจบในเนื้อหาหลักแล้ว ตอนต่อไป อาจจะเป็นการเก็บตกและเอาตัวอย่างการใช้งานจริงมาอธิบายให้ฟังกัน
เล่นกับ block สร้างลูกๆช่วยทำงานด้วย sub
sub คือ ส่วนประกอบย่อยของ block ที่ระบุเป็นตัวเลข ใน 1 block จะมี sub ได้ไม่จำกัด แต่ sub จะต้องเรียงต่อกันไป
ลักษณะการเขียนจะเขียนแบบนี้
<!--SiXhEaD:BLOCK1-->
<!--sub:1-->
กลุ่มข้อมูลใน Sub 1
<!--/sub:1-->
<!--sub:2-->
กลุ่มข้อมูลใน Sub 2
<!--/sub:2-->
<!--/SiXhEaD:BLOCK1-->
sub เกิดมาเพื่อในวนลูป ทำซ้ำอะไรซักอย่างครับถ้าจะให้เห็นภาพง่ายๆลองนึกตัวอย่าง ตารางของ Webboard ซักอันครับ
ที่ตารางรายกระทู้ Webboard นั้น มีการสลับสีต่างๆกันไปด้วย
ลองนึกถึงสภาพการเขียน PHP ตามปกติ มันจะดูวุ่นวายแค่ไหน ในการแสดงผลกระทู้ ให้สีของตารางสลับไปมา
แล้วมาลองดูวิธีของ sub ครับ
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$title</title>
</head>
<body bgcolor="#FFFFFF">
<h1>$header</h1>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<!--SiXhEaD:TOPICLIST-->
<!--sub:1-->
<tr>
<td bgcolor="#FF3399">กระทู้ที่ $topic_id เทพเทือก </td>
</tr>
<!--/sub:1-->
<!--sub:2-->
<tr>
<td bgcolor="#66CC33">กระทู้ที่ $topic_id ลุงหมัก </td>
</tr>
<!--/sub:2-->
<!--sub:3-->
<tr>
<td bgcolor="#77BBFF">กระทู้ที่ $topic_id ลุงเหลิม</td>
</tr>
<!--/sub:3-->
<!--/SiXhEaD:TOPICLIST-->
</table>
</body>
</html>
template ชิ้นนี้ ก็จะมี block ชื่อ TOPICLIST อยู่โดยใน block จะมี sub ย่อยอยู่ 3 sub ในแต่ละ sub จะประกอบด้วย ตารางของกระทู้ที่แสดงสีแตกต่างกันอยู่ ลองดูตัวอย่าง php ที่ใช้เรียกดูครับ
<?php
## test5.php ##
require_once "../SiXhEaD.Template.php";
$title ="หัว Title ของ Website";
$header ="ตัวอย่างของการแสดงกระทู้สลับสี";
$tp = new Template("_tp_template.html");
$tp->block("TOPICLIST");
$tp->sub(3);
for ($i=1;$i<=7;$i++) {
$topic_id = $i;
$tp->apply();
}
$tp->display();
exit;
?>
template ชิ้นนี้ ก็จะมี block ชื่อ TOPICLIST อยู่โดยใน block จะมี sub ย่อยอยู่ 3 sub ในแต่ละ sub จะประกอบด้วย ตารางของกระทู้ที่แสดงสีแตกต่างกันอยู่ ลองดูตัวอย่าง php ที่ใช้เรียกดูครับ
เพิ่มเติมอีกนิด ช่วย sub อีกหน่อยด้วย get_current_sub(); และ get_current_sub_total();
เนื่องจากในระหว่างที่เราวนลูปใน sub นั้นในบางกรณีเราอาจจะจำเป็นต้องทราบว่า ในขณะนั้น อยู่ที่ตำแหน่ง sub id อะไร
เราจะใช้ get_current_sub(); ครับเพื่อเอาไว้ดูว่า ตอนนี้อยู่ที่ sub ไหนแล้ว แน่นอน get_current_sub_total(); ก็ใช้เพื่อหาว่า ทั้งหมดของ sub มีกี่อัน
เท่าที่สอบถามพี่โป้ได้ความว่า เจ้า get_current_sub(); กับ get_current_sub_total(); มันมีประโยชน์เวลาเอาไปวนสร้างตาราง นึกถึง ตารางที่ประกอบด้วย table, tr, td ซึ่งมันจะช่วยประกอบให้ ตารางครบถ้วนตามโครงสร้างภาษา html
นึกภาพไม่ออก ลองดูตัวอย่างครับ
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$title</title>
</head>
<body bgcolor="#FFFFFF">
<h1>$header</h1>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<!--SiXhEaD:TOPICLIST-->
<!--sub:1-->
<tr>
<td align="center" bgcolor="#99FF66">row $row - column $col </td>
<!--/sub:1-->
<!--sub:2-->
<td align="center" bgcolor="#33FFCC">row $row - column $col </td>
<!--/sub:2-->
<!--sub:3-->
<td align="center" bgcolor="#FF3333">row $row - column $col </td>
</tr>
<!--/sub:3-->
<!--/SiXhEaD:TOPICLIST-->
</table>
</body>
</html>
จาก template ที่เห็นเป็นการแสดงผลแบบ table โดยมี block และ sub วางเอาไว้ 3 ตัวโดย sub 1 และ sub 3 จะคร่อม tr เพื่อจัดแถวใหม่
ลักษณะ table แบบนี้อาจจะพบเห็นกันในพวกตารางสินค้า หรือ ตารางรูปภาพ gallery ต่างๆ
ต่อไปเรามาดู ส่วน php ครับ
<?php
## test6-1.php ##
require_once "../SiXhEaD.Template.php";
$title ="หัว Title ของ Website";
$header ="ตัวอย่างของการแสดงกระทู้สลับสี";
$tp = new Template("_tp_template.html");
$tp->block("TOPICLIST");
$tp->sub(3);
for ($i=1;$i<=7;$i++) {
$col = $tp->get_current_sub();
if ($tp->get_current_sub() ==1) {
$row = $row+1;
}
$tp->apply();
}
$tp->display();
exit;
?>
จาก php เมื่อเรารัน script จะเห็นว่า ใน loop for จะทำการวน 7 ครั้งและได้ html ออกมาโดยไม่ครบ tr ดังรูป
ผลก็คือแม้ว่าการแสดงผลไม่เพี้ยน แต่ โดยมารยาทแล้วเราควรเปิด และปิด tag html ให้ถูกต้อง ฉะนั้น ลองดูวิธีแก้ครับ
<?php
## test6-2.php ##
require_once "../SiXhEaD.Template.php";
$title ="หัว Title ของ Website";
$header ="ตัวอย่างของการแสดงกระทู้สลับสี";
$tp = new Template("_tp_template.html");
$tp->block("TOPICLIST");
$tp->sub(3);
for ($i=1;$i<=7;$i++) {
$col = $tp->get_current_sub();
if ($tp->get_current_sub() ==1) {
$row = $row+1;
}
$tp->apply();
}
for ($j=$tp->get_current_sub();$j<=$tp->get_current_sub_total();$j++) {
$col = $tp->get_current_sub();
if ($tp->get_current_sub() ==1) {
$row = $row+1;
}
$tp->apply();
}
$tp->display();
exit;
?>
จะเห็นว่า ส่วนที่เพิ่มขึ้นมาจะใช้ get_current_sub(); กับ get_current_sub_total(); ตรวจสอบว่า ครบแถว หรือยัง ถ้ายังไม่ครบก็ประกอบเข้าไปให้ครบนั้นเอง ลองคิดดู สมมุติทำหน้า gallery หรือ สินค้าต่างๆ เราสามารถใช้เทคนิคนี้ประกอบ tr ให้ครบได้นั้นเอง
จริงๆแล้ว ผมเลี่ยงไปใช้ div กับ css ก็ได้นะพี่โป้ ฮาๆ :P
เรื่อง block อีกซักนิด ด้วย block_html และ apply_block
ผมลืมเรื่อง block ไปนิดนึง :P ขออีกซัก 2 คำสั่งครับ ในการใช้งานจริง เราอาจจะเขียน block ต่างๆ กองเอาไว้ใน templete html file เดียวเลยก็ได้ครับ เช่น template สำหรับการ login เข้าระบบ ก็อาจจะวาง block
- block login form
- block login error username
- block login error password
- block user profile
หากเราเขียนให้ปิดๆ เปิดๆ block ทั้งหมด อาจจะดูวุ่นวาย ก็ได้ ถ้ากอง block ต่างๆไว้ที่ template เดียวกันซัก 20 block นี่ปวดกบาลเลย ฉะนั้นแล้วเราจะใช้เจ้า block_html และ apply_block ดึงออกมาใช้งานนั้นเองลองดูตัวอย่างครับ
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$title</title>
</head>
<body bgcolor="#FFFF99">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td bgcolor="#66CC66"><h1>$header</h1></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">$content</td>
</tr>
<tr>
<td align="center" bgcolor="#FFCCCC">$footer</td>
</tr>
</table>
</body>
</html>
<!--SiXhEaD:MEMBER_LOGIN-->
<h3>$topiccontent</h3>
<form name="form1" method="post" action="index.php">
username
<input name="username" type="text" id="username">
password
<input name="password" type="password" id="password">
<input type="submit" name="Submit" value="Submit">
<hr/>
</form>
<!--/SiXhEaD:MEMBER_LOGIN-->
<!--SiXhEaD:MEMBER_LOGIN_ERROR1-->
<h2> Login $username Username Error</h2>
<p><a href="index.php">กลับไป Login ใหม่</a></p>
<hr/>
<!--/SiXhEaD:MEMBER_LOGIN_ERROR1-->
<!--SiXhEaD:MEMBER_LOGIN_ERROR2-->
<h2> Login $password Password Error</h2>
<p><a href="index.php">กลับไป Login ใหม่</a></p>
<hr/>
<!--/SiXhEaD:MEMBER_LOGIN_ERROR2-->
<!--SiXhEaD:MEMBER_PROFILE-->
<h2>$username Login เข้ามาแล้ว</h2>
<hr/>
<!--/SiXhEaD:MEMBER_PROFILE-->
<?php
## test7-1.php ##
require_once "../SiXhEaD.Template.php";
$title ="หัว Title ของ Website";
$header ="หัวข้อ H1 ของหน้า Web";
$footer ="©2009 9AuM สุดหล่อ";
$u_check ="9aum";
$p_check ="123456";
$username = $_POST["username"];
$password = $_POST["password"];
$tp_member = new Template("_tp_member.html");
if (empty($username) AND empty($password)) {
$topiccontent = "Login เข้าสู่ระบบ";
$block_html = "block_html<br/>".$tp_member->block_html("MEMBER_LOGIN");
$apply_block = "apply_block<br/>".$tp_member->apply_block("MEMBER_LOGIN");
$content ="$block_html<br/><br/>$apply_block";
}else{
if ($username == $u_check AND $password ==$p_check) {
$block_html = "block_html<br/>".$tp_member->block_html("MEMBER_PROFILE");
$apply_block = "apply_block<br/>".$tp_member->apply_block("MEMBER_PROFILE");
$content ="$block_html<br/><br/>$apply_block";
}elseif($username !=$u_check) {
$block_html = "block_html<br/>".$tp_member->block_html("MEMBER_LOGIN_ERROR1");
$apply_block = "apply_block<br/>".$tp_member->apply_block("MEMBER_LOGIN_ERROR1");
$content ="$block_html<br/><br/>$apply_block";
}elseif($password !=$p_check) {
$block_html = "block_html<br/>".$tp_member->block_html("MEMBER_LOGIN_ERROR2");
$apply_block = "apply_block<br/>".$tp_member->apply_block("MEMBER_LOGIN_ERROR2");
$content ="$block_html<br/><br/>$apply_block";
}
}
$tp = new Template("_tp_main.html");
$tp->display();
exit;
?>
php ตัวนี้เป็นตัวอย่างการเขียนหน้า login โดยใช้ block_html กับ apply_block เปรียบเทียบกันให้ดูครับลองไล่ script ดูจะเห็นว่า block_html ก็คือ จะดึงก้อน template ออกมาโดยไม่ replace ค่าตัวแปร ส่วน apply_block จะดึง ก้อน template ออกมาโดน replace ค่าตัวแปร ต่างๆแล้วนั้นเอง
หลักการใช้ block_html กับ apply_block ก็มีประโยชน์แบบนี้แหล่ะครับ ผมเองใช้ apply_block บ่อยมากกว่าอันนี้ต้องลองเอาไปประยุกต์ใช้กันดูล่ะครับ
Download example 7
สำหรับ Sixhead Template โดยหลักการที่กล่าวมาทั้งหมด น่าจะช่วยให้เพื่อนๆได้จับหลักการแล้วลองเอาไปประยุกต์เขียนงานดูนะครับ ให้ศึกษาเทคนิคเพิ่มเติมได้จากตัวอย่างที่ พี่โป้เขียนทิ้งไว้ให้ก็ได้ เริ่มแรก อาจจะดูขัดๆ บ้าง แต่ผมมั่นใจ ระยะยาวคุณจะชอบมันมากๆ เหมือนผม
ตอนหน้า อาจจะมีเพิ่มเติมอีกนิดหน่อยในส่วนที่ยังไม่ได้พูดถึง ซึ่งเป็นส่วนย่อยแล้ว ขอบคุณที่ติดตามครับ
Sixhead Template
ตอนที่ 1 เกริ่นนำ
ตอนที่ 2 หัดใช้ display, generate, block, apply
ตอนที่ 3 หัดใช้ sub, get_current_sub(), get_current_sub_total(), block_html และ apply_block
Read (21,600)
Comments (9)
2009-01-21 16:50:57
ความคิดเห็น
น่าสนใจดี ขอบคุณครับ
โดยคุณ pongsak
2009-01-22 11:58:05
อ่านมา 3ตอน สรุป เป็น tools ที่น่าใช้ทีเดียว 
โดยคุณ [email protected]
2009-01-22 17:18:16
ตอนแรกมาดูก็งงๆ ถ้าไม่มีอธิบายล่ะก็ ไม่เข้าใจแน่
โดยคุณ Game-Mun.com
2009-02-03 11:25:36
น่าสนใจมากครับ
เพิ่งหัดเขียนเว็บอย่างจริงจังได้ ไม่นาน แต่จะพยายามลองใช้ดูนะครับ
โดยคุณ mynumber1988
2009-04-02 10:19:55
ขอบคุณสำหรับบทความแนะนำดีๆครับ
ตอนนี้กำลังเอาไปพัฒนาระบบ ตัวนึง อยู่ บอกตามตรงว่า ประทับใจมาก เพราะมันง่ายต่อการแก้ไข และเรียนรู้ และที่สำคัญ ใช้งานง่าย ง่ายกว่า template engine ที่ผมเคยใช้อยู่ก่อนหน้านี้อีกครับ
โดยคุณ Mizipex
2009-08-20 13:28:46
ผมไม่ค่อยฉลาด อยากให้พี่ Aum เขียนอีก เรื่อง sixhead template เอาเยอะๆ ครับ แบบแนวประยุกต์อื่่นๆ ด้วยครับ
ขอบคุณครับ
โดยคุณ peterXP
2009-09-17 14:13:30
ขอบคุณครับ
ถ้าจะให้ตัวแปรอยู่ในรูปแบบ {$key} ต้องแก้ตรงไหนบ้างครับ
เพราะบางจุดมันจะต่อกับข้อความ
เช่นผมตั้ง $hostname เป็น url หลัก แล้วจะต่อด้วยหน้าไฟล์น่ะครับ
โดยคุณ Teague
2009-10-07 18:01:51
ขอบคุณมากๆนะค่ะ กำลังเป็นมือใหม่กับ sixhead ค่ะ
โดยคุณ มือใหม่ๆ
2010-01-21 17:55:50
มือใหม่ครับ
ขอรบกวนด้วยนะครับ ขอสอบถามถ้าผมจะเขียนอย่างนี้จะต้องทำอย่างไรบ้างครับ
กับการติดต่อฐานข้อมูล
while(ประเภทของข่าว){
แสดงประเภทของข่าว
while(ข่าว){
แสดงข่าว
}
}
เป็นการซ่อนของคำสั่งวนรูป ช่วยแนะนำด้วยนะครับ ขอบคุณครับ
โดยคุณ นิค
2010-10-11 11:34:15