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

2023-07-09 0 ∞

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

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

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

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

Обновлено: 2023-07-09 20:15:13Наталья Кайдаавтор материала

Шаг 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, ];

Модальное окно 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: Создание модели

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

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

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

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

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

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

Shopping Cart