Difference between #67 and #68 of
Yii v2 snippet guide III

Revision #68 has been created by rackycz on Mar 30, 2021, 9:22:52 PM with the memo:

AdminLTE
« previous (#67) next (#69) »

Changes

Title unchanged

Yii v2 snippet guide III

Category unchanged

Tutorials

Yii version unchanged

2.0

Tags unchanged

tutorial,yii2,beginer

Content changed

[...]
If you want to locate the php.ini, type **php --ini**. Once you find it you can copy it to your yii-folder like this:

```
cp path/to/php.ini /app/myphp.ini
```

 
**AdminLTE - overview & general research on the theme**
 
---
 
[AdminLTE](https://adminlte.io/) is one of available admin themes. It currently has 2 versions:
 
- [AdminLTE v2](https://adminlte.io/themes/dev/AdminLTE/index3.html) = based on Bootstrap 3 = great for Yii v2 application
 
- [AdminLTE v3](https://adminlte.io/themes/AdminLTE/index2.html) = based on Bootstrap 4 (it is easy to upgrade Yii2 from Bootstrap3 to Bootstrap4 *)
 
 
\* Upgrading Yii2 from Bootstrap3 to Bootstrap4: https://www.youtube.com/watch?v=W1xxvngjep8
 
 
Documentation for [AdminLTE <= 2.3](https://adminlte.io/themes/AdminLTE/documentation), [v2.4](https://adminlte.io/docs/2.4/installation), [v3.0](https://adminlte.io/docs/3.0)
 
Note that some AdminLTE functionalities are only 3rd party dependencies. For example the map.
 
 
There are also many other admin themes:
 
- https://startbootstrap.com/theme/sb-admin-2 - nice tutorial for integration to yii2 is on [YouTube](https://youtu.be/eQdDBhQpU9o?t=1554)
 
- https://www.youtube.com/watch?v=CNQgmhjMhhM
 
- https://www.coderseden.com/product/material-dashboard-yii2
 
- and others, see [Google](https://www.google.com/search?q=html+template+administration)
 
 
There are also more Yii2 extensions for integration of AdminLTE into Yii project:
 
- https://www.yiiframework.com/extension/insolita/yii2-adminlte-widgets
 
- http://adminlte.yiister.ru/site/boxes
 
- https://www.yiiframework.com/extension/hail812/yii2-adminlte3 (composer installation failed)
 
- https://www.yiiframework.com/extension/yii2-adminlte-asset, (git)[https://github.com/dmstr/yii2-adminlte-asset]
 
- https://github.com/yidas/yii2-adminlte
 
- https://codeclimate.com/github/cjtterabytesoft/yii2-adminlte-basic/widgets/MainSidebar.php/source
 
 
I picked AdminLTE v2 (because it uses the same Bootstrap as Yii2 demos) and I tested some extensions which should help with implementation.
 
 
But lets start with quick info about how to use AdminLTE v2 without extensions in Yii2 demo application.
 
 
**Manual integration of v2.4 - Asset File creation**
 
---
 
 
- Open [documentation](https://adminlte.io/docs/2.4/installation) and run composer or download all dependencies in ZIP.
 
- Open [preview page](https://adminlte.io/themes/AdminLTE/index2.html) and copy whole HTML code to your text editor.
 
- Delete those parts of BODY section which you do not need (at least the content of <section class="content">)
 
- Also delete all SCRIPT and LINK tags. We will add them using the AssetBundle later.
 
 
- Open existing yii-file views/layouts/main.php and copy important PHP calls to the new file. (Asset, beginPage, $content, Breadcrumbs etc)
 
- Now your layout is complete, you can replace the original layout file.
 
 
We only need to create the Asset file to link all SCRIPTs and LINKs:
 
- Copy file assets/AppAsset into assets/LteAsset and rename the class inside.  
 
- Copy all LINK- and SCRIPT- URLs to LteAsset.
 
- Skip jQuery and Bootstrap, they are part of Yii. Example:
 
 
```php
 
namespace app\assets;
 
use yii\web\AssetBundle;
 
class LteAsset extends AssetBundle
 
{
 
    public $sourcePath = '@vendor/almasaeed2010/adminlte/';
 
    public $jsOptions = ['position' => \yii\web\View::POS_HEAD];  // POS_END cause conflict with YiiAsset  
 
    public $css = [
 
        'bower_components/font-awesome/css/font-awesome.min.css',
 
        'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic',
 
        // etc
 
    ];
 
    public $js = [
 
        'bower_components/jquery-ui/jquery-ui.min.js',
 
        // etc
 
    ];
 
    public $depends = [
 
        'yii\web\YiiAsset',
 
        'yii\bootstrap\BootstrapAsset',
 
    ];
 
}
 
```
 
 
- Refresh your Yii page and check "developer tools" for network errors. Fix them.
 
 
This error can appear: "Headers already sent"
 
- It means you forgot to copy some PHP code from the old layout file to the new one. 
 
                                                             
 
Now you are done, you can start using HTML and JS stuff from AdminLTE. So lets check extensions which will do it for us
 
 
**Insolita extension**
 
--
 
 
Works good for many UI items: Boxes, Tile, Callout, Alerts and Chatbox.
 
You only have to prepare the main layout file and Asset bundle, see above.
 
It hasn't been updated since 2018.
 
 
Imperfections in the sources:
 
 
vendor\insolita\yii2-adminlte-widgets\LteConst.php
 
- There is a typo: COLOR_LIGHT_BLUE should be 'lightblue', not 'light-blue'
 
                       
 
vendor\insolita\yii2-adminlte-widgets\CollapseBox.php
 
- Class in $collapseButtonTemplate should be "btn btn-box-tool", not "btn {btnType} btn-xs"
 
- (it affects the expand/collapse button in expandable boxes)
 
- $collapseButtonTemplate must be modified in order to enable removing Boxes from the screen. Namely data-widget and iconClass must be changed in method prepareBoxTools()
 
 
LteBox
 
- Boxes can be hidden behind the "waiting icon" overlay. This is done using following HTML at the end of the box's div:
 
- <div class="overlay"><i class="fa fa-refresh fa-spin"></i></div>
 
- This must be added manually or by modifying LteBox 
 
 
**Yiister**
 
--                         
 
Its web explains everything. Very usefull: http://adminlte.yiister.ru
 
You only need the Asset File from this article and then install Yiister. Sadly it hasn't been updated since 2015.
 
Provides widgets for rendering Menu, GridView, Few boxes, Fleshalerts and Callouts. 
 
Plus Error page.
 
 
**dmstr/yii2-adminlte-asset**
 
--
 
 
Officially mentioned on AdminLTE web. Renders only Menu and Alert.
 
Provides mainly the Asset file and Gii templates. Gii templates automatically fix the GridView design, but you can find below how to do it manually.
 
 
 
**Changing AdminLTE font**
 
---
 
 
AdminLTE is using font Source Sans Pro. If you want a different one, pick it on Google Fonts and modify the layout file like this:
 
 
```
 
<link href="https://fonts.googleapis.com/css2?family=Palanquin+Dark:wght@400;500;600;700&display=swap" rel="stylesheet">
 
<style>
 
 body {
 
    font-family: 'Palanquin Dark', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
  } 
 
  
 
  h1,h2,h3,h4,h5,h6,
 
  .h1,.h2,.h3,.h4,.h5,.h6 {
 
    font-family: 'Palanquin Dark', sans-serif;
 
  }
 
</style>
 
```
 
 
To display GridView as it should be, wrap it in this HTML code:
 
 
```html
 
<div class="box box-primary">
 
  <div class="box-header">
 
    <h3 class="box-title"><i class="fa fa-table"></i>&nbsp;Grid caption</h3>
 
  </div>
 
  <div class="box-body"
 
 
  ... grid view ...
 
 
  </div>
 
</div>
 
```
 
 
You can also change the glyphicon in web/css/site.css:
 
 
```
 
a.asc:after {
 
    content: "\e155";
 
}
 
 
a.desc:after {
 
    content: "\e156";
 
}
 
 
```
 
And this is basically it. Now we know how to use AdminLTE and fix the GridView. At least one extension will be needed to render widgets, see above.
8 0
4 followers
Viewed: 191 133 times
Version: 2.0
Category: Tutorials
Tags: beginer, tutorial, yii2
Written by: rackycz
Last updated by: rackycz
Created on: Jan 21, 2021
Last updated: a year ago
Update Article
Revert to #67 | Revert to #68

Revisions

View all history