PHP 初學者：建立您的第一個資料庫驅動的 Web 應用程式-php教程-PHP中文網

PHP 初學者：建立您的第一個資料庫驅動的 Web 應用程式

Susan Sarandon

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

原創

789 人瀏覽過

如果您剛開始使用 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;
}

登入後複製