Memulai Pembuatan Aplikasi Web dengan Yii2 (3): Serba Serbi View
Muhammad Arslan 3 Juli 2016
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 view pula user akan menggunakan akun mereka untuk login melalui form login dan mengakses berbagai halaman yang sudah diizinkan untuk user tersebut. View pun 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 HelloViewController. Mari kita buat file HelloViewController.php terlebih dahulu di folder controllers. Sekarang buat kode berikut di dalam file HelloViewController.php:Tidak hanya berhenti disini, kita harus membuat file view yang akan ditampilkan saat action hello-view/index diakses oleh user. Di Yii2, secara default sebuah folder 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.<?phpnamespace 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'); }}
Sekarang silahkan buat folder dengan nama hello-view di dalam folder views dan 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 folder demo di dalam folder hello-view kemudian buat sebuah file dengan nama sample.php dan buat kode berikut di dalam file tersebut:Kemudian tambahkan action demo di HelloViewController:<h1>Demo View</h1>
<p>Halo dari demo-view/demo/sample.php...</p>
<?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 nama greeting.php di dalam folder views/hello-view. Sekarang mari kita buat source code berikut di dalam file greeting.php:Kemudian mari kita tambahkan action berikut di dalam controller HelloViewController:<?php$this->title = 'Hello View - Greeting';
?>
<h1>Welcome</h1>
<p>Halo <?= $salutation?>. <?= $name ?> dari <?= $address ?></p>
<?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 ke view greeting.php. Dan di dalam view tersebut kita dapat menggunakannya satu - satu untuk mengeluarkan nilainya. Berikut adalah screenshot apabila action tersebut 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 bawah folder 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 dari Widget. Kemudian Anda dapat meng-override dua method utama yaitu init() dan run(). 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 string biasa.
Sekarang mari kita buat sebuah file view di folder views/demo dengan nama widget.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 mencoba widget 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 menggunakan widget dengan memanggil class HelloWidget dan melewatkan parameter message 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 nama metatags.php di dalam folder views/demo. Kemudian buat kode berikut di dalam file tersebut:Sekarang mari kita buat action baru di dalam class HelloViewController:<?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 Codepolitan.'], 'description');
?>
<h1>Demo Meta Tags</h1>
<p>Lorem ipsum sit dolor amet...</p>
<?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 halaman web, misal sidebar, footer, dan header. Cukup bagian konten saja yang berganti di setiap halamannya. Untuk membuat sebuah layout sekarang kita buat sebuah file dengan nama demo.php di folder views/layouts:Kode layout diatas sebenarnya tidak berbeda jauh dengan layout yang telah dibuatkan Yii2 di file layouts/main.php. Disini kita hanya mengubah widget Nav yang 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:<?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() ?>
<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. Output tetap akan ditampilkan sesuai susunan block yang ada di layout demo.php. Sekarang mari kita gunakan layout demo.php di dalam class HelloWidgetController 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 bersifat public 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 layout yang 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 widget yang disediakan untuk Yii2. Widget tersebut adalah komponen - komponen dari Twitter Bootstrap dan jQuery UI. Anda akan mencoba untuk menampilkannya di view sehingga halaman HTML menjadi lebih menarik dan lebih kaya tentunya dengan cara Yii2.
(arslan/yiiframework)