如何用php搭建一個todolist應用

要用PHP搭建一個TodoList應用，你需要遵循以下步驟：

環境準備安裝Apache、PHP和MySQL。可以使用XAMPP集成環境或者手動配置。確保PHP和MySQL運行正常。
創建數據庫和數據表在MySQL中創建一個名為"todolist"的數據庫，并創建一個名為"tasks"的數據表，包含id（主鍵，自增），task_name（任務名稱）和status（任務狀態）三個字段。

CREATE DATABASE todolist;
USE todolist;

CREATE TABLE tasks (
    id INT AUTO_INCREMENT PRIMARY KEY,
    task_name VARCHAR(255) NOT NULL,
    status BOOLEAN DEFAULT 0
);

連接數據庫在PHP文件中，創建一個函數來連接到MySQL數據庫。

function connectDatabase() {
    $servername = "localhost";
    $username = "root";
    $password = ""; // 如果設置了密碼，請填寫
    $dbname = "todolist";

    $conn = new mysqli($servername, $username, $password, $dbname);

    if ($conn->connect_error) {
        die("連接失敗: " . $conn->connect_error);
    }
    return $conn;
}

添加任務創建一個HTML表單，讓用戶輸入任務名稱。然后在PHP中處理表單提交，將任務插入到數據庫中。

<!-- index.php -->
<!DOCTYPE html>
<html>
<head>
   <title>TodoList</title>
</head>
<body>
    <h1>TodoList</h1>
    <form action="add_task.php" method="post">
       <input type="text" name="task_name" placeholder="添加任務">
       <button type="submit">添加</button>
    </form>
</body>
</html>

// add_task.php
<?php
require_once 'connect.php';

$task_name = $_POST['task_name'];

if (!empty($task_name)) {
    $conn = connectDatabase();
    $stmt = $conn->prepare("INSERT INTO tasks (task_name) VALUES (?)");
    $stmt->bind_param("s", $task_name);
    $stmt->execute();
    header('Location: index.php');
} else {
    echo "任務名稱不能為空";
}
?>

顯示任務列表在index.php中，從數據庫查詢所有任務并顯示在頁面上。

// index.php
<?php
require_once 'connect.php';

$conn = connectDatabase();
$result = $conn->query("SELECT * FROM tasks");
?>

<!DOCTYPE html>
<html>
<head>
   <title>TodoList</title>
</head>
<body>
    <h1>TodoList</h1>
    <form action="add_task.php" method="post">
       <input type="text" name="task_name" placeholder="添加任務">
       <button type="submit">添加</button>
    </form>

    <ul>
        <?php while ($row = $result->fetch_assoc()) : ?>
            <li><?php echo $row['task_name']; ?></li>
        <?php endwhile; ?>
    </ul>
</body>
</html>

完成和刪除任務在任務列表旁邊添加復選框和刪除按鈕，用戶可以勾選已完成的任務和刪除任務。

<!-- index.php -->
<ul>
    <?php while ($row = $result->fetch_assoc()) : ?>
        <li>
           <input type="checkbox" name="completed" <?php if ($row['status']) echo 'checked'; ?>>
            <?php echo $row['task_name']; ?>
            <a href="delete_task.php?id=<?php echo $row['id']; ?>">刪除</a>
        </li>
    <?php endwhile; ?>
</ul>

// delete_task.php
<?php
require_once 'connect.php';

$id = $_GET['id'];

if (!empty($id)) {
    $conn = connectDatabase();
    $stmt = $conn->prepare("DELETE FROM tasks WHERE id = ?");
    $stmt->bind_param("i", $id);
    $stmt->execute();
    header('Location: index.php');
} else {
    echo "無效的ID";
}
?>

更新任務狀態當用戶勾選任務時，更新數據庫中任務的狀態。

<!-- index.php --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>
$(document).ready(function () {
    $('input[type="checkbox"]').change(function () {
        var taskId = $(this).closest('li').data('id');
        var isCompleted = $(this).is(':checked') ? 1 : 0;
        $.ajax({
            url: 'update_task.php',
            type: 'POST',
            data: {id: taskId, status: isCompleted},
            success: function (response) {
                console.log(response);
            }
        });
    });
});
</script>

// update_task.php
<?php
require_once 'connect.php';

$id = $_POST['id'];
$status = $_POST['status'];

if (!empty($id)) {
    $conn = connectDatabase();
    $stmt = $conn->prepare("UPDATE tasks SET status = ? WHERE id = ?");
    $stmt->bind_param("ii", $status, $id);
    $stmt->execute();
    echo "任務狀態更新成功";
} else {
    echo "無效的ID";
}
?>

現在你已經創建了一個基本的TodoList應用。你可以根據需要進一步優化和完善功能。

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

最新問答

相關標簽