⑤ Laravelで簡単なCRUDシステムを作る（Create…データを新規登録する画面を作成）

2021-06-262023-02-20

ここでは、データを新規登録できるようにしていきます。

順番としては、新たにルーティングを設定して新規登録画面を表示できるようにする→一覧表示画面に新規登録ボタンを作りリンクさせる→データ登録のための設定をする、と進みたいと思います。

表示確認

ルーティングを設定

web.phpに下記のように、一行を追記してください。

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TodoController;

// Route::get('/', function () {
//     return view('welcome');
// });

Route::get('todo/index', [TodoController::class, 'index'])->name('todo.index');
Route::get('todo/create', [TodoController::class, 'create'])->name('todo.create'); //追記

コントローラを設定

次に、コントローラのcreateのところに下記のように追記してください。

    public function create()
    {
      return view('todo.create'); //追記
    }

これで、createメソッドが実行されたら、viewのtodo.createが表示される設定ができました。

ビューを設定

実際に表示する画面を作成します。

resources>views>todoの中にcreate.blade.phpというファイルを作成します。

ひとまず、内容は下記のようにしておきます。

<div class="container-sm">
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  <h1>createです</h1>
  <pre>ここに新規登録画面が表示されます</pre>
</div>

画面表示を確認

（ローカルサーバURL）/todo/create　にアクセスし、画面表示を確認してみましょう。

今回はここ（http://127.0.0.1:8000/todo/create）にアクセスします。

このように表示されていたら、画面表示の確認は完了です！

一覧表示画面に新規登録ボタンを作成

では、index.blade.phpに新規登録ボタンを作りリンクさせましょう。

index.blade.phpのtable外に、下記のように追記しましょう。

<form method="GET" action="{{ route('todo.create') }}">
<button type="submit" class="btn btn-primary">新規登録</button>
</form>

//あるいは、下記のようにaタグだけでもOK
<a href="{{ route('todo.create') }}">新規登録</a>

無事にcreate画面に移行してれば成功です。

新規Todoの入力欄を作成

create.blade.phpの内容を下記のようにしてください。

<div class="container-sm">
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  <h1>createです</h1>
  
  <form action="POST" action="">  //action内は後で書きます
   @csrf
  todoの内容：<input type="text" name="content">
  <input type="submit" class="btn btn-info" value="登録する">
  </form>

</div>

アクセスして、下記のように表示されればOKです。