Paano I-programa ang Yii2: Pagtatrabaho sa Database at Aktibong Talaan

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Kung ika’y nagtatanong, “Ano ang Yii?” Tignan ang nauna kong pagtuturo: Panimula sa Yii Framework, kung saan ay sinisiyasat ang benepisyo ng Yii at kabilang dito ang pangkalahatang-ideya kung ano ang bago sa Yii 2.0, nilabas noong Oktubre 12, 2014.

Sa Pag-programa ng Yii2: Pagsisimula, kami ay nag-set up ng Yii2 na lokal lamang, bumuo ng Hello World application, nag-set up ng remote server at gumamit ng GitHub upang palawakin ang ating code. Sa ikalawang parte, natutunan natin ang tungkol sa pagpapatupad ng Model View Controller architecture ng Yii’s at kung paano gumawa ng mga pahina ng web at forms na mangongolekta at magpapatunay ng datos. Sa pagtuturong ito, gagamitin natin ang database at kakayahan ng aktibong talaan para awtomatikong maggawa ang code generation para sa basic web application.

Para sa mga halimbawang ito, ipagpapatuloy natin isipin na tayo ay gagawa ng balangkas para sa pag-paskil ng simpleng status updates, hal. ang ating mini-twitter.

1. Paglikha ng Iyong Database

Una, kailangan natin lumikha ng database sa ating development environment. Ginagawa ko ito sa pamamagitan ng MAMP’s PHPMyAdmin web user interface. Mag-navigate sa PHPMyAdmin, hal. http://localhost:8888/MAMP/index.php?page=phpmyadminpiliin ang Databases tab at lumikha ng database na tatawaging hello:

Maari ka rin gumamit ng MySQL command line interface.

Ngayon, kami ay magbibigay ng database credentials sa Yii’s database configuration file. Buksan /hello/config/db.php at ibigay ang iyong MySQL database credentials. Ganito ang itsura nang sa akin:

<?php

return [
    'class' => 'yii\db\Connection',
    'dsn' => 'mysql:host=localhost;dbname=hello',
    'username' => 'root',
    'password' => 'password',
    'charset' => 'utf8',
];

Ngayon, maglilikha tayo ng ating unang database migration. Ang migration ay nagbibigay ng programmatic na paraan upang makalikha at mag-update ng database schemas. Ito ay sadyang makakatulong kung ika’y nagpapatakbo ng maramihang servers o sa development environments. Tinatanggal nito ang kahirapan sa pag-angkat ng SQL scripts.

Para sa ating halimbawa ng mga coding, maaari mong gamitin ang Git repository mula sa huling pagtuturo upang sumunod na lang,o maari kang mag-downlod ng na-kumpletong repository dito.

Lumikha ng Migration

Ang ating unang migration ay lilikha ng Status table. Buksan ang Terminal at ipasok ang mga sumusunod:

1	cd ~/Sites/hello
2	./yii migrate/create create_status_table

Ganito dapat ang itsura, kapag natapos mo na:

Kapag iyong binukasan \hello\migrations, makikita mo ang file na may pangalan na katulad sa m141201_013120_create_status_table.php. Ganito dapat ang itsura nyan kapag binuksan.

<?php

use yii\db\Schema;
use yii\db\Migration;

class m141201_013120_create_status_table extends Migration
{
    public function up()
    {

    }

    public function down()
    {
        echo "m141201_013120_create_status_table cannot be reverted.\n";

        return false;
    }
}

Ito ang default migration code na bigay ng Yii. Sunod, i-update natin ito upang ibigay ang mga patlang na kailangan natin.

Pagbuo ng Status Table

Ang ating Status table ay pag-iimbakan ng mga texto na mensahe at tutukuyin kung ang isang paskil ay pribado o publiko. Bawat hanay ay magkakaroon ng id, lumikha at mag-update ng patlang ng oras.

I-update ang iyong migration code sang-ayon sa amin:

public function up()
    {
          $tableOptions = null;
          if ($this->db->driverName === 'mysql') {
              $tableOptions = 'CHARACTER SET utf8 COLLATE utf8_unicode_ci ENGINE=InnoDB';
          }

          $this->createTable('{{%status}}', [
              'id' => Schema::TYPE_PK,
              'message' => Schema::TYPE_TEXT.' NOT NULL DEFAULT ""',
              'permissions' => Schema::TYPE_SMALLINT . ' NOT NULL DEFAULT 0',
              'created_at' => Schema::TYPE_INTEGER . ' NOT NULL',
              'updated_at' => Schema::TYPE_INTEGER . ' NOT NULL',
          ], $tableOptions);
      }


    public function down()
    {
      $this->dropTable('{{%status}}');
    }

