初心者向け。Laravelで検索機能を実装する方法
1606 回閲覧されました
みなさんこんにちは、jonioです。
今回はLaravelで検索機能を実装する方法を解説します。
目次
バージョン・開発環境・パソコン
Laravelのバージョンは8で開発環境はMAMPで使っているパソコンはMacです。
Git
Gitのコードはここから見る事ができますので実装ができなくなったらクローンして使って下さい。
scssのコード
cssではなくscssを使っているのですがコードを記載します。
今回はscssの解説ではないので最低限必要と思う程度にとどめています。
scssの導入方法が分からない方は↓の記事を読んで下さい。
ページ構成
↓が検索する内容の一覧が表示されているページです。
↓をクリックすると本の情報を一覧に追加する事ができます。
↓が本の情報を追加するページです。
↓をクリックすると本の情報が表示されます。
本の情報を表示するページは↓みたいに超シンプルにしています。
それでは実装の解説をしますがまずは本の情報を作成するページで本の情報の追加ができる様にします。
ルーティング（本の情報を入力）
web.phpを↓にします。
このままだとコントローラーのエラーが出るので「Laravelのプロジェクト > app > Providers > RouteServiceProvider.php」の28行目辺りのコメントアウトを外します。
次はコントローラーです。
コントローラー とモデル（本の情報を入力）
私は「PostController」を作成しましたがコントローラーを作成します。
私と同じ名前のコントローラー名にするなら「php artisan make:controller PostController」のコマンドを叩いて下さい。
またデータベースに情報を保存しないといけないのでモデルを作成します。
私はPostモデルにしています。
「php artisan make:model Post -m」でモデルを作成してauthorカラム・titleカラム・bodyカラムを作成するために「-m」を付けてカラムを追加する為のマイグレーションファイルも一緒に作成します。
「Laravelのプロジェクト > database > migrations > 本日の日付_create_posts_table.php」を編集します。
それができたら「php artisan migrate」をすればデータベースに authorカラム・titleカラム・bodyカラムが追加されます。
それではPostControllerのコードを↓にします。
13行目〜16行目が本の情報を追加するページを表示する為の記述で18行目〜26行目が本の情報を追加するページで入力した情報を保存するための記述です。
21行目が本のタイトルの追加・22行目が著者名の追加・23行目が本の内容の追加をしています。
次は本の情報を入力するページ（ビュー）です。
ビュー（本の情報を入力）
「Laravelのプロジェクト > resources > views」の下にpostフォルダを作ってその下にcreate.blade.phpを作成します。
そして↓の記述をします。
13行目が本のタイトルの入力で14行目が著者の入力で15行目が本の内容の入力です。
それでは本の情報を表示するためにルーティングとコントローラーの記述を追加します。
またビューも作成します。
ルーティング（本の情報を表示）
web.phpの記述を↓にします。
21行目を追加しています。
postフォルダの中のindex.blade.phpを表示するので「Laravelのプロジェクト > resources > views > post」の下にindex.blade.phpを作成します。
次はコントローラーです。
コントローラー（本の情報を表示）
Postコントローラーの記述を↓にします。
13行目〜27行目を追加しています。
15行目の「$request->input(‘keyword’);」でビューのページ（後で記述するindex.blade.php）のname属性がkeyword（name=”keyword”の事）の値（検索フォームの値）を取得します。
19行目〜22行目が検索の部分で19行目の「if(!empty($keyword))」は検索フォームに文字が入力されているならという意味です。
20行目と21行目で検索をしていて20行目・21行目に「%{ }%」がありますが%%をワイルドカードと言って検索フォームに入っている文字を含む情報を全て取得するという意味があります。
具体的な例で説明した方がいいと思うので説明しますが今回のデモだと表示が↓です。
例えば「本」で検索すれば「本その1」と「本その2」が表示されて「あべ」で検索すれば「阿部鬼」が表示されます。
部分的な文字で検索をしていますが「本その1」など書籍名や著者名全文で検索してもヒットします。
話を戻して20行目が本のタイトルに関する検索で21行目が著者に関する検索です。
次は本の一覧を表示するページです。
ビュー（本の情報を表示）
index.blade.phpのコードを↓にします。
検索フォームは11行目〜14行目です。
さっき出てきたpostコントローラーの15行目の「keyword」に対応しているのがindex.blade.phpの12行目のkeywordです。
20行目・25行目・30行目はif文を使った時に「@if→@elseif→@endif」と書けますがそれのforeach版で「@forelse→@empty→@endforelse」と書きます。
22行目の「[‘post‘ => $post]」ですが「Implicit Binding」という機能を使っています。
知らない方は↓のImplicit Bindingの項目を見て下さい。
これで完成ですが本の中身を表示するページの記述の解説をしていないのでそれのコードだけを記載します。
ここまでの内容が理解できた人はコードを見れば理解できると思います。
↓がルーティングです。
↓がコントローラーです。
↓がビューですがpostフォルダの下にshow.blade.phpを作成して下さい。