Trong bài viết trước, chúng ta đã tạo cấu trúc cơ sở dữ liệu, xây dựng giao diện hiển thị danh sách menu và lớp Menu để kết nối và lấy dữ liệu. Tuy nhiên, chúng ta chưa hiển thị danh sách menu dưới dạng đệ quy. Trong bài viết này, tôi sẽ hướng dẫn các bạn cách sử dụng đệ quy để hiển thị danh sách menu.
Trước khi tiếp tục, hãy nhớ đọc bài đệ quy menu với PHP và MySQL – phần 1 để hiểu rõ hơn về khái niệm đệ quy menu.
Contents
Trong bài trước, chúng ta đã tạo file danhsach.php và viết code JavaScript và CSS trực tiếp trong file đó. Tuy nhiên, điều này làm cho file trở nên khó đọc. Do đó, tôi sẽ tách riêng file CSS và import nó vào. Vì vậy, những đoạn code tôi hiển thị không bao gồm đoạn mã CSS nữa. Tôi cũng xóa các đoạn mã HTML của từng menu, chỉ giữ lại 1 đoạn để lặp và hiển thị.
Nội dung của file danhsach.php như sau:
<!-- Đoạn code HTML -->
Trong mỗi ô, tôi sẽ đặt một đoạn code {id_hien_tai}. Mục đích là trong quá trình lặp, tôi sẽ điền id của menu hiện tại vào để khi nhấp vào nút EDIT, tôi có thể lấy đúng input của menu đó để lưu dữ liệu. Ngoài ra, tôi thêm một class có tên là menu-save vào nút LƯU, để bắt sự kiện click và xử lý.
Đơn giản phải không? Bây giờ chúng ta sẽ tiến hành xây dựng hàm đệ quy PHP để hiển thị danh sách menu.
1. Xây dựng hàm đệ quy PHP hiển thị danh sách
Trước tiên, bạn hãy tạo file dequy.php và copy nội dung bên dưới vào:
<!-- Đoạn code PHP -->
Trong hàm này, tôi đã lặp qua thẻ UL trong file danhsach.php, và mỗi lần lặp, tôi đã thay giá trị {id_hien_tai} thành $item[‘menu_id’].
Bây giờ, bạn hãy sửa nội dung file danhsach.php như sau:
<!-- Đoạn code PHP -->
Đơn giản không? Đầu file, tôi lấy danh sách menu và import thư viện đệ quy. Giữa file, tôi xóa đoạn mã HTML hiển thị menu và thay vào đó là gọi hàm đệ quy menu.
Hãy thêm một số dữ liệu để hiển thị menu. Copy và chạy trong phpmyadmin.
Sau khi chạy, giao diện sẽ như hình dưới đây:
Hình ảnh
3. Kết luận
Như bạn đã thấy, trong bài viết này, tôi chỉ hiển thị danh sách menu theo đệ quy và điền đầy đủ thông số vào các input. Tuy nhiên, tôi chưa xử lý sự kiện click nút LƯU và chưa hiển thị danh sách MENU PARENT để người dùng lựa chọn. Những vấn đề này sẽ được tôi giải quyết trong bài viết tiếp theo. Mong rằng các bạn sẽ tiếp tục theo dõi.