Artikel

Menampilkan menu beserta sub-menu pada Apricot CMS menggunakan Bootstrap dan CSSmenumaker

    Dibaca 3955 kali Javascript codeigniter CMS

Pada tutorial kita kali ini, kita akan belajar cara membuat menu beserta sub menunya pada tema Apricot CMS. 

 

 

Nah pada tutorial pertama, kita sudah bisa menampilkan semua daftar menu beserta sub menunya tapi hanya masih berbentuk raw HTML list.

Namun pada tutorial kali ini kita akan membuat menu yang 100% sudah jadi.  

 

 

Pada pembuatan menu kali ini, kita akan membuat 2 menu. Yang satu menggunakan Cssmenumaker dan yang satunya menggunakan Bootstrap.
Kelebihan dari cssmenumaker dibandingkan dengan bootstrap, cssmenumaker relative lebih mudah dibuat dan support multilevel sub menu  . Sedangkan pada bootstrap, hanya mendukung beberapa level sub menu saja dan konfigurasinya agak lebih ribet.

Namun gak masalah. Karena tutorial ini akan mencover kedua-duanya.

 

Btw sebelum melangkah lanjut pada tutorial ini, saya mau bilang bahwa ini adalah tutorial lanjutan dari tuorial pertama. Semua persiapan dan konfigurasi awal yang dibutuhkan  tutorial ini sudah dijelaskan pada tutorial pertamaYang akan kita lakukan pada tutorial kali ini hanya memodifikasi script yang sudah kita buat sebelumnya.
Jadi pastikan kamu sudah membaca dan mengikuti tutorial yang sebelumnya.

 

 

Nah, sekarang kita perlu untuk mempersipkan semua assets yang diperlukan. Yang akan kita butuhkan saat ini adalah jQuery, Bootstrap, dan script gratisan yang didownload dari situs cssmenumaker.com.

 

Dan semua sudah saya siapkan, silahkan download disini
Download

 

 

 

Perhatian!
Sebenarnya  dengan memberikan link dowload source code cssmenumaker sebenarnya saya sudah melanggar ketentuan mereka yang melarang meredistribusikan source code mereka lewat website lain.

Namun perlu saya jelskan bahwa ini saya lakukan demi kepentingan tutorial saja. Semua hak cipta tetaplah milik cssmenumaker.com.

 

 

Setelah selesai download, ekstrak semua filenya didalam folder an-theme/latihan/assets

 

 

Sudah?

Jika sudah, selanjutnya buka kembali file header.php yang ada didalam folder application/views/latihan


Modifikasi kode yang telah dibuat sebelumnya menjadi seperti ini

 

 

header.php

<html>
<head>
	<title>Latihan Menu</title>


<link rel="stylesheet" type="text/css" href="<?php echo assets_url('bootstrap/css/bootstrap.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?php echo assets_url('css-menu/styles.css') ?>">

<script type="text/javascript" src="<?php echo assets_url('jquery.js') ?>"></script>
<script type="text/javascript" src="<?php echo assets_url('bootstrap/js/bootstrap.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo assets_url('css-menu/script.js') ?>"></script>

<style type="text/css">
body{
	background-color: #ccc;
}
</style>


</head>
<body>




<?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>";
				//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;

		}

	}


}

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

?>


<div class="container">
	<div id='cssmenu'>
		<?php echo $menuPertama->menu;  ?>
	</div>

</div>

 

 

Jangan lupa tutup tag body dan html nya pada file footer.php

 

 

footer.php

</body>
</html>

 

 

Selanjutnya pada halaman administrator, klik Pengaturan Menu , lalu  edit menu utama . Silahkan buat menu, dan atur semua posisi sesuai kebutuhan kamu.
Misalnya seperti ini

 

 

Jangan lupa klik tombol Update Posisi setiap kali kamu, mengatur posisi atau menambahkan menu!




Buka Browser kamu lalu buka buka alamat project kamu misalnya "http://localhost/apricot/"

 

Ini dia hasilnya (screenshot)

 

 

 

Menu Dropdown

 

 

 

 

 

 

 

Pada tampilan Mobile

 

 

Nah, itu adalah menu yang dibuat dengan cssmenumaker. Gampang bukan? :)

 

 

 

Nah sekarang, menggunakan Bootstrap.

 

Tapi sebelumnya, pada halaman administrator > Pengaturan Menu  > menu utama . Silahkan buat menu, rubah dan atur semua posisi sesuai kebutuhan kamu.
Misalnya seperti ini

 

 

 

lalu kembali kepada file header.php Silahkan modifikasi code yang tadi menjadi seperti ini

 

 

header.php

<html>
<head>
	<title>Latihan Menu</title>


<link rel="stylesheet" type="text/css" href="<?php echo assets_url('bootstrap/css/bootstrap.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?php echo assets_url('css-menu/styles.css') ?>">

<script type="text/javascript" src="<?php echo assets_url('jquery.js') ?>"></script>
<script type="text/javascript" src="<?php echo assets_url('bootstrap/js/bootstrap.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo assets_url('css-menu/script.js') ?>"></script>

<style type="text/css">
body{
	background-color: #ccc;
}
</style>


</head>
<body>




<?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){
			$class=$parent==0?"nav navbar-nav":"dropdown-menu";
			$this->menu.="<ul class='$class'>";
			
			foreach ($query->result_array() as $menu) {
				//cek apakah menu sekarang mempunyai submenu atau tidak
				$cek=$this->CI->db->get_where('menu_child',array('menu_child_parent'=>$menu['menu_child_id'],'aktif'=>'Y','menu_id'=>$type_menu));

				//jika terdapat sub menu
				if($cek->num_rows()>0){

					$this->menu.= "<li class='dropdown'><a href='$menu[menu_child_url]' target='$menu[menu_child_target]'  class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'>$menu[menu_child_nama] <span class='caret'></span></a>";
					//panggil ambil_menu() secara reqursive untuk mengambil sub-menu nya
					$this->ambil_menu($type_menu,$menu['menu_child_id']);
					$this->menu.= "</li>";

				}
				//jika tidak memiliki sub menu
				 else {
					$this->menu.= "<li><a href='$menu[menu_child_url]' target='$menu[menu_child_target]'>$menu[menu_child_nama]</a>";
					$this->menu.= "</li>";
				}

			}

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

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

		}

	}


}

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

?>



	<nav class="navbar navbar-inverse">
		<div class="container">
			    <div class="navbar-header">
			      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			        <span class="sr-only">Toggle navigation</span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			      </button>
			      <a class="navbar-brand" href="#">Sandro ID</a>
			    </div>


	  			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		<?php echo $menuPertama->menu;  ?>

	  			</div>

	    </div>
	</nav>


 

 

 

Refresh browser kamu. Dan ini hasilnya

 

 

 

Menu Dropdown

 

 

 

Pada ukuran mobile

 

 

Sama dengan yang sudah saya sebutkan diatas, Menu menggunakan Bootstrap memiliki kekurangan. Yaitu:

1.Gak support lebih dari 2 level menu.

2 Menu yang memiliki sub menu, link tidak akan aktif, karena menu tersebut berperan sebagai toggle dropdown.


 

 

Nah demikian tutorial kali ini.

Mohon dikoreksi jika ada kesalahan pada tutorial ini. Dan jika ada pertanyaan silahkan tinggalkan pertanyaan dibagian komentar.