---
# System prepended metadata

title: 5-4 、 顯示留言
tags: [Lidemy心得, 進度筆記, BE101, PHP, 2020十月第四周]

---

# 5-4 、 顯示留言 
###### tags: `BE101` `PHP` `2020十月第四周` `進度筆記` `Lidemy心得`  

一樣是 : `http://localhost/User/board/index.php` 。 

## 串接資料庫 
- 刪掉先前的大頭貼和留言直到剩下各一個。
- 新增 conn.php 檔案後，在 index.php 內新增 php 語法。  
- 下 SQL 指令先看有沒有撈到資料: 
```
<?php
  require_once("conn.php");
  
  $result = $conn->query("select * from comments order by id desc");
  if (!$result) {
	die('Error:' . $conn->error);	
  }
  
  while($row= $result->fetch_assoc()) {
	print_r($row);
  }
?>
``` 
- 接下來把 while 這列放到實際 card 留言的內容這段。
- PHP 程式碼可以安插在任何地方。 
- 1. 第一種，將 while echo 出所有的 `<div class="card">` 但較麻煩: 
```
	    <?php
		  while($row= $result->fetch_assoc()) {
			print_r($row);
			echo '<div class="card">'
		  }
		?>
```

- 2. 第二種，將 php 包覆整段你要將資料輸出在留言的內容: 
```
		<?php for($i=1; $i<=10; $i++) { ?>
		  <div>123</div>
		<?php } ?>
```
這樣執行 loop 的時候會將裡面的 `class="card" 或是 <div>123</div>` 一起輸出，缺點是比較沒那麼容易讀懂，如: 123 輸出 10 次。 

- 也可以執行簡單迴圈:  
```
		<?php for($i=1; $i<=10; $i++) { ?>
		  <div><?php echo $i;?></div>
		<?php } ?>
```
輸出 1~10 。 

- 可以抓資料庫的 nickname 和 content 及 created_at :  
```
<span class="card__author"><?php echo $row['nickname']; ?></span>
或是簡寫(有些地方不支援，下面不會顯示 nickname)
<span class="card__author"><? echo $row['nickname']; ?></span>
或是簡寫(有些地方不支援，顯示 nickname)
<span class="card__author"><?= $row['nickname']; ?></span>
```

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

- 跑版的問題，暱稱或留言文字過長可以用:
```
word-break: break-all;
或是
word-break: break-word;
```

調整後: 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;
}
```

