---
# System prepended metadata

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

---

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

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

## 做出新增連結的 php 檔案
- 檢查 nickname ， 和留言如果是空的話就顯示資料不齊全。
新增一個 handle_add_coment.php 檔案: 
```
  if (
    empty($_POST['nickname']) ||
    empty($_POST['content'])
  ) {
    die('資料不齊全');
  }
```

- 插入 query 第一個 `'%s'` 是 nickname ， 第二個則是 content : 
```
  $sql = sprintf(
    "insert into comments(nickname, content) values('%s', '%s')",
    $nickname,
    $content
  );
```
這樣可以填入內容，如果頁面只出現資料不齊全不返回上一頁，使用者體驗會有點糟糕，因此可以設定。

- 而留言的文字間如果超過十幾個空白，預設可能會解釋只有一個空白，是因為 CSS 的屬性 `white-space` 預設所導致空白直接換行，如 index.php 輸出的空白也會影響:  
```
			  <p class="card__content">/→
			    ←/<?php echo $row['content']; ?>
				/↔/ 之間的空白差距也會影響到頁面的輸出。
				然後再調整 white-space: pre-line (換行)
```
- 前端很常用到的兩個 css 有關文字調整的屬性，排版的問題可能跟這兩個有關: 
- `white-space: pre-line;` 
- `word-break: break-word;`

---

## 做出新增留言的錯誤訊息顯示
- 幫頁面網址加上一個 GET 的參數，出現錯誤的時候執行 header ， 在 handle_add_coment.php 檔案修改: 
```
  if (
    empty($_POST['nickname']) ||
    empty($_POST['content'])
  ) {
    header('Location: index.php?errCode=1');
    die('資料不齊全');
  }
```
並在 index.php 檔案中修改: 
```
      <?php
        if (!empty($_GET['errCode'])) {
          $code = $_GET['errCode'];
          $msg = 'Error';
          if ($code === '1') {
            $msg = '資料不齊全';
          }
          echo '<h2 class="error">錯誤：' . $msg . '</h2>';
        }
      ?>
```
- 判斷 code ， 用 `$_` 拿到的東西變成字串(拿到數字也會變字串)。 
- 這樣重新整理的時候錯誤還會在，可以改成在 JS 那邊就處理好(前端的驗證)。 
- 現在是後端的驗證 `if ($=== '1')` 來判斷。
- `echo '<h2 class="error">錯誤：' . $msg . '</h2>'` 加上這個會更了解錯誤是啥。 
同時在 CSS 中修改錯誤訊息的顏色: 
```
.error {
  color: #a20606;
}
```

---

整體過程為:
- 進入 index.php 頁面，並填入 nickname 和 content 後。
- 送到 handle_add_comment.php 檔案。
- 檢查 nickname 和 content 。 
- 沒東西的話導到網址 `errCode=1` 。
- 用 sprintf 產生 SQL query ， 並寫進去 comments 的 table 內。 
- 處理完新增留言後(sprintif 寫完後)導回 index.php 。 
- 導回 index.php 後會重新 query 一次這個 page 。 
- 同時在重新抓取的過程中，因為資料庫有剛剛新增的資料，所以就能在頁面看到新增的資料。 

---