PHP MySQL简单网页如何实现？-网页设计-锦华智联科技

准备工作：安装必要的软件。
创建数据库和表：在 MySQL 中创建一个数据库和存储待办事项的表。
编写前端 HTML 表单：用于输入新的待办事项。
编写 PHP 连接文件：用于 PHP 脚本连接到 MySQL 数据库。
编写 PHP 处理脚本：处理表单提交,将数据存入数据库。
编写 PHP 显示脚本：从数据库中读取并显示所有待办事项。
整合所有文件：将所有部分组合到一个网页中。

第 1 步：准备工作

你需要一个本地服务器环境来运行 PHP 和 MySQL,最简单的方法是安装集成环境包：

（图片来源网络，侵删）

Windows: XAMPP 或 WampServer
macOS: MAMP 或 XAMPP
Linux: 可以使用 apt-get 或 yum 安装 apache2, mysql-server, php 和 php-mysql 等包。

安装完成后，确保 Apache 和 MySQL 服务都已启动。

第 2 步：创建数据库和表

打开你的 MySQL 管理工具（XAMPP 自带的 phpMyAdmin，地址通常是 http://localhost/phpmyadmin/）,或者使用命令行。

创建一个数据库，我们将其命名为 todo_db。
```
CREATE DATABASE todo_db;
```
选择刚创建的 todo_db，然后执行以下 SQL 语句来创建一个 tasks 表：
（图片来源网络，侵删）
```
CREATE TABLE tasks (
    id INT(11) AUTO_INCREMENT PRIMARY KEY,
    task_description VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
```
- id: 每个任务的唯一标识,自动递增。
- task_description: 存储任务内容的文本字段。
- created_at: 记录任务创建的时间。

第 3 步：创建项目文件

在你的 Web 服务器根目录（通常是 htdocs 或 www）下创建一个新文件夹，todo_app,我们将在这个文件夹里创建所有文件。

文件结构如下：

/todo_app
├── index.php         # 主页面，包含表单和任务列表
├── db.php            # 数据库连接信息
└── add_task.php      # 处理添加任务的脚本

第 4 步：编写数据库连接文件 (`db.php`)

这个文件将包含连接到数据库的代码，我们将其单独写出来，方便在其他文件中引用,也避免了密码等敏感信息直接暴露在业务逻辑中。

文件: db.php

（图片来源网络，侵删）

<?php
// 数据库连接参数
$host = 'localhost';      // 通常是 localhost
$dbname = 'todo_db';      // 你创建的数据库名
$username = 'root';       // 你的 MySQL 用户名，默认是 root
$password = '';           // 你的 MySQL 密码，XAMPP/WAMP 默认为空
// 创建连接
$conn = new mysqli($host, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 设置字符集为 utf8，防止中文乱码
$conn->set_charset("utf8mb4");
?>

第 5 步：编写处理添加任务的脚本 (`add_task.php`)

当用户在前端表单中输入任务并点击提交后，这个脚本将被执行，它会接收表单数据，插入数据库,然后重定向回主页面。

文件: add_task.php

<?php
// 1. 包含数据库连接文件
require_once 'db.php';
// 2. 检查是否是通过 POST 方法提交的表单
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 3. 获取并清理表单数据
    // 使用 htmlspecialchars 防止 XSS (跨站脚本) 攻击
    $task = htmlspecialchars(trim($_POST['task']));
    // 4. 验证输入是否为空
    if (!empty($task)) {
        // 5. 准备 SQL 插入语句
        // 使用 ? 作为占位符，可以防止 SQL 注入攻击
        $sql = "INSERT INTO tasks (task_description) VALUES (?)";
        // 使用预处理语句
        $stmt = $conn->prepare($sql);
        if ($stmt) {
            // 绑定参数 (s = string)
            $stmt->bind_param("s", $task);
            // 执行语句
            if ($stmt->execute()) {
                // 插入成功，重定向回主页面
                header("Location: index.php");
                exit(); // 确保在重定向后脚本停止执行
            } else {
                echo "错误: " . $stmt->error;
            }
            // 关闭预处理语句
            $stmt->close();
        }
    } else {
        echo "任务内容不能为空！";
    }
}
// 6. 关闭数据库连接
$conn->close();
?>