Punahin kung paano namin idinagdag ang mga depinisyon para sa mga patlang na ating kailangan gaya ng mensahe, permiso, created_at, at updated_at.

I-run ang Migration

Para sabihin sa Yii na lumikha ng table, kailangan natin i-run ang migration. Madali lan. Mula sa Terminal gain, we run ./yii migrate/up:

$ ./yii migrate/up
Yii Migration Tool (based on Yii v2.0.0)

Total 1 new migration to be applied:
    m141201_013120_create_status_table

Apply the above migration? (yes|no) [no]:yes
*** applying m141201_013120_create_status_table
    > create table {{%status}} ... done (time: 0.032s)
*** applied m141201_013120_create_status_table (time: 0.038s)


Migrated up successfully.

Kung nag-browse sa table gamit ang PHPMyAdmin, may makikita ka dapat na parang ganito:

Ngayon na nakalikha na tayo ng database table, maari na natin simulan gamitin ang Gii, Yii’s powerful scaffolding generator, para ma-automate ang lahat ng model view controller code.

2. Gamit ang Gii: Ang Yii Code Generator

Gii ay ang Yii’s scaffolding code generator. Ginagamit nito ang kaalaman ng iyong database schema para makalikha ng mahusay na sulat, default model view controller code para sa iyong aplikasyon. Maaring magawa ng Gii na masalin ang database schema sa isang karaniwan na gumaganang web application sa ilan minuto lamang. Ito ay hindi kapani-paniwalang malakas. Hayaan mong ipakita ko sa iyo kung paano ito gumagana.

Pagbuo ng Modelo

Sa Gii, atin simulan sa pamamagitan ng pagbuo ng modelo ayon sa bawat database table na ating nilikha. Para sa aming halimbawa, gagamitin natin ang Status table.

Upang simulan gamitin ang Gii, i-navigate ang iyong web application at /gii, hal. http://localhost:8888/hello/web/gii. May makikita ka na katulad nito:

I-klik ang Model Generator, at ipasok ang status sa patlang ng Table Name:

Kapag nag-klik ka sa Preview, ipapakita sa iyo kung anong files ang bubuuin. Dahil sa mayroon na tayong Status.php model file mula sa huling pagtuturo, i-klik ang Overwrite. Pagkatapos, i-klik ang Generate.

Ang mga resulta ay magiging ganito:

Buksan ang /hello/models/Status.php file at makikita mo ang pangunahing patunay na panuntunan at form attributes kung saan ay binuo ng Yii para sa atin:

<?php

namespace app\models;

use Yii;

/**
 * This is the model class for table "status".
 *
 * @property integer $id
 * @property string $message
 * @property integer $permissions
 * @property integer $created_at
 * @property integer $updated_at
 */
class Status extends \yii\db\ActiveRecord
{
    /**
     * @inheritdoc
     */
    public static function tableName()
    {
        return 'status';
    }

    /**
     * @inheritdoc
     */
    public function rules()
    {
        return [
            [['message', 'created_at', 'updated_at'], 'required'],
            [['message'], 'string'],
            [['permissions', 'created_at', 'updated_at'], 'integer']
        ];
    }

    /**
     * @inheritdoc
     */
    public function attributeLabels()
    {
        return [
            'id' => 'ID',
            'message' => 'Message',
            'permissions' => 'Permissions',
            'created_at' => 'Created At',
            'updated_at' => 'Updated At',
        ];
    }
}

Pagbuo ng Web Interface

Ngayon, oras na para gamitin ang Gii para buuin ang controller at views para sa Status table. Bumalik sa Gii home page at i-klik ang CRUD Generator, http://localhost:8888/hello/web/gii/crud:

Para sa Model Class, itala ang app\models\Status (Ang mga tala na ito ay case sensitive). Para sa Search Model Class, magpasok app\models\StatusSearch. Para sa Controller Class, magpasok app\controllers\StatusController. Dapat itong magmukhang ganito:

I-klik ang Preview. Makikita mo ang mga sumusunod-siguraduhin na click Overwrite ulit dahil sa mayroon tayong lumang files mula sa huli nating pagtuturo na kailangan i-update:

Kapag na-klik mo ang Generate, makikita mo ang lahat ng controller at view files generated:

Ang mga pahina ng Default CRUD

I-navigate ang iyong browser sa http://localhost:8888/hello/web/status, at makikita mo ang generated CRUD index page. Gayon wala pa namang anuman mga hanay sa database, ito’y lumalabas na walang laman.

Ngayon, mag-klik sa Create Status at makikita mo ang default Create Status Form na nilikha ng Gii:

Lubhang kahanga-hanga kung gaano kabilis nilikha ng Gii ang code para sa atin. Sunod, ating i-customize ang scaffolding code para magawa nitong gumana para sa atin.

