Wednesday, November 26, 2014

Aplikasi Web dengan Yii Framework (3)

Sahabat-sahabatku sekalian dalam suasana dingin karena cuaca hujan yang sedang melanda Kota Bandung hari ini Rabu 26.11.2014 blog www.rahmatsbm84.blogsopot.com tetap ingin berbagi materi web dengan lanjutan posting sebelumnya (Aplikasi Web dengan Yii Framework (2)). Setelah sebelumnya saya sudah berikan "PR" untuk membuat model dan CRUD untuk tabel sifat_surat, klasifikasi_surat, surat_masuk, surat_keluar dan surat_masuk_disposisi dan karena saya sedang baik maka "PR" itu tidak akan saya periksa (cie.cie...jadi guru cerita-nya). Oleh karena itu, saya anggap model dan CRUD tabel tersebut sudah dibuat. Pada posting Aplikasi Web dengan Yii Framework (3) ini saya akan bahas cara membuat menu drop down untuk mempermudah akses model dan CRUD yang sudah dibuat. 

Aplikasi Web dengan Yii Framework (3) - Membuat Menu Drop Down

  1. Copy dan paste skrip css di bawah ini di akhir file main.css (D:\xampp\htdocs\make-surat\css\main.css) 

  2. /*menu drop down*/
    
    #mainmenu {
        height: 28px;
    }
    #mainmenu > ul > li {  
        overflow: visible;
        display: block; 
        float: left; 
    }
    #mainmenu > ul > li ul { 
        display: none;
        position: absolute;
        background: #FFF; 
        padding: 0;
        height: auto; 
    }
    
    #mainmenu > ul > li > ul { 
        margin-top: 4px;
        
    }
    
    #mainmenu > ul > li > ul li ul { 
        margin-top: -20px; 
        left:99%;
        width: 100%;
    }
    
    #mainmenu ul li:hover > ul { 
        display: block; 
    }
    #mainmenu ul li ul li a{
        padding: 4px 14px; 
        background-color: #EFF4FA;
        color: #6399CD;
        text-decoration: none;
        display: block;
    }
    #mainmenu ul li ul li a:hover { 
        color: #fff; 
        background:#0066CC
    }
    

  3. Copy dan paste skrip html di bawah ini di file main.php (D:\xampp\htdocs\make-surat\protected\views\layouts\main.php) diantara menu Home dan About

  4.     
    array('label'=>'Home', 'url'=>array('/site/index')),
     //mulai sintak menu drop down
        array('label'=>'Master Data', 'url'=>array(''), 
     'items'=>array(                    
      array('label'=>'Jenis Surat', 'url'=>array('/jenissurat')),
      array('label'=>'Sifat Surat', 'url'=>array('/sifatsurat')),
      array('label'=>'Klasifikasi Surat', 'url'=>array('/klasifikasisurat')),
      ),'visible'=>!Yii::app()->user->isGuest //bisa diakses setelah login
     ),
        array('label'=>'Transaksi', 'url'=>array(''), 
     'items'=>array(                    
      array('label'=>'Surat Masuk', 'url'=>array('/suratmasuk')),
      array('label'=>'Surat Keluar', 'url'=>array('/suratkeluar')),
      ),'visible'=>!Yii::app()->user->isGuest
     ),
        array('label'=>'Laporan', 'url'=>array(''), 
     'items'=>array(                    
      array('label'=>'Surat Masuk', 'url'=>array('#')), //link kosong sementara
      array('label'=>'Surat Keluar', 'url'=>array('#')), //link kosong sementara
      ),'visible'=>!Yii::app()->user->isGuest
     ), 
     //akhir sintak menu drop down
    array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
    

  5. Ketik http://localhost/make-surat > klik menu Login > isi kolom Username dan Password dengan admin > klik tombol Login. Jika berhasil akan muncul menu drop down MAKE-SURAT yang cuantiiiks.

  6. yii menu drop down
    menu drop down make-surat

Semoga Bermanfaat
Salam Edukasi dan TI
Rahmat Rahimi

No comments:

Post a Comment