第 6 步 & 第 7 步：编写主页面 (`index.php`)

这是我们的核心文件，它在一个页面中同时展示了“添加任务的表单”和“显示所有任务的列表”。

文件: index.php

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">简单的待办事项列表</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; }
        .container { max-width: 600px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        h1 { color: #333; text-align: center; }
        form { margin-bottom: 20px; }
        input[type="text"] { width: 70%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        input[type="submit"] { width: 28%; padding: 8px; background-color: #5cb85c; color: white; border: none; border-radius: 4px; cursor: pointer; }
        input[type="submit"]:hover { background-color: #4cae4c; }
        ul { list-style-type: none; padding: 0; }
        li { background: #eee; margin-bottom: 5px; padding: 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
        .task-text { flex-grow: 1; }
        .delete-btn { background: #d9534f; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; text-decoration: none; }
        .delete-btn:hover { background: #c9302c; }
    </style>
</head>
<body>
    <div class="container">
        <h1>我的待办事项</h1>
        <!-- 添加任务的表单 -->
        <form action="add_task.php" method="POST">
            <input type="text" name="task" placeholder="输入新任务..." required>
            <input type="submit" value="添加">
        </form>
        <hr>
        <!-- 显示任务列表 -->
        <h2>任务列表</h2>
        <ul>
            <?php
            // 1. 包含数据库连接文件
            require_once 'db.php';
            // 2. 编写查询语句，按创建时间倒序排列（最新的在最上面）
            $sql = "SELECT id, task_description, created_at FROM tasks ORDER BY created_at DESC";
            $result = $conn->query($sql);
            // 3. 检查查询结果中是否有数据
            if ($result->num_rows > 0) {
                // 输出每一条数据
                while($row = $result->fetch_assoc()) {
                    echo "<li>";
                    // 显示任务描述
                    echo "<span class='task-text'>" . htmlspecialchars($row["task_description"]) . "</span>";
                    // 显示删除按钮（这里先留空，后面可以扩展功能）
                    // echo "<a href='delete_task.php?id=" . $row["id"] . "' class='delete-btn'>删除</a>";
                    echo "</li>";
                }
            } else {
                echo "<li>暂无任务</li>";
            }
            // 4. 关闭数据库连接
            $conn->close();
            ?>
        </ul>
    </div>
</body>
</html>

如何运行

确保你的 XAMPP/WAMP 环境已启动。
将以上三个文件 (index.php, db.php, add_task.php) 放置到你服务器的根目录下的 todo_app 文件夹中。
打开你的浏览器，访问 http://localhost/todo_app/index.php。

现在你应该能看到一个简单的网页，在输入框中输入任务，点击“添加”，页面会刷新,新任务就会出现在列表下方。

总结与扩展

这个简单的网页实现了 PHP 与 MySQL 的基本交互：

连接数据库：使用 mysqli 扩展。
安全查询：使用了 预处理语句 (prepare, bind_param, execute) 来防止 SQL 注入,这是一个非常重要的安全实践。
数据显示：通过 SELECT 查询获取数据，并用 while 循环和 fetch_assoc() 将其显示在 HTML 中。
数据提交：通过 HTML 表单的 method="POST" 将数据发送给 PHP 脚本处理。

你可以尝试扩展这个项目，

删除功能：创建一个 delete_task.php 脚本，通过 URL 参数（如 ?id=1）接收要删除的任务 ID，然后执行 DELETE 语句。
编辑功能：增加一个编辑表单,允许用户修改现有任务。
标记完成：在 tasks 表中增加一个 is_completed 字段（如 TINYINT(1)）,并在列表中增加一个复选框来更新它。

PHP MySQL简单网页如何实现？