CodeIgniter 4: Перетаскивание и изменение порядка элементов с помощью jQuery

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