Artikel

Panduan membuat menu beserta sub menu pada tema Apricot CMS

    Dibaca 7089 kali

Dalam artikel kali ini saya akan memberikan tutorial cara menampilkan daftar menu beserta semua sub-menunya.

Apricot CMS sebenarnya telah menyediakan 2 variable umum untuk menyediakan daftar menu yaitu variable "$menu_horizontal" dan "$menu_vertikal". Namun kedua variable ini hanya menyediakan menu pada level paling atas saja.

 

Alasan mengapa saya tidak menyediakan variable umum yang sudah menyediakan semua sub menu, adalah karena pertimbangan saya bahwa ketika saya menyediakannya, otomatis hasilnya sudah dalam bentuk menu jadi. Dalam kondisi seperti itu (menu sudah jadi), otomatis menunya tidak bisa di costum lagi. Bagaimana jika seseorang mau memberika atribut class atau id pada masing menu? bagaimana jika seseorang mau meberikan effect - effect pada menu? pasti sangat tidak memungkinkan.

 

Maka dari itu, menurut hemat saya, praktek terbaik dalam membuat menu beserta submenu nya adalah dengan dibuat sendiri. Berikut ini saya akan memberikan contoh code bagaimana melakukan pengambilan data menu.

 

 

1. Coba anda buat tema baru bernama tema "latihan" , lalu aktifkan tema tersebut.

 

 

2. Buka folder "application/views/latihan" lalu edit file header.php. Kamu akan menemukan file itu masih kosong.

 

3. Lalu masukan code ini

class menu_apricot {

	public $CI;

	public $menu;

	function __construct(){
		$this->CI =& get_instance();
	}


	// fungsi untuk mengambil menu
	function ambil_menu($type_menu,$parent=0){

		$kondisi=array(

			"menu_id"=>$type_menu,
			"menu_child_parent" => $parent,
			"aktif" => "Y"

			);
		//query ke database
		$this->CI->db->order_by("posisi","ASC");
		$query= $this->CI->db->get_where("menu_child",$kondisi);

		//cek apakah memiliki hasil
		if($query->num_rows()>0){
			$this->menu.="<ul>";
			
			foreach ($query->result_array() as $menu) {
				$this->menu.= "<li><a href='$menu[menu_child_url]' target='$menu[menu_child_target]'>$menu[menu_child_nama]</a>";
				//panggil ambil_menu() secara reqursive untuk mengambil sub-menu nya
				$this->ambil_menu($type_menu,$menu['menu_child_id']);
				$this->menu.= "</li>";


			}

			$this->menu.="</ul>";

		} else {
			//jika tidak ada hasil.
			return;

		}

	}


}

 

 

4. Buka halaman administrator. Lalu pada menu utama, masukan dan atur menu menunya seperti ini

 

 

Sekarang kembali ke file yang sementara diedit tadi lalu tambahkan code ini dibawahnya

 

$menuPertama = new menu_apricot;
$menuPertama->ambil_menu(1); //angka 1 adalah ID menu horizontal 
echo $menuPertama->menu;

 

Buka Browser kamu lalu buka buka alamat project kamu misalnya "http://localhost/apricot/" maka kamu akan mendapatkan hasil seperti ini

 

  

 

 

Kembali lagi ke halaman admin Lalu pada menu samping, masukan dan atur menu menunya seperti ini

 

 

 

Lalu kembali ke file yang sementara diedit tadi lalu tambahkan code berikut ini

 

$menuKedua =new menu_apricot;
$menuKedua->ambil_menu(2); //angka 2 adalah ID menu vertical
echo $menuKedua->menu;

 

Refresh browser kamu maka kamu akan mendaptkan hasil seperti ini

 

 

 

 

Jika kamu perhatikan menu yang dihasilkan telah terstruktur dan tersusun sesuai urutan dan posisi yang benar.

Kini tinggal kamu mainkan sisanya. Silahkan kamu tambahkan element, atribut atribut ,pengaturan CSS, dan javascript untuk memberikan effect dropdown, show/hide dan lain lain. 

 

 

Demikianlah tutorial kali ini. Semoga bermanfaat untuk kita semua :)

 

Silahkan baca Part 2 disini

 

 

full code "application/views/latihan/header.php"

<?php

class menu_apricot {

	public $CI;

	public $menu;

	function __construct(){
		$this->CI =& get_instance();
	}


	// fungsi untuk mengambil menu
	function ambil_menu($type_menu,$parent=0){

		$kondisi=array(

			"menu_id"=>$type_menu,
			"menu_child_parent" => $parent,
			"aktif" => "Y"

			);
		//query ke database
		$this->CI->db->order_by("posisi","ASC");
		$query= $this->CI->db->get_where("menu_child",$kondisi);

		//cek apakah memiliki hasil
		if($query->num_rows()>0){
			$this->menu.="<ul>";
			
			foreach ($query->result_array() as $menu) {
				$this->menu.= "<li><a href='$menu[menu_child_url]' target='$menu[menu_child_target]'>$menu[menu_child_nama]</a></li>";

				//panggil ambil_menu() secara reqursive untuk mengambil sub-menu nya
				$this->ambil_menu($type_menu,$menu['menu_child_id']);
			}

			$this->menu.="</ul>";

		} else {
			//jika tidak ada hasil.
			return;

		}

	}


}



echo "<h3>Menu Pertama</h3>";
$menuPertama = new menu_apricot;
$menuPertama->ambil_menu(1); //angka 1 adalah ID menu horizontal 
echo $menuPertama->menu;



echo "<hr>";
echo "<h3>Menu Kedua</h3>";
$menuKedua =new menu_apricot;
$menuKedua->ambil_menu(2); //angka 2 adalah ID menu vertical
echo $menuKedua->menu;

 ?>