Пошаговая разработка 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 тестовых данных главная страница приложения будет выглядеть примерно так, как показано ниже.
Для добавления в таблицу новых позиций мы создадим файл 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 рекомендую обратиться к этому уроку. Надеюсь, статья вам пригодилась, не забудьте поделиться с друзьями.
Источник: www.internet-technologies.ru
