Home > JQuery, JavaScript, PHP > Membuat Menu Tree Dengan PHP dan JQuery

Membuat Menu Tree Dengan PHP dan JQuery

April 13th, 2009 6,001 views Leave a comment Go to comments

Pada setiap aplikasi, menu merupakan element paling penting yang berfungsi sebagai navigasi dari halaman satu ke halaman lainnya, dari module satu ke module lainnya. Pada aplikasi yang lebih professional, menu sangat diperhatikan karena merupakan sarana untuk pembagian module per masing-masing user dan group pengguna aplikasi.

Menu sebagai dasar navigasi dari suatu aplikasi haruslah dimanis atau bisa diedit, ditambah dan di custom oleh admin. Untuk itu menu setiap link-nya harus disimpan di database, berikut sample table menu yang sederhana.

CREATE TABLE IF NOT EXISTS `menu` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `parent_id` int(5) NOT NULL,
  `name` varchar(50) NOT NULL,
  `url` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
);

Dan ini adalah contoh sample datanya.

Sample data untuk menu ini bisa anda download di file ini –> sample_menu.sql

Teknik load data dari database untuk kemudian ditampilkan dalam bentuk menu berjenjangan dengan format tree (pohon) adalah teknik rekursif yang dapat anda lihat di contoh source code berikut. 

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
63
64
65
66
67
68
69
70

<?
/* fungsi ini akan terus di looping secara rekursif agar dapat menampilkan menu dengan format tree (pohon)
 * dengan kedalaman jenjang yang tidak terbatas */
function loop($data,$parent){
  if(isset($data[$parent])){ // jika ada anak dari menu maka tampilkan
	/* setiap menu ditampilkan dengan tag <ul> dan apabila nilai $parent bukan 0 maka sembunyikan element 
	 * karena bukan merupakan menu utama melainkan sub menu */
	$str = '<ul parent="'.$parent.'" style="display:'.($parent>0?'none':'').'">'; 
	foreach($data[$parent] as $value){
	  /* variable $child akan bernilai sebuah string apabila ada sub menu dari masing-masing menu utama
	   * dan akan bernilai negatif apabila tidak ada sub menu */
	  $child = loop($data,$value->id); 
	  $str .= '<li>';
	  /* beri tanda sebuah folder dengan warna yang mencolok apabila terdapat sub menu di bawah menu utama 	  	   
	   * dan beri juga event javascript untuk membuka sub menu di dalamnya */
	  $str .= ($child) ? '<a href="javascript:openTree('.$value->id.')"><img src="folderclose2.jpg" id="img'.$value->id.'" border="0"></a>' : '<img src="folderclose1.jpg">';
	  $str .= '<a href="'.$value->url.'">'.$value->name.'</a></li>';
	  if($child) $str .= $child;
	}
	$str .= '</ul>';
	return $str;
  }else return false;	  
}
mysql_connect('localhost','root','123456');
mysql_select_db('test');
 
// tampilkan menu di sortir berdasar id dan parent_id agar menu ditampilkan dengan rapih
$query = mysql_query('SELECT * FROM menu ORDER BY id,parent_id');
$data = array();
while($row = mysql_fetch_object($query)){
  $data[$row->parent_id][] = $row; // simpan data dari databae ke dalam variable array 3 dimensi di PHP
}
echo loop($data,0); // lakukan looping menu utama
?>

Dan cuma menggunakan javascript sederhana untuk membuat menu ini dapat dibuka dan ditutup contoh gambar paling atas.

21
22
23
24
25
26
27
28
29
30
31
32
33

  function openTree(id){
  	// ambil semua tag <ul> yang mengandung attribut parent = id dari link yang dipilih
  	var elm = $('ul[@parent='+id+']'); 
  	if(elm != undefined){ // jika element ditemukan
  	  if(elm.css('display') == 'none'){ // jika element dalam keadaan tidak ditampilkan
  	    elm.show(); // tampilkan element 	  	
  	    $('#img'+id).attr('src','folderopen.jpg'); // ubah gambar menjadi gambar folder sedang terbuka
  	  }else{
  	  	elm.hide(); // sembunyikan element
  	    $('#img'+id).attr('src','folderclose2.jpg'); // ubah gambar menjadi gambar folder sedang tertutup
  	  }
	}
  }

Lihat demo selengkapnya di Link ini

Download keseluruhan program di Link ini

Semoga bermanfaat… ^_^

