Memulai Pembuatan Aplikasi Web dengan Yii2 (4): Mencicipi Widget

Seperti yang sudah dijelaskan sebelumnya, Yii2 mempunyai dukungan untuk membuat sebuah komponen HTML yang dinamakan widget. Sehingga dimanapun halaman yang akan mengeluarkan struktur HTML yang sama, cukup dengan memanggil widget dan akhirnya Anda tidak perlu repot untuk mengubah komponen HTML yang sama yang bertebaran di berbagai halaman web lainnya. Cukup dengan mengubah widget yang Anda buat, maka di halaman lain pun akan berubah.

Yii2 mempunyai sejumlah widget yang cukup banyak. Ada widget yang memang dibuat khusus untuk Yii2, ada yang merupakan wrapper untuk jQuery UI dan Twitter Bootstrap. Ada juga yang third party dengan memasangnya melalui Composer. Beberapa widget yang tersedia di Yii2 antara lain:

• jQuery UI: Accordion, AutoComplete, DatePicker, Dialog, Draggable, Droppable, ProgressBar, Slider, Sortable, dan lainnya
• Twitter Bootstrap: Alert, Button, ButtonDropdown, ButtonGroup, Carousel, Collapse, Dropdown, Progress, Tabs, Nav, Modal, dan lainnya
• Yii2 Widgets: Grid, ListView, DetailView, Breadcrumbs, Pjax, MaskedInput, dan lainnya
• Berbagai third party lainnya yang disediakan oleh vendor ataupun komunitas

Dari sejumlah widget yang terdapat di Yii2, kita akan mencicipinya sebagian melalui tutorial ini. Siap - siap kencangkan sabuk pengaman, dan let's go.

Persiapan Coding

Sebelum memulai mencicipi widget, kita harus membuat dulu sebuah controller yang bernama HelloWidgetController. Silahkan buat file dengan nama HelloWidgetController.php di folder controllers. Kemudian buat kode berikut di dalam file tersebut:

<?php
namespace app\controllers;
use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;
class HelloWidgetController extends Controller
{
public function actions()
{
return [
'error' => [
'class' => 'yii\web\ErrorAction',
],
];
}
}

Kemudian kita juga harus membuat sebuah folder yang berasosiasi dengan HelloWidgetController, yaitu folder hello-widget. Silahkan buat folder hello-widget di folder views. Nantinya folder tersebut akan kita isi dengan file - file view yang akan ditampilkan oleh action yang akan dibuat di dalam class HelloWidgetController.

Menggunakan Widget Twitter Bootstrap: Alert

Alert adalah sebuah komponen Twitter Bootstrap yang berfungsi untuk menampilkan sebuah notifikasi yang muncul ditengah - tengan komponen HTML lainnya. Biasanya Alert muncul apabila saat akun yang Anda kirimkan saat login salah, atau saat melakukan upload file ukurannya terlalu besar. Alert juga dapat digunakan bila seseorang baru masuk sesaat setelah login.

Sekarang mari kita coba Alert yang dibungkus melalui widget di Yii2. Silahkan tambahkan actionIndex terlebih dahulu di dalam class HelloWidgetController:

<?php

namespace app\controllers;

use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;

class HelloWidgetController extends Controller
{
    .....

    public function actionIndex()
    {
        return $this->render('index');
    }
}

Dan setelah action ditambahkan, kita harus membuat file view yang akan ditampilkan. Silahkan buat file dengan nama index.php di dalam folder views/hello-widget. Kemudian buat kode berikut di dalam file tersebut:

<?php

use yii\bootstrap\Alert;
$this->title = 'Demo Widget - Alert';

?>

<h1>Demo Widget</h1>

<p>Berikut ini contoh penggunaan <i>widget</i> Alert di Yii2:</p>

<?php

echo Alert::widget([
    'options' => [
        'class' => 'alert-info',
    ],
    'body' => '[INFO] Ini adalah alert...',
]);

echo Alert::widget([
    'options' => [
        'class' => 'alert-warning',
    ],
    'body' => '[WARNING] Ini adalah alert...',
]);


echo Alert::widget([
    'options' => [
        'class' => 'alert-danger',
    ],
    'body' => '[DANGER] Ini adalah alert...',
]);


echo Alert::widget([
    'options' => [
        'class' => 'alert-success',
    ],
    'body' => '[SUCCESS] Ini adalah alert...',
]);


