レコードを登録／修正／削除／表示するページを作成するには

Access のデータベースの得意先マスタの一覧を表示させて、レコードを登録、修正、削除する方法を説明します。得意先マスタの各レコードには、修正、削除ボタンが付いています。修正ボタンをクリックすると編集モードに切り替わって修正ボタンが確定ボタンになります。一覧の最後行には、レコードを追加する新規登録ボタンが表示されます。

図　レコードを登録／修正／削除／表示するサンプル（その１）

図　レコードを登録／修正／削除／表示するサンプル（その２）

Access + Webのダウンロードにサンプルが収録されています。ダウンロードの目次を表示させたら、「得意先マスタを登録、修正、削除、表示するサンプル」をクリックしてください。Internet Explorerの左側のフレームには、ASPのソースが表示されます。右側のフレームには、実行結果が表示されます。リストにAllFunctions.aspのソースコードが掲載されていますのでここで参照している行番号と対応させてください。

行14-18では、Access のデータベースado.mdbを接続するための処理を行っています。行14-15では、OLEDBのProviderとData Sourceを設定してstrConnectionに保存しています。

14: strConnection = "Provider=Microsoft.Jet.OLEDB.4.0;" _

15: & "Data Source=" & server.MapPath("webdb/ado.mdb")

行17-18では、Connectionのインスタンスを生成してOpenメソッドでado.mdbを接続しています。

17: set cnn = server.CreateObject("adodb.connection")

18: cnn.Open strConnection

行20-21では、ASPのRequestオブジェクトのQueryStringメソッドでaction=とid=のQueryStringを取得して変数strAction, lngCustIDに保存しています。

20: strAction = request.Querystring("action")

21: lngCustID = CLng(request.Querystring("id"))

行23-29では、strActionを調べてアクションコード(add, update, delete)に対応するサブプロシージャを呼び出しています。

23: if strAction = "add" then

24: call CustAdd

25: elseif strAction = "update" then

26: call CustUpdate

27: elseif strAction = "delete" then

28: call CustDelete

29: end if

行93-97では、一覧表の見出し（ID、顧客名、機能）を定義しています。

93: <tr>

94: <th width="16%">ID</th>

95: <th width="68%">顧客名</th>

96: <th width="21%">機能</th>

97: </tr>

行99-101では、得意先マスタのレコードを抽出するSQLを作成してConnectionオブジェクトのExecuteメソッドでレコードセットを作成しています。SQLには、ORDER BY句が指定されていますので得意先コード順に並べ替えられます。

99: strSQL = "Select 得意先コード,得意先名 From 得意先" _

100: & " Order by 得意先コード; "

101: set rs = cnn.Execute(strSQL)

行102-136のdo until…loopでは、レコードセットの内容を表示しています。行105では、カレントレコードが編集対象のレコードか調べています。

105: <%if strAction = "edit" and lngCustID = rs("得意先コード") then %>

編集対象のときは、行106-122のHTMLをブラウザに送信します。行106, 122では、HTMLの<form>・・・</form>を送信しています。行106の<form>タグには、action=で自分自身を指定しています。QueryStringには、action=updateとid=9999(得意先コードのID)を指定しています。ここで指定したid=は、レコードを更新するときに使用します。行109-112では、テキストボックスに得意先コードを表示しています。行113-116では、テキストボックスに得意先名を表示しています。行117-121では、確定ボタンと削除ボタンを表示しています。行118の<input>タグには、type=”submit”が指定されていますので、確定ボタンをクリックすると行107のaction=で指定しているAllFunctions.aspがロードされます。行119の<input>タグには、type=”button”が指定されていますので削除ボタンをクリックするとonClickイベントが発生して、JavaScriptが実行されます。window.location.href=・・・を実行すると、ブラウザ(Internet Explorer)のurlが更新されてAllFunctions.aspがロードされます。（Internet Explorerのアドレスにurlを手入力したのと同じ動作をします。）

106: <form method="post"

107: action="AllFunctions.asp?action=update&id=

<%=rs("得意先コード")%>"

108: name="CustUpdate">

109: <td width="16%">

110: <input type="text" value="<%=rs("得意先コード")%>"

111: size="5" name="txtUpdID">

112: </td>

113: <td width="68%">

114: <input type="text" value="<%=trim(rs("得意先名"))%>"

115: size="30" name="txtUpdName">

116: </td>

117: <td align="center" width="21%">

118: <input type="submit" value="確定"> 

119: <input type="button" value="削除"

120: onClick="window.location.href=

'AllFunctions.asp?action=delete&id=<%=rs("得意先コード")%>'">

