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>
![[ 筆記 ] Express 04 - 工具安裝懶人包](https://mtr04-note.coderbridge.io/2020/10/13/express-install/?utm_source=coderbridge-io&utm_medium=blog_related_post_img&utm_campaign=Christy's Blog_ [ 筆記 ] Express 04 - 工具安裝懶人包 _@krebikshaw_https://static.coderbridge.com/img/krebikshaw/d722a94d6b7c461cbf19377ee2c4e7f6.jpg)
