Dreamweaver でのレコードの更新ページの作成

最終更新日 : 2024年4月25日
メモ

Dreamweaver 以降では、ユーザーインターフェイスが簡素化されています。 そのため、この記事で説明されているオプションの一部が Dreamweaver 以降には存在しない場合があります。 詳しくは、こちらの記事を参照してください。

レコード更新ページについて

アプリケーションには、ユーザーがデータベーステーブル内の既存のレコードを更新できる一連のページを含めることができます。ページは通常、検索ページ、結果ページ、更新ページで構成されます。検索ページと結果ページでユーザーがレコードを取得し、更新ページでユーザーがレコードを変更できます。

更新するレコードの検索

ユーザーがレコードを更新する場合、最初にデータベース内でそのレコードを検索する必要があります。したがって、更新ページと連携するために検索ページと結果ページが必要です。ユーザーは検索ページで検索条件を入力し、結果ページでレコードを選択します。ユーザーが結果ページでレコードをクリックすると、更新ページが開き、HTMLフォームでレコードが表示されます。

検索ページと結果ページを作成したら、結果ページに更新ページを開くためのリンクを作成します。次に、ユーザーが選択したレコードの ID を渡すようにリンクを変更します。更新ページはこの ID を使用して、データベース内で要求されたレコードを検索して表示します。

更新ページを開いてレコード ID を渡すために使用するプロセスは、詳細ページを開いてレコード ID を渡すプロセスと同じです。詳細については、詳細ページへのリンクを作成を参照してください。

更新するレコードの取得

結果ページが更新するレコードを識別するレコード ID を更新ページに渡した後、更新ページはパラメーターを読み取り、データベーステーブルからレコードを取得して、レコードセット内に一時的に保存する必要があります。

Dreamweaver でページを作成して保存します。

このページが更新ページになります。

バインディングパネル(ウィンドウ > バインディング)で、プラス(+)ボタンをクリックしてレコードセットを選択します。

詳細設定のダイアログボックスが表示された場合は、「基本設定」をクリックします。 詳細ダイアログボックスには SQL 文を入力するテキストエリアがありますが、シンプルなダイアログボックスにはありません。

レコードセットに名前を付け、接続とテーブルのポップアップメニューを使用して、更新するデータの場所を指定します。
「選択」をクリックし、キー列(通常はレコード ID 列)と更新するデータが含まれる列を選択します。
フィルターエリアを設定して、キー列の値が結果ページから渡された対応する URL パラメーターの値と等しくなるようにします。

この種類のフィルターは、結果ページで指定されたレコードのみを含むレコードセットを作成します。例えば、キー列にレコード ID 情報が含まれていて PRID という名前で、結果ページが id という URL パラメーターで対応するレコード ID 情報を渡す場合、フィルターエリアは次の例のようになります:

フィルター領域

「OK」をクリックします。

ユーザーが結果ページでレコードを選択すると、更新ページは選択されたレコードのみを含むレコードセットを生成します。

更新ページをブロックごとに完成させます

更新ページには、次の 3 つの作成ブロックが含まれます。

  • データベーステーブルからレコードを取得するフィルター済みレコードセット
  • ユーザーがレコードのデータを修正するための HTML フォーム
  • データベーステーブルを更新するレコード更新サーバービヘイビアー

    更新ページの最後の 2 つの基本構成要素は、フォームツールとサーバービヘイビアーパネルを使用して個別に追加できます。

更新ページへの HTML フォームの追加

ページを作成します(ファイル/新規/空白ページ)。このページが更新ページになります。
Dreamweaver デザインツールを使用してページをレイアウトします。
フォームを表示する位置に挿入ポイントを置き、挿入/フォーム/フォームを選択して HTML フォームを追加します。

ページに空白のフォームが作成されます。 フォームの境界を確認するには、非表示エレメント(表示/ビジュアルエイド/非表示エレメント)を有効にする必要がある場合があります。境界は細い赤い線で表示されます。

HTMLフォームに名前を付けるには、ドキュメントウィンドウの下部にある<form>タグをクリックしてフォームを選択し、プロパティインスペクター(ウィンドウ/プロパティ)を開いて、フォーム名ボックスに名前を入力します。

ユーザーが送信ボタンをクリックしたときにレコードデータをどこにどのように送信するかをフォームに指示するために、actionmethod 属性を指定する必要はありません。レコード更新サーバービヘイビアーが、これらの属性を設定します。

データベーステーブル内で更新するカラムごとに、テキストフィールド(挿入/フォーム/テキストフィールド)などのフォームオブジェクトを追加します。

