Курс — «Программирование на PHP8 для начинающих» — #30 Практический проект. Разработка простого веб-приложения
Здравствуйте, дорогие друзья.
В этом разделе мы создадим простое веб-приложение на PHP, которое будет демонстрировать основные концепции, изученные в предыдущих главах. Мы разработаем приложение для управления списком задач (To-Do List), которое позволит пользователям добавлять, редактировать и удалять задачи.
Структура проекта
Создадим структуру проекта, которая будет включать следующие файлы и папки:
|
1 2 3 4 5 6 7 |
todo-app/ ├── index.php ├── add.php ├── edit.php ├── delete.php ├── styles.css └── tasks.json |
Создание базового HTML-шаблона
Начнем с создания базового HTML-шаблона для нашего приложения. Создадим файл index.php.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- 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="styles.css"> </head> <body> <h1>To-Do List</h1> <form action="add.php" method="post"> <input type="text" name="task" placeholder="New task" required> <button type="submit">Add Task</button> </form> <ul id="task-list"> <?php $tasks = json_decode(file_get_contents('tasks.json'), true); foreach ($tasks as $task) { echo "<li>{$task['name']} <a href='edit.php?id={$task['id']}'>Edit</a> <a href='delete.php?id={$task['id']}'>Delete</a></li>"; } ?> </ul> </body> </html> |
Добавление задач
Создадим файл add.php, который будет обрабатывать добавление новых задач.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- add.php --> <?php if ($_SERVER['REQUEST_METHOD'] === 'POST') { $taskName = $_POST['task']; $tasks = json_decode(file_get_contents('tasks.json'), true); $newTask = ['id' => count($tasks) + 1, 'name' => $taskName]; $tasks[] = $newTask; file_put_contents('tasks.json', json_encode($tasks, JSON_PRETTY_PRINT)); header('Location: index.php'); } ?> |
Редактирование задач
Создадим файл edit.php, который будет обрабатывать редактирование задач.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!-- edit.php --> <?php if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id'])) { $taskId = $_GET['id']; $tasks = json_decode(file_get_contents('tasks.json'), true); $task = null; foreach ($tasks as &$t) { if ($t['id'] == $taskId) { $task = $t; break; } } if ($task) { echo "<form action='edit.php' method='post'> <input type='hidden' name='id' value='{$task['id']}'> <input type='text' name='task' value='{$task['name']}' required> <button type='submit'>Save</button> </form>"; } else { echo "Task not found."; } } elseif ($_SERVER['REQUEST_METHOD'] === 'POST') { $taskId = $_POST['id']; $taskName = $_POST['task']; $tasks = json_decode(file_get_contents('tasks.json'), true); foreach ($tasks as &$task) { if ($task['id'] == $taskId) { $task['name'] = $taskName; break; } } file_put_contents('tasks.json', json_encode($tasks, JSON_PRETTY_PRINT)); header('Location: index.php'); } ?> |
Удаление задач
Создадим файл delete.php, который будет обрабатывать удаление задач.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- delete.php --> <?php if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id'])) { $taskId = $_GET['id']; $tasks = json_decode(file_get_contents('tasks.json'), true); foreach ($tasks as $key => $task) { if ($task['id'] == $taskId) { unset($tasks[$key]); break; } } file_put_contents('tasks.json', json_encode(array_values($tasks), JSON_PRETTY_PRINT)); header('Location: index.php'); } ?> |
Стилизация приложения
Создадим файл styles.css для стилизации нашего приложения.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/* styles.css */ body { font-family: Arial, sans-serif; margin: 20px; } h1 { text-align: center; } form { margin-bottom: 20px; } input[type="text"] { width: 200px; padding: 5px; } button { padding: 5px 10px; } ul { list-style-type: none; padding: 0; } li { margin-bottom: 10px; } a { margin-left: 10px; text-decoration: none; color: blue; } |
Инициализация данных
Создадим файл tasks.json для хранения данных о задачах.
|
1 2 3 4 5 |
<!-- tasks.json --> [ {"id": 1, "name": "Buy groceries"}, {"id": 2, "name": "Walk the dog"} ] |
Мы создали простое веб-приложение для управления списком задач, которое позволяет пользователям добавлять, редактировать и удалять задачи. Этот проект демонстрирует основные концепции работы с PHP, включая обработку форм, работу с файлами и использование JSON для хранения данных. В следующих разделах мы рассмотрим, как интегрировать все изученные концепции и развернуть приложение на сервере.
На этом все. Всем хорошего дня!
Цикл статей по курсу — «Программирование на PHP8 для начинающих».