【実務で使えるLaravel】登録画面フォームの作成と新規登録処理を解説

暇なときに予定を探せるアプリ[yoteiPicker](https://yoteipicker.com/)をリリースしました。

Laravelで登録画面から、フォームでデータを登録する方法を解説します。

開発環境
Docker 20.10.7
PHP 7.4.22
Laravel 8.53.1
mySQL 5.7
データベースのツール　phpmyadmin
※bootstrapを導入しています。

以下の記事の続きになります。
[【Laravel実務に使える】マイグレーションの作成から一覧画面表示まで](https://qiita.com/kamome_susume/items/4013dfcc9c0b93db7ce1)
[【Laravel8】レイアウト共通化 layoutsファイルのapp.blade.phpのコード例](https://qiita.com/kamome_susume/items/4cb10cf50a090e0d01f0)
[【Laravel】画面遷移させる方法　例：一覧画面から登録画面に遷移](https://qiita.com/kamome_susume/items/8a31ed741e2267bd9f56)

https://www.kamome-susume.com/enginner-job-change-site/

##本記事の流れ
①ルーティングに登録処理を設定
②登録画面にデータを登録するためのフォームを作成
③コントローラーに登録処理を記述
④モデルに登録処理のロジックを記述
⑤データが挿入できるかテスト
⑥一覧画面で確認

この流れで行きます。

##①ルーティングに登録処理を設定
routes>web.php

```php
// 本の登録画面の表示
Route::get('/create', [BookController::class, 'create'])->name('book.create');
// 本の登録処理
Route::post('/store', [BookController::class, 'store'])->name('book.store');
```

##②登録画面にデータを登録するためのフォームを作成
現在の登録画面は以下のようになっています。
![スクリーンショット 2021-08-12 14.11.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1693248/38940470-a3b3-d65f-757b-2b3958f57952.png)

```php
@extends('layouts.app')

@section('content')
<h1>本を登録</h1>
@endsection
```

ここに登録フォームを以下のように作成します。

```php
@extends('layouts.app')

@section('content')
<div class="container small">
  <h1>本を登録</h1>
  <form action="{{ route('book.store') }}" method="POST">
  @csrf
    <fieldset>
        <div class="form-group">
            <label for="book_name">{{ __('本の名称') }}<span class="badge badge-danger ml-2">{{ __('必須') }}</span></label>
            <input type="text" class="form-control" name="book_name" id="book_name">
        <div class="d-flex justify-content-between pt-3">
            <a href="{{ route('book.index') }}" class="btn btn-outline-secondary" role="button">
                <i class="fa fa-reply mr-1" aria-hidden="true"></i>{{ __('一覧画面へ') }}
            </a>
            <button type="submit" class="btn btn-success">
                {{ __('登録') }}
            </button>
        </div>
    </fieldset>
  </form>
</div>
@endsection
```

以下のように登録フォームができます。
![スクリーンショット 2021-08-12 14.28.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1693248/5ddd00be-02ef-18c4-0ed1-a255b8cc4a97.png)

##③コントローラーに登録処理を記述
bookController.phpは以下のようになっています。

```php
<?php

namespace App\Http\Controllers;

use App\Models\Book;
use Illuminate\Http\Request;

class BookController extends Controller
{

    public function __construct()
    {
        $this->book = new Book();
    }

    /**
     * 一覧画面
     */
    public function index()
    {
        $books = $this->book->findAllBooks();

        return view('book.index', compact('books'));
    }

    /**
     * 登録画面
     */
    public function create(Request $request)
    {        
        return view('book.create');
    }

    /**
     * 登録処理
     */
    public function store(Request $request)
    {
        return redirect()->route('book.index');
    }
}
```

storeメソッドに登録処理を書きましょう。
以下を追加してください。

```php
    /**
     * 登録処理
     */
    public function store(Request $request)
    {
        $registerBook = $this->book->InsertBook($request);←追加
        return redirect()->route('book.index');
    }
```
##④モデルに登録処理のロジックを記述
コントローラーには最低限の登録処理を書いて、モデルに登録処理のロジックを書きましょう。

```php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    use HasFactory;

    // モデルに関連付けるテーブル
    protected $table = 'books';

    // テーブルに関連付ける主キー
    protected $primaryKey = 'book_id';

    // 登録・更新可能なカラムの指定
    protected $fillable = [
        'book_id',
        'user_id',
        'category_id',
        'book_name',
        'created_at',
        'updated_at'
    ];
    
    /**
     * 一覧画面表示用にbooksテーブルから全てのデータを取得
     */
    public function findAllBooks()
    {
        return Book::all();
    }

    public function InsertBook($request)
    {
        // リクエストデータを基に管理マスターユーザーに登録する
        return $this->create([
            'book_name'             => $request->book_name,
        ]);
    }

}

```
user_idとcategory_idは今回の登録処理には不要なので、null許容しています。

##⑤データが挿入できるかテスト
登録画面と登録処理ができたので、データベースにデータが挿入されるか確認しましょう。

新規登録画面より、データを登録
![スクリーンショット 2021-08-12 14.51.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1693248/96e6a786-4548-b999-6572-db7bee82ee53.png)

以下のようにデータが挿入できたことを確認。

![スクリーンショット 2021-08-12 14.51.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1693248/f159e7ea-50ef-97fb-377d-055606362f51.png)

##⑥一覧画面で確認
一覧画面でも確認しましょう。

先程の登録画面で正常に登録処理が成功すると、一覧画面にリダイレクトされます。
そして、以下のように一覧表示できることが確認できますね。
![スクリーンショット 2021-08-12 14.51.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1693248/f1969805-1a11-7679-74a5-6c1c60c10a09.png)

今回はここまでです。

暇なときに予定を探せるアプリ[yoteiPicker](https://yoteipicker.com/)をリリースしました。

もし参考になればLGTMをお願いします。
また、転職を考えている人に以下の記事がおすすめです。

https://www.kamome-susume.com/enginner-job-change-site/