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

В этой статье мы рассмотрим поэтапную разработку 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 = ''; // удалите значение по умолчанию

Шаг 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,  `title` 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: разработка формы входа, регистрации и восстановления пароля

Шаг 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" type="text/css" 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> 

Как перейти с Bootstrap 4 на Bootstrap 5

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

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

Для добавления в таблицу новых позиций мы создадим файл 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> 

Динамическая карусель на Bootstrap в PHP

Для редактирования данных товаров по 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 рекомендую обратиться к этому уроку. Надеюсь, статья вам пригодилась, не забудьте поделиться с друзьями.

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

Источник: www.internet-technologies.ru

Статьи по теме

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

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Проверьте также
Close
Back to top button