ログインページを作る

管理ページの入り口を作る

前回はひと言掲示板の管理ページについて、ファイル構成や実装する機能とベースになるファイル「admin.php」を作成しました。
今回はこのベースファイルを使ってログインページを作成します。

「ひと言掲示板を作る」の概要については「ひと言掲示板を作る」をご覧ください。
デモはこちら

前回までに作成したコードはこちら：Github

ログインフォームを表示する

まずはログインしていないと書き込みの一覧が表示されないようにしていきます。
「admin.php」を開いて、ログインセッションを確認するif文を追記してください。

admin.php

<h1>ひと言掲示板 管理ページ</h1>
<?php if( !empty($error_message) ): ?>
    <ul class="error_message">
		<?php foreach( $error_message as $value ): ?>
            <li>・<?php echo $value; ?></li>
		<?php endforeach; ?>
    </ul>
<?php endif; ?>
<section>

<?php if( !empty($_SESSION['admin_login']) && $_SESSION['admin_login'] === true ): ?>

<?php if( !empty($message_array) ){ ?>
<?php foreach( $message_array as $value ){ ?>
<article>
    <div class="info">
        <h2><?php echo htmlspecialchars($value['view_name'], ENT_QUOTES, 'UTF-8'); ?></h2>
        <time><?php echo date('Y年m月d日 H:i', strtotime($value['post_date'])); ?></time>
    </div>
    <p><?php echo nl2br( htmlspecialchars( $value['message'], ENT_QUOTES, 'UTF-8') ); ?></p>
</article>
<?php } ?>
<?php } ?>

<?php else: ?>

// ここにログインフォームが入る

<?php endif; ?>
</section>
</body>
</html>

ログインセッションは$_SESSION['admin_login']に入るようにし、if文でこのセッションに「true」が入っているかを確認しています。
それ以外の値が入っていたり、セッション自体が存在しない場合はログインしていない状態としてelse文の方に入りログインページを表示するような仕組みです。

まだログインするための機能を用意していないので、今の状態で「admin.php」にアクセスすると次のように何も表示されなくなります。

続いて、else文の中にログインするためのフォームを用意しましょう。
次のコードを追記してください。

admin.php

---- 省略 ----

<?php else: ?>

<form method="post">
    <div>
        <label for="admin_password">ログインパスワード</label>
        <input id="admin_password" type="password" name="admin_password" value="">
    </div>
    <input type="submit" name="btn_submit" value="ログイン">
</form>
<?php endif; ?>

---- 省略 ----

パスワードの入力欄なので、input要素のtype属性を「password」にしています。
文言は「ログインパスワード」や「ログイン」などが入りますが、基本的なフォームの構造はひと言メッセージの入力欄と同様です。

続いて、CSSも少し修正します。
次のように「入力エリア」のCSSに赤字のコードを追記してください。

admin.php

---- 省略 ----

/*-----------------------------------
入力エリア
-----------------------------------*/

label {
    display: block;
    margin-bottom: 7px;
    font-size: 86%;
}

input[type="text"],
input[type="password"],
textarea {
	margin-bottom: 20px;
	padding: 10px;
	font-size: 86%;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
}

input[type="text"],
input[type="password"] {
	width: 200px;
}
textarea {
	width: 50%;
	max-width: 50%;
	height: 70px;
}

---- 省略 ----

ここまでで、一旦「admin.php」を読み込んでみてください。
冒頭のようなログインフォームが表示されたと思います。

ログインパスワードを設定

フォームができたところで、続いてはログインセッションを作成する処理に入っていきます。
ただその前に、まずはログインパスワードを決めてしまいましょう。

今回は機構をシンプルにするため、ログインパスワードは定数で用意します。

admin.php

<?php

// 管理ページのログインパスワード
define( 'PASSWORD', 'adminPassword');

// データベースの接続情報
define( 'DB_HOST', 'localhost');
define( 'DB_USER', 'root');
define( 'DB_PASS', 'password');
define( 'DB_NAME', 'board');

---- 省略 ----

入力したパスワードがこの定数PASSWORDと一致した場合にのみ、ログインできるようにしていきます。

ログイン判定

続いて、前回コードを削除したif文の中にログイン判定のコードを追記していきます。
赤字のコードを追記してください。

admin.php

<?php

---- 省略 ----

// データベースに接続
try {

    $option = array(
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::MYSQL_ATTR_MULTI_STATEMENTS => false
    );
    $pdo = new PDO('mysql:charset=UTF8;dbname='.DB_NAME.';host='.DB_HOST , DB_USER, DB_PASS, $option);

} catch(PDOException $e) {

    // 接続エラーのときエラー内容を取得する
    $error_message[] = $e->getMessage();
}

if( !empty($_POST['btn_submit']) ) {

	if( !empty($_POST['admin_password']) && $_POST['admin_password'] === PASSWORD ) {
		$_SESSION['admin_login'] = true;
	} else {
		$error_message[] = 'ログインに失敗しました。';
	}
}

if( !empty($pdo) ) {

    // メッセージのデータを取得する
    $sql = "SELECT view_name,message,post_date FROM message ORDER BY post_date DESC";
    $message_array = $pdo->query($sql);
}

---- 省略 ----

追記1行目のif文の条件式では、パスワードの未入力チェックと正しいパスワードが入力されているかを確認しています。
いずれも問題ないときのみ、if文の中でログインセッション$_SESSION['admin_login']を作成して値にtrueを設定します。

反対にパスワードが未入力だったり、先ほど定数に設定したパスワードと一致しない場合は、ひと言メッセージの投稿で使ったバリデーションと同様にエラーメッセージを設定します。

ここまでで「admin.php」にアクセスし、ログインパスワードを入力してログインしてみてください。
もし正しくないパスワードを入力すると、次のようにエラーメッセージが表示されます。

正しいパスワードを入力してログインに成功すると掲示板の投稿メッセージが表示されます。

ログイン機能を実装することができました。
次回は今まで投稿されたひと言メッセージのデータをCSV形式でダウンロードする機能を実装します。

今回作成したコード：Github