Home Unlabelled membuat menu dengan php

membuat menu dengan php

5:19 AM
Selamat malam sahabat AJN. Sekarang saya akan berbagi mengenai teknik bikin menu dinamis menggunakan PHP. Menu yang akan saya bahas ini adalah menu 2 level, namun bila ingin dikembangkan lagi menjadi multilevel bisa saja. Oke, trik kali ini akan saya coba sambungkan dengan tutorial dulu sekali di pembahasan seputar CSS, tepatnya pada materi Membuat Dropdown Menu dengan CSS. Oke langsung saja kita ke pembahasannya.
Yang pertama kita butuhkan adalah rancangan database, karena menu-menu yang kita buat ini disimpan di database supaya nanti kita bisa menambah, pengubah, menghapus serta mengaktifkan dan menonaktifkannya. Struktur tabel yang kita butuhkan untuk pembuatan menu ini kurang lebih memerlukan field-field seperti di bawah ini. Silahkan Create tabel dulu di phpMyAdmin dengan skema seperti berikut!
Struktur Menu Dinamis
Sebagai bahan contoh, silahkan insert secara manua ke tabel menu yang baru dibuat di atas menu-menu berikut!
idmenu menu link sub aktif
1 Home index.php 0 1
2 Menu 1 # 0 1
3 Menu 2 mmn 0 1
4 Menu 3 #menu3 0 1
5 Menu 4 #menu4 0 1
6 Sub Menu 1.1 #1.1 2 1
7 Sub Menu 1.2 #1.2 2 1
8 Sub Menu 1.3 #1.3 2 1
9 Sub Menu 2.1 #2.1 3 1
10 Sub Menu 2.2 #2.2 3 1
Setelah kita mempunyai struktur dan data menu di tabel menu, lakukanlah query untuk menampilkan menu-menu yang ada dengan script di bawah ini. Oya script ini diambil dari source yang membahas tutorial membuat dropdown menu yang telah saya sebutkan di atas, namun pada tampilan list menunya (UL) saya modifikasi dengan menampilkan data dari database
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <title>CSS Menu Dinamis dengan PHP</title>
    5. 

  5. <style>
    6. 

  6. .menubar{
    7. 

  7.   display:block;
    8. 

  8.   height:38px;
    9. 

  9.   background:#000
    10. 

  10. }
    11. 

  11. .menubar ul{
    12. 

  12.   margin:0;
    13. 

  13.   padding:0;
    14. 

  14.   list-style:none;
    15. 

  15.   z-index:99999;
    16. 

  16. }
    17. 

  17. .menu a,.menu a:visited{
    18. 

  18.   display:block;
    19. 

  19.   text-decoration:none;
    20. 

  20.   padding:10px 18px;
    21. 

  21.   position:relative;
    22. 

  22.   z-index:99999;
    23. 

  23. }
    24. 

  24. .menu{
    25. 

  25.   vertical-align:top;
    26. 

  26.   display:inline-block;
    27. 

  27. }
    28. 

  28. .menu li{
    29. 

  29.   position:relative;
    30. 

  30.   z-index:99999;
    31. 

  31. }
    32. 

  32.   .menu>li{
    33. 

  33.   float:left;
    34. 

  34. }
    35. 

  35. .menu li>a,.menu li>a:visited{
    36. 

  36.   color:#fff;
    37. 

  37.   font-weight:bold;
    38. 

  38.   background: #00009e;
    39. 

  39. }
    40. 

  40.   .menu>li>a:hover{
    41. 

  41.   background: #008800;
    42. 

  42. }
    43. 

  43.   .menu li li>a:hover{
    44. 

  44.   color:#fff;
    45. 

  45.   background:#00009e;
    46. 

  46. }
    47. 

  47.   .menu li li a{
    48. 

  48.   background: #008800;
    49. 

  49.   color:#fff;
    50. 

  50. }
    51. 

  51.   .menu li:hover li a{
    52. 

  52.   font-weight:normal;
    53. 

  53. }
    54. 

  54. .menu ul{
    55. 

  55.   position:absolute;
    56. 

  56.   white-space:nowrap;
    57. 

  57.   z-index:99999;
    58. 

  58.   left:-99999em;
    59. 

  59.   margin-top:0px;
    60. 

  60. }
    61. 

  61.   .menu>li:hover>ul{
    62. 

  62.   left:auto;
    63. 

  63.   min-width:100%;
    64. 

  64. }
    65. 

  65. body{font-family:arial;font-size:13px;color:#444;background:#eee}
    66. 

  66. .wrapper{width:900px;margin:auto}
    67. 

  67. </style>
    68. 

  68. </head>
    69. 

  69. <body>
    70. 

  70. <div class="wrapper">
    71. 

  71. <div class="menubar">
    72. 

  72. <ul class="menu">
    73. 

  73. <?php
    74. 

  74. // koneksi
    75. 

  75. $mysqli = new mysqli('localhost', 'root', '', 'mydb');
    76. 

  76. // ambil menu utama
    77. 

  77. $res = $mysqli->query("SELECT idmenu,menu,link from test_menu where sub='0'");
    78. 

  78. while($menu = $res->fetch_array(MYSQLI_ASSOC)){
    79. 

  79.   // tampilkan sub menu kalau ada
    80. 

  80.   $res2 = $mysqli->query("SELECT idmenu,menu,link from menu where sub='$menu[idmenu]'");
    81. 

  81.   $num = $res2->num_rows;
    82. 

  82.   echo " <li><a href=\"$menu[link]\">$menu[menu]</a>";
    83. 

  83.   if($num>0){
    84. 

  84.   echo "\n <ul>\n";
    85. 

  85.   while($sub = $res2->fetch_array(MYSQLI_ASSOC)){
    86. 

  86.     echo "  <li><a href=\"$sub[link]\">$sub[menu]</a></li>\n";
    87. 

  87.   }
    88. 

  88.   $res2->free_result();
    89. 

  89.   echo " </ul>";
    90. 

  90.   }
    91. 

  91.   echo "</li>\n";
    92. 

  92. }
    93. 

  93. $res->free_result();
    94. 

  94. ?>
    95. 

  95. </ul>
    96. 

  96. </div>
    97. 

  97. </body>
    98. 

  98. </body>
    99. 

  99. </html> 
    100.
Tags :

No comments:

Subscribe to: Post Comments ( Atom )