iT邦幫忙

2024 iThome 鐵人賽
DAY 18
0
JavaScript

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

day 18 javascript專題網頁程式管理系統

16th鐵人賽
105 瀏覽

  • 分享至 

  • xImage
    •  

今天是第十八天我們可以寫一個javascript專題網頁程式管理系統，大學畢業都需要專題，因此我們可以自己架設一個網頁去放各個科系的專題發表，以下是我的程式碼

  1. 登入/註冊系統：學生和管理員可以登入系統，管理專題發表資料。
  2. 專題上傳功能：學生可以上傳他們的專題，包含專題名稱、描述、指導老師、類別、附件（如PDF或PPT）。
  3. 專題瀏覽功能：所有人可以瀏覽並查看已發表的專題。
  4. 專題管理功能：管理員可以審核、編輯或刪除專題。
  5. 分類功能：根據不同科系或專題類型進行分類瀏覽。

前端：HTML + CSS + JavaScript

我將示範如何實現前端的框架，並介紹簡單的登入系統和專題展示頁面。

檔案結構

project-management-system/
│
├── index.html          // 首頁
├── login.html          // 登入頁面
├── upload.html         // 專題上傳頁面
├── projects.html       // 專題瀏覽頁面
├── admin.html          // 管理員頁面
│
├── css/
│   └── style.css       // 網頁樣式
│
└── js/
    └── script.js       // JavaScript 行為

1. index.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 rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>大學專題管理系統</h1>
        <nav>
            <a href="login.html">登入</a>
            <a href="projects.html">瀏覽專題</a>
        </nav>
    </header>
    <main>
        <h2>歡迎來到大學專題管理系統</h2>
        <p>這裡展示各科系的專題發表，學生可以上傳專題，管理員可以審核與管理。</p>
    </main>
</body>
</html>

2. login.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 rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>登入系統</h1>
    </header>
    <main>
        <form id="loginForm">
            <label for="username">使用者名稱:</label>
            <input type="text" id="username" name="username" required>
            
            <label for="password">密碼:</label>
            <input type="password" id="password" name="password" required>
            
            <button type="submit">登入</button>
        </form>
    </main>
    
    <script src="js/script.js"></script>
</body>
</html>

3. upload.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 rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>上傳專題</h1>
    </header>
    <main>
        <form id="uploadForm">
            <label for="title">專題名稱:</label>
            <input type="text" id="title" name="title" required>

            <label for="description">專題描述:</label>
            <textarea id="description" name="description" required></textarea>

            <label for="advisor">指導老師:</label>
            <input type="text" id="advisor" name="advisor" required>

            <label for="category">類別:</label>
            <select id="category" name="category">
                <option value="cs">電腦科學</option>
                <option value="ee">電機工程</option>
                <option value="me">機械工程</option>
                <!-- 可以增加更多類別 -->
            </select>

            <label for="file">專題附件 (PDF, PPT):</label>
            <input type="file" id="file" name="file" accept=".pdf,.ppt" required>

            <button type="submit">上傳專題</button>
        </form>
    </main>

    <script src="js/script.js"></script>
</body>
</html>

4. projects.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 rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>專題瀏覽</h1>
    </header>
    <main>
        <div id="projectsList">
            <!-- 專題列表會由 JavaScript 動態插入 -->
        </div>
    </main>

    <script src="js/script.js"></script>
</body>
</html>

5. admin.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 rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>管理專題</h1>
    </header>
    <main>
        <div id="adminPanel">
            <!-- 管理員專用功能，如審核、刪除專題 -->
        </div>
    </main>

    <script src="js/script.js"></script>
</body>
</html>

6. script.js - JavaScript 行為邏輯

document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    // 簡單模擬登入檢查
    if (username === 'admin' && password === 'password') {
        alert('登入成功，歡迎管理員！');
        window.location.href = 'admin.html';
    } else {
        alert('登入成功，歡迎使用者！');
        window.location.href = 'projects.html';
    }
});

document.getElementById('uploadForm')?.addEventListener('submit', function(event) {
    event.preventDefault();
    const title = document.getElementById('title').value;
    const description = document.getElementById('description').value;
    const advisor = document.getElementById('advisor').value;
    const category = document.getElementById('category').value;
    const file = document.getElementById('file').files[0];

    // 模擬上傳專題
    console.log(`專題名稱: ${title}, 描述: ${description}, 指導老師: ${advisor}, 類別: ${category}, 附件: ${file.name}`);
    alert('專題已成功上傳！');
});

