Scriptdd.com

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

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

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

เริ่มต้นหัดใช้งาน Sixhead Template กันครับ กับตัวอย่างพร้อมคำอธิบายง่ายๆ ที่คุณจะรู้ว่า ใช้ Sixhead Template นี้ไม่ยากอย่างที่คิด อืมเริ่มแรกนี้ผมขอให้ลืม ตัวอย่าง Script ที่พี่โป้ทิ้งไว้ให้เลยครับ (อ้าว :P)

คือตัวอย่างที่พี่โป้ทิ้งไว้ให้น่าจะเหมาะกับคนที่เคยศึกษาเคยใช้งานมาแล้ว แต่ถ้าคุณยังไม่เข้าใจหลังการ ลองค่อยๆศึกษาไปตามตัวอย่างของผมดีกว่า


หัดใช้ display()

## _tp_template1.html ##

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

 

 หน้าตาของ _tp_template1.html

 

<?php
## test1.php ##
require_once "../SiXhEaD.Template.php";
$tp = new Template("_tp_template1.html");
$tp->display();
exit;
?>

 

ผลของการเรียก test1.php ครับ

จาก Script test1.php อธิบายง่ายๆไม่มีอะไรมาก คือ จะทำการเปิด template html ขึ้นมา ชื่อ _tp_template1.html แล้วก็สั่งให้แสดงผล display() ทันที

Download example 1

หากเราดูใน _tp_template1.html จะเห็นว่ามีพวกตัวแปร $title, $header, $content, $footer กระจายอยู่ตาม Code html
ตัวแปรเหล่านี้จะทำงานเสมือนเป็นตัวแปรใน PHP ครับ พูดง่ายๆคุณแทนค่าอะไรลงไป คุณก็จะได้การแสดงผลตามค่านั้นๆ ดังตัวอย่างที่ 2 ครับ

 

<?php

## test2.php ##
require_once "../SiXhEaD.Template.php";

$title        ="หัว Title ของ Website";
$header    ="หัวข้อ H1 ของหน้า Web";
$content  ="รายละเอียดข้อมูล รายละเอียดข้อมูล รายละเอียดข้อมูล รายละเอียดข้อมูล รายละเอียดข้อมูล รายละเอียดข้อมูล รายละเอียดข้อมูล รายละเอียดข้อมูล ";
$footer     ="&copy;2009 9AuM สุดหล่อ";


$tp = new Template("_tp_template1.html");
$tp->display();
exit;
?>

 

ผลของการเรียก test2.php

หลังจากรัน Script test2.php คิดว่า หลายคนน่าจะพอเข้าใจหลักการทำงานแล้ว ว่าการทำงานแบบ Template มีประโยชน์ยังไง
ตัวแปรต่างๆที่ระบุขึ้นจะเห็นว่า ถูกนำไปแสดงผลประกอบใน template html เรียบร้อย

Download example 2


พอเป็นแล้วก็หัดใช้ generate() กันต่อ

เวลาทำงานจริงๆ การเรียก template html ชิ้นเดียว บางครั้งเป็นเรื่องเป็นไปไม่ได้ครับ ผมยกตัวอย่างเวลาผมทำงานจริงๆ การออกแบบ website ส่วนใหญ่แล้ว เราจะมี template กลางเอาไว้ แล้วใช้เป็น template ร่วมไปในทุกๆหน้า เช่น

หน้าข่าวรวม
ก็จะออกแบบเป็น template กลาง + template กรอบข่าว

หน้ารายละเอียดของข่าว
ก็จะออกแบบเป็น template กลาง + template รายละเอียดของข่าว

ลองดูตัวอย่างลักษณะการเรียกใช้แบบนี้ครับ

## _tp_main.html ##
<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>

 


## _tp_news.html ##

<h2>$header_news</h2>
<p>$news_detail</p>
<p><strong>$date</strong></p>
<hr/>

 

<?php
## test3.php ##
require_once "../SiXhEaD.Template.php";

$title        ="หัว Title ของ Website";
$header        ="หัวข้อ H1 ของหน้า Web";
$footer        ="&copy;2009 9AuM สุดหล่อ";


