Membuat tree dengan javascript

Kali ini kita mencoba membuat tree yang terhubung dengan database mysql. Penulis memilih menggunakan javascript dari sitemap styler css globe, karena tree menu inilah yang paling sederhana dari banyak tree menu yang pernah penulis coba. Terus kenapa penulis tidak menggunakan PHP murni untuk tree menu? jawabnya karena kalo pure PHP tiap kali klik tree menu (collapse dan expand) memerlukan reload halaman. Tidak demikian halnya kalo memanfaatkan javascript library ini.
Baiklah mari kita mulai belajarnya. Sebelumnya kita memerlukan bahan-bahan ini:

• sitemapstyler.js
• sitemapstyler.css
• line2.gif
• line1.gif
• expanded.gif
• collapsed.gif

Kemudian buat halaman untuk menampilkan tree menunya berupa unordered list biasa dengan HTML. Beri id="sitemap" pada tag
. Buat unordered list lagi di dalam unordered lis yang tadi sebagai sub menunya. Jangan lupa attach javascript dan cssnya. Lihat kode di bawah ini:

1. "sitemapstyler.css" rel="stylesheet" type="text/css" media="screen" />  
2. "text/javascript" src="sitemapstyler.js">  
3.                   
4. "sitemap">  
5.   
6. "#">buah  
7.       
     
   •         
   • "#">mangga
     
   •         
   • "#">jeruk
     
   •         
   • "#">pear
     
   •         
   • "#">kedondong
     
   •         
   • "#">jambu
     
   •       
                        
8.   
  
9.   
10.     

<link href="sitemapstyler.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="sitemapstyler.js"></script> <ul id="sitemap"> <li><a href="#">buah</a> <ul> <li><a href="#">mangga</a></li> <li><a href="#">jeruk</a></li> <li><a href="#">pear</a></li> <li><a href="#">kedondong</a></li> <li><a href="#">jambu</a></li> </ul> </li> </ul> Sesederhana itu. Apabila anda ingin membuat sub lagi dari sub menu anda bisa menambahkan lagi unordered list di dalam sub menu yang sudah anda buat. Lihat contoh berikut:

1. "sitemapstyler.css" rel="stylesheet" type="text/css" media="screen" />  
2. "text/javascript" src="sitemapstyler.js">  
3.                   
4. "sitemap">  
5.   
6. "#">buah  
7.       
     
   •         
   • "#">mangga
     
   •         
   • "#">jeruk  
   •             
       
     •                 
     • "#">jeruk purut
       
     •                 
     • "#">jeruk bali
       
     •                 
     • "#">jeruk markisa
       
     •                 
     • "#">jeruk keprok
       
     •             
       
   •         
     
   •         
   • "#">pear
     
   •         
   • "#">kedondong
     
   •         
   • "#">jambu
     
   •       
                        
8.   
  
9.   
10.     

<link href="sitemapstyler.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="sitemapstyler.js"></script> <ul id="sitemap"> <li><a href="#">buah</a> <ul> <li><a href="#">mangga</a></li> <li><a href="#">jeruk</a> <ul> <li><a href="#">jeruk purut</a></li> <li><a href="#">jeruk bali</a></li> <li><a href="#">jeruk markisa</a></li> <li><a href="#">jeruk keprok</a></li> </ul> </li> <li><a href="#">pear</a></li> <li><a href="#">kedondong</a></li> <li><a href="#">jambu</a></li> </ul> </li> </ul> Sekarang bagaimana caranya menghubungkannya dengan database? Cukup mudah.
Pertama mari kita buat dulu databasenya. Saya akan kasih dump databasenyanya saja. Saya anggap teman-teman di sini sudah pinter bikin database lewat phpmyadmin. kalau belum bisa melihat artikel-artikel saya yang terdahulu.

 view plain  print 

