Teknik Membuat Menu Dinamis dengan PHP
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!
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
<!DOCTYPE html>
<html>
<head>
<title>CSS Menu Dinamis dengan PHP</title>
<style>
.menubar{
display:block;
height:38px;
background:#000
}
.menubar ul{
margin:0;
padding:0;
list-style:none;
z-index:99999;
}
.menu a,.menu a:visited{
display:block;
text-decoration:none;
padding:10px 18px;
position:relative;
z-index:99999;
}
.menu{
vertical-align:top;
display:inline-block;
}
.menu li{
position:relative;
z-index:99999;
}
.menu>li{
float:left;
}
.menu li>a,.menu li>a:visited{
color:#fff;
font-weight:bold;
background: #00009e;
}
.menu>li>a:hover{
background: #008800;
}
.menu li li>a:hover{
color:#fff;
background:#00009e;
}
.menu li li a{
background: #008800;
color:#fff;
}
.menu li:hover li a{
font-weight:normal;
}
.menu ul{
position:absolute;
white-space:nowrap;
z-index:99999;
left:-99999em;
margin-top:0px;
}
.menu>li:hover>ul{
left:auto;
min-width:100%;
}
body{font-family:arial;font-size:13px;color:#444;background:#eee}
.wrapper{width:900px;margin:auto}
</style>
</head>
<body>
<div class="wrapper">
<div class="menubar">
<ul class="menu">
<?php
// koneksi
$mysqli = new mysqli('localhost', 'root', '', 'mydb'); // ambil menu utama
$res = $mysqli->query("SELECT idmenu,menu,link from test_menu where sub='0'");
while($menu = $res->fetch_array(MYSQLI_ASSOC)){
// tampilkan sub menu kalau ada
$res2 = $mysqli->query("SELECT idmenu,menu,link from menu where sub='$menu[idmenu]'");
$num = $res2->num_rows;
echo " <li><a href=\"$menu[link]\">$menu[menu]</a>";
if($num>0){
echo "\n <ul>\n";
while($sub = $res2->fetch_array(MYSQLI_ASSOC)){
echo " <li><a href=\"$sub[link]\">$sub[menu]</a></li>\n";
}
$res2->free_result();
echo " </ul>";
}
echo "</li>\n";
}
$res->free_result();
?>
</ul>
</div>
</body>
</body>
</html>
Oke segitu saja untuk tutorial kali ini, untuk hasil akhirnya silahakn bisa dilihat di mnu berikut