目標
Laravelでユーザー検索機能を持ったサイトを作成する。
前回の記事
Laravelでログイン機能付きサイト作成 with XAMPP(3/4) ユーザー情報変更機能編
検索機能作成
検索内容はテーブルに登録されているユーザー情報の部分一致。
**検索画面 → 検索結果画面**の構成で作成していく。
検索画面
コントローラーを下記のコマンドで作成する。
$ php artisan make:controller User/SearchController
今回の検索機能では、検索ワードから部分一致の値をすべて検索してから結果を返すのではなく、あらかじめ検索するカテゴリー、カラムを指定する。
そのため、コントローラーでViewに渡すカテゴリーを記入する。
<?php
namespace App\Http\Controllers\User;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class SearchController extends Controller
{
public function search()
{
$category_name = ['ID','NAME','COMMENT'];
return view('user/search',['NAME' => $category_name]);
}
}
表示するページでは、コントローラーから渡された検索するカテゴリーの選択機能と、そのカテゴリーで検索したい内容の検索ワードを作成する。
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
ユーザー検索
</div>
<div class="card-body">
<p>検索したいユーザーの情報を入力してください。</p>
<div class="search">
<form method="post" action="result">
<div class="category">
<p>検索項目: </p>
<select name="search_category">
<option value = "" selected>選択してください</option>
@for($i = 0; $i < 3; $i++)
<option value = "{{ $NAME[$i] }}">{{ $NAME[$i] }}</option>
@endfor
</select>
</div>
<div class="word">
<p>検索ワード: </p>
<input type="text" name="search_word">
</div>
<input type="submit" value="検索する">
@csrf
</form>
</div>
<div>
<input type="button" value="戻る" onclick="history.back()">
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
検索するカテゴリーは<select>で選択できるようにし、各項目をそれぞれ記入するのではなく、@foreachを利用して記述する。
そして、ルーティング処理を追記。
Route::get('/home/search','User\SearchController@search');
遷移元のhome.blade.phpに今回作成したページへのリンクを忘れずに追加。
<a href="home/user">ユーザー検索</a>
以上のコードで以下のページが完成する。
検索結果画面
コントローラーを下記のコマンドで作成。
$ php artisan make:controller User/ResultController
このコントローラーには、検索画面で選択されたカテゴリー,検索画面で入力されたワード,前の2つを元にテーブルに検索をかけた結果を入力する。
<?php
namespace App\Http\Controllers\User;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\User;
class ResultController extends Controller
{
public function result(Request $request)
{
$category = $request -> input('search_category');
$word = $request -> input('search_word');
$search_data = array(
'category' => $category,
'word' => $word
);
$user_data = User::where($category, 'like', "%$word%") -> get();
return view('user/result',['Search' => $search_data, 'User' => $user_data]);
}
}
どんな値で検索したかをわかりやすくするために、検索結果だけでなく、選択したカテゴリーと検索ワードも渡す。
部分一致は**where(カラム名, 'like', "%検索ワード%")**で検索を行える。
表示するページでは、コントローラーから渡された値を表示するだけで良い。
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
検索結果
</div>
<div class="card-body">
<div class="result">
<form method="post" action="search">
<div class="category">
検索項目: {{ $Search['category'] }}
</div>
<div class="word">
検索ワード: {{ $Search['word'] }}
</div>
@if (isset($User))
<table>
<tr>
<th>ID</th>
<th>NAME</th>
<th>COMMENT</th>
</tr>
@foreach($User as $Data)
<tr>
<td>{{ $Data['id'] }}</td>
<td>{{ $Data['name'] }}</td>
<td>{{ $Data['comment'] }}</td>
</tr>
@endforeach
</table>
@else
<p>検索条件に一致するユーザーは登録されていません</p>
@endif
<input type="submit" value="検索画面にもどる">
@csrf
</form>
</div>
<div class="to_home">
<input type="button" value="ホーム画面へ" onclick="/home">
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
検索結果が1つとは限らないので、ここでも@foreachを利用して、部分一致で合致したユーザーを全て表示できるようにした。
検索結果画面はPOSTでの遷移だが、GETでアクセスされた際のルーティング処理を記入。
Route::get('/home/result','User\SearchController@search');
Route::post('/home/result','User\ResultController@result');
以上のコードで以下のページが完成する。
検索結果画面 → 検索画面
ここでも検索結果画面での値を保持して、検索画面に戻れるようにする。
そのためには、result.blade.phpで渡された値を返せるようにする必要がある。
@endif
<input type="hidden" value="{{ $Search['category'] }}" name="search_category" >
<input type="hidden" value="{{ $Search['word'] }}" name="search_word" >
<input type="submit" value="検索画面にもどる">
@csrf
そして、検索画面のコントローラー、SearchController.phpでは、result.blade.phpから渡された値を受け取って、検索画面に渡せるようにする。
public function return_search(Request $request)
{
$category = $request -> input('search_category');
$word = $request -> input('search_word');
$search_data = array(
'category' => $category,
'word' => $word
);
$category_name = ['ID','NAME','COMMENT'];
return view('user/search',['NAME' => $category_name, 'Search' => $search_data]);
}
検索画面、search.blade.phpでは、検索結果画面から遷移した時に表示する内容と前回入力された値を表示できるようにする。
// 中略
<form method="post" action="result">
<div class="category">
<p>検索項目: </p>
<select name="search_category">
@if(isset($Search))
@for($i = 0; $i < 3; $i++)
@if($Search['category'] === $NAME[$i])
<option value = "{{ $NAME[$i] }}" selected>{{ $NAME[$i] }}</option>
@else
<option value = "{{ $NAME[$i] }}">{{ $NAME[$i] }}</option>
@endif
@endfor
@else
<option value = "" selected>選択してください</option>
@for($i = 0; $i < 3; $i++)
<option value = "{{ $NAME[$i] }}">{{ $NAME[$i] }}</option>
@endfor
@endif
</select>
</div>
<div class="word">
<p>検索ワード: </p>
@if(isset($Search))
<input type="text" name="search_word" value="{{ $Search['word'] }}">
@else
<input type="text" name="search_word">
@endif
</div>
<input type="submit" value="検索する">
@csrf
</form>
SearchController.phpから渡される$Searchがあるかないかで検索結果画面からの遷移かどうかを判断するため、**@if(isset($Search))を使用する。
<option>タグにselected**を付ける事でその値を選んだ状態にできる。
ルーティング処理を記入して、実際に確かめてみる。
Route::post('/home/search','User\SearchController@return_search');
おわりに
以上でLaravelの学習を終える。
基本的な機能であれば作成できるようになったが、まだまだ使いきれていない機能もあるので、引き続き学習を進めていく。
Tips
Laravelの学習で得た知見や小技を記事にしたのをここにまとめる。
- Laravelの認証機能をカスタマイズしてデータベースにレコードを作成する
- Laravelのバリデーションにおける基礎をまとめる
- Laravelでuniqueの対象から自分自身の値を外す
- Laravelのバリデーションでエラー時の遷移先を制御する
- Laravelでcreateを実行してもカラムの値がNULLになってしまうときの解決策
- LaravelでSwift_TransportExceptionが発生した時の対処法(Gmail編)
- LaravelでAuthモデルを呼び出す時って、なんでuse App/Authじゃないの?
- Laravelの確認画面から戻って入力画面に値を渡すシンプルな方法
- Laravelでチェックボックスを使用した検索フォームの作り方
- 【Laravel】SplFileObjectでCSVファイルのデータを読み込んでDBに反映する