W11_怎麼做一個 Blog

1. Blog 思考全貌

BE101_基礎實戰：Blog 部落格_永遠的第一步：思考這個產品的全貌

思考全貌：

1.1 有那些頁面？
- 首頁、archives (所有文章)、About、單一文章
- 複雜功能： tags、側邊欄、最近文章、友善連結
1.2 有哪些檔案？
- index.php 所有文章
- article.php?id=x 單一文章
- about.php 關於我
- admin.php 後台管理頁面
- add.php 新增文章
- handle_add.php
- update.php
- handle_update.php
- delete.php

2. Blog 資料結構

BE101_基礎實戰：Blog 部落格_規劃出需要的資料結構

資料庫結構

1.1 表格一：id/title/content/category_id/created_at

1.2 表格二：id/name/created_at
分類功能的檔案
- admin_category.php 後台管理頁面
- add_category.php 新增分類
- handle_add_category.php
- update_category.php
- handle_update_category.php
- delete_category.php

3. 建立 Blog 資料結構

BE101_基礎實戰：Blog 部落格_建置 database

建立 articles 表格

id: INT, Auto increment
title: VARCHAR/128
content: TEXT
category_id: INT
created_at: 型態 DATETIME / 預設值 CURRENT_TIMESTAMP

建立 categories 資料表

id: INT, Auto increment
name: VARCHAR/128
created_at: 型態 DATETIME / 預設值 CURRENT_TIMESTAMP

4. Blog 後台管理實作

BE101_基礎實戰：Blog 部落格_後台管理分類實作

新增 admin_category.php，連結 style.css，建立 conn.php
0:30 後台介面 admin_category.php

2.1 建立後台管理頁面，有新增分類跟管理文章，下面顯示分類，分類後面有編輯跟刪除的按鈕
01:58 新增分類程式碼 add_category.php

3.1 給一個表格，有輸入框
03:19 處理新增分類 handle_add_category.php
05:40 把新增分類的資料在 admin_category.php 抓出來
09:16 實作 delete_category.php
11: 18 實作 update_category.php，複製 add_category.php

?8. 13:25 實作 handle_update.php，複製 handle_add_category.php

遇到的困難

卡了半天，才發現原來 admin_category.php input 標籤的 name 打成 type 了啦！

<form method="POST" action="handle_add_category.php">
  名稱：<input name="name" />
  <input type="submit" />
</form>

但很奇怪的是，我沒辦法用防止 sql injection 的方法來做 handle_add_category.php，先放棄，因為我已經嘗試了好一陣子，不要浪費時間，先照老師的做法就好
不按照老師的做法做，果然是滿滿的坑，我現在根本沒有辦法自己 debug，難過

admin_category.php 程式碼

<?php  
  require_once('conn.php');
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Blog 部落格</title>
</head>
<body>
  <h1>分類管理</h1>
  <a href="add_category.php">新增分類</a>
  <a href="admin.php">管理文章</a>
  <ul>
    <?php
      $sql = "SELECT * FROM categories ORDER BY created_at DESC";
      $result = $conn->query($sql);
      if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
          echo "<li>";
          echo  $row['name'];
          echo  " <a href='update_category.php?id=$row[id]'>編輯</a>";
          echo  " <a href='delete_category.php?id=$row[id]'>刪除</a>";
          echo "</li>";
        }
      }  
    ?>
</body>
</html>

在做 handle_update_category.php 的時候，導回的頁面應該是 admin_category.php，我寫成 update_category.php 根本就是上一頁

5. Blog 後台管理文章實作

BE101_基礎實戰：Blog 部落格_後台管理文章實作

管理文章跟管理後台的功能差不多，所以可以沿用後台的檔案

01:06 admin.php 管理文章
01:52 add.php 新增文章
07:56 handle_add.php
09:55 delete.php
10:40 update.php
19:26 handle_update.php

遇到的困難：

在寫 html and php 語法的時候，要特別注意雙引號跟單引號，如果在同一行的話，有個解法是用變數把東西存起來，就不用打這麼多引號了。
textarea 沒有 value，因此把內容放在標籤中間即可

code_Blog_article.php

<?php
  require_once('conn.php');
  $id = $_GET\['id'\];
  $sql = "SELECT A.id, A.title, A.content, C.name FROM articles as A left join categories as C ON A.category_id = C.id WHERE A.id = " . $id;
  $result = $conn->query($sql);
  $row = $result->fetch_assoc();

  $title = $row['title'];
  $content = $row['content'];
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Blog</title>
</head>

<body>
  <nav class="nav">
    <h1>Blog</h1>
    <a class="active" href="index.php">首頁</a>
    <a href="about.php">關於我</a>
  </nav>
  <div class="container">
    <h1><?php echo $title; ?></h1>
    <h2>分類：<?php echo $row\['name'\]; ?></h2>
    <p><?php echo $content; ?></p>
  </div>
</body>
</html>