CSVエキスポートの作成（ステップ２ : ビューの作成）

2019/08/06 2019/08/26

連載『CSVダウンロードの作成』シリーズのステップ２です。

今回はビューの作成をします。

ちなみに完成形は以下になります。

CSVダウンロードデモサイト

手順

一覧表示の作成からはじめます。次に検索機能を作成します。

ルーティング（一覧表示）
コントローラ（一覧表示）
ビュー（一覧表示）
ルーティング（検索）
コントローラ（検索）
ビュー（検索）

ルーティング（一覧表示）


Route::get('csv/practice1', 'CsvDownloadController@practice1'); //一覧表示

コントローラ（一覧表示）


public function practice1()
{
    $query = \App\Models\AuthInformation::query();
    $query->Join('profiles','auth_information.id','=','profiles.authinformation_id'); //内部結合
    $query->orderBy('auth_information.id');
    $lists = $query->paginate(10);

    $hash = array(
        'lists' => $lists,
    );

    return view('csv.practice1')->with($hash);
}

解説

AuthInformationテーブルとプロフィールテーブルを内部結合し、その結果をビューに渡します。

クエリービルダーについての使い方については以下をご参照ください。

クエリービルダーまとめ

ビュー（一覧表示）


：
{!! $lists->render() !!}
<br>
<table class="table table-striped">
    <tr>
        <th>name</th>
        <th>email</th>
        <th>password</th>
    </tr>
    @foreach($lists as $list)
    <tr>
        <td>{{$list->name}}</td>
        <td>{{$list->email}}</td>
        <td>{{$list->password}}</td>
    </tr>
    @endforeach
</table>
：

解説

ページャーと抽出したレコードのループ処理の箇所だけコードを抜粋しました。

ルーティング（検索）


Route::get('csv/search', 'CsvDownloadController@search');       //検索

コントローラ（検索）


public function search(Request $rq)
{
    $q = $rq->input('q');
    $query = \App\Models\AuthInformation::query();
    $query->Join('profiles','auth_information.id','=','profiles.authinformation_id'); //内部結合
    $query->where('profiles.name','LIKE',"%$q%");
    $query->orderBy('auth_information.id');
    $lists = $query->paginate(10);

    $hash = array(
        'lists' => $lists,
    );

    return view('csv.practice1')->with($hash);
}

解説

ビューから検索フォームのリクエストをwhere句に入れます。

Laravelでのリクエスト処理については以下をご参照ください。

リクエスト処理（コントローラ）のまとめ

ビュー（検索）


：
   <form action="{{url('/csv/search')}}" method="GET">
       {{ csrf_field() }}
   <div class="input-group">
       <input type="text" name="q" class="form-control" placeholder="名前を入力してください">
       <span class="input-group-btn">
   <button type="submit" class="btn btn-default">検索</button>
</span>
   </div>
   </form>
：