PHP WEB上級コース
つぶやきアプリの作成 > ログイン機能の作成

ログイン画面の作成

目次
  • 解説
  • 1. 認証機能を有効化する
  • 2. ログイン画面の作成
  • 3. cssの適用
  • 4. ソース管理
進捗を変更する


このページは無料で始められるオンラインプログラミング学習サービス「DigSkill」の一般公開ページです。
この前後のページを見たい方や学習内容に興味を持たれた方は、こちらをクリックしてコース一覧をご覧ください！


解説

1. 認証機能を有効化する

プロジェクトの実行方法

それではつぶやきアプリを作成していきます。まずはおさらいとして、プロジェクトの実行方法を確認しておきましょう。

手順1

(1) 『環境設定』コース内の『Docker > Apache_PHP > PHPの起動・停止手順』を参考に、「apach_php_app_1」コンテナが起動していることを確認してください。
(2) 『環境設定』コース内の『Docker > PostgreSQL > DBの起動・停止手順』を参考に、 「db_postgres_1」コンテナと「db_pgadmin_1」コンテナが起動していることを確認してください。
(3) ブラウザから「http://localhost/」にアクセスすると、「tweet_laravel」プロジェクトの画面が表示されます。
(4)デスクトップ上の「digskill」>「workspace_php」>「tweet_laravel」フォルダーをVSCodeで開いてください。開発は「tweet_laravel」フォルダー内にプログラムを追加していきます。

デフォルトの認証機能を有効化する

Laravelは「ユーザー登録」や「ログイン機能」など、認証に関する機能を最初から用意してくれています。次の手順でデフォルトの認証機能を有効化しましょう。

手順2

(1)「routes」フォルダー内の「web.php」ファイルを開いてください。
(2)下記のコードを、「web.php」ファイルの最後の行に追記してください。
// Laravelの認証機能を有効化します。
Auth::routes();

この一行のコードを追記するだけで、laravelが用意してくれている認証機能を有効化することができます。

ブラウザから「http://localhost/」にアクセスすると、画面右上にLOGIN画面へのリンクと、REGISTER（登録という意味）画面へのリンクが追加されていることが確認できます。

試しに追加されたログイン画面へのリンクをクリックしてみましょう。すると、URL「http://localhost/login」に遷移しますが、「ログイン画面が見つかりません」という内容のエラーメッセージが表示されます。

エラーメッセージを確認したら、ブラウザの戻るボタンで元の画面に戻ってください。次の手順でアプリケーションのログイン画面を作成していきましょう。

2. ログイン画面の作成

Laravelでは、ブラウザに表示される画面を「resources > views」フォルダー内に作成します。アプリケーション起動時に表示される画面は、「views」フォルダー内の「welcome.blade.php」ファイルの内容が表示されていました。

Laravelがデフォルトで用意しているログイン機能は、「views > auth」フォルダー内の「login.blade.php」という名前のファイルを参照する仕様となっているので、ログイン画面用のファイルを新規で作成しましょう。

手順3

(1)「resources > views」フォルダー内に「auth」フォルダーを作成し、その中に「login.blade.php」ファイルを作成してください。
(2)作成した「login.blade.php」を下記のコードで置き換えてください。
<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>login</title>
    </head>
    <body>
        <header>
            <div class="container">
                <div class="flex_parent">
                    <div class="logo">
                        <a href="/">DigTweet
                        </a>
                    </div>
                </div>
            </div>
        </header>
        <main>
            <div class="section_inner">
                <div class="container">
                    <h1>ログイン</h1>
                    {{-- Laravelの認証機能でログインするには、「/login」に対してPOST通信で、
                        「name="email"」、「name="password"」のデータを送信します。 --}}
                    <form class="login_form" action="/login" method="POST">
                        {{-- Laravelでは、formでデータを送る場合、「@csrf」を記述して
                            CSRF（クロスサイト・リクエスト・フォージェリ）対策をする必要があります。 --}}
                        @csrf
                        <label for="email">email：</label>
                        <input id="email" type="email" name="email">
                        <p></p>
                        <label for="password">password：</label>
                        <input id="password" type="password" name="password">
                        <p></p>
                        <button type="submit">ログイン</button>
                    </form>
                </div>
            </div>
        </main>
        <footer class="flex_parent">
            <p><small>&copy;2021 Dig Skill</small></p>
        </footer>
    </body>
