お問い合わせの編集ページを作成する

お問い合わせを編集できるようにする

前回の「お問い合わせのデータをデータベースから取得する」ではプラグインのトップページに、データベースから取得したデータを一覧に表示する機能を実装してきました。

前回作成したコード：GitHub

今回は一覧に表示されているお問い合わせの中から「編集」リンクを押したら、お問い合わせ内容の編集ページを表示するようにしていきます。

まずは編集ページのビューを作成します。
その後、編集ページで編集するお問い合わせデータを取得する新しいメソッドをCm_Dbクラスに作成しましょう。

編集ページのビューファイルを作成する

トップページでviewsフォルダにindex.phpを作成したときのように、編集ページにもビューファイルを作成します。
viewsフォルダにedit.phpを作成してコードエディタで開き、ファイル内に以下のコードを書いてください。

views/edit.php

<p class="link_back"><a href="<?php echo Cm::getBaseUrl(); ?>">戻る</a></p>

<div class="form_area">

<form method="post" action="<?php echo Cm::getBaseUrl(); ?>">
<dl class="form_list">
	<dt>お名前</dt>
	<dd><input type="text" name="name" value=""></dd>
	<dt>メールアドレス</dt>
	<dd><input type="email" name="email" value=""></dd>
	<dt>メールアドレス</dt>
	<dd><textarea name="content"></textarea></dd>
</dl>
<input type="hidden" name="id" value="">
<input type="hidden" name="edit_token" value="">
<input type="submit" name="btn_register" value="更新">
</form>

</div>

form要素のaction属性はCmクラスのgetBaseUrlメソッドを指定します。
非表示（type="hidden"）のinput要素はidカラムの値が入る「name="id"」と、セッショントークンが入る「name="edit_token"」の2つを用意します。
この後、これらのinput要素にもvalue属性に値を設定していきます。

続いて、作成した編集ページを表示できるようにcontactManager.phpにコードを追加していきます。
前回、トップページの一覧を作成したときに編集リンクを設置しましたが、そこへGETパラメータで「cm=edit」を出力しました。
GETパラメータのcmの値で表示するビューを切り替えるように設定します。

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__ ) );

require_once( CM_PLUGIN_DIR . 'class.cm.php' );
require_once( CM_PLUGIN_DIR . 'class.cm-db.php' );

function cm_option_page_html() {

$page_title = 'お問い合わせ管理';
$view = 'index';

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';
	}

}

?>

<div class="wrap">
	<h1><?php echo $page_title; ?></h1>
	<?php Cm::view($view); ?>
</div>

----- 省略 -----

if文でempty関数を使って$_GET[‘cm’]に値があるか確認をしてから、switch文で表示するページのタイトルと読み込むビューファイルを変数に設定します。
$_GET[‘cm’]がeditなら編集ページ、deleteのときは削除ページを表示し、それ以外の値はトップページを表示します。

もし$_GET[‘cm’]に値がないときは$page_titleと$viewの値はif文の前で設定した値から変更がないため、そのままトップページが表示されます。

編集するデータを取得するメソッドを作成する

続いて、編集するデータを1件だけ取得するメソッドをCm_Dbクラスに追加していきます。

お問い合わせのデータを検索するメソッドを作成する

これから作成するお問い合わせのデータを検索するメソッドは、contactテーブルからAUTO_INCREMENT属性の付いた主キー（PRIMARY KEY）であるidカラムとパラメータに指定した値が一致するデータをSQLで検索します。

Cm_Dbクラスのclass.cm-db.phpを開いて、以下のgetDataFromIdメソッドを追加してください。

class.cm-db.php

<?php

class Cm_Db {

	public static function getDataFromId($id) {

		global $wpdb;
		$res = null;

		$res = $wpdb->get_row( $wpdb->prepare("SELECT * FROM contact WHERE id = %d", $id), ARRAY_A);

		return $res;
	}


	public static function getAllData() {

		global $wpdb;
		$res = null;

		$res = $wpdb->get_results( "SELECT * FROM contact ORDER BY id DESC", ARRAY_A);

		return $res;
	}

}

getDataFromIdメソッドは$idで受け取った値を使ってSQLを実行し、contactテーブルのidカラムと一致するデータを1件だけ取得します。
テーブル内の全件のデータを取得するときはwpdbクラスのget_resultsメソッドを使いましたが、今回は取得するデータが1件のみなのでget_rowメソッドを使います。

