Membuat Sub Kategori Dinamis PHP dan MySQL
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…
Adapun sintaks MySQL nya adalah sebagai berikut
Keterangan:
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,
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.
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
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.
File yang bernama input.php
Pertama agan buat file yang bernama tambah_sub.php
source : hitamcoklat
1. Relasi Tabel
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)
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
Tidak ada komentar:
Posting Komentar