</html>

再びブラウザから「http://localhost/」にアクセスし、画面右上の「LOGIN」リンクをクリックしてみましょう。すると、先ほど作成した「login.blade.php」ファイルの内容が表示されます。

3. cssの適用

『PHP WEB中級』コースでは、学習の為、途中までCSSを適用させずに開発していましたが、今回は最初からCSSを適用した状態でつぶやきアプリを作成していきましょう。

CSSファイルは「public」フォルダー内に配置します。

手順4

(1)「public」フォルダー内に「css」フォルダーを作成し、その中に「style.css」ファイルを作成してください。
(2)作成した「style.css」を下記のコードで置き換えてください。
@charset "utf-8";

* {
    box-sizing: border-box;
}

body {
    min-width: 320px;
    /* フッター固定対策 */
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

body,
textarea {
    font-family: "メイリオ", arial, helvetica, sans-serif;
}

body,
p {
    margin: 0;
}

a {
    text-decoration: none;
}

a:visited {
    color: #0000EE;
}

.section_inner {
    padding: 40px 0;
}

.container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1em;
}

.container.width_narrow {
    max-width: 720px;
}

.flex_parent {
    display: flex;
}

.small_text {
    font-size: 0.8em;
}

/* ====== header ====== */

header {
    background-color: #eee;
}

header div.container div.flex_parent {
    justify-content: space-between;
    align-items: center;
}

ul {
    list-style: none;
    padding: 0;
}

header div.container div.flex_parent nav ul li {
    display: inline-block;
    margin-left: 1em;
}

header div.container div.flex_parent form button {
    height: initial;
    color: #0000EE;
    font-size: 16px;
    border: none;
}

header div.container div.flex_parent form button:active {
    color: #ff0000;
}

header div.container div.flex_parent form button:hover {
    cursor: pointer;
}

header div.container p {
    text-align: right;
}

header div.container p span.user_name {
    font-weight: bold;
}

header div.container div.flex_parent div.logo a {
    font-size: 1.4em;
    color: #333;
}

/* ====== end/header ====== */

/* ====== footer ====== */

footer {
    background: #333;
    color: #fff;
    margin-top: auto;
    /* フッター固定対策 */
    padding: 0.5em;
    justify-content: center;
    align-items: center;
}

/* ====== end/footer ====== */

div.container>h1 {
    text-align: center;
}

form input,
form textarea {
    box-sizing: border-box;
    width: 100%;
}

form input,
form button {
    height: 3em;
}

form.tweet_form {
    text-align: center;
    margin-bottom: 2em;
}

form.tweet_form input {
    width: 70%;
    max-width: 30em;
}

div.date_break_box {
    text-align: center;
    color: #666;
}

div.tweet_box {
    margin: 2em 0;
}

div.tweet_box.login_user {
    flex-direction: row-reverse;
}

div.tweet_box div.tweet_user_box {
    margin: 0 1em;
    text-align: center;
    font-weight: bold;
}

div.user_icon {
    background-color: skyblue;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    font-size: 1.4em;
    border-radius: 50%;
}

div.tweet_box.login_user div.user_icon {
    background-color: lightsalmon;
}

div.tweet_box div.tweet_text_box {
    border-radius: 8px;
    background-color: #eee;
    padding: 1em;

}

div.tweet_box.login_user div.tweet_text_box {
    background-color: #ddd;
}

div.tweet_box div.tweet_text_box p.tweet_text {
    word-break: break-all;
}

div.tweet_box div.tweet_text_box p.tweet_date {
    margin-top: 0.6em;
    text-align: right;
}

