CodeIgniter 4: Перетаскивание и изменение порядка элементов с помощью jQuery
![](/uploads/posts/2022-09/1662664941_codeigniter-4.webp)
В этом руководстве мы рассмотрим концепцию, т.е. Перетаскивание и изменение порядка элементов с помощью jQuery в CodeIgniter 4. Руководство содержит закрытую информацию о сортировке MySQL Row Order с помощью jQuery.
Руководство очень простое для понимания и реализации в вашем коде.
Мы рассмотрим концепцию перетаскивания, перемещения и сортировки с помощью CodeIgniter и jQuery UI. Мы будем использовать функцию сортировки jquery UI.
Давайте начнем.
Установка CodeIgniter 4
Для установки CodeIgniter 4 выполните следующую команду в терминале. Убедитесь, что composer у вас должен быть установлен.
$ composer create-project codeigniter4/appstarter codeigniter-4
Предположим, что вы успешно установили приложение в свою локальную систему.
Настройка .env
Когда мы установим CodeIgniter 4, у нас будет файл env в корне проекта. Чтобы использовать переменные окружения, то есть использовать переменные в глобальной области видимости, нам нужно переименовать env в .env.
Либо мы можем сделать это через переименование файла. Также это можно сделать с помощью команды терминала.
Откройте проект в терминале
$ cp env .env
Вышеприведенная команда создаст копию файла env в файл .env.
Теперь мы готовы использовать переменные среды.
Включите режим разработки
CodeIgniter по умолчанию запускается в режиме production. Вам необходимо перевести его в режим development, чтобы увидеть любую ошибку, если вы работаете с приложением.
Откройте файл .env в корневой папки.
Найдите:
# CI_ENVIRONMENT = production
Измените на:
CI_ENVIRONMENT = development
Теперь приложение находится в режиме разработки.
Создание базы данных
Чтобы создать базу данных, мы можем создать ее либо с помощью ручного инструмента PhpMyAdmin, либо с помощью команды mysql.
Мы будем использовать команду MySQL для создания базы данных. Выполните эту команду на вкладке Sql в PhpMyAdmin.
CREATE DATABASE codeigniter4_app;
Успешно, мы создали базу данных.
Подключение к базе данных
Откройте файл .env в корне проекта.
Найдите раздел DATABASE. В нем вы должны увидеть переменные среды подключения. Вставьте обновленные данные строки подключения к базе данных.
#--------------------------------------------------------------------
# DATABASE
#--------------------------------------------------------------------
database.default.hostname = localhost
database.default.database = codeigniter4_app
database.default.username = root
database.default.password = ВАШ_ПАРОЛЬ
database.default.DBDriver = MySQLi
database.default.DBPrefix =
Теперь база данных успешно подключилась к приложению.
Создание миграции
Откройте проект в терминале и выполните эту команду для создания файла миграции.
$ php spark make:migration add_items
Эта команда создаст файл - xxx_AddItems.php внутри папки /app/Database/Migrations.
Откройте файл Migration и запишите в него этот код.
<?php
namespace App\Database\Migrations;
use CodeIgniter\Database\Migration;
class AddItems extends Migration
{
public function up()
{
$this->forge->addField([
'id' => [
'type' => 'INT',
'constraint' => 5,
'unsigned' => true,
'auto_increment' => true,
],
'item_name' => [
'type' => 'VARCHAR',
'constraint' => 50,
'null' => false
],
'priority' => [
'type' => 'INT',
'constraint' => 5,
'null' => false,
'default' => 0
],
'status' => [
'type' => 'ENUM',
'constraint' => ['1', '0'],
'default' => '1',
]
]);
$this->forge->addPrimaryKey('id');
$this->forge->createTable('items');
}
public function down()
{
$this->forge->dropTable('items');
}
}
Далее, нам нужно создать таблицу в базе данных.
$ php spark migrate
Эта команда создаст таблицу - элементы внутри базы данных.
Давайте вставим некоторые тестовые данные в эту таблицу.
Выполните этот sql-запрос к базе данных для получения тестовых данных.
INSERT INTO `items` (`id`, `item_name`, `priority`, `status`) VALUES
(1, 'Product 1', 0, '1'),
(2, 'Product 2', 0, '1'),
(3, 'Product 3', 0, '1'),
(4, 'Product 4', 0, '1'),
(5, 'Product 5', 0, '1');
Создайте модель и контроллер
Далее, нам нужно создать модель и файл контроллера.
Файл модели
$ php spark make:model Item
Этот код, создаст модель Item.php внутри папки /app/Models.
Откройте файл Item.php и запишите в него данный код.
<?php
namespace App\Models;
use CodeIgniter\Model;
class Item extends Model
{
protected $DBGroup = 'default';
protected $table = 'items';
protected $primaryKey = 'id';
protected $useAutoIncrement = true;
protected $insertID = 0;
protected $returnType = 'array';
protected $useSoftDelete = false;
protected $protectFields = true;
protected $allowedFields = ['item_name', 'priority', 'status'];
// Dates
protected $useTimestamps = false;
protected $dateFormat = 'datetime';
protected $createdField = 'created_at';
protected $updatedField = 'updated_at';
protected $deletedField = 'deleted_at';
// Validation
protected $validationRules = [];
protected $validationmessages = [];
protected $skipValidation = false;
protected $cleanValidationRules = true;
// Callbacks
protected $allowCallbacks = true;
protected $beforeInsert = [];
protected $afterInsert = [];
protected $beforeUpdate = [];
protected $afterUpdate = [];
protected $beforeFind = [];
protected $afterFind = [];
protected $beforeDelete = [];
protected $afterDelete = [];
}
Файл контроллера
Чтобы создать контроллер, выполните эту команду.
$ php spark make:controller ItemController
Эта команда создаст ItemController.php внутри папки /app/Controllers.
Откройте ItemController.php и напишите в нем данный код.
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
use App\Models\Item;
class ItemController extends BaseController
{
public function index()
{
$itemsObj = new Item();
$items = $itemsObj->orderBy('priority', 'ASC')->findAll();
return view("items", compact("items"));
}
public function updateOrder()
{
$input = $this->request->getVar();
if (isset($input["order"])) {
$order = explode(",", $input["order"]);
for ($i = 0; $i < count($order); $i++) {
$itemsObj = new Item();
$data = [
'priority' => $i
];
$itemsObj->update($order[$i], $data);
}
return json_encode([
"status" => true,
"message" => "Order updated"
]);
}
}
}
Создайте файл шаблона
Перейдите в папку /app/Views и создайте файл с именем items.php
Откройте файл items.php и запишите в него код:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CodeIgniter 4 Drag and Drop Reorder Items with jQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<style>
#sortable {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 60%;
}
#sortable li {
margin: 0 3px 3px 3px;
padding: 0.4em;
padding-left: 1.5em;
font-size: 1.4em;
height: 18px;
}
#sortable li span {
position: absolute;
margin-left: -1.3em;
}
</style>
</head>
<body>
<h4 style="text-align: center;">CodeIgniter 4 Drag and Drop Reorder Items with jQuery</h4>
<ul id="sortable">
<?php
if (count($items) > 0) {
foreach ($items as $row) {
?>
<li class="ui-state-default" id="<?php echo $row['id']; ?>"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><?php echo $row['item_name']; ?></li>
<?php
}
}
?>
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$(function() {
$("#sortable").sortable({
update: function(event, ui) {
updateOrder();
}
});
});
function updateOrder() {
var item_order = new Array();
$('#sortable li').each(function() {
item_order.push($(this).attr("id"));
});
var order_string = 'order=' + item_order;
$.ajax({
type: "POST",
url: "<?php echo base_url('update-order') ?>",
dаta: order_string,
cache: false,
success: function(data) {}
});
}
</script>
</body>
</html>
Добавьте маршрут
Откройте файл Routes.php из папки /app/Config и добавьте в него эти маршруты.
$routes->get("items", "ItemController::index");
$routes->post("update-order", "ItemController::updateOrder");
Тестирование
Откройте терминал в проекте и запустите сервер разработки с помощью команды:
$ php spark serve
URL: http://localhost:8080/items
Список элементов перед сортировкой:
Перетаскивание и сортировка элементов:
Мы надеемся, что это руководство помогло вам изучить CodeIgniter 4: Перетаскивание и изменение порядка элементов с помощью jQuery очень подробно.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.