CakePHP3のモデルとFormクラスの混合バリデーションでフォーム＆登録機能を構築する

テーブル作成

マイグレーションにて、データベースにテーブルを追加していきます。

# CakePHPのルートディレクトリへ移動する
cd /path/to/cakephp

# bakekコマンドでマイグレーションファイルを生成する
bin/cake bake migration CreateSubmission student_name:string affiliation:string issue_name:string file_name:string created modified

# 実行結果
[demo@localhost cakephp]# bin/cake bake migration CreateSubmission student_name:string affiliation:string issue_name:string file_name:string created modified

Creating file /var/www/html/cakephp/config/Migrations/XXXX_CreateSubmission.php
Wrote `/var/www/html/cakephp/config/Migrations/XXXX_CreateSubmission.php`

cakephp
├─ config
│   ├─ Migrations
│   │   ├─ XXXX_CreateSubmission.php

# CakePHPのルートディレクトリへ移動する
cd /path/to/cakephp

# マイグレーションを実行する
bin/cake migrations migrate

# 実行結果
[demo@localhost cakephp]# bin/cake migrations migrate
using migration paths 
 - /var/www/html/cakephp/config/Migrations
using seed paths 
 - /var/www/html/cakephp/config/Seeds
using environment default
using adapter mysql
using database cakephp

 == XXXX CreateSubmission: migrating
 == XXXX CreateSubmission: migrated 0.6392s

All Done. Took 0.7666s
using migration paths 
 - /var/www/html/cakephp/config/Migrations
using seed paths 
 - /var/www/html/cakephp/config/Seeds
Writing dump file `/var/www/html/cakephp/config/Migrations/schema-dump-default.lock`...
Dump file `/var/www/html/cakephp/config/Migrations/schema-dump-default.lock` was successfully written

mysql> show tables;
+-------------------+
| Tables_in_cakephp |
+-------------------+
| phinxlog          |
| submission        |
+-------------------+

mysql> show columns from submission;
+--------------+--------------+------+-----+---------+----------------+
| Field        | Type         | Null | Key | Default | Extra          |
+--------------+--------------+------+-----+---------+----------------+
| id           | int(11)      | NO   | PRI | NULL    | auto_increment |
| student_name | varchar(255) | NO   |     | NULL    |                |
| affiliation  | varchar(255) | NO   |     | NULL    |                |
| issue_name   | varchar(255) | NO   |     | NULL    |                |
| file_name    | varchar(255) | NO   |     | NULL    |                |
| created      | datetime     | NO   |     | NULL    |                |
| modified     | datetime     | NO   |     | NULL    |                |
+--------------+--------------+------+-----+---------+----------------+

モデル作成

次にモデルを作成します。cakephpルートディレクトリへ移動し、以下のbakeコマンドを叩きます。

# CakePHPのルートディレクトリへ移動する
cd /path/to/cakephp

# bakeコマンドでモデルを生成する
bin/cake bake model Submission

# 実行結果
[demo@localhost cakephp]# bin/cake bake model Submission
One moment while associations are detected.

Baking table class for Submission...

Creating file /var/www/html/cakephp/src/Model/Table/SubmissionTable.php
Wrote `/var/www/html/cakephp/src/Model/Table/SubmissionTable.php`

Baking entity class for Submission...

Creating file /var/www/html/cakephp/src/Model/Entity/Submission.php
Wrote `/var/www/html/cakephp/src/Model/Entity/Submission.php`

• cakephp/src/Model/Table 配下に SubmissionTable.php
• cakephp/src/Model/Entity 配下に Submission.php

が生成されます。

cakephp
├─ src
│   ├─ Model
│   │   ├─ Entity
│   │   │   └─ Submission.php
│   │   ├─ Table
│   │   │   └─ SubmissionTable.php

コントローラ作成

次はコントローラです。これもbakeコマンドで生成するので、cakephpルートディレクトリへ移動し以下のコマンドを叩きます。

# CakePHPのルートディレクトリへ移動する
cd /path/to/cakephp

# bakeコマンドでコントローラを生成する
bin/cake bake controller Submission

# 実行結果
[demo@localhost cakephp]# bin/cake bake controller Submission

Baking controller class for Submission...

Creating file /var/www/html/cakephp/src/Controller/SubmissionController.php
Wrote `/var/www/html/cakephp/src/Controller/SubmissionController.php`
Bake is detecting possible fixtures...

Baking test case for App\Controller\SubmissionController ...

Creating file /var/www/html/cakephp/tests/TestCase/Controller/SubmissionControllerTest.php
Wrote `/var/www/html/cakephp/tests/TestCase/Controller/SubmissionControllerTest.php`