フォームオブジェクトはデータエントリ用です。 この目的にはテキストフィールドが一般的ですが、メニュー、オプション、ラジオボタンも使用できます。

各フォームオブジェクトには、以前に定義したレコードセット内の対応するカラムが必要です。例外は一意キーカラムで、対応するフォームオブジェクトを持つべきではありません。

フォームに送信ボタンを追加します(挿入/フォーム/ボタン)。

ボタンを選択し、プロパティインスペクター(ウィンドウ/プロパティ)を開いて、ラベルボックスに新しい値を入力することで、送信ボタンのラベルを変更できます。

フォームへのレコードの表示

ユーザーが更新するレコードを保持するレコードセットを定義したことを確認してください。

更新するレコードを取得を参照してください。

データベーステーブルを更新するサーバービヘイビアを追加します

サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)で、プラス(+)ボタンをクリックし、ポップアップメニューから「レコードを更新」を選択します。

レコードの更新ダイアログボックスが表示されます。

値送信元ポップアップメニューからフォームを選択します。
データソースまたは接続のポップアップメニューで、データベースへの接続を選択します。
該当する場合はユーザー名とパスワードを入力します。
「テーブルを更新」ポップアップメニューで、更新するレコードを含むデータベーステーブルを選択します。
(ColdFusion、PHP)更新するデータベース列を指定し、 「値」ポップアップメニューから列を更新するフォームオブジェクトを選択し、「送信形式」ポップアップメニューからフォームオブジェクトのデータタイプを選択し、この列をプライマリキーとして識別する場合は「プライマリキー」を選択します。

データタイプは、データベース テーブルの列が期待するデータの種類です(テキスト、数値、ブーリアンオプション値)。

フォーム内の各フォームオブジェクトに対して 手順を繰り返します。

(ASP)「レコードを選択」ポップアップメニューで、HTML フォームに表示されるレコードが含まれているレコードセットを指定します。 「一意キー列」ポップアップメニューで、データベーステーブルのレコードを識別するキー列(通常はレコードID列)を選択します。 値が数値の場合は、「数値」オプションを選択します。 キー列は 通常数値のみを受け入れますが、テキスト値を受け入れる場合もあります。
「更新後」または「成功時の移動先」ボックスで、テーブルのレコード更新後に開くページを入力するか、「参照」ボタンをクリックしてファイルを参照します。
(ASP)更新するデータベース列を指定し、 「値」ポップアップメニューから列を更新するフォームオブジェクトを選択し、「送信形式」ポップアップメニューからフォームオブジェクトのデータタイプを選択します。データタイプは、 データベーステーブルの列が期待するデータの種類です(テキスト、数値、ブーリアンオプション値)。フォーム内の各フォームについて、この操作を繰り返します。
「OK」をクリックします。

Dreamweaverは、ユーザーがHTMLフォームに表示される情報を変更して「送信」ボタンをクリックすることで、データベーステーブルのレコードを更新できるサーバービヘイビアをページに追加します。

サーバービヘイビアを編集するには、サーバービヘイビアパネル(ウィンドウ/サーバービヘイビア)を開いて、「レコードを更新」ビヘイビアをダブルクリックします。

更新ページを一度の操作で完了する

更新ページには 3 つの 構成要素があります:

  • データベーステーブルからレコードを取得するためのフィルタリングされたレコードセット

  • ユーザーがレコードのデータを修正するための HTML フォーム

  • データベーステーブルを更新する「レコードの更新」サーバービヘイビアー

Record Update Form データオブジェクトを使用して、更新ページの最後の 2 つの構成要素を一度の操作で 追加できます。データオブジェクトは、HTML フォームと「レコードを更新」サーバービヘイビアの両方をページに追加します。

データオブジェクトを使用する前に、web アプリケーションが更新するレコードを識別でき、更新ページがそれを取得できる 必要があります。

データオブジェクトがページに構成要素を配置した後、Dreamweaver デザインツールを使用して フォームを好みに合わせてカスタマイズしたり、サーバービヘイビアパネルを使用して「レコードを更新」サーバービヘイビアを編集したりできます。

メモ

更新ページには、一度に 1 つのレコード編集サーバービヘイビアのみを 含めることができます。例えば、 「レコードを挿入」や「レコードを削除」サーバービヘイビアを更新ページに追加することはできません。

ページをデザインビューで開き、挿入/ データオブジェクト/レコードを更新/Record Update Form ウィザードを選択します。

レコード更新フォーム ダイアログボックスが表示されます。

「接続」ポップアップメニューで、 データベースへの接続を選択します。

接続を定義する必要がある場合は、「定義」ボタンをクリックします。

