跳至主要內容
:::
prev2-3 將首頁和滑動圖整併在一起
3. 精修完整界面樣板next
用AI學PHP8

2-4 請AI製作文章發布界面

  1. 接著製作編輯文章用的界面，通常就是所謂的後台。
  2. 我們以 index.html 為基礎，另存成 admin.html 即可，差別僅在於主內容區是一個文章編輯表單，因此，我們只要製作表單部份即可。
  3. 請貼入提示詞： 
    請用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

     

  4. 得到的結果如： 
    <!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>

     

  5. 若是有CSS樣式，則編輯 style.css 並加入之
  6. 我們擷取出<form></form>的部份即可，並取代 admin.html 原有 <main></main> 中的語法
  7. 在最後面載入 js 的部份改為： <script src="admin.js"></script>，以便達成上傳欄位切換的目的
  8. 最後結果如下： 
    <!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>

     

  9. 建立新的 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）：常用於常量名稱。

 

prev2-3 將首頁和滑動圖整併在一起
3. 精修完整界面樣板next

友善列印 & 下載 PDF 匯出 MarkDown 格式
:::

書籍目錄

展開 | 闔起

快速登入

臺南市 OpenID 登入 login icon 花蓮縣 OpenID 登入 login icon

進階搜尋

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

計數器

今天： 1512151215121512
昨天： 5010501050105010
總計： 9184599918459991845999184599918459991845999184599