データベース上でPREF_CDはINT(整数型)で定義されているので、文字などを入力してSQL文を実行するとエラーになります。
そこで今回はPREF_CDのテキストボックスに入力されたデータが、適切な値かチェックする方法を考えてみましょう。
最初からテキストボックスに半角数字以外入力できないようにしておけば、SQL文実行時のエラーを防ぐことができます。
＊PREF_NAMEは文字列なので、適正な値か判断することが難しいため省きます。
【1】sample105 フォルダをコピーして sample106 フォルダを作成します。
【2】今回は以下のようなファイルの構成になります。
・select.php は少しだけ変更があります。
・select.js は新規に作成します。
・SampleDB050.php、update.php、delete.php、insert.php、update2.php、delete2.php、insert2.php は前回の sample105 と同じものなのでソースコードは省略します。
＊「\」はWindowsではエンマークのことです。
保存先 C:\phpdev\www\test\sample106
ファイル名 select.php
<?php
//ファイルを読み込み
require_once("SampleDB050.php");
// クエリを送信する
$sql = "SELECT * FROM T01Prefecture ORDER BY PREF_CD";
$result = executeQuery($sql);
//結果セットの行数を取得する
$rows = mysql_num_rows($result);
//表示するデータを作成
if($rows){
while($row = mysql_fetch_array($result)) {
$tempHtml .= "<tr>";
$tempHtml .= "<td>".$row["PREF_CD"]."</td><td>".$row["PREF_NAME"]."</td>";
$tempHtml .= "<td><a href=\"update.php?cd=".$row["PREF_CD"]."\" target=\"_self\">更新</a></td>";
$tempHtml .= "<td><a href=\"delete.php?cd=".$row["PREF_CD"]."\" target=\"_self\">削除</a></td>";
$tempHtml .= "</tr>\n";
}
$msg = $rows."件のデータがあります。";
}else{
$msg = "データがありません。";
}
//結果保持用メモリを開放する
mysql_free_result($result);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT-JIS">
<title>全件表示</title>
<script type="text/javascript" src="select.js"></script>
</head>
<body>
<h3>全件表示</h3>
<?= $msg ?>
<table width = "300" border = "1">
<tr bgcolor="##ccffcc"><td>PREF_CD</td><td>PREF_NAME</td><td colspan="2">EDIT</td></tr>
<?= $tempHtml ?>
<form name="form1" action="insert.php" method="post">
<tr>
<td><input type="text" name="cd" id="cd"></td>
<td><input type="text" name="name"></td>
<td colspan="2">
<input type="submit" name="submit" value="追加"><input type="reset" value="リセット">
</td>
</tr>
</form>
</table>
</body>
</html>
保存先 C:\phpdev\www\test\sample106
ファイル名 select.js
var cd;
onload = init;
function init() {
//初期設定をする関数
cd = document.getElementById("cd");
document.form1.onsubmit = function (){return ( dataCheck(cd.value, "PREF_CD") );}
}
function dataCheck(str, name){
//データをチェックする関数
if (str.length == 0 || str.match(/[^0-9]/)) {
alert(name + " は半角数字を入力してください。");
return false;
}
return true;
}
【3】C:\phpdev にある 2K-NT-XP-phpdev_start.bat をダブルクリックして、phpdev を起動します。
準備ができたら作成したPHPプログラムを実行してみましょう。
【4】ブラウザのアドレスに http://localhost/test/sample106/select.php と入力し、実行します。
【5】全件表示(select.php)の画面が表示されました。
【6】追加フォームのPREF_CD欄に、わざと「あ」と入力し「追加」ボタンをクリックします。
適正な値を入力しなかった場合の動作確認です。半角数字でなければ何でもかまいません。
・「１２３」 全角数字
・「1い2」 文字が混じっている
・「abc」 アルファベット
【7】PREF_CD欄が適切な値ではないため、メッセージが表示されました。「OK」をクリックします。
＊これはクライアント側のJavaScriptによる入力チェックです。
【8】次はPREF_CD欄に半角数字で「99」と入力し、「追加」ボタンをクリックします。
【9】PREF_CDは大丈夫ですが、PREF_NAMEが未入力なので、メッセージが表示されました。「再入力」リンクをクリックします。
＊これはサーバー側のPHPによる入力チェックです。
【10】次は「99 ハワイ」と適切な値を入力し、「追加」ボタンをクリックします。
【11】JavaScriptとPHPによる入力チェックを通りました。
【解説】
■select.php
(1)HTMLのhead部分にJavaScriptを読み込むタグを加えました。
<script type="text/javascript" src="select.js"></script>
(2)フォームに「form1」という名前を付けました。
<form name="form1" action="insert.php" method="post">
(3)テキストボックスに「cd」というidを付けました。
<input type="text" name="cd" id="cd">
■select.js
(1)select.js は PREF_CD について、半角数字以外が入力されないようにチェックしています。PREF_NAME のチェックは行なっていません。
(2)JavaScriptによる入力チェックの仕組みについては、以下のステップで解説していますのでご覧ください。
「Step9・入力された値をPHPでチェックする」
「Step10・入力された値をJavaScriptでチェックする」
今回はPHPのプログラム部分の変更はありません。JavaScriptを使うとサーバー側のPHPに処理が移る前に、クライアント側でチェックすることができます。
未入力の項目などがある場合は、サーバー側に処理が移っても結局エラーになるため、クライアント側でできることはクライアント側で行なったほうが、サーバーの負荷や通信量が減らせます。
ただし全てのブラウザでJavaScriptが同じように動くわけではありません。そのためサーバー側でチェックする場合のメリットもあります。サーバー側で処理すれば、クライアントのブラウザの種類は関係ないからです。
今回のサンプルプログラムはJavaScriptとPHPの両方で処理しています。
insert.phpではPREF_CDとPREF_NAMEの両方をチェックしています。もちろんそのままでかまいません。
if(empty($prefCd) || empty($prefName)){
省略
}else{
省略
}
でもPREF_CDはJavaScriptでチェック済みなので、未入力ということはありません。PHPではPREF_NAMEだけチェックすればよいともいえます。
if(empty($prefName)){
省略
}else{
省略
}
PREF_NAMEの未入力チェックもJavaScriptで行なえば、PHP側の処理は不要になります。JavaScriptを使うことで、PHPのプログラムが少なくて済むようになるわけです。
JavaScriptとPHPのどちらで行なうかは一長一短があり難しいところなので、ケースバイケースでプログラムしてください。
