【Laravel5】BladeでドロップダウンをつかったFormを作る

【Laravel5】BladeでドロップダウンをつかったFormを作る - 記事登録画面にドロップダウンを追加する

fabulous fluid floral flairs

【Laravel5】BladeでドロップダウンをつかったFormを作る

こちらのサイトのまとめです。

Selecting Tags From the UI – Laravel5 Fundamentals

GitHubにサンプルプロジェクトがあります。

ryo-ogata/learning-laravel-5

はじめに

前回の記事で、記事モデルに対して、タグモデルを追加し、ManyToManyの関係を持たせることができました。今回は、Laravelの標準テンプレートであるBladeと、illuminate/htmlをつかいHTMLのドロップダウンを追加し、記事に付けるタグを選択するといった実装を進めていきたいと思います。

タグの編集ができるようにする

  1. タグのためのセレクトボックスを追加する
    • resource/views/article/form.blade.php

  2. Tagのリストを画面に返すようにする。
    • app/Http/Controllers/ArticleController.php

  3. tagテーブルにデータを追加する。

    php artisan tinkerのコマンドからデータを追加します。

    例外が発生してしまいました。これはEloquentをつかったTagモデルが'name'フィールドを更新することを許可していないためです。モデルを修正します。

    再度、実行します

  4. 画面を確認する。

    http://localhost:8000/articles/create

    複数選択可能なセレクトボックスが表示されています。

記事とともにタグを登録する

  1. 登録の際のリクエストパラメーターを取得する

  2. 画面から登録する

    タグを複数選択して、記事を登録してみます。

    http://localhost:8000/articles/create

    【Laravel5】BladeでドロップダウンをつかったFormを作る - 記事登録画面でドロップダウンを選択して登録する
    記事登録画面でドロップダウンを選択して登録する
  3. データを確認する

    さきほど登録した記事のIDを元に確認してみます。

記事詳細画面にタグを表示する

  1. show.blade.phpのBladeテンプレートを修正する
    • resources/views/articles/show.blade.php

  2. 確認する
    【Laravel5】BladeでドロップダウンをつかったFormを作る - 記事詳細画面でタグを表示する
    記事詳細画面でタグを表示する

記事編集画面にタグを表示できるようにする

  1. Tagのリストを画面に返すようにする

    • app/Http/Controllers/ArticleController.php

  2. すでに選択済みであるタグを選択状態で表示する

    編集画面なので、すでに選択済みのタグがあります。画面表示時に、ドロップダウンの項目がすでに選択されている状態にします。

    • app/Article.php

  3. タグのためのドロップダウンを追加する
    • resource/views/article/form.blade.php

      tagsではなくtag_listに変更する。

  4. 登録のときのパラメーター名を変更する。
    • app/Http/Controllers/ArticleController.php

  5. 確認する

    http://localhost:8000/articles/5/edit

    【Laravel5】BladeでドロップダウンをつかったFormを作る - 記事編集画面からドロップダウンを選択する
    記事編集画面からドロップダウンを選択する

まとめ

<

p>記事にタグを追加することができました。編集画面でもすでに選択中のタグを表示することができました。

しかし、このままの状態だと更新がまだできない状態です。次回、Controllerの更新メソッドについて紹介したいと思います。

Comments are closed, but trackbacks and pingbacks are open.