Laravelを使ってみよう-8　ログイン画面を作っていく

コマンド実行で増えたファイルの確認

前回簡単にできると聞いていたからすごく駆け足でやってしまったのですが、コマンド実行の際にログイン処理のcontrollerファイルやviewファイルを自動で作ってくれていました。

このへんがそうだと思うのですが自信がない。見たらroutesのディレクトリにも何か増えてました。

ControllerのAuthのフォルダの中は名前で何の処理のファイルかがわかりやすくていいですね。

homeと頭についているものはログイン後のトップ画面のものです。URLの変数変えたら階層深くすることも可能なんだろうか。あまりやりたくないけど。

とりあえず英語のものを日本語に直して遊んでみましょう。

viewファイルを日本語にする

何も考えずにviewファイルを修正すればいいのが便利なところ。今はひとりもユーザーがいないのでまずはregisterというかそもそもwelcomeのページも変えたい？というか最初のページをログインの画面にしたらいいのか。

スタイルシートのフレームワークはbootstrap使ってますね。どうせだしこれも覚えていきましょう。

web.phpを変更する

routesディレクトリのweb.phpの最初の転送先をログインページに変更します。

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

この部分を

Route::get('/', function () {
    return view('auth.login');
});

こう変更するだけ。階層はスラッシュじゃなくてピリオドで区切るんですね。

これでhttp://127.0.0.1:8000/にアクセスすると

authディレクトリのlogin.blade.phpの内容が表示されました。これを変更します。

login.blade.php、app.blade.phpを変更する

@extends('layouts.app')

@section('content')
---省略---

@extendsが普通のphpで言うところのrequireとかincludeにあたる感じですね。ヘッダー部分がlayoutsディレクトリのappのファイルに書かれていました。わかりやすい！なのでこれを編集します。

@sectionは現状よくわからないですね。

いろいろなテンプレートの変数がありますね。今までのことを考えると見たらすぐわかるレベルでとても心穏やか。

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

と言いながら１行目からもうわからない。どこかの設定で国の設定したらそれに合わせるみたいなものなのだろうけど。というかここそんなに大事か？

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

これはなんでしょう。調べるとフォームのセキュリティ用のトークンを発行してるみたいですね。セキュリティ対策なので残しておきます。

<title>{{ config('app.name', 'Laravel') }}</title>

configディレクトリのapp.phpのnameのところから変数拾ってくる命令でしょうか。

実際app.phpの’name’を見てみると環境設定のファイルから引っ張ってくる設定をしていましたのでサイト名は環境設定に入れるみたいです。それはそうかという感じなのですが…

第二引数の’Laravel’は何なんでしょうね？.envのファイルのAPP_NAMEの部分を「日報システム」に変えてみたらちゃんとサイトタイトルの部分が変わりました。

Laravelのif構文

メニュー部分にif構文があります。

<ulclass="navbar-navms-auto">
<!--AuthenticationLinks-->
@guest
@if(Route::has('login'))
<liclass="nav-item">
<aclass="nav-link"href="{{route('login')}}">{{__('Login')}}</a>
</li>
@endif

@if(Route::has('register'))
<liclass="nav-item">
<aclass="nav-link"href="{{route('register')}}">{{__('Register')}}</a>
</li>
@endif
@else
<liclass="nav-itemdropdown">
<aid="navbarDropdown"class="nav-linkdropdown-toggle"href="#"role="button"data-bs-toggle="dropdown"aria-haspopup="true"aria-expanded="false"v-pre>
{{Auth::user()->name}}
</a>

<divclass="dropdown-menudropdown-menu-end"aria-labelledby="navbarDropdown">
<aclass="dropdown-item"href="{{route('logout')}}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{__('Logout')}}
</a>

<formid="logout-form"action="{{route('logout')}}"method="POST"class="d-none">
@csrf
</form>
</div>
</li>
@endguest
</ul>

上のメニューバーがログインしているかどうかで変わるようになっています。@表記だけでカッコがないのですごい読みやすいですね。

ログアウトのフォーム部分に@csrfとあるのはhiddenのフォームにヘッド部分で作成したトークンを入れることで二重投稿になるのを防いでるみたいですね。わかりやすい！

コードが短いからフォーム部分まであるのかと思ったらこれがメニューでした。その下がログインフォームになるみたいですが、

<main class="py-4">
@yield('content')
</main>

これはどこのブロックを持ってきてるんでしょうか。@yieldとは一体…

調べてみると最初にわからないと思ってた@sectionと深い関係があるみたいです。

これは次回深掘りしてみます。

お知らせ

株式会社プラン・ドゥではphpとデータベースを利用したアプリケーション開発を行なっております。
wordpressでのホームページ作成、phpのスクラッチ開発などが可能です。
業務効率化等でお困りのことがございましたら、システムのご提案からさせていただきますのでお気軽にご相談ください。

その他の取扱商品はこちらからご覧いただけます。
https://plando-inc.co.jp/product

お問い合わせはこちら

前の記事へ次の記事へ