顧客マスター 追加

今回は顧客マスターにレコードを追加してみましょう。フィールド数が多くなっているので、SQL文やデータチェックが難しそうですが、基本的な考え方は同じです。よくみると単純なことの積み重ねだということがわかります。

【1】以下のように customer.js を更新します。他は前回までと同じです。

customer.js

var w;
var cstCd;

var txtCstCd;
var txtCstName;
var txtTownCd;
var txtAddress;
var txtTel;
var txtBirth;
var radioSexCd;

onload = init;
onunload = dbClose;

function init() {
  //初期設定をする関数
  txtCstCd = document.getElementById("txtCstCd");
  txtCstName = document.getElementById("txtCstName");
  txtTownCd = document.getElementById("txtTownCd");
  txtAddress = document.getElementById("txtAddress");
  txtTel = document.getElementById("txtTel");
  txtBirth = document.getElementById("txtBirth");
  radioSexCd = document.getElementsByName("radioSexCd");

  txtCstCd.onfocus = function (){focus(this);}
  txtCstCd.onblur = function (){blur(this);}
  txtCstName.onfocus = function (){focus(this);}
  txtCstName.onblur = function (){blur(this);}
  txtTownCd.onfocus = function (){focus(this);addressOpen();}
  txtTownCd.onblur = function (){blur(this);}
  txtAddress.onfocus = function (){focus(this);}
  txtAddress.onblur = function (){blur(this);}
  txtTel.onfocus = function (){focus(this);}
  txtTel.onblur = function (){blur(this);}
  txtBirth.onfocus = function (){focus(this);}
  txtBirth.onblur = function (){blur(this);}

  document.getElementById("btnInsert").onclick = function (){dataInsert();}
  document.getElementById("btnUpdate").onclick = function (){dataUpdate();}
  document.getElementById("btnDelete").onclick = function (){dataDelete();}
  document.getElementById("linkMaxCd").onclick = function (){return maxCd();}

  dbConnect();
  cstDisplay();
}


function addressOpen(){
  txtAddress.focus();
  w = window.open("address.html","","WIDTH=400,HEIGHT=200,STATUS=1");
}


function focus(obj){
  obj.style.backgroundColor = "#ffff00";
}


function blur(obj){
  obj.style.backgroundColor = "#ffffff";
}


function cstDisplay() {
  //顧客を表示する関数

  var mySql = "select CST_CD,CST_NAME from T04Customer order by CST_CD";
  var recordSet = database.Execute(mySql);

  document.getElementById("customerDisplay").innerHTML = "";

  var tempHtml = "<select name=\"selectCst\" id=\"selectCst\">\n";
  tempHtml = tempHtml + "\t<option value=\"0\">選択してください。</option>\n";
  while (!recordSet.EOF){
    tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
    recordSet.MoveNext();
  }
  tempHtml = tempHtml + "</select>";

  //alert(tempHtml);
  document.getElementById("customerDisplay").innerHTML = tempHtml;
  document.getElementById("selectCst").onchange = function (){cstChange(this);}

  recordSet.Close();
  recordSet = null;
}


function cstChange(obj) {
  //顧客を選択した時の関数
  if(obj.selectedIndex==0){
    textClear();
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("顧客を選択してください。");
  }else{
    cstCd = Number(obj.value);
    var mySql = "select * from T04Customer where CST_CD = " + obj.value ;
    var recordSet = database.Execute(mySql);
  
    txtCstCd.value = recordSet(0);
    txtCstName.value = recordSet(1);
    txtTownCd.value = recordSet(2);
    txtAddress.value = recordSet(3);
    txtTel.value = recordSet(4);
    txtBirth.value = dateFormat(recordSet(5));

    (recordSet(6) == 0)? radioSexCd[0].checked = true : radioSexCd[1].checked = true;

    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(2),database);
  
    recordSet.Close();
    recordSet = null;
  
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }
}


function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}


