Data Widgets

Yii provides a set of widgets for displaying data. You can use the DetailView widget to display a single record. The ListView widget, as well as Grid View, can be used to display a table of records with features like filtering, sorting, and pagination.

Preparing the DB

Step 1 − Create a new database. Database can be prepared in the following two ways.

• In the terminal run mysql -u root –p
• Create a new database via CREATE DATABASE helloworld CHARACTER SET utf8 COLLATE utf8_general_ci;

Step 2 − Configure the database connection in the config/db.php file. The following configuration is for the system used currently.

<?php
   return [
      'class' => 'yii\db\Connection',
      'dsn' => 'mysql:host=localhost;dbname=helloworld',
      'username' => 'vladimir',
      'password' => '12345',
      'charset' => 'utf8',
   ];
?>

Step 3 − Inside the root folder run./yii migrate/create test_table. This command will create a database migration for managing our DB. The migration file should appear in the migrations folder of the project root.

Step 4 − Modify the migration file (m160106_163154_test_table.php in this case) this way.

<?php
   use yii\db\Schema;
   use yii\db\Migration;
   class m160106_163154_test_table extends Migration {
      public function safeUp() {
         $this->createTable("user", [
            "id" => Schema::TYPE_PK,
            "name" => Schema::TYPE_STRING,
            "email" => Schema::TYPE_STRING,
         ]);
         $this->batchInsert("user", ["name", "email"], [
            ["User1", "[email protected]"],
            ["User2", "[email protected]"],
            ["User3", "[email protected]"],
            ["User4", "[email protected]"],
            ["User5", "[email protected]"],
            ["User6", "[email protected]"],
            ["User7", "[email protected]"],
            ["User8", "[email protected]"],
            ["User9", "[email protected]"],
            ["User10", "[email protected]"],
            ["User11", "[email protected]"],
         ]);
      }
      public function safeDown() {
         $this->dropTable('user');
      }
   }
?>

The above migration creates a user table with these fields: id, name, and email. It also adds a few demo users.

Step 5 − Inside the project root run./yii migrate to apply the migration to the database.

Step 6 − Now, we need to create a model for our user table. For the sake of simplicity, we are going to use the Gii code generation tool. Open up this url: http://localhost:8080/index.php?r=gii. Then, click the “Start” button under the “Model generator” header. Fill in the Table Name (“user”) and the Model Class(“MyUser”), click the “Preview” button and finally, click the “Generate” button.

The MyUser model should appear in the models directory.

DetailView Widget

The DetailView widget shows the data of a single model. The $attributes property defines which model attributes should be displayed.

Step 1 − Add the actionDataWidget method to the SiteController.

public function actionDataWidget() {
   $model = MyUser::find()->one();
   return $this->render('datawidget', [
      'model' => $model
   ]);
}

In the above code, we find that the first MyUser model and pass it to the datawidget view.

Step 2 − Create a file called datawidget.php inside the views/site folder.

<?php
   use yii\widgets\DetailView;
   echo DetailView::widget([
      'model' => $model,
      'attributes' => [
         'id',
         //formatted as html
         'name:html',
         [
            'label' => 'e-mail',
            'value' => $model->email,
         ],
      ],
   ]);
?>

Step 3 − If you go to http://localhost:8080/index.php?r=site/data-widget, you will see a typical usage of the DetailView widget.