PHP TUTORIALS
Hướng dẫn tạo domain ảo tại localhost với XAMPP trên Window Có gì mới trong PHP 8 (Tính năng, Cải tiến và Trình biên dịch JIT) Hướng dẫn viết ứng dụng kiểm tra năm sinh theo âm lịch bằng PHP Xử lý realtime trong PHP sử dụng pusher Hướng dẫn gửi mail trong PHP với PHPMailer Bóc tách dữ liệu từ trang khác bằng PHP Simple HTML DOM Parser Cách sửa lỗi hình ảnh khi đăng bài viết lên Facebook Hướng dẫn tạo thông báo realtime với pushcrew Kích thước chuẩn và cách làm FavIcon icon Tìm hiểu bản chất vòng lặp foreach trong php Những vấn đề nâng cao kỹ năng lập trình trong php Sử Dụng Vòng Lặp Xuất Dữ Liệu Bảng Tính Lương Tìm hiểu thuật toán phân trang trong php Giới hạn số trang trong thuật toán phân trang Bài 01: Đệ quy menu đa cấp với php và mysql - phần 1 Bài 02: Đệ quy menu đa cấp với php và mysql - phần 2 Tích hợp bộ search google vào website Nên dùng count() hay sizeof() để đếm số phần tử của mảng Bài 01: Lấy dữ liệu từ mysql lưu vào file excel với PHPExcel Tạo slug tự động bằng JavaScript và PHP RSS là gì? Cách Tạo RSS cho Website PHP CMS là gì? Các CMS phổ biến hiện nay (update 2021) Web động là gì? Web tĩnh là gì? Chặn referrer từ website simple-share-buttons.com Bảng mã ASCII chuẩn các hệ nhị phân - thập phân - thập lục phân Hướng dẫn tạo Facebook App để lấy App ID và Secret Key Mối liên hệ giữa HTML - PHP - MYSQL Tự động post bài viết lên tường với hootsuite.com Kiểm tra người dùng đã đăng nhập hay chưa bằng PHP Lấy video kênh Youtube mới nhất bằng jQuery và Youtube API V3 Đệ quy chuyên mục đa cấp trong PHP toàn tập Font Awesome là gì? Cách sử dụng Font Awesome Tích hợp đăng nhập Google vào Website Thuật toán phân trang với PHP và MySQL Cài đặt LAMP trên Fedora
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Bài 01: Đệ quy menu đa cấp với php và mysql - phần 1

Có lẽ ai cũng biết với từ khóa xây dựng menu đa cấp đệ quy vơí php và mysql rồi nhỉ :D. Chuyện là thế này, lúc tối cảm thấy không biết viết tuts gì, cảm thấy chán nản, nhưng chợt nghĩ ra là mình chưa có tuts làm đệ quy menu đa cấp nên hôm nay mình sẽ làm chủ đề này. Vì bài hơi dài nên mình chia ra từng phần nhỏ, nhằm giúp các bạn hiểu rõ vấn đề hơn. Và tôi cũng đề nghị bạn nên xem bài  đệ quy trong php trước nhé. Giờ thì bắt đầu thôi

Thông báo: Serie này đã được biên soạn và quay video nên bạn hãy xem video để dễ hình dung hơn. Xem tại đây.

1. Xây dựng database menu đa cấp

Công việc đầu tiên mà bạn phải làm đó là tạo một database và chạy đoạn code dưới đây:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

