Membuat Navbar Menu Dinamis dengan Bootstrap, PHP dan MySQL
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..
Sumber : http://tutorialweb.net/membuat-navbar-menu-dinamis-dengan-bootstrap-php-dan-mysql/
No comments:
Post a Comment