?>

Pada kode diatas, Anda harus terlebih dahulu menyertakan class Alert dari yii\widgets\Alert. Setelah itu Anda dapat menggunakan widget Alert di dalam halaman view Anda. Umumnya Alert memiliki dua parameter yaitu options dan body. Parameter options adalah berbagai atribut yang akan disisipkan di dalam tag pembuka Alert. Misalnya class, style, id, dan lainnya. Sedangkan parameter body berisi teks yang akan ditampilkan di dalam Alert.

Sekarang mari kita lihat hasilnya seperti pada gambar berikut:

Menggunakan Widget Twitter Bootstrap: Modal

Modal adalah sebuah elemen berupa popup yang akan muncul ketika menekan pemicunya. Misal pemicunya adalah sebuah tombol "Tambah Anggota Baru". Maka akan muncul sebuah popup cantik yang berisi form untuk menambahkan anggota baru. Modal juga dapat digunakan sebagai notifikasi atau peringatan terhadap suatu aksi yang dilakukan user. Asumsikan saja ketika user gagal menambahkan lampiran pada email-nya maka sebuah modal akan muncul untuk memberitahukan error apa yang terjadi saat pengiriman pesan tersebut.

Yii2 memiliki widget untuk membuat sebuah Modal. Tepatnya berada dibawah widget Twitter Bootstrap. Sekarang kita akan mencoba memasang sebuah Modal di view Yii2. Silahkan buat sebuah file dengan nama modal.php di dalam folder views/hello-widget. Kemudian buat kode berikut di dalam file tersebut:

<?php

use yii\bootstrap\Modal;
$this->title = 'Demo Widget - Modal';

?>

<h1>Demo Widget</h1>

<p>Berikut ini contoh penggunaan <i>widget</i> Modal di Yii2:</p>

<?php

Modal::begin([
    'header' => '<h3>Ini adalah judul</h3>',
    'footer' => 'Ini adalah footer',
    'toggleButton' => ['label' => 'klik saya'],
]);

echo 'Ini adalah sebuah modal...';

Modal::end();

?>

Pada kode diatas, Modal memiliki tiga parameter utama yaitu header, footer, dan toggleButton. Parameter header adalah konten yang akan mengisi bagian header modal. Parameter footer adalah konten yang akan mengisi bagian footer modal. Dan toggleButton adalah tombol yang akan menginisiasi Modal ketika diklik.

Agar view tersebut dapat dilihat, Anda harus menambahkan actionDemoModal() di dalam HelloWidgetController:

<?php

namespace app\controllers;

use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;

class HelloWidgetController extends Controller
{
    .....

    public function actionDemoModal()
    {
        return $this->render('modal');
    }
}

Sekarang mari kita lihat hasilnya seperti pada gambar berikut:

Menggunakan Widget Twitter Bootstrap: Button

Bila Anda ingin tombol yang lebih bagus dibandingkan tombol HTML default tentunya Anda harus membuat CSS-nya sendiri. Namun Yii2 dapat membantu Anda untuk membuat tombol yang mempunyai style Twitter Bootstrap. Widget ini masih bagian dari widget Twitter Bootstrap yang terdapat di Yii2. Sekarang silahkan buat file dengan nama button.php di dalam folder views/hello-widget. Kemudian buat kode berikut di dalam file tersebut:

