9 フォロワー

フォームの操作

このセクションでは、ユーザからデータを取得するためのフォームを持つ新しいページを作成する方法を説明します。ページには、名前入力フィールドとメールアドレス入力フィールドを持つフォームが表示されます。ユーザからこれらの 2 つの情報を受け取った後、ページは入力された値をエコーバックして確認します。

これを実現するために、アクションと 2 つのビューを作成するだけでなく、モデルも作成します。

このチュートリアルを通して、あなたは次のことを学ぶでしょう。

  • フォームを通してユーザによって入力されたデータを表すモデルを作成する。
  • 入力されたデータを検証するためのルールを宣言する。
  • ビューで HTML フォームを構築する。

モデルの作成

ユーザからリクエストされるデータは、以下に示すように EntryForm モデルクラスで表現され、models/EntryForm.php ファイルに保存されます。クラスファイルの名前付け規則に関する詳細については、クラスのオートローディングのセクションを参照してください。

<?php

namespace app\models;

use Yii;
use yii\base\Model;

class EntryForm extends Model
{
    public $name;
    public $email;

    public function rules()
    {
        return [
            [['name', 'email'], 'required'],
            ['email', 'email'],
        ];
    }
}

このクラスは、Yii によって提供される基底クラスであり、フォームデータを表すためによく使用される yii\base\Model から拡張されます。

情報: yii\base\Model は、データベーステーブルに関連付けられていないモデルクラスの親として使用されます。 yii\db\ActiveRecord は通常、データベーステーブルに対応するモデルクラスの親となります。

EntryForm クラスは、ユーザーが入力したデータを格納するために使用される、nameemail という2つの public メンバーを含んでいます。また、データの検証ルールを返す rules() という名前のメソッドも含まれています。上記で宣言された検証ルールは、以下のことを示しています。

  • nameemail の両方の値が必須である
  • email データは、構文的に有効なメールアドレスでなければならない

ユーザーが入力したデータで設定された EntryForm オブジェクトがある場合、その validate() メソッドを呼び出してデータ検証ルーチンをトリガーできます。データ検証に失敗すると、hasErrors プロパティが true に設定され、発生した検証エラーは errors を通じて知ることができます。

<?php
$model = new EntryForm();
$model->name = 'Qiang';
$model->email = 'bad';
if ($model->validate()) {
    // Good!
} else {
    // Failure!
    // Use $model->getErrors()
}

アクションの作成

次に、新しいモデルを使用する site コントローラーに entry アクションを作成する必要があります。アクションの作成と使用のプロセスは、Helloと言う セクションで説明しました。

<?php

namespace app\controllers;

use Yii;
use yii\web\Controller;
use app\models\EntryForm;

class SiteController extends Controller
{
    // ...existing code...

    public function actionEntry()
    {
        $model = new EntryForm();

        if ($model->load(Yii::$app->request->post()) && $model->validate()) {
            // valid data received in $model

            // do something meaningful here about $model ...

            return $this->render('entry-confirm', ['model' => $model]);
        } else {
            // either the page is initially displayed or there is some validation error
            return $this->render('entry', ['model' => $model]);
        }
    }
}

アクションは、まず EntryForm オブジェクトを作成します。次に、Yii で yii\web\Request::post() によって提供される $_POST からのデータでモデルを設定しようとします。モデルが正常に設定された場合(つまり、ユーザーが HTML フォームを送信した場合)、アクションは validate() を呼び出して、入力された値が有効であることを確認します。

情報: Yii::$app は、グローバルにアクセス可能なシングルトンである アプリケーション インスタンスを表します。これは、特定の機能をサポートするために、requestresponsedb などのコンポーネントを提供する サービスロケーター でもあります。上記のコードでは、アプリケーションインスタンスの request コンポーネントを使用して $_POST データにアクセスしています。

すべてが正常であれば、アクションは entry-confirm という名前のビューをレンダリングして、データの送信が成功したことをユーザーに確認します。データが送信されなかった場合や、データにエラーが含まれている場合は、HTML フォームが表示され、検証エラーメッセージも表示される entry ビューがレンダリングされます。

注意: この非常にシンプルな例では、有効なデータ送信時に確認ページをレンダリングするだけです。実際には、refresh() または redirect() を使用して、フォームの再送信の問題 を回避することを検討する必要があります。