function maxCd(){
  //最大値を取得する関数
  var mySql = "select max(CST_CD) from T04Customer";
  var recordSet = database.Execute(mySql);
  textClear();
  document.getElementById("addressDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";
  cstDisplay();
  txtCstCd.value = recordSet(0) + 1;
  txtCstName.focus();
  return false;
}


function textClear() {
  //テキストボックスをクリアする関数
  txtCstCd.value = "";
  txtCstName.value = "";
  txtTownCd.value = "";
  txtAddress.value = "";
  txtTel.value = "";
  txtBirth.value = "";
  radioSexCd[0].checked = true;
}


function dataInsert() {
  //データを追加する関数
  try{
    if(dataCheck(1)){
      var mySql = "insert into T04Customer values(" ;
      mySql = mySql + Number(txtCstCd.value) + ",'" + txtCstName.value + "'," ;
      mySql = mySql + Number(txtTownCd.value) + ",'" + txtAddress.value + "','" ;
      mySql = mySql + txtTel.value + "','" + txtBirth.value + "'," ;
      mySql = mySql + ((radioSexCd[0].checked)? 0 : 1) ;
      mySql = mySql +")";

      sqlDisplay(mySql);
      database.Execute(mySql);
      cstDisplay();
      alert("追加しました。");

    }
  }catch(error){
    alert(error.number + "\n" + error.description);
  }
}


function dataCheck(flag){
  //データをチェックする関数
  var tempStr = "は必ず入力してください。";

  if (txtCstCd.value == "") {
    alert("CST_CD" + tempStr);
    return false;
  }
  if (txtCstCd.value.match(/[^0-9]/)) {
    alert("CST_CDには半角数字を入力してください！");
    txtCstCd.focus();
    return false;
  }
  if (flag == 1 && txtCstName.value == "") {
    alert("CST_NAME" + tempStr);
    return false;
  }
  if (flag == 1 && txtTownCd.value == "") {
    alert("TOWN_CD" + tempStr);
    return false;
  }
  if (flag == 1 && txtAddress.value == "") {
    alert("ADDRESS" + tempStr);
    return false;
  }
  if (flag == 1 && txtTel.value == "") {
    alert("TEL" + tempStr);
    return false;
  }
  if (flag == 1 && txtBirth.value == "") {
    alert("BIRTH" + tempStr);
    return false;
  }
  if (flag == 1 && !txtBirth.value.match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}$/)) {
    alert("BIRTHは「yyyy/mm/dd」形式で入力してください！");
    return false;
  }
  return true;
}

【2】保存したら customer.html をダブルクリックしてWebブラウザで開きます。
★database.js、base.css、customer.html、customer.css、customer.js、address.html、address.css、address.js は必ず同じフォルダ内に置いてください。


【3】顧客マスターを開いたら、「最大値」をクリックします。




【4】CST_CDが自動で入力されました。




【5】CST_NAMEに「山田　太郎」と入力します。




【6】TOWN_CDはサブウィンドウで「東京都」、「港区」、「麻布十番」を選択します。好きな住所でかまいません。



＊サブウィンドウが表示されない場合は、ブラウザのポップアップを許可してください。


【7】ADDRESSに「１２３」と入力します。




【8】TELに「000-000-0000」と入力します。




【9】BIRTHはわざと間違えて「78/05/28」と入力します。




【10】SEX_CDはラジオボタンから「男」を選択します。




【11】「追加」ボタンをクリックします。




【12】BIRTHが間違えているのでメッセージが表示されました。



BIRTHは「yyyy/mm/dd」の形式で入力しなければなりません。



【13】BIRTHを「1978/05/28」に修正します。




【14】「追加」ボタンをクリックします。




【15】今度はちゃんと追加されました。




【16】追加のSQL文が正しく作成されていることを確認してください。




【17】顧客選択ボックスに「山田　太郎」が追加されていることを確認してください。




【18】データベース「SampleDB010.mdb」のテーブル「T04Customer」をデータシートビューで開き、新しくレコードが追加されていることを確認します。




【19】顧客をいろいろ登録してみてください。またわざと未入力にしたりしてエラーメッセージが表示されることを確認してください。


【解説】

(1)関数dataInsert()では最初にdataCheck()を呼び出してチェックします。もしtrueならSQL文を作成し、データベースに追加します。

ポイントはSEX_CDのラジオボタンから値を取得するところです。「男」がチェックされている場合は「0」、それ以外は「1」を設定しています。
((radioSexCd[0].checked)? 0 : 1) ;

