Делаем CRUD приложение на PHP, MySQL и Bootstrap

Привет, друзья. В этот раз мы еще больше углубимся в бэкенд и будем делать более серьезные вещи на PHP и даже задействуем для этого базу данных MySQL. В конце можно будет скачать рабочий пример. После того, как вы пройдет этот урок, поймете, что это совсем не больно. Но для начала давайте определимся с понятиями, что же такое CRUD в программировании и какой у него функционал.

• CREATE — создание
• READ — чтение
• UPDATE — обновление
• DELETE — удаление

Проектирование базы данных

Вся архитектура БД делается на начальном этапе, чтобы в дальнейшем избежать путаницы и не пришлось все переделывать заново. Наше CRUD приложение будет состоять из одной таблицы, в которую будем добавлять пользователей. В ней будет 4 поля и выглядеть она будет примерно так:

• id — идентификатор пользователя
• name — имя
• last_name — фамилия
• pos — должность

Заходим в PHPMyadmin и создаем таблицу для CRUD приложения. (клик для увеличения)

Веб-интерфейс для CRUD приложения

Фронтенд будем писать на Bootstrap, так как это в разы быстрее, чем писать собственные стили. Вряд ли кто-то будет оспаривать его преимущества. Данные из БД будем заносить в HTML таблицу. А так же подключим иконки Font Awesome. Давайте создадим разметку во вновь созданном файле index.php. В самом верху разместим кнопку по нажатию на которую будет вызываться всплывающее окно с формой через которую будем вносить записи о новых пользователях в базу данных.

Не буду расписывать весь HTML для нашего CRUD, так как это займет очень много места. Весь код будет доступен для скачивания. Покажу лишь основные.

1
2
3
4
5
6
7
8
9
10
11
12

<button class="btn btn-success mb-1" data-toggle="modal" data-target="#Modal"><i class="fa fa-user-plus"></i></button>
  <table class="table shadow ">
    <thead class="thead-dark">
      <tr>
        <th>№</th>
        <th>Имя</th>
        <th>Фамилия</th>
        <th>Должность</th>
        <th>Действие</th>
      </tr>
    </thead>
  </table>

Модальное окно и форма вполне стандартные, ничего особенного. Вы можете легко скопировать со страницы бутстрапа.

Форма

1
2
3
4
5
6
7
8
9
10
11
12

<form action="" method="post">
  <div class="form-group">
    <input type="text" class="form-control" name="name" value="" placeholder="Имя"/>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" name="last_name" value="" placeholder="Фамилия"/>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" name="pos" value="" placeholder="Должность"/>
  </div>
  <button type="submit" name="submit" class="btn btn-primary">Добавить</button>
</form>

Подключение к базе данных

На этом этапе нужно создать конфигурационный файл, в котором будем соединяться с БД. Назовем его config.php. Для CRUD будем использовать PDO, поэтому в файле напишем следующее:

1
2
3
4
5

try {
  $pdo = new PDO('mysql:dbname=test; host=localhost', 'root', '');
} catch (PDOException $e) {
  die($e->getMessage());
}

Это была подготовка, теперь приступи к самому основному.

CREATE

Созданием еще один PHP файл, в котором будут исполняться все запросы к БД. Назовем его func.php и запишем первый запрос, который будет вносить записи в таблицу на сервере.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

include 'config.php';
$name = $_POST['name'];
$last_name = $_POST['last_name'];
$pos = $_POST['pos'];
// Create
if (isset($_POST['submit'])) {
	$sql = ("INSERT INTO `users`(`name`, `last_name`, `pos`) VALUES(?,?,?)");
	$query = $pdo->prepare($sql);
	$query->execute([$name, $last_name, $pos]);
	$success = '<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Данные успешно отправлены!</strong> Вы можете закрыть это сообщение.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>';	
}else{
	echo 'error';
}

При успешной отправке будет выводится соответствующее сообщение, в противном случае — ошибка. теперь можно попробовать сделать первые несколько записей. Не знаю как у вас, а у меня все прекрасно работает.

READ

Теперь прочитаем эти данные и выведем их на страницу в HTML таблицу, которую мы недавно создали. Запрос на выборку будет таким:

1
2
3

$sql = $pdo->prepare("SELECT * FROM `users`");
$sql->execute();
$result = $sql->fetchAll();

