Desain web : Membuat Menu Dinamis dengan Bootstrap, PHP dan MySQL
oke, yang langsung aja ya tutorialnya karena saya gak suka basabasi
tutorial ini saya anggap sudah download bootstrap
Pertama buat database dulu, saya membuat database dengan nama gudangemateri.
Kemudian copas(yang warna merah) Script SQL di bawah ini di phpMyAdmin.
======
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 ;
======
kemudian lakukan hal yang sama insertkan atau masukan isian menu dan submenunya"bisa kalian ganti"
(untuk caranya kalau bingung lihat video nya aja disini)
======
INSERT INTO `menu` VALUES (1, 'Home', 'index.html');
INSERT INTO `menu` VALUES (2, 'About', 'about.html');
INSERT INTO `menu` VALUES (3, 'Berita', 'programming.html');
INSERT INTO `menu` VALUES (4, 'Anime', '');
INSERT INTO `menu` VALUES (5, 'K-show', '');
INSERT INTO `submenu` VALUES (1, 4, 'naruto', 'gudangemateri.blogspot.co.id');
INSERT INTO `submenu` VALUES (2, 4, 'one piece', 'gudangemateri.blogspot.co.id');
INSERT INTO `submenu` VALUES (3, 5, 'Runningman', 'gudangefile.blogspot.co.id');
======
Kemudian buat file dengan nama index.php dan ketikkan script di bawah ini:
=====
<!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">
<meta name="description" content="bangkit fajar nur alam ">
<meta name="author" content="gudangemateri.blogspot.co.id">
<title>gudangemateri</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.theme.css" rel="stylesheet">
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top"><strong>gudangemateri</strong></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<?php
include "koneksi.php";
$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['nama_menu'].'</a></li>';
}else{
echo '
<li class="dropdown">
<a class="page-scroll" href="'.$dataMenu['menu_link'].'" class="dropdown-toggle" data-toggle="dropdown">'.$dataMenu['nama_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>
</body>
</html>
=====
dan juga buat file koneksi ke database "koneksi.php"
=====
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "gudangemateri";
$koneksi = mysql_connect($server,$username,$password) or die ('Koneksi gagal');
if($koneksi){
mysql_select_db($database) or die ('Database belum dibuat');
}
?>
=====
oke selanjutnya simpan semua dengan format berikut
nah ini dia link download skripnya
tutorial ini saya anggap sudah download bootstrap
Pertama buat database dulu, saya membuat database dengan nama gudangemateri.
Kemudian copas(yang warna merah) Script SQL di bawah ini di phpMyAdmin.
======
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 ;
======
kemudian lakukan hal yang sama insertkan atau masukan isian menu dan submenunya"bisa kalian ganti"
(untuk caranya kalau bingung lihat video nya aja disini)
======
INSERT INTO `menu` VALUES (1, 'Home', 'index.html');
INSERT INTO `menu` VALUES (2, 'About', 'about.html');
INSERT INTO `menu` VALUES (3, 'Berita', 'programming.html');
INSERT INTO `menu` VALUES (4, 'Anime', '');
INSERT INTO `menu` VALUES (5, 'K-show', '');
INSERT INTO `submenu` VALUES (1, 4, 'naruto', 'gudangemateri.blogspot.co.id');
INSERT INTO `submenu` VALUES (2, 4, 'one piece', 'gudangemateri.blogspot.co.id');
INSERT INTO `submenu` VALUES (3, 5, 'Runningman', 'gudangefile.blogspot.co.id');
======
Kemudian buat file dengan nama index.php dan ketikkan script di bawah ini:
=====
<!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">
<meta name="description" content="bangkit fajar nur alam ">
<meta name="author" content="gudangemateri.blogspot.co.id">
<title>gudangemateri</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.theme.css" rel="stylesheet">
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top"><strong>gudangemateri</strong></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<?php
include "koneksi.php";
$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['nama_menu'].'</a></li>';
}else{
echo '
<li class="dropdown">
<a class="page-scroll" href="'.$dataMenu['menu_link'].'" class="dropdown-toggle" data-toggle="dropdown">'.$dataMenu['nama_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>
</body>
</html>
=====
dan juga buat file koneksi ke database "koneksi.php"
=====
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "gudangemateri";
$koneksi = mysql_connect($server,$username,$password) or die ('Koneksi gagal');
if($koneksi){
mysql_select_db($database) or die ('Database belum dibuat');
}
?>
=====
oke selanjutnya simpan semua dengan format berikut
nah ini dia link download skripnya
No comments:
Post a Comment