PHPとMySQLを使った掲示板の作り方を初心者向けにコード付き解説4【確認画面】

PHPとMySQLを使って掲示板サイトを作ってみる講座、4回目です。

今回は、フォーム送信後の確認画面の作り方を解説します。

次のような確認画面を作ります。

「どんな掲示板ができるのかな。」と思ったら、下記の紹介動画をクリックしてくださいね。

↓↓↓

なお記事では掲示板に必要なコードはご紹介しますが、デザイン部分は省略しています。

デザイン部分も含めた形で、GitHubにコード公開しています。全体のコードを見たい時に、参考にしてください。

GitHubを見てみる

いいなと思ったら、GitHub右上のStarボタン、クリックしてもらえると、嬉しいです。

前回までの内容
会員登録フォーム投稿後の確認画面を作成する
テスト
さいごに

前回までの内容

掲示板作成の7ステップの目次と概要はこちらをご覧ください。

会員登録フォーム投稿後の確認画面を作成する

では確認画面を作っていきましょう。

まずはC:\xampp\htdocs\register.phpに下記コードを追加します。

【C:\xampp\htdocs\forum\register.php】

    if (($_POST['password'] != $_POST['password2']) && ($_POST['password2'] != "")) {
        $error['password2'] = 'difference';
    }

    // 追加：送信後の処理（次回解説します）
    if (empty($error)) {
        $_SESSION['join'] = $_POST;
        header('Location: confirm.php');
        exit();
    }

if (($_POST['password'] != $_POST['password2']) && ($_POST['password2'] != "")) {

$error['password2'] = 'difference';

}

// 追加：送信後の処理（次回解説します）

if (empty($error)) {

$_SESSION['join'] = $_POST;

header('Location: confirm.php');

exit();

}

これによって、フォーム送信後にconfirm.phpファイルに処理が受け渡されます。

次に、このconfirm.phpを作っていきましょう。C:\xampp\htdocs\forumの中に、confirm.phpファイルを作成します。この中に、下記コードを追加します。

【C:\xampp\htdocs\forum\confirm.php】

