PHPプログラミング

ワークショップ

ひと言掲示板を作る(16)

ログインページを作る

「ひと言掲示板」の管理ページについて、運営者がログインする機能をつけます。

この記事のポイント

  • フォームの構造は掲示板のメッセージ投稿と同じ
  • ログインセッションの有無で表示を切り替える

目次

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

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

作成するログインページ

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

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

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

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

コード例

<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 $value['view_name']; ?></h2>
        <time><?php echo date('Y年m月d日 H:i', strtotime($value['post_date'])); ?></time>
    </div>
    <p><?php echo $value['message']; ?></p>
</article>
<?php } ?>
<?php } ?>

<?php else: ?>

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

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

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

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

まだ何も表示されない

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

コード例


-- 省略 --

<?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に赤字のコードを追記してください。

コード例


-- 省略 --

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

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」を読み込んでみてください。
冒頭のようなログインフォームが表示されたと思います。

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

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

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

コード例

<?php

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

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

-- 省略 --

この定数PASSWORDと一致した場合にのみ、ログインできるようにしていきます。

ログイン判定

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

コード例

<?php

-- 省略 --

session_start();

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

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

// データベースに接続
$mysqli = new mysqli( DB_HOST, DB_USER, DB_PASS, DB_NAME);

-- 省略 --

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

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

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

ログインに失敗した時の表示例

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

ログインが成功した時の表示例

今回はログインの機能を実装してきました。
次回は、投稿データをCSV形式でダウンロードする機能を実装します。

今回作成したコード:Github

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。