$header_news    ="หัวข้อข่าวลาล่าล้า";
$news_detail    ="<p>รายละเอียดของข่าว รายละเอียดของข่าว รายละเอียดของข่าว รายละเอียดของข่าว </p>";
$date        ="2009-01-20";


$tp_news    = new Template("_tp_news.html");
$content    = $tp_news->generate();


$tp = new Template("_tp_main.html");
$tp->display();
exit;
?>

 

ผลการรัน Script test3.php

จาก test3.php เป็นการนำ template 2 ตัวมารวมกันแล้วแสดงผลออกมาโดย generate();
ก็คือ การส่งค่า HTMl ที่อ่านได้ออกไปหาตัวแปร อย่างในตัวอย่าง

$content    = $tp_news->generate();

ก็คือจะอ่านข้อมูล html ของ _tp_news.html ออกมาแล้วส่งไปให้ตัวแปร $content เพื่อนำไปประกอบแสดงผลในขั้นสุดท้ายนั้นเอง
ด้วยวิธีนี้แล้ว ลองนึกย้อนไปในการใช้งานจริง คุณจะสามารถสร้าง Template หลักและ Template HTML ย่อยๆ นำมาแสดงผลด้วยแนวคิดแบบนี้ได้

Download example 3


รู้จักกับ block และ apply ใช้กำหนดให้โชว์หรือซ่อน

block คือกลุ่มของ HTML  ที่ถูกกำหนดขอบเขตเอาไว้ด้วย HTML Comment ใช้สำหรับกำหนดจุดเพื่อระบุให้แสดงหรือไม่แสดงผลตัวอย่าง block จะเขียนตามนี้

<!--SiXhEaD:BLOCKNAME-->
ข้อมูลที่อยู่ใน block
<!--/SiXhEaD:BLOCKNAME-->

ลองดูตัวอย่างของ block ต่อไปนี้ครับ

## _tp_template.html ##

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$title</title>
</head>
<body bgcolor="#FFFF99">

<!--SiXhEaD:MEMBER_MENU-->
<h2>$USERNAME</h2>
<!--/SiXhEaD:MEMBER_MENU-->

<!--SiXhEaD:FORM_LOGIN-->
<form name="form1" method="post" action="">
  username
    <input name="username" type="text" id="username">
  password
  <input name="password" type="password" id="password">
  <input type="submit" name="Submit" value="Submit">
</form>
<!--/SiXhEaD:FORM_LOGIN-->
</body>
</html>

จากตัวอย่าง HTML ที่จะเห็นว่า มี block อยู่ 2 block คือ block MEMBER_MENU กับ block FORM_LOGIN
แล้วไอ้ block นี้มีประโยชน์ยังไง ? เราก็จะเอา block ไว้กำหนดขอบเขตการแสดงผลนั้นแหล่ะครับโดยขอให้จำไว้ว่า
เมื่อเราสั่งให้ display หรือ generate ทุก block นะไม่แสดงผลออกมา จนกว่าเราจะสั่ง apply

ขอให้ดูตัวอย่างนี้ครับ

<?php

## test4-1.php ##
require_once "../SiXhEaD.Template.php";

$title        ="หัว Title ของ Website";
$USERNAME    ="9AuM สุดหล่อ";

$tp = new Template("_tp_template.html");
$tp->display();
exit;
?>

 

ผลการรัน Script test3.php

เมื่อรัน script คุณจะเห็นว่าข้อมูล html ที่อยู่ใน block ทั้ง 2 block กลับไม่แสดงผลถ้าหากคุณต้องการให้
ข้อมูลแสดงผลออกมาเราก็ใช้ apply ครับ

<?php

## test4-2.php ##
require_once "../SiXhEaD.Template.php";

$title        ="หัว Title ของ Website";
$USERNAME    ="9AuM สุดหล่อ";

$tp = new Template("_tp_template.html");


$tp->block("MEMBER_MENU");
$tp->apply();


$tp->display();
exit;
?>

 

ผลการรัน Script test4-2.php

