Sắp xếp menu với jquery softable, PHP và MySql

Bài này mình sẽ hướng dẫn mọi người sử dụng softable để sắp xếp lại thứ tự hiển thị danh sách menu.

1, Chuẩn bị & demo.

-Để thực hiện được chức năng này thì mọi người cần phải có kiến thức cơ bản về Jquery, PHP& MySql.

-Sau bài này chúng ta sẽ xây dựng ứng dụng như sau:

2, Xây dựng ứng dụng.

Xây dựng database

-Đầu tiên chúng ta cần xây dựng cấu trúc database.

CREATE TABLE `tb_menu` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `slug` varchar(255) NOT NULL,
  `numbers` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-Tiếp đó chúng ta sẽ thêm một vài dữ liệu mẫu vào để demo.

INSERT INTO `tb_menu` (`id`, `name`, `slug`, `numbers`) VALUES
(1, 'Trang chủ', '/', 4),
(2, 'Lập trình web', 'lap-trinh-web', 3),
(3, 'lập trình mobile', 'lap-trinh-mobile', 2),
(4, 'Sản phẩm', 'san-pham', 1);

-Như vậy là phần database đã xong.

Xây dựng code.

-Đầu tiên mình sẽ cấu hình kết nối đến database trong file config.php:

<?php 
//cấu hình kết nối
$conn = mysqli_connect('localhost','root','','menu_db');
//xét kiểu ký tự
mysqli_set_charset($conn,'utf8');

-Tiếp đó file index.php mình sẽ dùng để nhận dữ liệu và hiển thị dữ liệu ra ngoài màn hình.

<?php
//nhúng file config
require_once 'config.php';
//tạo biến chứa dữ liệu
$data = [];
//truy vấn và đồng thởi kiểm tra truy vấn
if ($query = mysqli_query($conn, 'SELECT id,name FROM tb_menu ORDER BY numbers ASC')) {
    //đổ dữ liệu ra biến data
    while ($row = mysqli_fetch_array($query)) {
        $data[] = $row;
    }
}
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Sortable - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        #sortable {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 60%;
        }

        #sortable li {
            margin: 0 3px 3px 3px;
            padding: 5px;
            padding-left: 15px;
            height: 30px;
        }

        #sortable li span {
            position: absolute;
            margin-left: -15px;
            margin-top: 2px
        }
    </style>
    <script ></script>
    <script ></script>
    <script ></script>
    <script>
        $(function () {
            $("#sortable").sortable();
            $("#sortable").disableSelection();
        });
    </script>
</head>
<body>
<div class="container">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">Sắp xếp menu</h3>
        </div>
        <div class="panel-body">
            <ul id="sortable">
                <?php
                //lặp và đổ dữ liệu
                foreach ($data as $value) {
                    ?>
                    <li class="ui-state-default" data-id="<?php echo $value['id']; ?>"><span
                                class="ui-icon ui-icon-arrowthick-2-n-s"></span><?php echo $value['name']; ?></li>
                    <?php
                }
                ?>
            </ul>
            <button type="buton" class="btn btn-success" onclick="get()">Get</button>
        </div>
    </div>
</div>

<script>
    function get() {
        //tạo biến data
        var data = [];
        //lặp các thẻ li và lấy ra data-id
        $('li').each(function () {
            data.push($(this).attr('data-id'));
        })
        //gửi ajax
        $.ajax({
            url: 'update.php',
            dataType: 'text',
            cache: false,
            data: {data: data.join('-')}, //data có dạng: a-b-c-d                       
            method: 'post',
            success: function (res) { //nếu thành công thì reload lại trang
                location.reload();
            }
        });
    }
</script>

</body>
</html>

-Tiếp đó chúng ta xây dựng trang update.php để nhận và xử lý dữ liệu.

<?php
// nhúng file config
require_once 'config.php';
// Kiểm tra xem có biến post data được truyền vào không 
if (isset($_POST['data'])) {
    // tách chuỗi data ra thành mảng
    $data = explode('-', $_POST['data']);
    // tạo biến numbers
    $numbers = 1;
    // lặp mảng data
    for ($i = 0; $i < count($data); $i++) {
        // tiến hành upload dữ liệu
        mysqli_query($conn, "UPDATE tb_menu SET numbers = $numbers Where id = $data[$i] ");
        // tăng biến number lên 1 giá trị
        $numbers++;
    }
} else { // nếu không phải phương thức post dùng chương trình và in ra thông báo.
    die('lock');
}

-Chỉ cần như thế là chúng ta đã xây dựng được ứng dụng sắp xếp menu đơn giản rồi.

3, Các thư viện có sẵn.

-Phía trên mình chỉ demo một ứng dụng đơn giản đối với sắp xếp menu đơn cấp thôi, nhưng nếu dự án của bạn là menu đa cấp thì sẽ không sử dụng được. Hơn nữa trên mạng cũng có rất nhiều các libraries miễn phí hỗ trợ chúng ta chức năng này (hỗ trợ cả menu đa cấp). Và mình xin liệt kê cho các bạn 2 thư viện sau mà mình cảm thấy là ok nhất:

Jquery Softable List (hệ thống của mình đang xài lib này).
Jquery Softable

4, Lời kết.

-Phần này mình chỉ demo đơn giản để cho các bạn có thể hiểu được luồng cũng như nguyên lý của thuật toán thôi, còn các bạn có thể tùy chỉnh, nâng cấp sao cho phù hợp với dự án của bạn.

Chúc các bạn thành công!