121: </td>

122: </form>

カレントレコードが編集対象外のときは、行124-131のHTMLをブラウザに送信します。行124-125では、得意先コードと得意先名を表示しています。行126-131では、修正ボタンと削除ボタンを表示しています。これらのボタンには、onClickイベントが登録されていますのでボタンをクリックするとonClickイベントのJavaScriptが実行されます。JavaScriptでは、window.location.hrefに’AllFunctions.asp・・・’を設定していますので、AllFunctions.aspがロードされます。このときQueryStringとして、action=edit|deleteとid=9999(得意先コード)が渡されます。

124: <td width="11%"><%=rs("得意先コード")%></td>

125: <td width="68%"><%=trim(rs("得意先名")) %></td>

126: <td align="center" width="21%">

127: <input type="button" value="修正"

128: onClick="window.location.href=

'AllFunctions.asp?action=edit&id=<%=rs("得意先コード")%>'"> 

129: <input type="button" value="削除"

130: onClick="window.location.href=

'AllFunctions.asp?action=delete&id=<%=rs("得意先コード")%>'">

131: </td>

行135では、RecordsetオブジェクトのMoveNextメソッドでレコードを移動しています。カレントが最終レコードのとき、MoveNextメソッドを実行するとEOFが報告されてdo until…loopが終了します。行137-138では、レコードセットを閉じて、Recordsetのオブジェクトを解放しています。

行141-152では、一覧表の最後行に新規登録のフォームを表示しています。行141, 152では、<form>・・・</form>タグを送信しています。行143-145では、ID（得意先コード）のテキストボックスを送信しています。IDは、自動採番されますので入力不要です。<input>タグにdisabled属性を挿入すると入力不可になります。行146-148では、得意先名のテキストボックスを送信しています。行149-151では、新規登録のボタンを送信しています。行150の<input>タグには、type=”submit”が指定されていますので行142のaction=で指定されているAllFunctions.aspがロードされます。このときQueryStringとして、action=addとid=0が渡されます。

141: <form method="post"

142: action="AllFunctions.asp?action=add&id=0" name="CustAdd">

143: <td width="16%">

144: <input type="text" size="5" name="txtAddID" disabled>

145: </td>

146: <td width="68%">

147: <input type="text" size="30" name="txtAddName">

148: </td>

149: <td width="21%" >

150: <input type="submit" value=" 新規登録 " style="float: right">

151: </td>

152: </form>

● Sub CustAddの処理

Sub CustAddでは、得意先テーブルにレコードを挿入します。行37では、ASPのRequestオブジェクトのFormコレクションからtxtAddNameの値を取得してstrNameに保存しています。txtAddNameは、得意先名のテキストボックスのエレメント名です。行38-42では、得意先テーブルにレコードを挿入するSQLを作成してstrSQLに保存しています。行43では、ConnectionオブジェクトのExecuteメソッドでレコードを挿入しています。

34: Sub CustAdd()

35: dim strID,strName

36:

37: strName = request.form("txtAddName")

38: strSQL = "INSERT INTO 得意先" _

39: & " (得意先名)" _

40: & " VALUES (" _

41: & "'" & strName & "'" _

42: & ");"

43: cnn.Execute(strSQL)

44: End Sub

● Sub CustUpdateの処理

Sub CustUpdateでは、得意先テーブルのレコードを更新します。行51では、ASPのRequestオブジェクトのFormコレクションからtxtUpdIDの値を取得してstrIDに保存しています。txtUpdIDは、ID(得意先コード)のテキストボックスのエレメント名です。行54-56では、得意先テーブルのレコードを更新するSQLを作成してstrSQLに保存しています。行57では、ConnectionオブジェクトのExecuteメソッドでレコードを更新しています。

48: Sub CustUpdate()

49: dim strID,strName

50:

51: strID = request.Form("txtUpdID")

52: strName = request.Form("txtUpdName")

53:

54: strSQL = "Update 得意先 Set " _

55: & " 得意先名='" & strName & "'" _

56: & " Where 得意先コード=" & strID & ";"

57: cnn.Execute(strSQL)

58: End Sub

● Sub CustDeleteの処理

Sub CustDeleteでは、得意先テーブルからレコードを削除します。行65では、ASPのRequestオブジェクトのQueryStringメソッドでid=を取得してstrIDに保存しています。QueryStringのid=には、削除するレコードのID（得意先コード)が指定されています。QueryStringのid=は、削除ボタンのonCickイベントで設定します。削除ボタンをクリックすると、onClickイベントが発生してイベントに記述されているJavaScriptが実行されます。JavaScriptでは、ブラウザ(Internet Explorer)のurlに’AllFunctions.asp・・・’を設定してAllFunctions.aspをロードします。このときQueryStringとしてaction=deleteとid=9999(得意先コードのID)を渡します。