จากตัวอย่างเป็นการระบุว่า block MEMBER_MENU ให้แสดงผลออกมาได้นั้นเอง การใช้งานจริง การเรียก apply block นี่มีประโยชน์เพื่อเลือกชิ้น block ออกมาแสดงผลครับ ยกตัวอย่างที่ผ่านมา ผมกำหนด block เอาไว้ เป็น block ที่แสดงรายละเอียดของ สมาชิก กับ block สำหรับ สมาชิก login นั้นก็คือ ผมอาจจะเช็ค สถานะว่าเป็น user ในระบบหรือเปล่า ถ้าเป็นอยู่ก็สั่งแสดงผล ข้อมูลส่วนตัว แต่ถ้าไม่ได้เป็นก็ให้แสดงผล form สำหรับ login เข้ามานั้นเองครับ ดังตัวอย่างครับ

<?php

## test4-3.php ##
require_once "../SiXhEaD.Template.php";

$title        ="หัว Title ของ Website";
$USERNAME    =$_SESSION['USERNAME'];

$tp = new Template("_tp_template.html");


if (empty($USERNAME)) {
    $tp->block("FORM_LOGIN");
    $tp->apply();    
}else{
    $tp->block("MEMBER_MENU");
    $tp->apply();    
}

$tp->display();
exit;
?>

 

ผลการรัน Script test4-3.php

Download example 4

คิดว่าน่าจะเข้าใจประโยชน์ของ block กันมากขึ้นนะครับ เอาว่าตอนที่ 2 นี้คงพอแค่นี้ก่อนน่าจะมึนกันพอควรแล้ว :P เดี๋ยวตอนต่อไปจะเริ่ม Advance กว่านี้ เดี๋ยวจะ สลบซะก่อนพักก่อนครับ


Sixhead Template

ตอนที่ 1 เกริ่นนำ
ตอนที่ 2 หัดใช้ display, generate, block, apply
ตอนที่ 3 หัดใช้ sub, get_current_sub(), get_current_sub_total(), block_html และ apply_block

 

รูปคุณ Read (13,382) Comments (10) 2009-01-21 14:03:13

ความคิดเห็น

รายละเอียดชัดเจนดีครับ

เดี๋ยวต้องลองเอาไปประยุกต์ดู

รูปคุณ ฉุย โดยคุณ ฉุย 2009-01-22 08:35:50


เว็บเพื่อความคิดสร้างสรรค์และแบ่งปันครับ www.narongrit.net 
และขอฝากเว็บโปรโมทด้วยครับ www.diggbookmark.com 
ขอบคุณเว็บ scriptdd แห่งนี้ที่เปิดโลกทัศน์ให้กว้างกว่าเดิมครับ

ขอบคุณค่ะ กับเรื่องดี ๆ มีมาให้อัพเดตกันอีกแล้ว

รูปคุณ takky โดยคุณ takky 2009-01-22 10:53:54

อืม เหมาะกับการพัฒนาอย่างยิ่ง

รูปคุณ P@W โดยคุณ P@W 2009-01-22 16:21:11


ทุกอย่างเกิดจากเหตุ และปัจจัย ไม่ใช่อยู่ดี ๆ ก็เกิดขึ้น :: สร้างฝันบนจินตนาการ

www.konkeanweb.com , www.prawee.com ,www.tct15.com ,www.thaiagro.com

 

บทความนี้ทำคนโง่อย่างผม เข้าใจ SiXhEaD Template กันไปเลย

รูปคุณ หนึ่ง โดยคุณ หนึ่ง 2009-01-23 10:15:28


รักษ์โลก ลดโลกร้อน
จำหน่ายวิทยุสื่อสาร ซ่อมวิทยุสื่อสาร ราคาเบาๆ
มอเตอร์ไซด์คลาสสิค

พี่ครับ ลองแล้วมันขึ้นอย่างนี้
PHP Notice: Undefined property: Template::$block in D:\WebSite\teedinD.com\test\SiXhEaD.Template.php on line 171

รูปคุณ Neung โดยคุณ Neung 2009-07-02 11:44:04

