LaravelでICOのWebアプリを作る -第4回目 画像アップロード/検索機能/詳細ページ編-

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

前回(第3回目 登録とタグ機能編)に引き続き、今回はLaravelでICOのwebアプリに含まれる画像アップロードと検索機能とICOの詳細ページを作成していきます。

 

像アップロード

上のICO新規登録画面の中のアップロード項目からファイルを選択後、黄色い「登録する」ボタンをクリックします。
すると、アップロードした画像がデータベースに保存され、以下のようにICO一覧ページに表示できる仕組みを作りたいと思います

まずはアップロードする箇所を用意する為にviewを作成します。

icos/create.blade.php

上の29行目からのように

を追加したら、view側で画像を選択できるようにまでなったはずです。

10行目に
とある通り、画像アップロード後は
以下のIcosControllerのstoreアクションにつながります。
(⚠️‘files’ => trueが無いとファイルの送信ができません)

 

app/Http/Controllers/IcosController.php
上記の13行目から記述されている
にアップロードされた画像の名前が取得され、保存される処理が書かれていいます。
ここで保存した画像の名前を表示するのが以下のviewの記述です。

 

icos/index.blade.php

29行目に記述されている

にアップロードされた画像を表示するための記述を書いています。

 

検索機能

 上の赤枠にある検索フォームから、一覧の中の「トークン/企業」or「内容」項目の中の文字にヒットすると、以下のように検索結果が表示される仕組みをLaravelで作成します。

上の画像は「テキスト」と入力し、検索ボタンをクリックした後の表示結果です。
まずviewに検索フォームを作成します。

 

commons/header.blade.php

上の17行目にある

が検索フォームの箇所です。
送信先はaction=”{{url(‘/icos/search’)}}”となっており、ルーティングでは以下のように設定しているので、

検索フォームに入力し、「検索」ボタンを押した後は以下のIcosControllerのsearchアクションが作動します。

 

’title’は一覧画面の中にある「トークン / 企業」項目のカラムを指していて、
‘description’ は「内容」項目のカラムを指しています。

 

つまり、ここで「トークン / 企業」項目あるいは「内容」項目の中のキーワードにヒットする言葉で検索をかけられた場合、表示される仕組みを作っています。

 

詳細ページ

以下の一覧ページの中の「トークン / 企業」項目の内容、あるいは画像をクリックすると
 以下のように各トークンの詳細ページが開ける仕組みをLaravelで作成します。
詳細ページのviewは以下のように作成します。
icos/show.blade.php

詳細ページに飛ぶためのリンクは以下の一覧ページの中の29,30行目に存在します。

icos/index.blade.php

<td><a href=”{{ route(‘icos.show‘, [‘id’ => $ico->id]) }}”><img src={{asset(“img/$ico->image”)}} class=”icon”></a></td>
<td class=”icoName”><a href=”{{ route(‘icos.show‘, [‘id’ => $ico->id]) }}”>{{ $ico->title }}</a></td>

 とあるように、上記の画像か「トークン/企業」項目の内容をクリックすると、以下のIcosController.phpのshowアクション内の処理をするようになっています。

 

app/Http/Controllers/IcosController.php

$idで各項目のidを受け取り、どの項目の詳細ページを表示すればいいのかを認識しています。

これで詳細ページを表示する処理が完了です。

 

参考: