PHPプログラミング

最終更新日:
公開日:

ワークショップ

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

投稿に文字数制限を設定する

「ひと言掲示板」に、ひと言メッセージの投稿に最大文字数を設定します。

この記事のポイント

  • 文字数はmb_strlen関数を使ってカウントする
  • 入力された値をHTMLに出力するときはhtmlspecialchars関数でサニタイズする

目次

投稿の文字数を設定する

前回は掲示板への投稿について、ブラウザのリロード(再読み込み)によって多重送信されてしまうのを防ぐ機能を実装しました。
当ワークショップの最終回となる今回は、投稿できるひと言メッセージの文字数を設定していきます。

以下の例はやや極端ですが、最大文字数を10文字に設定して10文字以上の投稿をしようとしたときのブラウザ表示例です。

10文字以上の投稿はエラー

ここで、投稿するメッセージの末尾から「さ」を削除してもう1度投稿してみます。

10文字だと投稿できる

今度はちょうど10文字だったので投稿することができました。
すでに未入力のバリデーションを実装していますが、今回は最大文字数のバリデーションを追加していきます。

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

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

投稿されたメッセージの文字数をカウントする

今回は投稿された「ひと言メッセージ」の文字数を数える必要がありますが、ここではmb_strlen関数を使います。
この関数は第1パラメータに渡した文字列の数を整数(int)で返します。
第2パラメータはオプションで文字コードを指定することができます。

mb_strlen( $message, 'UTF-8');

もし変数$messageに入っている文字列が「testテスト」なら「int(7)」が返り値となり、「testテスト1234567890」の場合は「」が返り値になります。
文字列は半角、全角が混ざっていても大丈夫です。
改行も1文字として扱われます。

最大文字数のバリデーションを実装

文字数のカウント方法がわかったところで、さっそく掲示板に実装していきましょう。
ひと言メッセージの投稿データを入力チェックするif文に、新しくelse文を追加します。
index.php」を開き、以下の赤字のコードを追記してください。

index.php

<?php

-- 省略 --

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

	// 空白除去
	$view_name = preg_replace( '/\A[\p{C}\p{Z}]++|[\p{C}\p{Z}]++\z/u', '', $_POST['view_name']);
	$message = preg_replace( '/\A[\p{C}\p{Z}]++|[\p{C}\p{Z}]++\z/u', '', $_POST['message']);

	// 表示名の入力チェック
	if( empty($view_name) ) {
		$error_message[] = '表示名を入力してください。';
	} else {

		// セッションに表示名を保存
		$_SESSION['view_name'] = $view_name;
	}

	// メッセージの入力チェック
	if( empty($message) ) {
		$error_message[] = 'ひと言メッセージを入力してください。';
	} else {

		// 文字数を確認
		if( 100 < mb_strlen($message, 'UTF-8') ) {
			$error_message[] = 'ひと言メッセージは100文字以内で入力してください。';
		}
	}

	if( empty($error_message) ) {
		
	// 書き込み日時を取得
	$current_date = date("Y-m-d H:i:s");

-- 省略 --

このコードでは最大文字数を「100文字」にしています。
mb_strlen関数の返り値と「100」を比較し、もし$messageに入っている文字列の数が101文字以上だったときはエラーメッセージを設定します。

続いて、エラーがあったときに「ひと言メッセージ」の入力欄にすでに入力したテキストが入るように設定します。
以下の赤字のコードを追記してください。

index.php

-- 省略 --

<form method="post">
	<div>
		<label for="view_name">表示名</label>
		<input id="view_name" type="text" name="view_name" value="<?php if( !empty($_SESSION['view_name']) ){ echo htmlspecialchars( $_SESSION['view_name'], ENT_QUOTES, 'UTF-8'); } ?>">
	</div>
	<div>
		<label for="message">ひと言メッセージ</label>
		<textarea id="message" name="message"><?php if( !empty($message) ){ echo htmlspecialchars( $message, ENT_QUOTES, 'UTF-8'); } ?></textarea>
	</div>
	<input type="submit" name="btn_submit" value="書き込む">
</form>

-- 省略 --

ここまでの編集内容を保存して、ブラウザでひと言メッセージの投稿を試してみてください。

編集ページも最大文字数のバリデーションを実装

ひと言メッセージは「index.php」での新しい投稿の他に、管理者用の編集ページ「edit.php」からも投稿(編集)することができるようになっています。
そこで、編集ページも同じように最大文字数のバリデーションを設定していきます。

edit.php」を開いて、先ほどと同じようにメッセージの入力チェックのif文にelse文を追記する形で、赤字のコードを追記してください。

edit.php

<?php

-- 省略 --

} elseif( !empty($_POST['message_id']) ) {

	// 空白除去
	$view_name = preg_replace( '/\A[\p{C}\p{Z}]++|[\p{C}\p{Z}]++\z/u', '', $_POST['view_name']);
	$message = preg_replace( '/\A[\p{C}\p{Z}]++|[\p{C}\p{Z}]++\z/u', '', $_POST['message']);

	// 表示名の入力チェック
	if( empty($view_name) ) {
		$error_message[] = '表示名を入力してください。';
	}

	// メッセージの入力チェック
	if( empty($message) ) {
		$error_message[] = 'メッセージを入力してください。';
	} else {

		// 文字数を確認
		if( 100 < mb_strlen($message, 'UTF-8') ) {
			$error_message[] = 'ひと言メッセージは100文字以内で入力してください。';
		}
	}

	if( empty($error_message) ) {

		// トランザクション開始
		$pdo->beginTransaction();

-- 省略 --

許容する最大文字数はここでも同じ「100文字」に設定しています。

ここまでの編集内容を保存して、こちらのページでも管理者としてログインして動作を確認してみてください。
以上で今回の内容は完了です。


今回まで作成してきた「ひと言掲示板」について、一通りの機能を実装してきました。
当ワークショップはここまでとなります。

ワークショップへのフィードバックやご要望はいつでも大歓迎です。
記事の下部にある「こちらの記事は役に立ちましたか?」のボタンを押すと表示されるメッセージ欄か、お問い合わせページよりお気軽にお送りください。
いつでもお待ちしております。

今回作成したコード:Github

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

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

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