:::
2-3 將首頁和滑動圖整併在一起
2-4 請AI製作文章發布界面
- 接著製作編輯文章用的界面，通常就是所謂的後台。
- 我們以
index.html為基礎，另存成admin.html即可，差別僅在於主內容區是一個文章編輯表單，因此，我們只要製作表單部份即可。 - 請貼入提示詞：
請用BootStrap5製作一個文章編輯表單並使用浮動標籤 (Floating labels)樣式，所需要的欄位有： 新聞標題(news_title)、新聞內容(news_content)、相關連結(related_link)、發布者(publisher)、學校名稱(school_name)、報導日期(report_date)、上傳種類(upload_type) 「發布者、學校名稱、報導日期」請列在同一個橫列 上傳種類可用下拉選單，並提供兩種選項，一種是上傳圖片(id=image_upload)，另一種是填入Yotube影片連結(id=youtube_link) 預設以上傳圖片為主，請於表單顯示上傳圖片欄位(image_files)僅限jpg及png，需能多檔上傳，並隱藏輸入Yotube影片網址欄位 若使用者切換為Yotube影片連結，請於表單顯示輸入Youtube影片網址欄位，並隱藏上傳圖片欄位 欄位名稱請用底線式來命名 表單需可送至 admin.php - 得到的結果如：
<!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文章編輯表單</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <h2 class="mb-4">文章編輯表單</h2> <form action="admin.php" method="POST" enctype="multipart/form-data"> <div class="form-floating mb-3"> <input type="text" class="form-control" id="news_title" name="news_title" placeholder="新聞標題" required> <label for="news_title">新聞標題</label> </div> <div class="form-floating mb-3"> <textarea class="form-control" id="news_content" name="news_content" placeholder="新聞內容" style="height: 100px" required></textarea> <label for="news_content">新聞內容</label> </div> <div class="form-floating mb-3"> <input type="url" class="form-control" id="related_link" name="related_link" placeholder="相關連結"> <label for="related_link">相關連結</label> </div> <div class="row mb-3"> <div class="col-md-4"> <div class="form-floating"> <input type="text" class="form-control" id="publisher" name="publisher" placeholder="發布者" required> <label for="publisher">發布者</label> </div> </div> <div class="col-md-4"> <div class="form-floating"> <input type="text" class="form-control" id="school_name" name="school_name" placeholder="學校名稱" required> <label for="school_name">學校名稱</label> </div> </div> <div class="col-md-4"> <div class="form-floating"> <input type="date" class="form-control" id="report_date" name="report_date" placeholder="報導日期" required> <label for="report_date">報導日期</label> </div> </div> </div> <div class="form-floating mb-3"> <select class="form-select" id="upload_type" name="upload_type"> <option value="image" selected>上傳圖片</option> <option value="youtube">Youtube影片連結</option> </select> <label for="upload_type">上傳種類</label> </div> <div class="mb-3" id="image_upload"> <label for="image_files" class="form-label">上傳圖片 (僅限jpg及png，可多選)</label> <input type="file" class="form-control" id="image_files" name="image_files[]" accept=".jpg,.png" multiple> </div> <div class="form-floating mb-3" id="youtube_link" style="display: none;"> <input type="url" class="form-control" id="youtube_url" name="youtube_url" placeholder="Youtube影片網址"> <label for="youtube_url">Youtube影片網址</label> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script> document.getElementById('upload_type').addEventListener('change', function() { if (this.value === 'image') { document.getElementById('image_upload').style.display = 'block'; document.getElementById('youtube_link').style.display = 'none'; } else { document.getElementById('image_upload').style.display = 'none'; document.getElementById('youtube_link').style.display = 'block'; } }); </script> </body> </html> - 若是有CSS樣式，則編輯
style.css並加入之 - 我們擷取出
<form></form>的部份即可，並取代admin.html原有<main></main>中的語法 - 在最後面載入 js 的部份改為：
<script src="admin.js"></script>，以便達成上傳欄位切換的目的 - 最後結果如下：
<!DOCTYPE html> <html lang="zh-Hant"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>南市校園藝文活動新聞</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header mb-4"> <div class="container"> <h1 class="text-center">南市校園藝文活動新聞</h1> </div> </header> <div class="container"> <div class="row"> <nav class="col-md-12 mb-3"> <ul class="nav"> <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> </nav> </div> <div class="row"> <main class="col-md-9"> <h2 class="my-4">文章編輯表單</h2> <form action="admin.php" method="POST" enctype="multipart/form-data"> <div class="form-floating mb-3"> <input type="text" class="form-control" id="news_title" name="news_title" placeholder="新聞標題" required> <label for="news_title">新聞標題</label> </div> <div class="form-floating mb-3"> <textarea class="form-control" id="news_content" name="news_content" placeholder="新聞內容" style="height: 100px" required></textarea> <label for="news_content">新聞內容</label> </div> <div class="form-floating mb-3"> <input type="url" class="form-control" id="related_link" name="related_link" placeholder="相關連結"> <label for="related_link">相關連結</label> </div> <div class="row mb-3"> <div class="col-md-4"> <div class="form-floating"> <input type="text" class="form-control" id="publisher" name="publisher" placeholder="發布者" required> <label for="publisher">發布者</label> </div> </div> <div class="col-md-4"> <div class="form-floating"> <input type="text" class="form-control" id="school_name" name="school_name" placeholder="學校名稱" required> <label for="school_name">學校名稱</label> </div> </div> <div class="col-md-4"> <div class="form-floating"> <input type="date" class="form-control" id="report_date" name="report_date" placeholder="報導日期" required> <label for="report_date">報導日期</label> </div> </div> </div> <div class="form-floating mb-3"> <select class="form-select" id="upload_type" name="upload_type"> <option value="image" selected>上傳圖片</option> <option value="youtube">Youtube影片連結</option> </select> <label for="upload_type">上傳種類</label> </div> <div class="mb-3" id="image_upload"> <label for="image_file" class="form-label">上傳圖片 (僅限jpg及png)</label> <input type="file" class="form-control" id="image_files" name="image_files[]" accept=".jpg,.png" multiple> </div> <div class="form-floating mb-3" id="youtube_link" style="display: none;"> <input type="url" class="form-control" id="youtube_url" name="youtube_url" placeholder="Youtube影片網址"> <label for="youtube_url">Youtube影片網址</label> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </main> <aside class="col-md-3"> <div class="list-group mb-4"> <a href="#" class="list-group-item list-group-item-action">回上方神按鈕</a> <a href="#" class="list-group-item list-group-item-action">快速登入</a> </div> <div class="card mb-4"> <div class="card-header">近期新聞</div> <ul class="list-group list-group-flush"> <li class="list-group-item">2024-07-31 【南市新聞】酷暑高溫...</li> <li class="list-group-item">2024-07-30 【臺南新聞】大臺南...</li> <li class="list-group-item">2024-07-20 【活動訊息】府城歸...</li> </ul> </div> </aside> </div> </div> <footer class="bg-light mt-4 py-3"> <div class="container text-center"> <p>系統設計：網你設計，電話：(06) xxxxxxxx (服務時間)</p> <p>Copyright © 2011 臺南市政府教育局資訊中心 All Rights Reserved.</p> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="admin.js"></script> </body> </html> - 建立新的
admin.js，並將<script></script>中的內容貼入，這裡面是用來切換上傳欄位用的，內容如下：document.getElementById('upload_type').addEventListener('change', function() { if (this.value === 'image') { document.getElementById('image_upload').style.display = 'block'; document.getElementById('youtube_link').style.display = 'none'; } else { document.getElementById('image_upload').style.display = 'none'; document.getElementById('youtube_link').style.display = 'block'; } });
在選擇變數命名風格時，通常根據團隊的規範或個人習慣來決定。以下是一些建議：
- 小駝峰式（lowerCamelCase）：常用於變數和函數名稱。
- 大駝峰式（UpperCamelCase）：常用於類名。
- 底線式（snake_case）：常用於變數名稱，特別是在PHP的全局或長變數名稱。
- 大寫底線式（UPPER_SNAKE_CASE）：常用於常量名稱。
