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

    32 комментария 16268

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

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

Телеграм-канал serblog.ru

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

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

Любая сумма на развитие сайта

32 комментария
  1. Boris:

    Отличная статья! Спаисбо! Все работает, но есть одна проблема с переменными. Выходят ошибки Notice: Undefined index: name in C:\Server\data\htdocs\app-crud\func.php on line 4

    Notice: Undefined index: last_name in C:\Server\data\htdocs\app-crud\func.php on line 5

    Notice: Undefined index: pos in C:\Server\data\htdocs\app-crud\func.php on line 6

    Notice: Undefined index: edit_name in C:\Server\data\htdocs\app-crud\func.php on line 30

    Notice: Undefined index: edit_last_name in C:\Server\data\htdocs\app-crud\func.php on line 31

    Notice: Undefined index: edit_pos in C:\Server\data\htdocs\app-crud\func.php on line 32

    Notice: Undefined index: id in C:\Server\data\htdocs\app-crud\func.php on line 33

    • Александр Маврин:

      Если работает и все нормально, просто добавьте символ собачки, чтобы убрать предупреждения:

      $last_name = @$_POST['last_name'];
  2. Boris:

    Спасибо! Теперь после этих исправлений все заработало, но появились другие ошибки.
    Notice: Undefined variable: success in C:\Server\data\htdocs\app-crud\index.php on line 17

    Второе. После добавления нового пользователя, перезагружаешь страничку выходит алерт подтвердите повторную отправку формы, после нажатия на продолжить, запись дублируется и получается две одинаковые записи. Автор помоги!

    • Александр Маврин:

      В разделе CREATE после 9 строчки перед переменной $success (ее можно удалить совсем) добавьте:

      header('Location: ' . $_SERVER['HTTP_REFERER']);
  3. Иван:

    А как сделать поиск?

    • Александр Маврин:

      Примерно так:

      query("SELECT * FROM `products` WHERE `hide` = 0 AND `prod_name` LIKE '%$val%' LIMIT 10");

      Это я взял из рабочего проекта для примера.

  4. AHMED:

    Спасибо за урок Александр!
    Я взял ваш модель и переделал под другую базу данных с фотками.
    Всё замечательно в начале.
    Для филтровки я переимеиновал index.php на другои crud.php к которому передается ?id от нового index.php
    В modal add все в порядке
    но для edit и delete ничего не происходит и почему то по строке
    header(«location:» . $_SERVER[‘HTTP_REFERER’]);
    возврошетця на index.php а не на crud.php

    • Александр Маврин:

      Пропишите header(«location: index.php» );
      По остальному код нужно смотреть.

  5. Алексей:

    Очень полезная статья, спасибо. Не могли бы вы реализовать или рассказать как сделать сортировку desc и asc таблицы по дате допустим, чтобы дата корректо отображалась.

    • Александр Маврин:
      "SELECT * FROM post ORDER BY `date_field` DESC"

      Вывод даты примерно так:

      $date =  date_format($date, 'Y-m-d H:i:s');
  6. JJJJJJJJJJJJJ:

    Здравствуйте,а что далать если данные не добавляются?

  7. Иван:

    Добрый день!
    вот такая ошибка вышла,можете помочь пожалуйста

    Warning: Undefined array key «name» in C:\xampp\htdocs\crud\func.php on line 4

    Warning: Undefined array key «last_name» in C:\xampp\htdocs\crud\func.php on line 5

    Warning: Undefined array key «pos» in C:\xampp\htdocs\crud\func.php on line 6

    Fatal error: Uncaught PDOException: SQLSTATE[42S02]: Base table or view not found: 1146 Table ‘test.users’ doesn’t exist in C:\xampp\htdocs\crud\func.php:26 Stack trace: #0 C:\xampp\htdocs\crud\func.php(26): PDOStatement->execute() #1 C:\xampp\htdocs\crud\index.php(2): include(‘C:\\xampp\\htdocs…’) #2 {main} thrown in C:\xampp\htdocs\crud\func.php on line 26

  8. dima:

    аа что делать (не хочу уменьшать текст) ааа

    Fatal error: Uncaught PDOException: SQLSTATE[22001]: String data, right truncated: 1406 Data too long for column ‘pos’ at row 1 in C:\OpenServer\domains\lc1\func.php:37 Stack trace: #0 C:\OpenServer\domains\lc1\func.php(37): PDOStatement->execute() #1 C:\OpenServer\domains\lc1\index.php(2): include(‘C:\\OpenServer\\d…’) #2 {main} thrown in C:\OpenServer\domains\lc1\func.php on line 37

    • Александр Маврин:

      Вам нужно либо изменить тип данных столбца «pos» со строки на текст и не указывайте длину, либо просто увеличить длину с 50 до 255.

  9. Артем:

    Добрый день, подскажите в чем может быть проблема, если добавляю больше трех столбцов данные не записываются в бд?

    • Артем:

      В коде все верно прописано, в бд поле создано, ошибок нет

      • Артем:

        prepare($sql);
        $query->execute([$counterparty, $area, $number_container, $datein]);
        header(‘Location: ‘ . $_SERVER[‘HTTP_REFERER’]);
        $success = ‘
        Данные успешно отправлены! Вы можете закрыть это сообщение.

        ×

        /div>’;

        }

        Кнопка так же прописана

    • Александр Маврин:

      Включите показ ошибок error_reporting(E_ALL);
      Скорее всего проблема с переменными.

  10. Алекс:

    Добрый день. Выдает ошибку и не записывает данные в базу
    Notice: Undefined index: name in D:\OpenServer\domains\blog\foo.php on line 5
    Notice: Undefined index: email in D:\OpenServer\domains\blog\foo.php on line 6
    Notice: Undefined index: id in D:\OpenServer\domains\blog\foo.php on line 7

    Код писал по видео, что можно с этим сделать ?

    • Алекс:

      Уже решил. В базе данных пересоздал таблицу и выставил всем значениям NULL. Теперь корректно все записывается

  11. Максим:

    php и html вместе не работают в одном файле, что делать? я передал все под свою бд, но вообще ничего нет, просто основа без заполнения данными и все

    • Александр Маврин:

      Расширение index файла какое?

      • Миша:

        Здравствуйте, среда не видит почему-то переменные в других файлах, например переменную $result в index.php файле, и $pdo переменную в foo.php файле. везде include с файлами прописал

  12. Gor:

    Здравствуйте я скачал файл и когда открыл сайт работал но там были ошибки типа такого

    Warning: Undefined array key «name» in C:\xampp\htdocs\dashboard\CRUD-app\func.php on line 4

    Warning: Undefined array key «last_name» in C:\xampp\htdocs\dashboard\CRUD-app\func.php on line 5

    Warning: Undefined array key «pos» in C:\xampp\htdocs\dashboard\CRUD-app\func.php on line 6

    Warning: Undefined array key «edit_name» in C:\xampp\htdocs\dashboard\CRUD-app\func.php on line 30

    Warning: Undefined array key «edit_last_name» in C:\xampp\htdocs\dashboard\CRUD-app\func.php on line 31

    Warning: Undefined array key «edit_pos» in C:\xampp\htdocs\dashboard\CRUD-app\func.php on line 32

    Warning: Undefined array key «id» in C:\xampp\htdocs\dashboard\CRUD-app\func.php on line 33

    Warning: Undefined variable $success in C:\xampp\htdocs\dashboard\CRUD-app\index.php on line 17
    когда я добавлял что-то первые три пропадали но остальные оставались что делать?

  13. Евгений:

    А где обновление таблицы без перезагрузки страницы?

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

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