การติดตั้ง bower package ใน Yii Framework 2 และ การสร้าง theme ด้วย materialize

bower เป็น package js และ css ที่สามารถนำไปใช้ใน package ส่วนใหญ่ที่เป็น js web application เช่น nodejs เป็นต้น โดยการนำมาใช้กับ Yii Framework 2 นั้นสามารถติดตั้งผ่าน composer และเรียกใช้งานผ่าน AssetBundle ได้ โดยมีขั้นตอนในการติดตั้ง bower package ดังนี้

การติดตั้ง bower package

ตัวอย่างการติดตั้ง materialize package ของ bower ด้วย composer

composer bower-asset/materialize

ซึ่งจะปรากฏ folder ใหม่ใน vendor ดังนี้ vendor\bower-asset\materialize

และจะปรากฏใน composer.json ดังนี้

"require": {
        "php": ">=5.4.0",
        "yiisoft/yii2": "~2.0.6",
        "yiisoft/yii2-bootstrap": "~2.0.0",
        "yiisoft/yii2-swiftmailer": "~2.0.0 || ~2.1.0",
        "bower-asset/materialize": "^0.100.2"
    },

สร้าง theme และเรียกใช้งาน materialize

สำหรับการสร้าง theme นั้นสามารถสร้างได้โดยสร้าง folder ใน frontend/backend ตัวอย่างนี้จะสร้างใน frontend ดังนี้

frontend/themes/materialize
frontend/themes/materialize/views

จากนั้นคัดลอก frontend/views/layouts มาไว้ใน frontend/themes/materialize/views

สร้าง Asset class จาก bower

สร้างไฟล์สำหรับเรียกใช้ bower asset โดยสร้างไฟล์ frontend/themes/materialize/MaterializeAsset.php โดยเขียนโปรแกรมเรียกใช้ bower package ดังนี้

<?php
/**
 * Created by PhpStorm.
 * User: Manop Kongoon
 * Date: 3/25/2018
 * Time: 2:05 PM
 */
namespace frontend\themes\materialize;

class MaterializeAsset extends \yii\web\AssetBundle
{
    public $sourcePath = '@bower/materialize';

    public $css = [
        'dist/css/materialize.css'
    ];

    public $js = [
        'dist/js/materialize.js'
    ];

    public $depends = [
        'yii\web\JqueryAsset'
    ];
}

แก้ไข frontend/themes/materialize/views/layouts/main.php โดยเปลี่ยน AppAsset เป็น MaterializeAsset และยกเลิก bootstrap Nav และ NavBar ดังนี้

<?php

/* @var $this \yii\web\View */
/* @var $content string */

use frontend\themes\materialize\MaterializeAsset;
use yii\helpers\Html;
use yii\widgets\Breadcrumbs;
use common\widgets\Alert;
use yii\widgets\Menu;

MaterializeAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>

<div class="wrap">
    <?php
    $menuItems = [
        ['label' => 'Home', 'url' => ['/site/index']],
        ['label' => 'About', 'url' => ['/site/about']],
        ['label' => 'Contact', 'url' => ['/site/contact']],
    ];
    if (Yii::$app->user->isGuest) {
        $menuItems[] = ['label' => 'Signup', 'url' => ['/site/signup']];
        $menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];
    } else {
        $menuItems[] = '<li>'
            . Html::beginForm(['/site/logout'], 'post')
            . Html::submitButton(
                'Logout (' . Yii::$app->user->identity->username . ')',
                ['class' => 'btn btn-link logout']
            )
            . Html::endForm()
            . '</li>';
    }
    ?>
    <nav>
        <div class="nav-wrapper">
            <a href="#" class="brand-logo">Logo</a>
            
            <?= Menu::widget([
                    'items' => $menuItems,
                'options' => [
                        'class' => 'right hide-on-med-and-down',
                    'id' => 'nav-mobile'
                ]
            ])?>
        </div>
    </nav>

    <div class="container">
        <?= Breadcrumbs::widget([
            'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
        ]) ?>
        <?= Alert::widget() ?>
        <?= $content ?>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <p class="pull-left">&copy; <?= Html::encode(Yii::$app->name) ?> <?= date('Y') ?></p>

        <p class="pull-right"><?= Yii::powered() ?></p>
    </div>
</footer>

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

เปลี่ยน themes ใน frontend

โดยแก้ไขไฟล์ frontend/config/main.php จากนั้นเพิ่มการเรียก theme ในส่วน components และยกเลิก bootstrap asset ดังนี้

'components' => [
//..code before
'view' => [
            'theme' => [
                'pathMap' => [
                    '@app/views' => '@frontend/themes/materialize/views'
                ]
            ]
        ],
'assetManager' => [
            'bundles' => [
                'yii\bootstrap\BootstrapPluginAsset' => [
                    'js'=>[]
                ],
                'yii\bootstrap\BootstrapAsset' => [
                    'css' => [],
                ],

            ],
        ],

],

การติดตั้ง bower package ใน Yii Framework 2 และ การสร้าง theme ด้วย materialize