こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら
Laravelのおすすめ教材
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら ・【未経験向け】独学で実務レベルまでLaravelをマスターするのにおすすめの教材 ・【ジュニアエンジニア向け】Laravelを極めるのにおすすめ[…]
それでは、見ていきましょう！
今回、Laravelで作る検索機能
Laravelで検索機能を実装します。
イメージは下記の動画の感じ。
タイトル、タグ、本文に対してあいまい検索を行なっています。
Laravelで検索機能を実装する
① inputタグを作る
まずはformのinputタグを作って見た目の部分を整えます。
今回はbootstrapを使っているので、classが見にくいかもしれません。
<form class="form-inline my-2 my-lg-0 ml-2">
<div class="form-group">
<input type="search" class="form-control mr-sm-2" name="search" value="{{request('search')}}" placeholder="キーワードを入力" aria-label="検索...">
</div>
<input type="submit" value="検索" class="btn btn-info">
</form>- formのactionを入れない事
- inputのvalueをvalue=”{{request(‘search’)}}”にする事(入力すると値がURLに反映されます)
辺りがポイントです！
② controllerに検索処理を書く
$articles = Post::orderBy('created_at', 'asc')->where(function ($query) {
// 検索機能
if ($search = request('search')) {
$query->where('title', 'LIKE', "%{$search}%")->orWhere('tag1','LIKE',"%{$search}%")->orWhere('body','LIKE',"%{$search}%")
;
}
// 8投稿毎にページ移動
})->paginate(8);検索機能のポイントは以下です！
- whereでLIKEを使う事であいまい検索にしている
- orWhereを使う事で、タイトル、タグ、本文今違って検索している
③ ついでにページネーション入れる
ページネーションはこれですね。
検索結果や一覧ページをページに分けて表示するやつです。
Laravelに基本的な機能が備わっているので、秒で作れます！！
まずcontrollerにpaginateを記述します。
今回は8投稿でページ遷移します。
$articles = Post::orderBy('created_at', 'asc')->where(function ($query) {
// 検索機能
if ($search = request('search')) {
$query->where('title', 'LIKE', "%{$search}%")->orWhere('tag1','LIKE',"%{$search}%")->orWhere('body','LIKE',"%{$search}%")
;
}
// 8投稿毎にページ移動
})->paginate(8);
次にページネーションを設置したい所にこちらを記述します。
<div class="d-flex justify-content-center ">
{{ $articles->links() }}
</div>少し見た目を変えたいので、ファイルを変更します。
コマンドラインで下記を打ちます。
php artisan vendor:publish --tag=laravel-pagination4つほどファイルが生成されます。
デフォルトではbootstrap-4.blade.phpが使われるようになっていて、そちらを利用すると完成です。
もしキャリアアップを考えているなら
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら 今回は大学中退してニートだった自分が完全未経験からメガベンチャーに入社した方法について解説していきます。 ・完全未経験から将来的なメガベンチャー転[…]
こんにちは、フロントエンドエンジニアのてりーです。 「転職ドラフトはハイスペックなエンジニア向けだけ？」と思っていませんか？ 実は、技術力に自信がない、あるいは業界経験が浅いエンジニアこそ、転職ドラフトを使うべきなんです。 そ[…]