Assalamu ‘Alaikum para pemirsa setia.
Untuk membuat website, selain responsif & dinamis kadang dituntut untuk pembuatan menu-menunya bisa fleksibel, jadi menu-menunya dan kategori menu dapat ditambahkan atau di kurangi maupun diubah sesuai kebutuhan.
Kali ini konsepnya setiap menu diambil dari database, jadi untuk menambahkan/mengurangi /merubah menunya tinggal merubah data yang ada didatabase tanpa mengutak-atik source programnya. Jadi dalam prakteknya nanti kita tidak perlu menyentuh html, php atau source lainnya di website kita.
Woke saya rasa para pemirsa sudah mengerti maksud dan tujuannya, jadi tanpa panjang lebar langsung kita mulai. Pertama kita buat table menu di database. Pembuatan tabel bisa disini kita menggunakan MySql ya, yg bisa juga kita akses dari phpMyAdmin.
Misalkan struktur datanya adalah sbb :
Buat table kategori menu :
CREATE TABLE IF NOT EXISTS `a_kat_menu` (
`id_kat` int(5) NOT NULL,
`nm_kat` varchar(25) NOT NULL,
PRIMARY KEY (`id_kat`)
)Setelah tabel di database terbuat, selanjutnya kiya mengisi fild pada tabel tersebut.
Berikut ini adalah sampel datanya :
INSERT INTO `a_kat_menu` (`id_kat`, `nm_kat`) VALUES
(1, 'KATEGORI1'),
(2, 'KATEGORI2'),
(3, 'KATEGORI3');
Buat table menu :
CREATE TABLE IF NOT EXISTS `a_menu` (
`id_menu` int(3) NOT NULL AUTO_INCREMENT,
`id_kat` int(3) NOT NULL,
`nm_menu` varchar(50) NOT NULL,
PRIMARY KEY (`id_menu`)
)
Berikut ini adalah sampel datanya :
INSERT INTO `a_menu` (`id_menu`, ` id_kat `, `nm_menu`) VALUES
(1,1, 'MENU1'),
(2,1, 'MENU2'),
(3,2, 'MENU3'),
(4,2, 'MENU4'),
(5,3, 'MENU5');
OK, sementara pembuatan table di database sudah.
Selanjutnya kita mulai beralih ke pembuatan source programnya.
Untuk koneksi databasenya kita anggap saja webserver = localhost, user &password = root, nama database= menu. Contoh dibawah ini saya sertakan CSS-nya, andapun bisa merubahnya sendiri sesuai selera Anda:
<style>
/* CSS --> Mengatur tampilan */
.kategori {
background-color: #CC0000;
width:100;
color:#FFFFFF;
border: 1px solid #000000 ;
}
a {
background-color: #00FFFF;
width:100;
border: 1px solid #000000 ;
text-decoration:none;
display:block;
}
a:hover {
background-color: #FFFF00;
}
</style>
<?php
//KONEKSI DATABASE
mysql_connect("localhost","root","root");
mysql_select_db("menu");
// query SQL untuk mencari Kategori
$kat = mysql_query("select * from a_kat_menu order by id_kat");
while ($menu = mysql_fetch_array($kat))
{
echo "<div class='kategori'>$menu[nm_kat]</div>";
echo "<ul >";
// query SQL untuk mencari menu
$dpt = mysql_query("select * from a_menu where id_kat= $menu[id_kat] order by id_menu");
while ($sub = mysql_fetch_array($dpt))
{
echo "<li><a href='#' >$sub[nm_menu]</a></li>";
}
echo "</ul>";
}
?>
Gampang kan!
Bila belum jelas bisa anda tanyakan dengan menulis komentar di bawah ini. Selamat mencoba & salam olah raga!