:::

3-3-5 發布頁面 admin.html 初步完成

  1. 目前發布頁面看起來像這樣:
  2. 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>

     


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1795

計數器

今天: 1467146714671467
昨天: 1416141614161416
總計: 7340114734011473401147340114734011473401147340114