PHP: список дел
создаем список дел с помощью PHP
Реализуем список дел (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]);
}
?>
- Цель: удаляем задачу в соответствии с её ID.
- Объяснение: удаляем определенную задачу из базы данных.
Спасибо за внимание.
Перевод статьи MD ARIFUL HAQUE “PHP crash course: Simple To-Do List”