3. Pag-customize ng Ating Code

Pag-customize ng Form View

Ating linisin ang form. Sa /hello/views/Status/_form.php, tanggalin ang nalikha at na-update na fields:

1	<?= $form->field($model, 'created_at')->textInput() ?>
2	<?= $form->field($model, 'updated_at')->textInput() ?>

Palitan ang permissions field ng may drop-down list code na nilikha natin sa ikalawang parte ng seryeng ito:

1	<?=
2	$form->field($model, 'permissions')->dropDownList($model->getPermissions(),
3	['prompt'=>'- Choose Your Permissions -']) ?>

Kailangan natin ilagay ang getPermissions function din muli sa model. I-edit /hello/models/Status.php. Ibalik ang constant definitions at permissions function:

      const PERMISSIONS_PRIVATE = 10;
      const PERMISSIONS_PUBLIC = 20;  
...

public function getPermissions() {
      return array (self::PERMISSIONS_PRIVATE=>'Private',self::PERMISSIONS_PUBLIC=>'Public');
    }
    
    public function getPermissionsLabel($permissions) {
      if ($permissions==self::PERMISSIONS_PUBLIC) {
        return 'Public';
      } else {
        return 'Private';        
      }
    }

Ang iyong bagong Status form ay dapat magmukhang ganito:

Kailangan natin isaayos ang controller ng konti para gawin na ang form ay ma-save nang tama.

Pag-customize sa Controller

Sa /hello/controllers/StatusController.php, palitan ang actionCreate method ng code na ito:

public function actionCreate()
    {
        $model = new Status();

        if ($model->load(Yii::$app->request->post())) {
          $model->created_at = time();
          $model->updated_at = time();
           if ($model->save()) {             
             return $this->redirect(['view', 'id' => $model->id]);             
           } 
        } 
        return $this->render('create', [
            'model' => $model,
        ]);
    }

Kapag ang form ay naipaskil na, mano-mano nating i-set ang created at updated_at fields, pagkatapos ay i-save natin ang datos sa database.

Kapag na-save mo na ang iyong unang status update, makikita mo ang mga sumusunod na view page:

Pagsasaayos ng Layout

Ating isaayos muli ang navbar upang hindi ito mag-drop down para sa Status pero lilipat diretso sa Status index page. I-edit /hello/views/layouts/main.php at palitan ng ang Nav::widget code nang ganito:

echo Nav::widget([
                'options' => ['class' => 'navbar-nav navbar-right'],
                'items' => [
                    ['label' => 'Home', 'url' => ['/site/index']],
                    ['label' => 'Status', 'url' => ['/status/index']],
                    ['label' => 'About', 'url' => ['/site/about']],
                    ['label' => 'Contact', 'url' => ['/site/contact']],
                    Yii::$app->user->isGuest ?
                        ['label' => 'Login', 'url' => ['/site/login']] :
                        ['label' => 'Logout (' . Yii::$app->user->identity->username . ')',
                            'url' => ['/site/logout'],
                            'linkOptions' => ['data-method' => 'post']],
                ],
            ]);

Ang Grid View

Kapag ikaw ay babalik sa Status index view, makikita mo ang Yii2 Grid na puno ng datos:

Ang code na nag-generate ng pahinang ito ay sa /hello/views/status/index.php:

<?php

use yii\helpers\Html;
use yii\grid\GridView;

/* @var $this yii\web\View */
/* @var $searchModel app\models\StatusSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = 'Statuses';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="status-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
        <?= Html::a('Create Status', ['create'], ['class' => 'btn btn-success']) ?>
    </p>

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            'id',
            'message:ntext',
            'permissions',
            'created_at',
            'updated_at',

            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>

</div>

Kung sinubukan mo ang column sorting at view, i-update at burahin ang icons, makikita mo na ang Gii ay bumuo din ng mga tampok para sa lahat ng pag-andar nito.

Kung kaya’t sa ilan minuto lamang, nalikha natin ang schema para sa ating database, at nag-generate ng model at lahat ng web application code na kinakailangan para sa basic application. Sana ay nakita mo ang kahanga-hangang kakayahan ng Yii’s code generation kagaya ko.

Ano ang Susunod?

Sunod, Ipapakita ko sa iyo kung paano magbuo ng pag-rehistro ng gumagamit at kakayahang mag-login sa ating application para ma-set up natin ang pinagsamang kaugnayan sa pagitan ng status posts at specific users.

Kung nais mong malaman kung kailan ang susunod na dating ng pagtuturo sa Yii2, sundan ako @reifman sa Twitter o tignan ang aking Tuts+ pahina ng tagapagturo. Ang aking pahina ng tagapagturo ay kasama ang lahat ng mga artikulo mula sa seryeng ito sa sandaling ito ay malatha.