Scriptdd.com

บทความบ้าบ่นของคนทำเว็บ ปี 8

Sixhead Template PHP Template Engine ไทยทำตอนที่ 3

หัวข้อ บทความ แทก PHP

เข้าตอนนี้จะเริ่มพูดถึงเทคนิคขั้นสูงขึ้นเพื่อความสะดวกในการใช้งาน 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>

ตัวอย่าง html ที่ใช้ sub

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;
?>

เมื่อเรียกใช้งานแล้วได้ผล sub ดังนี้
template ชิ้นนี้ ก็จะมี block ชื่อ TOPICLIST อยู่โดยใน block จะมี sub ย่อยอยู่ 3 sub ในแต่ละ sub จะประกอบด้วย ตารางของกระทู้ที่แสดงสีแตกต่างกันอยู่ ลองดูตัวอย่าง php ที่ใช้เรียกดูครับ

Download example 5


เพิ่มเติมอีกนิด ช่วย 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

Download example 6


เรื่อง 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        ="&copy;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 (17,067) Comments (9) 2009-01-21 16:50:57

ความคิดเห็น

น่าสนใจดี ขอบคุณครับ

รูปคุณ pongsak โดยคุณ pongsak 2009-01-22 11:58:05

อ่านมา 3ตอน สรุป เป็น tools ที่น่าใช้ทีเดียว

รูปคุณ P@W โดยคุณ [email protected] 2009-01-22 17:18:16

ตอนแรกมาดูก็งงๆ ถ้าไม่มีอธิบายล่ะก็ ไม่เข้าใจแน่

รูปคุณ Game-Mun.com โดยคุณ Game-Mun.com 2009-02-03 11:25:36

น่าสนใจมากครับ

เพิ่งหัดเขียนเว็บอย่างจริงจังได้ ไม่นาน แต่จะพยายามลองใช้ดูนะครับ

รูปคุณ mynumber1988 โดยคุณ mynumber1988 2009-04-02 10:19:55

ขอบคุณสำหรับบทความแนะนำดีๆครับ
ตอนนี้กำลังเอาไปพัฒนาระบบ ตัวนึง อยู่ บอกตามตรงว่า ประทับใจมาก เพราะมันง่ายต่อการแก้ไข และเรียนรู้ และที่สำคัญ ใช้งานง่าย ง่ายกว่า template engine ที่ผมเคยใช้อยู่ก่อนหน้านี้อีกครับ

รูปคุณ Mizipex โดยคุณ Mizipex 2009-08-20 13:28:46


ผมไม่ค่อยฉลาด อยากให้พี่ Aum เขียนอีก เรื่อง sixhead template เอาเยอะๆ ครับ แบบแนวประยุกต์อื่่นๆ ด้วยครับ

ขอบคุณครับ

รูปคุณ peterXP โดยคุณ peterXP 2009-09-17 14:13:30

ขอบคุณครับ

ถ้าจะให้ตัวแปรอยู่ในรูปแบบ {$key} ต้องแก้ตรงไหนบ้างครับ

เพราะบางจุดมันจะต่อกับข้อความ

เช่นผมตั้ง $hostname เป็น url หลัก แล้วจะต่อด้วยหน้าไฟล์น่ะครับ

รูปคุณ Teague โดยคุณ Teague 2009-10-07 18:01:51

ขอบคุณมากๆนะค่ะ กำลังเป็นมือใหม่กับ sixhead ค่ะ

รูปคุณ มือใหม่ๆ โดยคุณ มือใหม่ๆ 2010-01-21 17:55:50

มือใหม่ครับ

ขอรบกวนด้วยนะครับ ขอสอบถามถ้าผมจะเขียนอย่างนี้จะต้องทำอย่างไรบ้างครับ
กับการติดต่อฐานข้อมูล

while(ประเภทของข่าว){

แสดงประเภทของข่าว

while(ข่าว){
แสดงข่าว
}

}

เป็นการซ่อนของคำสั่งวนรูป ช่วยแนะนำด้วยนะครับ ขอบคุณครับ

รูปคุณ นิค โดยคุณ นิค 2010-10-11 11:34:15

ร่วมแสดงความคิดเห็น



ขอความกรุณา ปัญญาชน ทุกๆท่าน รณรงค์การใช้ภาษาไทยให้ถูกต้อง
กรุณา ลงความคิดเห็นโดยใช้ภาษาไทยให้เป็นภาษาไทย งดการใช้ภาษาวัยรุ่น,
แอ๊บแบ๊ว บอกตรงๆปัญญาอ่อน !! Admin นั่งอ่านแล้วปวดหัว

เข้าระบบ


จำไว้ด้วยนะจ้ะ

สมัครสมาชิก
ลืมรหัสผ่าน

บทความล่าสุด

Gallery

Tags

MSN Clip Video API Motorcycle barcampbkk2 Internet FTR ล้อหมอบ Internet Explorer Movie Software DOM Yamaha เฟรม OEM AIS Blog Perl Gallery vintage Travel Notebook Payment Gateway HTML Plugin Diary ASP Freeware JavaScript Hardware Framework

อื่นๆ ...

เพื่อนบ้าน

สถิติส่วนตัว

คลิกรับ Feed สิจ๊ะ

TwitterCounter for @9aum

Scriptdd.com | ctdd Version 3.0 ติดต่อฐานข้อมูลทิ้งสิ้น 6 ครั้งใช้เวลาประมวลผล 0.0550 วินาที
โปรแกรมโดย 9AuM | ออกแบบโดย styleshout