get_rowメソッドでもget_resultsメソッドと同様に戻り値の形式を第2パラメータで指定することができます。
戻り値の形式は統一する方が扱いやすいため、ここでも連想配列であるARRAY_Aを指定します

また、get_rowメソッドを実行する前に、安全にSQLを実行するためにprepareメソッドによるプリペアドステートメントを使います。
SQLのWHERE句でidカラムと比較する値を数値のプレースホルダー「%d」にし、prepareメソッドの第2パラメータにプレースホルダーにセットする値を指定します。

GETパラメータの値をメソッドに渡す

データを検索するgetDataFromIdメソッドができたところで、続いてこちらのメソッドに検索するidカラムの値をパラメータで渡せるようにしていきます。

トップページの一覧には各データごとに編集リンクを設置していますが、そのURLに「id=n」を出力するように設定したことを覚えているでしょうか。
（nにはデータごとのidカラムの値が入ります）

この設定により、編集リンクのURLにはGETパラメータでidの値が含まれるようになっています。
そのため、GETパラメータのidをgetDataFromIdメソッドに渡すことで、編集ページに表示するデータを検索することができます。

編集ページのedit.phpを開いて、以下のコードを追加してください。

views/edit.php

<?php

$data = null;

if( !empty($_GET['id']) ) {

	$data = Cm_Db::getDataFromId($_GET['id']);

}

?>

<p class="link_back"><a href="<?php echo Cm::getBaseUrl(); ?>">戻る</a></p>

<div class="form_area">

----- 省略 -----

if文でGETパラメータのidがあるか確認し、値がある場合はgetDataFromIdメソッドに渡してデータ検索を実行します。
検索結果は$dataで受け取ります。

編集ページに取得したお問い合わせデータを表示する

getDataFromIdメソッドで取得したお問い合わせのデータを編集ページに表示していきます。
編集ページのビューファイルedit.phpを開いて、以下のコードを入力してください。

views/edit.php

<?php

$data = null;

if( !empty($_GET['id']) ) {

	$data = Cm_Db::getDataFromId($_GET['id']);

}

?>

<p class="link_back"><a href="<?php echo Cm::getBaseUrl(); ?>">戻る</a></p>

<div class="form_area">

<form method="post" action="<?php echo Cm::getBaseUrl(); ?>">
<dl class="form_list">
	<dt>お名前</dt>
	<dd><input type="text" name="name" value="<?php if( !empty($data['name']) ){ echo htmlspecialchars( $data['name'], ENT_QUOTES); } ?>"></dd>
	<dt>メールアドレス</dt>
	<dd><input type="email" name="email" value="<?php if( !empty($data['email']) ){ echo htmlspecialchars( $data['email'], ENT_QUOTES); } ?>"></dd>
	<dt>お問い合わせ内容</dt>
	<dd><textarea name="content"><?php if( !empty($data['content']) ){ echo htmlspecialchars( $data['content'], ENT_QUOTES); } ?></textarea></dd>
</dl>
<input type="hidden" name="id" value="<?php echo htmlspecialchars( $data['id'], ENT_QUOTES); ?>">
<input type="hidden" name="edit_token" value="">
<input type="submit" name="btn_register" value="更新">
</form>

</div>

お名前、メールアドレス、お問い合わせ内容のフォームに取得したデータをhtmlspecialchars関数で記号エスケープしてから出力します。
非表示のname="id"のinput要素にもidカラムの値を出力します。
この値は後ほど更新ボタンを押したときに、更新するデータを特定するときに使います。

続いて、お問い合わせのデータを取得できなかったときの表示も設定しておきましょう。
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($data) ): ?>

<form method="post" action="<?php echo Cm::getBaseUrl(); ?>">
<dl class="form_list">
	<dt>お名前</dt>
	<dd><input type="text" name="name" value="<?php if( !empty($data['name']) ){ echo htmlspecialchars( $data['name'], ENT_QUOTES); } ?>"></dd>
	<dt>メールアドレス</dt>
	<dd><input type="email" name="email" value="<?php if( !empty($data['email']) ){ echo htmlspecialchars( $data['email'], ENT_QUOTES); } ?>"></dd>
	<dt>お問い合わせ内容</dt>
	<dd><textarea name="content"><?php if( !empty($data['content']) ){ echo htmlspecialchars( $data['content'], ENT_QUOTES); } ?></textarea></dd>
</dl>
<input type="hidden" name="id" value="<?php echo htmlspecialchars( $data['id'], ENT_QUOTES); ?>">
<input type="hidden" name="edit_token" value="<?php echo $_SESSION['edit_token']; ?>">
<input type="submit" name="btn_register" value="更新">
</form>

<?php else: ?>

<p>お問い合わせのデータを取得できませんでした。</p>
<p class="link_back"><a href="<?php echo Cm::getBaseUrl(); ?>">戻る</a></p>

<?php endif; ?>

</div>

フォームをif文で囲み、empty関数で$dataに値が入っているか確認します。
もしgetDataFromIdメソッドでデータを取得できなかった場合は$dataはNULLが入るため、そのときはelse文へ移動して「お問い合わせのデータを取得できませんでした。」と表示されます。

編集ページにセッショントークンを入れる

最後に、編集ページにセッショントークンを入れましょう。
セッショントークンを入れる意味や仕組みはお問い合わせページのときと同様です。
（もしセッショントークンを入れる意味を改めて確認したい場合は」をご覧ください。）

セッショントークンを生成するコードはedit.phpに追加しますが、その前にセッションを開始するコードをcontactManager.phpに追加しましょう。
contactManager.phpを開いて、以下のコードを追加してください。

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__ ) );

require_once( CM_PLUGIN_DIR . 'class.cm.php' );
require_once( CM_PLUGIN_DIR . 'class.cm-db.php' );

if( session_status() !== PHP_SESSION_ACTIVE ) {
	session_start();
}

function cm_option_page_html() {

$page_title = 'お問い合わせ管理';
$view = 'index';

----- 省略 -----

session_start関数でセッションを開始する前に、session_status関数でセッションがすでに開始されていないか確認します。
ここはお問い合わせページと同じ内容です。

続いて、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']);

}

?>

<p class="link_back"><a href="<?php echo Cm::getBaseUrl(); ?>">戻る</a></p>

<div class="form_area">

<?php if( !empty($data) ): ?>

<form method="post" action="<?php echo Cm::getBaseUrl(); ?>">
<dl class="form_list">
	<dt>お名前</dt>
	<dd><input type="text" name="name" value="<?php if( !empty($data['name']) ){ echo htmlspecialchars( $data['name'], ENT_QUOTES); } ?>"></dd>
	<dt>メールアドレス</dt>
	<dd><input type="email" name="email" value="<?php if( !empty($data['email']) ){ echo htmlspecialchars( $data['email'], ENT_QUOTES); } ?>"></dd>
	<dt>お問い合わせ内容</dt>
	<dd><textarea name="content"><?php if( !empty($data['content']) ){ echo htmlspecialchars( $data['content'], ENT_QUOTES); } ?></textarea></dd>
</dl>
<input type="hidden" name="id" value="<?php echo htmlspecialchars( $data['id'], ENT_QUOTES); ?>">
<input type="hidden" name="edit_token" value="<?php echo $_SESSION['edit_token']; ?>">
<input type="submit" name="btn_register" value="更新">
</form>

<?php else: ?>

<p>お問い合わせのデータを取得できませんでした。</p>
<p class="link_back"><a href="<?php echo Cm::getBaseUrl(); ?>">戻る</a></p>

<?php endif; ?>

</div>

コードの冒頭で$_SESSION[‘edit_token’]にすでにセッショントークンが入っていたら一旦unset関数で削除して空にします。
その後すぐに、openssl_random_pseudo_bytes関数とbin2hex関数を使って24文字からなるセッショントークンを生成して$_SESSION[‘edit_token’]にセットしています。
この時点で、編集ページにアクセスする度にセッショントークンは更新される仕組みになります。

続いて、作成したセッショントークンを非表示のname="edit_token"のinput要素にセットします。
編集ページからフォームを送信したら、このinput要素と$_SESSION[‘edit_token’]に入っている値が一致するかを確認することで、編集ページから正しくデータが送信されていることを確認します。

今回は編集ページを表示するところまで進めてきました。
次回は編集ページに入力してから更新ボタンを押した後に、編集した内容がデータベースに保存されるように更新機能を実装していきます。

今回作成したコード：GitHub

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

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