Senin, 23 Mei 2016

Instalasi Template AdminLTE di Yii2 menggunakan composer

Diposting oleh gema di 19.35 Label: Tutorial Yii2

Secara default, Yii2 dibekali oleh template Bootstrap 3. Namun kita juga bisa menambahkan template lain yang lebih baik, seperti misalnya template Admin LTE.

AdminLTE adalah template admin responsive yang berbasis framework Bootstrap 3. Yang sangat mudah untuk digunakan dan dikustomasi. Fitur responsive menjadikan template ini cocok untuk berbagai macam ukuran layar dari layar smarphone yang kecil, hingga layar desktop.

Untuk menginstall AdminLTE pada Yii2, kita bisa menggunakan asset bundle yang sudah disediakan oleh dmstr yaitu dmstr/yii2-adminlte-asset sehingga kita dapat dengan mudah menginstallnya dengan composer.

Instalasi AdminLTE Yii2 dengan composer

Pastikan terlebih dahulu bahwa composer sudah terinstall.

Untuk menginstall AdminLTE v2 gunakan perintah berikut

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

Atau untuk AdminLTE v2 gunakan perintah berikut

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

pada direktori instalasi Yii2.

Setelah instalasi berhasil, anda bisa mencoba tampilan demo template tanpa mempengaruhi project anda dengan cara menambahkan rule berikut pada config anda:

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

Pastikan konfigurasi disalin kedalam array components.

Untuk template basic, file konfigurasi ada di:
/config/web.php
Konfigurasi untuk template advanced ada di:
/frontend/config/main.php (untuk frontend)
Atau
/backend/config/main.php (untuk backend)
Atau
/common/config/main.php (untuk semuanya)

Kemudian silahkan lihat hasilnya pada browser pada alamat root.
Saat ini, anda sedang melihat tampilan demo dari AdminLTE, Bukan project anda sesungguhnya.

Untuk menerapkannya pada project anda, silahkan copy file view dari vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app kedalam direktori view anda.

Ingat, anda akan me-replace file view layout dan site anda yang lama. pastikan backup dulu file view lama anda atau lakukan langkah-langkah instalasi template ini di awal, setelah anda menginstall Yii2 dan sebelum anda mengkustomasi view.

Penting: Jangan lupa untuk menghapus config yang ditambahkan untuk demo diatas.

Merubah Skin AdminLTE di Yii2

Secara default, AdminLTE akan menggunakan skin blue, anda bisa merubanya dengan menambahkan config:

    'assetManager' => [
        'bundles' => [
            'dmstr\web\AdminLteAsset' => [
                'skin' => 'skin-black',
            ],
        ],
    ],

lalu tambahkan helper AdminLteHelper::skinClass() pada tag body di view:

<body class="<?= \dmstr\helpers\AdminLteHelper::skinClass() ?>">

Berikut adalah list dari skin yang tersedia:

skin-blue,
skin-black,
skin-red,
skin-yellow,
skin-purple,
skin-green,
skin-blue-light,
skin-black-light,
kin-red-light,
skin-yellow-light,
skin-purple-light,
skin-green-light

Komentar Blogger 6
Komentar Facebook

6 komentar :

Unknown9 November 2016 pukul 21.15
Class 'dmstr\web\AdminLteAsset' not found
BalasHapus
Balasan
Unknown21 Desember 2016 pukul 09.23
Saran, Min. Sebaiknya ditambahin nama dan lokasi file yang kudu di-edit. Soalnya saya mengalami kesulitan pas nyari file yang harus dimodifikasi kodenya.

Mohon maaf sebelumnya, saya masih newbie. :v
BalasHapus
Balasan
Unknown10 Juli 2018 pukul 02.24
artikel bagus gan.
saya sudah mencoba dan berhasil. Namun ketika saya selesai membuat controller baru, dan saya hendak mengkases view lewat controller baru tsb yang muncul page not found? kenapa ya gan , mhon pencerhan.

(saya mencoba juga tanpa admin LTE, pembuatan controller baru tsb lancar da bisa redirectAction controller baru tsb)
BalasHapus
Balasan
I'm The RDO12 Februari 2020 pukul 22.48
sweet...
BalasHapus
Balasan