Cara Menggunakan Multiple Theme di Yii2 | KafeinKode

Kursus bahasa arab berkualitas

Cara Menggunakan Multiple Theme di Yii2

Anonim 1 comment



Bagi yang masih pemula di yii2, mungkin akan bertanya-tanya, gimana sih cara menggunakan multiple theme di yii2 basic dan advanced? cara me- load theme di yii2? cara menambahkan theme atau template di Yii2? cara mengganti template di Yii2? Dan seterusnya. Jawaban dari semua pertanyaan itu ada di sini semuanya, jika sobat sudah paham logikanya, sobat bisa mengembangkannya sesuai kebutuhan.

Pada kasus pemasangan theme AdminLTE yang kita bahas sekarang ini, kita menganut sistem loading multiple theme di yii2 advanced bagian frontend, dalam artian jika si user atau visitor belum login maka tema yang ditampilkan adalah tema default yii, namun apabila dia sudah login dan berhasil, maka template yang ditampilkan adalah template AdminLTE.

Cara-Menggunakan-Multiple-Theme-di-Yii2

Langsung saja tanpa basa basi, kita akan jelaskan caranya step by step.

Cara Menggunakan Multiple Theme di Yii2

Step 1: Install terlebih dahulu template AdminLTE nya via composer. Bagi yang belum tau cara menginstall template AdminLTE via composer, sobat bisa membacanya di http://www.kafeinkode.com/cara-install-adminlte-di-yii2/

Step 2: Setelah berhasil diinstal via composer, langkah kedua adalah download tema AdminLTE melalui situs resminya di https://almsaeedstudio.com/preview. Setelah berhasil di download, sobat ekstrak dan sobat bisa buka-buka file yang ada di dalamnya, di situ terdapat banyak file css dan JS.

Step 3: Masuk ke direktori frontend/web jika belum ada folder js, buat folder js terlebih dahulu. lalu pindahkan file-file css adminlte ke folder css, dan file-file js adminlte ke folder js.
fol

Step 4: Masuk ke folder frontend/assets, lalu buka file AppAsset.php, Load semua file css dan jsnya, tidak semuanya sih yang diperlukan aja. Kurang lebih seperti ini
Cuplikan layar dari 2015-11-15 11:25:14

Step 5: Buat file di folder frontend/views/layouts/ beri nama filenya misal adminlte.php, lalu ketikkan script di bawah ini

<?php /* @var $this \yii\web\View */ /* @var $content string */ use yii\helpers\Html; use yii\bootstrap\Nav; use yii\bootstrap\NavBar; use yii\widgets\Breadcrumbs; use frontend\assets\AppAsset; use common\widgets\Alert; AppAsset::register($this); dmstr\web\AdminLteAsset::register($this); $directoryAsset = Yii::$app->assetManager->getPublishedUrl('@vendor/almasaeed2010/adminlte/dist');
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<?php $this->beginBody() ?>


<div class="wrapper">



<header class="main-header">

<?= Html::a('<span class="logo-mini">APP</span><span class="logo-lg">' . Yii::$app->name . '</span>', Yii::$app->homeUrl, ['class' => 'logo']) ?>



<nav class="navbar navbar-static-top" role="navigation">

<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>



<div class="navbar-custom-menu">



<ul class="nav navbar-nav">

<!-- Messages: style can be found in dropdown.less-->


<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>


<ul class="dropdown-menu">


<li class="header">You have 4 messages</li>




<li>
<!-- inner menu: contains the actual data -->


<ul class="menu">


<li><!-- start message -->
<a href="#">


<div class="pull-left">
<img src="<?= $directoryAsset ?>/img/user2-160x160.jpg" class="img-circle"
alt="User Image"/>
</div>




<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>




Why not buy a new awesome theme?

</a>
</li>


<!-- end message -->


<li>
<a href="#">


<div class="pull-left">
<img src="<?= $directoryAsset ?>/img/user3-128x128.jpg" class="img-circle"
alt="user image"/>
</div>




<h4>
AdminLTE Design Team
<small><i class="fa fa-clock-o"></i> 2 hours</small>
</h4>




Why not buy a new awesome theme?

</a>
</li>




<li>
<a href="#">


<div class="pull-left">
<img src="<?= $directoryAsset ?>/img/user4-128x128.jpg" class="img-circle"
alt="user image"/>
</div>




<h4>
Developers
<small><i class="fa fa-clock-o"></i> Today</small>
</h4>




Why not buy a new awesome theme?

</a>
</li>




<li>
<a href="#">


<div class="pull-left">
<img src="<?= $directoryAsset ?>/img/user3-128x128.jpg" class="img-circle"
alt="user image"/>
</div>




<h4>
Sales Department
<small><i class="fa fa-clock-o"></i> Yesterday</small>
</h4>




Why not buy a new awesome theme?

</a>
</li>




<li>
<a href="#">