window.onload = function() {
    // 模擬動態顯示專題列表
    const projectsList = document.getElementById('projectsList');
    if (projectsList) {
        const sampleProjects = [
            { title: '專題一', description: '這是第一個專題', advisor: '老師A', category: '電腦科學' },
            { title: '專題二', description: '這是第二個專題', advisor: '老師B', category: '電機工程' }
        ];

        sampleProjects.forEach(project => {
            const projectDiv = document.createElement('div');
            projectDiv.className = 'project';
            projectDiv.innerHTML = `<h3>${project.title}</h3><p>${project.description}</p><p>指導老師: ${project.advisor}</p><p>類別: ${project.category}</p>`;
            projectsList.appendChild(projectDiv);
        });
    }
};

7.

style.css - 基本樣式

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

header {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 1rem;
}

nav a {
    color: white;
    margin: 0 1rem;
    text-decoration: none;
}

main {
    padding: 2rem;
}

form {
    max-width: 400px;
    margin: 0 auto;
}

label {
    display: block;
    margin-top: 10px;
}

input, textarea, select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
}

button {
    margin-top: 20px;
    padding: 10px;
    width: 100%;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

.project {
    background-color: white;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

接下來我會以解釋javascript程式碼部分為主

JavaScript 檔案 script.js 的部分代碼解釋

document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    // 簡單模擬登入檢查
    if (username === 'admin' && password === 'password') {
        alert('登入成功，歡迎管理員！');
        window.location.href = 'admin.html';
    } else {
        alert('登入成功，歡迎使用者！');
        window.location.href = 'projects.html';
    }
});

1. document.getElementById('loginForm').addEventListener('submit', function(event) {...});

這行程式碼是為 loginForm 表單元素添加一個 事件監聽器，該監聽器會在表單被提交（submit）時觸發。

  • document.getElementById('loginForm')：通過 id 找到表單 <form> 元素。
  • addEventListener('submit', ...)：設置表單的提交事件監聽器，當表單被提交時，執行以下代碼塊。

2. event.preventDefault();

這行程式碼的作用是防止表單的默認行為，即當表單被提交時，通常會重新加載頁面或導向其他頁面。這裡我們不想讓頁面立即跳轉或刷新，而是由 JavaScript 來處理資料，因此調用 event.preventDefault() 阻止默認行為。

3. const username = document.getElementById('username').value;

這行程式碼透過 document.getElementById('username') 獲取表單中 id 為 username 的輸入框，並使用 .value 來取得使用者輸入的值。同樣的操作在下一行也應用於密碼輸入框。

4. 模擬登入檢查

if (username === 'admin' && password === 'password') {
    alert('登入成功，歡迎管理員！');
    window.location.href = 'admin.html';
} else {
    alert('登入成功，歡迎使用者！');
    window.location.href = 'projects.html';
}
  • 這裡的條件判斷是用來模擬登入檢查：
    • 如果使用者輸入的 username 為 'admin' 且 password 為 'password'，則視為管理員登入，並顯示提示訊息 "登入成功，歡迎管理員！"，然後導向管理員頁面 admin.html。
    • 如果使用者輸入的不是這兩個值，那麼他會被視為普通使用者，並導向專題瀏覽頁面 projects.html。

這是非常簡單的模擬驗證，實際應用中需要後端配合來進行真正的登入認證。

document.getElementById('uploadForm')?.addEventListener('submit', function(event) {
    event.preventDefault();
    const title = document.getElementById('title').value;
    const description = document.getElementById('description').value;
    const advisor = document.getElementById('advisor').value;
    const category = document.getElementById('category').value;
    const file = document.getElementById('file').files[0];

    // 模擬上傳專題
    console.log(`專題名稱: ${title}, 描述: ${description}, 指導老師: ${advisor}, 類別: ${category}, 附件: ${file.name}`);
    alert('專題已成功上傳！');
});

1. document.getElementById('uploadForm')?.addEventListener('submit', function(event) {...});

