day 22 javascript線上影片教學平台網頁程式管理系統

2024 iThome 鐵人賽

DAY 22

JavaScript

Javascript網頁程式管理系統系列第 22 篇

16th鐵人賽

neilsu02

2024-09-23 22:45:36

18 瀏覽

分享至

今天是第二十二天我們可以寫一個javascript線上影片教學平台網頁程式管理系統，以下是我的程式碼

1. HTML (管理頁面結構)

<!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-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="my-4 text-center">影片教學平台管理系統</h1>
        
        <!-- 影片上傳區 -->
        <div class="card mb-4">
            <div class="card-header">上傳影片</div>
            <div class="card-body">
                <form id="uploadForm">
                    <div class="mb-3">
                        <label for="videoTitle" class="form-label">影片標題</label>
                        <input type="text" id="videoTitle" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label for="videoFile" class="form-label">選擇影片檔案</label>
                        <input type="file" id="videoFile" class="form-control" accept="video/*" required>
                    </div>
                    <button type="submit" class="btn btn-primary">上傳</button>
                </form>
            </div>
        </div>

        <!-- 影片列表區 -->
        <div class="card">
            <div class="card-header">已上傳影片</div>
            <div class="card-body">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>影片標題</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="videoList"></tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

2. CSS (樣式設計)

body {
    background-color: #f8f9fa;
}

h1 {
    color: #343a40;
}

.card-header {
    background-color: #007bff;
    color: white;
}

.btn-primary {
    background-color: #007bff;
    border: none;
}

3. JavaScript (影片管理邏輯)

// 影片資料
let videos = [];

// 初始化影片列表
function renderVideoList() {
    const videoList = document.getElementById('videoList');
    videoList.innerHTML = '';

    if (videos.length === 0) {
        videoList.innerHTML = '<tr><td colspan="2">目前沒有影片。</td></tr>';
        return;
    }

    videos.forEach((video, index) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${video.title}</td>
            <td>
                <button class="btn btn-warning btn-sm" onclick="editVideo(${index})">編輯</button>
                <button class="btn btn-danger btn-sm" onclick="deleteVideo(${index})">刪除</button>
            </td>
        `;
        videoList.appendChild(row);
    });
}

// 上傳影片
document.getElementById('uploadForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const title = document.getElementById('videoTitle').value;
    const file = document.getElementById('videoFile').files[0];

    if (!file) {
        alert('請選擇影片檔案。');
        return;
    }

    const video = {
        title: title,
        file: file
    };

    videos.push(video);
    renderVideoList();
    this.reset();  // 重置表單
});

// 編輯影片
function editVideo(index) {
    const newTitle = prompt('請輸入新的影片標題', videos[index].title);
    if (newTitle !== null && newTitle.trim() !== '') {
        videos[index].title = newTitle;
        renderVideoList();
    }
}

// 刪除影片
function deleteVideo(index) {
    if (confirm('確定要刪除此影片嗎？')) {
        videos.splice(index, 1);
        renderVideoList();
    }
}

// 初始化頁面時渲染影片列表
renderVideoList();

4. 說明

HTML 部分提供了管理系統的基本結構，包括影片上傳區和已上傳影片的列表區。
CSS 使用簡單的樣式來美化網頁，使其具有現代感和友好的使用者介面。
JavaScript 負責影片上傳、顯示、編輯和刪除的邏輯操作，並且能即時更新頁面上的影片列表。

我會以解釋javascript為主要的程式碼解說

1. 影片資料儲存陣列

let videos = [];

這是一個用來儲存所有影片資料的空陣列，每個影片物件包含 title 和 file 屬性。在影片上傳時，我們會將影片的資訊加入這個陣列中，並在需要的時候更新或刪除。

2. 渲染影片列表 `renderVideoList`

function renderVideoList() {
    const videoList = document.getElementById('videoList');
    videoList.innerHTML = ''; // 清空列表，避免重複渲染

    if (videos.length === 0) {
        videoList.innerHTML = '<tr><td colspan="2">目前沒有影片。</td></tr>';
        return; // 如果沒有影片，顯示 "目前沒有影片"
    }

    videos.forEach((video, index) => {
        const row = document.createElement('tr'); // 創建一個表格行
        row.innerHTML = `
            <td>${video.title}</td> 
            <td>
                <button class="btn btn-warning btn-sm" onclick="editVideo(${index})">編輯</button>
                <button class="btn btn-danger btn-sm" onclick="deleteVideo(${index})">刪除</button>
            </td>
        `;
        videoList.appendChild(row); // 將每個影片資料添加到表格中
    });
}

videoList.innerHTML = '';：每次重新渲染影片列表前，先清空 videoList 內的內容，確保列表不會重複顯示。
判斷影片數量：如果 videos 陣列為空，則顯示「目前沒有影片」的提示，並終止渲染流程。
forEach 遍歷：當有影片時，遍歷 videos 陣列，對每個影片創建一個 <tr>（表格列），並動態插入影片標題與操作按鈕（編輯與刪除）。

3. 影片上傳事件 `uploadForm`

document.getElementById('uploadForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表單預設的提交行為（避免頁面重新載入）
    
    const title = document.getElementById('videoTitle').value; // 取得影片標題
    const file = document.getElementById('videoFile').files[0]; // 取得上傳的影片檔案

    if (!file) {
        alert('請選擇影片檔案。');
        return; // 如果沒有選擇檔案，提示並結束函數
    }

    const video = {
        title: title,
        file: file // 將影片標題和檔案保存為一個物件
    };

    videos.push(video); // 將新影片資料推入 videos 陣列中
    renderVideoList(); // 重新渲染影片列表
    this.reset(); // 重置表單內容
});

event.preventDefault()：阻止表單提交的預設行為，這樣表單提交後不會刷新頁面。
表單值提取：
- 透過 document.getElementById('videoTitle').value 取得影片標題。
- 透過 document.getElementById('videoFile').files[0] 取得選擇的影片檔案。
驗證檔案是否存在：如果使用者沒有選擇影片檔案，則顯示提示並結束函數。
保存影片資料：將影片標題和檔案組合成一個物件，並加入 videos 陣列。
重新渲染影片列表：影片資料更新後，呼叫 renderVideoList() 來更新 UI。
this.reset()：重置表單，清空所有欄位。

4. 編輯影片 `editVideo`

function editVideo(index) {
    const newTitle = prompt('請輸入新的影片標題', videos[index].title); // 使用者輸入新標題
    if (newTitle !== null && newTitle.trim() !== '') { // 確保新標題有效
        videos[index].title = newTitle; // 更新影片標題
        renderVideoList(); // 重新渲染影片列表
    }
}

prompt()：彈出一個對話框，讓使用者輸入新的影片標題。初始值為當前影片的標題。
有效性檢查：如果使用者輸入了新標題，並且該標題不為空白或 null，則更新影片標題。
更新並重新渲染：更新 videos 陣列中的標題後，重新渲染影片列表。

5. 刪除影片 `deleteVideo`

function deleteVideo(index) {
    if (confirm('確定要刪除此影片嗎？')) { // 彈出確認對話框
        videos.splice(index, 1); // 從陣列中刪除該影片
        renderVideoList(); // 重新渲染影片列表
    }
}

confirm()：彈出確認對話框，詢問使用者是否確定刪除影片。如果使用者點擊「確認」，則繼續執行刪除操作。
videos.splice(index, 1)：從 videos 陣列中移除指定索引的影片。splice() 是一個用來移除陣列中元素的方法，第一個參數是起始位置，第二個參數是刪除的數量（1 表示刪除一個元素）。
重新渲染：刪除後，重新渲染影片列表。