VANHIEP.NET - Làm web giá rẻ - Thiết Kế Website - Thiết Kế Ứng Dụng Mobile
Quản lý danh mục có chức năng kéo thả trong dự án laravel

Quản lý danh mục có chức năng kéo thả trong dự án laravel

Quản lý danh mục có chức năng kéo thả trong dự án laravel

 

Bước 1 : Cài đặt dự án laravel 

composer create-project laravel/laravel example-app

Bước 2 : Cài đặt thư viện laravel ui

composer require laravel/ui

 

Chạy tiếp lệnh sau 

php artisan ui bootstrap

 

Tiếp tục chạy 

npm install

 

Và chạy

npm run dev

 

Bước 3 : Cài đặt thư viện laravel nestedset

composer require kalnoy/nestedset

 

Bước 4 : Tạo bảng dữ liệu 

php artisan make:migration create_categories_table

Mở file migration vừa tạo khai báo các trường dữ liệu như hình

Quản lý danh mục có chức năng kéo thả trong dự án laravel

Bước 5 : Tạo file seeder khai báo dữ liệu mẫu cho ví dụ

php artisan make:seeder CategorySeeder

Mở file seeder vừa tạo trong thư mục database/seeders khai báo như sau

 Quản lý danh mục có chức năng kéo thả trong dự án laravel

Bước 6 : Tạo model cho ví dụ

php artisan make:model Category

Mở file model vửa tạo trong thư mục App\models khai báo như hình

Quản lý danh mục có chức năng kéo thả trong dự án laravel 

Bước 7 : Tạo controller xử lý cho ví dụ

php artisan make:controller CategoryController

Mở file controller vừa tạo trong thư mục App\Http\Controllers khai báo hàm index và hàm updateTree như hình

Quản lý danh mục có chức năng kéo thả trong dự án laravel

Bước 8 : Khai báo view cho ví dụ 

Tạo file index trong mục resources với nội dung như sau

Quản lý danh mục có chức năng kéo thả trong dự án laravel

Chú 2 chỗ đánh dẫu mũi tên đỏ, ta cần phải chèn thẻ meta token và thư viện nestable. Nội dung file gồm thẻ ol li nằm trong thẻ card. thẻ ol được tác ra file item và include vào lúc chạy vòng for, nội dung file item như sau

Quản lý danh mục có chức năng kéo thả trong dự án laravel

Bước 9 : Khai báo sự kiện khi người dùng kéo thả và gửi request lên serve để cập nhật dữ liệu

trong file index thêm đoạn js khai báo như hình

Quản lý danh mục có chức năng kéo thả trong dự án laravel

 

Bước 10 : Tạo route cho ví dụ

Quản lý danh mục có chức năng kéo thả trong dự án laravelMở file web trong thư mục routes khai báo như hình

 

Hoàn thành : Ta có ứng dụng demo như hình, lúc này chúng ta có thể kéo thả và tải lại trang thì đã lưu ví trí

Quản lý danh mục có chức năng kéo thả trong dự án laravel

Tải code

Chúc bạn thành công.

 

  • Lee Dong Chul TV Sáo Trúc

    Thư viện này rất hay