Memasang Menu Dropdown Apycom 3 Level pada Lokomedia (Not Looping)

Berangkat dari beberapa respon dalam tulisan Solusi Drop Down Menu 3 Level pada Lokomedia 1.5 pada blog saya lainnya, kita akan bahas langkah-langkah membuat menu dropdown apycom yang digunakan pada lokomedia menjadi 3 level. Cara ini hanya digunakan untuk menu 3 level saja, karena jika kita ingin membuat menu dengan level yang lebih banyak, maka script ini tidak efektif dan akan memakan ruang memori yang lebih banyak. Untuk membuat menu dengan level yang lebih banyak bisa menggunakan teknik looping yang akan kita bahas di artikel lainnya. Kita tinggalkan dulu menu level jamak, dan kembali kepada menu apycom 3 level pada lokomedia.

Step 1. Tentukan menu Apyom yang akan kita gunakan, lihat di http://apycom.com/. Cocokkan style dan warna dengan template yang akan kita gunakan (misalnya kita menggunakan template eljquery2 yang memang menggunakan menu apycom maka style 12 adalah yang cocok). Download versi Free dengan ketentuan yang disyaratkan.

apycom-menu
Step 2. Buat tabel menu di database. Tabel menu ini berbeda dengan tabel menu pada lokomedia default yang memisahkan antara mainmenu dan submenu. Dalam database ini baik main menu, sub menu 1 dan submenu 2 disimpan dalam satu tabel saja. Untuk membuat table menu ini, dapat dilakukan melalui halaman phpmyadmin dengan mengeksekusi kode SQL berikut :

sql-insert

CREATE TABLE `menu` (
`id_menu` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`id_parent` INT( 5 ) NOT NULL DEFAULT '0',
`nama_menu` VARCHAR( 30 ) NOT NULL ,
`link` VARCHAR( 100 ) NOT NULL ,
`aktif` ENUM( 'Y', 'N' ) NOT NULL DEFAULT 'Y'
) ENGINE = MYISAM

Atau import file SQL berikut melalui phpmyadmin.

import-db
Step 3. Buat modul pengelola menu pada halaman administrator. Caranya sesuai dengan standar pembuatan modul lokomedia. Modulnya bisa didownload disini. Extract modul tersebut dan copykan folder mod_menu beserta file didalamanya ke direktori ../adminweb/modul. Kemudian kita buat modul menu pada manajemen modul halaman administrator dan tambahkan beberapa script untuk memanggil modul pada file content.php dalam folder adminweb.

menu-module

Step 4. Memasukkan kode apycom ke template.php dengan sedikit modifikasi agar menu terkoneksi dengan database secara dinamis. Kita akan coba terapkan style apycom ini dalam template eljquery2. Caranya extract file download apycom yang sudah kita lakukan pada step 1. Baca file help.txt sebagai petunjuk instalasi. Copykan file yang berextensi javascrpt (.js) ke dalam folder ../templates/eljquery2/js/ dan file css (.css) beserta folder images ke dalam folder../templates/eljquery2/css/. Setelah selesai ‘ngopi’ kita kembali ke file template.php untuk mengedit sedikit script menunya.
1. Panggil script javascript dan css menu

<script src="<?php echo "$f[folder]/js/menu.js" ?>" type="text/javascript"></script>
<link rel="stylesheet" href="<?php echo "$f[folder]/css/menu.css" ?>" type="text/css" />

2. Edit script menu dengan mereplace menu default dengan kode berikut :

<div id="top">
         <!-- MENU -->
         <div id="menu">
		     <ul class="menu">
           <?php               
             $main=mysql_query("SELECT * FROM menu WHERE id_parent='0' AND aktif='Y'");
             while($r=mysql_fetch_array($main)){
             echo "<li><a href='$r[link]'><span>$r[nama_menu]</span></a>";
             $sub=mysql_query("SELECT * FROM menu WHERE id_parent='$r[id_menu]' AND aktif='Y'");
              	 $jml=mysql_num_rows($sub);
               // apabila sub menu ditemukan
               if ($jml > 0){
                 echo "<div><ul>";
                while($w=mysql_fetch_array($sub)){
 						$sub2=mysql_query("SELECT * FROM menu WHERE id_parent='$w[id_menu]' AND aktif='Y'");
					$jml2=mysql_num_rows($sub2);
					if ($jml2 > 0){
					echo "<li><a href='$w[link]' class='parent'><span>&#187; $w[nama_menu]</span></a>";
					echo "<div><ul>";
					while($x=mysql_fetch_array($sub2)){
						echo "<li><a href='$x[link]'><span>&#187; $x[nama_menu]</span></a></li>";
					}
					echo"</ul></div></li>";
					}
					else{
					echo "<li><a href='$w[link]'><span>&#187; $w[nama_menu]</span></a>";	
					}
                }           
                echo "</li></ul></div>
                       </li>";
               }
               else{
			  echo "</li>";
               }
             }        
           ?>
	      </ul>
       </div>	<!-- /menu -->
	    </div> <!-- /top -->

Coba liahat hasilnya. Mudah-mudahan berhasil.

dropdown-apycom