Membuat Navbar Menu Dinamis dengan Bootstrap, PHP dan MySQL. Kali ini bootstrap. Bootstrap merupakan front-end framework yang cukup populer saat ini, bagus dengan mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) sehingga dapat mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript yang siap pakai dan mudah untuk dikembangkan. Kali ini akan dijelaskan tutorial membuat menu navbar dinamis dengan Boostrap, PHP dan MySQL.
Lalu apa yang maksud dengan Navbar Menu Dinamis dengan Bootstrap, PHP dan MySQL?
umumnya navbar dibuat secara manual atau statis, dimana setiap menunya dimasukkan kedalam kode html satu persatu. Namun saat ini sudah cukup populer juga dimana kita melihat beberapa CMS yang sudah siap pakai disaat akan menambahkan menu cukup menambahkan item pada modul menu. Lalu bagaimana caranya?. tentu hal ini dibutuhkan sebuah wadah untuk menampung daftar menu tersebut, hal ini diperlukan database. saat ini database yang akan kita pakai adalah MySQL.
untuk beberapa contoh navbar bootstrap kita bisa lihat disini
Ok, kita langsung saja tutorial Membuat Navbar Menu Dinamis dengan Bootstrap, PHP dan MySQL
pertama siapkan table seperti berikut ini: tenang sudah dalam bentuk perintah SQL
CREATE TABLE `menu` ( `menu_id` int(11) NOT NULL auto_increment,dari script diatas dapat kita ketahui bahwa kita akan menggunakan 2 tabel sebagai pembantu untuk membuat menu. Silahkan anda isi atau gunakan SQL berikut ini untuk membantunya :
`menu` varchar(20) NOT NULL,
`menu_link` varchar(200) NOT NULL,
PRIMARY KEY (`menu_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;
CREATE TABLE `submenu` (
`submenu_id` int(11) NOT NULL auto_increment,
`menu_id` int(11) NOT NULL,
`submenu` varchar(20) NOT NULL,
`submenu_link` varchar(200) NOT NULL,
PRIMARY KEY (`submenu_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=11 ;
INSERT INTO `menu` VALUES (1, 'Home', 'index.html');dari tabel diatas kita lihat ilustrasi tabel seperti ini :
INSERT INTO `menu` VALUES (2, 'Master', 'master.html');
INSERT INTO `menu` VALUES (3, 'Transaksi', 'transaksi.html');
INSERT INTO `menu` VALUES (4, 'Contact Us', 'contact.html');
INSERT INTO `submenu` VALUES (1, 2, 'Barang', 'barang.html');
INSERT INTO `submenu` VALUES (2, 2, 'Pelanggan', 'pelanggan.html');
INSERT INTO `submenu` VALUES (3, 2, 'Karyawan', 'karyawan.html');
INSERT INTO `submenu` VALUES (4, 3, 'Pembelian', 'pembelian.html');
INSERT INTO `submenu` VALUES (5, 3, 'Penjualan', 'penjualan.html');
INSERT INTO `submenu` VALUES (6, 3, 'Laporan', 'laporan.html');
kita bisa lihat bahwa tabel menu berelasi dengan tabel submenu, dengan maksud bahwa sub menu merupakan bagian dari table menu. sehingga menu_id di tabel submenu harus sesuai (ada) di dalam menu_id di table menu.
Selanjutnya silahkan download Bootstrap di website resminya getbootstrap.com
Jika sudah di download silahkan simpan di direktori yang akan kita pakai dan ekstrak file tersebut, maka Anda akan mendapat 3 (tiga) buah folder yaitu css, fonts dan js.
Tutorial ini merupakan lanjutan dari tutorial php sebelumnya. sehingga sebelum lanjut dalam pembuatan skrip silahkan terlebih dahulu mempelajari tentang bagaimana pembuatan koneksi.php pada tutorial sebelumnya atau anda dapat mengklik link ini.
Selanjutnya kita akan membuat file menu.php dengan script sebagai berikut ini
<!DOCTYPE html>koneksi.php bisa di lihat disini
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dinamis Bootstrap Navbar</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TUTORIAL NAV</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<?php
include 'koneksi.php';
$menu= mysqli_query($koneksi,"SELECT * FROM menu ORDER BY menu_id ASC");
while($dataMenu = mysqli_fetch_array($menu)){
$menu_id = $dataMenu['menu_id'];
$submenu = mysqli_query($koneksi,"SELECT * FROM submenu WHERE menu_id='$menu_id' ORDER BY submenu_id ASC");
if(mysqli_num_rows($submenu) == 0){
echo '<li><a href="'.$dataMenu['menu_link'].'">'.$dataMenu['menu'].'</a></li>';
}else{
echo '
<li class="dropdown">
<a href="'.$dataMenu['menu_link'].'" class="dropdown-toggle" data-toggle="dropdown">'.$dataMenu['menu'].' <b class="caret"></b></a>
<ul class="dropdown-menu">';
while($dataSubmenu = mysql_fetch_assoc($submenu)){
echo '<li><a href="'.$dataSubmenu['submenu_link'].'">'.$dataSubmenu['submenu'].'</a></li>';
}
echo '
</ul>
</li>
';
}
}
?>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Selamat Mencoba … semoga berhasil..
