• Translate

7/14/2017

Getting Started tutorial Web Application Development with Yii2 (Part 4): Widgets

Tutorial PHP | Tutorial Web Design |

Advertisement

Getting Started tutorial Web Application Development with Yii2 (Part 4): Widgets
Yii2 has support for creating an HTML component called a widget. So wherever the page will be issued the same HTML structure, simply by calling the widget and finally you do not have to bother to change the same HTML components that are scattered in various other web pages. Simply by changing the widgets you create, then on other pages will change.

Yii2 has quite a number of widgets. There are widgets that are custom made for Yii2, some are wrapper for jQuery UI and Twitter Bootstrap. There is also a third party by installing it through Composer. Some of the widgets available in Yii2 include:
  • JQuery UI: Accordion, AutoComplete, DatePicker, Dialog, Draggable, Droppable, ProgressBar, Slider, Sortable, and more
  • Twitter Bootstrap: Alert, Button, ButtonDropdown, ButtonGroup, Carousel, Collapse, Dropdown, Progress, Tabs, Nav, Capital, and more
  • Yii2 Widgets: Grid, ListView, DetailView, Breadcrumbs, Pjax, MaskedInput, and more
  • Various third party other provided by vendor or community.
From a number of widgets contained in Yii2, we will taste some of them through this tutorial. Get ready to fasten your seat belts, and let's go. 

Coding Preparation

Before starting the tasting widget, we must first create a controller named HelloWidgetController. Please create a file named HelloWidgetController.php in the controllers folder. Then create the following code inside the file:
<?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',
            ],
        ];
    }
}
Then we also have to create a folder associated with HelloWidgetController, that is the hello-widget folder. Please create a hello-widget folder in the views folder. Later the folder will be filled with the file - view file will be displayed by the action will be created in the class HelloWidgetController

Using Twitter Bootstrap Widget: Alert

Alert is a Twitter Bootstrap component that serves to display a notification that appears amid other HTML components. Usually Alerts appear when the account you submitted when login is wrong, or when uploading a file the size is too large. Alerts can also be used when new people log in shortly after login.

Now let's try the Alert wrapped through the widget in Yii2. Please add actionIndex first in HelloWidgetController class:
<?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');
    }
}
And after the action is added, we must create the view file to be displayed. Please create a file named index.php in the views/hello-widget folder. Then create the following code inside the file: 
<?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...',
]);

?>
In the above code, you must first include the Alert class of yii\widgets\Alert. After that you can use Alert widget inside your view page. Generally Alert has two parameters namely options and body. Options parameters are the various attributes that will be inserted in the Alert release tag. For example class, style, id, and others. The body parameter contains the text that will be displayed in Alert.

Now let's look at the result as shown below: 
Using Twitter Bootstrap Widget: Alert

Using Twitter Bootstrap Widget: Modal

Modal is an element of popup that will appear when pressing the trigger. Eg trigger is a button "Add New Member". Then a pretty popup will appear that contains a form to add new members. Modal can also be used as a notification or warning of an action by the user. Assume only when the user fails to add attachments to his email then a Modal will appear to tell you what error occurred while sending the message.

Yii2 has a widget for creating a Modal. Exactly under the Bootstrap Twitter widget. Now we will try to install a Modal in view Yii2. Please create a file named modal.php in the views/hello-widget folder. Then create the following code inside the file:
<?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();

?>
In the above code, Modal has three main parameters: header, footer, and toggleButton. The header parameter is the content that will fill in the modal header section. The footer parameter is the content that will fill in the modal footer section. And toggleButton is the button that will initiate Modal when clicked.

In order for the view to be seen, you must add actionDemoModal() inside 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');
    }
}
Now let's look at the result as shown below: 
Using Twitter Bootstrap Widget: Modal

Using Twitter Bootstrap Widget: Button

If you want a button that is better than the default HTML button you must create your own CSS. However Yii2 can help you to create buttons that have Twitter Bootstrap style. This widget is still part of the Bootstrap Twitter widget found in Yii2. Now please create a file named button.php inside the views/hello-widget folder. Then create the following code inside the file:
<?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']],
    ]
]);

