PHP: список дел

создаем список дел с помощью PHP

2024-09-20 dr.Brain

время чтения 4 мин.

Реализуем список дел (to do list) с помощью PHP, HTML, CSS, jQuery и AJAX.

Пользователь сможет бесшовно создавать, редактировать и удалять задчи, не перезагружая страницу. Этот несложный проект превосходно демонстрирует реализацию CRUD в веб-приложении.

Подключаемся к базе данных

config.php

<?php
// Database configuration
$host = 'localhost'; // The hostname of your MySQL server
$dbname = 'todolist'; // The name of the database you want to connect to
$user = 'root'; // The MySQL username (default is 'root')
$pass = ''; // The password for the MySQL user (empty in this case)

// Create a new PDO instance
try {
    // Attempt to create a PDO connection
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);

    // Set the error mode to exception
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    echo "Connected successfully"; // Connection was successful
} catch (PDOException $e) {
    // Handle connection errors
    echo 'Connection failed: ' . $e->getMessage();
}
?>

Цель: подключиться к базе данных с помощью PDO.
Объяснение: скрипт устанавливает соединение с базой данной или возвращает сообщение об ошибке.

HTML

index.php

<!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</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <form id="task-form">
            <input type="text" id="task" placeholder="New task">
            <button type="submit">Add Task</button>
        </form>
        <ul id="task-list">
            <!-- Tasks will be loaded here by AJAX -->
        </ul>
    </div>
</body>

Цель: создать страницу для взаимодействия с пользователем.
Объяснение: страница содержит кнопки добавления, редактирования и удаления задач. Так же страница динамически обновляет список задач с помощью jQuery и AJAX.

CSS

style.css

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

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

h1 {
    text-align: center;
}

form {
    display: flex;
    justify-content: space-between;
}

#task {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px;
    background-color: #5cb85c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #4cae4c;
}

#task-list {
    list-style-type: none;
    padding: 0;
}

#task-list li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

#task-list li a {
    margin-left: 10px;
    color: #007bff;
    text-decoration: none;
}

#task-list li a:hover {
    text-decoration: underline;
}

JavaScript

script.js

$(document).ready(function() {
       loadTasks();

    $('#addTask').on('click', function() {
        let task = $('#task').val();
        if (task) {
            $.ajax({
                url: 'add_task.php',
                method: 'POST',
                data: { task: task },
                success: function(response) {
                    $('#task').val('');
                    loadTasks();
                }
            });
        }
    });
        $(document).on('click', '.editTask', function() {
                let id = $(this).data('id');
                $.ajax({
                    url: 'edit_task.php',
                    method: 'POST',
                    data: { id: id },
                    success: function(response) {
                        loadTasks();
                    }
                });
        });

    $(document).on('click', '.deleteTask', function() {
        let id = $(this).data('id');
        $.ajax({
            url: 'delete_task.php',
            method: 'POST',
            data: { id: id },
            success: function(response) {
                loadTasks();
            }
        });
    });

    function loadTasks() {
        $.ajax({
            url: 'get_tasks.php',
            method: 'GET',
            success: function(response) {
                $('#taskList').html(response);
            }
        });
    }
});

Получаем задачи из базы данных

get_tasks.php

<?php
include 'config.php';

$query = $pdo->query("SELECT * FROM tasks ORDER BY created_at DESC");
$tasks = $query->fetchAll(PDO::FETCH_ASSOC);

foreach ($tasks as $task) {
    echo '<li>';
    echo htmlspecialchars($task['task']);
    echo ' <a href="edit_task.php?id=' . $task['id'] . '">Edit</a>';
    echo ' <a href="delete_task.php?id=' . $task['id'] . '">Delete</a>';
    echo '</li>';
}
?>

Цель: извлечь задачи из базы данных и представить их в HTML-формате.
Объяснение: получить задачи из базы данных и представить их в формате, понятном пользователю.

Добавляем задачу

add_task.php

<?php
include 'config.php';

if (isset($_POST['task'])) {
    $task = $_POST['task'];
    $stmt = $pdo->prepare("INSERT INTO tasks (task) VALUES (:task)");
    $stmt->execute(['task' => $task]);
}
?>

Цель: скрипт создаёт новую задачу.
Объяснение: обрабатываем POST-запрос и добавляем данные новной задачи в таблицу tasks.

Вносим изменения в задачу

edit_task.php

<?php
include 'config.php';

if (isset($_GET['id']) && isset($_POST['task'])) {
    $id = $_GET['id'];
    $task = $_POST['task'];
    $stmt = $pdo->prepare("UPDATE tasks SET task = :task WHERE id = :id");
    $stmt->execute(['task' => $task, 'id' => $id]);
}
?>

Цель: обновляем существующую задачу.
Объяснение: с помощью данных из POST-запроса обновляем задачу в соответствии с её ID.

Удалеяем задачу

delete_task.php

<?php
include 'config.php';

if (isset($_GET['id'])) {
    $id = $_GET['id'];
    $stmt = $pdo->prepare("DELETE FROM tasks WHERE id = :id");
    $stmt->execute(['id' => $id]);
}
?>