Mungkin sudah tidak asing lagi dengan judul diatas. Jika agan pernah
lihat toko-toko online terdapat menu di sebelah kiri atau sebelah kanan
atau sebelah atas terdapat menu yang apabila agan sorot maka akan muncul
sub kategori didalamnya? hehe… ya pada postingan kali ini saya akan
sedikit berbagi cara untuk membuat Kategori dan Sub Kategori yang sangat
simple menggunakan PHP dan MySQL dan akan dijelaskan bagaimana cara
kita menampilkan Kategori Induk dan Sub Kategorinya. Baiklah langsung
saja ya…
1. Relasi Tabel
Adapun sintaks MySQL nya adalah sebagai berikut
CREATE TABLE `category` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`category` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=21 DEFAULT CHARSET=latin1
CREATE TABLE `sub_category` (
`id_sub` int(3) NOT NULL AUTO_INCREMENT,
`id_category` int(3) NOT NULL,
`nama_sub` varchar(100) NOT NULL,
PRIMARY KEY (`id_sub`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1
Ohh ya bisa juga langsung dibuat pake phpmyadmin dengan keterangan seperti sintaks MySQL diatas,
Keterangan:
- id -> INT (3) *AUTO INCREMENT primary
- category -> VARCHAR (100)
Untuk tabel sub_category sebagai berikut,
- id_sub -> INT (3) *AUTO INCREMENT primary
- id_category -> INT(3)
- nama_sub -> VARCHAR(100)
Dua perintah SQL diatas merupakan perintah untuk membuat tabel yang
bisa dilihat di gambar, nah sekarang kita masukan isi dari masing-masing
tabel tersebut. Disini kamu bisa memberikan nilai seperti yang saya
input kan *nampak seperti dibawah ini,
Isi Tabel “category”
Isi Tabel “sub_category”
Baiklah bisa dilihat pada bagian tabel
sub_category
terdapat field id_category yang menghubungkan dengan field id pada tabel
category diatas. Pada gambar diatas dapat dilihat bahwa nilai
id_category yaitu 14 yang memiliki relasi pada field id di tabel
category. Dengan kata lain nama_sub atau id_sub yang memiliki
id_category 14 adalah anak dari nama category dari tabel category yang
memiliki id 14 . . . heheh maaf kalo muter-muter kata-katanya.
2. Tampil PHP
Ohh ya pertama silahkan salin sintaks PHP dibawah ini terlebih dahulu,
<?php
mysql_connect('localhost','root','password') or die("Koneksi gagal");
mysql_select_db('nama database yang agan buat') or die("Database tidak bisa dibuka");
?>
<html>
<body>
<ul id="menu">
<?php
$sql = mysql_query("SELECT id, category FROM category");
while($r=mysql_fetch_array($sql)) {
echo "<li><a href='#'>".$r['category']."</a>";
$sql2 = mysql_query("SELECT * FROM sub_category WHERE id_category = '".$r['id']."'");
if($sql2) {
echo "<ul>";
while($d=mysql_fetch_array($sql2)) {
echo "<li><a href='#'>".$d['nama_sub']."</a></li>";
}
echo "</ul>";
} else {
echo "</li>";
}
}
?>
</ul>
Baiiikkklaaah sekarang masuk pada tahap penampilan kategori-kategori
tersebut. Mungkin sudah kebayang ya hasilnya? yaaa ga jauh beda sama
kita memunculkan list waktu kita ngetik di blog agan masing-masing…
Taraaa…. ya kurang lebih akan tampil seperti tampilan diatas, jelek ya?
haha untuk memperindah tampilan kita bisa memanfaatkan plugin-plugin
jquery. Disini saya akan menggunakan plugin
menu.js yang bisa di download di
http://www.menujs.net/jika sudah anda download salin kode dibawah ini,
File yang bernama
sub.php
<?php
mysql_connect('localhost','root','') or die("Koneksi gagal");
mysql_select_db('nama database yang agan buat') or die("Database tidak bisa dibuka");
?>
<html>
<head>
<title>Membuat Sub Kategori Dinamis PHP dan MySQL</title>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/Menu.js" type="text/javascript"></script>
<script type="text/javascript">
Menu.init("menu", {"orientation": Menu.VERTICAL});
</script>
<style type="text/css">
a {
text-decoration: none;
}
table {
position: absolute;
margin-top: 10px;
}
table tr td {
background-color: #EDEDED;
}
/* reset default styles */
#menu,
#menu ul { margin: 0; padding: 0; }
#menu li { list-style-type: none; }
/* first level */
#menu { width: 100px; float: left; margin-top: 100px; }
#menu li,
#menu a { float: left; width: 100px; }
#menu a { display: block; background: #EEE; }
#menu a:hover,
#menu a.menu_open { background: #DDD; }
/* second level */
#menu ul { visibility: hidden; position: absolute; width: 100px; }
#menu ul a { background: #DDD; }
#menu ul a:hover,
#menu ul a.menu_open { background: #CCC; }
/* third level (colors) */
#menu ul ul a { background: #CCC; }
#menu ul ul a:hover { background: #BBB; }
</style>
</head>
<body>
<ul id="menu">
<?php
$sql = mysql_query("SELECT id, category FROM category");
while($r=mysql_fetch_array($sql)) {
echo "<li><a href='#'>".$r['category']."</a>";
$sql2 = mysql_query("SELECT * FROM sub_category WHERE id_category = '".$r['id']."'");
if($sql2) {
echo "<ul>";
while($d=mysql_fetch_array($sql2)) {
echo "<li><a href='#'>".$d['nama_sub']."</a></li>";
}
echo "</ul>";
} else {
echo "</li>";
}
}
?>
</ul>
<table>
<tr><td><a href="input.php?aksi=tambahkategori">Tambah Kategori</a></td><td><a href="input.php?aksi=tambahsub">Tambah Sub Kategori</a></td></tr>
</table>
</body>
</html>
Ohh ya bisa dilihat pada bagian pemanggilan plugin javascript diatas saya memasukan file nya kedalam satu folder yang bernama
js .
Jika berhasil maka akan tampil seperti dibawah ini.
Sekarang tampilannya lebih indah bukan? haha ini adalah tampilan plugin dari
menu.js yang
saya download barusan *menurut saya sih kurang elegan hahaha, tapi pada
fungsi nya sama saja lah…hehe, ketika kursor menyorot pada kategori
maka akan muncul sub kategori yang bersangkutan dan jika tidak terdapat
sub kategori maka tidak akan ditampilkan apa-apa.
3. Input PHP
Oke lanjut ke tahapan proses penginputan kategori dan sub kategori.
Sebenernya sih bisa langsung rubah di phpmyadmin-nya, tapi itu bakalan
memakan waktu apalagi proses nya tidak user friendly banget heheh. Maka
alternatifnya kita akan membuat form input untuk proses input kategori
dan sub kategori nya. Baiklah langsung aja kita salin sintaks PHP
dibawah ini,
File yang bernama
input.php
<?php
mysql_connect('localhost','root','') or die("Koneksi gagal");
mysql_select_db('nama database yang agan buat') or die("Database tidak bisa dibuka");
?>
<html>
<head>
<title>Membuat Sub Kategori Dinamis PHP dan MySQL</title>
</head>
<body>
<?php
if($_GET['aksi'] == 'tambahsub') { ?>
<form method="POST" action="tambah_sub.php">
<input name="nama_sub" type="text" /><br />
<select name="category">
<option value="0">Pilih Kategori</option>
<?php
$sql = mysql_query("SELECT id, category FROM category");
while($r=mysql_fetch_array($sql)) {
echo "<option value=".$r['id'].">".$r['category']."</option>";
}
?>
</select>*)Silahkan Masukan Nama kategori
<p><input type="submit" value="Submit" name="submit" /></p>
</form>
<?php }
if($_GET['aksi'] == 'tambahkategori') { ?>
<p>Masukan Nama Kategori</p>
<form method="POST" action="tambah_kat.php">
<input type="text" name="nama_category" />
<input type="submit" value="Submit" />
</form>
<?php } ?>
</body>
</html>
ya itulah skirp untuk menampilkan form input kategori dan sub kategori
, dapat dilihat bahwa form action-nya membutuhkan dua file yang bernama
tambah_sub.php dan
tambah_kat.php , oke sekarang lanjut kita akan membuat ke dua file tersebut langsung salin aja sintaks dibawah ini hheehe.
Pertama agan buat file yang bernama
tambah_sub.php
<?php
mysql_connect('localhost','root','') or die("Koneksi gagal");
mysql_select_db('nama database yang agan buat') or die("Database tidak bisa dibuka");
$sql = mysql_query("INSERT INTO sub_category (id_sub, id_category, nama_sub) VALUES ('','$_POST[category]','$_POST[nama_sub]')") or die (mysql_error());
if($sql) {
echo "<h2>PROSES INPUT SUB KATEGORI BERHASIL</h2><p><a href='sub.php'>Klik Disini Untuk Melihat</a></p>";
}
?>
Sekarang file kedua yang agan buat adalah
tambah_kat.php
<?php
mysql_connect('localhost','root','') or die("Koneksi gagal");
mysql_select_db('nama database yang agan buat') or die("Database tidak bisa dibuka");
$sql = mysql_query("INSERT INTO category (id, category) VALUES ('','$_POST[nama_category]')") or die (mysql_error());
if($sql) {
echo "<h2>PROSES INPUT KATEGORI BERHASIL</h2><p><a href='sub.php'>Klik Disini Untuk Melihat</a></p>";
}
?>
Baiklah mungkin segitu dulu postingan hari ini. Ohh ya jika ada kesalahan langsung aja kasih komentarnya ya gannnnn!!!
source : hitamcoklat
