วิธีใช้ class Template ตอนที่ 1


ตอนนี้ได้อะไรบ้าง

  • แสดงค่าจากตัวแปร
  • แสดงค่าใน block (loop)
  • ข้ามการแทนค่าตัวแปร

หมายเหตุ
ทุกตอนหากคลิกดูผลการทำงานและ view source จะเห็นว่ามีบรรทัดว่างเยอะ เนื่องจากไฟล์ template ตัวอย่างต้องการให้อ่านง่าย ในการทำงานจริงจะเว้นบรรทัดเท่าที่จำเป็น (งานจริงจะ extends class ล้างบรรทัด และช่องว่างที่ไม่จำเป็นทิ้ง)

หลักการทำงาน
– ค้นหาตัวแปร $variable แล้วแทนที่ด้วยค่าที่ต้องการ
– กำหนดไม่ให้แทนค่าด้วยคำสั่ง $tp->ignore();

ผลการทำงาน

<!DOCTYPE html>
<html>
<head>
<title>วิธีใช้ class SiXhEaD.Template</title>
<link rel="stylesheet" href="module/bootstrap/bootstrap.min.css">
</head>
<body>

<div class="container">
    <h3>วิธีใช้ class SiXhEaD.Template</h3>

    <ul class="list-group">
        <li class="list-group-item">1</li>
        <li class="list-group-item">2</li>
        <li class="list-group-item">3</li>
        <li class="list-group-item">4</li>
        <li class="list-group-item">5</li>
    </ul>
    
    <div class="row text-center">
        <div class="col-md-3">$jQuery</div>
        <div class="col-md-3">$1000</div>
        <div class="col-md-3">$library()</div>
        <div class="col-md-3">$$()</div>
    </div>

    <div class="row text-center">
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
    </div>
</div>

<script src="module/jquery/jquery.min.js"></script>
<script src="module/bootstrap/bootstrap.min.js"></script>
</body>
</html>

_tp_simple.html

<!DOCTYPE html>
<html>
<head>
<title>$title</title>
<link rel="stylesheet" href="module/bootstrap/bootstrap.min.css">
</head>
<body>

<div class="container">
    <h3>$title</h3>

    <ul class="list-group">
    <!--SiXhEaD:data-->
        <li class="list-group-item">$no</li>
    <!--/SiXhEaD:data-->
    </ul>
    
    <div class="row text-center">
        <div class="col-md-3">$jQuery</div>
        <div class="col-md-3">$1000</div>
        <div class="col-md-3">$library()</div>
        <div class="col-md-3">$$()</div>
    </div>

    <div class="row text-center">
        <div class="col-md-3">$var1</div>
        <div class="col-md-3">$var2</div>
        <div class="col-md-3">$var3</div>
        <div class="col-md-3">$var4</div>
    </div>
</div>

<script src="module/jquery/jquery.min.js"></script>
<script src="module/bootstrap/bootstrap.min.js"></script>
</body>
</html>

simple.php

<?php
require 'module/SiXhEaD.Template.php';

$tp = new Template('_tp_simple.html');

$title = 'วิธีใช้ class SiXhEaD.Template';

$tp->block('data');
for ($no = 1; $no < 6; $no++) {
    $tp->apply();
}

$tp->ignore('jQuery');
$tp->ignore('1000');
$tp->ignore('library');

$tp->display();
exit;