ビューの作成

最後に、entry-confirmentry という名前の2つのビューファイルを作成します。これらは、上述したように、entry アクションによってレンダリングされます。

entry-confirm ビューは、名前とメールデータを単純に表示します。これは、views/site/entry-confirm.php ファイルに保存する必要があります。

<?php
use yii\helpers\Html;
?>
<p>You have entered the following information:</p>

<ul>
    <li><label>Name</label>: <?= Html::encode($model->name) ?></li>
    <li><label>Email</label>: <?= Html::encode($model->email) ?></li>
</ul>

entry ビューは、HTML フォームを表示します。これは、views/site/entry.php ファイルに保存する必要があります。

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>
<?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'name') ?>

    <?= $form->field($model, 'email') ?>

    <div class="form-group">
        <?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?>
    </div>

<?php ActiveForm::end(); ?>

ビューは、HTML フォームを構築するために ActiveForm という強力な ウィジェット を使用します。ウィジェットの begin() および end() メソッドは、それぞれ開始と終了のフォームタグをレンダリングします。2つのメソッド呼び出しの間で、入力フィールドは field() メソッドによって作成されます。最初の入力フィールドは「name」データ用、2番目は「email」データ用です。入力フィールドの後に、yii\helpers\Html::submitButton() メソッドが呼び出され、送信ボタンが生成されます。

試してみる

どのように機能するかを確認するには、ブラウザを使用して次の URL にアクセスしてください。

https://hostname/index.php?r=site%2Fentry

2つの入力フィールドを持つフォームを表示するページが表示されます。各入力フィールドの前には、入力するデータを示すラベルが表示されます。何も入力せずに送信ボタンをクリックした場合、または有効なメールアドレスを提供しない場合は、問題のある各入力フィールドの横にエラーメッセージが表示されます。

Form with Validation Errors

有効な名前とメールアドレスを入力して送信ボタンをクリックすると、入力したデータが表示される新しいページが表示されます。

Confirmation of Data Entry

マジックの説明

各入力フィールドのラベルを表示し、ページをリロードすることなくデータを正しく入力しない場合にエラーメッセージを表示できるのは、HTML フォームがどのようにバックグラウンドで動作するのか不思議に思うかもしれません。

はい、データ検証は最初にクライアント側で JavaScript を使用して行われ、次にサーバー側で PHP を介して行われます。yii\widgets\ActiveForm は、EntryForm で宣言した検証ルールを抽出して実行可能な JavaScript コードに変換し、その JavaScript を使用してデータ検証を実行するのに十分なほどスマートです。ブラウザで JavaScript を無効にした場合でも、actionEntry() メソッドで示されているように、検証はサーバー側で実行されます。これにより、あらゆる状況でデータの有効性が保証されます。

警告: クライアント側の検証は、ユーザーエクスペリエンスを向上させるための便利なものです。クライアント側の検証が実施されているかどうかに関係なく、サーバー側の検証は常に必要です。

入力フィールドのラベルは、モデルのプロパティ名を使用して field() メソッドによって生成されます。たとえば、name プロパティには「Name」というラベルが生成されます。

次のコードを使用して、ビュー内のラベルをカスタマイズできます。

<?= $form->field($model, 'name')->label('Your Name') ?>
<?= $form->field($model, 'email')->label('Your Email') ?>

情報: Yii は、複雑で動的なビューを迅速に構築するのに役立つ、このようなウィジェットを多数提供しています。後で学ぶように、新しいウィジェットを作成することも非常に簡単です。今後のビュー開発を簡素化するために、ビューコードの多くを再利用可能なウィジェットに変えることをお勧めします。

まとめ

このガイドのセクションでは、MVC アーキテクチャパターンのすべての部分に触れました。ユーザーデータを表現し、そのデータを検証するためのモデルクラスを作成する方法を学びました。

また、ユーザーからデータを取得する方法と、ブラウザにデータを表示する方法も学びました。これは、アプリケーションを開発するときに多くの時間がかかる可能性のあるタスクですが、Yii はこのタスクを非常に簡単にする強力なウィジェットを提供します。

次のセクションでは、ほぼすべてのアプリケーションで必要となるデータベースの操作方法を学びます。

タイプミスを見つけましたか、またはこのページを改善する必要があると思いますか?
github で編集してください !