Membuat Navbar Menu Dinamis dengan Bootstrap, PHP dan MySQL. Bootstrap lagi :). Kali ini tutorial membuat menu navbar dinamis dengan Boostrap, PHP dan MySQL. Setelah beberapa saat yang lalu saya juga menulis artikel tentang 3 Free Bootstrap Admin Template.
Apa sih maksud dari Navbar Menu Dinamis dengan Bootstrap, PHP dan MySQL?
Biasanya kan Navbar menu yang dibuat selalu Statis atau tetap atau merubahnya secara manual (dengan menuliskan kode html). Nah, sekarang saya akan mencoba cara membuat Navbar Menu tersebuat bisa Dinamis, data menu tersebut di ambil dari database MySQL dengan kode PHP.
Anda bisa melihat contoh Navbar Bootstrap yang Statis Disini. Nanti akan kita buat Navbar tersebut Dinamis dan bisa di rubah dari database.
Oke, langsung saja tutorialnya dimulai 🙂
Pertama tentu saja buat database dulu, dalam kasus ini saya membuat database dengan nama tutorialweb. Kemudian dumping Script SQL di bawah ini di phpMyAdmin.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
CREATE TABLE `menu` ( `menu_id` int(11) NOT NULL auto_increment, `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 ; |
Dari Script di atas Anda akan mendapatkan 2 (dua) table dengan nama menu dan submenu. Kemudian Insertkan data kedalam kedua table tersebut, dumping saja Script SQL di bawah ini 🙂
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
INSERT INTO `menu` VALUES (1, 'Home', 'index.html'); INSERT INTO `menu` VALUES (2, 'About', 'about.html'); INSERT INTO `menu` VALUES (3, 'Programming', 'programming.html'); INSERT INTO `menu` VALUES (4, 'Software', 'software.html'); INSERT INTO `menu` VALUES (5, 'Contact Us', 'contact.html'); INSERT INTO `submenu` VALUES (1, 3, 'PHP', 'php.html'); INSERT INTO `submenu` VALUES (2, 3, 'ASP', 'asp.html'); INSERT INTO `submenu` VALUES (3, 3, 'AJAX', 'ajax.html'); INSERT INTO `submenu` VALUES (4, 3, 'jQuery', 'jquery.html'); INSERT INTO `submenu` VALUES (5, 3, 'MySQL', 'mysql.html'); INSERT INTO `submenu` VALUES (6, 3, 'CSS', 'css.html'); INSERT INTO `submenu` VALUES (7, 4, 'Antivirus', 'antivirus.html'); INSERT INTO `submenu` VALUES (8, 4, 'Design', 'design.html'); INSERT INTO `submenu` VALUES (9, 4, 'Multimedia', 'multimedia.html'); INSERT INTO `submenu` VALUES (10, 4, 'Utilities', 'utilities.html'); |
Dari Script di atas Anda akan mendapatkan beberapa data di table menu, dan beberapa data di table submenu dan sudah terelasi dengan table menu.
Perhatikan bahwa Table submenu terelasi dengan table menu dengan adanya field menu_id dalam table submenu.
Ini ilusrasi relasi antara table menu dan submenu
Jadi untuk menambahkan submenu, field menu_id di table submenu harus sama dengan menu_id di table menu.
Selanjutnya Anda download Bootstrap di website resminya http://getbootstrap.com/
Jika sudah di download maka ekstrak file tersebut, maka Anda akan mendapat 3 (tiga) buah folder yaitu css, fonts dan js.
Kemudian buat file PHP baru dengan nama index.php dan ketikkan script di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <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="#">TUTORIALWEB.NET</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <?php mysql_connect("localhost","root","root"); mysql_select_db("tutorialweb"); $menu = mysql_query("SELECT * FROM menu ORDER BY menu_id ASC"); while($dataMenu = mysql_fetch_assoc($menu)){ $menu_id = $dataMenu['menu_id']; $submenu = mysql_query("SELECT * FROM submenu WHERE menu_id='$menu_id' ORDER BY submenu_id ASC"); if(mysql_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> |
Jika sudah jangan lupa disimpan.
Dan struktur folder Anda akan tampil seperti bawah ini:
Dan jika berhasil maka tampilannya seperti di bawah ini
Saya jelaskan sedikit tentang script di atas, saya hanya akan jelaskan baris kode ke 30 - 53 karena inilah yang menampilkan item-item menu dan sub menu.
- Baris 31-32 : melakukan koneksi ke database (ganti dengan koneksi Anda)
- Baris 33 : membuat variabel menu dan melakukan query dengan menyeleksi table menu dengan mengurukan field menu_id dari yang terkecil
- Baris 34 : melakukan perulangan while dari query menu
- Baris 35 : membuat variabel menu_id dan berisi data dari field menu_id dari table menu
- Baris 36 : membuat variabel submenu dan melakukan query ke database dengan menyeleksi table submenu dengan kondisi dimana menu_id di table submenu itu sama dengan field menu_id pada table menu
- Baris 37 : jika hasil query submenu tidak ada hasilnya, maka menjalankan baris kode ke 38, dan jika ada hasilnya maka menjalankan baris kode ke 40-50
- Baris 38 : menampilkan menu yang tidak mempunyai submenu (dropdown)
- Baris 41 : menampilkan menu yang terdapat submenu(dropdown)
- Baris 44 : melakukan perulangan while dari query submenu untuk menampilkan data submenu.
- Selesai.
Nah silahkan coba… semoga berhasil.. 🙂
nice tutorial gan, tapi gimana caranya supaya ada 3 tingkatan menu, menu->submenu->subsubmenu
saya coba kok ndk bisa ya gan, di table saya tambahkan tabel subsubmenu
nanti saya coba dulu gan
Udah dicoba Boss Pino?
Saya juga butuh 3 tingkatan menu nih…. ??
Parse error: syntax error, unexpected T_VARIABLE in D:\xampp\htdocs\SDN\index.php on line 33
line ke 33 di php ternyata :
$menu = mysql_query(‘SELECT * FROM menu ORDER BY menu_id ASC’);
Mohon pencerahan,..
apakah code sudah persis dengan di tutorial, silahkan download saja di link download yg sudah ada.
error unexpected T_VARIABLE biasanya terjadi jika ada sintaks yg salah dalam penggabungan variabel.
mantap gan. thanks atas tutorialnya.
Gan kalo bisa sekalian ada demonya gan, agak puyeng kalo baca tulisan semua.. Masukkan aja gan.. 🙂
gan bagus nih webnya, lebih bagus lagi kalo pake Framework :toast saran aja sih gan
makasih gan saranya. masih belom sempet buat.. hehehe LOL..
terimakasih bang, ilmunya sangat bermanfaat..
Om Kok drop down sub menunya ga jalan ya?
di notepad ++ class ” dropdown” dst kok ga aktif? adakah yg salah?
link Screenshot: http://prntscr.com/61b3jq
thx
maksudnya gak aktif gimana?
apa data sudah masuk di database
coba cek link js bootstrapnya bro,, udah bener belum bro?
Pak saya sudah tampil hasilnya hanya menunya tidak drop down otomatis pak, malah menu biasa.. apanya pak kira2.. thanks..
database uda betul?
Biar pas klik home langsung muncul konten home.html nya di bawah menu tersebut gimana ya? cz pas saya coba klik menu home tampilan home.htmlnya misah. thanks
misah gmn ni gan? masih belom bisa nangkat pertanyaanya?
:cd pas klik tiap menu open windows baru, penginnya biar tampil dibawahnya gmana ya?
oo.. mungkin di link nya gan, hilangkan atribu href=”_blank”
mantap banget gan, thanks a lot
gan kalo dropdown menu-nya langsung kebuka waktu di hover gimana ya gan?
kalo ini harus di klik menunya baru muncul sub-menunya.
thanks gan
gan biar menu dropdownnya ada yang aktif dan ada yang ga berdasarkan hak akses gimana gan ? thanks gan
bisa pakek session.
dan pada table database tambahkan 1 kolom, misal dengan nama akses, dimana jika bernilai 1 maka akses admin, dan 2 jika akses member.
penulisan kode kurang lebih seperti ini:
nah kalo, ada admin, kecamatan, dan kelurahan. admin bisa mengakses semuanya. kecamatan hanya bisa mengakses kelurahan yang ada diwilayahnya. sedangkan kelurahan hanya bisa mengakses kelurahannya sendiri. itu gimana gan ?
nah itu cuma ada satu halaman, jadi ada menu yang aktif dan yang ga. itu gimana gan ? hehe… maaf ya gan.. makasih gan 🙂
kalo dropdwonnya ga muncul itu kenapa yah ?
utek2 query ke table databasenya.
udah gan ternyata salah di pemilihan .jsnya… oiya ga gimana cara menampilkan data dengan foreign key yang sama ?
gan tolong gan saya butuh bantuan. dari contoh diatas ya gan, misal yang login dropdown php maka menu yang aktif hanya php, myql yang aktif hanya sql dan jika yang login statusnya programming maka menu dropdown yang ada di dropdown aktif semua. tolong gan.. terima kasih
bedakan aja dari session login nya.
kalo dicampur sama koding diatas gimana gan ? saya masih bingung
za tinggal tambahkan saja kode diatas, ganti nama session-nya dan masukkan kode anda di dalamannya. 😀
tolong contohinlah gan, saya bingung ??
please gan besok deadline, tapi saya belum bisa :'(
kode agan kayak dimana?
makasih gan.. bagi yg gak sukses coba periksa line 31 mysql_connect(“localhost”,”root”,””); setelah “root” dikosongkan saja.. bagi agan yg menggunakan password, blh isi disesuaikan dgn pswd web servernya.
Sukses Gan !
Tutor nya simple :thumbup
echo ‘‘.$dataSubmenu[‘submenu’].’‘;
gan mau nanya kenapa sebelum tanda dolar harus menggunakan titik?
itu untuk menampilkan data php di dalam echo teks html biasa.
Terimakasih sangat membantu
kalau link submenu nya dinamis gak seperti di atas gmn ya gan?
misalnya linknya submenu berdasarkan submenu gitu… jadi gak seperti php.html ,mysql.html gmn ya gan?
ko ga bisa.y gan yang muncul malah kayak gni .
Warning: mysql_fetch_assoc() expects parameter 1 to be resource, boolean given in D:\xampp\htdocs\tutorialweb\index.php on line 34
coba cek koneksi ke database, sudah benar belom
udah gan, kyak nya ada skrip yang salah. tapi ga tau dmna.y hhe, sama belum paham betul
:toast
ikon dari menunya jadi tapi bagian lainya nggak
FazeCostant
Warning: mysql_connect(): Access denied for user ‘root’@’localhost’ (using password: YES) in C:\xampp\htdocs\learningWordPress\wp-content\themes\neoblog2\header.php on line 70
Warning: mysql_fetch_assoc() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\learningWordPress\wp-content\themes\neoblog2\header.php on line 73
mohon pencerahanya gan…
cek koneksi ke database nya gan.
Dinamis Bootstrap Navbar
File Css nya bikin sendiri apa gan ?
law ada contoh nya share link.
File Css nya bikin sendiri apa gan ?
law ada contoh nya share link.
css sudah bawaan bootstrap
Fatal error: Call to undefined function mysql_create_db() in C:\xampp\htdocs\menu\index.php on line 31
padahal sudah di edit dengan benar suhu
ada solusi yng lain g suhu
kok muncul error function mysql_create_db() ya…
database sudah ada?
sukses buat agan 😀
mantaffff
Nice tutor gan.
Gimana caranya supaya bisa diaplikasikan buat sidebar menu?
tbl_kategori : kat_id (PK), kat_nama
tbl_subkategori : subkat_id (PK), subkat_nama, kat_id
mohon pencerahannya agan.
makasih
sama aja caranya
Makasih gan,,
:toast :toast