LaravelでICOのWebアプリを作る -第3回目 登録とタグ機能編-

with コメントはまだありません

前回(第2回目 -登録(テーブル/モデル作成)編-)に引き続き、
今回はICOのwebアプリに含まれる
登録とタグ機能をコントローラを使用しながら作成していきます。

ルーティングとモデルは前回作成し終えたので、
次にコントローラを作っていきます。

 

コントローラ

のコマンドを実行すると、
 app/Http/controllers 直下にIcosController.phpが生成されます。

まずはこのファイル内で
ICO登録画面のフォームを表示する処理を記述します。
POSTメソッドで「作成」の操作をする以下のcreateメソッド内に書きます。
Icoモデルにフォームの項目があるので、
でインスタンスを作成し、

で作成した$icoのインスタンスをicos/create.blade.phpに渡し、
フォームを表示するという処理です。

 

ビュー(ICO登録フォーム画面)

それでは、ICO登録フォーム画面の表示先である
icos/create.blade.phpで見た目を作成していきます。

icos/create.blade.php内に以下のようにフォームを記述します。

ここでicos/create.blade.phpがviewで表示されているか
/icos/createにアクセスして動作確認を行なってみます。
しっかり表示されていました。
ただ、少し見た目がわかりにくいので
Bootstrapとstyle.cssを使って装飾を加えたいと思います。
style.cssは以下のようにpublicフォルダ内にstyle.cssを含むcssフォルダを作成します。
作成できたら、
BootstrapはCDNで、
style.cssは以下のようなディレクトリの書き方で
適用したいページのhead内に記述し、読み込ませます。
Bootstrapを効かせる為に、
クラス名を含むdivなどを以下のようにcreate.blade.phpに追加します。
これで表示結果を見てみます。

Bootstrapとstyle.cssがしっかり読み込まれて、
さっきよりも見やすくなりました。

 

では、いよいよ「登録」ボタンを押したら
ここのフォームに入力した内容をデータベースに保存し、表示できるような機能を
コントローラで実装していきます。

 

しかし、その前に
上のICO登録画面内に存在する「タグ機能」のためのテーブルとモデルも作成します。

 
 

タグ機能

まずはタグの値を挿入するtagsテーブルを作成したいと思います。

 

tagsテーブル
tags id
name

 

のコマンドを実行したら、
2017_10_08_172027_create_tags_table.phpのマイグレーションファイルが生成されるので
中身を編集して、カラムは以下のように用意します。

 

2017_10_08_172027_create_tags_table.php
上記のように編集ができたら
でマイグレーション実行ができ、テーブルの完成です。

その次に、

のコマンドで
ICO登録内容とタグを関連づけるための中間テーブル(ico_tagテーブル)を用意します。
つまり、icosテーブルとtagsテーブルの関係は多対多になります。

 

生成されたマイグレーションファイルである2017_10_08_173101_create_ico_tag_table内には
以下のように記述します。
tagsテーブル内のidを参照したtag_idと、
icosテーブル内のidを参照したico_idをそれぞれ外部キーとして設定しております。

あとは

でマイグレーションを実行するだけです。

これでタグ機能のためのテーブルが完成しました。
続いて、tagsテーブルとicosテーブルの多対多の関連性を作る為に、モデル内で作成していきます。

 

モデル

まずはIcoモデル(Ico.php)の中に
tagメソッドを追記し、
その中にbelongsToMany(‘App\Tag’)を追記して、
多対多の関係を作成します。
app/Ico.php

その次に、

でTagモデルを作成します。

Tagモデル(Tag.php)の中にも
icosメソッドを追記し、
その中にbelongsToMany(‘App\Ico’)を追記して、
多対多の関係を作成します。
app/Tag.php

 

ルーティング

タグ機能のためのテーブル、モデル、ルーティングも設定できたので

コントローラで登録画面で入力したデータの保存・表示・タグ機能を実行します。

 

コントローラ

app/Http/Controllers/IcosController.php

 

ビュー(ICO登録内容の一覧表示画面)

ICO登録画面で保存した内容を表示するicos/index.blade.phpは以下のように記述します。

これで動作確認をしてみます。

※タグはスペースでキーワードの区切りを認識しています

上のようにICO登録画面であるcreate.blade.php内のフォームに入力したら、
「登録」ボタンを押してみます。

すると、コントローラのstoreで記述したように、
index.blade.phpにつながり、
入力した内容が表示されていたので、
データ表示は成功しているみたいです。

タグもリンク文字列としてしっかり表示されています。
あとはタグを押すと、そのタグに関連した内容のデータのみが
表示されるようになるかを確認しなければなりません。

上の中の「赤」タグを押してみます。

「赤」というタグを登録しているデータのみ表示することができました。
タグ機能も成功しているようです。

あとは登録内容の中に画像もあるので、
次回はどのように画像を保存し、表示させるかについて触れたいと思います。
 
 
参考:PHPフレームワーク(Laravel)を使った効率的なWebアプリケーション開発