Kamis, 10 Desember 2015
Tutorial Cara Membuat Menu Sidebar di YII dengan Bootstrap - Salahsatu persyaratan untuk membuat menu sidebar kali ini adalah aplikasi web anda sudah include bootstrap, menu sidebar biasanya di simpan di bagian kiri konten atau bagian kanan konten tergantung selera, cara menambahkan menu sidebar di yii terbilang cukup mudah, karena anda hanya salin kode script menu sidebar, berikut tutorialnya:
7 Langkah Mudah Membuat Menu Sidebar YII:
1. Pastikan aplikasi bootsrtap anda sudah terinstall / terpasang extension bootstrap seperti yiistrap atau yang lainnya.
2. Pilih menu Themes, pilih folder bootstrap, kemudian folder layout, setelah itu cari file column2.php
3. Tambahkan script tag html untuk membentuk sidebar di file column2.php
4. Masukan kode html berikut ke dalam tag yang mempunyai id sidebar:
<!-- Start: Sidebar - www.infomugi.com --><nav class="navbar-default navbar-side" role="navigation"><div class="sidebar-collapse"><ul class="nav" id="main-menu"><li class="text-center"><img style="padding:15px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9WzDllecnVf94uHlpicNhsHs7jR0dwlHLN0iGAc0wDRu3h6J0miff_PdPdszkwu6a9Wi-QW2XgtJpY-OvLg044IE53D8tWTNIw_xdXzZHBjKi15pCLOjG17FWTKurDoQ8gOatKBwN_vSp/s170/logo-infomugi.png" class="user-image img-responsive"></li><li><a class="active-menu" href="index.php?r=site/index">Dashboard</a></li><li><a href="index.php?r=map/create">Add Map</a></li><li><a href="index.php?r=map/admin">Manage Map</a></li><li><a href="index.php?r=kartu/create">Add Card</a></li><li><a href="index.php?r=kartu/">List Card</a></li><li><a href="index.php?r=customer/create">Add Customer</a></li><li><a href="index.php?r=customer/">List Customer</a></li><li><a href="index.php?r=site/page&view=excel">Export</a></li></ul></div></nav></div><!-- End: Sidebar - www.infomugi.com -->
5. Tambahkan File Sidemugi.css berikut ke file folder css di aplikasi anda ( Lokasi file ada di themes/bootstrap/css/Sidemugi.php ):
Download File CSS: Sidemugi.css - 1 KB
6. Buka file main.php, Lokasi file ada di themes/bootstrap/layouts/main.php
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/sidemugi.css" />
7. Simpan semua konfigurasi, apabila berhasil tampilan menu akan seperti dibawah ini, selamat mencoba jangan lupa untuk memodiikasi link menu sesuai dengan aplikasi anda.
