Пошаговая разработка CRUD веб-приложения на CodeIgniter 4, MySQL и Bootstrap

0 ∞

В этой статье мы рассмотрим поэтапную разработку CRUD операций для приложения на основе CodeIgniter 4 и MySQL. Мы подробно разберем создание функциональности CRUD для взаимодействия с базой данных MySQL, добавим две дополнительные операции для поиска записей и разбиения на страницы, а также сделаем интерфейс с помощью Bootstrap.

CRUD – общепринятое сокращенное название набора из 4 базовых операций для работы с базами данных. Операции по созданию, чтению, модификации и удалению записей помогают сделать сайт динамическим. Ниже мы рассмотрим разработку CRUD на CodeIgniter 4. Готовое приложение будет создавать, редактировать, читать и удалять записи каталога товаров в базе данных MySQL.

Bootstrap – самый популярный и мощный фреймворк для быстрой разработки фронтенда. С его помощью мы быстро создадим стильный и адаптивный интерфейс для нашего приложения. Подробные уроки по Bootstrap есть в соответствующем разделе сайта.

DataTables – плагин для библиотеки jQuery. Это мощный и гибкий инструмент для добавления продвинутой функциональности к любой HTML таблице.

Содержание

Шаг 1: Установка CodeIgniter 4

Для ускорения разработки CRUD нам прежде всего нужно скачать и установить PHP фреймворк CodeIgniter 4. Распакуйте архив в корневую папку проекта. Если вы используете локальный сервер XAMPP, файлы нужно поместить в папку xampp\htdocs\. При использовании ОС Ubuntu файлы помещают в директорию /var/www или /var/www/html.

Шаг 2: Активация уведомлений об ошибках

Чтобы получать уведомления об ошибках, нужно изменить значение параметра display_errors в файлах app/Config/Boot/development.php и app/Config/Boot/production.php с 0 на 1:

ini_set('display_errors', '1');

Удалите указание на index.php с помощью изменения значения параметра $indexPage = ‘ ‘ в файле Config\App.php, как показано ниже.

/**
 * --------------------------------------------------------------------------
 * Index File
 * --------------------------------------------------------------------------
 *
 * Typically this will be your index.php file, unless you've renamed it to
 * something else. If you are using mod_rewrite to remove the page set this
 * variable so that it is blank.
 *
 * @var string
 */
public $indexPage = ''; // удалите значение по умолчанию

Шаг 3: Настройки базы данных

Откройте файл app\Config\Database.php и введите все необходимые данные – название базы, имя пользователя, пароль и так далее.

/**
 * The default database connection.
 *
 * @var array
 */
public $default = [
	'DSN'      => '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'codeigniter_crud',
	'DBDriver' => 'MySQLi',
	'DBPrefix' => '',
	'pConnect' => false,
	'DBDebug'  => (ENVIRONMENT !== 'production'),
	'charset'  => 'utf8',
	'DBCollat' => 'utf8_general_ci',
	'swapPre'  => '',
	'encrypt'  => false,
	'compress' => false,
	'strictOn' => false,
	'failover' => [],
	'port'     => 3306,
];
Модальное окно Bootstrap: разработка формы входа, регистрации и восстановления пароля

Выполните приведенную ниже SQL команду для создания таблицы под названием products («товары») в вашей базе данных MySQL. С этой таблицей будет работать наше CRUD приложение.

CREATE TABLE `products` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255),
 `price` double(16, 2),
 `description` text,
 PRIMARY KEY (`id`)
)

Шаг 4: Создание модели

Создайте файл модели app\Models\Product.php в папке app\Models\ и сохраните в нем приведенный ниже код. Модель – это PHP класс, который предназначен для работы с информацией в вашей базе данных.

<?php
namespace App\Models;
use CodeIgniter\Model;

class Product extends Model
{
    protected $table = 'products';
    protected $primaryKey = 'id';
    protected $useAutoIncreament = true;

    protected $allowedFields = ['name', 'price', 'description'];
}

Шаг 5: Создание контроллера

