วิธีใช้ class Template ตอนที่ 6 ซ้อน loop


หมายเหตุ
เป็นการนำเอา ตอนที่ 3 block (ขั้นสูง) มาแยกให้เห็นตัวอย่างเฉพาะการซ้อน loop

ผลการทำงาน


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

<div class="container">
    <h3>วิธีใช้งาน ซ้อน loop</h3>
    
    <div class="alert alert-danger">        
        <div class="panel panel-default">
            <div class="panel-body">
                1
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">
                2
            </div>
        </div>
    </div>
    
    <div class="alert alert-info">        
        <div class="panel panel-default">
            <div class="panel-body">
                1
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">
                2
            </div>
        </div>
    </div>
    
    <hr>
    
    <div class="alert alert-success">
        <div class="panel panel-default">
            <div class="panel-body">
                1
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-body">
                2
            </div>
        </div>
    </div>
    
    <div class="alert alert-warning">
        <div class="panel panel-default">
            <div class="panel-body">
                1
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-body">
                2
            </div>
        </div>
    </div>    

</div>

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

_tp_loop-in-loop.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>

    <!--butterfly:items1-->
    <div class="alert alert-$css">
        $item
    </div>
    <!--/butterfly:items1-->

    <hr>

    <!--butterfly:items2-->
    <div class="alert alert-$css">
        $item
    </div>
    <!--/butterfly:items2-->

</div>

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

<!--butterfly:item-->
<div class="panel panel-default">
    <div class="panel-body">
        $no
    </div>
</div>
<!--/butterfly:item-->

loop-in-loop.php

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

$tp = new Template('_tp_loop-in-loop.html', 'butterfly');

$title = 'วิธีใช้งาน ซ้อน loop';

$tp->block('items1');
$styles = ['danger', 'info'];
foreach ($styles as $key => $css) {
    $item = '';
    for ($no = 1; $no < 3; $no++) {
        $item .= $tp->applyBlock('item');
    }
    $tp->apply();
}

$tp->block('items2');
$styles = ['success', 'warning'];
foreach ($styles as $key => $css) {
    $item = '';
    for ($no = 1; $no < 3; $no++) {
        $item .= $tp->applyBlock('item');
    }
    $tp->apply();
}

$tp->display();
exit;