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

  Александр Маврин   Комментариев нет

Создание CRUD на PHP и MySQL

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

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

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

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

id name last_name pos
1 Иван Иванов Менеджер
2 Петр Петров Сисадмин
3 Сара Конор Бухгалтер

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

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

Создание таблицы в БД для CRUD приложения

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

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

CRUD Modal

Не буду расписывать весь 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';
}

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

Create CRUD

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 кнопки, которые так же будут вызывать модальное окна. Одна на редактирование, вторая на удаление. Сейчас они пока не работают. если вы все прописали правильно, то наша таблица теперь заполнена данными.

Чтение данных из CRUD приложения

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>


И сразу после кнопок в ячейке td пишем:

< ?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>

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

Modal edt CRUD
Давайте напишем для этого 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>


Delete crud
И сам запрос на удаление:

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 приложение, которое отлично работает и хорошо смотрится. Но всем интересующим вас нюансам пишите в комментариях.

СКАЧАТЬ

Добавить страницу в закладки

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *