最終更新日:
公開日:
ワークショップ
オリジナルのWordPressプラグインを作る(13)
編集した内容をデータベースに登録する(1)
お問い合わせ管理プラグインの編集ページで編集した内容をデータベースに登録する前に、入力された値が正しいか確認するバリデーションを実装していきます。
この記事のポイント
- お問い合わせページと同様に編集ページで入力した値をバリデーションで確認する
- セッショントークンを使って編集ページから送信されたデータか確認する
目次
編集ページに入力した内容を確認する
前回の「お問い合わせの編集ページを作成する」ではプラグインに編集ページを作成し、データベースから取得したデータがあらかじめ入力されているフォームを表示する機能を実装してきました。
前回作成したコード:GitHub
今回から2回に分けて、編集ページで更新ボタンが押されたら編集内容をデータベースに登録する機能を実装していきます。
編集ページでは更新ボタンを押した後、フォームへ入力した内容をバリデーションによって確認します。
バリデーションの確認で問題がなかった場合のみ、編集内容をデータベースに登録してトップページに戻るようにします。
もし編集した内容に誤りがあった場合は、編集ページから移動せずにエラーメッセージを表示するようにします。
今回は編集ページのフォームに入力された値が正しいか確認するバリデーションを実装していきます。
編集内容をデータベースに登録する機能は次回実装します。
編集ページから送信したデータを受け取る
編集ページで更新ボタンを押すと、お問い合わせプラグインにフォームの内容がPOST送信されます。
プラグインは中心になっているファイルcontactManager.phpが最初に実行されるため、このファイルでPOSTパラメータを受け取ります。
contactManager.phpをコードエディタで開いて、以下のコードを追加してください。
contactManager.php
<?php
----- 省略 -----
if( session_status() !== PHP_SESSION_ACTIVE ) {
session_start();
}
function cm_option_page_html() {
$page_title = 'お問い合わせ管理';
$view = 'index';
$error = array();
if( is_admin() && !empty($_POST['edit_token']) ) {
if( $_SESSION['edit_token'] === $_POST['edit_token'] ) {
// ここにバリデーションとデータベースに登録する処理が入る
} else {
$_SESSION['error_message'][] = '編集に失敗しました。';
$page_title = 'お問い合わせ管理 編集';
$view = 'edit';
}
}
if( !empty($_GET['cm']) ) {
switch( $_GET['cm'] ) {
case 'edit':
$page_title = 'お問い合わせ管理 編集';
$view = 'edit';
break;
case 'delete':
$page_title = 'お問い合わせ管理 削除';
$view = 'delete';
break;
default:
$page_title = 'お問い合わせ管理';
$view = 'index';
}
}
?>
----- 省略 -----
if文が2つ入れ子になっていますが、外側のif文ではセッショントークンがフォームから渡されているか確認しています。
セッショントークンがあったら内側のif文に移り、セッションとフォームから送られたセッショントークンが一致するか確認し、一致したらif文の内部の処理を実行します。
今はまだif文の内側には何も実行する処理がありませんが、ここにはバリデーションとデータベースに編集内容を登録するコードを書いていきます。
もしセッショントークンが一致しなかったときは、$_SESSION['error_message']にエラーメッセージをセットして編集ページに戻るよう$page_titleと$viewにも値をセットします。
入力したデータをバリデーションで確認する
編集ページから送信されてきたフォームの値をバリデーションで確認していきます。
バリデーションはお問い合わせページを作成したときと同じく、未入力と文字数を確認します。
まずは名前、メールアドレス、お問い合わせ内容の入力可とする最大文字数を定数で設定しましょう。
contactManager.phpを開いて、以下の3行を追加してください。
contactManager.php
<?php
/*
Plugin Name: Contact Manager
Description: お問い合わせを管理するためのプラグイン
Version: 0.1
Author: GRAYCODE
Author URI: https://gray-code.com
Licence: GPL v2 or later
Licence URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
define( 'CM_VERSION', '0.1.1' );
define( 'CM_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
define( 'CM_MAX_NAME_LIMIT', 10);
define( 'CM_MAX_EMAIL_LIMIT', 100);
define( 'CM_MAX_CONTENT_LIMIT', 100);
require_once( CM_PLUGIN_DIR . 'class.cm.php' );
require_once( CM_PLUGIN_DIR . 'class.cm-db.php' );
----- 省略 -----
引き続きcontactManager.phpにバリデーションを実装していきましょう。
contactManager.php
<?php
----- 省略 -----
function cm_option_page_html() {
$page_title = 'お問い合わせ管理';
$view = 'index';
$error = array();
if( is_admin() && !empty($_POST['edit_token']) ) {
if( $_SESSION['edit_token'] === $_POST['edit_token'] ) {
if( empty($_POST['name']) ) {
$error[] = '名前を入力してください。';
} else {
if( CM_MAX_NAME_LIMIT < mb_strlen($_POST['name']) ) {
$error[] = '名前は'.CM_MAX_NAME_LIMIT.'文字以内で入力してください。';
}
}
if( empty($_POST['email']) ) {
$error[] = 'メールアドレスを入力してください。';
} else {
if( CM_MAX_EMAIL_LIMIT < mb_strlen($_POST['email']) ) {
$error[] = 'メールアドレスは'.CM_MAX_EMAIL_LIMIT.'文字以内で入力してください。';
}
}
if( empty($_POST['content']) ) {
$error[] = 'お問い合わせ内容を入力してください。';
} else {
if( CM_MAX_CONTENT_LIMIT < mb_strlen($_POST['content']) ) {
$error[] = 'お問い合わせ内容は'.CM_MAX_CONTENT_LIMIT.'文字以内で入力してください。';
}
}
if( empty($error) ) {
// ここに編集内容をデータベースに登録する処理が入る
} else {
$_SESSION['error_message'] = $error;
$page_title = 'お問い合わせ管理 編集';
$view = 'edit';
}
} else {
$_SESSION['error_message'][] = '編集に失敗しました。';
$page_title = 'お問い合わせ管理 編集';
$view = 'edit';
}
}
if( !empty($_GET['cm']) ) {
switch( $_GET['cm'] ) {
case 'edit':
$page_title = 'お問い合わせ管理 編集';
$view = 'edit';
break;
case 'delete':
$page_title = 'お問い合わせ管理 削除';
$view = 'delete';
break;
default:
$page_title = 'お問い合わせ管理';
$view = 'index';
}
}
----- 省略 -----
入力項目ごとにempty関数で値があるか確認し、値があった場合はさらにmb_strlen関数で文字数を確認します。
その後、$errorが空かどうか確認し、エラーメッセージが入っていたときはempty($error)がfalseになるため、$_SESSION['error_message']にエラーメッセージを入れて編集ページに戻ります。
編集ページではこの後、$_SESSION['error_message']からエラーメッセージを取り出して表示するように設定していきます。
一方で、$errorが空だった場合は正常な入力と判断し、データベースへ編集内容を登録してトップページを表示します。
その場合は$page_titleと$viewには最初に設定した値がそのまま引き継がれてトップページが表示される仕組みです。
編集ページにエラーメッセージを表示する
エラーメッセージがあったときに編集ページに表示するよう変更していきます。
viewsフォルダのedit.phpを開いて、以下のコードを追加してください。
views/edit.php
<?php
----- 省略 -----
?>
<p class="link_back"><a href="<?php echo Cm::getBaseUrl(); ?>">戻る</a></p>
<div class="form_area">
<?php if( !empty($_SESSION['error_message']) ): ?>
<ul class="message error_list">
<?php foreach( $_SESSION['error_message'] as $message ): ?>
<li><?php echo $message; ?></li>
<?php endforeach; ?>
</ul>
<?php unset($_SESSION['error_message']); ?>
<?php endif; ?>
<?php if( !empty($data) ): ?>
<form method="post" action="<?php echo Cm::getBaseUrl(); ?>">
----- 省略 -----
if文で$_SESSION['error_message']にメッセージが入っているか確認し、入っていたらエラーメッセージのul要素を出力します。
内側のforeach文では$_SESSION['error_message']を先頭から1つずつメッセージを$messageに取り出して出力します。
出力した後はunset関数で$_SESSION['error_message']を削除します。
edit.phpはPOSTパラメータを受け取って表示するコードがありません。
そのため、入力にエラーがあって編集ページに戻ってくるとidカラムの値がないためお問い合わせデータの取得できず、さらに入力したデータを引き継ぐこともできません。
そこで、今度はPOSTパラメータを受け取れるように変更していきましょう。
edit.phpに以下のコードを追加してください。
views/edit.php
<?php
if( !empty($_SESSION['edit_token']) ) {
unset($_SESSION['edit_token']);
}
$_SESSION['edit_token'] = bin2hex(openssl_random_pseudo_bytes(24));
$data = null;
if( !empty($_GET['id']) ) {
$data = Cm_Db::getDataFromId($_GET['id']);
} else if( !empty($_POST['id']) ) {
$data = Cm_Db::getDataFromId($_POST['id']);
if( !empty($_POST['id']) ) {
$data['id'] = $_POST['id'];
}
if( !empty($_POST['name']) ) {
$data['name'] = $_POST['name'];
}
if( !empty($_POST['email']) ) {
$data['email'] = $_POST['email'];
}
if( !empty($_POST['content']) ) {
$data['content'] = $_POST['content'];
}
}
?>
<p class="link_back"><a href="<?php echo Cm::getBaseUrl(); ?>">戻る</a></p>
----- 省略 -----
最初に$_POST['id']に値があるか確認します。
編集ページへのアクセスではGETパラメータの$_GET['id']、またはPOSTパラメータの$_POST['id']のいずれかで渡されるはずの値です。
GETパラメータで渡されたらトップページから移動してきたとき、POSTパラメータで渡されたときは編集による入力エラーによる再表示と判断できます。
POSTパラメータでidの値を受け取ったら、ここでもgetDataFromIdメソッドよりお問い合わせのデータを取得します。
その後、POSTパラメータで入力中の名前、メールアドレス、お問い合わせ内容をそれぞれ取得します。
値を$dataに入れ直しているのはGETパラメータのときと値の形式を合わせるためです。
GETパラメータ、POSTパラメータのいずれも$dataに同じキーの連想配列値になっていると、フォームに値を出力するときに異なる変数を扱う必要がないためコードが分かりやすくなります。
今回は編集ページのバリデーションを実装してきました。
次回は編集内容をデータベースに登録する機能を実装していきましょう。
今回作成したコード:GitHub
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
記事一覧
- オリジナルのWordPressのプラグインを作る
- 最小構成のWordPressプラグインを作る
- WordPressにお問い合わせページを作成する(1)
- WordPressにお問い合わせページを作成する(2)
- WordPressにお問い合わせページを作成する(3)
- WordPressにお問い合わせページを作成する(4)
- WordPressにお問い合わせページを作成する(5)
- WordPressにお問い合わせページを作成する(6)
- プラグインのページを表示する
- プラグインのトップページを表示する
- お問い合わせのデータをデータベースから取得する
- お問い合わせの編集ページを作成する
- 編集した内容をデータベースに登録する(1)
- 編集した内容をデータベースに登録する(2)
- お問い合わせの削除ページを作成する
- お問い合わせのデータを削除する
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。