Home | About | View All Posts

29 May 2016

Custom theme integration for YII2 backend

YII framework are growing rapidly for MVC based php application in these days. We can create and manage the code and design part separatly in YII2 also as we do in Wordpress, Joomla or Drupal - popular open source for php application. Here are steps for theme integration in YII2.

Please follow the steps below to integrate or configure the theme into YII 2. Using these steps one can easily display or customize the output of YII 2 application by applying the new theme. "AdminLTE" theme(free downloadable is available, just googling it) has been used by us for our application and also in the code below. It is very nice admin template or theme tha can be managed easily with YII 2 theming or templating using advance application template.

  1. Creating Theme folder
  2. Defining Theme Assets files
  3. Adding Theme Assets files (css, js etc.) into YII engine
  4. Registering Theme Assets files (css, js etc.) into YII engine
  5. Registering and creating themed version of the view file Views
  6. Checking new theme version of the site
  1. Creating Theme folder
    Create the ‘themes’ directory in web folder in backend where you want to create and change the theme. Place your theme and its files - css, js, fontfile, images etc. in the ‘themes’ folder

    Path – backend/web/themes/abcrealestate
    Structure -
    backend/web/themes/abcrealestate
    backend/web/themes/abcrealestate/css
    backend/web/themes/abcrealestate/js
    backend/web/themes/abcrealestate/fonts
    backend/web/themes/abcrealestate/images

    NOTE – “abcrealestate” is our theme folder name.
  2. Defining Theme Assets files
    An asset in Yii is a file that may be referenced in a Web page. It can be a CSS file, a JavaScript file, an image or video file, etc. Assets are located in Web-accessible directories and are directly served by Web servers.

    An asset bundle class is called autoloadable. It usually specifies where the assets are located, what CSS and JavaScript files the bundle contains, and how the bundle depends on other bundles.

    Asset bundles are specified as PHP classes extending from 'yii\web\AssetBundle'. Below are the sample code for AppAsset class.

    namespace app\assets;
    use yii\web\AssetBundle;
    class AppAsset extends AssetBundle
    {
        public $basePath = '@webroot';
        public $baseUrl = '@web';
        public $css = [
            'css/site.css',
            ['css/print.css', 'media' => 'print'],
        ];
        public $js = [
        ];
        public $depends = [
            'yii\web\YiiAsset',
            'yii\bootstrap\BootstrapAsset',
        ];
    }
    

    Now, copy file – AppAsset.php = “backend/assets/AppAsset.php” and rename this file as you want. In our case we renamed it, using theme prefix e.g AbcrealestateAsset.php

    Path – backend/assets/AbcrealestateAsset.php

    Change or update $css and $js variables in AbcrealestateAsset.php

    public $css = [
        //'css/site.css',
        'themes/abcrealestate/css/font-awesome.min.css',
        'themes/abcrealestate/css/slicknav.css',
       ];
    public $js = [
            'themes/abcrealestate/js/jquery.migrate.js',
            'themes/abcrealestate/js/modernizrr.js',
         ];
    

    NOTE – Do not include core bootstrap css, bootstrap js and jquery js as these are core APIs that are provided by Yii2. Just please comment it.


    Removing default bootstrap css and js
    Please add below code into backend/config/main.php
    'assetManager' => [
        'bundles' => [
            'yii\web\JqueryAsset' => [
                'js'=>[]
            ],
            'yii\bootstrap\BootstrapPluginAsset' => [
                'js'=>[]
            ],
            'yii\bootstrap\BootstrapAsset' => [
                'css' => [],
            ],
    
        ],
    ],
    
  3. Registering Theme Assets files (css, js etc.) into YII engine
    Now register your new assets into YII2 engine. Go at – backend/web/themes/abcrealestate/views/layouts/main.php

    Comment the code – //use backend\assets\AppAsset;

    and use or add newly added our assets files path as below –

    use backend\assets\AbcrealestateAsset;

    Now edit or place this code for your newly added assets files path registration into YII2 –

    AbcrealestateAsset::register($this);
    
  4. Registering and Creating themed version of the view file Views
    Now put views(backend/views/) folder and its folders or files in your custom theme folder - abcrealestate. This views contains site and layout folder. It also contains your custom views folder and application files. In this way we do the design and code separation in YII2, as you know views represent the designing part of any application. Due to separation from code part, a designer can do his designing and outlining the application independently.

    Path – backend/web/themes/abcrealestate/views

    Finally it is time to say YII2 for our new themed version of the view files by adding the components array config in main.php file by placing the views path and details

    Path – backend/config/main.php

    When 'yii\base\View' renders a view file, it will check the active theme to see if there is a themed version of the view file exists. If so, the themed version will be rendered instead. Theme uses $pathMap to achieve the view file access.

    Code –

    //Starts : For New theme - abcrealestate - hooking
    'view' => [
                  'theme' => [
                     'pathMap' => [ 
                        '@app/views' => [ 
                            '@webroot/themes/abcrealestate/views',
    
                         ]
                     ],
                   ],
                ],
    //Ends : For New theme - abcrealestate - hooking
    
  5. Checking new theme version of the site
    Now browse the backend of the YII2 site and view the site with newly added theme. Please verify the view source for your new css and js path in the source code of the login form page that is default page for YII2 installation in advanced module.

    Finally you have to formatted the views output. First prepare the views page UI layout as per your field or data in html outlining. Now just write - print_r($model) in the specific view file. You will get all output variable list in the array format.

    Each array value can be shown using arrow operator like - "$model->yourname" for views output customization and display.
Tags :

0 comments:

Post a Comment