HƯỚNG DẪN TẠO MENU ĐỘNG 2 CẤP

 
[size=medium]Do nhiều bạn cũng hỏi về menu động 2 cấp! Mình sẽ hướng dẫn sơ về menu động cho các bạn tìm hiểu thêm nhé!
Menu động là gì? Thế nào là menu động? Có phải flash hay Jquery mới gọi là menu động?

Menu động là menu được tạo ra bằng CSS & HTML, menu này làm việc với CSDL, tức là bạn có thể thêm, xóa, hay sửa menu trong trang quản trị của mình mà không phải mở code HTML ra để edit! Và menu flash hay sửa dụng hiệu ứng jquery vẫn là menu tĩnh nếu không có sự tác động với PHP & MySQL!

Nói dài dòng tý, thực ra menu động cũng dễ làm thôi chẳng có gì ghê gớm cả, các bạn có thể xem ví dụ sau đây là hiểu thôi!

Đầu tiên các bạn tạo 1 mẫu menu CSS và HTML tùy ý mình, ở đây tôi đã tạo ra 1 mẫu đơn giản như sau:
HTML

<div class="content_menu">                        <ul>                            <li><a href="#"> Trang chủ </a></li>                        <li><a href="#"> Giới thiệu </a></li>                        <li><a href="#"> Đặt phòng </a>                                <ul>                                    <li><a href="#"> Phòng đơn </a></li>                                <li><a href="#"> Phòng đôi </a></li>                                <li><a href="#"> Phòng ba </a></li>                            </ul>                        </li>                        <li><a href="#"> Dịch vụ </a></li>                         <li><a href="#"> Tin tức </a></li>                         <li><a href="#"> Liên hệ </a></li>                                             </ul>       </div>  

CSS