CREATE TABLE IF NOT EXISTS `menu` (
  `menu_id` int(11) NOT NULL AUTO_INCREMENT,
  `menu_title` varchar(255) DEFAULT NULL,
  `menu_link` varchar(500) DEFAULT NULL,
  `menu_parent_id` int(11) DEFAULT NULL,
  PRIMARY KEY (`menu_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

2. Xây dựng trang HTML hiển thị danh sách menu đệ quy đa cấp

Sau khi có database thì ta sẽ tiến hành xây dựng một trang HTML hiển thị danh sách menu đa cấp và có sửa trực tiếp luôn. Trong phần này tôi có sử dụng CSS và jQuery nhằm giúp menu hoạt động đẹp hơn.

Bạn tạo trang danhsach.php và copy nội dung này vào: Xem demo

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            *{margin:0; padding:0}
            li{list-style: none}
            #menu_wrapper{
                width: 500px;
                margin: 0px auto;
                margin-top: 100px;
                border: solid 1px gray;
                padding: 50px;
            }
            
            
            .button{padding: 5px 10px; color: white; background: blue; border:none; cursor: pointer}
            #menu_wrapper ul ul{margin-left: 20px;}
            #menu_wrapper ul li{margin-top: 10px;}
            
            #menu_wrapper ul li a{
                height: 30px;
                color: blue;
                font-weight: bold;
                display: block;
                line-height: 30px;
                border: solid 1px gray;
                background: #FAFAFA;
                text-decoration: none;
                padding-left: 10px; 
            }
            
            #menu_wrapper ul li div{
                border: solid 1px gray;
                border-top: 0px;
                background: #FAFAFA;
                display: none
            }
            
            #menu_wrapper ul li div tr td{
                padding: 10px 20px;
            }
            input, select{
                border: solid 1px gray;
                padding: 5px 10px;
            }
        </style>
        
         <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
         
         <script language="javascript">
             $(document).ready(function(){
                $('#menu_wrapper ul div').hide();
                $('#menu_wrapper ul li a').click(function(){
                    var tmp = $(this).next('div');
                    
                    if ($(tmp).is(':visible')){
                        $(tmp).hide();
                    }
                    else{
                        $(tmp).show();
                    }
                    return false;
                }); 
             });
         </script>
    </head>
    <body>
        <div id="menu_wrapper">
            <input type="button" class="button" value="Thêm"/> <br/> <br/>
            <hr/><br/>
            <ul>
                <li>
                    <a href="">Nội dung menu</a>
                    <div>
                        <table border="0">
                            <tr>
                                <td>Title</td>
                                <td><input id="" name="" value="" /></td>
                            </tr>
                            <tr>
                                <td>Link</td>
                                <td><input id="" name="" value="" /></td>
                            </tr>
                            <tr>
                                <td>Parent</td>
                                <td>
                                    <select>
                                        <option>-TOP-</option>
                                    </select>
                                    <input type="button" name="" class="button" value="Lưu" />
                                </td>
                            </tr>
                        </table>
                    </div>
                    <ul>
                        <li>
                            <a href="">Nội dung menu</a>
                            <div>
                                <table border="0">
                                    <tr>
                                        <td>Title</td>
                                        <td><input id="" name="" value="" /></td>
                                    </tr>
                                    <tr>
                                        <td>Link</td>
                                        <td><input id="" name="" value="" /></td>
                                    </tr>
                                    <tr>
                                        <td>Parent</td>
                                        <td>
                                            <select>
                                                <option>-TOP-</option>
                                            </select>
                                            <input type="button" name="" class="button" value="Lưu" />
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </li>
                        <li>
                            <a href="">Nội dung menu</a>
                            <div>
                                <table border="0">
                                    <tr>
                                        <td>Title</td>
                                        <td><input id="" name="" value="" /></td>
                                    </tr>
                                    <tr>
                                        <td>Link</td>
                                        <td><input id="" name="" value="" /></td>
                                    </tr>
                                    <tr>
                                        <td>Parent</td>
                                        <td>
                                            <select>
                                                <option>-TOP-</option>
                                            </select>
                                            <input type="button" name="" class="button" value="Lưu" />
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="">Nội dung menu</a>
                    <div>
                        <table border="0">
                            <tr>
                                <td>Title</td>
                                <td><input id="" name="" value="" /></td>
                            </tr>
                            <tr>
                                <td>Link</td>
                                <td><input id="" name="" value="" /></td>
                            </tr>
                            <tr>
                                <td>Parent</td>
                                <td>
                                    <select>
                                        <option>-TOP-</option>
                                    </select>
                                    <input type="button" name="" class="button" value="Lưu" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>
Công việc đầu tiên ta sẽ tìm hiểu mục đích của form này đã nhé. Chạy file này nên bạn sẽ thấy ta có giao diện nhu sau:

menu đa cấp

Tôi muốn khi chạy lên trang hiển thị danh sách menu đa cấp  sẽ có dạng như hình vẽ, khi click vào một menu bất kỳ sẽ show ra những thông số chỉnh sửa và một button lưu. Khi click vào button lưu sẽ lưu lại những thông số đó tương ứng với menu đó. Rất đơn giản nhỉ.

3. Xây dựng lớp Menu để lấy dữ liệu

Ở bước này ta se xây dựng một lớp Menu có nhiệm vụ kết nối vào MYSQL, lấy dữ liệu của menu đa cấp và đóng kết nối. Ở những bài sau ta sẽ viết những hàm show menu trực tiếp vào trong lớp này luôn.

Bạn tạo file menu.php với nội dung như sau:

class Menu {

    private $__conn = null;
    
    // Kết nối
    function connect(){
        $this->__conn  = mysqli_connect('localhost', 'root', 'vertrigo', 'test');
    }
    
    // Đóng kết nối
    function close(){
        mysqli_close($this->__conn);
    }
    
    // Lấy danh sách Menu trả về một mảng
    function getList()
    {
        $this->connect();
        $result = array();
        
        $query = mysqli_query($this->__conn, 'select * from menu');
        
        if ($query){
            while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
                $result[] = $row;
            }
        }
        $this->close();
        return $result;
    }
}

4. Lời kết

Ở bài đầu tiên này tôi chỉ làm những cái đơn giản, vì tôi muốn bạn hiểu rõ mục đích của tôi, như vậy ở những bài tiếp theo mới dễ dàng trình bày được. Trong bài này bạn phải nắm được form hiển thị menu đệ quy đa cấp, table database menu và lớp Menu lấy dữ liệu từ MYSQL. Bài tiếp theo ta sẽ show menu ra.

 

Cùng chuyên mục:

Hàm key_exists() trong PHP

Hàm key_exists() trong PHP

Cách sử dụng key_exists() trong PHP

Hàm mysqli_fetch_row() trong PHP

Hàm mysqli_fetch_row() trong PHP

Cách sử dụng mysqli_fetch_row() trong PHP

Hàm end() trong PHP

Hàm end() trong PHP

Cách sử dụng end() trong PHP

Hàm mysqli_field_count() trong PHP

Hàm mysqli_field_count() trong PHP

Cách sử dụng mysqli_field_count() trong PHP

Hàm count() trong PHP

Hàm count() trong PHP

Cách sử dụng count() trong PHP

Hàm mysqli_field_seek() trong PHP

Hàm mysqli_field_seek() trong PHP

Cách sử dụng mysqli_field_seek() trong PHP

Hàm compact() trong PHP

Hàm compact() trong PHP

Cách sử dụng compact() trong PHP

Hàm mysqli_field_tell() trong PHP

Hàm mysqli_field_tell() trong PHP

Cách sử dụng mysqli_field_tell() trong PHP

Hàm array_values() trong PHP

Hàm array_values() trong PHP

Cách sử dụng array_values() trong PHP

Hàm mysqli_free_result() trong PHP

Hàm mysqli_free_result() trong PHP

Cách sử dụng mysqli_free_result() trong PHP

Hàm array_unshift() trong PHP

Hàm array_unshift() trong PHP

Cách sử dụng array_unshift() trong PHP

Hàm mysqli_get_charset() trong PHP

Hàm mysqli_get_charset() trong PHP

Cách sử dụng mysqli_get_charset() trong PHP

Hàm array_shift() trong PHP

Hàm array_shift() trong PHP

Cách sử dụng array_shift() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Cách sử dụng mysqli_get_client_stats() trong PHP

Hàm array_unique() trong PHP

Hàm array_unique() trong PHP

Cách sử dụng array_unique() trong PHP

Hàm mysqli_get_client_version() trong PHP

Hàm mysqli_get_client_version() trong PHP

Cách sử dụng mysqli_get_client_version() trong PHP

Hàm array_uintesect() trong PHP

Hàm array_uintesect() trong PHP

Cách sử dụng array_uintesect() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Cách sử dụng mysqli_get_connection_stats() trong PHP

Hàm array_sum() trong PHP

Hàm array_sum() trong PHP

Cách sử dụng array_sum() trong PHP

Hàm mysqli_get_host_info() trong PHP

Hàm mysqli_get_host_info() trong PHP

Cách sử dụng mysqli_get_host_info() trong PHP

Top