<div class="pull-left">
<img src="<?= $directoryAsset ?>/img/user4-128x128.jpg" class="img-circle"
alt="user image"/>
</div>




<h4>
Reviewers
<small><i class="fa fa-clock-o"></i> 2 days</small>
</h4>




Why not buy a new awesome theme?

</a>
</li>


</ul>


</li>




<li class="footer"><a href="#">See All Messages</a></li>


</ul>


</li>




<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>


<ul class="dropdown-menu">


<li class="header">You have 10 notifications</li>




<li>
<!-- inner menu: contains the actual data -->


<ul class="menu">


<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>




<li>
<a href="#">
<i class="fa fa-warning text-yellow"></i> Very long description here that may
not fit into the page and may cause design problems
</a>
</li>




<li>
<a href="#">
<i class="fa fa-users text-red"></i> 5 new members joined
</a>
</li>





<li>
<a href="#">
<i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a>
</li>




<li>
<a href="#">
<i class="fa fa-user text-red"></i> You changed your username
</a>
</li>


</ul>


</li>




<li class="footer"><a href="#">View all</a></li>


</ul>


</li>


<!-- Tasks: style can be found in dropdown.less -->


<li class="dropdown tasks-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>


<ul class="dropdown-menu">


<li class="header">You have 9 tasks</li>




<li>
<!-- inner menu: contains the actual data -->


<ul class="menu">


<li><!-- Task item -->
<a href="#">


<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>




<div class="progress xs">


<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>


</div>


</a>
</li>


<!-- end task item -->


<li><!-- Task item -->
<a href="#">


<h3>
Create a nice theme
<small class="pull-right">40%</small>
</h3>




<div class="progress xs">


<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">40% Complete</span>
</div>


</div>


</a>
</li>


<!-- end task item -->


<li><!-- Task item -->
<a href="#">


<h3>
Some task I need to do
<small class="pull-right">60%</small>
</h3>




<div class="progress xs">


<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">60% Complete</span>
</div>


</div>


</a>
</li>


<!-- end task item -->


<li><!-- Task item -->
<a href="#">


<h3>
Make beautiful transitions
<small class="pull-right">80%</small>
</h3>




<div class="progress xs">


<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">80% Complete</span>
</div>


</div>


</a>
</li>


<!-- end task item -->
</ul>


</li>




<li class="footer">
<a href="#">View all tasks</a>
</li>


</ul>


</li>


<!-- User Account: style can be found in dropdown.less -->



<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="<?= $directoryAsset ?>/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
<span class="hidden-xs">Alexander Pierce</span>
</a>


<ul class="dropdown-menu">
<!-- User image -->


<li class="user-header">
<img src="<?= $directoryAsset ?>/img/user2-160x160.jpg" class="img-circle"
alt="User Image"/>


Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>


</li>


<!-- Menu Body -->


<li class="user-body">


<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>




<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>




<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>


</li>


<!-- Menu Footer-->


<li class="user-footer">


<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>




<div class="pull-right">
<?= Html::a( 'Sign out', ['/site/logout'], ['data-method' => 'post', 'class' => 'btn btn-default btn-flat']
) ?>
</div>


</li>


</ul>


</li>



<!-- User Account: style can be found in dropdown.less -->


<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
</li>


</ul>


</div>


</nav>


</header>






<aside class="main-sidebar">



<section class="sidebar">

<!-- Sidebar user panel -->


<div class="user-panel">


<div class="pull-left image">
<img src="<?= $directoryAsset ?>/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
</div>




<div class="pull-left info">


Alexander Pierce


<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>


</div>



<!-- search form -->


<form action="#" method="get" class="sidebar-form">


<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>


</form>


<!-- /.search form -->

<?= dmstr\widgets\Menu::widget( [ 'options' => ['class' => 'sidebar-menu'],
'items' => [
['label' => 'Menu Yii2', 'options' => ['class' => 'header']],
['label' => 'Gii', 'icon' => 'fa fa-file-code-o', 'url' => ['/gii']],
['label' => 'Debug', 'icon' => 'fa fa-dashboard', 'url' => ['/debug']],
['label' => 'Login', 'url' => ['site/login'], 'visible' => Yii::$app->user->isGuest],
[
'label' => 'Same tools',
'icon' => 'fa fa-share',
'url' => '#',
'items' => [
['label' => 'Gii', 'icon' => 'fa fa-file-code-o', 'url' => ['/gii'],],
['label' => 'Debug', 'icon' => 'fa fa-dashboard', 'url' => ['/debug'],],
[
'label' => 'Level One',
'icon' => 'fa fa-circle-o',
'url' => '#',
'items' => [
['label' => 'Level Two', 'icon' => 'fa fa-circle-o', 'url' => '#',],
[
'label' => 'Level Two',
'icon' => 'fa fa-circle-o',
'url' => '#',
'items' => [
['label' => 'Level Three', 'icon' => 'fa fa-circle-o', 'url' => '#',],
['label' => 'Level Three', 'icon' => 'fa fa-circle-o', 'url' => '#',],
],
],
],
],
],
],
],
]
) ?>

