# 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; } ```