/* ====== auth ====== */

form.login_form,
form.register_form {
    max-width: 300px;
    margin: 0 auto;
    margin-bottom: 2em;
}

form.register_form p,
form.login_form p {
    color: red;
    font-weight: bold;
    min-height: 1.5em;
}

form.login_form button,
form.register_form button {
    width: 100%;
    margin-top: 0.5em;
}

form.register_form label span {
    font-size: 0.6em;
    color: #c44;
    background-color: #fff;
    border-radius: 4px;
    padding: 0px 6px;
    margin-bottom: 0.5em;
    border: solid #c44 1px;
}

/* ====== end/auth ====== */

/* ====== home ====== */

div.tweet_box div.dammy_box {
    min-width: 60px;
    margin: 0 1em;
}

/* ====== end/home ====== */

/* ====== mypage ====== */

div.profile_box {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    padding: 1em;
    border: dashed #666 2px;
    background-color: #fafafa;
}

div.profile_box div.flex_parent {
    position: relative;
}

div.login_user_box {
    margin-right: 1em;
    font-weight: bold;
}

div.profile_box div.flex_parent button {
    position: absolute;
    top: 0;
    right: 0;
}

div.login_user_info.flex_parent {
    justify-content: center;
    flex-direction: column;
    font-weight: bold;
}

div.tweet_box div.tweet_text_box button {
    height: 2em;
}

div.tweet_box div.tweet_text_box button.edit_button {
    color: royalblue;
}

div.tweet_box div.tweet_text_box form.delete_form {
    display: inline-block;
}

div.tweet_box div.tweet_text_box form.delete_form button {
    color: red;
}

/* ====== end/mypage ====== */

/* ====== edit ====== */

p.edit_tweet_date {
    text-align: center;
}

/* ====== end/edit ====== */

CSSを読み込む

「public」フォルダーに作成した「style.css」ファイルを、「login.blade.php」ファイルに読み込みましょう。

「public」フォルダーに配置したファイルのパスは、asset()というヘルパー関数を利用して取得することができます。

構文：asset() ヘルパー関数

構文

asset('publicフォルダー内の参照したいファイルパス')

使用例

<link rel="stylesheet" href="{{ asset('css/style.css') }}">

※blade.phpファイルでphpのコードを出力する場合、「{{ 出力したい値 }}」とします。
二重波括弧でくくることで、「<?= htmlspecialchars( ～ ); ?>」と同じ処理となり、HTMLにおいて特殊な意味を持つ文字をエスケープして出力することができます。

生成されるコード

<link rel="stylesheet" href="http://localhost/css/style.css">

コラム
ヘルパー関数とは

ヘルパー関数とは、Laravelがデフォルトで用意している便利な関数のことです。詳しい仕様や、どのようなヘルパー関数があるかを調べたい場合は、Laravelの公式リファレンスを日本語訳している下記のサイトを確認してみましょう。

https://readouble.com/laravel/6.x/ja/helpers.html

手順5

(1)「views > auth」フォルダー内の、「login.blade.php」ファイルにlinkタグを追記して、「public」フォルダー内に作成した「css/style.css」ファイルを読み込んでください。
<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>login</title>
        {{-- asset() はpublicフォルダー内のファイルパスを取得します。 --}}
        <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    </head>

ブラウザから「http://localhost/login」にアクセスし、ログイン画面にcssが適用されていることを確認しましょう。

ログイン画面

4. ソース管理

ここで一度、Sourcetreeからコミット・プッシュを実行しておきましょう。

手順6

(1)Sourcetreeを起動し、サイドメニューから「ファイルステータス」画面を開き、「全てインデックスに追加」ボタンをクリックしてステージングしてください。
(2)コミットメッセージは各ページのタイトル（ログイン画面の作成など）とし、コミット・プッシュを実行してください。

以降は各ページの学習ごとに、上記の手順を参考に、追加したコードをコミット・プッシュしてGitで管理しましょう！