<?php
session_start();
require('dbconnect.php');
// ★ポイント1★
if (!isset($_SESSION['join'])) {
    header ('Location: register.php');
    exit();
}
// ★ポイント2★
$hash = password_hash($_SESSION['join']['password'], PASSWORD_BCRYPT);
// ★ポイント3★
if (!empty($_POST)) {
    $statement = $db->prepare('INSERT INTO members SET name=?, email=?, password=?, created=NOW()');
    $statement->execute(array(
        $_SESSION['join']['name'],
        $_SESSION['join']['email'],
        $hash));
    unset($_SESSION['join']);
    header('Location: login.php');
    exit();
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
	<title>ユーザ登録確認画面</title>
</head>
<body>
	<h1>ユーザ登録確認画面</h1>
	<form action="" method="post">

		<input type="hidden" name="action" value="submit">
		<!-- ★ポイント4★ -->
		<p>
			名前
			<span class="check"><?php echo (htmlspecialchars($_SESSION['join']['name'], ENT_QUOTES)); ?></span>
		</p>
		<p>
			email
			<span class="check"><?php echo (htmlspecialchars($_SESSION['join']['email'], ENT_QUOTES)); ?></span>
		</p>
		<p>
			パスワード
			<span class="check">[セキュリティのため非表示] </span>
		</p>
		<!-- ★ポイント5★ -->
		<input type="button" onclick="event.preventDefault();location.href='register.php?action=rewrite'" value="修正する" name="rewrite" class="button02">
		<input type="submit" value="登録する" name="registration" class="button">
	</form>
</body>
</html>

<?php

session_start();

require('dbconnect.php');

// ★ポイント1★

if (!isset($_SESSION['join'])) {

header ('Location: register.php');

exit();

}

// ★ポイント2★

$hash = password_hash($_SESSION['join']['password'], PASSWORD_BCRYPT);

// ★ポイント3★

if (!empty($_POST)) {

$statement = $db->prepare('INSERT INTO members SET name=?, email=?, password=?, created=NOW()');

$statement->execute(array(

$_SESSION['join']['name'],

$_SESSION['join']['email'],

$hash));

unset($_SESSION['join']);

header('Location: login.php');

exit();

}

<!DOCTYPE html>

<head>

<title>ユーザ登録確認画面</title>

</head>

<body>

<h1>ユーザ登録確認画面</h1>

<p>

名前

</p>

<p>

</p>

<p>

パスワード

<span class="check">[セキュリティのため非表示] </span>

</p>

</form>

</body>

</html>

★ポイント★ごとにコードの組み方を解説していきます。

ポイント① セッション情報を設定する

ポイント①の部分は、前回からのセッション情報があるかどうかをチェックしています。

// ★ポイント1★
if (!isset($_SESSION['join'])) {
    header ('Location: register.php');
    exit();
}

// ★ポイント1★

if (!isset($_SESSION['join'])) {

header ('Location: register.php');

exit();

}

「もし$_SESSION[‘join’]がなければ、register.phpに戻ってね。このページは終わりにしてね。」という命令文になります。

【isset()】は、カッコ内の値があるかどうかを確認する関数です。

【Location】の後は、前のページのURLなどを設定しておきましょう。

最初にエクスクラメーションマーク【！】をつけると、「～がなければ」という意味になります。これも覚えておくと便利ですよ。

ポイント② パスワードをセキュアにする

入力したパスワードをpassword_hashで変換し、【$hash】変数に格納しておきます。

// ★ポイント2★
$hash = password_hash($_SESSION['join']['password'], PASSWORD_BCRYPT);

1 2	// ★ポイント2★ $hash = password_hash($_SESSION['join']['password'], PASSWORD_BCRYPT);

この$hashをデータベース登録します。ポイント③で説明していきます。

なおパスワードは、以前は【sha1】で暗号化していました。

ですがsha1は同じパスワードを打てば毎回同じ値に変換されてしまい、脆弱性が指摘されてきました。

そのため最近では、あまり使われなくなっています。

今回は、password_hash という関数を使ってハッシュ化しました。password_hashを使うと、同じパスワードを入力しても、違う値に変換されます。

password_hash パスワードをハッシュ化

ポイント③ 入力されたデータを登録する

入力されたデータを、データベースに登録するには、次のように記述します。

// ★ポイント3★
if (!empty($_POST)) {
    $statement = $db->prepare('INSERT INTO members SET name=?, email=?, password=?, created=NOW()');
    $statement->execute(array(
        $_SESSION['join']['name'],
        $_SESSION['join']['email'],
        $hash));
    unset($_SESSION['join']);
    header('Location: login.php');
    exit();
}

// ★ポイント3★

if (!empty($_POST)) {

$statement = $db->prepare('INSERT INTO members SET name=?, email=?, password=?, created=NOW()');

$statement->execute(array(

$_SESSION['join']['name'],

$_SESSION['join']['email'],

$hash));

unset($_SESSION['join']);

header('Location: login.php');

exit();

}

$statementの部分は、「$_POSTの値が空でなければ、membersテーブルに、【name】【email】【password】の値を挿入する準備をしてね。時間は今現在のものを挿入してね。」という意味になります。

その後、array関数を使いつつ、挿入する値をひとつずつ指定しています。

ポイント②で解説した変数 $hash は、そのままの形でいれていきます。

ポイント④ 入力された値を表示させる

ポイント④からは、bodyタグ以降の部分です。

ここでは、htmlspecialchars関数を使っています。

<!-- ★ポイント4★ -->
<p>
    名前
    <span class="check"><?php echo (htmlspecialchars($_SESSION['join']['name'], ENT_QUOTES)); ?></span>
</p>

<p>

名前

</p>

「$_SESSION[‘join’][‘name’]の値を表示してね」という意味になります。

htmlspecialchars関数が入っていますが、これはセキュリティ対策のために行っています。

こう書くことで、【<】や【>】といったカッコをコードではなく文字列として処理してくれます。

これによって、悪意あるユーザーがフォームの中にへんなコードを入力しても、このコードが実行されることを防げるのです。

書き方としては次のようにします。

htmlspecialchars (変換対象, ENT_QUOTES)

この関数をつけないと、どんなリスクがあるかは、PHPのセキュリティリスクを解説した記事で説明しています。

webサイトセキュリティでPHP初心者でも知っておくべきリスクと対策

PHPでWebサイトを作るなら、セキュリティに関する4つのリスクと対策が必要になります。「セキュリティってよくわからないなぁ。」 40歳でプログラミングを学びはじめた私は、こんなふうに感じていました。ただ、自分が作った...

なおパスワードについては、セキュリティ上の理由から、あえて表示させないほうが一般的なので、今回は、次のようにしておきました。

    <p>パスワード
    <span class="check">[セキュリティのため非表示] </span>
   </p><br />

<p>パスワード

<span class="check">[セキュリティのため非表示] </span>

</p><br />

Webアプリは攻撃されやすいだけに、セキュリティが非常に大事です。

色々対策をしていきましょう。

ポイント⑤ 前のページに戻れる設定をする

最後のポイントは、登録フォームに戻るための設定です。

次のように記述してボタンを設置します。

<!-- ★ポイント5★ -->
<input type="button" onclick="event.preventDefault();location.href='register.php?action=rewrite'" value="修正する" name="rewrite" class="button02">
<input type="submit" value="登録する" name="registration" class="button">

確認画面に、下記のように【修正する】【登録する】のボタンを設置できます。

修正するをクリックすると、register.php?action=rewriteに処理が受け渡されます。registration.phpファイルに下記コードを加えておきましょう。

【C:\xampp\htdocs\forum\registration.php】

// 追加：セッションに保存しておいたPOSTデータを取り出す
if (isset($_SESSION['join']) && isset($_REQUEST['action']) && ($_REQUEST['action'] == 'rewrite')) {
    $_POST =$_SESSION['join'];
}
?>
<!DOCTYPE html>

// 追加：セッションに保存しておいたPOSTデータを取り出す

if (isset($_SESSION['join']) && isset($_REQUEST['action']) && ($_REQUEST['action'] == 'rewrite')) {

$_POST =$_SESSION['join'];

}

<!DOCTYPE html>

これによって、修正するボタンをおした時に、これまで入力していた値が入った状態で登録フォームが表示されます。

もしこのコードがなければ、ユーザーはもう一度、いちから名前等の情報を入力しなければいけません。手間が増えてしまいますよね。そうならないようにコードを入れました。