Creating Menu di CakePHP


Untuk membuat menu dari aplikasi CRUD yang telah kita buat, dapat dilakukan dengan mengedit file default.ctp yang bisa ditemukan di …\nm_aplikasi\views\layouts. Yang harus kita ubah terletak diantara <div id="header"> dan </div>. Misalkan kita ingin menambahkan 4 menu, jika kita klik menu tersebut akan mengarah ke suatu controller yang kita inginkan. Contohnya seperti berikut :

<div id="header">
<h1><?php echo $this->Html->link(__('CakePHP: the
rapid development php framework', true),
'http://cakephp.org'); ?>
</h1>
</div>
<div id="header">
<div id="menu">
<ul>
<li><?php echo $html->link( 'Home', '/' );
?></li>
<li><?php echo $html->link( 'Master', '/master'
); ?></li>
<li><?php echo $html->link( 'Transaksi',
'/transaksi' ); ?></li>
<li><?php echo $html->link( 'Report', '/report'
); ?></li>
</ul>
</div>
</div>
Before After

Kemudian kita ubah CSS yang digunakan oleh CakePHP, yaitu cake.generic.css yang bisa kita temukan di …\nm_aplikasi\webroot\css. Kemudian tambahkan script CSS seperti dibawah ini :

/* Menu */
#menu {
float: left;
width: 1800px;
height: 45px;
}


#menu ul {
margin: 0;
padding: 0px 0px 0px 5px;
list-style: none;
line-height: normal;
}

#menu li {
display: block;
float: left;
}

#menu a {
display: block;
float: left;
height: 20px;
margin-right: 3px;
padding: 14px 25px 15px 25px;
background: url(../images/img09.jpg) no-repeat left 18px;
text-decoration: none;
text-transform: capitalize;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
}

#menu a:hover { text-decoration: underline; }

Kemudian jalankan aplikasi melalui link url seperti berikut : http://localhost/nm_aplikasi/buku maka tampilannya akan seperti berikut ini :

Menu di CakePHP

Menu di CakePHP

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s