cakephp/src/Controller 配下に SubmissionController.php が生成されます。

cakephp
├─ src
│   ├─ Controller
│   │   ├─ SubmissionController.php

テンプレート作成

最後にテンプレートを作成します。cakephpルートディレクトリへ移動し、以下のbakeコマンドを叩きます。

# CakePHPのルートディレクトリへ移動する
cd /path/to/cakephp

# bakeコマンドでテンプレートを生成する
bin/cake bake template Submission

# 実行結果
[demo@localhost cakephp]# bin/cake bake template Submission

Baking `index` view template file...

Creating file /var/www/html/cakephp/src/Template/Submission/index.ctp
Wrote `/var/www/html/cakephp/src/Template/Submission/index.ctp`

Baking `view` view template file...

Creating file /var/www/html/cakephp/src/Template/Submission/view.ctp
Wrote `/var/www/html/cakephp/src/Template/Submission/view.ctp`

Baking `add` view template file...

Creating file /var/www/html/cakephp/src/Template/Submission/add.ctp
Wrote `/var/www/html/cakephp/src/Template/Submission/add.ctp`

Baking `edit` view template file...

Creating file /var/www/html/cakephp/src/Template/Submission/edit.ctp
Wrote `/var/www/html/cakephp/src/Template/Submission/edit.ctp`

cakephp/src/Template/Submission 配下にそれぞれのテンプレートファイルが生成されます。

cakephp
├─ src
│   ├─ Template
│   │   ├─ Submission
│   │   │   ├─ add.ctp
│   │   │   ├─ edit.ctp
│   │   │   ├─ index.ctp
│   │   │   └─ view.ctp

テンプレート実装

まずは、テンプレートの登録画面に、ファイル選択のパーツを追加します。

add.ctp を開いて、フォームヘルパー部分に１行追加＆１行コメントアウト（削除でもOK）します。

cakephp/src/Template/Submission/add.ctp

<nav class="large-3 medium-4 columns" id="actions-sidebar">
    <ul class="side-nav">
        <li class="heading"><?= __('Actions') ?></li>
        <li><?= $this->Html->link(__('List Submission'), ['action' => 'index']) ?></li>
    </ul>
</nav>
<div class="submission form large-9 medium-8 columns content">
    <?= $this->Form->create($submission, ['type' => 'file']) ?>
    <fieldset>
        <legend><?= __('Add Submission') ?></legend>
        <?php
            echo $this->Form->control('student_name');
            echo $this->Form->control('affiliation');
            echo $this->Form->control('issue_name');
            //echo $this->Form->control('file_name'); // ← コメントアウト
            echo $this->Form->control('upload_file', ['type' => 'file', 'label' => 'ファイル', 'required' => true,]); // ← 追加
        ?>
    </fieldset>
    <?= $this->Form->button(__('Submit')) ?>
    <?= $this->Form->end() ?>
</div>

まずコメントアウトした部分ですが、アップロードするファイル名は、入力させるのではなく、アップロードしたファイルからファイル名を取得してそのまま挿入するので不要。という事でコメントアウトしています。（削除してしまってもOK）

追加した部分はファイル選択のフォームパーツです。bakeコマンドを叩いて生成されるテンプレートのフォームパーツはモデルでの定義によって生成されるのでファイルアップロードは当然ながら無いのでここで手動で追加する必要があります。

百聞は一見にしかずなのでフォームを見てみるとわかりやすいです。

Before

After

と、こんな感じになります。

カスタムバリデーション作成

次はファイルのバリデーションを定義する為に、カスタムバリデーションを作成します。

cakephp/src/Model 配下に Validation ディレクトリを作成し、その中に CustomValidation.php を作成します。

cakephp
├─ src
│   ├─ Model
│   │   ├─ Validation
│   │       └─ CustomValidation.php

ファイルが作成できたら、カスタムバリデーションを定義します。

cakephp/src/Model/Validation/CustomValidation.php

<?php
namespace App\Model\Validation;

use Cake\Validation\Validation;

class CustomValidation extends Validation
{
  /**
   * ファイル容量制限
   * @param $files
   * @return bool
   */
  public static function limitFileSize($files)
  {
    return ($files['size'] < 100000);
  }

  /**
   * 画像ファイル「PNG」「JPG」「GIF」チェック
   * @param $files
   * @return bool
   */
  public static function isImage($files)
  {
    $ret = true;
    $mimes = array("image/png", "image/jpeg", "image/gif");
    $exts = array("png", "jpeg", "jpg", "gif");
    $sep = explode('.', $files['name']);
    $ext = end($sep);
    if (!in_array($files['type'], $mimes) || !in_array($ext, $exts)) {
      $ret = false;
    }
    return $ret;
  }
}