И в индексном файле, в том месте, где будем выводить записи создадим цикл foreach

1
2
3
4
5
6
7
8
9
10

< ?php foreach ($result as $value) { ?>
<tr>
<td>< ?=$value['id'] ?></td>
<td>< ?=$value['name'] ?></td>
<td>< ?=$value['last_name'] ?></td>
<td>< ?=$value['pos'] ?></td>
<td>
<a href="?edit=<?=$value['id'] ?>" class="btn btn-success btn-sm"><i class="fa fa-edit"></i></a> 
<a href="?delete=<?=$value['id'] ?>" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a>
</td></tr>

В последней колонке будет 2 кнопки, которые так же будут вызывать модальное окна. Одна на редактирование, вторая на удаление. Сейчас они пока не работают. если вы все прописали правильно, то наша таблица теперь заполнена данными.

UPDATE

Теперь рассмотрим как редактировать уже имеющиеся записи через CRUD приложение. Для еще большего удобства я предлагаю вынести popup окна с формой в отдельный файл под названием modal.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

<!-- Modal Edit-->
<div class="modal fade" id="editModal<?=$value['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Редактировать запись № < ?=$value['id'] ?></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="?id=<?=$value['id'] ?>" method="post">
        	<div class="form-group">
        		<input type="text" class="form-control" name="edit_name" value="<?=$value['name'] ?/>" placeholder="Имя">
        	</div>
        	<div class="form-group">
        		<input type="text" class="form-control" name="edit_last_name" value="<?=$value['last_name'] ?/>" placeholder="Фамилия">
        	</div>
        	<div class="form-group">
        		<input type="text" class="form-control" name="edit_pos" value="<?=$value['pos'] ?/>" placeholder="Должность">
        	</div>
        	<div class="modal-footer">
        		<button type="submit" name="edit-submit" class="btn btn-primary">Обновить</button>
        	</div>
        </form>	
      </div>
    </div>
  </div>
</div>

< ?php require 'modal.php'; ?>

Сама кнопка при этом будет иметь следующий вид:

1

<a href="?edit=<?=$value['id'] ?>" class="btn btn-success btn-sm" data-toggle="modal" data-target="#editModal< ?=$value['id'] ?>"><i class="fa fa-edit"></i></a>

Как вы успели заметить, вызов осуществляется по идентификатору юзера. В поля формы мы получаем данные и можем их изменять.

Давайте напишем для этого SQL-запрос.

1
2
3
4
5
6
7
8
9
10
11

// Update
$edit_name = $_POST['edit_name'];
$edit_last_name = $_POST['edit_last_name'];
$edit_pos = $_POST['edit_pos'];
$get_id = $_GET['id'];
if (isset($_POST['edit-submit'])) {
	$sqll = "UPDATE users SET name=?, last_name=?, pos=? WHERE id=?";
	$querys = $pdo->prepare($sqll);
	$querys->execute([$edit_name, $edit_last_name, $edit_pos, $get_id]);
	header('Location: '. $_SERVER['HTTP_REFERER']);
}

DELETE

Осталось совсем немного, в именно операция удаления в CRUD приложении. Все записи будут безвозвратно удаляться из базы данных. Принцип такой: при нажатии кнопки с корзиной будет всплывать окошко с кнопками подтверждения или отмены удаления. Давайте это реализуем.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- DELETE MODAL -->
<div class="modal fade" id="deleteModal<?=$value['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content shadow">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Удалить запись № < ?=$value['id'] ?></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
        <form action="?id=<?=$value['id'] ?>" method="post">
        	<button type="submit" name="delete_submit" class="btn btn-danger">Удалить</button>
    	</form>
      </div>
    </div>
  </div>
</div>

1
2
3
4
5
6

if (isset($_POST['delete_submit'])) {
	$sql = "DELETE FROM users WHERE id=?";
	$query = $pdo->prepare($sql);
	$query->execute([$get_id]);
	header('Location: '. $_SERVER['HTTP_REFERER']);
}

Мы с вами создали полноценное CRUD приложение, которое отлично работает и хорошо смотрится. Читайте также про приложение на JSON. По всем интересующим вас нюансам пишите в комментариях.

СКАЧАТЬ СКРИПТ ЧЕРЕЗ ТЕЛЕГРАМ