はじめに

Cloud9を使ってLaravel5.4で開発、第4回です。

以前の記事はこちら
Cloud9を使ってLaravel5.4で開発【第1回】
Cloud9を使ってLaravel5.4で開発【第2回】
Cloud9を使ってLaravel5.4で開発【第3回】

今回でひとまず、ユーザー一覧の作成が終了します。

2-7.バリデーションを付ける

新規保存(create/store)にバリデーション処理を追加する。
値の評価だけでなく、エラーメッセージの表示まで実装。

コントローラー

UsersController.phpstore() メソッドへ追加する。

public function store(Request $request)
    {
        /*** ここからバリデーション ***/
            // 評価対象
            $inputs = $request->all();

            // ルール
            $rules = [
                'name'     => 'required',
                'email'    => 'required|email|unique:users',
                'password' => 'required',
            ];

            // 表示メッセージ
            $messages = [
                'name.required' => '名前は必須です。',
                'email.required' => 'E-mailは必須です。',
                'email.email' => 'E-mailの形式で入力してください。',
                'email.unique' => 'このメールアドレスは既に登録されています。',
                'password.required' => 'パスワードは必須です。',
            ];

            $validation = \Validator::make($inputs,$rules,$messages);

            // エラー時の処理
            if($validation->fails())
            {
                return redirect()->back()->withErrors($validation->errors())->withInput();
            }
        /*** ここまでバリデーション ***/

        // userオブジェクト生成
        $user = new User;

        // 値の登録
        $user->name     = $request->name;
        $user->email    = $request->email;
        $user->password = Hash::make($request->password); // パスワードのハッシュ化

        // 保存
        $user->save();

        // 一覧にリダイレクト
        return redirect()->to('/users');
    }

バリデーションの実態は Validator::make() となる。ここに、評価対象、評価ルール、エラーメッセージ(オプション)を渡し、評価結果を得る。
$validation->fails() で NG だった場合は、呼び出し元の view にリダイレクトし、OK なら登録処理に移る。

エラー時に、リダイレクト文を、

return redirect()->back()->withErrors($validation->errors())->withInput();

とすることで、エラー内容及び、もともとの入力値を呼び出し元の view に戻すことができ、view 側でのエラー表示等に利用できる。

ビュー

create.blade.phpを下記のように修正。

@extends('layouts.default')

@section('content')

    <h1>新規作成</h1>

    <div class="row"></div>
        <div class="col-sm-12">
            <a href="/users" class="btn btn-primary" style="margin:20px;">一覧に戻る</a>
        </div>
    </div>

    <!-- form -->
    <form method="post" action="/users">
        {{ csrf_field() }}

        <!-- エラーがあるかどうかを判断して、has-errorクラスを追加 -->
        <div class="form-group @if(!empty($errors->first('name'))) has-error @endif">
            <label>名前</label>
            <input type="text" name="name" value="{{ old('name') }}" class="form-control">
            <!-- (最初の)エラーメッセージ表示 -->
            <span class="help-block">{{ $errors->first('name') }}</span>
        </div>

        <!-- エラーがあるかどうかを判断して、has-errorクラスを追加 -->
        <div class="form-group @if(!empty($errors->first('email'))) has-error @endif">
            <label>E-Mail</label>
            <input type="text" name="email" value="{{ old('email') }}" class="form-control">
            <!-- (最初の)エラーメッセージ表示 -->
            <span class="help-block">{{ $errors->first('email') }}</span>
        </div>

        <!-- エラーがあるかどうかを判断して、has-errorクラスを追加 -->
        <div class="form-group @if(!empty($errors->first('password'))) has-error @endif">
            <label>パスワード</label>
            <input type="text" name="password" value="" class="form-control">
            <!-- (最初の)エラーメッセージ表示 -->
            <span class="help-block">{{ $errors->first('password') }}</span>
        </div>

        <input type="submit" value="登録" class="btn-primary">

    </form>

@endsection

name を例にするとポイントは3点。
- {{ $errors->first('name') }} でのエラーメッセージ表示
- value="{{ old('name') }}" での入力値保存
- <div class="form-group @if(!empty($errors->first('name'))) has-error @endif"> でクラスを追加して赤く表示させる