<?php
use yii\bootstrap\Button;
use yii\bootstrap\ButtonGroup;
use yii\bootstrap\ButtonDropdown;
$this->title = 'Demo Widget - Button';
?>
<h1>Demo Widget</h1>
<p>Berikut ini contoh penggunaan <i>widget</i> Button di Yii2:</p>
<?php
echo Button::widget([
'label' => 'Button large',
'options' => ['class' => 'btn-lg btn-default', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button large',
'options' => ['class' => 'btn-lg btn-info', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button large',
'options' => ['class' => 'btn-lg btn-success', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button large',
'options' => ['class' => 'btn-lg btn-warning', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button large',
'options' => ['class' => 'btn-lg btn-danger', 'style' => 'margin-right:10px;'],
]);
?>
<br/>
<br/>
<?php
echo Button::widget([
'label' => 'Button medium',
'options' => ['class' => 'btn-md btn-default', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button medium',
'options' => ['class' => 'btn-md btn-info', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button medium',
'options' => ['class' => 'btn-md btn-success', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button medium',
'options' => ['class' => 'btn-md btn-warning', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button medium',
'options' => ['class' => 'btn-md btn-danger', 'style' => 'margin-right:10px;'],
]);
?>
<br/>
<br/>
<?php
echo Button::widget([
'label' => 'Button small',
'options' => ['class' => 'btn-sm btn-default', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button small',
'options' => ['class' => 'btn-sm btn-info', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button small',
'options' => ['class' => 'btn-sm btn-success', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button small',
'options' => ['class' => 'btn-sm btn-warning', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button small',
'options' => ['class' => 'btn-sm btn-danger', 'style' => 'margin-right:10px;'],
]);
?>
<br/>
<br/>
<?php
echo Button::widget([
'label' => 'Button extra small',
'options' => ['class' => 'btn-xs btn-default', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button extra small',
'options' => ['class' => 'btn-xs btn-info', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button extra small',
'options' => ['class' => 'btn-xs btn-success', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button extra small',
'options' => ['class' => 'btn-xs btn-warning', 'style' => 'margin-right:10px;'],
]);
echo Button::widget([
'label' => 'Button extra small',
'options' => ['class' => 'btn-xs btn-danger', 'style' => 'margin-right:10px;'],
]);
?>
<br/>
<br/>
<p>Berikut ini contoh penggunaan <i>widget</i> ButtonDropdown di Yii2:</p>
<?php
echo ButtonDropdown::widget([
'label' => 'Button Dropdown',
'options' => ['class'=>'btn-default', 'style'=>'margin-right:10px;'],
'dropdown' => [
'items' => [
['label' => 'Lorem', 'url' => '#'],
['label' => 'Ipsum', 'url' => '#'],
],
],
]);
echo ButtonDropdown::widget([
'label' => 'Button Dropdown',
'options' => ['class'=>'btn-info', 'style'=>'margin-right:10px;'],
'dropdown' => [
'items' => [
['label' => 'Lorem', 'url' => '#'],
['label' => 'Ipsum', 'url' => '#'],
],
],
]);
echo ButtonDropdown::widget([
'label' => 'Button Dropdown',
'options' => ['class'=>'btn-success', 'style'=>'margin-right:10px;'],
'dropdown' => [
'items' => [
['label' => 'Lorem', 'url' => '#'],
['label' => 'Ipsum', 'url' => '#'],
],
],
]);
echo ButtonDropdown::widget([
'label' => 'Button Dropdown',
'options' => ['class'=>'btn-warning', 'style'=>'margin-right:10px;'],
'dropdown' => [
'items' => [
['label' => 'Lorem', 'url' => '#'],
['label' => 'Ipsum', 'url' => '#'],
],
],
]);
echo ButtonDropdown::widget([
'label' => 'Button Dropdown',
'options' => ['class'=>'btn-danger', 'style'=>'margin-right:10px;'],
'dropdown' => [
'items' => [
['label' => 'Lorem', 'url' => '#'],
['label' => 'Ipsum', 'url' => '#'],
],
],
]);
?>
<br/>
<br/>
<p>Berikut ini contoh penggunaan <i>widget</i> ButtonGroups di Yii2:</p>
<?php
echo ButtonGroup::widget([
'buttons' => [
['label' => 'Gunung Fuji', 'options' => ['class'=>'btn-info']],
['label' => 'Gunung Kinabalu', 'options' => ['class'=>'btn-default']],
['label' => 'Bukit Jayawijaya', 'options' => ['class'=>'btn-success']],
['label' => 'Tebing Keraton', 'options' => ['class'=>'btn-warning']],
['label' => 'Puncak Himalaya', 'options' => ['class'=>'btn-danger']],
]
]);
?>

Pada kode diatas, seperti biasa Anda harus menyertakan terlebih dahulu class Button, ButtonGroup, dan ButtonDropdown yang dimiliki oleh Twitter Bootstrap. Kemudian untuk Button, Anda dapat menggunakan dua parameter utama yaitu label dan options. Sedangkan pada ButtonGroup, Anda melewatkan parameter label dan options yang dikemas dalam array PHP dan disimpan di parameter buttons. Sedangkan pada ButtonDropdown, selain parameter label dan options, Anda juga melewatkan parameter dropdowns yang berisi items yang mengemas label dan url.

Sekarang mari kita tambahkan actionDemoButton() di dalam class HelloWidgetController:

<?php

namespace app\controllers;

use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;

class HelloWidgetController extends Controller
{
    .....

    public function actionDemoButton()
    {
        return $this->render('button');
    }
}

Lalu mari kita lihat hasilnya seperti pada gambar berikut:

Menggunakan Widget Twitter Bootstrap: Carousel & Collapse

Masih berlanjut dengan widget yang dimiliki oleh Twitter Bootstrap di Yii2. Sekarang kita akan menggunakan Carousel dan Collapse. Carousel mirip dengan image slider yang dapat menampilkan sebuah banner atau informasi yang akan berganti setiap detiknya. Anda juga dapat menekan tombol panah yang ada di sebelah kanan dan kiri. Sedangkan Collapse sebenarnya nama lain dari Accordion yang ada di jQuery UI. Secara fungsionalitas, Collapse hampir sama dengan Accordion yang ada di jQuery UI. Sekarang kita akan mencoba menggunakan kedua komponen tersebut di dalam view di Yii2.

Sekarang mari kita buat sebuah view dengan nama carousel_collapse.php di folder views/hello-widget. Kemudian buat kode berikut di dalam file tersebut:

<?php

use yii\bootstrap\Carousel;
use yii\bootstrap\Collapse;
$this->title = 'Demo Widget - Carousel & Collapse';

?>

<h1>Demo Widget</h1>

<p>Berikut ini contoh penggunaan <i>widget</i> Carousel di Yii2:</p>

<?php

echo Carousel::widget([
    'items' => [
        [
            'content' => 'Ini adalah slider - 1',
            'caption' => '<h4>This is title</h4><p>This is the caption text</p>',
        ],
        [
            'content' => 'Ini adalah slider - 2',
            'caption' => '<h4>This is title</h4><p>This is the caption text</p>',
        ],
        [
            'content' => 'Ini adalah slider - 3',
            'caption' => '<h4>This is title</h4><p>This is the caption text</p>',
        ],
    ]
]);

?>

<br />
<br />

<p>Berikut ini contoh penggunaan <i>widget</i> Collase di Yii2:</p>

<?php

echo Collapse::widget([
    'items' => [
        [
            'label' => 'Item #1',
            'content' => 'Lorem ipsum sit dolor amet - 1...',
        ],
        [
            'label' => 'Item #2',
            'content' => 'Lorem ipsum sit dolor amet - 2...',
        ],
        [
            'label' => 'Item #3',
            'content' => 'Lorem ipsum sit dolor amet - 3...',
        ]
    ]
]);

?>

Pada kode diatas, setiap items di Collapse, membutuhkan sebuah parameter label dan content. Sedangkan setiap items di Carousel membutuhkan parameter content dan caption. Anda dapat menambahkan parameter lain dengan melihat dokumentasi resmi Yii2.

Sekarang mari kita tambahkan action baru untuk melihat demo tersebut dengan nama actionDemoCarouselCollapse() di controller HelloWidgetController:

<?php

namespace app\controllers;

use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;

class HelloWidgetController extends Controller
{
    .....

    public function actionDemoCarouselCollapse()
    {
        return $this->render('carousel_collapse');
    }
}

Sekarang mari kita lihat hasilnya seperti pada gambar berikut:

Menggunakan Widget Yii2: Breadcrumb

Breadcrumb atau remahan roti, biasa digunakan untuk memberikan navigasi berupa jejak, dimana sajakah user sudah mengunjungi halaman dari aplikasi Anda. Breadcrumb bermanfaat sebagai pengingat langkah user sehingga bisa kembali ke aksi sebelumnya. Misal jika user sudah menambahkan spare part motor baru, maka user dapat kembali ke halaman daftar spare part atau daftar pabrik yang menyediakan spare part untuk bengkel tersebut. Mudah saja, untuk membuat Breadcrumb, Anda harus menggunakan class widget Breadcrumbs yang berasal dari modul yii\widgets\Breadcrumbs, kemudian mengisi setiap link beserta labelnya di dalam parameter links.

Sekarang mari kita buat view dengan nama breadcrumb.php di dalam folder views/hello-widget. Kemudian buat kode berikut di dalam file tersebut:

<?php

use yii\widgets\Breadcrumbs;
$this->title = 'Demo Widget - Breadcrumb';

?>

<?php

echo Breadcrumbs::widget([
    'links' => [
        ['label' => 'Daftar Jadwal Sidang', 'url' => ['site/index']],
        ['label' => 'Daftar Skripsi', 'url' => ['site/index']],
        ['label' => 'Penguji Sidang', 'url' => ['site/index']],
        'Tambah Penguji',
    ],
]);


?>

Seperti biasa, mari kita tambahakan sebuah action yaitu actionDemoBreadcrumb() di dalam class HelloWidgetController:

<?php

namespace app\controllers;

use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;

class HelloWidgetController extends Controller
{
    .....

    public function actionDemoBreadcrumb()
    {
        return $this->render('breadcrumbs');
    }
}

Sekarang mari kita lihat hasilnya pada gambar berikut:

Menggunakan Widget Yii2: Masked Input

Masked Input adalah sebuah input yang telah dimodifikasi dan deret angka atau huruf yang dimasukkan dapat diatur dengan pola tertentu. Misal ketika Anda ingin meminta no telepon dari user, maka Anda dapat menggunakan Masked Input untuk menandai setiap segmen no telepon dengan strip atau menandai dengan kurung buka dan kurung tutup untuk kode area. Yii2 sudah memiliki widget khusus yang dapat membantu Anda untuk membuat Masked Input. Tentu saja hal ini sangat berguna bagi Anda yang membuat aplikasi web. Karena Anda tidak akan repot untuk menyertakan aset CSS dan Javascript terlebih dahulu karena sudah dikondisikan oleh Yii2.

Sekarang Anda akan mencoba 5 buat Masked Input yang berbeda untuk melihat bagaimana Masked Input bekerja. Untuk membuat sebuah Masked Input sederhana, Anda cukup menggunakan dua parameter yaitu name dan mask. Parameter name merupakan nama field yang akan dibuat. Sedangkan parameter mask adalah field yang akan menentukan masukan yang dikirim oleh user. Silahkan buat terlebih dahulu view dengan nama masked_input.php di dalam folder views/hello-widget, kemudian buat kode berikut di dalam file tersebut:

<?php

use yii\widgets\MaskedInput;


$this->title = 'Demo Widget - Masked Input';

?>

<h1>Demo Widget</h1>

<p>Berikut ini contoh penggunaan <i>widget</i> Masked Input di Yii2:</p>

<?php

echo "<p>Telepon:</p>";

echo MaskedInput::widget([
    'name' => 'telepon',
    'mask' => '(999)-999-9999',
]);

echo "<br />";

echo "<p>Handphone:</p>";

echo MaskedInput::widget([
    'name' => 'handphone',
    'mask' => '+(99)-999-9999-9999',
]);

echo "<br />";

echo "<p>Tanggal Lahir:</p>";

echo MaskedInput::widget([
    'name' => 'tanggal_lahir',
    'mask' => '9999-99-99',
]);

echo "<br />";

echo "<p>Kop Surat:</p>";

echo MaskedInput::widget([
    'name' => 'kop_surat',
    'mask' => '99/9999/9999/9999/99',
]);

echo "<br />";

echo "<p>IP Address:</p>";

echo MaskedInput::widget([
    'name' => 'ip_address',
    'mask' => '999.999.999.999',
]);


?>

Kemudian tambahkan juga actionDemoMaskedInput() di dalam class HelloWidgetController:

<?php

namespace app\controllers;

use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;

class HelloWidgetController extends Controller
{
    .....

    public function actionDemoMaskedInput()
    {
        return $this->render('masked_input');
    }
}

Sekarang mari kita lihat hasilnya seperti pada gambar berikut ini:

Penutup

Begitu banyak widget Yii2 yang dapat Anda gunakan agar halaman web semakin terlihat menarik. Di Yii2, untuk menggunakan sebuah komponen Twitter Bootstrap tidak perlu repot untuk mengetik ulang struktur HTML-nya, Anda dapat menggunakan class widget yang sudah dibuat praktis agar kode Anda menjadi lebih bersih dan maintainable. Selain itu, Anda tidak perlu untuk menyertakan widget tersebut karena sudah built-in dan siap pakai, tapi itu khusus untuk Twitter Bootstrap dan Widget Yii2. Untuk menggunakan jQuery UI Anda harus memasangnya terlebih dahulu menggunakan Composer.

Selain menggunakan widget yang sudah built-in, Anda pun dapat membuat widget Anda sendri. Anda juga dapat menggunakan widget yang sudah dibuat oleh orang lain dengan memasangnya melalui Composer.

(arslan/yiiframework)