「Cloud9を使ってLaravel5.4で開発」第3回です。

第一回、第二回はこちら
Cloud9を使ってLaravel5.4で開発【第1回】
Cloud9を使ってLaravel5.4で開発【第2回】

早速はじめますよー。

2-3.新規登録

新規登録では2つのルートと機能を設定する。
- create:入力画面の生成と store へのデータの送信
- store :情報を受け取り保存 ⇒ 一覧へリダイレクト

ルーティング

routes/web.php に以下を追加

Route::get('users/create', 'UsersController@create')->name('users.create');
Route::post('users', 'UsersController@store')->name('users.store');

コントローラー

まず create を作成。

  public function create()
  {
      // create に転送
      return view('users.create');
  }

次に store を作成。
処理の流れは
create が投げてきた値を受け取る ⇒ DBに保存 ⇒ 一覧へリダイレクト。

先に先頭のほうで

use Illuminate\Support\Facades\Hash;

と記述。

  public function store(Request $request)
  {
      // userオブジェクト生成
      $user = new User;

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

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

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

ビュー

resources/views/users/create.blade.php を新規作成し、下記のように記述

@extends('layouts.default')

@section('content')

    <h1>新規作成</h1>

    <div class="row">
        <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() }}

        <div class="form-group">
            <label>名前</label>
            <input type="text" name="name" value="" class="form-control">
        </div>

        <div class="form-group">
            <label>E-Mail</label>
            <input type="text" name="email" value="" class="form-control">
        </div>

        <div class="form-group">
            <label>パスワード</label>
            <input type="text" name="password" value="" class="form-control">
        </div>

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

    </form>

@endsection

こんな感じ

C7d11468 48d1 4d7d a419 3d6efd28f96c

2-4.詳細表示

  • ID
  • 名前
  • E-mail
  • Password
  • 登録日
  • 更新日

を表示するページを作る。

ルーティング

routes/web.php に以下を追加。

Route::get('users/{user}', 'UserController@show')->name('users.show');

コントローラー

show() メソッドを定義する。
id でレコードを検索し、その結果をそのまま view に返す。

  public function show($id)
  {
    // レコード検索
    $user = User::find($id);
    // 検索結果をビューに渡す
    return view('users.show')->with('user', $user);
  }

ビュー

resources/views/users/show.blade.php を新規作成し、下記のように記述。

@extends('layouts.default')

@section('content')

    <h1>詳細表示</h1>

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

    <!-- table -->
    <table class="table table-striped">
        <tr><td>ID</td><td>{{ $user->id }}</td></tr>
        <tr><td>名前</td><td>{{ $user->name }}</td></tr>
        <tr><td>E-mail</td><td>{{ $user->email }}</td></tr>
        <tr><td>パスワード</td><td>{{ $user->password }}</td></tr>
        <tr><td>登録日</td></td><td>{{ $user->created_at }}</td></tr>
        <tr><td>更新日</td></td><td>{{ $user->updated_at }}</td></tr>
    </table>

@endsection

こんな感じ

D4cad76a e100 4524 89c3 a9ca66fca0f3

2-5.編集

各レコードの編集機能を作る。基本は、新規作成の応用。
- edit :編集画面を表示し、update にデータを送る
- update:edit から送られたデータを受け取り更新する。

ルーティング

routes/web.php に以下を追加。

Route::get('users/{user}/edit', 'UsersController@edit')->name('users.edit');
Route::put('users/{user}','UsersController@update')->name('users.update');

コントローラー

まず、edit。

  public function edit($id)
    {
        // レコードを検索
        $user = User::find($id);

        // 検索結果をビューに渡す
        return view('users.edit')->with('user', $user);
    }

受け取った id を元にレコードを検索 ⇒ 情報を view に渡す。

次にupdate。

受け取った id を元にレコード検索、更新し、詳細表示 へリダイレクトさせている。

  public function update(Request $request, $id)
  {
      // レコードを検索
      $user = User::find($id);

      // 値を代入
      $user->name     = $request->name;
      $user->email    = $request->email;
      $user->password = Hash::make($request->password);

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

      // リダイレクト
      return redirect()->route('users.show',[$id]);
  }

ビュー

resources/views/users/edit.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/{{ $user->id }}">
        {{ csrf_field() }}
        {{ method_field('PUT') }}

        <div class="form-group">
            <label>名前</label>
            <input type="text" name="name" value="{{ $user->name }}" class="form-control">
        </div>

        <div class="form-group">
            <label>E-Mail</label>
            <input type="text" name="email" value="{{ $user->email }}" class="form-control">
        </div>

        <div class="form-group">
            <label>パスワード</label>
            <input type="text" name="password" value="" class="form-control">
        </div>

        <input type="submit" value="更新" class="btn-primary">

    </form>

@endsection

ポイントが3点

  • action 先が /users/{{ $users->id }} となる。
  • name, email ともに初期値として、既存値を value="{{ $user->name }}"value="{{ $user->email }}" として表示。
  • update のときは method が PUT になるが、formタグではその値を入れられないため、一度 method="post" とし、{{ method_field('PUT') }} とする。

2-6.削除

