Image for post: Admin Lte and Yii 2 integration

Admin Lte and Yii 2 integration

Admin Lte is one of the best and popular admin templates on the web. It's free and it lets you to develop great interfaces admin areas for your web applications. You can have many elements, plugins and even integrate it with some PHP MVC framework like Yii 2 or Laravel.
Let's start to see what we need to let it work with Yii 2.

I use the amazing Yiister package. Demo and documentation are here.
Let's install the package:

composer require --prefer-dist yiister/yii2-adminlte "~1.0"

Update your template views

Like in some symfony bundle, you have your template and views in your package and you only have to overwrite them with your custom layouts:

views\layouts\main,php and views\layouts\main-login,php will be your templates in your directory. I highly recommend to use the Yii2 advanced template. You can even use Admin Lte as template for your public website. So here you have the template for your login page. Here it the original main.php view:

<?php/** * @var $content string */use yii\helpers\Html;yiister\adminlte\assets\Asset::register($this);?><?php $this->beginPage() ?><!DOCTYPE html><!--This is a starter template page. Use this page to start your new project fromscratch. This page gets rid of all links and provides the needed markup only.--><html lang="<?= Yii::$app->language ?>"><head> <meta charset="<?= Yii::$app->charset ?>"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <?= Html::csrfMetaTags() ?> <title><?= Html::encode($this->title) ?></title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <!-- Bootstrap 3.3.5 --> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src=""></script> <script src=""></script> <![endif]--> <?php $this->head() ?></head><!--BODY TAG OPTIONS:=================Apply one or more of the following classes to get thedesired effect|---------------------------------------------------------|| SKINS | skin-blue || | skin-black || | skin-purple || | skin-yellow || | skin-red || | skin-green ||---------------------------------------------------------||LAYOUT OPTIONS | fixed || | layout-boxed || | layout-top-nav || | sidebar-collapse || | sidebar-mini ||---------------------------------------------------------|--><body class="hold-transition skin-blue sidebar-mini"><?php $this->beginBody() ?><div class="wrapper"> <!-- Main Header --> <header class="main-header"> <!-- Logo --> <a href="/" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>A</b>LT</span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>Admin</b>LTE</span> </a> <!-- Header Navbar --> <nav class="navbar navbar-static-top" role="navigation"> <!-- Sidebar toggle button--> <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> <span class="sr-only">Toggle navigation</span> </a> <!-- Navbar Right Menu --> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <!-- Messages: style can be found in dropdown.less--> <li class="dropdown messages-menu"> <!-- Menu toggle button --> <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 messages --> <ul class="menu"> <li><!-- start message --> <a href="#"> <div class="pull-left"> <!-- User Image --> <img src="" class="img-circle" alt="User Image"> </div> <!-- Message title and timestamp --> <h4> Support Team <small><i class="fa fa-clock-o"></i> 5 mins</small> </h4> <!-- The message --> <p>Why not buy a new awesome theme?</p> </a> </li><!-- end message --> </ul><!-- /.menu --> </li> <li class="footer"><a href="#">See All Messages</a></li> </ul> </li><!-- /.messages-menu --> <!-- Notifications Menu --> <li class="dropdown notifications-menu"> <!-- Menu toggle button --> <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 notifications --> <ul class="menu"> <li><!-- start notification --> <a href="#"> <i class="fa fa-users text-aqua"></i> 5 new members joined today </a> </li><!-- end notification --> </ul> </li> <li class="footer"><a href="#">View all</a></li> </ul> </li> <!-- Tasks Menu --> <li class="dropdown tasks-menu"> <!-- Menu Toggle Button --> <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 tasks --> <ul class="menu"> <li><!-- Task item --> <a href="#"> <!-- Task title and progress text --> <h3> Design some buttons <small class="pull-right">20%</small> </h3> <!-- The progress bar --> <div class="progress xs"> <!-- Change the css width attribute to simulate progress --> <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 --> </ul> </li> <li class="footer"> <a href="#">View all tasks</a> </li> </ul> </li> <!-- User Account Menu --> <li class="dropdown user user-menu"> <!-- Menu Toggle Button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <!-- The user image in the navbar--> <img src="" class="user-image" alt="User Image"> <!-- hidden-xs hides the username on small devices so only the image appears. --> <span class="hidden-xs">Alexander Pierce</span> </a> <ul class="dropdown-menu"> <!-- The user image in the menu --> <li class="user-header"> <img src="" class="img-circle" alt="User Image"> <p> Alexander Pierce - Web Developer <small>Member since Nov. 2012</small> </p> </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"> <a href="#" class="btn btn-default btn-flat">Sign out</a> </div> </li> </ul> </li> <!-- Control Sidebar Toggle Button --> <li> <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a> </li> </ul> </div> </nav> </header> <!-- Left side column. contains the logo and sidebar --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- Sidebar user panel (optional) --> <div class="user-panel"> <div class="pull-left image"> <img src="" class="img-circle" alt="User Image"> </div> <div class="pull-left info"> <p>Alexander Pierce</p> <!-- Status --> <a href="#"><i class="fa fa-circle text-success"></i> Online</a> </div> </div> <!-- search form (Optional) --> <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 --> <!-- Sidebar Menu --> <?= \yiister\adminlte\widgets\Menu::widget( [ "items" => [ ["label" => "Home", "url" => "/", "icon" => "home"], ["label" => "Layout", "url" => ["site/layout"], "icon" => "files-o"], ["label" => "Error page", "url" => ["site/error-page"], "icon" => "close"], [ "label" => "Widgets", "icon" => "th", "url" => "#", "items" => [ ["label" => "Menu", "url" => ["site/menu"]], ["label" => "Boxes", "url" => ["site/boxes"]], ["label" => "FlashAlert", "url" => ["site/flash-alert"]], ["label" => "Callouts", "url" => ["site/callouts"]], ], ], [ "label" => "Badges", "url" => "#", "icon" => "table", "items" => [ [ "label" => "Default", "url" => "#", "icon" => "table", "badge" => "123", ], [ "label" => "Blue", "url" => "#", "icon" => "table", "badge" => "123", "badgeOptions" => [ "class" => \yiister\adminlte\components\AdminLTE::BG_BLUE, ], ], ], ], [ "label" => "Multilevel", "url" => "#", "icon" => "table", "items" => [ [ "label" => "Second level", "url" => "#", ], [ "label" => "Second level", "url" => "#", "icon" => "table", "items" => [ [ "label" => "Default", "url" => "#", ], [ "label" => "Red", "url" => "#", "icon" => "table", ], ], ], ], ], ], ] ) ?> </section> <!-- /.sidebar --> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> <section class="content-header"> <h1> <?= Html::encode(isset($this->params['h1']) ? $this->params['h1'] : $this->title) ?> </h1> <?php if (isset($this->params['breadcrumbs'])): ?> <?= \yii\widgets\Breadcrumbs::widget( [ 'encodeLabels' => false, 'homeLink' => [ 'label' => new \rmrevin\yii\fontawesome\component\Icon('home') . ' Home', 'url' => '/', ], 'links' => $this->params['breadcrumbs'], ] ) ?> <?php endif; ?> </section> <!-- Main content --> <section class="content"> <?= $content ?> </section><!-- /.content --> </div><!-- /.content-wrapper --> <!-- Main Footer --> <footer class="main-footer"> <!-- To the right --> <div class="pull-right hidden-xs"> Anything you want </div> <!-- Default to the left --> <strong>Copyright &copy; <a href="">Yiister</a> <?= date("Y") ?> </footer> <!-- Control Sidebar --> <aside class="control-sidebar control-sidebar-dark"> <!-- Create the tabs --> <ul class="nav nav-tabs nav-justified control-sidebar-tabs"> <li class="active"><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 active" 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> <p>Will be 23 on April 24th</p> </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> </ul><!-- /.control-sidebar-menu --> </div><!-- /.tab-pane --> <!-- Stats tab content --> <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</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> <p> Some information about this general settings option </p> </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><!-- ./wrapper --><!-- Optionally, you can add Slimscroll and FastClick plugins. Both of these plugins are recommended to enhance the user experience. Slimscroll is required when using the fixed layout. --><?php $this->endBody() ?></body></html><?php $this->endPage() ?>

Copy this file (you can find it in your vendor/yiister/yii2-adminlte/views/layouts/main.php) or code in your backend main.php and start to use it and customize your app.

You can now follow the original documentation and add plugin and snippets to your views.

Happy coding!