這行程式碼的結構與登入表單類似，不過這裡針對的是 id 為 uploadForm 的表單。這裡的 ? 是可選鏈接運算符（optional chaining），它會在 uploadForm 存在的情況下執行後面的代碼，避免頁面中未找到該元素時出現錯誤。

2. 提取上傳表單的數據

const title = document.getElementById('title').value;
const description = document.getElementById('description').value;
const advisor = document.getElementById('advisor').value;
const category = document.getElementById('category').value;
const file = document.getElementById('file').files[0];

這幾行程式碼從表單中的各個輸入框取得對應的值：

  • title: 專題名稱
  • description: 專題描述
  • advisor: 指導老師
  • category: 專題類別
  • file: 上傳的專題檔案（例如 PDF 或 PPT）。這裡的 .files[0] 表示取得所選的第一個檔案，因為 input 元素可以選擇多個檔案，但此處只選取一個。

3. 模擬專題上傳

console.log(`專題名稱: ${title}, 描述: ${description}, 指導老師: ${advisor}, 類別: ${category}, 附件: ${file.name}`);
alert('專題已成功上傳！');

這段程式碼僅僅是模擬上傳過程：

  • console.log(...) 會在瀏覽器的開發者工具中輸出專題的相關資訊，讓你確認表單資料是否正確。
  • alert('專題已成功上傳！') 會顯示一個對話框，告知使用者上傳成功。

實際應用中，你會把這些資料傳送到後端伺服器進行真正的儲存或處理。

window.onload = function() {
    // 模擬動態顯示專題列表
    const projectsList = document.getElementById('projectsList');
    if (projectsList) {
        const sampleProjects = [
            { title: '專題一', description: '這是第一個專題', advisor: '老師A', category: '電腦科學' },
            { title: '專題二', description: '這是第二個專題', advisor: '老師B', category: '電機工程' }
        ];

        sampleProjects.forEach(project => {
            const projectDiv = document.createElement('div');
            projectDiv.className = 'project';
            projectDiv.innerHTML = `<h3>${project.title}</h3><p>${project.description}</p><p>指導老師: ${project.advisor}</p><p>類別: ${project.category}</p>`;
            projectsList.appendChild(projectDiv);
        });
    }
};

1. window.onload = function() {...}

這段程式碼會在頁面載入完成後執行，確保 DOM 結構已經就緒，這樣就可以安全地操作網頁上的元素。

2. const projectsList = document.getElementById('projectsList');

這行程式碼找到專題列表的 <div> 容器，該容器是用來顯示專題的。

3. 模擬專題數據

const sampleProjects = [
    { title: '專題一', description: '這是第一個專題', advisor: '老師A', category: '電腦科學' },
    { title: '專題二', description: '這是第二個專題', advisor: '老師B', category: '電機工程' }
];
  • title: 專題名稱
  • description: 專題描述
  • advisor: 指導老師
  • category: 專題的科系或分類

4. 動態生成專題內容

sampleProjects.forEach(project => {
    const projectDiv = document.createElement('div');
    projectDiv.className = 'project';
    projectDiv.innerHTML = `<h3>${project.title}</h3><p>${project.description}</p><p>指導老師: ${project.advisor}</p><p>類別: ${project.category}</p>`;
    projectsList.appendChild(projectDiv);
});

這段程式碼會遍歷 sampleProjects 數組，對每個專題動態生成一個 div 元素，並將專題資料插入到 HTML 結構中。每個專題會顯示：

  • 專題名稱
  • 專題描述
  • 指導

老師

  • 專題類別

最後，將生成的 div 加入到 projectsList 容器中，實現專題列表的動態顯示。

總結

這個 JavaScript 文件的主要功能是處理表單提交、模擬登入驗證、專題上傳和專題列表的動態顯示。


上一篇
day 17 javascript自動優化規劃行程系統
下一篇
day 19 javascript線上學習程式網頁程式管理系統
系列文
Javascript網頁程式管理系統 共 30 篇
  1. 26
    day 26 javascript有機蔬菜認證網頁程式管理系統
  2. 27
    day 27 javascript社交工程演練網頁程式管理系統
  3. 28
    day 28 Javascript結合line bot時事推薦股票網頁程式管理系統
  4. 29
    day 29 javascript結合line分析地價成長空間網頁程式管理系統
  5. 30
    day 30 javascript腳踏車路線紀錄分享給車友網頁程式管理系統
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22198 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