削除のときの HTTP の動詞は、DELETE になるが、更新のときの PUT 同様 formタグでは値は入れられない。
そのため index.blade.php{{ method_field('DELETE') }} としてある。

ルーティング

routes/web.php に以下を追加。

Route::delete('users/{user}', 'UsersController@destroy')->name('users.destroy');

とここまでひとつひとつルーティングを定義してきて、今こうなっているはず。

Route::get('users','UsersController@index')->name('users.index');
Route::get('users/create', 'UsersController@create')->name('users.create');
Route::post('users', 'UsersController@store')->name('users.store');
Route::get('users/{user}', 'UsersController@show')->name('users.show');
Route::get('users/{user}/edit', 'UsersController@edit')->name('users.edit');
Route::put('users/{user}','UsersController@update')->name('users.update');
Route::delete('users/{user}', 'UsersController@destroy')->name('users.destroy');

ターミナル上で $ php artisan route:list でルート一覧を確認するとこう

hogehoge:~/workspace $ php artisan route:list
+--------+----------+-------------------+---------------+----------------------------------------------+--------------+
| Domain | Method   | URI               | Name          | Action                                       | Middleware   |
+--------+----------+-------------------+---------------+----------------------------------------------+--------------+
|        | GET|HEAD | /                 |               | Closure                                      | web          |
|        | GET|HEAD | api/user          |               | Closure                                      | api,auth:api |
|        | GET|HEAD | users             | users.index   | App\Http\Controllers\UsersController@index   | web          |
|        | POST     | users             | users.store   | App\Http\Controllers\UsersController@store   | web          |
|        | GET|HEAD | users/create      | users.create  | App\Http\Controllers\UsersController@create  | web          |
|        | GET|HEAD | users/{user}      | users.show    | App\Http\Controllers\UsersController@show    | web          |
|        | PUT      | users/{user}      | users.update  | App\Http\Controllers\UsersController@update  | web          |
|        | DELETE   | users/{user}      | users.destroy | App\Http\Controllers\UsersController@destroy | web          |
|        | GET|HEAD | users/{user}/edit | users.edit    | App\Http\Controllers\UsersController@edit    | web          |
+--------+----------+-------------------+---------------+----------------------------------------------+--------------+

このルーティングは、一番典型的な「CRUD」ルートとなっている。
要はテンプレなので、実は routes/web.php に定義した内容は1行に収められる。

// Route::get('users','UsersController@index')->name('users.index');
// Route::get('users/create', 'UsersController@create')->name('users.create');
// Route::post('users', 'UsersController@store')->name('users.store');
// Route::get('users/{user}', 'UsersController@show')->name('users.show');
// Route::get('users/{user}/edit', 'UsersController@edit')->name('users.edit');
// Route::put('users/{user}','UsersController@update')->name('users.update');
// Route::delete('users/{user}', 'UsersController@destroy')->name('users.destroy');

Route::resource('users', 'UsersController');

あらすっきり。

ルート一覧を確認すると

hogehoge:~/workspace $ php artisan route:list
+--------+-----------+-------------------+---------------+----------------------------------------------+--------------+
| Domain | Method    | URI               | Name          | Action                                       | Middleware   |
+--------+-----------+-------------------+---------------+----------------------------------------------+--------------+
|        | GET|HEAD  | /                 |               | Closure                                      | web          |
|        | GET|HEAD  | api/user          |               | Closure                                      | api,auth:api |
|        | GET|HEAD  | users             | users.index   | App\Http\Controllers\UsersController@index   | web          |
|        | POST      | users             | users.store   | App\Http\Controllers\UsersController@store   | web          |
|        | GET|HEAD  | users/create      | users.create  | App\Http\Controllers\UsersController@create  | web          |
|        | GET|HEAD  | users/{user}      | users.show    | App\Http\Controllers\UsersController@show    | web          |
|        | PUT|PATCH | users/{user}      | users.update  | App\Http\Controllers\UsersController@update  | web          |
|        | DELETE    | users/{user}      | users.destroy | App\Http\Controllers\UsersController@destroy | web          |
|        | GET|HEAD  | users/{user}/edit | users.edit    | App\Http\Controllers\UsersController@edit    | web          |
+--------+-----------+-------------------+---------------+----------------------------------------------+--------------+

もちろん一緒。

コントローラー

対象となるレコードを取得 ⇒ 削除 ⇒ 一覧へリダイレクト。

    public function destroy($id)
    {
        // 削除対象レコードを検索
        $user = User::find($id);

        // 削除
        $user->delete();

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

ビュー

ビューはない。
しかし、このままだと何の警告もなく削除されるため、JavaScript で確認画面をだす。
index.blade.php@endsection の下へ以下コードを追加。

@section('script')
$(function() {
    $(".btn-destroy").click(function() {
        if(confirm("本当に削除しますか?")) {
            // そのまま削除
        } else {
            // キャンセル
            return false;
        }
    });
});
@endsection

これで確認ダイアログが表示されるようになった。

1a956b7f 9056 4c27 9975 55a5f74ec6c3

今回はここでおわり。続きは次回で。

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

Writer

  • Name

  • Position

    自然を愛する現代っ子

  • Profile

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