2024.03.13 產業資訊服務 3rd 上課

本文連結

期中報告分組
運動中心場館管理系統介紹
ChatGPT 寫網頁

1.期中報告分組

智慧智能 AI 場館運動健身
三分鐘影片
投影片10頁

小組報告(2-3人)

影片製作能力 30
投影片及表達能力 30 7分鐘
選題與內容 40
填寫表單 <–請點我

填寫範例

##3.架設網站

1.4191下複製server的壓縮檔，貼到本機電腦的C:\底下

2.解壓縮得到C:\server

3.啟動Apache

按下httpd.exe

4.安裝VScode 一路下去

5.開啟網站資料夾

開啟預設網站資料夾

在VScode裡面打開資料夾

6.打開資料夾，並且修改首頁預設檔案

index.html

7.用瀏覽器開啟本地網站

網址列打 localhost:88

8.修改檔案並更新網頁，確保網站同步

記得白色小圓點代表尚未存檔，請存檔後更新網頁

9.ChatGPT 出動

直接請CHATGPT寫一個網站的基本架構，描述如下

我想要寫一個首頁有一個banner, 然後下方有一個選單列提供 首頁，作品介紹，個人介紹，留言板四個部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的首頁</title>
    <style>
        /* CSS樣式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        nav {
            background-color: #f4f4f4;
            text-align: center;
            padding: 10px 0;
        }
        nav a {
            text-decoration: none;
            color: #333;
            padding: 10px 20px;
        }
        nav a:hover {
            background-color: #ddd;
        }
        section {
            padding: 20px;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <!-- 頁首 -->
    <header>
        <h1>歡迎來到我的網站</h1>
        <p>這是一個簡單的示例</p>
    </header>

    <!-- 導航列 -->
    <nav>
        <a href="#home">首頁</a>
        <a href="#portfolio">作品介紹</a>
        <a href="#about">個人介紹</a>
        <a href="#contact">留言板</a>
    </nav>

    <!-- 主要內容區域 -->
    <section id="home">
        <h2>歡迎來到我的首頁</h2>
        <p>這裡是首頁的內容，你可以在這裡添加你想要展示的內容。</p>
    </section>

    <section id="portfolio">
        <h2>作品介紹</h2>
        <p>這裡是作品介紹的內容，你可以在這裡展示你的作品。</p>
    </section>

    <section id="about">
        <h2>個人介紹</h2>
        <p>這裡是個人介紹的內容，你可以在這裡介紹你自己。</p>
    </section>

    <section id="contact">
        <h2>留言板</h2>
        <p>這裡是留言板，你可以在這裡和訪問者互動。</p>
    </section>

    <!-- 頁尾 -->
    <footer>
        <p>&copy; 2024 我的網站</p>
    </footer>
</body>
</html>

貼上之後

再去檢視原本的網站，就可以看到改變

10.內容修改

除了文字之外，我們可以請他幫忙寫一個留言板

 <div id="message-board">
        <h2>留言板</h2>
        <form id="message-form">
            <input type="text" id="nickname" placeholder="暱稱">
            <textarea id="message" placeholder="在這裡留言..."></textarea>
            <button type="submit">留言</button>
        </form>
        <div id="messages"></div>
    </div>

    <script>
        // JavaScript代碼
        document.getElementById('message-form').addEventListener('submit', function(event) {
            event.preventDefault(); // 防止表單提交刷新頁面

            // 獲取輸入的暱稱和留言
            var nickname = document.getElementById('nickname').value;
            var message = document.getElementById('message').value;

            // 檢查暱稱和留言是否為空
            if (nickname.trim() === '' || message.trim() === '') {
                alert('請輸入暱稱和留言');
                return;
            }

            // 創建留言時間
            var now = new Date();
            var timestamp = now.toLocaleString();

            // 創建留言元素
            var messageElement = document.createElement('div');
            messageElement.classList.add('message');
            messageElement.innerHTML = '<strong>' + nickname + '</strong>: ' + message + '<div class="info">' + timestamp + '</div>';

            // 添加留言到留言板
            var messagesDiv = document.getElementById('messages');
            messagesDiv.prepend(messageElement);

            // 清空輸入框
            document.getElementById('nickname').value = '';
            document.getElementById('message').value = '';
        });
    </script>

成果如下

請測試留言

http://172.16.27.1:88/index.php

課堂成功留言同學
[2024-03-13 14:42:59] 123: 我在這
[2024-03-13 14:44:50] 1124022: 到!
[2024-03-13 14:44:59] 1124021: hi
[2024-03-13 14:45:03] 1124010: 簽到

[2024-03-13 14:45:28] 1124013: 我在這
[2024-03-13 14:45:37] 1124028: (o_o)
[2024-03-13 14:45:54] 1124008: 在這
[2024-03-13 14:46:02] 1124059: 牛逼
[2024-03-13 14:46:11] 1124038: 老師這堂課好難喔…難度可以降低一點嗎？對我來說是個十分困難的挑戰。
[2024-03-13 14:46:21] 1124014: 我在這
[2024-03-13 14:46:33] 1094021: 點名
[2024-03-13 14:46:36] 1094071: 嗨
[2024-03-13 14:46:47] 1124039: 點名
[2024-03-13 14:47:05] 1124036: 6
[2024-03-13 14:47:48] 1124055: Hello
[2024-03-13 14:48:12] 1104070: 屁股很痛
[2024-03-13 14:48:19] 1124056: 我在這
[2024-03-13 14:50:42] 1124057: 老師早安