Friday, May 05 2017

Adminlte Theme Integration in Yii2

After long time we have posted article about installing theme of AdminLTE for backend in Yii2 Framework. Adminlte theme integration in Yii2 useful for beginners.

Installing composer:

If you don’t have composer in your machine, download composer from Composer-Setup.exe. for Windows users.

For linux or Mac osx users please do following commands

curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer

Click here to see our demo video on Youtube:  Install AdminLTE theme in Yii2 Framework

Installing Yii:

With Composer installed, execute following commands for installing basic template of Yii2

composer global require "fxp/composer-asset-plugin:^1.3.1"
composer create-project --prefer-dist yiisoft/yii2-app-basic basic

Installtion : Yii2 – advanced template:

composer create-project --prefer-dist --stability=dev yiisoft/yii2-app-advanced  yii2-app

yii2 advanced template

During installation it needs access token key from Github.

  1. Login into your Github account
  2. Goto your settings
  3. In the left sidebar, click Personal access tokens.
  4. Click Generate new token.
  5. Give your token a descriptive name.
  6. Select the scopes, or permissions, you’d like to grant this token. To use your token to access repositories from the command line, select repo.
  7. Click Generate token.

Once installation complete then execute below commands to initialize the setup.

C:\wamp\www\yii2-app>php init

You can select the environment type from the given options:

Which environment do you want the application to be initialized in?
 
  [0] Development
  [1] Production
 
  Your choice [0-1, or "q" to quit]

yii2 init setup

After installation, backend looks like

yii2 admin panel login

In frontend looks like

yii2 frontend theme

http://localhost/devel/yii2-app/frontend/web/ // Front end
http://localhost/devel/yii2-app/backend/web/index.php?r=site%2Flogin // Back end

Customize your login url of admin panel and frontend url.

Open the httpd-vhosts.conf file. in xampp\apache\conf\extra\

Added below codes onto that file

<VirtualHost *:80>
    DocumentRoot "F:/xampp/htdocs/devel/yii2-app/frontend/web"
    ServerName www.yii2.dev
    <Directory "F:/xampp/htdocs/devel/yii2-app/frontend/web">
	Options Indexes FollowSymLinks ExecCGI Includes
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "F:/xampp/htdocs/devel/yii2-app/backend/web"
    ServerName admin.yii2.dev
    <Directory "F:/xampp/htdocs/devel/yii2-app/backend/web">
	Options Indexes FollowSymLinks ExecCGI Includes
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

Open this directory C:\Windows\System32\drivers\etc\ and update hosts file with below lines

127.0.0.3       www.yii2.dev
127.0.0.4       admin.yii2.dev

After that you can login with above urls for your admin panel and front end.

To install AdminLTE v2 run:

php composer.phar require dmstr/yii2-adminlte-asset "2.*"

To install AdminLTE v1 run:

php composer.phar require dmstr/yii2-adminlte-asset "1.*"

If you don’t have composer.phar files,

Execute the composer commands from getcomposer.org

Added below lines in your backend > config > main-local.php with inside the components array.

'components' => [
    'view' => [
         'theme' => [
             'pathMap' => [
                '@app/views' => '@vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app'
             ],
         ],
    ],
],

OUTPUT:

adminLTE theme for yii2

In Dashboard Page,
adminLTE Yii2

adminLTE dashboard theme for yii2

Share Your Thoughts

phpexpertise

I’m Blogger and Programming Blog, Tutorials, PHP, MySQL, jQuery, Laravel, Wordpress and Codeigniter