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

2022年09月10日

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

前回簡単にできると聞いていたからすごく駆け足でやってしまったのですが、コマンド実行の際にログイン処理の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()) }}">

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

<!-- 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と深い関係があるみたいです。

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

お知らせ

株式会社プラン・ドゥでは展示会の設営や販促品やホームページなど販促に関わるサービスの販売を行なっております。
展示会などでのノベルティなど豊富に取り揃えております。

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

同じカテゴリの記事

関連記事

スポンサーリンク

DTP

Laravel開発

wordpressカスタマイズ

デジタルマーケティング

ライフハック

動画

当社製品について

Contact各種お問い合わせ

お問い合わせ・ご相談など
まずはお気軽にご相談ください

お仕事のご依頼やご相談、弊社サービス内容に関してなど、お気軽にご相談ください。

トップページ コラム 各種お問い合わせ プライバシーポリシー