Installasi YII-2 dan Twig

Tulisan kali ini akan membahas mengenai proses installasi dan konfigurasi YII2 dan Twig. Bagi yang belum tahu apa itu YII atau Twig, YII merupakan framework pada PHP berbasis komponen (component-based) yang mana sampai dengan tulisan ini diturunkan versi terbaru sudah sampai dengan versi 2. Adapun Twig merupakan sebuah template engine berbahasa PHP seperti halnya smarty, blade, dll. Tujuan memadukan antara YII dengan template engine karena saya tidak mau di layer presentation ada syntax seperti <?php atau ?> yang bisa mengaburkan pembacaan alur code sehingga akan terasa lebih bersih.

Untuk memulai kegiatan ini terlebih dahulu kita harus installasi composer dan kita harus sudah mempunyai account github karena pada prosesnya nanti kita akan diminta untuk memasukan token yang mana token itu bisa kita generate dari account github kita. Apabila semua persyaratan sudah terpenuhi maka langkah yang harus kita lakukan adalah sebagai berikut.

1. Installasi YII-2 Basic
Untuk memulai installasi terlebih dahulu kita jalankan perintah berikut di console atau cmd. Perintah ini akan lumayan lama karena akan men-download paket-paket yang diperlukan.

# install asset plugin
composer global require "fxp/composer-asset-plugin:~1.1.1"

# install yii-2 basic. Pada bagian ini kita akan diminta token yang 
# mana token ini bisa digenerate melalui account github kita. 
# Untuk link github yang harus diakses akan muncul pada console
# selama menjalankan perintah ini.
composer create-project --prefer-dist yiisoft/yii2-app-basic basic

2. Tambahkan Plugin Twig pada YII-2
Setelah proses installasi YII-2 berhasil maka akan terbentuk direktori basic. Untuk menambahkan plugins Twig kita harus menambahkan package twig pada file composer.json yang ada di root direktori basic. Tambahkan baris berikut di composer.json sehingga menjadi seperti berikut.

# baris ditambahkan
"yiisoft/yii2-twig": "~2.0.0"

# hasil akhir setelah ditambahkan
    "minimum-stability": "stable",
    "require": {
        "php": ">=5.4.0",
        "yiisoft/yii2": ">=2.0.5",
        "yiisoft/yii2-bootstrap": "*",
        "yiisoft/yii2-swiftmailer": "*",
        "yiisoft/yii2-twig": "~2.0.0"
    },

# Setelah ditambahkan jalankan perintah berikut di root direktori basic
composer update

3. Sesuaikan file dengan environment yang ada
Pada bagian ini kita akan melakukan perubahan pada file-file berikut.
* ubah config/web.php
Tambahkan baris berikut pada bagian component sehingga menjadi seperti berikut.

    'components' => [
        'view' => [
            'class' => 'yii\web\View',
            'renderers' => [
                'twig' => [
                    'class' => 'yii\twig\ViewRenderer',
                    'cachePath' => '@runtime/Twig/cache',
                    // Array of twig options:
                    'options' => [
                        'auto_reload' => true,
                    ],
                    'globals' => ['html' => '\yii\helpers\Html'],
                    'uses' => ['yii\bootstrap'],
                ],
            ],
        ],	
    .....
    'layout' => 'main.twig',
    'params' => $params,

* ubah controllers/SiteController.php

    public function actionIndex(){
        return $this->render('coba.twig', ['hape' => 'herpur']);
    }

* buat views/layouts/main.twig

{{ this.beginPage() }}
<!doctype html>
<html lang="{{app.language}}">
    <head>
        <meta charset="{{app.charset}}"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        {{ html.csrfMetaTags() | raw }}
        <title>{{ html.encode(this.title) }}</title>
        {{ this.head() }}
    </head>
    <body>
        {{ this.beginBody() }}
            {{ content | raw }}
        {{ this.endBody() }}
    </body>
</html>
{{ this.endPage() }}

* buat views/site/coba.twig

Selamat Datang, {{hape}}

Untuk menjalankan aplikasi dari browser ketik link http://localhost/basic/web/. Jika ingin menggabungkan dengan Bootstrap Themes seperti AdminLTE maka langkah-langkah yang bisa dilakukan adalah seperti berikut (lengkapnya silahkan lihat video video YII-2 dan AdminLTE):
1. Download themes AdminLTE kemudian ekstrak.
2. Copy hasil ekstrak ke dalam direktori /vendor/bower.
3. Edit pada file /views/layouts/main.php ganti dengan isi index.html pada AdminLTE.
4. Ubah file /assets/AppAsset.php untuk inject file *.js dan *.css.

Sumber:
      Tutorial Template Engines
      Installation YII-2
      Using Twig in Yii2

Leave a Reply