Categories: JQuery, JavaScript, PHP Tags: , , ,
(8 votes, average: 4.38 out of 5) KurangBiasaLumayanBagusLuar Biasa
Loading ... Loading ...
  1. hery
    April 13th, 2009 at 23:38 | #1
    Reply | Quote

    mas makasih y dah mo bagi2 ilmunya….
    klo g salah mas ini pernah masuk HIMTI UBL y!!
    sy jg ank himti angktn 08

  2. admin
    April 14th, 2009 at 09:50 | #2
    Reply | Quote

    iya pernah masuk himti dan jadi ketua di periode 2005 / 2006…
    salam kenal ya…kapan2 ketemu langsung di acara-acara himti…hehe

  3. gawibowo
    April 17th, 2009 at 18:02 | #3
    Reply | Quote

    makasih artikelnya, terutama utk fungsi rekursif nya.. saya modifikasi untuk membuat list bertingkat (ul & li)..
    ngomong2 anda menggunakan atribut parent pada ul.. bukankah atribut tsb tidak ada (tidak valid di html) ?

  4. admin
    April 17th, 2009 at 19:14 | #4
    Reply | Quote

    pertanyaan bagus mas, memang itu bukan attribut asli dari UL tapi itu berfungsi sebagai penanda aja bahwa UL tsb adalah anak dari UL dengan ID mana.
    JQuery kan punya kemampuan utk membaca setiap nilai attribut jadi saya manfaatkan disitu. gmn mas? jelaskah?

  5. igun gunawan
    April 22nd, 2009 at 02:09 | #5
    Reply | Quote

    saya telah mendownload hasil modifikasi mas gawibowo juga mas chandra. dan acungan jempol deh buat anda berdua.

    sekalian mo bertanya klo mau masukin three ke dalam <selec gimana ya, pake jquery ?

    trims

  6. indra
    April 28th, 2009 at 13:39 | #6
    Reply | Quote

    Artikelnya oke banget, sy mo tanya apakah bisa script diatas dipasang di visual foxpro dan bagaimana caranya ?…..

  7. admin
    April 28th, 2009 at 14:44 | #7
    Reply | Quote

    klo visual foxpro tentu gak bs. bukannya tinggal drag n drop aja?
    mungkin logika rekursif-nya bs anda ambil utk referensi menu dengan kedalaman tak terbatas

  8. Eboy
    June 3rd, 2009 at 20:12 | #8
    Reply | Quote

    HaLo Leh NuMpaNG NaMpaNG… !

    wew seru nee… ! kalo kebalikan dari fungsi loop() yang masnya buat dah ada blom ya… ! ngubah tree yang dibuat make text editor tuk di simpan ke-database to ke array gitu…. ! hhe iseng banget ya… lom gitu butuh sih, tapi kalo da info sa bagi-bagikan ya.. ya.. ya.. ! hhi

    Ehh ya saya barusan coba jalanin script fungsi loop() yang masnya tulis, sepertinya ada sedikit kejanggal di baris 53 di mana menurut hemat saya tag penutup LI yaitu karakter seharusnya berada atau disisipkan di-baris ke 55, gimana nurut masnya… ? mungkin ada alasan untuk itu… ? n makasih banyak dah luangin waktu nulis n bagi2 ginian ke kita… sangat bermanfaat… ta kasih dua jempol deh… pengenya-sih empat, takutnya dikira ga sopan hehehee…. minggat ahh glek slurrrp… !

    Salam senimandigital… !

  9. pututik
    June 18th, 2009 at 11:17 | #9
    Reply | Quote

    akhirnya saya menemukan tempat belajar yang sangat aplikatif, saya sudah berkeliling dan mencari kesana kemari. Situs ini termasuk yang mudah untuk dimengerti awamus seperti saya. Sukses selalu buat penulisnya dan semoga ilmu yang ditularkan berkah.

  10. rahmat
    July 23rd, 2009 at 13:33 | #10
    Reply | Quote

    Info nya keren neh…..

  11. download mp3 indonesia
    July 26th, 2009 at 02:37 | #11
    Reply | Quote

    thanks mas infonya

  12. arie
    August 25th, 2009 at 14:10 | #12
    Reply | Quote

    makasih mas, tutorial tentang Membuat Menu Tree Dengan PHP dan JQuery, ni lagi browsing2 buat nyelesain tugas kuliah eh nyasar disini, salam hangat mas… ^^

  13. Sugiarto Nardi
    November 3rd, 2009 at 18:58 | #13
    Reply | Quote

    Tidak ada kata lain selain. Hebat & Mantab!!!! Cari2 disana sini artikel luar negeri ternyata Indonesia punya ;) . Oya pertanyaan saya. Bgmn menerapkan sistem Adminnya untuk create menu (Via FORM)??

    Saya pernah menemukan Artikel spt ini di artikel luar negeri, cmn ya itu masalahnya mas, untuk bagian Adminnya penerapannya bgmn ya? Trm ksh sebelumnya.

  14. Adi
    February 22nd, 2010 at 23:31 | #14
    Reply | Quote

    Coool, just two thumb up bwt mas candra

  15. henri
    April 21st, 2010 at 09:48 | #15
    Reply | Quote

    ok mas thanx materi ini sangant bermanfaat untuk saya mas…di tunggu untuk materi yang lain

  1. No trackbacks yet.