day 26 javascript有機蔬菜認證網頁程式管理系統

2024 iThome 鐵人賽

DAY 26

JavaScript

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

16th鐵人賽

neilsu02

2024-09-27 23:44:46

43 瀏覽

分享至

今天是第二十六天我們可以寫一個javascript有機蔬菜認證網頁程式管理系統，以下是我的程式碼

蔬菜資料管理（新增、編輯、刪除有機蔬菜認證資料）。
認證狀態管理（確認或撤銷蔬菜的有機認證）。
資料儲存（使用 localStorage 來暫時儲存資料）。
使用者介面（展示有機蔬菜列表、提供新增和編輯介面）。

系統架構：

HTML：建立網頁的結構。
CSS：簡單的樣式設定。
JavaScript：管理資料和操作。

1. `index.html` (主頁面)

<!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 rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>有機蔬菜認證管理系統</h1>

        <div id="vegetable-form">
            <h2>新增或編輯蔬菜</h2>
            <input type="text" id="veg-name" placeholder="蔬菜名稱">
            <input type="text" id="veg-type" placeholder="種類">
            <input type="text" id="veg-certification" placeholder="認證機構">
            <button id="add-btn" onclick="addOrUpdateVegetable()">新增/更新</button>
        </div>

        <div id="vegetable-list">
            <h2>有機蔬菜列表</h2>
            <table>
                <thead>
                    <tr>
                        <th>名稱</th>
                        <th>種類</th>
                        <th>認證機構</th>
                        <th>狀態</th>
                        <th>動作</th>
                    </tr>
                </thead>
                <tbody id="veg-table-body">
                    <!-- 蔬菜資料會顯示在這裡 -->
                </tbody>
            </table>
        </div>
    </div>

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

2. `styles.css` (簡單樣式)

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

.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
}

button {
    padding: 8px 12px;
    margin-top: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

3. `script.js` (核心邏輯)

// 取得蔬菜列表
let vegetables = JSON.parse(localStorage.getItem('vegetables')) || [];

// 載入蔬菜資料到網頁
function loadVegetables() {
    const tableBody = document.getElementById('veg-table-body');
    tableBody.innerHTML = '';
    
    vegetables.forEach((veg, index) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${veg.name}</td>
            <td>${veg.type}</td>
            <td>${veg.certification}</td>
            <td>${veg.certified ? '已認證' : '未認證'}</td>
            <td>
                <button onclick="editVegetable(${index})">編輯</button>
                <button onclick="deleteVegetable(${index})">刪除</button>
                <button onclick="toggleCertification(${index})">${veg.certified ? '撤銷認證' : '確認認證'}</button>
            </td>
        `;
        tableBody.appendChild(row);
    });
}

// 新增或更新蔬菜
function addOrUpdateVegetable() {
    const name = document.getElementById('veg-name').value;
    const type = document.getElementById('veg-type').value;
    const certification = document.getElementById('veg-certification').value;

    if (name && type && certification) {
        const newVegetable = { name, type, certification, certified: false };

        const index = vegetables.findIndex(veg => veg.name === name);
        if (index === -1) {
            vegetables.push(newVegetable);
        } else {
            vegetables[index] = newVegetable;
        }

        localStorage.setItem('vegetables', JSON.stringify(vegetables));
        loadVegetables();
        clearForm();
    } else {
        alert('請輸入完整資訊！');
    }
}

// 編輯蔬菜資料
function editVegetable(index) {
    const veg = vegetables[index];
    document.getElementById('veg-name').value = veg.name;
    document.getElementById('veg-type').value = veg.type;
    document.getElementById('veg-certification').value = veg.certification;
}

// 刪除蔬菜
function deleteVegetable(index) {
    if (confirm('確定要刪除這個蔬菜嗎？')) {
        vegetables.splice(index, 1);
        localStorage.setItem('vegetables', JSON.stringify(vegetables));
        loadVegetables();
    }
}

// 切換認證狀態
function toggleCertification(index) {
    vegetables[index].certified = !vegetables[index].certified;
    localStorage.setItem('vegetables', JSON.stringify(vegetables));
    loadVegetables();
}

// 清空表單
function clearForm() {
    document.getElementById('veg-name').value = '';
    document.getElementById('veg-type').value = '';
    document.getElementById('veg-certification').value = '';
}

// 初始化頁面
document.addEventListener('DOMContentLoaded', loadVegetables);

功能簡介：

蔬菜管理：可以新增蔬菜名稱、種類和認證機構，並且可以確認或撤銷蔬菜的有機認證。
資料儲存：透過 localStorage 儲存蔬菜資料，即使重整頁面，資料依然存在。
動態更新：新增、編輯和刪除蔬菜後，網頁資料會立即更新。

1. `index.html` (主頁面)

<!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 rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>有機蔬菜認證管理系統</h1>

        <div id="vegetable-form">
            <h2>新增或編輯蔬菜</h2>
            <input type="text" id="veg-name" placeholder="蔬菜名稱">
            <input type="text" id="veg-type" placeholder="種類">
            <input type="text" id="veg-certification" placeholder="認證機構">
            <button id="add-btn" onclick="addOrUpdateVegetable()">新增/更新</button>
        </div>

        <div id="vegetable-list">
            <h2>有機蔬菜列表</h2>
            <table>
                <thead>
                    <tr>
                        <th>名稱</th>
                        <th>種類</th>
                        <th>認證機構</th>
                        <th>狀態</th>
                        <th>動作</th>
                    </tr>
                </thead>
                <tbody id="veg-table-body">
                    <!-- 蔬菜資料會顯示在這裡 -->
                </tbody>
            </table>
        </div>
    </div>

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

解釋：

HTML文件結構：這是網頁的基礎結構，包含了表單和顯示蔬菜列表的區域。
<head>標籤：定義了頁面的標題（<title>有機蔬菜認證系統）和連接外部 CSS 檔案（styles.css）來控制網頁的樣式。
<body>標籤：頁面上的主要內容放置在 <body> 中：
- 表單部分（vegetable-form）：允許使用者輸入蔬菜名稱、種類和認證機構，並按下 "新增/更新" 按鈕，來將蔬菜資料提交到系統中。
- 蔬菜列表（vegetable-list）：這裡會顯示已經新增的蔬菜資料，包括名稱、種類、認證狀態和操作按鈕（編輯、刪除和切換認證狀態）。
<script>標籤：引用 script.js，這是控制網頁動作的 JavaScript 程式碼檔案。

2. `styles.css` (簡單樣式)

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

.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
}

button {
    padding: 8px 12px;
    margin-top: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

解釋：

body：設定頁面的字體、背景顏色和邊距，使內容在頁面中居中顯示。
container：用於包裝頁面的內容，設定了最大寬度、內邊距和背景顏色，並增加了圓角和陰影效果。
h1, h2：設定標題文字為置中顯示。
table：定義表格寬度為 100%，並移除單元格間的間距，使表格邊框合併在一起。
th, td：設定表格單元格內的字體大小、對齊方式以及邊框樣式。
button：設定按鈕的樣式，包括背景顏色、邊距、圓角和游標樣式。

3. `script.js` (核心邏輯)

// 取得蔬菜列表
let vegetables = JSON.parse(localStorage.getItem('vegetables')) || [];

// 載入蔬菜資料到網頁
function loadVegetables() {
    const tableBody = document.getElementById('veg-table-body');
    tableBody.innerHTML = '';
    
    vegetables.forEach((veg, index) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${veg.name}</td>
            <td>${veg.type}</td>
            <td>${veg.certification}</td>
            <td>${veg.certified ? '已認證' : '未認證'}</td>
            <td>
                <button onclick="editVegetable(${index})">編輯</button>
                <button onclick="deleteVegetable(${index})">刪除</button>
                <button onclick="toggleCertification(${index})">${veg.certified ? '撤銷認證' : '確認認證'}</button>
            </td>
        `;
        tableBody.appendChild(row);
    });
}

// 新增或更新蔬菜
function addOrUpdateVegetable() {
    const name = document.getElementById('veg-name').value;
    const type = document.getElementById('veg-type').value;
    const certification = document.getElementById('veg-certification').value;

    if (name && type && certification) {
        const newVegetable = { name, type, certification, certified: false };

        const index = vegetables.findIndex(veg => veg.name === name);
        if (index === -1) {
            vegetables.push(newVegetable);
        } else {
            vegetables[index] = newVegetable;
        }

        localStorage.setItem('vegetables', JSON.stringify(vegetables));
        loadVegetables();
        clearForm();
    } else {
        alert('請輸入完整資訊！');
    }
}

// 編輯蔬菜資料
function editVegetable(index) {
    const veg = vegetables[index];
    document.getElementById('veg-name').value = veg.name;
    document.getElementById('veg-type').value = veg.type;
    document.getElementById('veg-certification').value = veg.certification;
}

// 刪除蔬菜
function deleteVegetable(index) {
    if (confirm('確定要刪除這個蔬菜嗎？')) {
        vegetables.splice(index, 1);
        localStorage.setItem('vegetables', JSON.stringify(vegetables));
        loadVegetables();
    }
}

// 切換認證狀態
function toggleCertification(index) {
    vegetables[index].certified = !vegetables[index].certified;
    localStorage.setItem('vegetables', JSON.stringify(vegetables));
    loadVegetables();
}

// 清空表單
function clearForm() {
    document.getElementById('veg-name').value = '';
    document.getElementById('veg-type').value = '';
    document.getElementById('veg-certification').value = '';
}

// 初始化頁面
document.addEventListener('DOMContentLoaded', loadVegetables);

解釋：

vegetables：從 localStorage 取得已儲存的蔬菜資料。如果 localStorage 中沒有資料，則建立一個空的陣列。
loadVegetables()：此函數會將蔬菜資料載入到網頁表格中。它先清空表格，然後對每個蔬菜資料生成一個 HTML 表格行，包含蔬菜的名稱、種類、認證機構、狀態和操作按鈕（編輯、刪除、切換認證狀態）。
addOrUpdateVegetable()：處理新增或更新蔬菜資料。如果表單中的資料完整，會將新蔬菜資料加入 vegetables 陣列中。如果蔬菜已存在，則更新該蔬菜的資料。最後，將資料存入 localStorage 並重新載入表格。
editVegetable(index)：允許使用者點擊 "編輯"

按鈕來修改特定蔬菜的資料。被選中的蔬菜資料會填入表單中，讓使用者修改。

deleteVegetable(index)：處理刪除蔬菜的邏輯，當使用者確認刪除時，會從 vegetables 陣列中移除該蔬菜並更新 localStorage。
toggleCertification(index)：切換蔬菜的認證狀態（從 "已認證" 變成 "未認證" 或相反），並更新表格。
clearForm()：清空表單欄位的值。
DOMContentLoaded 事件：當頁面載入完成時，執行 loadVegetables()，以便初始化表格內容。