Tutorial Belajar Memulai Pembuatan Aplikasi Web dengan Yii2 (3): Serba Serbi View

View adalah bagian inti dari sebuah web framework yang bertugas untuk menyimpan kode HTML dan berbagai manipulasinya untuk menampilkan data yang disesuaikan dengan spesifikasi sistem. Dengan mengandalkan view Anda dapat menampilkan sebuah data yang berasal dari hasil query database atau menampilkan sebuah isi dari log webserver yang Anda gunakan. Dengan viewpula user akan menggunakan akun mereka untuk login melalui form login dan mengakses berbagai halaman yang sudah diizinkan untuk user tersebut. Viewpun tidak hanya dalam format HTML, ada juga yang menampilkan format JSON, XML, Teks, dan lainnya.

Sekarang mari kita lihat bagaimana cara membuat view di Yii2.

Menggunakan View

Agar ngulik kita lebih enak, mari kita buat sebuah controller dengan nama class Hello View Controller. Mari kita buat file HelloViewController.php terlebih dahulu di folder controllers. Sekarang buat kode berikut di dalam  file HelloViewController.php:

<?php



namespace app\controllers;

use Yii;

use yii\filters\AccessControl;

use yii\web\Controller;



class HelloViewController extends Controller

{

    public function actions()

    {

        return [

            'error' => [

                'class' => 'yii\web\ErrorAction',

            ],
        ];

    public function actionIndex()
    }



    {

        return $this->render('index');

    }
}

Tidak hanya berhenti disini, kita harus membuat file view yang akan ditampilkan saat action hello-view/index diakses oleh user. Di Yii2, secara default sebuahfolder view harus dikelompokkan dengan nama controller yang ada. Misal ketika kita akan menampilkan view index di HelloViewController, maka kita harus membuat sebuah folder di folder views dengan nama hello-view. Barulah kita buat file* dengan nama index.php agar dapat diakses dari HelloViewController.

Sekarang silahkan buat folder dengan nama hello-view di dalam folder viewsdan buatlah sebuah file dengan nama index.php di dalam views/hello-view. Kemudian buat kode berikut di dalam file index.php:

<h1>Demo View</h1>



<p>Halo dari demo-view/index.php ...</p>

Sekarang Anda dapat melihatnya melalui URL http://localhost/hello-yii/web/index.php?r=hello-view/ di web browser seperti pada gambar berikut:

Menggunakan View yang Disimpan di Folder

Selain menyimpan view di dalam folder hello-view, Anda juga dapat membuat sebuah folder lagi yang mungkin dapat menyimpan berbagai view yang dikelompokkan. Sebut saja ada sebuah folder demo yang menyimpan sebuah file view yang bernama sample.php. Maka Anda dapat menggunakan view tersebut dengan menggunakan cara $this->render('demo/sample'). Mari kita buat folderdemo di dalam folder hello-view kemudian buat sebuah file dengan namasample.php dan buat kode berikut di dalam file tersebut:

<h1>Demo View</h1>



<p>Halo dari demo-view/demo/sample.php...</p>

Kemudian tambahkan action demo di HelloViewController:

<?php



namespace app\controllers;

use Yii;
use yii\filters\AccessControl;

use yii\web\Controller;


class HelloViewController extends Controller

{

    ....

    public function actionDemo()

    {

        return $this->render('demo/sample');

    }

}

Sekarang mari kita lihat hasilnya melalui URL http://localhost/hello-yii/web/index.php?r=hello-view/demo di web browser:

Melewatkan Variabel ke View

Anda pun dapat melewatkan berbagai variabel kedalam sebuah view untuk ditampilkan di view tersebut. Kumpulan variabel tersebut dikemas dengan menggunakan array PHP. Sekarang mari kita buat sebuah file dengan namagreeting.php di dalam folder views/hello-view. Sekarang mari kita buat source code berikut di dalam file greeting.php:

<?php 



$this->title = 'Hello View - Greeting';

?>


<h1>Welcome</h1>



<p>Halo <?= $salutation?>. <?= $name ?> dari <?= $address ?></p>

Kemudian mari kita tambahkan action berikut di dalam  controller HelloViewController:

<?php



namespace app\controllers;

use Yii;
use yii\filters\AccessControl;

use yii\web\Controller;


class HelloViewController extends Controller

{

    ....

    public function actionGreeting($name="Bon Xi Lai", $salutation="Mr", $address='Kao Shiung, Taiwan')

    {

        return $this->render('greeting', [

                    'name' => $name,

                    'salutation' => $salutation,

                    'address' => $address

                ]);
}

}

Pada action diatas, terdapat default value yang akan diisi bila tidak ada query string yang disertakan pada URL. Seperti yang Anda lihat, parameter kedua adalah sebuah array yang mengemas berbagai variabel dan melewatkannya keview greeting.php. Dan di dalam view tersebut kita dapat menggunakannya satu - satu untuk mengeluarkan nilainya. Berikut adalah screenshot apabila actiontersebut dieksekusi dari URL http://localhost/hello-yii/web/index.php?r=hello-view/greeting:

