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

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

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

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

1. 補足

はじめに

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

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

php artisan infyom:scaffold product

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

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

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

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

フィールド名	概要	サンプル値
name	フィールド名を指定	title
dbType	DBのカラムタイプを指定 increments, string, integer,text,timestamp	string
htmlType	フィールドの表示タイプを指定 text,textarea,number,date,email, password,file,select,checkbox,radio	text
validations	入力チェックルールを記載	required
searchable	検索対象にするかどうか true or false	true
fillable	Export処理で出力対象にするかどうか true or false	true
primary	主キー true or false	true
inForm	入力フィールドとして表示するかどうか true or false	false
inIndex	一覧に表示するかどうか true or false	true

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