limitFileSize()メソッドとして、ファイルサイズが100KBより小さい場合のみをtrueとし、それ以上をfalseが返るようにしています。

isImage()メソッドは、画像ファイル「png」「jpg」「gif」のみを許可する記述を行っています。

今回はデモなので、これくらいのバリデーションでいこうと思います。

Formクラス作成

cakephp/src 配下に Form ディレクトリを作成し、その中に SubmissionForm.php を作成します。

cakephp
├─ src
│   ├─ Form
│   │   └─ SubmissionForm.php

ファイル作成後、Formクラスを以下のように定義します。

cakephp/src/Form/SubmissionForm.php

<?php
namespace App\Form;

use Cake\Form\Form;
use Cake\Validation\Validator;

class SubmissionForm extends Form
{
  protected function _buildValidator(Validator $validator)
  {
    $validator->provider('customValidate', 'App\Model\Validation\CustomValidation');

    $validator
      ->add('upload_file', 'isImage', [
        'provider' => 'customValidate',
        'rule' => 'isImage',
        'message' => '「PNG」「JPG」「GIF」画像のみアップロード可能です',
      ])
      ->add('upload_file', 'limitFileSize', [
        'provider' => 'customValidate',
        'rule' => 'limitFileSize',
        'message' => '100キロバイト以内にしてください',
      ]);

    return $validator;
  }
}

補足すると、まずカスタムバリデーションをcustomValidateとしてプロパイダへ登録し、それからname属性「upload_file」つまりファイル選択のフォームデータに対してバリデーションを付与しています。

この辺の詳しい説明は

を参照してください。

アップロード先ディレクトリ作成

ファイルをアップロードする場所を作っておきます。cakephp/ 配下に storage ディレクトリを作成します。

cakephp
├─ src
│   ├─ storage

コントローラ実装

最後にコントローラの実装です。add()アクションを以下のように変更します。

cakephp/src/Controller/SubmissionController.php

<?php
namespace App\Controller;

use App\Controller\AppController;
use App\Form\SubmissionForm;
use Cake\Datasource\ConnectionManager;
use Cake\Core\Exception\Exception;

class SubmissionController extends AppController
{
    public function add()
    {
        $submission = $this->Submission->newEntity();
        // Formクラスのインスタンス化
        $fileform = new SubmissionForm();
        if ($this->request->is('post')) {
          $conn = ConnectionManager::get('default');
          $conn->begin();
          try {
            $request_data = $this->request->getData();
            // ファイル名を格納
            $request_data['file_name'] = $this->request->data['upload_file']['name'];

            $submission = $this->Submission->patchEntity($submission, $request_data);
            // FormクラスとModelによるバリデーション
            if ($fileform->validate($this->request->data) && empty($submission->errors())) {
              // データベースへ登録
              if ($this->Submission->save($submission)) {
                // ファイルアップロード
                $ret = move_uploaded_file($this->request->data['upload_file']['tmp_name'], sprintf('/var/www/html/cakephp/storage/%s', $this->request->data['upload_file']['name']));
                if($ret) {
                  $conn->commit();
                  $this->Flash->success(__('課題を受け付けました'));
                  return $this->redirect(['action' => 'index']);
                } else {
                  $this->Flash->error(__('ファイルの保存に失敗しました'));
                  throw new Exception('File Upload Error.');
                }
              }
            } else {
              // ファイルバリデーションエラーをEntityへ追加
              if(!empty($fileform->errors()['upload_file'])) $submission->errors('upload_file', $fileform->errors()['upload_file']);
            }
          } catch (Exception $e) {
            //ロールバック
            $conn->rollback();
          }
         }
        $this->set(compact('submission'));
    }
}

基本的な処理の流れとしては以下になります。

1. POSTデータを変数へ格納
2. アップロードファイルからファイル名を取得しPOSTデータ変数へ格納
3. FormクラスとModel（Tableクラス）による混合バリデーション
4. バリデーションを通った場合は、データベースへ登録し、ファイルをアップロードする
5. バリデーションに通らなかった場合は、Formクラス側のエラーをModel側で受け取る

なんだかんだ書いていますが、肝はFormクラス側のエラーをModel側に受け渡す部分です。こうする事で、フォームヘルパー側の実装もこれまで通りの記述（下手にこねくり回す必要がないという意味）で行う事ができます。