Membuat Widget Sederhana

Mungkin Anda juga membutuhkan sebuah komponen yang reusable misal ingin membuat sebuah papan skor sepakbola yang bisa ditampilkan di halaman manapun tanpa menyalin struktur HTML-nya di view lain. Yii2 memiiki fitur yang dinamakan widget. Anda dapat membuat sebuah komponen HTML yang ditulis dengan menggunakan sebuah class PHP. Class tersebut akan menulis sebuah struktur HTML yang disesuaikan dengan parameter yang Anda tentukan. Sebagai contoh, sekarang kita akan membuat sebuah widget "Hello World". Pertama silahkan buat folder bernama components di bawah folder hello-yii. Kemudian silahkan buat sebuah file dengan nama HelloWidget.php di bawahfolder hello-yii/components.

Kemudian silahkan buat kode berikut di file tersebut:

<?php



namespace app\components;

use yii\base\Widget;
use yii\helpers\Html;

class HelloWidget extends Widget
{

    public $message;

    public function init()

    {

        parent::init();

        if ($this->message === null) {

            $this->message = 'Hello World';

        }
}


    public function run()

    {

        return Html::encode($this->message);
}

}

Untuk membuat sebuah widget, Anda perlu menurunkan sebuah class dariWidget. Kemudian Anda dapat meng-override dua method utama yaitu init() danrun(). Method init() merupakan method yang akan dijalankan terlebih dahulu sebelum action lain dieksekusi. Sedangkan method run() berfungsi untuk mengeluarkan output yang tentunya berupa struktur kode HTML atau stringbiasa.

Sekarang mari kita buat sebuah file view di folder views/demo dengan namawidget.php. Kemudian buat kode berikut di file tersebut:

<?php 



$this->title = 'Hello View - Demo Widget';

?>


<h1>Demo View</h1>



<p>Halo dari demo-view/demo/widget.php...</p>

<?= $hello_widget ?>

Dan terakhir mari kita buat action di HelloWorldController yang akan mencobawidget tersebut:

<?php



namespace app\controllers;

use Yii;
use yii\filters\AccessControl;

use yii\web\Controller;

use app\components\HelloWidget;



class HelloViewController extends Controller

{

    ....

    public function actionWidget()

    {

        $hello = HelloWidget::widget(['message' => 'Hai, pesan ini dirender oleh HelloWidget dari components/HelloWidget.php']);

        return $this->render('demo/widget', [

                    'hello_widget' => $hello

                ]);
}

}

Pada kode diatas, Anda memanggil class HelloWidget dengan cara use app\components\HelloWidget. Kemudian Anda mulai dapat menggunakanwidget dengan memanggil class HelloWidget dan melewatkan parametermessage melalui static method widget(). Parameter message tersebut sudah kita definisikan di class HelloWidget yaitu saat kita menulis public $message; di dalam class tersebut. Hasil output disimpan ke dalam variabel $hello dan kita lewatkan ke view demo/widget dengan nama variabel hello_widget.

Berikut adalah screenshot dari halaman yang menggunakan widget HelloWidget diakses melalui URL http://localhost/hello-yii/web/index.php?r=hello-view/widget:

Mengatur Title dan Meta Tags

Dapat dibilang kalau ini merupakan fitur yang cukup penting juga demi kerapihan halaman web yang akan kita tampilkan. Yii2 memiliki sebuah fitur yang dapat mengatur judul dan meta tags dari suatu halaman. Jadi Anda tidak perlu repot - repot membuat sendiri kode untuk memanipulasi title dan meta tags untuk suatu halaman. Sekarang mari kita buat sebuah file dengan namametatags.php di dalam folder views/demo. Kemudian buat kode berikut di dalamfile tersebut:

<?php 



$this->title = 'Hello View - Demo Meta Tags';

$this->registerMetaTag(['name' => 'keywords', 'content' => 'yii, framework, php']);

$this->registerMetaTag(['name' => 'description', 'content' => 'Belajar yii framework. Dipersembahkan oleh TutorialCoding.'], 'description');



?>

<h1>Demo Meta Tags</h1>



<p>Lorem ipsum sit dolor amet...</p>

Sekarang mari kita buat action baru di dalam class HelloViewController:

<?php



namespace app\controllers;

use Yii;
use yii\filters\AccessControl;

use yii\web\Controller;

use app\components\HelloWidget;



class HelloViewController extends Controller

{

    ....

    public function actionDemoMetaTags()

    {

        return $this->render('demo/metatags');

    }

}

Sekarang kita akses URL http://localhost/hello-yii/web/index.php?r=hello-view/demo-meta-tags, dan lihat screenshot berikut:

Membuat Layout Sederhana