.content_menu ul{padding-left:25px;padding-right:25px;}.content_menu li{line-height:35px;border-bottom: 1px solid #dfdfdf;}.content_menu li a{font-weight:bold;color:#045992;font-size:16px;}  

Như vậy là ta đã có 1 menu tĩnh 2 cấp đơn giản rồi!
Bước tiếp theo ta chuẩn bị CSDL để tiến hành tạo menu động:
Như các bạn đã biết 1 liên kết menu của chúng ta có dạng

<a title="Tiêu đề" target="_blank" href="lien_ket"> Tên hiển thị </a>  

Bạn tạo 1 trường menu gồm các thuộc tính sau:
Menu(idMenu,nameMenu,linkMenu,titleMenu,newPageMenu,isParent,parentId,order,isPublished)
+ idMenu: Tên định danh menu
+ nameMenu: Tên hiển thị liên kết
+ linkMenu: Liên kết menu
+ titleMenu: tiêu đề hiển thị
+ newPageMenu: "1" => mở trang mới khi click vào menu, "0" => ngược lại
+ isParent: "1" => là menu cha , "0" => là menu con
+ parentId: ID của menu cha, nếu là menu con là NULL
+ order: vị trí sắp xếp
+ isPublished: "1" => cho phép hiển thị "0" => ngược lại

Để tiết kiệm thời gian, tôi tạo 1 mẫu menu bên dưới, các bạn vào PHPMyAdmin tạo database mới xong vào tag SQL và paste đoạn mã bên dưới là ta đã có dữ liệu cơ bản để tiến hành

CREATE TABLE IF NOT EXISTS `menu` (  `idMenu` int(11) NOT NULL auto_increment,  `nameMenu` varchar(50) character set utf8 NOT NULL,  `linkMenu` varchar(50) character set utf8 NOT NULL,  `titleMenu` varchar(50) character set utf8 NOT NULL,  `newPageMenu` int(11) NOT NULL default '0',  `isParent` int(11) NOT NULL default '1',  `parentId` int(11) default '0',  `order` int(11),  `isPublished` int(11) NOT NULL default '1',  PRIMARY KEY  (`idMenu`)) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;  
---- Dumping data for table `menu`--  

1. INSERT INTO `menu` (`idMenu`, `nameMenu`, `linkMenu`, `titleMenu`, `newPageMenu`, `isParent`, `parentId`,`order`, `isPublished`) VALUES(1, 'Trang chủ', 'index.php', 'Trang chủ', 0, 1, 0, 1, 1),(2, 'Giới thiệu', 'index.php?page=gioithieu', 'Giới thiệu', 0, 1, 0, 2, 1),(3, 'Dịch vụ', 'index.php?page=dichvu', 'Dịch vụ', 0, 1, 0, 3, 1),(4, 'Tin tức', 'index.php?page=tintuc', 'Tin tức', 0, 1, 0, 4,  1),(5, 'Liên hệ', 'index.php?page=lienhe', 'Liên hệ', 0, 1, 0, 5, 1),(6, 'Công ti', 'index.php?page=gioithieu&about=congti', 'Công ti', 0, 0, 2, 1, 1),(7, 'Sản phẩm', 'index.php?page=gioithieu&about=sanpham', 'Sản phẩm', 0, 0, 2, 2, 1),(8, 'Du lịch', 'index.php?page=dichvu&pro=dulich', 'Du lịch', 0, 0, 3, 1, 1),(9, 'Nhà hàng', 'index.php?page=dichvu&pro=nhahang', 'Nhà hàng', 0, 0, 3, 2, 1);  

OK! Bây giờ ta tiến hành tạo kết nối CSDL và lặp menu động

mysql_connect("localhost","root","") or die("Không thể kết nối!");        mysql_select_db("fusuhotel") or die ("Không chọn được db!");        mysql_query("set names utf8");  

 

Ý tưởng của bài toán menu động 2 cấp là thế này:
+ Lặp tất cả menu cha (isParent == "1")
+ Mỗi lần lặp menu cha đó, ta kiểm tra xem menu này có menu con hay không (parentId == idMenu cha)

Như vậy bước đầu tiên ta: Lặp tất cả menu cha có isParent == "1" và cho phép hiển thị isPublished == "1" 
Và câu truy vấn sẽ là:

$queryParent = mysql_query("SELECT idMenu,nameMenu,linkMenu,titleMenu,newPageMenu FROM menu WHERE isPublished = '1' and isParent = '1' order by 'order' ASC ");  

<div class="content_menu">        <ul>           <?php                while($pr = mysql_fetch_assoc($queryParent))                {              ?>                <li>                     <a target="<?php echo ($pr['newPageMenu'] == "1") ? "_blank" : "_self"; ?>"                         title="<?php echo $pr['titleMenu']; ?>" href="<?php echo $pr['linkMenu']; ?>">                         <?php echo $pr['nameMenu']; ?></a>                </li>                    <?php                                                                } // end menu parent                ?>             </ul>      </div>  

Với đoạn code trên sẽ hiển thị tất cả menu cha được lặp từ CSDL

Bước tiếp theo ta sẽ lặp tất cả menu con của menu cha đó với câu truy vấn

$queryChild = mysql_query("SELECT idMenu,nameMenu,linkMenu,titleMenu,newPageMenu FROM menu                                                 WHERE isPublished = '1' and isParent = '0' and parentId = '".$pr['idMenu']."' order by 'order' ASC ");  

Với $pr['idMenu'] là id menu cha của nó trong quá trình lặp menu cha

Và đoạn code hoàn chỉnh là:

<?phpmysql_connect("localhost","root","vertrigo") or die("Không thể kết nối!");mysql_select_db("fusuhotel") or die ("Không chọn được db!");mysql_query("set names utf8");$queryParent = mysql_query("SELECT idMenu,nameMenu,linkMenu,titleMenu,newPageMenu                                          FROM menu WHERE isPublished = '1' and isParent = '1'  order by 'order' ASC ");        ?><div class="content_menu">   <ul>       <?php        while($pr = mysql_fetch_assoc($queryParent))        {        ?>          <li>             <a target="<?php echo ($pr['newPageMenu'] == "1") ? "_blank" : "_self"; ?>" title="<?php echo $pr['titleMenu']; ?>" href="<?php echo $pr['linkMenu']; ?>"> <?php echo $pr['nameMenu']; ?></a>          </li>       <?php             // Trong mỗi menu cha, ta lại tìm menu con để lặp          $queryChild = mysql_query("SELECT idMenu,nameMenu,linkMenu,titleMenu,newPageMenu FROM menu                                                 WHERE isPublished = '1' and isParent = '0' and parentId = '".$pr['idMenu']."' order by 'order' ASC ");        if(mysql_num_rows($queryChild) != 0)  // Đếm số menu con, nếu ko có menu thì không thực hiện lặp menu con        {                echo "<ul>";                while($ch = mysql_fetch_assoc($queryChild))                        {        ?>               <li>                <a target="<?php echo ($ch['newPageMenu'] == "1") ? "_blank" : "_self"; ?>"                                title="<?php echo $ch['titleMenu']; ?>" href="<?php echo $ch['linkMenu']; ?>"><?php echo $ch['nameMenu']; ?></a>               </li>        <?php                } // end menu children               echo "</ul>";        } // end if     } // end menu parent?>     </ul></div>  

Đây mới là phần hiển thị menu ở trang chủ, còn phần Thêm, Xóa, Sửa menu trong trang quản trị nữa. Các bạn viết 3 form đó như những bài tập khác thôi không khó đâu!

Tôi đã có ý tưởng như vậy, nếu các bạn quan tâm đến topic này, các bạn hãy giúp tôi làm 3 form thêm, xóa, sửa menu và post lên cùng xây dựng forum nhé, nói thật tôi viết Tutorial nhiều rồi mà cũng ngán quá, thấy các bạn không có tinh thần làm tôi cũng lười post! Mong các bạn tham gia nhiệt tình cho forum nhé! Cảm ơn các bạn!

Nguồn:  congthuongit.net