Laravel開発、ISBNレコードを複数登録する【1】ビューを作成する
ISBNコードを利用して簡単に書籍情報を登録できるようにしていました。
しかし、1件のみ毎回登録する…といったパターンしか行えない状態なので、まとめて追加できるようにしてみました。
最終目的
ISBNコードを10件まで1フォームから入力して登録できるようにする
今回の目的
複数件コード登録のビュー表示を作成する
なぜやるか
- 複数ISBNコード対応専用フォームから入力することで、まとめて処理できるアクションに引き渡して処理するため
やりたいこと
- 入力値を受け付ける枠を増やして表示させたい
- 入力結果を一覧表示させたい
やったこと
- 新たな入力フォームを作成する
- 新たなフォームに対応したルーティング・メニュー設定を追加する
- 処理結果一覧出力をする
実施内容
入力フォーム作成する
はじめにフォームを改変していた
今回、複数データをまとめて登録するにあたり、今までに作成した1件のコードから登録するフォームを変更して複数化する方向で検討していたのですが、単体フォームは使える状態なので、残す方向で見直しました。
新たな入力フォームを作成する
複数コードが登録できるフォームを新たに作成しました。
# ~/resources/views/book/isbn_some.blade.php
@section('content')
<div class="index-content">
<div class="books-list">
<div class="books-list__title bookpage-color">
ISBNコード登録
</div>
<div class="books-list__msg">
<p class="auth-contents__message--message">{{ $msg }}</p>
@foreach ($errors->all() as $error)
<p class="auth-contents__message--error">{{ $error }}</p>
@endforeach
</div>
<div class="book-new">
<form action="/book/isbn_some" method="post">
{{ csrf_field() }}
<div class="form-contents">
<div class="form-input form-one-size">
<div class="form-label">ISBNコード</div>
<!-- @for ($i = 0; $i < 10; $i++)
<div><input class="form-input__input" type="number" name="isbn{{$i}}"></div>
@endfor -->
<div>
</div>
<div>
</div>
<div>
</div>
</div>
</div>
<div class="form-foot">
</div>
</form>
</div>
</div>
</div>
@endsection
基本的にはコード1件を登録する時と同じです。
複数登録用のアクション指定と、inputフォームを複数にしています。
最終的にはコメントアウトしているforによって複数フォームを表示させます。
登録動作確認の為に個別にinputフォーム作成とvalueに値を設定しておいて、何度もテストを行っています。
コード登録複数件対応に伴って、ルーティング・メニュー追加等も併せて実施。
テスト用に入力欄を3件用意していますが、最終的には先程のforで10件にする予定です。
登録結果表示方法を検討する
既存の結果表示を確認する
登録が完了したら全件に対しての結果を出力して、ユーザーに状況を通知します。
まず、1件のみで登録した時の結果表示を確認します。
詳細表示画面のコンポーネントを利用して情報を表示させていました。
しかし、これをこのまま使うと10件登録時にはかなり縦長となってしまいます。
新たな結果表示画面を用意する
入力フォームを短くして右側に出すなど検討してみましたが、入力欄を維持したまま結果を表示させる必要もないかと思い、結果のみを出力した画面を用意することにしました。
これが最終的に作成した登録結果画面です。
- 入力欄の番号を左に表示
- フォーム登録したISBN番号と処理結果を上段へ表示
- 画像イメージとタイトルを下段に表示
という形で表示させてみました。
# ~/resources/views/book/isbn_result.blade.php
@section('content')
<div class="index-content">
<div class="books-list">
<div class="books-list__title bookpage-color">
ISBNコード登録結果
</div>
<div class="isbn-result">
@foreach ($answers as $answer)
<div class="isbn-result__box">
<div class="isbn-result__box--number">{{$answer['number']}}</div>
<div class="isbn-result__box--detail">
<div class="isbn-result__box--head">
<span class="isbn-result__box--isbn">{{$answer['isbn']}}</span>
<span class="isbn-result__box--msg">{{$answer['msg']}}</span>
</div>
@if (isset($answer['result']))
<div class="isbn-result__box--bottom">
<div class="isbn-result__box--image">
@if (isset($answer['result']['cover']) == null)
<img src="../image/no-entry.jpg">
@else
<img src="{{$answer['result']['cover']}}">
@endif
</div>
<div class="isbn-result__box--title">{{$answer['result']['title']}}</div>
</div>
@endif
</div>
</div>
@endforeach
</div>
</div>
@endsection
こちらが最終的に作成した結果表示ビューです。
コントローラー処理についてはまだ触れていないので前後してしまいますが、処理データ毎に値を表示させています。
foreachを使用することで、件数に関係なく全部処理が行えるようになっています。
以上で、複数件登録時の見た目ビューは作成できました。
次に実際に入力が行われた際の処理を記載していきます。