?>
In the above code, as usual you have to include first class Button, ButtonGroup, and ButtonDropdown owned by Twitter Bootstrap. Then for Button, you can use two main parameters namely label and options. While on ButtonGroup, you pass the label and option parameters packaged in PHP arrays and stored in parameter buttons. While on ButtonDropdown, in addition to label and options parameters, you also miss the parameter dropdowns that contain items that pack labels and urls.

Now let's add the actionDemoButton() inside the HelloWidgetController class: 
<?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');
    }
}
Then let's see the result as shown below: 
Using Twitter Bootstrap Widget: Button

Using Twitter Bootstrap Widget: Carousel & Collapse

It continues with widgets owned by Twitter Bootstrap in Yii2. Now we will use Carousel and Collapse. Carousel is similar to the image slider that can display a banner or information that will change every second. You can also press the arrow keys on the right and left. While Collapse is actually another name of the Accordion in jQuery UI. Functionality, Collapse is similar to Accordion in jQuery UI. Now we will try to use both components in view in Yii2.

Now let's create a view with the name carousel_collapse.php in the views/hello-widget folder. Then create the following code inside the file:
<?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...',
        ]
    ]
]);

?>
In the above code, each item in Collapse, requires a label and content parameter. While each item in Carousel requires content and caption parameters. You can add other parameters by viewing the official Yii2 documentation.

Now let's add a new action to see the demo by actionDemoCarouselCollapse() in the HelloWidgetController controller: 
<?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');
    }
}
Now let's look at the result as shown below: 
Using Twitter Bootstrap Widget: Carousel & Collapse

Using the Yii2 Widget: Breadcrumb

Breadcrumb, commonly used to provide navigation in the form of traces, where all users have visited the page of your application. Breadcrumb is useful as a reminder of user steps so it can return to previous action. For example if the user has added a new motor spare part, then the user can return to the page list of spare parts or list of factories that provide spare parts for the workshop. Simply, to create a Breadcrumb, you must use the Breadcrumbs class widget that comes from the yii\widgets\Breadcrumbs module, then fill in each link along with its label inside the links parameter.

Now let's create a view named breadcrumb.php inside the views/hello-widget folder. Then create the following code inside the file:
<?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',
    ],
]);

?>
Then let's add an actionDemoBreadcrumb() action in the HelloWidgetController class: 
<?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');
    }
}
Now let's see the result in the following picture: 
Using the Yii2 Widget: Breadcrumb

Using the Yii2 Widget: Masked Input

Masked Input is an input that has been modified and the series of numbers or letters entered can be arranged with a certain pattern. For example when you want to ask for a phone number from a user, you can use Masked Input to mark any segment no phone with a strip or mark with parenthesis and closing brackets for the area code. Yii2 already has a special widget that can help you to create Masked Input. Of course this is very useful for you who create web applications. Because you will not bother to include CSS and Javascript assets first because it is conditioned by Yii2.

Now you will try 5 create a different Masked Input to see how the Masked Input works. To create a simple Input Masked, you simply use two parameters namely name and mask. The name parameter is the name of the field to be created. While the mask parameter is the field that will determine the input sent by the user. Please create a view first with the name masked_input.php inside the views/hello-widget folder, then create the following code in the file:
<?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',
]);

?>
Then also add actionDemoMaskedInput() inside the HelloWidgetController class:
<?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');
    }
}
Now let's see the result as shown below: 
Using the Yii2 Widget: Masked Input

Using the Yii2 Widget: Masked Input

Closing

So many Yii2 widgets that you can use to make web pages look more attractive. In Yii2, to use a Twitter component Bootstrap does not have to bother to retype its HTML structure, you can use a custom class widget to make your code cleaner and maintainable. In addition, you do not need to include the widget because it is built-in and ready to use, but that's specific for Twitter Bootstrap and Widget Yii2. To use jQuery UI you must first install it using Composer.

In addition to using built-in widgets, you can also create your own widgets. You can also use widgets created by others by installing them through Composer.

Cooperation with (Arslan / yiiframework)

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.