2023-01-10
В этой статье мы рассмотрим поэтапную разработку 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, файлы нужно поместить в папку xampphtdocs. При использовании ОС 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 = ‘ ‘ в файле ConfigApp.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 = ''; // удалите значение по умолчанию
Модальное окно Bootstrap: разработка формы входа, регистрации и восстановления пароля
Шаг 3: Настройки базы данных
Откройте файл appConfigDatabase.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, ];
Выполните приведенную ниже 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: Создание модели
Создайте файл модели appModelsProduct.php в папке appModels и сохраните в нем приведенный ниже код. Модель – это PHP класс, который предназначен для работы с информацией в вашей базе данных.
<?php namespace AppModels; use CodeIgniterModel; class Product extends Model { protected $table = 'products'; protected $primaryKey = 'id'; protected $useAutoIncreament = true; protected $allowedFields = ['name', 'price', 'description']; } Шаг 5: Создание контроллера
На этом этапе мы создадим контроллер под названием ProductController.php. Этот контроллер будет управлять всеми CRUD операциями – созданием, модификацией, чтением и удалением записей. Сохраните в файле контроллера appControllersProductController.php приведенный ниже код.
<?php namespace AppControllers; use AppModelsProduct; use CodeIgniterController; 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 операций, необходимо создать соответствующие маршруты. Для этого откройте файл appConfigRoutes.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 с каталогом товаров. Вверху списка товаров находится кнопка для добавления новых позиций. Сохраните в файле appViewsproductsindex.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 тестовых данных главная страница приложения будет выглядеть примерно так, как показано ниже.
Динамическая карусель на Bootstrap в PHP
Для добавления в таблицу новых позиций мы создадим файл create.php внутри папки products. Сохраните в файле appViewsproductscreate.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 создайте файл appViewsproductsedit.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 рекомендую обратиться к этому уроку. Надеюсь, статья вам пригодилась, не забудьте поделиться с друзьями.
Пожалуйста, опубликуйте свои комментарии по текущей теме материала. За комментарии, подписки, отклики, дизлайки, лайки низкий вам поклон!