ちなみに2つ目の入力値保存は、passwordにだけあまり適していないと判断し、適用させていない。

エラーが発生するとこんな感じ。

86519d01 d46b 40f3 aa91 4615e14311de

2-8.一覧表示画面に検索機能を付ける

一覧表示には欠かせない検索機能を実装してみる。

追加すべき機能は
- index.blade.php に検索フォームを追加
- index() メソッドに検索機能を追加(検索は複数カラムの or , like 検索)
- 検索結果のページングの際に keyword を持ちまわれるようにする

の大きく3つ。

ビュー

まずは、index.blade.php に検索フォームを追加する。
(以下一部抜粋)

    <!-- 新規登録ボタン -->
    <div class="row">
        <div class="col-sm-12">
            <a href="/users/create" class="btn btn-primary" style="margin:20px;">新規登録</a>
        </div>
    </div>

    <!-- 検索フォーム -->
    <div class="row">
        <div class="col-sm-12">
            <form method="get" action="/users" class="form-inline" style="margin:20px;">
                <div class="form-group">
                    <label>検索</label>
                    <input type="text" name="keyword" class="form-control" value="{{ $keyword }}">
                </div>
                <input type="submit" value="検索" class="btn btn-info">
            </form>
        </div>
    </div>

    <!-- table -->
    <table class="table table-striped">

        <!-- loop -->
        @forelse($users as $user)
            <tr>
                <td>{{ $user->id }}</td>
                <td>{{ $user->name }}</td>
                <td>{{ $user->email }}</td>
                <td><a href="/users/{{ $user->id }}" class="btn btn-primary btn-sm">詳細</a></td>
                <td><a href="/users/{{ $user->id }}/edit" class="btn btn-primary btn-sm">編集</a></td>
                <td>
                    <form method="post" action="/users/{{ $user->id }}">
                        {{ csrf_field() }}
                        {{ method_field('DELETE') }}
                        <input type="submit" value="削除" class="btn btn-danger btn-sm btn-destroy">
                    </form>
                </td>
            </tr>
        @empty
            <p>ユーザーが存在しません</p>
        @endforelse
    </table>

そしてコントローラー。

まず上部に以下を追加。

use Illuminate\Support\Facades\Input;

index() メソッドを修正。

    public function index()
    {
        // キーワード受け取り
        $keyword = Input::get('keyword');

        // キーワードがあったら
        if(!empty($keyword))
        {
            $users = User::where('email','like','%'.$keyword.'%')
                            ->orWhere('name','like','%'.$keyword.'%')
                            ->orderBy('id','desc')
                            ->paginate(10);
        } else { // キーワードがなければ
            $users = User::orderBy('id', 'desc')->paginate(10);
        }

        // 結果をビューに送る
        return view('users.index')->with('users', $users)
                                  ->with('keyword', $keyword);
    }

keyword が送られてきているかどうかを判断し、送られていなければ全検索。あれば WHERE 句を追加した検索を行っている。

この状態で一度見てみる。

実装できているように見えるが、実はあと一歩足りない。

例えば「a」のような数多くヒットするワードで検索をし、下のページングボタンでページ移動をすると、検索結果がリセットされてしまう。

index.blade.php の下部に記述しているページネーション部分を修正。

{!! $users->render() !!}

{!! $users->appends(['keyword'=>$keyword])->render() !!}

これでうまくいく。

De7e206f 2ffc 4c20 b1df cf80b282a8bf

ひとまずユーザー情報一覧が完成しました。

ここまでの内容で、一通りCRUDでの開発はしましたので、超々基本的な部分は抑えられたのではないかと、、、

次回からは、掲示板部分を作っていこうと思います!!お楽しみに!

Shere
  • はてなブログ
  • Twitter
  • Facebook
Cloud9を使ってLaravel5.4で開発【第4回】

Writer

  • Name

  • Position

    自然を愛する現代っ子

  • Profile

    文章を書くのは苦手です。小学校の読書感想文は毎年「五体不満足」でした。毎年同じのを出してました。そのくらい苦手です。でもブログ書きます。読んで下さい。