:::

5-4 建立管理樣板 admin.tpl 並套用之

  1. admin.html 改名為 templates/admin.tpl(或將 admin.html 拖到 templates 下,按 F2 修改副檔名)
  2. 將發布表單拆分成子樣板,並命名為 templates/admin_create.tpl
    <form action="admin.php" method="post" enctype="multipart/form-data">
        <div class="mb-3 row">
            <label for="title" class="col-sm-3 col-form-label">文章標題</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="title" name="title" placeholder="請輸入文章標題">
            </div>
        </div>
        <div class="mb-3 row">
            <label for="content" class="col-sm-3 col-form-label">文章內容</label>
            <div class="col-sm-9">
                <textarea class="form-control" id="content" name="content" placeholder="請輸入文章內容"></textarea>
            </div>
        </div>
        <div class="mb-3 row">
            <label for="author" class="col-sm-3 col-form-label">發布者資訊</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="author" name="author" placeholder="請輸入發布者資訊">
            </div>
        </div>
        <div class="mb-3 row">
            <label for="date" class="col-sm-3 col-form-label">文章日期</label>
            <div class="col-sm-9">
                <input type="date" class="form-control" id="date" name="date" placeholder="請選擇文章日期">
            </div>
        </div>
        <div class="mb-3 row">
            <label for="category" class="col-sm-3 col-form-label">文章類別</label>
            <div class="col-sm-9">
                <select class="form-select" id="category" name="category">
                    <option value="1">校園日誌</option>
                    <option value="2">榮譽榜</option>
                    <option value="3">媒體新聞</option>
                </select>
            </div>
        </div>
        <div class="mb-3 row">
            <label for="media" class="col-sm-3 col-form-label">上傳相片或影片</label>
            <div class="col-sm-9">
                <input type="file" class="form-control" id="media" name="media[]" multiple accept=".png, .jpg, .gif, .mp4">
            </div>
        </div>
        <div class="mb-3 row">
            <div class="col-sm-9 offset-sm-3">
                <button type="submit" class="btn btn-primary">送出</button>
            </div>
        </div>
    </form>

     

  3. 將一些重複部份(如:header、導覽列...等)也改成用引入子樣板檔,如:
    <!DOCTYPE html>
    <html lang="en">
    {include file="index_head.tpl" web_title="校園日誌管理界面"}
    
    <body>
      <header>
        <!-- 導覽列 -->
        {include file="index_nav.tpl"}
      </header>
      <main>
        <div class="container">
          <h3>管理界面</h3>
          <div class="row">
            <div class="col-md-9">
              <!-- 編輯表單 -->
              {include file="admin_create.tpl"}
            </div>
            <div class="col-md-3">
              <!-- 側邊欄 -->
              {include file="index_side.tpl"}
            </div>
          </div>
        </div>
      </main>
      <footer>
        <!-- place footer here -->
      </footer>
      <!-- Bootstrap JavaScript Libraries -->
      <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    
    </html>

     

  4. 最後修改 admin.php 在最下方加入套用樣板語法
    $smarty->display('admin.tpl');

     

  5. 順便將執行後轉向從原本的 admin.html 改成正確的 index.php(因為該檔現在已經有了,雖然 show 的功能還沒做出來)
    //執行後轉向
    header("location: index.php?op=show&id=$id");
    exit;

     

  6. 如此便完成樣板套用,下次直接執行 http://localhost/admin.php 即可

:::

書籍目錄

展開 | 闔起

快速登入


https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D1969%26tbsn%3D52

計數器

今天: 4174417441744174
昨天: 2489248924892489
總計: 8026156802615680261568026156802615680261568026156