Laravel学習帳

Laravel5.2の学習帳です。開発環境はXAMPP for Windows 5.6.19 / 本番環境はさくらサーバー(スタンダード)

チュートリアル

検索機能の作成

2017/02/15

step07

CRUDの機能を実装したところで、次に必要になるのが検索機能ですよね。

今回は検索機能を実装してみます。

 

やりたいこと

名前もしくはメールアドレスで検索できるようにする

 

方針

Laravel5.xから標準ロードされなくなったHTML Helperは使わないことにしました。

あまり意味を感じないし、最近の動向では各種JSやCSSフレームワークとの連動が必要なのでむしろ邪魔だらからです。

 

予備知識

検索フォームで入力したデータを受け取る処理の知識が必要です。

Laravel 5.1 HTTPリクエスト

検索の処理はEloquentのWhere節を使います。

Laravel 5.1 Eloquent:利用の開始

 

進め方

【1】フォームの作成

【2】コントローラの編集

 

【1】フォームの作成

index.blade に検索フォームを追加します。

グリッドシステムで検索フォームとページャーを並べてみました。

: (省略)
<div class="container-fluid">
<div class="row">

<!--↓↓ 検索フォーム ↓↓-->
<div class="col-sm-4" style="padding:20px 0; padding-left:0px;">
<form class="form-inline" action="{{url('/crud')}}">
  <div class="form-group">
  <input type="text" name="keyword" value="{{$keyword}}" class="form-control" placeholder="名前を入力してください">
  </div>
  <input type="submit" value="検索" class="btn btn-info">
</form>
</div>
<!--↑↑ 検索フォーム ↑↑-->

<div class="col-sm-8" style="text-align:right;">
  <div class="paginate">
  {{ $data->appends(Request::only('keyword'))->links() }}
  </div>
</div>

<!--/.row--></div>
<!--/.container-fluid--></div>
: (省略)

フォームのメソッドはgetを指定。

フォームアクションにはルーティングファイルの Route::resource で指定しているパスを指定します。

これでコントローラの indexメソッド が実行されます。

 

【2】 コントローラの編集

コントローラのindexメソッドに検索機能を追加します。

  public function index(Request $request)
  {
    #キーワード受け取り
    $keyword = $request->input('keyword');

    #クエリ生成
    $query = User::query();

    #もしキーワードがあったら
    if(!empty($keyword))
    {
      $query->where('name','like','%'.$keyword.'%')->orWhere('mail','like','%'.$keyword.'%');
    }

    #ページネーション
    $data = $query->orderBy('created_at','desc')->paginate(10);
    return view('crud.index')->with('data',$data)
    ->with('keyword',$keyword)
    ->with('message','ユーザーリスト');
  }

keywordが送られてきているかどうかを判断し、送られていなければ、通常の処理(全検索)を行います。

keywordがあれば、where句を追加した検索を行っています。

また、keywordの持ち回りのため、送られてきたkeywordを->with('keyword',$keyword)でビューに戻しています。

 

動作確認

1. 検索フォームにキーワードを入れて検索

『島村』と入力してみました。

img01

 

2. 検索結果

問題なく表示しています。

img02

同様にメールアドレスでも検索できます。

以上です。

 

-チュートリアル