Laravelチュートリアル5 – フォームを扱った処理を書いてみよう

フォームを扱った処理を書いてみよう！

前回までのチュートリアルで基本的なDB操作がわかりました。

今度は実際に画面から入力された値を使って、DBへ値を挿入したり、削除してみたりしましょう！

事前準備

マイグレーションファイル

マイグレーションファイルは前回までに作成した以下のペットのものを使用していきます。

database/migrations/2019_06_05_184203_create_pets_table.php

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePetsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('pets', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('birthday');
            $table->string('gender');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('pets');
    }
}

モデル

モデルも前回までに作成したペットのものを使用していきます。

app/Pet.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Pet extends Model
{
    protected $guarded = ['id'];
}

コントローラー

コントローラーは今回新しく作成していきましょう！

以下のコマンドで新しくコントローラーを生成してください！

php artisan make:controller SampleFormController

コマンドで生成すると、以下のような雛形が作成されます。

app/Http/Controllers/SampleFormController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SampleFormController extends Controller
{
    //
}

前回学習したSampleControllerのselectMany()と同じように、今回はindex()を作成していきます。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Pet;

class SampleFormController extends Controller
{
    public function index()
    {
        $pets = Pet::orderBy('id', 'asc')->get();

        return view('sample_form', [
            "pets" => $pets
        ]);
    }
}

ビュー

ペットの一覧を表示するビューを作成しましょう！

こちらも内容は、前回学習したものとほぼ同じです。

データを追加する用に入力ボックスだけ追加されています。

resources/views/sample_form.blade.php

<h2>Pet List</h2>
<form method="POST" action="">
    @csrf
    <input type="submit" name="delete" value="削除">

    <table border="1">
        <tr>
            <th>名前</th>
            <th>生年月日</th>
            <th>性別</th>
            <th>削除</th>
        </tr>
        @foreach($pets as $pet)
        <tr>
            <td>{{$pet->name}}</td>
            <td>{{$pet->birthday}}</td>
            <td>{{$pet->gender}}</td>
            <td><input type="checkbox" name="delete_pets[]" value=""></td>
        </tr>
        @endforeach
    </table>
</form>

<form method="POST" action="">
    @csrf
    <p>データの追加</p>
    <input type="text" name="pet">
    <input type="submit" name="add" value="追加">
</form>

ルーティング

ブラウザからアクセスできるように、ルーティングを追加しましょう！

routes/web.php

Route::get('/form/index', 'SampleFormController@index');

表示結果

http://127.0.0.1:8000/form/indexへアクセスすると、以下のような一覧と削除ボタンと入力ボックスが表示されます！

各ペットを表示&編集するページを作成しよう

ここでは、各ペットを表示&編集するページを作成します。

実際に編集をDBへ反映する処理は後ほど作成していきます。

ルーティング

以下のようにルーティングを追加してください。

/form/show/{id}のように、{id}を付与することでURL指定されたidの値をコントローラー側で引数として受け取ることができるようになります。

routes/web.php

Route::get('/form/show/{id}', 'SampleFormController@show');

/form/show/12のようにアクセスすると、コントローラー側でidとして、12を受け取ることができます。

コントローラー

showメソッドを追加します。

showメソッドの引数として$idを指定することで、実際にアクセスされたURLからidを取得できます。

ここでは、受け取ったidでペットテーブルを検索し、該当したidのペット情報を取得しています。

app/Http/Controllers/SampleFormController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Pet;

class SampleFormController extends Controller
{
    public function index()
    {
        .
        .
    }

    public function show($id)
    {
        $pet  = Pet::find($id);

        return view('sample_show', [
            "pet" => $pet
        ]);
    }

}

ビュー

個々のペット情報を表示するためのページを作成します。

resources/views/sample_show.blade.php

<h2>Pet List</h2>
<form method="POST" action="">
    @csrf
    <p>
        名前: <input type="text" name="name" value="{{$pet->name}}">
    </p>
    <p>
        生年月日: <input type="text" name="name" value="{{$pet->birthday}}">
    </p>
    <p>
        性別: <input type="text" name="name" value="{{$pet->gender}}">
    </p>
    <p>
        作成日時: <input type="text" name="name" value="{{$pet->created_at}}">
    </p>
    <p>
        更新日時: <input type="text" name="name" value="{{$pet->updated_at}}">
    </p>
    <input type="submit" name="update" value="更新">
</form>

また最初に作成した一覧表示をするビューには、上記の個々のペット情報を表示するためのページへのリンクを追加します。

resources/views/sample_form.blade.php

<h2>Pet List</h2>
<form method="POST" action="">
    @csrf
    <table border="1">
        <tr>
            <th>ID</th>
            <th>名前</th>
            <th>生年月日</th>
            <th>性別</th>
            <th>削除</th>
        </tr>
        @foreach($pets as $pet)
        <tr>
            <td><a href="/form/show/{{$pet->id}}">{{$pet->id}}</a></td>
            <td>{{$pet->name}}</td>
            <td>{{$pet->birthday}}</td>
            <td>{{$pet->gender}}</td>
            <td><input type="checkbox" name="delete_pets[]" value=""></td>
        </tr>
        @endforeach
    </table>

    <p>データの追加</p>
    <input type="text" name="pet">
    <input type="submit" name="add" value="追加">
