PHP

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

by


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

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

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

1
<!--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 ออกมา

ผลการทำงาน

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?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;