14 Des 2012

Membuat Menu Tree Multi level dengan PHP.

Di dalam sebuah website, seringkali kita menemukan penggunaan menu bertingkat seperti pada gambar di atas. Menu yang bertingkat tersebut sebenarnya adalah sebuah struktur pohon/tree di mana suatu menu bisa memiliki anak (submenu), dan submenu tersebut juga bisa memiliki anak lagi dan seterusnya sampai level tak terbatas. Berikut ini adalah contoh struktur html menu yang terdiri dari 3 level (menggunakan tag html <ul> dan <li>):

<ul>
    <li><a href="menu1.html">Menu 1</a></li>
    <li><a href="menu2.html">Menu 2</a></li>
    <li><a href="menu3.html">Menu 3</a>
        <ul>
            <li><a href="menu31.html">Sub Menu 3.1</a></li>
            <li><a href="menu32.html">Sub Menu 3.2</a>
                <ul>
                    <li><a href="menu321.html">Sub Menu 3.2.1</a></li>
                    <li><a href="menu322.html">Sub Menu 3.2.2</a></li>
                    <li><a href="menu323.html">Sub Menu 3.2.3</a></li>
                </ul>
            </li>
            <li><a href="menu33.html">Sub Menu 3.3</a></li>
        </ul>
    </li>
    <li><a href="menu4.html">Menu 4</a></li>
</ul>

Kode html tersebut akan menghasilkan tampilan seperti ini:
  • Menu 1
  • Menu 2
  • Menu 3 
  • Sub Menu 3.1
    • Sub Menu 3.2 
        • Sub Menu 3.2.1
        • Sub Menu 3.2.2
    •   Sub Menu 3.3 
  •  Menu 4
Dengan menggunakan jquery dan plugin jquerycssmenu, menu tersebut bisa kita ubah menjadi sebuah menu dropdown yang lebih menghemat tempat. Tinggal tambahkan script berikut ini di dalam head:
    
<link rel="stylesheet" type="text/css" href="jquerycssmenu.css" />

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquerycssmenu.js"></script>

Kemudian gunakan script php ini untuk membuat list secara dinamis dari database tersebut. Script ini menggunakan sebuah fungsi rekursif untuk mengambil menu sampai ke level tak terbatas.

<?php
     function get_menu($data, $parent = 0) {
     static $i = 1;
     $tab = str_repeat("\t\t", $i);
     if (isset($data[$parent])) {
     $html = "\n$tab<ul>";
     $i++;
     foreach ($data[$parent] as $v) {
     $child = get_menu($data, $v->id);
     $html .= "\n\t$tab<li>";
     $html .= '<a href="'.$v->url.'">'.$v->title.'</a>';
     if ($child) {
     $i--;
     $html .= $child;
     $html .= "\n\t$tab";
     }
     $html .= '</li>';
     }
     $html .= "\n$tab</ul>";
     return $html;
     } else {
       return false;
     }
     }
     mysql_connect('localhost', 'root', '');
     mysql_select_db('tes');
     $result = mysql_query("SELECT * FROM menu ORDER BY menu_order");
     while ($row = mysql_fetch_object($result)) {
     $data[$row->parent_id][] = $row;
     }
     $menu = get_menu($data);
?>
Semoga Bermanfaat...!






5 komentar:

  1. terimakasih gan...
    artikelnya sangat membantu

    BalasHapus
  2. hahhaha,dapek ang blosg's sadam

    BalasHapus
  3. Masih kurang...!

    BalasHapus
  4. Apa sih isinya...!
    Udah ga ada isinya + Jeleknya Lagi.

    BalasHapus
  5. Terimakasih gan atas komentar2nya...!
    dan sy mohon masukannya dm kesempurnaan blog ini.
    Terimakasih

    BalasHapus