フォーム自動生成モジュール「InfyOm Laravel Generator」を使ってみた

前回に引き続きの投稿です。
今回は、InfyOm Laravel Generator で、フォームを作成してみます。

前回の記事を見たい方は、こちらをご覧ください。

フォーム自動生成モジュール「InfyOm Laravel Generator」を導入した

はじめに

フォームを作成する方法としては、対話形式とファイル読込形式があります。

対話形式は、以下のコマンドを実行すると、１フィールドずつ設定ができます。
＊product の部分がモデル名になります。

php artisan infyom:scaffold product

初めはこれでやってもよいのですが、
フォームの再作成をする度に入力するのが面倒なので、今回はファイル読込形式の流れを記載します。

ファイル読込形式では、jsonファイルを利用しますので、まずは、jsonファイルを作成します。

フォーム基本情報用jsonファイル作成

＊id, created_at, updated_at は、固定値で指定する感じが良いかと思います。
設定できる項目を、以下にまとめました。

dbTypeがデータベースの型になります。
そして、htmlTypeが入力フィールドタイプになります。

標準で、テキストフィールド（指定なし、数値のみ、日付、メール）、テキストエリア、
パスワードフィールド、ファイル選択、セレクトボックス、チェックボックス、ラジオボタンが設定できます。

サンプルで作成したjsonファイルがこちらです。
商品名を登録するフォームを作ってみます。

vi database/product.json
[
{
"name": "id",
"dbType": "increments",
"htmlType": "",
"validations": "",
"searchable": false,
"fillable": false,
"primary": true,
"inForm": false,
"inIndex": false
},
{
"name": "name",
"dbType": "string",
"htmlType": "text",
"validations": "required|max:255",
"searchable": true
},
{
"name": "description",
"dbType": "text",
"htmlType": "textarea",
"validations": "max:30000",
"searchable": true
},
{
"name": "display_flg",
"dbType": "integer",
"htmlType": "radio,表示する:1,表示しない:0",
"validations": "required",
"searchable": true
},
{
"name": "created_at",
"dbType": "timestamp",
"htmlType": "",
"validations": "",
"searchable": false,
"fillable": false,
"primary": false,
"inForm": false,
"inIndex": false
},
{
"name": "updated_at",
"dbType": "timestamp",
"htmlType": "",
"validations": "",
"searchable": false,
"fillable": false,
"primary": false,
"inForm": false,
"inIndex": false
}
]

フォーム作成処理

以下のコマンドを実行し、作成処理を開始します。

テーブルを作成するか聞かれるので、1回目は、「yes」を入力してください。

php artisan infyom:api_scaffold product --fieldsFile=./database/product.json

以下が私の環境で実行した結果です。

Migration created:
2017_12_21_233021_create_products_table.php
Model created:
product.php
Repository created:
productRepository.php
Create Request created:
CreateproductAPIRequest.php
Update Request created:
UpdateproductAPIRequest.php
API Controller created:
productAPIController.php
products api routes added.
RepositoryTest created:
productRepositoryTest.php
TestTrait created:
MakeproductTrait.php
ApiTest created:
productApiTest.php
Create Request created:
CreateproductRequest.php
Update Request created:
UpdateproductRequest.php
DataTable created:
productDataTable.php
Controller created:
productController.php
Generating Views...
datatables_actions.blade.php created
table.blade.php created
index.blade.php created
field.blade.php created
create.blade.php created
edit.blade.php created
show_fields.blade.php created
show.blade.php created
Views created:
products routes added.
products menu added.
Do you want to migrate database? [y|N] (yes/no) [no]:
> yes
Migrating: 2017_12_21_233021_create_products_table
Migrated:  2017_12_21_233021_create_products_table
Generating autoload files

 表示確認

検索機能付き一覧表示、新規登録、編集、削除機能が搭載されたフォームが出来上がっていれば、成功です。

http://127.0.0.1:8000/product

フォームが出来上がるまでの動画も作っていたので、載せておきます。

この動画で使っているソースは、こちらです。

https://github.com/nonoichi123/MyFormUsingInfyomLaravelGenerator

補足

フォーム削除処理

作成したフォームを削除する際は以下のコマンドを実行します。

＊テーブルが正常に削除されないことがあるので、削除されていなかったら手動で削除してください。

php artisan infyom:rollback product api_scaffold

その他のフィールドタイプの設定

サンプルjsonファイルになかったフィールドタイプを以下に記載しました。

日付フィールドです。

 {
"name": "start_date",
"dbType": "string",
"htmlType": "date",
"validations": "",
"searchable": true
},

セレクトボックスです。

 {
"name": "level",
"dbType": "integer",
"htmlType": "select,0,1,2,3,4",
"validations": "",
"searchable": true
},

外部キーを指定することも可能です。
ただ、選択肢はJavaScriptを使って動的に設定しないといけないです。

 {
"name": "category",
"dbType": "integer:unsigned:foreign,categories,id",
"htmlType": "select,0,1,2,3",
"validations": "required|exists:categories,id",
"searchable": true
},

チェックボックスです。

 　{
　 　"name": "popular",
　 　"dbType": "integer",
　 　"htmlType": "checkbox,1,0",
　 　"validations": "required",
　 　"inForm": true,
　 　"inIndex": false,
　 　"searchable": false
　},

隠しフィールドです。

 　{
　 　"name": "hid",
　 　"dbType": "integer:default,1",
　 　"htmlType": "text",
　 　"validations": "",
　 　"fillable": false,
　 　"inForm": false,
　 　"inIndex": false,
　 　"searchable": false
　},

数値フィールドです。

　{
　 　"name": "number",
　 　"dbType": "integer",
　 　"htmlType": "number",
　 　"validations": "",
　 　"fillable": true,
　 　"inForm": true,
　 　"inIndex": false,
　 　"searchable": false
　},

パスワードフィールドです。

　{
　 　"name": "password",
　 　"dbType": "string",
　 　"htmlType": "password",
　 　"validations": "required",
　 　"fillable": true,
　 　"inForm": true,
　 　"inIndex": false,
　 　"searchable": false
　},

ファイル添付のフィールドです。

 {
"name": "image",
"dbType": "string",
"htmlType": "file",
"validations": "",
"searchable": true
},

自動生成されるファイルのテンプレート

Infyom を利用することで、フォームが自動で作成されますが、
以下のディレクトリにあるファイルをコピーして、
コントローラーファイルやテンプレートファイルが作成される流れになっています。
そのため、デザインを変更したかったり、IDやクラス名を設定したい場合などは、
こちらのファイルを変更して、フォーム作成コマンドを再実行すると、変更内容が反映されます。

./resources/infyom/infyom-generator-templates