如何用php搭建一个todolist应用

   2024-09-30 6070
核心提示:要用PHP搭建一个TodoList应用,你需要遵循以下步骤:环境准备安装Apache、PHP和MySQL。可以使用XAMPP集成环境或者手动配置。确保

要用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<?phprequire_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<?phprequire_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<?phprequire_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<?phprequire_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应用。你可以根据需要进一步优化和完善功能。

 
举报打赏
 
更多>同类物流大全
推荐图文
推荐物流大全
点击排行

网站首页  |  关于我们  |  联系方式网站留言    |  赣ICP备2021007278号