1.     
2. CREATE TABLE `tree` (  
3.   `id` int(12) NOT NULL auto_increment,  
4.   `item` text NOT NULL,  
5.   `kelompok` text NOT NULL,  
6.   PRIMARY KEY  (`id`)  
7. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=13 ;  
8.   
9. --   
10. -- Tutorial dari gecko.web.id  
11. --   
12.   
13. INSERT INTO `tree` VALUES (1, 'sawi', 'sayur');  
14. INSERT INTO `tree` VALUES (2, 'buncis', 'sayur');  
15. INSERT INTO `tree` VALUES (3, 'mangga', 'buah');  
16. INSERT INTO `tree` VALUES (4, 'wortel', 'sayur');  
17. INSERT INTO `tree` VALUES (5, 'kucing', 'hewan');  
18. INSERT INTO `tree` VALUES (6, 'kacang panjang', 'sayur');  
19. INSERT INTO `tree` VALUES (7, 'kadal', 'hewan');  
20. INSERT INTO `tree` VALUES (8, 'rambutan', 'buah');  
21. INSERT INTO `tree` VALUES (9, 'kubis', 'sayur');  
22. INSERT INTO `tree` VALUES (10, 'monyet', 'hewan');  
23. INSERT INTO `tree` VALUES (11, 'kucing', 'hewan');  
24. INSERT INTO `tree` VALUES (12, 'manggis', 'buah');  
25. INSERT INTO `tree` VALUES (12, 'gajah', 'hewan');  

CREATE TABLE `tree` ( `id` int(12) NOT NULL auto_increment, `item` text NOT NULL, `kelompok` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=13 ; -- -- Tutorial dari gecko.web.id -- INSERT INTO `tree` VALUES (1, 'sawi', 'sayur'); INSERT INTO `tree` VALUES (2, 'buncis', 'sayur'); INSERT INTO `tree` VALUES (3, 'mangga', 'buah'); INSERT INTO `tree` VALUES (4, 'wortel', 'sayur'); INSERT INTO `tree` VALUES (5, 'kucing', 'hewan'); INSERT INTO `tree` VALUES (6, 'kacang panjang', 'sayur'); INSERT INTO `tree` VALUES (7, 'kadal', 'hewan'); INSERT INTO `tree` VALUES (8, 'rambutan', 'buah'); INSERT INTO `tree` VALUES (9, 'kubis', 'sayur'); INSERT INTO `tree` VALUES (10, 'monyet', 'hewan'); INSERT INTO `tree` VALUES (11, 'kucing', 'hewan'); INSERT INTO `tree` VALUES (12, 'manggis', 'buah'); INSERT INTO `tree` VALUES (12, 'gajah', 'hewan'); Untuk mempermudah pemahaman saya akan menampilkan kode awal sebelum jadi. Ini adalah kode untuk menampilkan cabang utama yakni dari kolom kelompok.

1. "sitemapstyler.css" rel="stylesheet" type="text/css" media="screen" />  
2. "text/javascript" src="sitemapstyler.js">  
3.   
5.   
6. $db_host = "localhost";  
7. $db_user = "root";  
8. $db_pass = "sipit";  
9. $db_name = "test";  
10.   
11.   
12. /******************************************** 
13.    copyright 2008 http://www.gecko.web.id 
14. *********************************************/  
15.   
16. $link = mysql_pconnect ($db_host, $db_user, $db_pass) or die ("Ga bisa connect");  
17. mysql_select_db ($db_name) or die ("Ga bisa select database");  
18.   
19. $sql = mysql_query("SELECT * FROM tree group by kelompok ") or die(mysql_error());  
20.   
21. echo '';  
22.   
23.     while ($res=mysql_fetch_array($sql)) {  
24.       $item = $res['item'];  
25.       $kelompok = $res['kelompok'];  
26.         
27.       echo '
28. '.$kelompok.'
';  
29.         
30.       }   
31.         
32. echo '';  
33.   
34.   
35. ?>  

<link href="sitemapstyler.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="sitemapstyler.js"></script> <?php $db_host = "localhost"; $db_user = "root"; $db_pass = "sipit"; $db_name = "test"; /******************************************** copyright 2008 http://www.gecko.web.id *********************************************/ $link = mysql_pconnect ($db_host, $db_user, $db_pass) or die ("Ga bisa connect"); mysql_select_db ($db_name) or die ("Ga bisa select database"); $sql = mysql_query("SELECT * FROM tree group by kelompok ") or die(mysql_error()); echo '<ul id="sitemap">'; while ($res=mysql_fetch_array($sql)) { $item = $res['item']; $kelompok = $res['kelompok']; echo '<li><a href="#">'.$kelompok.'</a></li>'; } echo '</ul>'; ?> Pada kode di atas menggunakan perintah sql group. Gunanya adalah untuk mengelompokkan apabila terjadi nama yang sama. pada kasus di atas ada 13 item yang masuk pada 3 kelompok. Untuk mengambil nama kelompok inilah digunakan group by kelompok.
Setelah list cabang utama ditampilkan, kini tinggal menampilkan rantingnya yakni dari kolom item. Di sini penulis menggunakan query di dalam query. dengan mengambil value kelompok dari query sebelumnya. Kode lengkapnya bisa dilihat di bawah ini.

1. "sitemapstyler.css" rel="stylesheet" type="text/css" media="screen" />  
2. "text/javascript" src="sitemapstyler.js">  
3.   
5.   
6. $db_host = "localhost";  
7. $db_user = "root";  
8. $db_pass = "sipit";  
9. $db_name = "test";  
10.   
11.   
12. /******************************************** 
13.    copyright 2008 http://www.gecko.web.id 
14. *********************************************/  
15.   
16. $link = mysql_pconnect ($db_host, $db_user, $db_pass) or die ("Ga bisa connect");  
17. mysql_select_db ($db_name) or die ("Ga bisa select database");  
18.   
19. $sql = mysql_query("SELECT * FROM tree group by kelompok ") or die(mysql_error());  
20.   
21. echo '';  
22.   
23.     while ($res=mysql_fetch_array($sql)) {  
24.       $kelompok = $res['kelompok'];  
25.         
26.         echo '
27. '.$kelompok.'';  
28.           $sql2 = mysql_query("SELECT * FROM tree where kelompok = '$kelompok' ") or die(mysql_error());  
29.           echo '
    ';  
    •             while ($res2 = mysql_fetch_array($sql2)) {  
    •                     $item = $res2['item'];  
    •               echo '
    • '.$item.'
    ';  
    •             }  
    •           echo '
    ';  
30.       echo '
';  
31.         
32.       }   
33.         
34. echo '';  
35.   
36.   
37. ?>  

<link href="sitemapstyler.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="sitemapstyler.js"></script> <?php $db_host = "localhost"; $db_user = "root"; $db_pass = "sipit"; $db_name = "test"; /******************************************** copyright 2008 http://www.gecko.web.id *********************************************/ $link = mysql_pconnect ($db_host, $db_user, $db_pass) or die ("Ga bisa connect"); mysql_select_db ($db_name) or die ("Ga bisa select database"); $sql = mysql_query("SELECT * FROM tree group by kelompok ") or die(mysql_error()); echo '<ul id="sitemap">'; while ($res=mysql_fetch_array($sql)) { $kelompok = $res['kelompok']; echo '<li><a href="#">'.$kelompok.'</a>'; $sql2 = mysql_query("SELECT * FROM tree where kelompok = '$kelompok' ") or die(mysql_error()); echo '<ul>'; while ($res2 = mysql_fetch_array($sql2)) { $item = $res2['item']; echo '<li><a href="#">'.$item.'</a></li>'; } echo '</ul>'; echo '</li>'; } echo '</ul>'; ?> Sederhana dan sangat mudah tentunya. Selamat mencoba. Apabila ada saran atau pertanyaan silahkan kasih komentar. Mari kita diskusikan di sini.