PHPでフレームワークを使わずに掲示板アプリを作成してみる② 会員登録編

はじめに

※自身の学習を記事に投稿することでアウトプットするのが目的です。
「よくわかるPHPの教科書」のchapter6に書いてある通りにアプリを
作成していくので、私と同じような駆け出しエンジニアの皆さんは、
書籍を買ってアプリを作っていただいた方がわかりやすいかもしれません。

使用しているエディタ、実行環境

• VS Code

• XAMPP

• PHP7

• windows

登録画面のHTMLを作成する

<p>次のフォームに必要事項を入力してください</p>
<form action="" method="post" enctype="multipart/form-data">
	<dl>
		<dt>ニックネーム<span class="required">必須</span></dt>
		<dd><input type="text" name="name" size="35" maxlength="255"/></dd>

		<dt>メールアドレス<span class="required">必須</span></dt>
		<dd><input type="text" name="email" size="35" maxlength="255"/></dd>

		<dt>パスワード<span class="required">必須</span></dt>
		<dd><input type="text" name="password" size="10" maxlength="20"/></dd>

		<dt>写真など</dt>
		<dd><input type="file" name="image" size="35"/></dd>

    </dl>
	<div><input type="submit" value="入力内容を確認する" /></div>

</form>

form action=""

action属性を空にしていますが、これは「自分自身に送信する」という意味になります。

enctype="multipart/form-data

ファイルを送信するフォームがある場合（写真やエクセルなどのファイルデータ）はこの属性を必ずformの中に入れてください。

input type="text"

input type="submit"

input type="file"

入力するデータの形式を指定しています。

text=テキスト入力をさせる
submit=formに入力されたデータをサーバサイドのプログラムに送信する
file=画像やエクセルなどのファイルデータを入力させる

index.phpと名前を付けて保存してください

登録後の画面のHTMLを作成する

<form action="" method="post">
	<dl>
		<dt>ニックネーム</dt>
		<dd>
        </dd>
		<dt>メールアドレス</dt>
		<dd>
        </dd>
		<dt>パスワード</dt>
		<dd>
			【表示されません】
        </dd> 
		<dt>写真など</dt>
		<dd>
        </dd>
    </dl>
	<div><a href="index.php?action=rewrite">&laquo;&nbsp;書き直す</a> 
	| 
	<input type="submit" value="登録する" /></div>

</form>

inde.phpの入力内容を確認するボタンを押すと表示されます。
必要項目を入力した後に、最終確認をしてもらうために必要な画面です。

index.php?action=rewrite

「よくわかるphpの教科書」を読み進めていくと後々この記述の意味が分かるらしいので、とりあえずスルーして進めていきます。
多分、間違い項目を発見して書き直す際、書いた内容を保持したまま前の画面に戻るための物だと思います。

'& laquo; & nbsp;'

この呪文は一体なんだ・・・と思ったら、ただのHTMLの特殊文字らしいです。
«  ←これですね。

check.phpと保存してください

入力画面(index.php)のチェック機能を作成していく。

搭載するチェック機能は下記の三つです。

• ニックネーム、メールアドレス、パスワードが入力されているか
• パスワードが四文字以上
• アップロードされたファイルが画像かどうか

<?php
session_start();

if ( !empty($_POST)){
	//エラー項目の確認
	if ( $_POST['name'] == ''){
		$error['name'] = 'blank';
	}
	if ( $_POST['email'] == ''){
		$error['email'] = 'blank';
	}
	if ( strlen($_POST['password'] < 4)){
		$error['password'] = 'length';
	}
	if ( $_POST['password'] == ''){
		$error['password'] = 'blank';
	}
	if ( empty($error) ){
		$_SESSION['join'] = $_POST;
		header('Location: check.php');
		exit();
	}
}
?>

ニックネーム、パスワード、メールアドレスが入力されているか確認するプログラムです。

session start();

