MySQL の準備
todo アプリを作成していく訳ですが、予定を追加するのも編集するのもデータベースがないと何もできません。
なのでここではtodo アプリを作る上で利用するデータベースを作成していきます。
mysql -u root
まずmysql にアクセスします。
mysql> create database todolist;
ここではtodolist という名前のデータベースを作成しておきます。
次にこのデータベースにアクセスするアカウントの作成を行います。
自分のユーザー名とパスワードを決めましょう。
mysql> use todolist; mysql> create user n.matsuda IDENTIFIED BY 'XXXXXXXX'; mysql> grant all privileges on todolist.* to 'n.matsuda';
ここまでできたらsql は閉じて問題ありません。
ここまででユーザー名とパスワード付きのデータベースが作成できました。
Laravel からこのアカウントを使ってデータベースにアクセスできるように設定を行います。
プロジェクト直下に.envというファイルがありますので、開いて次の部分を編集し保存します。
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=todolist DB_USERNAME=n.matsuda DB_PASSWORD=XXXXXXXX
その後設定を反映させるために以下のコマンドを打ちます。
php artisan config:cache
ユーザー認証
Laravel にはユーザー認証を簡単に行うためにAuth という機能が用意されています。
Auth を使ってみる
$ php artisan make:auth $ php artisan migrate
ユーザー認証
ログインしていない場合
ログインしていない状態で管理画面にアクセスした時にログイン画面にリダイレクトさせていきます。
と言っても、web.php の最後のところに
->middleware('auth');
と付け加えるだけです。
Route::group(['prefix' => ''], function() {
Route::get('todo/create', 'Admin\TodoController@add')->middleware('auth');
});
そうしたらログインしていない状態で todo/create にアクセスしてみましょう。
ログイン画面に飛ばされるはずです。
ログイン画面に飛ばされるのを確認できたら、http://localhost:8000/register にアクセスして新規登録をしてログインしてみましょう！
次は、レイアウトを継承したいので、login.blade.php を以下のように修正しましょう。
@extends('layouts.login_header')
@section('content')
<div class="container">
<div class="login-body">
<h1><img style="width:70px; padding-right:20px;" src="img/calender.png" alt="カレンダー">タスク管理アプリにログイン</h1>
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="form-group row">
<label for="email" class="col-sm-4 col-form-label text-md-right">{{ __('messages.E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required autofocus>
@if ($errors->has('email'))
<span class="invalid-feedback">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('messages.Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>
@if ($errors->has('password'))
<span class="invalid-feedback">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group row mb-0 login-btn-area">
<button type="submit" class="login-btn">
{{ __('messages.Login') }}
</button>
</div>
<div class="form-group row login-btn-area">
<div class="checkbox">
<label>
<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> {{ __('messages.Remember Me') }}
</label>
</div>
</div>
</form>
</div>
</div>
@endsection
ここの冒頭で読み込んでいる layouts.login_header.blade.php を作成していきます。
layouts フォルダに login_header.blade.php という名前のファイルを作成し、以下の内容を記述してください。
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
{{-- 後の章で説明します --}}
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- 各ページごとにtitleタグを入れるために@yieldで空けておきます。 --}}
<title>@yield('title')</title>
<!-- Scripts -->
{{-- Laravel標準で用意されているJavascriptを読み込みます --}}
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<!-- Styles -->
{{-- Laravel標準で用意されているCSSを読み込みます --}}
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
{{-- この章の後半で作成するCSSを読み込みます --}}
<link href="{{ asset('css/admin.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
{{-- コンテンツをここに入れるため、@yieldで空けておきます。 --}}
@yield('content')
</main>
</div>
</body>
</html>
上で読み込んでいる admin.css を作ります。
public/css 配下に admin.css とい名前のcssファイルを作成し、以下の内容で記述して下さい。
body {
background-repeat: no-repeat;
background-position: center;
color:#74758b;
}
div.container{
min-width:1000px;
}
.navbar-laravel {
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.navbar-brand {
color: #74758b !important;
}
.nav-link {
color: #74758b !important;
}
.table-dark {
color: #74758b;
}
.list-group-item {
border-color: #fff;
background-color: #000;
}
div.container h2{
margin:30px 0 50px 0;
}
div.search{
float: left;
}
div.search-box input[type="text"]{
width: 300px;
}
ul.sort{
list-style: none;
float: right;
}
ul.sort li{
float: left;
}
ul.sort li a{
display: inline-block;
background-color: #eaeaea;
margin-left: 20px;
padding: 7px 13px;
color: #74758b;
text-decoration: none;
border-radius: 3px;
}
ul.sort li a:hover{
color:#cecece;
transition: color 0.3s ease 0s;
}
.search-btn{
color: #74758b;
background-color: #eaeaea;
border: none;
border-radius: 3px;
width: 90px;
height: 30px;
margin-left: 10px;
}
.search-btn:hover{
color:#cecece;
transition: color 0.3s ease 0s;
}
.update-btn{
color: #74758b;
background-color: #eaeaea;
border: none;
border-radius: 3px;
width: 90px;
height: 30px;
margin: 20px 0 0 305px;
}
.update-btn:hover{
color:#cecece;
transition: color 0.3s ease 0s;
}
.create-btn{
color: #74758b;
background-color: #eaeaea;
border: none;
border-radius: 3px;
width: 90px;
height: 30px;
margin: 20px 0 0 305px;
}
.create-btn:hover{
color:#cecece;
transition: color 0.3s ease 0s;
}
div.login-body {
padding-top: 40px;
}
div.login-body>h1{
text-align: center;
padding: 30px 0;
font-size: 1.8em;
}
button.login-btn{
background-color:#74758b;
color: white;
width: 300px;
height: 50px;
font-size: 1.25em;
border-radius: 5px;
margin: 30px 0 10px 0;
}
button.login-btn:hover{
background-color:#2dadff;
transition: background-color 0.3s ease 0s;
}
div.login-btn-area{
padding-right: 20px;
text-align: center;
display: block;
}
div.container a.navbar-brand{
padding-right:50px;
}
div.list-header{
margin-bottom: 20px;
}
div.container a.head-list{
color:#74758b;
padding: 0 20px;
}
div.container a.head-list:after{
padding-left:10px;
content: ">";
}
div.container a.head-list:hover{
color:#cecece;
text-decoration: none;
transition: color 0.3s ease 0s;
}
.deadline-todo {
background-color: #a2e1ff;
}
.priority-todo {
background-color: #ffcbcb;
}
a.mod-btn{
text-decoration: none;
}
a.mod-btn:hover{
color:#b6deff;
}
table.todo-list a{
display: inline-block;
float: left;
margin: 0 5px;
}
もう一度ログインしてこんな感じになったらOKです！
現在、ログイン画面が英語でメッセージが出ているので、これを日本語表示にしていきましょう。
まずは config/app.php ファイルの修正です。
'locale' => 'en', ↓変更 'locale' => 'ja',
次に resources/lang の配下に ja という名前のディレクトリを作成します。
mkdir resources/lang/ja/
ja配下にlanguages.php という名前のファイルを作成します。
touch resources/lang/ja/languages.php
languages.php の内容を以下のように記述します。
<?php
return [
'Login' => 'ログイン',
'E-Mail Address' => 'メールアドレス',
'Password' => 'パスワード',
'Remember Me' => 'ログイン情報を記憶する',
];
php artisan config:cache
先ほど記載した languages.php ファイルから読み出せるように ヘルパ関数を編集します。
resources/views/auth/login.blade.phpで、{{ _(‘ ◯◯ ‘) }}のところを{{ _(‘ languages.◯◯ ‘) }}に変更しましょう！
例）{{ _(‘Login’) }} → {{ _(‘languages.Login’) }}
サーバーを起動して再度アクセスしてみてください。
日本語で表示されていたらOKです。
多言語対応について、より詳しい説明は以下のサイトを参照してください。
https://readouble.com/laravel/5.4/ja/localization.html
突然登場した route関数について
<form method="POST" action="{{ route('login') }}">
route関数はURL の生成やリダイレクトを行う関数です
今回は /login という URL を生成しています。
CSRFトークンとは
次に@csrfは何をしているかですが、
これは、認証済みのユーザーがリクエストを送信しているのかを確認するために利用します。
アプリケーションでHTMLフォームを定義する場合は常に、CSRF保護ミドルウェアがリクエストを検証できるように、
隠しCSRFトークンフィールドをそのフォームへ含める必要があります。このトークンを生成するのが@csrf になります。
form を生成する際に必ず付けておく呪文的な存在です。
詳しく知りたい方は以下のサイトが参考になるかと思います！
https://readouble.com/laravel/5.6/ja/csrf.html
