# 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; } ``` - 簡單的版型，但剩下暱稱和留言內容過長要解決。 ***