PHP 初学者：构建您的第一个数据库驱动的 Web 应用程序-php教程-PHP中文网

PHP 初学者：构建您的第一个数据库驱动的 Web 应用程序

Susan Sarandon

发布： 2025-01-06 01:23:43

原创

746 人浏览过

如果您刚刚开始使用 PHP，您可以承担的最令人兴奋的项目之一就是构建数据库驱动的 Web 应用程序。这是了解后端如何工作、与数据库交互并向用户提供动态内容的好方法。

PHP for Beginners: Building Your First Database-Driven Web App

在本教程中，我们将使用 PHP 和 MySQL 构建一个简单的 待办事项列表应用程序。最后，您将拥有一个可以运行的应用程序，用户可以在其中添加、查看和删除任务。

先决条件

在我们深入之前，请确保您已经：

PHP（7.4 或更高版本）
MySQL（或 MariaDB）
像 XAMPP 或 Laragon 这样的本地服务器
类似 VS Code 的代码编辑器

第 1 步：设置您的环境

安装本地服务器（例如 XAMPP）。
启动 Apache 和 MySQL 服务。
导航到您的 Web 根目录（XAMPP 的 htdocs）并创建一个名为 todo_app 的新文件夹。

第 2 步：创建数据库

打开 phpMyAdmin。
创建一个名为 todo_app 的新数据库。
运行以下 SQL 查询来创建任务表：

sql
CREATE TABLE tasks (
    id INT AUTO_INCREMENT PRIMARY KEY,
    task VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

登录后复制

第 3 步：构建 HTML 前端

在 todo_app 文件夹中创建 index.php 文件并添加以下 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div>




<hr>

<h2>
  
  
  Step 4: Handle Adding Tasks
</h2>

<p>Create a new file called <em>add_task.php</em> and add the following code:<br>
</p>

<pre class="brush:php;toolbar:false"><?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $task = $_POST['task'];

    // Connect to the database
    $conn = new mysqli("localhost", "root", "", "todo_app");

    // Insert the task into the database
    $stmt = $conn->prepare("INSERT INTO tasks (task) VALUES (?)");
    $stmt->bind_param("s", $task);
    $stmt->execute();

    $stmt->close();
    $conn->close();

    // Redirect back to the main page
    header("Location: index.php");
    exit();
}
?>

登录后复制

第 5 步：处理删除任务

创建一个名为delete_task.php:
的新文件

<?php
if (isset($_GET['id'])) {
    $id = $_GET['id'];

    // Connect to the database
    $conn = new mysqli("localhost", "root", "", "todo_app");

    // Delete the task from the database
    $stmt = $conn->prepare("DELETE FROM tasks WHERE id = ?");
    $stmt->bind_param("i", $id);
    $stmt->execute();

    $stmt->close();
    $conn->close();

    // Redirect back to the main page
    header("Location: index.php");
    exit();
}
?>

登录后复制

第 6 步：添加一些 CSS（可选）

在同一文件夹中创建 styles.css 文件来设置应用程序的样式：

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
    margin: 0;
    padding: 0;
}

.container {
    width: 50%;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h1 {
    text-align: center;
}

form {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

form input {
    flex: 1;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

form button:hover {
    background-color: #218838;
}

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

ul li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

ul li a {
    color: #dc3545;
    text-decoration: none;
}

登录后复制