前回の記事の続きです。Laravelをインストールしてデフォルトのログイン機能を入れたところから開始します。
Formファサードを入れる
自力でタグを打ち込んでもいいのですが、今回はFormファサードを利用してViewを作成します。
コマンドプロンプト
C:\xampp\htdocs\laravel>composer require laravelcollective/html
Bladeの変更
ここは好みによって構成を変えます。ここではappファイルでHTMLのbody以外を記述し、loginedファイルでログイン後のheaderやnavを記述します。
resources/views/layouts/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
@yield('base')
</body>
</html>
resources/views/layouts/logined.blade.php
@extends('layouts.app')
@section('base')
<header class="container">
<h1>{{ config('app.name', 'Laravel') }}<</h1>
</header>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('logout') }}"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
ログアウト
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</li>
</ul>
</div>
</div>
</nav>
<main class="container">
@yield('content')
</main>
<footer></footer>
@endsection
resources/views/auth/login.blade.php
@extends('layouts.app')
@section('base')
<main class="login container">
<h2 class="text-center">ログイン画面</h2>
{{ Form::open(['url' => 'login', 'method' => 'post']) }}
<div class="card">
<div class="card-body">
<div class="">
<label class="fs-4">メールアドレス</label>
{{ Form::text('email', old('email'), ['class' => 'form-control' . ($errors->has('email') ? ' is-invalid' : '')]) }}
<p class="invalid-feedback">
@error('email')
{{ $message }}
@enderror
</p>
</div>
<div class="">
<label class="fs-4">パスワード</label>
{{ Form::password('password', ['class' => 'form-control' . ($errors->has('password') ? ' is-invalid' : '')]) }}
<p class="invalid-feedback">
@error('password')
{{ $message }}
@enderror
</p>
</div>
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary">ログイン</button>
</div>
</div>
</div>
{{ Form::close() }}
</main>
@endsection
こんな感じになりました。
最後に
Formファサードのインストール方法とログインページのサンプルを記事にしました。
個人のメモなので参考にならない部分が多いと思います。