XOOPS輕鬆架 - 線上書籍

:::

用AI學PHP8
========

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

新聞內容

相關連結

發布者

學校名稱

報導日期

上傳種類

上傳圖片 (僅限jpg及png，可多選)

Youtube影片網址

``` 5. 若是有CSS樣式，則編輯 `style.css` 並加入之 6. 我們擷取出``的部份即可，並取代 `admin.html` 原有 `

` 中的語法 7. 在最後面載入 js 的部份改為： ``，以便達成上傳欄位切換的目的 8. 最後結果如下： ```markup 南市校園藝文活動新聞

文章編輯表單

新聞標題

新聞內容

相關連結

發布者

學校名稱

報導日期

上傳種類

上傳圖片 (僅限jpg及png)

Youtube影片網址

``` 9. 建立新的 `admin.js`，並將`` 中的內容貼入，這裡面是用來切換上傳欄位用的，內容如下： ```javascript 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）**：常用於常量名稱。

:::

書籍目錄

展開 | 闔起

快速登入

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1994

計數器

今天：
昨天：
總計：

MarkDown

文章編輯表單

書籍目錄

快速登入

計數器