:::
3-3-4 常用資料庫的欄位類型
3-3-5 發布頁面 admin.html 初步完成
- 目前發布頁面看起來像這樣：
admin.html完整語法範例：<!DOCTYPE html> <html lang="en"> <head> <title>校園日誌</title> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Bootstrap CSS v5.3.1 --> <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <header> <!-- place navbar here --> <nav class="navbar navbar-expand-md navbar-dark bg-info mb-5"> <div class="container-fluid"> <a class="navbar-brand" href="/">XX國小學校日誌</a> <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class="nav-link active" href="#">校園日誌</a> </li> <li class="nav-item"> <a class="nav-link" href="#">榮譽榜</a> </li> <li class="nav-item"> <a class="nav-link" href="#">媒體新聞</a> </li> </ul> <form class="d-flex my-2 my-lg-0"> <input class="form-control me-sm-2" type="text" placeholder="搜尋文章" /> <button class="btn btn-warning my-2 my-sm-0 text-nowrap" type="submit"> 搜尋 </button> </form> </div> </div> </nav> </header> <main> <div class="container"> <h3>管理界面</h3> <div class="row"> <div class="col-md-9"> <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> </div> <div class="col-md-3"> <ul class="list-group"> <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active"> 2023 <span class="badge bg-success badge-pill">98</span> </li> <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> 2022 <span class="badge bg-success badge-pill">3623</span> </li> <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> 2021 <span class="badge bg-success badge-pill">3567</span> </li> </ul> </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>