Salah satu bagian yang penting lainnya adalah menyusun sebuah layout. Yii2 mempunyai sejumlah function yang dapat membantu Anda untuk membuat sebuah layout. Pada dasarnya layout adalah sebuah wadah utama yang akan menampilkan suatu bagian halaman dari view. Dengan demikian Anda dapat mengurangi seringnya menyalin sebuah bagian yang sering muncul di halamanweb, misal sidebar, footer, dan header. Cukup bagian konten saja yang berganti di setiap halamannya. Untuk membuat sebuah layout sekarang kita buat sebuahfile dengan nama demo.php di folder views/layouts:

<?php



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

/* @var $content string */


use yii\helpers\Html;

use yii\bootstrap\Nav;

use yii\bootstrap\NavBar;

use app\assets\AppAsset;

use yii\helpers\Url;


AppAsset::register($this);


?>

<?php $this->beginPage() ?>



<!DOCTYPE html>

<html lang="<?= Yii::$app->language ?>">

    <head>

        <meta charset="<?= Yii::$app->charset ?>">

        <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

            NavBar::begin([

                'brandLabel' => 'Perusahaanku',

                'brandUrl' => Url::toRoute(['hello-view/index']),

                'options' => [

                    'class' => 'navbar-inverse navbar-fixed-top',

                ],
]);

            echo Nav::widget([

                'options' => ['class' => 'navbar-nav navbar-right'],

                'items' => [

                    ['label' => 'Salam', 'url' => ['/hello-view/greeting']],

                    ['label' => 'Widget', 'url' => ['/hello-view/widget']],

                    ['label' => 'Demo Folder', 'url' => ['/hello-view/demo']],

                ],
]);

            NavBar::end();

            ?>


            <div class="container">

                <?php if (isset($this->blocks['block1'])): ?>

                    <?= $this->blocks['block1'] ?>

                <?php endif; ?>


                <?= $content ?>


                <?php if (isset($this->blocks['block2'])): ?>

                    <?= $this->blocks['block2'] ?>

                <?php endif; ?>

            </div>

        </div>


        <footer class="footer">

            <div class="container">

                <p class="pull-left">&copy; Perusahaanku <?= date('Y') ?></p>

            </div>

        </footer>


        <?php $this->endBody() ?>


    </body>

</html>

<?php $this->endPage() ?>

Kode layout diatas sebenarnya tidak berbeda jauh dengan layout yang telah dibuatkan Yii2 di file layouts/main.php. Disini kita hanya mengubah widget Navyang menampilkan berbagai URL yang terdiri dari action yang telah kita buat sebelumnya. Kemudian di dalam container pun kita buat sebuah blocks yang akan digunakan untuk menampilkan halaman HTML di tempat khusus tersebut.Blocks digunakan untuk menampilkan suatu struktur HTML yang terpisah dari konten utama. Sekarang agar lebih jelas, mari kita ubah view hello-view/index.php menjadi seperti berikut:

<h1>Demo View</h1>



<p>Halo dari demo-view/index.php ...</p>

<?php $this->beginBlock('block1'); ?>



<p>...content of block1...</p>



<?php $this->endBlock(); ?>

<?php $this->beginBlock('block2'); ?>



<p>...content of block2...</p>



<?php $this->endBlock(); ?>

Pada kode diatas, bagaimanapun Anda memosisikan block pada kode diatas. Misal block kedua disimpan diatas, block pertama disimpan terakhir. Outputtetap akan ditampilkan sesuai susunan block yang ada di layout demo.php. Sekarang mari kita gunakan layout demo.php di dalam classHelloWidgetController seperti berikut:

<?php



namespace app\controllers;

use Yii;

use yii\filters\AccessControl;

use yii\web\Controller;

use app\components\HelloWidget;



class HelloViewController extends Controller

{

    public $layout = 'demo';


    ...
}

Ya, Anda cukup membuat sebuah atribut dengan nama $layout dan bersifatpublic kemudian mengisinya dengan nama layout yang akan kita gunakan. Bisa saja suatu saat, Anda melewatkan layout admin pada atribut tersebut. Sekarang mari kita lihat hasilnya seperti pada URL berikut:

Penutup

Masalah penanganan view di Yii2 sangat lengkap. Anda dapat membuat layoutyang disesuaikan dengan template web yang sudah Anda beli ataupun yang dibuat oleh tim web designer. Anda juga dapat melewatkan berbagai variabel ke dalam view untuk ditampilkan ke dalam tabel ataupun ke dalam sebuah slide gallery. Anda juga sudah mencoba untuk membuat sebuah widget yang dapat digunakan kembali untuk action lainnya.

Di tutorial berikutnya, Anda akan mencoba untuk menggunakan built-in widgetyang disediakan untuk Yii2. Widget tersebut adalah komponen - komponen dari Twitter Bootstrap dan jQuery UI. Anda akan mencoba untuk menampilkannya diview sehingga halaman HTML menjadi lebih menarik dan lebih kaya tentunya dengan cara Yii2.

Share this post