Приветствую тебя, начинающий кодер. В какой-то момент у каждого web разработчика появляется необходимость работать с базами данных. В этой статье я покажу самый простой способ связать свой PHP код и базу данных, с помощью технологии MySQLi.
Что будем делать?
В рамках этой статьи мы пошагово создадим ToDo лист с функцией добавления, обновления и удаления записей.
Будет использован следующий стек:
Создаем файловую структуру
Структура нашего проекта будет состоять из корневого каталога, в котором будут храниться страницы интерфейса, и каталога vendor, в котором находятся файлы для работы с серверной частью.
Пишем интерфейс
На главной странице мы разместим 3 элемента:
- Ссылки для фильтрации записей (Все/Выполненные/Невыполненные);
- Таблица для вывода записей;
- Форма для добавления задачи.
Очень важный момент заключается в создании формы. Она должна состоять из двух инпутов: текстового (Input:text) и кнопки отправки (input:submit). Данные должны передаваться в скрытом от пользователя режиме (методом post). Вот пример страницы, которая получилась у меня
<div class="container">
<!-- Фильтры -->
<div id="filters" class="text-center my-3">
<a href="#" class="text-success fs-5">Все</a>
<a href="#" class="text-success fs-5 mx-5">Выполненные</a>
<a href="#" class="text-success fs-5">Невыполненные</a>
</div>
<!-- Таблица -->
<table class="table table-dark table-striped my-3">
<tr>
<th>№</th>
<th>Задача</th>
<th>Действия</th>
</tr>
</table>
<!-- Форма добавления задачи -->
<div class="container fixed-bottom mb-3">
<form action="" method="post">
<div class="input-group">
<input type="text" name="" id="" class="form-control">
<input type="submit" value="+" class="btn btn-success">
</div>
</form>
</div>
</div>
Осталось только прописать шаблон для нашей записи. Я добавлю иконки для кнопок действий.
<!-- Шаблон для записи -->
<tr>
<td>1</td>
<td>Написать статью</td>
<td><a href="#" class="btn btn-success"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
</svg></a>
<a href="#" class="btn btn-danger"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
</svg></a>
</td>
</tr>
Проектируем базу данных
Итак, давайте определимся с тем, что будет хранить наша база данных. Помимо уникального идентификатора запись (id), наша таблица с задачами будет содержать заголовок и статус задачи (Выполнено/не выполнено)
Добавим туда тестовую запись для проверки вывода
Реализация вывода записей на страницу
Теперь, когда наша база готова, давайте к ней подключимся. Для этого переходим в файл connect.php и создаем там переменную connect, в которой реализуем функцию mysqli_connect с необходимыми параметрами
$connect = mysqli_connect("Адрес сервера", "Имя пользователя", "Пароль", "Имя базы данных");
Теперь подключим созданный файл к нашей главной странице. В начале нашего файла index.php добавляем следующую строку кода
<?php require_once("vendor/connect.php");?>
Осталось только вывести все записи с нашей таблицы. Вывод работает по следующему принципу:
- Подключаемся к БД;
- Получаем все записи;
- Преобразуем данные в массив;
- Выводим данные в верстку.
Код для перебора массива выглядит так:
<?php
$tasks = mysqli_query($connect, "SELECT * FROM `tasks`");
$tasks = mysqli_fetch_all($tasks);
foreach($tasks as $task){?>
<!-- Место для верстки -->
<?};
?>
Теперь отредактируем нашу верстку. Для этого в каждом теге обратимся к каждому элементу массива
<tr>
<td><?=$task[0]?></td>
<td><?=$task[1]?></td>
<td><a href="#" class="btn btn-success"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
</svg></a>
<a href="#" class="btn btn-danger"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
</svg></a>
</td>
</tr>
Создание записей
Для начала немного отредактируем нашу форму. В атрибут action пропишем путь до create.php, а полю присваиваем name и id tasktitle.
<form action="vendor/create.php" method="post">
<div class="input-group">
<input type="text" name="tasktitle" id="tasktitle" class="form-control">
<input type="submit" value="+" class="btn btn-success">
</div>
</form>
Далее пропишем содержимое самого create.php. Получим содержимое нашего поля, отправим его на сервер и переадресуем пользователя обратно на главную
<?php
require_once("connect.php");
$tasktitle = $_POST["tasktitle"]; // получение нужных данных
mysqli_query($connect, "INSERT INTO `tasks` (`id`, `title`, `status`) VALUES (NULL, '$tasktitle', 'process')"); // отправка на сервер
header("Location: /"); //переадресация
Протестируем и добавим новую задачу
Удаление записей
Для удаления записей мы будем использовать уже явную передачу данных прямо в ссылке формата ?ключ=значение. Передадим в наш шаблон ссылку такого вида
vendor/delete.php?taskid=<?=$task[0]?>
Попробуем перейти по ссылке для первой записи и увидим результат
Дальше все по шаблону, получаем данные, выполняем запрос и переадресуем пользователя
<?php
require_once("connect.php");
$taskid = $_GET["taskid"]; // получение нужных данных
mysqli_query($connect, "DELETE FROM `tasks` WHERE `tasks`.`id` = $taskid"); // отправка на сервер
header("Location: /"); //переадресация
Протестируем наш скрипт, удалив последнюю запись
Обновление записей
Дело осталось за малым, обновление. При нажатии на кнопку выполнения мы будем спрашивать подтверждение у пользователя и присваивать полю status в нашей таблице значение done. Для этого в корневом каталоге я создал файл alert.php с таким кодом
<?php require_once("vendor/connect.php");
$taskid = $_GET["taskid"];?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD | ToDo list</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body class="bg-dark">
<div class="container">
<!-- Фильтры -->
<div id="filters" class="text-center my-3">
<a href="#" class="text-success fs-5">Все</a>
<a href="#" class="text-success fs-5 mx-5">Выполненные</a>
<a href="#" class="text-success fs-5">Невыполненные</a>
</div>
</div>
<main class="my-3 d-flex flex-column justify-content-center vh-100">
<div class="container d-flex justify-content-center">
<form action="vendor/update.php" method="post" class="text-center">
<legend class="text-light">Вы уверены?</legend>
<input type="hidden" name="taskid" value="<?=$taskid;?>">
<input type="submit" value="Да" class="btn btn-success">
<a href="/" class="btn btn-danger">Нет</a>
</form>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
В этой форме присутствует скрытое поле taskid, которое будет передавать идентификатор нашей записи в обработчик, без заполнения данных пользователем. Для обработки пропишем следующее
<?php
require_once("connect.php");
$taskid = $_POST["taskid"]; // получение нужных данных
mysqli_query($connect, "UPDATE `tasks` SET `status` = 'done' WHERE `tasks`.`id` = $taskid"); // отправка на сервер
header("Location: /"); //переадресация
Проверим на оставшейся записи.
Прописываем фильтры
В заключение, создадим в корне страницы для фильтров done.php и notdone.php. Их содержание будет идентично индексу, за исключением запросов на выборку
Для done.php
$tasks = mysqli_query($connect, "SELECT * FROM `tasks` WHERE `tasks`.`status` = 'done'");
Для notdone.php
$tasks = mysqli_query($connect, "SELECT * FROM `tasks` WHERE `tasks`.`status` != 'done'");
И получим следующий результат на страницах
Выводы
Наш проект готов. Мы научились работать с методологией CRUD и создали небольшой проект для своего портфолио. Код этого приложения я выложил на GITHUB, вы можете скачать его и ознакомиться по ссылке.
Благодарю за уделенное время, буду благодарен оценке, обратной связи в комментариях и подписке. Удачи в написании кода, скоро услышимся)
