Jill 筆記
:::
:::
所有書籍
「PHP從入門到放棄實戰班」目錄
MarkDown
5. 套用Smarty樣板
1. 實戰之前
1-1 安裝開發環境
1-2 上課範例
2. HTML基礎
2-1 index.html
3. BootStrap響應式框架
3-1 格線系統
3-2 表格
3-3 導覽列
3-4 表單
4. PHP基本語法
4-1 註解
4-2 PHP資訊頁
4-3 PHP變數與陣列
4-4 各種訊息整理
5. 套用Smarty樣板
5-1 使用 Smarty
5-2 index.php
5-3 templates/index.tpl
5-4 php二維陣列
6. 資料庫規劃
6-1 MySQL常用資料類型一覽
6-2 讓PHP7連線到MySQL資料庫
7. PHP程式整併與樣板流程判斷
7-1 PHP條件判斷
7-2 PHP的變數過濾
7-3 練習自訂函數
7-4 templates/index.tpl
7-5 index.php
8. 製作表單並寫入資料到資料庫
8-1 index.php
8-2 post_form.tpl
8-2-1 post_form.tpl
8-3 templates/index.tpl
8-4 footer.php
9. 資料庫讀取
9-1 幾個常用的迴圈用法
9-2 讀出資料的安全性過濾並顯示
9-3 想想寫入還有什麼問題?
9-4 templates/post_form.tpl
9-5 index.php
9-6 templates/index.tpl
10. 編輯表單、刪除資料
10-1 顯示單筆資料
10-2 刪除事項
10-3 index.php
10-4 templates/post_form.tpl
10-5 templates/index.tpl
10-6 templates/show_one.tpl
11. 其他細節處理(補充)
11-1 小月曆
11-2 加入所見即所得編輯器
11-3 表單驗證
11-4 分頁功能
12. 練習
5-2 index.php
PHP從入門到放棄實戰班 ============ ### 一、Smarty基本操作 1. 大原則：和外觀有關的東西都放到.html或.tpl中，所需要的資料全由.php提供，簡單範例，index.php內容： ```markup <?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 內容： ```markup <head> <title>{$title}</title> </head> <body> ~~~~~~~~~~~~~~~~~~~~~~~~~~以下省略~~~~~~~~~~~~~~~~~~~~ <a class="navbar-brand" href="#"> <h1>{$header}</h1> </a> ``` 5. index.php ```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 ```markup <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變數及陣列 <div class="table-responsive"> <table border="1" cellpadding="0" cellspacing="0" class="table table-bordered table-hover table-condensed" style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <th style="background-color: rgb(0, 51, 0); text-align: center;"><span style="color:#FFFFFF;">傳送內容</span></th> <th style="background-color: rgb(0, 51, 0); text-align: center;"><span style="color:#FFFFFF;">PHP檔（\*.php）</span></th> <th style="background-color: rgb(0, 51, 0); text-align: center;"><span style="color:#FFFFFF;">Smarty樣板檔（\*.tpl）</span></th> </tr> <tr> <th style="vertical-align: middle; background-color: rgb(51, 0, 0);"><span style="color:#FFFFFF;">一般變數</span></th> <td> ```php $header = '我的待辦清單'; $smarty->assign('header', $header); ``` </td> <td> ```markup {$header} ``` </td> </tr> <tr> <th style="vertical-align: middle; background-color: rgb(51, 0, 0);"><span style="color:#FFFFFF;">一維陣列</span></th> <td> ```php $navbar['home'] = "回首頁"; $navbar['post'] = "發布待辦事項"; $smarty->assign('navbar', $navbar); ``` </td> <td> ```markup <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> ``` </td> </tr> <tr> <th style="vertical-align: middle; background-color: rgb(51, 0, 0);"><span style="color:#FFFFFF;">二維陣列</span></th> <td> ```php $content[1]['directions'] = "撰寫程式"; $content[1]['end'] = "2020/06/08"; $content[2]['directions'] = "開會"; $content[2]['end'] = "2020/06/10"; $smarty->assign('content', $content); ``` </td> <td> ```markup {foreach $content as $c} <tr> <td>{$c.directions}</td> <td>{$c.end}</td> </tr> {/foreach} ``` 或 ```markup <tr> <td>{$content.1.directions}</td> <td>{$content.1.end}</td> </tr> <tr> <td>{$content.2.directions}</td> <td>{$content.2.end}</td> </tr> ``` </td> </tr> </tbody> </table> </div>三、程式碼 1. index.php ```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 ```markup <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> ``` </body></html>
5. 套用Smarty樣板