ラジオボタンのvalueを使う場合は、以下のように書いても同じです。
((radioSexCd[0].checked) ? radioSexCd[0].value : radioSexCd[1].value) ;

追加したらレコードが増えるので、顧客選択ボックスを再表示しています。
cstDisplay();


(2)関数dataCheck()では未入力にしたくないフィールドや、データの形式が決まっているものについてチェックします。

すべてのフィールドが未入力にならないようにチェックしているので、一見面倒な感じがしますが、これには理由があります。実は必ず入力してもらうほうがSQL文が簡単になるのです。この部分については別の機会に詳しく説明します。


(3)正規表現を使い、BIRTHの形式をチェックしている部分です。

function dataCheck(flag){
省略
  if (flag == 1 && !txtBirth.value.match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}$/)) {
    alert("BIRTHは「yyyy/mm/dd」形式で入力してください！");
    return false;
  }
省略
}

追加と更新の時trueになります。
flag == 1

マッチしなかったときtrueになります。
!txtBirth.value.match()

正規表現の部分
/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}$/

^[0-9]{4}は0-9で始まる4桁の数字
\/は 「/」スラッシュは特別な意味がある文字なので\でエスケープしています。
[0-9]{2}$は0-9で終わる2桁の数字

つまりtxtBirthが「yyyy/mm/dd」の形式じゃなかった場合trueになり、メッセージが表示されます。ただしこの正規表現では有効な日付であるということまではチェックしていません。


【SQL文の組み立て方】

最終的に組み立てたいSQL文です。
insert into T04Customer values(11,'山田　太郎',37053,'１２３','000-000-0000','1978/05/28',0)

全体を「"」（ダブルクォーテーション）で囲みます。
"insert into T04Customer values(11,'山田　太郎',37053,'１２３','000-000-0000','1978/05/28',0)"

値をコントロールや変数に置き換えます。
"insert into T04Customer values(Number(txtCstCd.value),'txtCstName.value',Number(txtTownCd.value),'txtAddress.value','txtTel.value','txtBirth.value',radioSexCd)"

コントロールや変数の前後に半角空白を入れ切り離します。
"insert into T04Customer values( Number(txtCstCd.value) ,' txtCstName.value ', Number(txtTownCd.value) ,' txtAddress.value ',' txtTel.value ',' txtBirth.value ', radioSexCd )"

コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。
"insert into T04Customer values(" Number(txtCstCd.value) ",'" txtCstName.value "'," Number(txtTownCd.value) ",'" txtAddress.value "','" txtTel.value "','" txtBirth.value "'," radioSexCd ")"

コントロールや変数と文字列を「+」で結合します。
"insert into T04Customer values(" + Number(txtCstCd.value) + ",'" + txtCstName.value + "'," + Number(txtTownCd.value) + ",'" + txtAddress.value + "','" + txtTel.value + "','" + txtBirth.value + "'," + radioSexCd + ")"

変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。
var mySql = "insert into T04Customer values(" + Number(txtCstCd.value) + ",'" + txtCstName.value + "'," + Number(txtTownCd.value) + ",'" + txtAddress.value + "','" + txtTel.value + "','" + txtBirth.value + "'," + radioSexCd + ")";

radioSexCdを (式)？真:偽 の形にします。
var mySql = "insert into T04Customer values(" + Number(txtCstCd.value) + ",'" + txtCstName.value + "'," + Number(txtTownCd.value) + ",'" + txtAddress.value + "','" + txtTel.value + "','" + txtBirth.value + "'," + ((radioSexCd[0].checked)? 0 : 1) + ")";


上記のままでもかまいませんが、SQL文が長いので改行して表す方法は以下のようになります。

      mySql = mySql + Number(txtCstCd.value) + ",'" + txtCstName.value + "'," ;
      mySql = mySql + Number(txtTownCd.value) + ",'" + txtAddress.value + "','" ;
      mySql = mySql + txtTel.value + "','" + txtBirth.value + "'," ;
      mySql = mySql + ((radioSexCd[0].checked)? 0 : 1) ;
      mySql = mySql +")";

変数内では単純に改行できないので、
mySql ="この中では改行できない"

mySql = mySql +"" のように前の文の後ろにプラスしていく形にします。