セッション処理開始を開始する関数。php文の冒頭に記述する必要があります。

if (!empty ($_POST)) {

もしフォームが送信された場合、入力された内容をチェックする。

if($_POST['name'] == ''){$error['name] = 'blank};

もしPOSTメソッドで入力されたname変数が空の場合、$error配列のキー[name]に'blank'というエラーメッセージを代入する。

if ( strlen($_POST['password'] < 4)){$error['password'] = 'length';}

もし入力されたパスワードの文字数が四文字以下の場合、$error配列のキー['password']に'length'というエラーメッセージを代入する。
** strlenファンクションで文字数を確認することができる。

if ( empty($error) ){$_SESSION['join'] = $_POST;header('Location: check.php');exit();}

もし$error配列が空の場合、セッションに値を保存して、check.phpの画面に移動する。
** headerファンクションで次の画面に移動することが出来る。

ニックネームチェック機能を作る

<dt>ニックネーム<span class="required">必須</span></dt>
		<dd>
			<input type="text" name="name" size="35" maxlength="255" value="<?php echo htmlspecialchars($_POST['name'],ENT_QUOTES); ?>"/>
			<?php if ( $error['name'] == 'blank'):?>
			<p class = "error">*　ニックネームを入力してください</p>
			<?php endif; ?>

先ほど作ったindex.phpに追加のコードを挿入してください。

これでニックネーム入力欄が空で送信された場合、エラーメッセージが表示されるようになります。

Notice:Undefined,variable:error

こんなエラーメッセージが表示されますが、エラーチェック用の変数に値が入っていないだけなので、今は気にしないでおいてください。

htmlspecialchars

htmlcpacialcharsファンクションはいたずらコードを書き込まれないように、防止する目的でvalueに設定して表示させます。
また、value属性に入力した内容を表示させるようにすれば、チェック画面から入力画面に戻ってきた際に、入力した値を再現することが出来ます。

$error配列のキーの名前を変えて、すべての項目に同じような処理を入れてください。

画像のチェック機能

• アップロードしたファイルの拡張子が.gif　.jpg 　.png　であるかを確認する

	$filename = $_FILES['image']['name'];
	if ( !empty($filename)){
		$ext = substr($filename , -3);
		if ( $ext !='jpg' && $ext !='gif' && $ext !='png'){
			$error['image'] = 'type';
		}

$_FILES['image]['name']

inputで指定した[image]のファイルの名前[name]を抽出して、$filenameに格納しています。

substr($filename , -3);

substrは文字数を数えるファンクションなので、変数filenameに格納されたファイル名の文字数を数え、末尾３文字を抽出して$extに格納します。

画像チェックのエラーメッセージを表示させる

<dt>写真など</dt>
		<dd>
			<input type="file" name="image" size="35"/>
            <?php if ( $error ['image'] == 'type'):?>
			<p class="error"> * 写真などは「.gif」または「.jpg」、「.png」の画像を指定してください。</p>
			<?php endif ; ?>
			<?php if ( !empty($error)):?>
			<p class="error">* 恐れ入りますが、画像を改めて指定してください。</p>
			<?php endif; ?>
		</dd>

index.phpで書いたHTMLに追加で挿入してください

終わりに

これで会員登録画面のプログラムは作成完了です。
substrファンクションを使った文字数の抽出と、画像形式の指定の仕方。
また、配列とキーへ値を格納することで、変数の管理がしやすいことに気づきました。
全体的に難しい印象はなかったですが、とても勉強になりましたね。

追記 2022/04/26

localhostでページを表示させた場合、Noticeエラーが大量に出てしまいますが、
エラーチェック用の変数に値が入っていないのが原因です。

xamppのコントロールパネル
↓
Apache config
↓
php.ini
↓
error_reporting= E_ALL & E_NOTICE
と書き直し、再起動することで、NOTICEエラーメッセージが抑えられます。