# 產業資訊服務 2024/01/03
<div style="text-align: right;" >2024.01.03 13:10- 14:50</div>
<div style="text-align: right;" >國體419</div>
[本頁連結](https://hackmd.io/@RogerChao/HJOXmIMOa)
#### <font color = 'RED'>國體大10:30左右起停電，目前12:00已經復電，我們將繼續本週419教室的實體上課</font>
報告需要製作個人網站資料夾，問ChatGPT參考其回答時，如果遇到看不懂內容，除了再次發問ChatGPT或詢問任何真人高手以外，你也可以查詢相關基礎知識「[Web入門-全新手請從這裡開始！](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web)」
今天同樣使用chatGPT進行期末報告的撰寫
## A.請對chatgpt說下面文字
----
<div>先把網站的大架構說明清楚</div>
<div>我有一個首頁index.php 一個個人介紹頁UserInfo.php，一個作品發表MyWorks.php，一個來信留言Message.php</div>
<div>這四個頁面的共通之處就是上方都有一個banner.php放我網站個人化的圖片，以及選單navigation.php，讓瀏覽我網頁的使用者可以任意在我的網站當中切換頁面 </div>
<div>首頁index說明這裡是我的國體112產業資訊服務期末報告網站，在這個網站當中，你可以看到我的個人介紹頁，作品發表頁，以及可以留言或來信，而我需要一個navigation的選單頁，貫穿所有網頁，並且能在寬度600以下變成RWD的格式</div>
<div>UserInfo.php，我的個人介紹頁內有個人照片以及個人條列式的內容</div>
<div>MyWorks.php 我的作品發表頁 則是一個googledrive 的影片鏈結內崁後，下方說明我的作品內容簡報圖片及原始網頁鏈結</div>
<div>Message.php 來信留言則可以讓任何瀏覽者在此網頁上面留下留言</div>
<div>以上請幫我寫出</div>
<div>index.php, userInfo.php, MyWorks.php, Message.php, banner.php, navigation.php 六個主要的檔案以及對應的javascript</div>
說完之後看到的結果如下
```
下面是一個簡單的示範，包含了 index.php、UserInfo.php、MyWorks.php、Message.php、banner.php 和 navigation.php 六個主要的檔案，以及相對應的 JavaScript。
```
### index.php 首頁
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首頁 - 112產業資訊服務期末報告網站</title>
<!-- 引入共用的 CSS 樣式表 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 引入共用的 banner -->
<?php include 'banner.php'; ?>
<!-- 引入共用的導航選單 -->
<?php include 'navigation.php'; ?>
<!-- 首頁內容 -->
<h1>歡迎來到112產業資訊服務期末報告網站</h1>
<p>在這裡，你可以看到我的個人介紹、作品發表，並留下你的留言或來信。</p>
<!-- 引入共用的 JavaScript 文件 -->
<script src="script.js"></script>
</body>
</html>
```
### UserInfo.php - 個人介紹頁
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>個人介紹 - 112產業資訊服務期末報告網站</title>
<!-- 引入共用的 CSS 樣式表 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 引入共用的 banner -->
<?php include 'banner.php'; ?>
<!-- 引入共用的導航選單 -->
<?php include 'navigation.php'; ?>
<!-- 個人介紹內容 -->
<h1>我的個人介紹</h1>
<img src="profile_picture.jpg" alt="個人照片">
<ul>
<li>姓名：你的姓名</li>
<li>學校：你的學校</li>
<!-- 其他個人資訊 -->
</ul>
<!-- 引入共用的 JavaScript 文件 -->
<script src="script.js"></script>
</body>
</html>
```
### MyWorks.php - 作品發表頁
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作品發表 - 112產業資訊服務期末報告網站</title>
<!-- 引入共用的 CSS 樣式表 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 引入共用的 banner -->
<?php include 'banner.php'; ?>
<!-- 引入共用的導航選單 -->
<?php include 'navigation.php'; ?>
<!-- 作品發表內容 -->
<h1>我的作品發表</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/你的影片ID" frameborder="0" allowfullscreen></iframe>
<p>作品內容簡介：你的作品內容簡介</p>
<!-- 其他作品介紹 -->
<!-- 引入共用的 JavaScript 文件 -->
<script src="script.js"></script>
</body>
</html>
```
### Message.php - 來信留言頁
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>來信留言 - 112產業資訊服務期末報告網站</title>
<!-- 引入共用的 CSS 樣式表 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 引入共用的 banner -->
<?php include 'banner.php'; ?>
<!-- 引入共用的導航選單 -->
<?php include 'navigation.php'; ?>
<!-- 來信留言內容 -->
<h1>來信留言</h1>
<!-- 留言表單 -->
<!-- 引入共用的 JavaScript 文件 -->
<script src="script.js"></script>
</body>
</html>
```
### banner.php - Banner 共用文件
```
<!-- banner.php -->
<div class="banner">
<img src="personalized_image.jpg" alt="個人化的圖片">
</div>
```
### navigation.php - 導航選單共用文件
```
<!-- navigation.php -->
<nav class="navigation">
<ul>
<li><a href="index.php">首頁</a></li>
<li><a href="UserInfo.php">個人介紹</a></li>
<li><a href="MyWorks.php">作品發表</a></li>
<li><a href="Message.php">來信留言</a></li>
</ul>
</nav>
```
### script.js - 共用的 JavaScript 文件
```
// script.js
// 在這裡添加任何需要共用的 JavaScript 功能
```
### styles.css - 共用的 CSS 樣式表
```
/* styles.css */
/* 在這裡添加共用的樣式 */
```
這個示範提供了基本的網站架構，你可以根據實際需要進行修改和擴展。確保將相關的圖片和影片替換為你自己的內容。
## B.follow 上述檔案建立之後(可以看到這樣的網站並不可愛)
可以看到這樣的網站並不可愛
### 1. Navigation Bar沒有正確的外觀
```
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.navigation {
background-color: #333;
overflow: hidden;
}
.navigation ul {
padding: 0;
margin: 0;
list-style: none;
overflow: hidden;
}
.navigation li {
float: left;
}
.navigation a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navigation a:hover {
background-color: #ddd;
color: black;
}
/* RWD 部分 */
@media screen and (max-width: 600px) {
.navigation ul {
display: none;
}
.navigation a.icon {
float: right;
display: block;
}
}
@media screen and (min-width: 601px) {
.navigation a.icon {
display: none;
}
}
/* Clearfix hack to prevent container collapse */
.navigation:after {
content: "";
display: table;
clear: both;
}
```
貼上之後
### 2. 沒有Banner
找一張圖喜歡的，我找到這張
複製網址後我得到這串文字
https://d1grca2t3zpuug.cloudfront.net/2023/07/aot011.jpg
把它貼到我的banner.php內
我的網站變成這樣
但是這不符合我對網站的期待，網站上方的頁面不是應該扁扁一條，於是我問chatgpt
---
#### 最後我得到結論，需要要有這樣的css, 同時在banner.php裡面需要新增class的描述
```
<!-- banner.php -->
<div class="banner">
<img src="https://d1grca2t3zpuug.cloudfront.net/2023/07/aot011.jpg" alt="個人化的圖片" class="banner-image">
</div>
/* styles.css */
.banner {
overflow: hidden; /* 隱藏超出的部分 */
text-align: center;
max-height: 200px; /* 設定最大高度為100px */
}
.banner-image {
width: 100%; /* 圖片寬度充滿父元素 */
height: auto; /* 自動調整高度，以保持原始寬高比例 */
display: block; /* 解決圖片底部留白問題 */
}
```
### 3. Message.php 沒有留言
補上上禮拜的feedback.php
但注意form action="feedback.php" 這段要改成message.php如果這邊你的檔名是MESSAGE.php
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>來信留言 - 112產業資訊服務期末報告網站</title>
<!-- 引入共用的 CSS 樣式表 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 引入共用的 banner -->
<?php include 'banner.php'; ?>
<!-- 引入共用的導航選單 -->
<?php include 'navigation.php'; ?>
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// 接收表單提交的留言
$feedback = $_POST['feedback'];
// 將留言追加到文本文件中
$feedbackFile = 'feedback.txt';
file_put_contents($feedbackFile, $feedback . PHP_EOL, FILE_APPEND);
}
?>
<h1>使用者留言</h1>
<!-- 表單提交留言 -->
<form action="message.php" method="post">
<label for="feedback">您的意見：</label>
<textarea name="feedback" id="feedback" rows="4" cols="50"></textarea>
<br>
<input type="submit" value="提交">
</form>
<!-- 顯示之前的留言 -->
<h2>之前的留言：</h2>
<ul>
<?php
// 顯示之前的留言
$feedbacks = file('feedback.txt', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
foreach ($feedbacks as $message) {
echo "<li>$message</li>";
}
?>
</ul>
</body>
</html>
```
### 4. 沒有作品影片
要把你想呈現的影片 id換成自己的
ID 就是youtube網址上的這個
切換完之後
可以看到影片就能呈現
#### 不一定要使用youtube, 也可以使用自己上傳的googledrive影片
複製後
iframe的部分改成這個網址
```
<iframe width="560" height="315" src="https://drive.google.com/file/d/你的影片id/preview" frameborder="0" allow="" ></iframe>
```
前面複製分享的網址貼出來後可以看到這個比較長的id
貼上之後
再切回來網站看，你就可以看到作品放的是你的googledrive的影片了
## C.附上上禮拜複製北市體育局長介紹的頁面程式碼
```
<div class="in"><div class="ct"><div class="in"> <div class="simple-text title" data-type="0" data-child="1" style="display: none;"><div class="in"><div class="ct"><div class="in"><h3 class="h3" style="font-size: 1.5em;">王泓翔</h3></div></div></div></div>
<div class="area-essay page-caption-p" data-type="0" data-child="1"><div class="in"><div class="ct"><div class="in"><div class="cp interduce">
<img alt="王泓翔局長照片" border="0" src="https://www-ws.gov.taipei/001/Upload/340/relpic/31814/8914134/ccf9f4da-0dc6-4d1c-88f9-9f2f65b16692.jpg">
<ul class="cp interduce-list">
<li><span class="cp interduce-caption">姓名：</span>王泓翔</li>
<li><span class="cp interduce-caption">職稱：</span>局長</li>
<li><span class="cp interduce-caption">任職單位：</span>臺北市政府體育局</li>
<li><span class="cp interduce-caption">學歷：</span><p>國立政治大學教育系行政組博士</p><p id="isPasted">國立臺灣師範大學教育系行政組碩士</p><p>私立東吳大學英文系學士</p></li>
<li><span class="cp interduce-caption">經歷：</span><p>宜蘭縣教育處處長</p><p>新北市政府體育處副處長</p><p>新北市政府教育局督學、科長</p><p>教育部終身學習司專員</p><p>臺北市政府教育局科員、股長</p></li>
<li><span class="cp interduce-caption">機關地址：</span>10553臺北市松山區南京東路四段10號</li>
<li><span class="cp interduce-caption">連絡電話：</span>02-25702330-5201</li>
</ul>
</div>
<div>
</div>
</div></div></div></div> <div class="area-editor system-info" data-type="0" data-child="1"><div class="in"><div class="ct"><div class="in"></div></div></div></div>
</div></div></div>
```
直接貼入
同時記得帶入CSS
global.css 20000多行我就不複製了
可以去網站複製
最後的結果
## D.Apache 預設開啟的是index.html
所以開啟後變成這樣
修改HTTP.CONF
然後要重新啟動apache httpd.exe
就會發現預設開啟網頁網址 就會跳到index.php
## E.今天老師電腦操作的設定檔，提供給各位做期末作業的修改參考
[網站server.zip 下載](https://drive.google.com/file/d/1A78yZ7K3sEkN3Dw-t0xcMZouXx7M4FZP/view?usp=drive_link)
Sign in with Wallet
Connect another wallet