Laravel開発、ユーザー所有本を管理できるようにする【5】ユーザ所有本関連ページを作成する
ユーザー所有の本の一覧表示と書籍登録ページの作成まで完了しました。
前回記事はこちら
あとは、ユーザ所持書籍の検索や手放した際の所有書籍からの削除といった設定を追加していきます。
今回の目的
所有書籍の情報コントロールを追加する。
なぜやるか
登録と一覧表示しか対応していないため、その他の手順についても実装しユーザーが実施する一連の処理を追加するため
やりたいこと
- 検索機能をつけて、対象の本をさがせるようにしたい
- 削除機能をつけて、未所持となった本を削除できるようにしたい
- 編集機能をつけて、所持数を管理したい
- 詳細確認ページを追加し、詳細情報を表示させたい
- 登録機能に保存するデータを追加したい。
やったこと
ユーザー所有書籍について機能実装
- 書籍検索
- 書籍詳細ページ
- リスト表示URLの修正
- id取得を正常に行う
- カラムを追加して書籍情報を登録できるようにする
- 追加カラムの編集
- 登録情報の削除
実施内容
書籍検索の実装
書籍登録ページで作成した検索ページを流用して、所有書籍でも検索できるように編集しました。
# ~/app/Http/Controllers/UserController.php
ユーザー情報でしぼりこんで、そこから本情報を取得し、さらにタイトル名で検索してデータを取得しています。
# ビュー表示
検索内容だけ表示させることができました。
書籍詳細ページの作成
登録書籍に関しても詳細ページを作ることで、その内容を表示させるようにしました。
とはいえ、登録書籍としての詳細データは特にまだ作成していません。
今の所は書籍情報ページと同じ内容として一度表示させることにしました。
後々に所有書籍として必要な情報を表示させることを検討することとします、まずはページを用意するに止めます。
# ビュー表示
登録書籍のビューページを利用して所有書籍詳細ページを作成しました。
本のリスト表示をなおす
どのリストも参照先が固定されている
indexページや検索結果で表示される本のリストはコンポーネント化されています。
この一覧表示された本のリンクは本情報の詳細ページ"book/show"になっています。
ユーザ所有本のリストでクリックしてもユーザー情報でなく、本の情報ページへ遷移してしまう状況です。
これを解消する必要があります。
ルート情報を利用する
過去の記事でルート情報を取り出す標記がつかえそうだったので、これを検討してみました。
また、改めて調べてみました。こちらを参考にさせて頂きました、ありがとうございます。comtopia.jp
これらを元にルート情報を取得して、リスト上のリンク先を分岐させてみました。
# ~/resource/views/conponents/books_list.blade.php
{{Request::path()}}という設定をいれることで、コンポーネントを表示させているコントロール毎にリンク先を変更させることにしました。
ルートパス設定に問題発生
しかしこれでは全てのページに対応できませんでした。
検索結果ページで表示されるリストのURLが"~/user/find/1"となっていました。
※本情報一覧は"~/book/1"、所持本一覧は"~/user/1"といったパスとなっている。
user配下のfindページで検索していたので、{{Request::path()}}から取得されるパスがuserでなくuser/findという値となっており、想定しているパスでなくなっていました。
このため、{{Request::path()}}を使う方法は使えませんでした。
コンポーネントスロットを扱う
ここで、前々からコンポーネントを利用しているうちに使い方がようやく分かりそうなスロットをつかってみることにしました。
# ~/resource/views/user/find.blade.php
@includeにしていたが、@componentに切替をして引数に必要な値を設定。
slotでuserページのURLを設定する為に"user"という値を入れてこれをパスに反映させｒます。
# ~/resource/views/conponents/books_list.blade.php
コンポーネント側で$page_pathとしてスロットの値を受け取り、URLの一部として値を受け取る処理としました。
この検索ページをslot利用としたので、同じコンポーネントを利用している別のページも同様に修正することで、パス設定することにしました。
これで正しいURL指定となりました。
データベースからIDが正常に取得できない
ユーザー所有本IDが表示されていない
リスト表示のURLは修正されましたが、ここでidが正常に取得できていないことに気づきました。
これからユーザー所有本情報についての編集・削除といった処理を実施していくことになるのですが、ユーザー所有本はPropertyというテーブルで管理しており、Propertyのidを取得してそこからレコードを編集することになります。
ところが、リストに表示されている本の情報は、本情報のidで表示されていました。
問題点を整理する
問題1、ユーザー所有情報のidではなく、本情報のidが表示されている
先程もすこし出てきましたが、本情報のidが表示されています。
ユーザー所有情報に対してデータ変更するので、ここはユーザー所有情報のidを利用したいところです。
問題2、レコードのjoinを実施すると後から結合したidに上書きされている
データ結合について確認していたところ、こちらを参考にさせて頂きました、ありがとうございます。
ユーザー所持情報に後から本情報を結合してデータを扱っていました。
ところが、同じカラム情報については、後から結合した内容が上書されてしまう。
例えば現在作成中のデータで考えると…
- ユーザー所持本[id:93,user_id:1,bookdata_id:20]
- 本情報[id:20,title:"本のタイトル",〜]
というデータがあったとして、20という番号をキーに結合すると
- id:20,user_id1,bookdata_id:20,title:"本のタイトル",〜
といった具合に、重複している"id"の値があとから結合したデータになっていました。
書籍一覧表示のid取得をなおす
今後のページ作成にも関係してくるので、まずは一覧表示されたページのidがきっちりPropertyテーブルのidで表示されるように修正します。
# ~/app/User.php
先程の参考サイトを元に、リスト表示させるデータの取得を見直しました。
join実施後にselectで画面表示に必要なカラムを個別に選択しています、ここでpropertyテーブルのidが表示されるように、明示的に指定しました。
# ビュー表示
見た目に変化はありませんが、Propertyテーブルのidを参照できるように変更しました。
所有情報詳細を登録できるようにする
propertyテーブルを利用した表示に変更する
詳細ページについても、初めは本情報そのものを表示していましたが、Bookdataを取得しており、使用しているidが異なるのも問題なので、実際に所有者情報カラムを追加して、表示させる変更ごと変更することにしました。
まずは、マイグレーションファイルを変更し、カラムを追加。
# ~/database/migrations/xxxx.php
書籍所有情報として、数・所有日・フリーメモを追加しています。
nullableは仕組みが完成してから解除します。まずはエラーしないように暫定設置です。
マイグレーションして、まずはDBに直接データを追加。
# ビュー表示
追加したカラム情報を表示して、ユーザーが所持している本の管理情報をだせるようにしました。
所有書籍追加時に情報を記録できるようにする
登録フォームに先程追加したカラムに対応するデータを入力できるようにします。
フォーム上にタイトル登録枠はあるので、先程追加した3カラムを追加設定しました。
登録フォームはできたので、本情報登録時と同様に、登録完了時に登録した内容が表示できるようにしようと考えました。
ユーザーが所有している本情報の詳細は、先程詳細ページで作成しました、これが使えそうです。
コンポーネントとして作成していなかったので、コンポーネント化して詳細ページと登録完了時のデータ表示、どちらにも使えるように設定します。
# ~/resource/views/conponents/book_property_detali.blade.php
コンポーネント化しました、新規ファイルを作って中身をコピーするだけです。
これで、作成済みの詳細ページについてはコンポーネントを指定する形にします。
# ~/resource/views/user/show.blade.php
@include指定でコンポーネント指定としました。
このコンポーネントを利用してcreateフォームにも組み込み、登録結果表示に使用します。
# ~/resource/views/user/create.blade.php
これでどちらのページでも、ユーザー所有書籍に関しての情報が表示されるようになった。
# ビュー表示
フォームのフォーマットはともかく…所持数や所持日、フリーメモ欄を用意することで、所有情報に関しての登録ができるようになりました。
# ビュー表示
登録完了後に画面下部にコンポーネントを利用して登録した情報が表示されるようになりました。
所有書籍情報を編集する
ここまで、登録・検索・一覧表示・詳細表示が完了したので、続けて編集機能を実装します。
本情報の編集を作成した時の手順と、先程の登録フォームを使えば、できそうです。
ここは既存のコードを駆使して作成できました。
タイトル名は本情報で編集すべき項目なので、ここでは所有関連情報のみ変更ができます。
所有書籍情報を削除する
最後に削除機能を実装します
ユーザー所持書籍詳細画面に削除ボタンはすでに作成されています。
アクションのみ未設定だったので、これを追加して実装完了。
以上で、ユーザー所有本に関してのデータ登録から編集・削除・検索・一覧表示と作成が完了しました。