</section>



</aside>







<div class="content-wrapper">


<section class="content-header">
<?php if (isset($this->blocks['content-header'])) { ?>


<h1><?= $this->blocks['content-header'] ?></h1>


<?php } else { ?>


<h1>
<?php if ($this->title !== null) {
echo \yii\helpers\Html::encode($this->title);
} else {
echo \yii\helpers\Inflector::camel2words(
\yii\helpers\Inflector::id2camel($this->context->module->id)
);
echo ($this->context->module->id !== \Yii::$app->id) ? '<small>Module</small>' : '';
} ?>
</h1>


<?php } ?>

<?= Breadcrumbs::widget( [ 'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]
) ?>
</section>





<section class="content">
<?= Alert::widget() ?>
<?= $content ?>
</section>


</div>





<footer class="main-footer">


<div class="pull-right hidden-xs">
<b>Version</b> 2.0
</div>


<strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
reserved.
</footer>



<!-- Control Sidebar -->


<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->


<ul class="nav nav-tabs nav-justified control-sidebar-tabs">


<li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>




<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>


</ul>


<!-- Tab panes -->


<div class="tab-content">
<!-- Home tab content -->


<div class="tab-pane" id="control-sidebar-home-tab">


<h3 class="control-sidebar-heading">Recent Activity</h3>




<ul class='control-sidebar-menu'>


<li>
<a href='javascript::;'>
<i class="menu-icon fa fa-birthday-cake bg-red"></i>



<div class="menu-info">


<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>





Will be 23 on April 24th

</div>


</a>
</li>




<li>
<a href='javascript::;'>
<i class="menu-icon fa fa-user bg-yellow"></i>



<div class="menu-info">


<h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>





New phone +1(800)555-1234

</div>


</a>
</li>




<li>
<a href='javascript::;'>
<i class="menu-icon fa fa-envelope-o bg-light-blue"></i>



<div class="menu-info">


<h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>





nora@example.com

</div>


</a>
</li>




<li>
<a href='javascript::;'>
<i class="menu-icon fa fa-file-code-o bg-green"></i>



<div class="menu-info">


<h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>





Execution time 5 seconds

</div>


</a>
</li>


</ul>


<!-- /.control-sidebar-menu -->



<h3 class="control-sidebar-heading">Tasks Progress</h3>




<ul class='control-sidebar-menu'>


<li>
<a href='javascript::;'>


<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>





<div class="progress progress-xxs">


<div class="progress-bar progress-bar-danger" style="width: 70%"></div>


</div>


</a>
</li>




<li>
<a href='javascript::;'>


<h4 class="control-sidebar-subheading">
Update Resume
<span class="label label-success pull-right">95%</span>
</h4>





<div class="progress progress-xxs">


<div class="progress-bar progress-bar-success" style="width: 95%"></div>


</div>


</a>
</li>




<li>
<a href='javascript::;'>


<h4 class="control-sidebar-subheading">
Laravel Integration
<span class="label label-waring pull-right">50%</span>
</h4>





<div class="progress progress-xxs">


<div class="progress-bar progress-bar-warning" style="width: 50%"></div>


</div>


</a>
</li>




<li>
<a href='javascript::;'>


<h4 class="control-sidebar-subheading">
Back End Framework
<span class="label label-primary pull-right">68%</span>
</h4>





<div class="progress progress-xxs">


<div class="progress-bar progress-bar-primary" style="width: 68%"></div>


</div>


</a>
</li>


</ul>


<!-- /.control-sidebar-menu -->

</div>


<!-- /.tab-pane -->

<!-- Settings tab content -->


<div class="tab-pane" id="control-sidebar-settings-tab">


<form method="post">


<h3 class="control-sidebar-heading">General Settings</h3>





<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked/>
</label>



Some information about this general settings option


</div>


<!-- /.form-group -->



<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked/>
</label>



Other sets of options are available


</div>


<!-- /.form-group -->



<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked/>
</label>



Allow the user to show his name in blog posts


</div>


<!-- /.form-group -->



<h3 class="control-sidebar-heading">Chat Settings</h3>





<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked/>
</label>
</div>


<!-- /.form-group -->



<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right"/>
</label>
</div>


<!-- /.form-group -->



<div class="form-group">
<label class="control-sidebar-subheading">
Delete chat history
<a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
</label>
</div>


<!-- /.form-group -->
</form>


</div>


<!-- /.tab-pane -->
</div>


</aside>


<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->


<div class='control-sidebar-bg'></div>



</div>



<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

Step 6: Cara menggunakannya, buka controller/SiteController.php tentukan halaman tertentu yang ingin diubah templatenya dengan mengetikkan script $this->layout = 'adminlte';
layo

Sekian,
Semoga bermanfaat!

Kursus bahasa arab berkualitas

[shareaholic app="recommendations" id="20730868]

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *