iT邦幫忙

2024 iThome 鐵人賽
DAY 26
0
JavaScript

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

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

16th鐵人賽
55 瀏覽

  • 分享至 

  • xImage
    •  

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

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

系統架構：

  • 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);

功能簡介：

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

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);

解釋：

  1. vegetables：從 localStorage 取得已儲存的蔬菜資料。如果 localStorage 中沒有資料，則建立一個空的陣列。

  2. loadVegetables()：此函數會將蔬菜資料載入到網頁表格中。它先清空表格，然後對每個蔬菜資料生成一個 HTML 表格行，包含蔬菜的名稱、種類、認證機構、狀態和操作按鈕（編輯、刪除、切換認證狀態）。

  3. addOrUpdateVegetable()：處理新增或更新蔬菜資料。如果表單中的資料完整，會將新蔬菜資料加入 vegetables 陣列中。如果蔬菜已存在，則更新該蔬菜的資料。最後，將資料存入 localStorage 並重新載入表格。

  4. editVegetable(index)：允許使用者點擊 "編輯"

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

  1. deleteVegetable(index)：處理刪除蔬菜的邏輯，當使用者確認刪除時，會從 vegetables 陣列中移除該蔬菜並更新 localStorage。

  2. toggleCertification(index)：切換蔬菜的認證狀態（從 "已認證" 變成 "未認證" 或相反），並更新表格。

  3. clearForm()：清空表單欄位的值。

  4. DOMContentLoaded 事件：當頁面載入完成時，執行 loadVegetables()，以便初始化表格內容。


上一篇
day 25 javascript連結github程式碼網頁程式管理系統
下一篇
day 27 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 組
累計文章數
22197 篇
完賽人數
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邦幫忙