「更新するテーブル」ポップアップメニューで、更新するレコードが含まれているデータベース テーブルを選択します。
「レコードを選択」ポップアップメニューで、HTML フォームに表示されるレコードが含まれているレコードセットを指定します。
「一意キー列」ポップアップメニューで、データベーステーブルのレコードを識別するキー列 (通常はレコード ID 列)を選択します。

値が数値の場合は、「数値」オプションを選択します。 キー列は通常、数値のみを受け入れますが、テキスト値を受け入れる場合もあります。

「更新後の移動先」ボックスで、テーブルのレコードの更新後に開くページを入力します。
「フォームフィールド」領域で、データベーステーブルの各列を各フォームオブジェクトが更新するように指定します。

デフォルトでは、Dreamweaver はデータベーステーブルの各列に対してフォームオブジェクトを作成します。データベースが新しく作成される各レコードに一意キー ID を自動的に生成する場合は、リストでキー列に対応するフォームオブジェクトを選択してマイナス(-)ボタンをクリックして削除します。これにより、フォームのユーザーが既に存在する ID 値を入力するリスクを回避できます。

また、リストでフォームオブジェクトを選択し、ダイアログボックス右側の上向きまたは下向き矢印をクリックして、HTML フォーム上のフォームオブジェクトの順序を変更することもできます。

フォームフィールドテーブルの行をクリックし、テーブル下のボックスに以下の情報を入力して、各データ入力フィールドが HTML フォームにどのように表示されるかを指定します:
  • 「ラベル」ボックスに、データエントリフィールドの横に表示する説明ラベルを入力します。 デフォルトでは、Dreamweaver はテーブル列の名前をラベルに表示します。

  • 表示形式ポップアップメニューから、データエントリフィールドとして使用するフォームオブジェクトを選択します。 「テキストフィールド」、「テキストエリア」、「メニュー」、「チェックボックス」、「ラジオボタングループ」、「テキスト」から選択できます。 読み取り専用エントリの場合は、「テキスト」を選択してください。 また「パスワードフィールド」、「ファイルフィールド」、および「非表示フィールド」を選択することもできます。

メモ

非表示フィールドは、フォームの末尾に挿入されます。

  • 送信形式ポップアップメニューから、データベーステーブルで受信する際のデータ形式を選択します。 例えば、数値データのみを表示するテーブル列の場合は、「数値」を選択します。
  • フォームオブジェクトのプロパティを設定します。 オプションは、データエントリフィールドとして選択したフォームオブジェクトによって異なります。 テキストフィールド、テキスト領域、およびテキストの場合は、初期値を入力できます。 メニューグループとラジオボタングループの場合は、別のダイアログボックスが開き、そこでプロパティを設定します。 オプションの場合は「チェック済み」または「未チェック」を選択します。  
別のフォームフィールド行を選択し、ラベル、表示形式値、送信値を入力して、他のフォームオブジェクトのプロパティを設定します。

メニューとラジオグループの場合、別のダイアログボックスを開いてプロパティを設定します。オプションの場合、レコードが表示されるときにオプションがチェックされるかどうかを決定するために、現在のレコードのオプション値と指定された値との比較を定義します。

「OK」をクリックします。

Dreamweaver は HTML フォームと「レコードの更新」サーバービヘイビアの両方をページに追加します。

データオブジェクトは HTML フォームと「レコードの更新」サーバービヘイビアの両方をページに追加します。フォームオブジェクトは基本的なテーブルにレイアウトされ、Dreamweaver のページデザインツールを使用してカスタマイズできます。(すべてのフォームオブジェクトがフォームの境界内に残るようにしてください。)

サーバービヘイビアを編集するには、サーバービヘイビアパネル(ウィンドウ/サーバービヘイビア)を開き、「レコードの更新」サーバービヘイビアをダブルクリックします。

フォームエレメントプロパティダイアログボックスのオプション

「フォーム要素のプロパティ」ダイアログボックスの目的は、ユーザーがデータベースのレコードを更新できるページのフォーム要素のオプションを設定することです。

フォーム要素を作成する方法に応じて、「手動」または「データベースから」のいずれかを選択します。
「+」ボタンをクリックし、エレメントを追加します。
エレメントのラベルおよび値を入力します。
「選択値を次と等しくする」ボックスで、ページがブラウザーで開かれるときや、レコードがフォームに表示されるときに特定の要素を選択したい場合は、要素の値と等しい値を入力します。

静的な値を入力するか、稲妻アイコンをクリックしてデータソースのリストから動的な値を選択して指定することができます。いずれの場合も、指定する値は要素の値のいずれかと一致する必要があります。