PHP

วิธีใช้ class Template ตอนที่ 2 block (ขั้นต้น)

by


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

  • รู้จัก block
  • แสดง block
  • ซ่อน block

block คืออะไร
– block คือส่วนที่เก็บข้อมูลของตัวมันไว้ใช้งาน ไม่ว่าจะเป็นแสดงผลตามเงื่อนไข, ดึงข้อมูลไปใช้งานต่อ หรือ loop

<!--SiXhEaD:block-name--><syntax>$variable</syntax><!--/SiXhEaD:block-name-->

– เนื้อหาใน block เป็นอะไรก็ได้ไม่ว่าจะ text, html, xml, json, js ฯลฯ
– block จะซ่อนโดยอัตโนมัติ ต้องสั่งด้วย $tp->apply(); ก่อนจึงจะแสดงออกมา

หลักการทำงาน
– ข้อมูลใน block never-see-me จะไม่ถูกแสดงออกมา
– ข้อมูลใน block firefox, chrome จะแสดงก็ต่อเมื่อใช้ browser แต่ละชนิดเปิดดู พร้อมทั้งแสดงข้อมูล browser ออกมา

ผลการทำงาน 

<!DOCTYPE html>
<html>
<head>
<title>วิธีใช้งาน block</title>
<link rel="stylesheet" href="module/bootstrap/bootstrap.min.css">
</head>
<body>

<div class="container">
    <h3>วิธีใช้งาน block (ขั้นต้น)</h3>
    
    <div class="panel panel-warning">
        <div class="panel-heading">สวัสดี Firefox</div>
        <div class="panel-body">Mozilla/5.0 (Windows NT 6.1; WOW64; rv:49.0) Gecko/20100101 Firefox/49.0</div>
    </div>    

    <ul class="list-group">   
        <li class="list-group-item ">1</li>
        <li class="list-group-item ">2</li>
        <li class="list-group-item active">3</li>
        <li class="list-group-item ">4</li>
        <li class="list-group-item ">5</li>
    </ul>

    <div class="row">
        <div class="col-md-3"><div class="alert alert-success">Success</div></div>
        <div class="col-md-3"><div class="alert alert-info">Info</div></div>
        <div class="col-md-3"><div class="alert alert-warning">Warning</div></div>
        <div class="col-md-3"><div class="alert alert-danger">Danger</div></div>
    </div>
</div>

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

_tp_block.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>
    
    <!--SiXhEaD:firefox-->
    <div class="panel panel-warning">
        <div class="panel-heading">สวัสดี Firefox</div>
        <div class="panel-body">$user_agent</div>
    </div>
    <!--/SiXhEaD:firefox-->

    <!--SiXhEaD:chrome-->
    <div class="panel panel-info">
        <div class="panel-heading">สวัสดี Chrome</div>
        <div class="panel-body">$user_agent</div>
    </div>
    <!--/SiXhEaD:chrome-->

    <!--SiXhEaD:never-see-me-->
    <div>คุณจะไม่เห็นข้อความนี้</div>
    <!--/SiXhEaD:never-see-me-->

    <ul class="list-group">
        <!--SiXhEaD:data1-->
        <li class="list-group-item $active">$no</li>
        <!--/SiXhEaD:data1-->
    </ul>

    <div class="row">
        <!--SiXhEaD:data2-->
        <div class="col-md-3"><div class="alert alert-$css">$css_uc</div></div>
        <!--/SiXhEaD:data2-->
    </div>
</div>

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

block.php

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

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

$title = 'วิธีใช้งาน block (ขั้นต้น)';

$tp->block('data1');
for ($no = 1; $no < 6; $no++) {
    $active = '';
    if ($no == 3) {
        $active = 'active';
    }
    $tp->apply();
}

$styles = ['success', 'info', 'warning', 'danger'];
$tp->block('data2');
foreach ($styles as $key => $css) {
    $css_uc = ucfirst($css);
    $tp->apply();
}

$user_agent = $_SERVER['HTTP_USER_AGENT'];
if (preg_match('@Firefox@', $user_agent)) {
    $tp->block('firefox');
    $tp->apply();
} elseif (preg_match('@Chrome@', $user_agent)) {
    $tp->block('chrome');
    $tp->apply();
}

$tp->display();
exit;