:::
5-4 建立管理樣板 admin.tpl 並套用之
- 將
admin.html改名為templates/admin.tpl(或將admin.html拖到templates下,按 F2 修改副檔名) - 將發布表單拆分成子樣板,並命名為
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> - 將一些重複部份(如: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> - 最後修改
admin.php在最下方加入套用樣板語法$smarty->display('admin.tpl'); - 順便將執行後轉向從原本的
admin.html改成正確的index.php(因為該檔現在已經有了,雖然show的功能還沒做出來)//執行後轉向 header("location: index.php?op=show&id=$id"); exit; - 如此便完成樣板套用,下次直接執行 http://localhost/admin.php 即可
5-3-4 自定義分頁工具列