【Laravel6】BootStrapの導入と登録（Create)機能の実装（ホテル予約システム２）

2021年 11月 03日

タグ：

Laravel

授業課題の解説

利用者の登録機能を作る

一覧の表示ができたので、次は利用者の登録機能を作っていきます。

やる内容は下記の通り

・データ入力フォームを作成する(add.blade.php)。
・コントローラにaddとcreateのアクションを追加する。
・web.phpにルーティングを設定する。

その前に、楽にデザインを良くしたいので、BootStrapを利用できるようにしておきましょう。

laravel/ui をインストールし、BootStrapを利用可能にする。

BootStrapを使うために、composerを使ってlaravel/uiという追加パッケージをインストールします。

laravel/uiはLaravelでVueやReactなどのモダンなフロントエンドの技術を利用するために必要なライブラリで、BootStrapもこれを使って利用します。

なお、これらの作業にはnode.jsが必要です。

ターミナルで下記コマンドを実行

現時点の最新版のlaravel/uiのバージョンは3系なのですが、この環境で使用しているLaravel6系に対応するのは1系です。

公式のGitHub:：laravel/ui

ですので、バージョンを指定してダウンロードします。

composer require laravel/ui:^1.0 --dev

このlaravel/ui を利用して、bootstrapをインストールします。

php artisan ui bootstrap

layouts/hotel.blade.php

内に下記の一文を追加することで、BootStrapが利用可能になります。

<head>
    <!-- 略 -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <!-- 略 -->
</head>

これでBootStrapが利用可能になりました。

入力フォームの作成

では、最初に戻って入力フォームを作成していきます。

@extends('layouts.hotel')

@section('body')
    <form action="/guest/add" method="POST" class="form-group" >
        @csrf
        <label for="name">お名前</label>
        <input type="text" name="name" placeholder="お名前" class="form-control" required autofocus>
        <br>
        <label for="address">ご住所</label>
        <input type="text" name="address" placeholder="ご住所" class="form-control" required>
        <br>
        <label for="tel">お電話番号</label>
        <input type="tel" name="tel" placeholder="お電話番号" class="form-control" required>
        <br>
        <input type="submit" value="登録" class="form-control-sm">
    </form>
@endsection

<style>
form {
    width: 50%;
}
input:required{
    /* background: #ffcdd2; */
}
input:valid{
    background: transparent;
}
input:focus{
    background: #DCEDC8;
}

</style>

Guestモデル

Guest.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Guest extends Model
{
    protected $fillable = ['name','address','tel'];


}

GuestController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Guest;

class GuestController extends Controller
{
    public function index()
    {
        $guests = Guest::all();

        return view('guest.index',['guests' => $guests]);
    }
    public function add()
    {
        return view('guest.add');
    }
    public function create(Request $request)
    {
        $user = new Guest();
        $user->fill($request->all())->save();
        return redirect('guest');
    }
}

web.php

<?php

Route::get('guest','GuestController@index');

Route::get('guest/add','GuestController@add');
Route::post('guest/add','GuestController@create');