:::
prev5. 套用Smarty樣板
5-2 index.phpnext
PHP從入門到放棄實戰班

5-1 使用 Smarty

一、Smarty基本操作

  1. 大原則：和外觀有關的東西都放到.html或.tpl中，所需要的資料全由.php提供，簡單範例，index.php內容： 
    <?php
require_once 'smarty/libs/Smarty.class.php';
$smarty = new Smarty;
$title  = '待辦清單';
$header = '我的待辦清單';
$smarty->assign('title', $title);
$smarty->assign('header', $header);
$smarty->display('index.html');

     

  2. 樣板檔一律放至 templates 目錄中：請將index.html移到templates 目錄中
  3. PHP檔中最常用的就是利用 $smarty->assign('樣板標籤名稱', $變數值); 將變數送至樣板檔。
  4. templates/index.tpl 內容： 
    <head>
  <title>{$title}</title>
</head>
<body>
~~~~~~~~~~~~~~~~~~~~~~~~~~以下省略~~~~~~~~~~~~~~~~~~~~
        <a class="navbar-brand" href="#">
            <h1>{$header}</h1>
        </a>

     

  5. index.php

    <?php
require_once 'smarty/libs/Smarty.class.php';
// 建立Smarty物件
$smarty = new Smarty;

$page_title = '待辦清單';
$header     = '我的待辦清單';

// 將變數送到Smarty樣板檔
$smarty->assign('page_title', $page_title);
$smarty->assign('header', $header);

// 呈現在哪個檔案 templates/xxx.tpl
$smarty->display('index.tpl');

     

  6. templates/index.tpl

    <!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/all.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <title>{$page_title}</title>
</head>

<body>
    <div class="container">
        <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
            <a class="navbar-brand" href="http://www.google.com" target="_blank">
                <img src="images/logo.jpg" class='rounded-circle' height="200rem">
                <h3 class="text-center">{$header}</h3>
            </a>
            <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse"
                data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavId">
                <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">回首頁 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="post.html">發布待辦事項</a>
                    </li>
                </ul>
            </div>
        </nav>

        <hr>
        <div class="row">
            <div class="col-sm-3">
                <p>
                    日期：2020-07-20

                </p>
            </div>
            <div class="col-sm-9">
                <ol>
                    <li>今天到期：1</li>
                    <li>逾期：2</li>
                </ol>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover table-sm">
                <thead class="thead-dark">
                    <th><i class="fas fa-check"></i> 是否完成</th>
                    <th>標題</th>
                    <th>到期日</th>
                    <th>優先順序</th>
                    <th>指派對象</th>

                </thead>
                <tbody>
                    <tr>
                        <td>完成</td>
                        <td>撰寫程式</td>
                        <td>2020/06/08</td>
                        <td>低</td>
                        <td>李大頭</td>
                    </tr>
                    <tr>
                        <td>未完成</td>
                        <td>開會</td>
                        <td>2020/06/08</td>
                        <td>高</td>
                        <td>李大頭、主任、XX科</td>
                    </tr>
                    <tr>
                        <td>完成</td>
                        <td>撰寫程式</td>
                        <td>2020/06/08</td>
                        <td>低</td>
                        <td>李大頭</td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>

</html>

     

二、Smarty變數及陣列

傳送內容 PHP檔（*.php） Smarty樣板檔（*.tpl）
一般變數 
$header = '我的待辦清單';
$smarty->assign('header', $header);

 

 
{$header}

 
一維陣列 
$navbar['home'] = "回首頁";
$navbar['post'] = "發布待辦事項";
$smarty->assign('navbar', $navbar);

 

 
<li class="nav-item active">
    <a class="nav-link" href="#">{$navbar.home} <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
    <a class="nav-link" href="post.html">{$navbar.post}</a>
</li>

 
二維陣列 
$content[1]['directions'] = "撰寫程式";
$content[1]['end']        = "2020/06/08";
$content[2]['directions'] = "開會";
$content[2]['end']        = "2020/06/10";
$smarty->assign('content', $content);

 

 
{foreach $content as $c}
  <tr>
    <td>{$c.directions}</td>
    <td>{$c.end}</td>
  </tr>
{/foreach}

或

<tr>
  <td>{$content.1.directions}</td>
  <td>{$content.1.end}</td>
</tr>
<tr>
  <td>{$content.2.directions}</td>
  <td>{$content.2.end}</td>
</tr>

 

三、程式碼

  1. index.php 
    <?php
// 引入Smarty
require_once 'smarty/libs/Smarty.class.php';
// 創建Smarty物件
$smarty = new Smarty;

// 一般變數
$title  = '待辦清單';
$header = '我的待辦清單';
$smarty->assign('title', $title);
$smarty->assign('header', $header);

// 一維陣列
$navbar = ['home' => "回首頁", 'post' => "發布待辦事項"];
// $navbar['home'] = "回首頁";
// $navbar['post'] = "發布待辦事項";
$smarty->assign('navbar', $navbar);

// 二維陣列
$content = array(
    "1" => array('directions' => "撰寫程式", 'end' => "2020/06/08"), //用逗號結尾
    "2" => array('directions' => "開會", 'end' => "2020/06/10"),
);
// $content[1]['directions'] = "撰寫程式";
// $content[1]['end']        = "2020/06/08";
// $content[2]['directions'] = "開會";
// $content[2]['end']        = "2020/06/10";
$smarty->assign('content', $content);
// 輸出到樣板檔
$smarty->display('index.tpl');

     

  2. template/index.tpl 
    <!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/fontawesome_css/all.css">
  <script src="js/jquery-3.5.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <title>{$title}</title>
</head>
<body>
  <div class="container">
    <img src="images/logo.jpg" class="rounded-circle mx-auto d-block" width="100%" height="200rem" alt="logo">
    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
        <a class="navbar-brand" href="#">
            <h1>{$header}</h1>
        </a>

        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavId">
            <ul class="navbar-nav  ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
    <a class="nav-link" href="#">{$navbar.home} <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
    <a class="nav-link" href="post.html">{$navbar.post}</a>
</li>
            </ul>
        </div>
    </nav>
    <hr>
<div class="row">
    <div class="col-sm-3">
        <p>
          日期：2020/06/08
        </p>
    </div>
    <div class="col-sm-9">
        <ul>
            <li>今天到期：1</li>
            <li>逾期：2</li>
        </ul>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-sm">
      <thead  class="thead-dark">
        <tr>
          <th>描述</th>
          <th>到期日</th>
        </tr>
      </thead>
      <tbody>
        <!-- 法一 -->
          {foreach $content as $c}
            <tr>
              <td>{$c.directions}</td>
              <td>{$c.end}</td>
            </tr>
          {/foreach}
          <!-- 法二 -->
          <tr>
            <td>{$content.1.directions}</td>
            <td>{$content.1.end}</td>
          </tr>
          <tr>
            <td>{$content.2.directions}</td>
            <td>{$content.2.end}</td>
          </tr>
      </tbody>
    </table>
</div>

</body>
</html>

     

prev5. 套用Smarty樣板
5-2 index.phpnext

友善列印 & 下載 PDF 匯出 MarkDown 格式