На этом этапе мы создадим контроллер под названием ProductController.php. Этот контроллер будет управлять всеми CRUD операциями – созданием, модификацией, чтением и удалением записей. Сохраните в файле контроллера app\Controllers\ProductController.php приведенный ниже код.

<?php
namespace App\Controllers;
use App\Models\Product;
use CodeIgniter\Controller;

class ProductController extends Controller
{
    // вывод списка товаров
    public function index() {
        $product = new Product();
        $data['products'] = $product->orderBy('id', 'DESC')->findAll();
        return view('products/index', $data);
    }

    // форма добавления товара
    public function create() {
        return view('products/create');
    }

    // сохранение информации о товаре
    public function store() {
        $product = new Product();

        $data = [
            'name' => $this->request->getVar('name'),
            'price'  => $this->request->getVar('price'),
            'description'  => $this->request->getVar('description'),
        ];

        $product->insert($data);

        return $this->response->redirect(site_url('/products'));
    }

    // вывод информации о товаре
    public function edit($id) {
        $product = new Product();
        $data['product'] = $product->where('id', $id)->first();
        return view('products/edit', $data);
    }

    // изменение информации о товаре
    public function update() {
        $product = new Product();
        $id = $this->request->getVar('id');

        $data = [
            'name' => $this->request->getVar('name'),
            'price'  => $this->request->getVar('price'),
            'description'  => $this->request->getVar('description'),
        ];

        $product->update($id, $data);
        return $this->response->redirect(site_url('/products'));
    }

    // удаление позиции
    public function delete($id) {
        $product = new Product();
        $data['product'] = $product->where('id', $id)->delete($id);
        return $this->response->redirect(site_url('/products'));
    }
}
Как перейти с Bootstrap 4 на Bootstrap 5

Шаг 6: Маршрутизация

Чтобы обеспечить выполнение всех CRUD операций, необходимо создать соответствующие маршруты. Для этого откройте файл app\Config\Routes.php и сохраните в нем данный код.

$routes->get('products', 'ProductController::index');
$routes->get('products/create', 'ProductController::create');
$routes->post('products/store', 'ProductController::store');
$routes->get('products/edit/(:num)', 'ProductController::edit/$1');
$routes->post('products/update', 'ProductController::update');
$routes->get('products/delete/(:num)', 'ProductController::delete/$1');

Шаг 7: Файлы просмотра

Перейдем к созданию страниц, которые обеспечивают отображение каталога товаров, а также форм создания и редактирования записей.

Прежде всего создайте новую папку products, в которой будет располагаться главная страница приложения index.php с каталогом товаров. Вверху списка товаров находится кнопка для добавления новых позиций. Сохраните в файле app\Views\products\index.php приведенный ниже код.

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Codeigniter 4 CRUD App Example Tutorial - codingdriver.com</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-4">
    <div class="d-flex justify-content-end">
        <a href="<?php echo site_url('/products/create') ?>" class="btn btn-success mb-2">Add Product</a>
	</div>
    <?php
     if (isset($_SESSION['msg'])) {
        echo $_SESSION['msg'];
      }
     ?>
  <div class="mt-3">
     <table class="table table-bordered" id="products-list">
       <thead>
          <tr>
             <th></th>
             <th>Name</th>
             <th>Price</th>
             <th>Description</th>
             <th>Action</th>
          </tr>
       </thead>
       <tbody>
          <?php if($products): ?>
          <?php foreach($products as $key => $product): ?>
          <tr>
             <td><?php echo $key+1; ?></td>
             <td><?php echo $product['name']; ?></td>
             <td><?php echo $product['price']; ?></td>
             <td><?php echo $product['description']; ?></td>
             <td>
              <a href="<?php echo base_url('products/edit/'.$product['id']);?>" class="btn btn-primary btn-sm">Edit</a>
              <a href="<?php echo base_url('products/delete/'.$product['id']);?>" class="btn btn-danger btn-sm">Delete</a>
              </td>
          </tr>
         <?php endforeach; ?>
         <?php endif; ?>
       </tbody>
     </table>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready( function () {
      $('#products-list').DataTable();
    });