<input type=”button” value=”削除”

onclick=” window.location.href=’AllFunctions.asp?action=delete&id=9999’ ”>

行66-67では、得意先テーブルからレコードを削除するSQLを作成してstrSQLに保存しています。行68では、ConnectionオブジェクトのExecuteメソッドでレコードを削除しています。

62: Sub CustDelete()

63: dim strID

64:

65: strID = request.QueryString("id")

66: strSQL = "Delete * From 得意先 " _

67: & " Where 得意先コード=" & strID & ";"

68: cnn.Execute(strSQL)

69: End Sub

リスト AllFunctions.aspのソースコード

1: <%@Language=VBScript%>

2: <% Option Explicit %>

3: <%

4: dim strAction

5: dim lngCustID

7: dim cnn, rs

8: dim strConnection

9: dim strSQL,strMsg,strErrMsg

10:

11: strMsg = vbNullString

12: strErrMsg = vbNullString

13:

14: strConnection = "Provider=Microsoft.Jet.OLEDB.4.0;" _

15: & "Data Source=" & server.MapPath("webdb/ado.mdb")

16:

17: set cnn = server.CreateObject("adodb.connection")

18: cnn.open strConnection

19:

20: strAction = request.querystring("action")

21: lngCustID = clng(request.querystring("id"))

22:

23: if strAction = "add" then

24: call CustAdd

25: elseif strAction = "update" then

26: call CustUpdate

27: elseif strAction = "delete" then

28: call CustDelete

29: end if

30:

31: '------------------------------------

32: ' Add Customer

33: '------------------------------------

34: Sub CustAdd()

35: dim strID,strName

36:

37: strName = request.form("txtAddName")

38: strSQL = "INSERT INTO 得意先" _

39: & " (得意先名)" _

40: & " VALUES (" _

41: & "'" & strName & "'" _

42: & ");"

43: cnn.execute(strSQL)

44: End Sub

45: '-------------------------------------

46: ' Update Customer

47: '-------------------------------------

48: Sub CustUpdate()

49: dim strID,strName

50:

51: strID = request.form("txtUpdID")

52: strName = request.form("txtUpdName")

53:

54: strSQL = "Update 得意先 Set " _

55: & " 得意先名='" & strName & "'" _

56: & " Where 得意先コード=" & strID & ";"

57: cnn.execute(strSQL)

58: End Sub

59: '--------------------------------------

60: ' Delete Customer

61: '--------------------------------------

62: Sub CustDelete()

63: dim strID

64:

65: strID = request.querystring("id")

66: strSQL = "Delete * From 得意先 " _

67: & " Where 得意先コード=" & strID & ";"

68: cnn.execute(strSQL)

69: End Sub

70: %>

71: <html>

72: <head>

73: <style>

74: tr {

75: background: #F0E68C;

76: font-size: 80%;

77: }

78:

79: th {

80: color: #B22222;

81: }

82:

83: td {

84: color: black;

85: }

86: </style>

87: </head>

88: <body>

89: <table width="350">

90: <tr>

91: <td width="100%">

92: <table border="1" width="100%">

93: <tr>

94: <th width="16%">ID</th>

95: <th width="68%">顧客名</th>

96: <th width="21%">機能</th>

97: </tr>

98: <%

99: strSQL = "Select 得意先コード,得意先名 From 得意先" _

100: & " Order by 得意先コード; "

101: set rs = cnn.execute(strSQL)

102: do until rs.eof

103: %>

104: <tr>

105: <%if strAction = "edit" and lngCustID = rs("得意先コード") then %>

106: <form method="post"

107: action="AllFunctions.asp?action=update&id=<%=rs("得意先コード")%>"

108: name="CustUpdate">

109: <td width="16%">

110: <input type="text" value="<%=rs("得意先コード")%>"

111: size="5" name="txtUpdID">

112: 　</td>

113: <td width="68%">

114: <input type="text" value="<%=trim(rs("得意先名"))%>"

115: size="30" name="txtUpdName">

116: </td>

117: <td align="center" width="21%">

118: <input type="submit" value="確定"> 

119: <input type="button" value="削除"

120: onClick="window.location.href=

'AllFunctions.asp?action=delete&id=<%=rs("得意先コード")%>'">

121: </td>

122: </form>

123: <%else%>

124: