# 2024.03.13 產業資訊服務 3rd 上課 [本文連結](https://course-rogerchao.sporetrofit.com/InfoService/11202/CourseWW03/) 1. 期中報告分組 2. 運動中心場館管理系統介紹 3. ChatGPT 寫網頁 ## 1.期中報告分組 智慧 智能 AI 場館 運動 健身 三分鐘影片 投影片10頁 小組報告(2-3人) 影片製作能力 30 投影片及表達能力 30 7分鐘 選題與內容 40 [填寫表單](https://docs.google.com/forms/d/e/1FAIpQLSfmsAyxN6kJ0n0RahfLXM3EeBo7m0CLzQTN6n5gHqL63ddVNg/viewform) <--請點我 填寫範例 ![](https://hackmd.io/_uploads/rJin302Zp.png) ##3.架設網站 ### 1.4191下複製server的壓縮檔，貼到本機電腦的C:\底下 ![image](https://hackmd.io/_uploads/ry3bN6ATT.png) ### 2.解壓縮 得到C:\server ![image](https://hackmd.io/_uploads/SyjQEpCpp.png) ### 3.啟動Apache 按下httpd.exe ![image](https://hackmd.io/_uploads/rJML46C6p.png) ![image](https://hackmd.io/_uploads/ryrONT0Ta.png) ### 4.安裝VScode 一路下去 ![image](https://hackmd.io/_uploads/ByEn8pCaa.png) ### 5.開啟網站資料夾 開啟預設網站資料夾 ![image](https://hackmd.io/_uploads/Sk464aRTT.png) 在VScode裡面 打開資料夾 ![image](https://hackmd.io/_uploads/H1pCNT0pa.png) ### 6.打開資料夾，並且修改首頁預設檔案 index.html ![image](https://hackmd.io/_uploads/BkCgSTAp6.png) ### 7.用瀏覽器開啟本地網站 網址列打 localhost:88 ![image](https://hackmd.io/_uploads/HkuDraCTp.png) ### 8.修改檔案並更新網頁，確保網站同步 ![image](https://hackmd.io/_uploads/rkynSaAp6.png) 記得白色小圓點代表尚未存檔，請存檔後 更新網頁 ![image](https://hackmd.io/_uploads/SJgyU6Raa.png) ### 9.ChatGPT 出動 直接請CHATGPT寫一個網站的基本架構，描述如下 ``` 我想要寫一個首頁有一個banner, 然後下方有一個選單列提供 首頁，作品介紹，個人介紹，留言板四個部分 ``` ![image](https://hackmd.io/_uploads/S12HI6Ca6.png) ``` <!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> ``` 貼上之後 ![image](https://hackmd.io/_uploads/SJMYDaATp.png) 再去檢視原本的網站，就可以看到改變 ### 10.內容修改 除了文字之外，我們可以請他幫忙寫一個留言板 ![image](https://hackmd.io/_uploads/ry8Fd6RTa.png) ``` <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> ``` ![image](https://hackmd.io/_uploads/BkKROp06a.png) 成果如下 ![image](https://hackmd.io/_uploads/H1P8t60Ta.png) 請測試留言 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: 老師早安