</script>
</body>
</html>

После добавления в таблицу products тестовых данных главная страница приложения будет выглядеть примерно так, как показано ниже.

Главная страница CRUD приложения на CodeIgniter
Динамическая карусель на Bootstrap в PHP

Для добавления в таблицу новых позиций мы создадим файл create.php внутри папки products. Сохраните в файле app\Views\products\create.php приведенный ниже код, который обеспечивает создание веб-формы для добавления записей в базу данных.

<!DOCTYPE html>
<html>

<head>
  <title>Codeigniter 4 Crud with Validation Demo</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    .container {
      max-width: 500px;
    }

    .error {
      display: block;
      padding-top: 5px;
      font-size: 14px;
      color: red;
    }
  </style>
</head>

<body>
  <div class="container mt-5">
    <form method="post" id="createProduct" action="<?= site_url('/products/store') ?>">
      <div class="form-group">
        <label>Name</label>
        <input type="text" name="name" class="form-control">
      </div>

      <div class="form-group">
        <label>Price</label>
        <input type="number" name="price" class="form-control">
      </div>

      <div class="form-group">
        <label>Description</label>
        <textarea type="text" name="description" class="form-control"></textarea>
      </div>

      <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block">Save</button>
      </div>
    </form>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
  <script>
    if ($("#createProduct").length > 0) {
      $("#createProduct").validate({
        rules: {
          name: {
            required: true,
          },
          price: {
            required: true,
          },
          description: {
            required: true,
          },
        },
        messages: {
          name: {
            required: "Name is required.",
          },
          price: {
            required: "Price is required.",
          },
          description: {
            required: "Description is required.",
          },
        },
      })
    }
  </script>
</body>

</html>

Для редактирования данных товаров по ID создайте файл app\Views\products\edit.php и сохраните в нем приведенный ниже код.

<!DOCTYPE html>
<html>

<head>
  <title>Codeigniter 4 Crud with Validation Demo</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    .container {
      max-width: 500px;
    }

    .error {
      display: block;
      padding-top: 5px;
      font-size: 14px;
      color: red;
    }
  </style>
</head>

<body>
  <div class="container mt-5">
    <form method="post" id="createProduct" action="<?= site_url('/products/update') ?>">
    <input type="hidden" name="id" value="<?php echo $product['id']; ?>">
        <div class="form-group">
            <label>Name</label>
            <input type="text" name="name" class="form-control" value="<?php echo $product['name']; ?>">
        </div>
        <div class="form-group">
            <label>Price</label>
            <input type="number" name="price" class="form-control" value="<?php echo $product['price']; ?>">
        </div>
        <div class="form-group">
            <label>Description</label>
            <textarea type="text" name="description" class="form-control"><?php echo $product['description']; ?></textarea>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-block">Save</button>
        </div>
    </form>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
  <script>
    if ($("#createProduct").length > 0) {
      $("#createProduct").validate({
        rules: {
          name: {
            required: true,
          },
          price: {
            required: true,
          },
          description: {
            required: true,
          },
        },
        messages: {
          name: {
            required: "Name is required.",
          },
          price: {
            required: "Price is required.",
          },
          description: {
            required: "Description is required.",
          },
        },
      })
    }
  </script>
</body>

</html>

Шаг 8: Запуск приложения

Для запуска приложения сначала выполните команду:

php spark serve

Затем откройте главную страницу приложения в браузере по адресу:

http://localhost:8080/products

Заключение

Создание функциональности CRUD для приложения на CodeIgniter 4 и MySQL с Bootstrap интерфейсом завершено. Для лучшего понимания принципов работы CRUD на PHP рекомендую обратиться к этому уроку. Надеюсь, статья вам пригодилась, не забудьте поделиться с друзьями.

Наталья Кайдаавтор-переводчик статьи «Codeigniter 4 CRUD Operation with Mysql and Bootstrap Example»