</form>

表示結果

http://127.0.0.1:8000/form/indexへアクセスすると、一覧のID部分に、ここのペット詳細を見るためのリンクが追加されたことがわかるとおもいます。

またそのリンクをクリックすると、http://127.0.0.1:8000/form/show/12のような個々のペット詳細のページへ飛ぶことができると思います。

ペットを追加する処理を書いてみよう！

ルーティング

以下のようにルーティングを追加してください。

routes/web.php

Route::post('/form/store', 'SampleFormController@store');

ビュー

個々のペット情報を表示するためのページを作成します。

resources/views/sample_form.blade.php

.
.
<form method="POST" action="/form/store">
    @csrf
    <p>データの追加</p>
    <input type="text" name="pet">
    <input type="submit" name="add" value="追加">
</form>

コントローラー

メソッドを追加します。

app/Http/Controllers/SampleFormController.php

    public function store(Request $request)
    {
        dd($request);
    }

画面にデバック出力をしてみる

app/Http/Controllers/SampleFormController.php

    public function store(Request $request)
    {
        dd($request->pet);
    }

受け取った値を登録する処理を書いていこう！

これで画面に入力された値を受け取ることができるようになりました。

あとは、前回のチュートリアルで学んだように、受け取った値をテーブルへ登録(挿入)してあげればいいだけです。

app/Http/Controllers/SampleFormController.php

    public function store(Request $request)
    {
        $pet = new Pet();

        $pet->name = $request->pet;
        $pet->birthday = "1980/01/01";
        $pet->gender = "not set";

        $pet->save();

        return redirect('/form/index');
    }

ペットを削除する処理を書いてみよう！

ルーティング

以下のようにルーティングを追加してください。

routes/web.php

Route::post('/form/delete', 'SampleFormController@delete');

ビュー

name=”delete_pets[]”にするとチェックされた値を配列で受け取ることができます。

value=”{{$pet->id}}”にする

resources/views/sample_form.blade.php

<h2>Pet List</h2>
<form method="POST" action="/form/delete">
    @csrf
    <input type="submit" name="delete" value="削除">

    <table border="1">
        <tr>
            <th>ID</th>
            <th>名前</th>
            <th>生年月日</th>
            <th>性別</th>
            <th>削除</th>
        </tr>
        @foreach($pets as $pet)
        <tr>
            <td><a href="/form/show/{{$pet->id}}">{{$pet->id}}</a></td>
            <td>{{$pet->name}}</td>
            <td>{{$pet->birthday}}</td>
            <td>{{$pet->gender}}</td>
            <td><input type="checkbox" name="delete_pets[]" value="{{$pet->id}}"></td>
        </tr>
        @endforeach
    </table>
</form>

コントローラー

こちらも先程と同様に〜のようにすると、チェックされた値を配列で受け取ることができます。

あとは配列で受け取った複数の削除対象のidを、前回のチュートリアルで学んだ方法で、削除いけば良いのです。

app/Http/Controllers/SampleFormController.php

    public function delete(Request $request)
    {
        foreach($request->delete_pets as $pet_id) {
            Pet::find($pet_id)->delete();
        }

        return redirect('/form/index');
    }

表示結果

http://127.0.0.1:8000/form/indeへアクセス

ペット情報を編集(更新)する処理を書いてみよう！

ルーティング

以下のようにルーティングを追加してください。

Route::post('/form/update', 'SampleFormController@update');

ビュー

action=”/form/update”

と

<input type="hidden" name="pet_id" value="{{$pet->id}}">

とdisabled

<h2>Pet List</h2>
<form method="POST" action="/form/update">
    @csrf
    <input type="hidden" name="pet_id" value="{{$pet->id}}">

    <p>
        名前: <input type="text" name="name" value="{{$pet->name}}">
    </p>
    <p>
        生年月日: <input type="text" name="birthday" value="{{$pet->birthday}}">
    </p>
    <p>
        性別: <input type="text" name="gender" value="{{$pet->gender}}">
    </p>
    <p>
        作成日時: <input type="text" name="created_at" value="{{$pet->created_at}}" disabled>
    </p>
    <p>
        更新日時: <input type="text" name="updated_at" value="{{$pet->updated_at}}" disabled>
    </p>
    <input type="submit" name="update" value="更新">
</form>

コントローラー

こちらも先程と同様に〜のようにすると、入力された値が〜

あとは受け取った値でを、前回のチュートリアルで学んだ方法で、削除いけば良いのです。

    public function update(Request $request)
    {
        Pet::find($request->pet_id)
        ->update([
            'name' => $request->name,
            'birthday' => $request->birthday,
            'gender' => $request->gender
            ]);

        return redirect('/form/index');
    }

表示結果

http://127.0.0.1:8000/form/show/12へアクセス

jonnyの値を更新します。

以下の値に変更

ちゃんと変更されていることがわかりますね！