文章

PHP - 綜合專案：開發簡單的部落格

發布於
作者 Ned Hsu 5 分鐘閱讀

課程簡介

通過本綜合專案，我們將運用前面所學的 PHP 技術，開發一個功能完整的簡單部落格，包括文章列表、文章詳情、文章新增與刪除功能。專案還會整合資料庫操作，並進行基礎的樣式設計。

專案功能清單

  1. 首頁：顯示文章列表，包含標題與摘要。
  2. 文章詳情頁：顯示文章完整內容。
  3. 新增文章：透過表單新增新文章。
  4. 刪除文章：從資料庫中刪除指定文章。

專案開發步驟

1. 建立資料庫

建立一個名為 blog 的資料庫，並新增一個名為 posts 的資料表：

1
2
3
4
5
6
7
8
9

CREATE DATABASE blog;
USE blog;

CREATE TABLE posts (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. 設定專案目錄結構

1
2
3
4
5
6
7

blog/
├── index.php        // 首頁
├── post.php         // 文章詳情頁
├── create.php       // 新增文章頁
├── delete.php       // 刪除文章功能
├── db.php           // 資料庫連線設定
└── style.css        // 網站樣式

3. 資料庫連線設定（db.php）

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
$host = 'localhost';
$dbname = 'blog';
$user = 'root';
$password = '';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $user, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("資料庫連線失敗：" . $e->getMessage());
}
?>

4. 首頁（index.php）

顯示所有文章的標題與摘要。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<?php
include 'db.php';

$stmt = $pdo->query("SELECT id, title, LEFT(content, 100) AS excerpt, created_at FROM posts");
$posts = $stmt->fetchAll();
?>

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <title>部落格首頁</title>
</head>
<body>
    <h1>我的部落格</h1>
    <a href="create.php">新增文章</a>
    <ul>
        <?php foreach ($posts as $post): ?>
            <li>
                <h2><a href="post.php?id=<?= $post['id'] ?>"><?= $post['title'] ?></a></h2>
                <p><?= $post['excerpt'] ?>...</p>
                <small>發佈時間：<?= $post['created_at'] ?></small>
                <a href="delete.php?id=<?= $post['id'] ?>" onclick="return confirm('確定刪除？')">刪除</a>
            </li>
        <?php endforeach; ?>
    </ul>
</body>
</html>

5. 文章詳情頁（post.php）

顯示文章完整內容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<?php
include 'db.php';

$id = $_GET['id'];
$stmt = $pdo->prepare("SELECT * FROM posts WHERE id = ?");
$stmt->execute([$id]);
$post = $stmt->fetch();

if (!$post) {
    die("文章不存在！");
}
?>

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <title><?= $post['title'] ?></title>
</head>
<body>
    <h1><?= $post['title'] ?></h1>
    <p><?= $post['content'] ?></p>
    <small>發佈時間：<?= $post['created_at'] ?></small>
    <br><br>
    <a href="index.php">回首頁</a>
</body>
</html>

6. 新增文章頁（create.php）

透過表單新增新文章。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<?php
include 'db.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $title = $_POST['title'];
    $content = $_POST['content'];

    $stmt = $pdo->prepare("INSERT INTO posts (title, content) VALUES (?, ?)");
    $stmt->execute([$title, $content]);

    header("Location: index.php");
    exit;
}
?>

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <title>新增文章</title>
</head>
<body>
    <h1>新增文章</h1>
    <form method="POST">
        <label>標題：</label><br>
        <input type="text" name="title" required><br>
        <label>內容：</label><br>
        <textarea name="content" required></textarea><br>
        <button type="submit">提交</button>
    </form>
    <a href="index.php">回首頁</a>
</body>
</html>

7. 刪除文章功能（delete.php）

刪除指定文章。

1
2
3
4
5
6
7
8
9
10

<?php
include 'db.php';

$id = $_GET['id'];
$stmt = $pdo->prepare("DELETE FROM posts WHERE id = ?");
$stmt->execute([$id]);

header("Location: index.php");
exit;
?>

8. 基本樣式（style.css）

簡單美化頁面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1, h2 {
    color: #333;
}

a {
    text-decoration: none;
    color: #007BFF;
}

a:hover {
    text-decoration: underline;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    margin-bottom: 20px;
}

textarea, input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
}

教學重點

  • 熟練 PHP 與資料庫操作（CRUD）。
  • 學會結合 HTML 表單進行資料提交與顯示。
  • 理解專案的基本結構與功能實現。
Software, PHP
PHP
本文章以 CC BY 4.0 授權