---
# System prepended metadata

title: 5 、 實戰留言板-初階
tags: [Lidemy心得, 進度筆記, BE101, PHP, 2020十月第四周]

---

# 5 、 實戰留言板-初階 
###### tags: `BE101` `PHP` `2020十月第四周` `進度筆記` `Lidemy心得`  

## 留言板的概念
- 基本上可以留言。
- 會員登入。
- 大頭貼。
- 分頁功能。

一開始可以不用登入就留言，逐步修正。

***

# 5-1 、 規劃產品路由與功能
###### tags: `BE101` `PHP` `2020十月第四周` `進度筆記` `Lidemy心得` 
- 規劃網址路徑以及功能。 
- index.php 觀看所有留言。
- handle_add_post.php 新增留言。 

***

# 5-2 、 規劃資料庫結構及建置
###### tags: `BE101` `PHP` `2020十月第四周` `進度筆記` `Lidemy心得`  
- 資料結構: 暱稱、留言、顯示時間。 

1. 建立名為 `comments` 的資料表。
2. 其結構欄位包含:
- 名稱 `id` ; 類型 int ; AUTO_INCREMENT 。  
- 名稱 nickname ; varchar(128) ; 不能是空值。  
- 名稱 content ; text ; 不能是空值。 
- 名稱 created_at ; datetime ; 預設值 `current_timestamp()` 。 

3. 建立完成後可以試著直接從資料庫新增資料:
- 在資料庫: user>> 資料表: comments 底下按下新增。  
- 可以給 nickname 的值為 aaa ; content 為 Hello 並執行。  

![](https://i.imgur.com/ObT4Azd.png)  

***

# 5-3 、 實作留言板前端頁面
###### tags: `BE101` `PHP` `2020十月第四周` `進度筆記` `Lidemy心得`  

## 先刻靜態頁面 
不管怎樣都需要一個前端頁面，把前端頁面刻出來後就是資料寫死的靜態頁面，之後需要做的就是把頁面轉動態的。

- 新增 board 資料夾，使用本機的位置:  `http://localhost/xampp/User/board/index.php` 。 
- 一開始會是個靜態的 .html 檔案。 
- 像是可以用 [html starter](https://www.sitepoint.com/a-basic-html5-template/) 來做版型。   
- 移除 `<script src="js/scripts.js"></script>` 標籤。 
- 切到剩下這樣後，拉進 style.css 檔案(開啟在分頁) : 
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>留言板</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  
</body>
</html>
```
- 記得在 style.css 樣式中把 `margin: 0;` 避免掉瀏覽器的預設。 
- 寬度設定 `100%` 最大 `600 px` 達到類似 `RWD` 的效果(螢幕小到沒有 600 px) ; `margin: 0 auto` ; 水平置中 。  
- 跟 box modle 有關，超出邊界: 
```
.board__new-comment-form textarea{
  width: 100%;
  padding: 10px;
  border: 1px solid #c2dffb;
}
這樣會變成真正的寬度是 100% 加上左邊 10px 和右邊 10px 。 
```
- 分隔線元素: `<hr />` 或 `<div class="board__hr" /></div>`
- 很多時候會用到 `border-box` ， 會將所有的 box 預設其大小: 
```
* {
	box-sizing: border-box;
}
```
- 如果有大頭貼(avatar)內縮的問題記得調整 padding 或是 margin ， 通常取消 padding 可以減少內縮。 

調整後:
index.php 檔案:
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>留言板</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header class="warning">
    <strong>注意！本站為練習用網站，因教學用途刻意忽略資安的實作，註冊時請勿使用任何真實的帳號或密碼。</strong>
	<!-- 避免不小心輸入真的帳號密碼 -->
  </header>
  <main class="board">
	  <h1 class="board__title">Comments</h1>
	  <form class="board__new-comment-form" method="POST" action="handle_add_comment.php">
	    <div class="board__nickname">
		  <span>暱稱:</span>
		  <input type="text" name="nickname" />
		</div>
		<textarea name="content" rows="5"></textarea>
        <!-- 指定 row 為留言板大小長度 -->
		<input class="board__submit-btn" type="submit" />
	  </form>
	  <div class="board__hr" /></div>
	  <section>
	    <div class="card">
		  <div class="card__avatar">
	      </div>
		  <div class="card__body">
		    <div class="card__info">
			  <span class="card__author">Cheetah</span>
			  <span class="card__time">2020-06-06 06:06:06</span>
			</div>
			<p class="card__content">
			  "What does the Fox say ?"
			</p>
	      </div>
	    </div>
		<div class="card">
		  <div class="card__avatar">
	      </div>
		  <div class="card__body">
		    <div class="card__info">
			  <span class="card__author">Fox</span>
			  <span class="card__time">2020-06-06 06:06:06</span>
			</div>
			<p class="card__content">
			  "What does the Shark say ?"
			</p>
	      </div>
	    </div>
		<div class="card">
		  <div class="card__avatar">
	      </div>
		  <div class="card__body">
		    <div class="card__info">
			  <span class="card__author">Shark</span>
			  <span class="card__time">2020-06-06 06:06:06</span>
			</div>
			<p class="card__content">
			  "A"
			</p>
	      </div>
	    </div>
	  </section>
  </main>
  <!-- 白板 -->
</body>
</html>


```

style.css 內:  
```
body {
  margin: 0;
  background: #f7f7f7;
}

* {
	box-sizing: border-box;
}

.warning {
  background: #ffc4c6;
  color: #a20606;
  padding: 10px;
  text-align: center;
}

.board {
  background: white;
  width: 100%;
  max-width: 700px;
  margin: 20px auto;
  padding: 10px 30px;
  box-shadow: 1px 1px 3px #e8e8e8;
  border-radius: 5px;
}
 
.board__new-comment-form textarea{
  width: 100%;
  padding: 10px;
  border: 1px solid #c2dffb;
  box-sizing: border-box;
}

.board__nickname {
  margin-bottom: 10px;
}

.board__nickname input {
  border: 1px solid #c2dffb;
  padding: 5px;
}

.board__submit-btn {
  padding: 10px;
  border: 1px solid #c2dffb;
  border-radius: 5px;
  width: 100px;
  color: #583c63;  
  font-size: 16px;
  background: white;
}

.board__hr {
  margin: 10px auto;
  height: 2px;
  background: #e8e8e8;
  max-width: 95%;
}

.card {
  margin: 20px 0;
  min-height: 70px;
  display: flex; 
}

.card__avatar {
  min-width: 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: orange;
}

.card__body {
  margin-left: 10px;
}

.card__content {
  margin-top: 8px;
  max-width: 100%;
}

.card__author {
  color: orange;
  font-weight: bold;
}

.card__time {
  color: #a0a0a0;
}
```

- 簡單的版型，但剩下暱稱和留言內容過長要解決。 

***