ปัญหา Undefined property: Template::$block .... on line 171
ขออณุญาตตอบแทนนะครับ
ผมใช้ if(isset($this->block)) ครอบ if(is_array($this->block)) ไปครับ

กำลังหัด php อยู่ครับ
ขอบคุณผู้จัดทำ ทั้ง template แล้วก็ tutorial มากๆครับ

รูปคุณ RuzeriE โดยคุณ RuzeriE 2010-05-07 19:41:52

ขอบคุณมากๆเลยคับที่ช่วยสอน และแนะนำสิ่งดีๆ ให้ผม

รูปคุณ ตาม โดยคุณ ตาม 2010-05-28 22:55:39

ขอบคุณมากครับ กำลังหาอยู่เลย

รูปคุณ ben10Omnitrixtoys โดยคุณ ben10Omnitrixtoys 2011-05-23 18:13:06

ผมโหลดตัวอย่างมา test ไม่เข้าใจทำไมไม่เห็นมีอะไรเกิดขึ้นเลย
โดยแตกนำไฟล์ไปไว้ใน localhost แล้วทำการรัน

รูปคุณ ิbank โดยคุณ ิbank 2011-06-08 01:51:02

path ไฟล์ก็ตรง

SiXhEaD.Template.php อยู่ข้างนอก โฟลเดอร์ example02

แต่เวลารัน กับขึ้นแค่

$headder $content footer แทนที่จะขึ้นข้อความ

รูปคุณ bank โดยคุณ bank 2011-06-08 01:57:13

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



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

เข้าระบบ


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

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

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

Gallery

แผนที่ 24/11/2011 18:41 น้ำลดแล้วววว !!!! เย้ แผนที่ 20/11/2011 06:17 ยังท่วมอยู่เริ่มลดลงแล้ว แผนที่ 9/11/2011 18:29 ยังท่วมเหมือนเดิมเริ่มเต็มหมู่บ้าน แผนที่ 5/11/2011 06:01 ยังท่วมเหมือนเดิม แผนที่ 2/11/2011กลับมาท่วมอีกแล้วเย้ แผนที่วันที่ 2/11/2011 น้ำลดแล้วว้าวๆๆๆ พรุ่งนี้ ปตท ลดนะคร้าบอั้นไว้อีกหน่อย แผนที่วันที่ 30/10/2011 ท่วมเรียบร้อยแล้วหวังว่าคงไม่หนักนะ ยินดีต้อนรับน้องน้ำครับ A: มึงอุดเด่ะ B: มึงสิวะบ้านมึง C: เออแล้วตัดไฟอ่ะยังอ่ะ A,B,C: .... ตี๊ดดดดด ตายเรียบ แผนที่วันที่ 29/10/2011 06:05 ยังรอด แผนที่วันที่ 28/10/2011 18:30 ยังรอด แผนที่น้ำท่วมเมื่อ 2 วันก่อน น้ำยังไม่ท่วมบ้าน วันนี้คงไม่เหลือแล้วล่ะ T_T ไหนว่าจะย้ายบ้านแล้วไง ?? อวสานแก้งค์ปลาไหล AV Server ร่วงไปแล้ว เอามาจาก fb น้ำขึ้นให้รีบบอก บ้านผมอยู่ระหว่างคลองหก-เจ็ด (ล่าง) ไม่น่ารอดแหล่ะ ก็รู้ว่าการตลาดอ่ะนะ แต่ก็น่ารักดี ฝ่ายการตลาด + CSR ใช้ได้แฮะ ไข่ตุ๋นสนใจข่าวน้ำท่วมด้วย @GCC_1111 มันคือเหตุด่วนเหตุร้ายใช่ไหม ?

Tags

Notebook WordPress Windows7 Plugin Security Firefox barcampbangkok2 Tablet CSS Movie Hacker Food Honda Search Engine Gallery Payment Gateway MSN Tool Live ThinkPad API Apache Travel Mobile Motorcycle Web2.0 SMS DOM Home Decorate About me

อื่นๆ ...

เพื่อนบ้าน

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

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

TwitterCounter for @9aum

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