- Dreamweaver ユーザーガイド
- はじめに
- Dreamweaver と Creative Cloud
- Dreamweaver のワークスペースとビュー
- サイトの設定
- ファイルの管理
- レイアウトとデザイン
- CSS
- ページコンテンツとアセット
- ページプロパティの設定
- CSS 見出しプロパティおよび CSS リンクプロパティの設定
- テキストの操作
- テキスト、タグ、属性の検索と置換
- DOM パネル
- ライブビューでの編集
- Dreamweaver でのドキュメントのエンコード
- ドキュメントウィンドウでのエレメントの選択および表示
- プロパティインスペクターでのテキストプロパティの設定
- web ページのスペルチェック
- Dreamweaver での区切り線の使用
- Dreamweaver でのフォントの組み合わせの追加と変更
- アセットを使用した作業
- Dreamweaver での日付の挿入と更新
- Dreamweaver でのお気に入りアセットの作成と管理
- Dreamweaver でのイメージの挿入と編集
- メディアオブジェクトの追加
- Dreamweaver でのビデオの追加
- HTML5 ビデオの挿入
- SWF ファイルの挿入
- オーディオエフェクトの追加
- Dreamweaver での HTML5 オーディオの挿入
- ライブラリ項目の操作
- Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
- リンクおよびナビゲーション
- jQuery Widget と効果
- web サイトのコーディング
- Dreamweaver でのコーディングについて
- Dreamweaver のコーディング環境
- コーディングの環境設定
- コードカラーリングのカスタマイズ
- コードの記述と編集
- コードヒントとコード補完機能
- コードの折りたたみと展開
- スニペットでコードを再利用する
- 構文チェックコード
- コードの最適化
- デザインビューでのコードの編集
- ページのヘッドコンテンツの操作
- Dreamweaver でのサーバーサイドインクルードの挿入
- Dreamweaver でのタグライブラリの使用
- Dreamweaver へのカスタムタグの読み込み
- JavaScript ビヘイビアーの使用(基本操作)
- JavaScript に組み込まれているビヘイビアーの適用
- XML および XSLT について
- Dreamweaver でのサーバーサイド XSL 変換の実行
- Dreamweaver でのクライアントサイド XSL 変換の実行
- Dreamweaver での XSLT の文字エンティティの追加
- コードのフォーマット
- 製品間ワークフロー
- テンプレート
- Dreamweaver テンプレートについて
- テンプレートおよびテンプレートから作成されたドキュメントの認識
- Dreamweaver テンプレートの作成
- テンプレート編集可能領域の作成
- Dreamweaver でのリピート領域およびテーブルの作成
- テンプレートの任意の領域の使用
- Dreamweaver での編集可能なタグ属性の定義
- Dreamweaver でネストされたテンプレートを作成する方法
- テンプレートの編集、更新、削除
- Dreamweaver での xml コンテンツの書き出しおよび読み込み
- 既存のドキュメントでのテンプレートの適用または削除
- Dreamweaver テンプレートでのコンテンツの編集
- Dreamweaver でのテンプレートタグのシンタックスルール
- テンプレート領域のハイライト表示の環境設定
- Dreamweaver でテンプレートを使用する利点
- モバイルとマルチスクリーン
- 動的サイト、ページおよび web フォーム
- web アプリケーションについて
- アプリケーション開発のためのコンピューター設定
- データベース接続のトラブルシューティング
- Dreamweaver での接続スクリプトの削除
- 動的ページのデザイン
- 動的コンテンツソースの概要
- 動的コンテンツのソースの定義
- ページへの動的コンテンツの追加
- Dreamweaver での動的コンテンツの変更
- データベースのレコードの表示
- Dreamweaver でのライブデータの入力とトラブルシューティング
- Dreamweaver でのカスタムサーバービヘイビアーの追加
- Dreamweaver を使用したフォームの作成
- フォームを使用したユーザーからの情報の収集
- Dreamweaver での ColdFusion フォームの作成と有効化
- web フォームの作成
- フォームエレメントの HTML5 サポート強化
- Dreamweaver を使用したフォームの開発
- アプリケーションのビジュアル開発
- web サイトのテスト、プレビュー、パブリッシュ
- トラブルシューティング
Dreamweaver アプリケーションで、ユーザーがデータベースに新しいレコードを挿入することができるレコード挿入ページを作成する方法について説明します。
Dreamweaver 以降では、ユーザーインターフェイスが簡素化されています。そのため、この記事で説明されているオプションの一部が Dreamweaver 以降には存在しない場合があります。詳しくは、この記事を参照してください。
レコード挿入ページについて
ユーザーがデータベースに新しいレコードを挿入するためのページを、アプリケーションに含めることができます。
挿入ページは、次の 2 つの作成ブロックで構成されます。
ユーザーがデータを入力する HTML フォーム
データベースを更新する「レコードの挿入」サーバービヘイビアー
ユーザーがフォーム上の「送信」ボタンをクリックしたときに、サーバービヘイビアーによってデータベーステーブルにレコードが挿入されます。
これらの 2 つの作成ブロックは、「レコード挿入フォーム」データオブジェクトを使用して 1 回の操作で追加できます。または、Dreamweaver のフォームツールとサーバービヘイビアーパネルを使用して 1 つずつ追加することもできます。
挿入ページが保有できるレコード編集用のサーバービヘイビアーは、常に 1 つだけです。例えば、挿入ページには「レコードの更新」や「レコードの削除」などのサーバービヘイビアーを追加できません。
ブロックごとの挿入ページの作成
フォームツールとサーバービヘイビアーを使用して挿入ページを作成することもできます。
挿入ページへの HTML フォームの追加
-
ファイル/新規/空白ぺージを選択して動的ページを新規作成し、Dreamweaver のデザインツールを使用してページをレイアウトします。
-
フォームを挿入する位置に挿入ポイントを置いて、挿入/フォーム/フォームを選択し、HTML フォームを追加します。
ページに空白のフォームが作成されます。フォームの境界線を表示するには、表示/ビジュアルエイド/不可視エレメントを選択する必要があります。フォームの境界線は細い赤線で表示されます。
-
HTML フォームの名前を指定します。ドキュメントウィンドウの下部にある <form> タグをクリックし、ウィンドウ/プロパティを選択してプロパティインスペクターを開き、「フォーム名」ボックスに名前を入力します。
フォームの action 属性や method 属性を指定して、ビジターが「送信」ボタンをクリックしたときのレコードの送信先や送信方法を指示する必要はありません。「レコードの挿入」サーバービヘイビアーが自動的にこれらの属性を設定します。
-
レコードの挿入先となるデータベーステーブルの各列に、テキストフィールドなどのフォームオブジェクトを追加します(挿入/フォーム/テキストフィールド)。
フォームオブジェクトはデータエントリ用です。データエントリには一般的にテキストフィールドを使用しますが、メニュー、オプション、ラジオボタンなども使用できます。
-
挿入/フォーム/ボタンを選択して、フォームに「送信」ボタンを追加します。
「送信」ボタンのラベルを変更するには、ボタンを選択し、ウィンドウ/プロパティを選択してプロパティインスペクターを開き、「ラベル」ボックスに新しい値を入力します。
データベーステーブルにレコードを挿入するサーバービヘイビアーの追加(ColdFusion)
-
サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)で「+」ボタンをクリックし、ポップアップメニューから「レコードの挿入」を選択します。
-
値送信元ポップアップメニューからフォームを選択します。
-
データソースポップアップメニューからデータベースへの接続を選択します。
-
ユーザー名とパスワードを入力します。
-
更新対象テーブルポップアップメニューから、レコードの挿入先のデータベーステーブルを選択します。
-
レコードの挿入先のデータベース列を指定し、値ポップアップメニューからレコードの挿入元のフォームオブジェクトを選択し、このフォームオブジェクトのデータタイプを送信形式ポップアップメニューから選択します。
データタイプとは、データベーステーブルの列に入力できるデータの種類です。データタイプには、テキスト、数値、ブールオプション値があります。
フォーム内の各フォームオブジェクトについて、この操作を繰り返します。
-
テーブルにレコードを挿入した後に開くページを、「挿入後の移動先」ボックスに入力するか、または「参照」ボタンをクリックしてファイルを参照します。
-
「OK」をクリックします。
Dreamweaver によってサーバービヘイビアーがページに追加されます。HTML フォームに記入して「送信」ボタンをクリックすることで、ユーザーがレコードをデータベーステーブルに挿入できるようになります。
データベーステーブルにレコードを挿入するサーバービヘイビアーの追加(ASP)
-
サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)で「+」ボタンをクリックし、ポップアップメニューから「レコードの挿入」を選択します。
-
接続ポップアップメニューからデータベースへの接続を選択します。
接続を定義する必要がある場合は、「定義」ボタンをクリックします。
-
更新対象テーブルポップアップメニューから、レコードの挿入先のデータベーステーブルを選択します。
-
テーブルへのレコード挿入後に開くページを、「挿入後の移動先」ボックスに入力するか、または「参照」をクリックしてファイルを参照します。
-
値取得元ポップアップメニューから、データ入力に使用する HTML フォームを選択します。
Dreamweaver によって、ページの最初のフォームが自動的に選択されます。
-
レコードの挿入先のデータベース列を指定し、値ポップアップメニューからレコードの挿入元のフォームオブジェクトを選択し、このフォームオブジェクトのデータタイプを送信形式ポップアップメニューから選択します。
データタイプとは、データベーステーブルの列に入力できるデータの種類です。データタイプには、テキスト、数値、ブールオプション値があります。
フォーム内の各フォームオブジェクトについて、この操作を繰り返します。
-
「OK」をクリックします。
Dreamweaver によってサーバービヘイビアーがページに追加されます。HTML フォームに記入して「送信」ボタンをクリックすることで、ユーザーがレコードをデータベーステーブルに挿入できるようになります。
サーバービヘイビアーを編集するには、ウィンドウ/サーバービヘイビアーを選択してサーバービヘイビアーパネルを開き、「レコードの挿入」ビヘイビアーをダブルクリックします。
データベーステーブルにレコードを挿入するサーバービヘイビアーの追加(PHP)
-
サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)で「+」ボタンをクリックし、ポップアップメニューから「レコードの挿入」を選択します。
-
値送信元ポップアップメニューからフォームを選択します。
-
接続ポップアップメニューからデータベースへの接続を選択します。
-
テーブルの挿入ポップアップメニューから、レコードの挿入先のデータベーステーブルを選択します。
-
レコードの挿入先のデータベース列を指定し、値ポップアップメニューからレコードの挿入元のフォームオブジェクトを選択し、このフォームオブジェクトのデータタイプを送信形式ポップアップメニューから選択します。
データタイプとは、データベーステーブルの列に入力できるデータの種類です。データタイプには、テキスト、数値、ブールオプション値があります。
フォーム内の各フォームオブジェクトについて、この操作を繰り返します。
-
テーブルにレコードを挿入した後に開くページを、「挿入後の移動先」ボックスに入力するか、または「参照」ボタンをクリックしてファイルを参照します。
-
「OK」をクリックします。
Dreamweaver によってサーバービヘイビアーがページに追加されます。HTML フォームに記入して「送信」ボタンをクリックすることで、ユーザーがレコードをデータベーステーブルに挿入できるようになります。
1 回の操作による挿入ページの作成
-
デザインビューでページを開き、挿入/データオブジェクト/レコードの挿入/レコード挿入フォームウィザードを選択します。
-
接続ポップアップメニューからデータベースへの接続を選択します。接続を定義する必要がある場合は、「定義」ボタンをクリックします。
-
更新対象テーブルポップアップメニューから、レコードの挿入先のデータベーステーブルを選択します。
-
ColdFusion を使用する場合は、ユーザー名とパスワードを入力します。
-
テーブルにレコードを挿入した後に開くページを、「挿入後の移動先」ボックスに入力するか、または「参照」ボタンをクリックしてファイルを参照します。
-
「フォームフィールド」領域で、挿入ページの HTML フォームに含めるフォームオブジェクトを指定し、各フォームオブジェクトが更新するデータベーステーブル内の列を指定します。
初期設定では、Dreamweaver は、データベーステーブルの各列に対してフォームオブジェクトを 1 つずつ作成します。使用しているデータベースで、新規作成されたレコードに対して自動的に固有のキー ID が生成される場合は、そのキー列に対応するフォームオブジェクトをリストから選択し、「-」ボタンをクリックして削除してください。削除しておけば、フォームを使用するユーザーが既に存在している ID の値を入力してしまうことはありません。
リストからフォームオブジェクトを選択し、ダイアログボックスの右側にある上向きまたは下向きの矢印をクリックすると、HTML フォームのフォームオブジェクトの並び順を変更することができます。
-
「フォームフィールド」テーブルの行をクリックし、このテーブルの下のボックスに次の情報を入力して、HTML フォームでの各データエントリフィールドの表示方法を指定します。
「ラベル」ボックスに、データエントリフィールドの横に表示する説明ラベルを入力します。Dreamweaver では、初期設定のラベルとしてテーブル列の名前が表示されます。
表示形式ポップアップメニューから、データエントリフィールドとして使用するフォームオブジェクトを選択します。「テキストフィールド」、「テキストエリア」、「メニュー」、「チェックボックス」、「ラジオボタングループ」、「テキスト」から選択できます。読み取り専用エントリの場合は、「テキスト」を選択してください。また「パスワードフィールド」、「ファイルフィールド」、および「非表示フィールド」を選択することもできます。
注意:非表示フィールドは、フォームの末尾に挿入されます。
- 送信形式ポップアップメニューから、データベーステーブルで受信する際のデータ形式を選択します。例えば、数値データのみを表示するテーブル列の場合は、「数値」を選択します。
- フォームオブジェクトのプロパティを設定します。オプションは、データエントリフィールドとして選択したフォームオブジェクトによって異なります。テキストフィールド、テキスト領域、およびテキストの場合は、初期値を入力できます。メニューグループとラジオボタングループの場合は、別のダイアログボックスが開き、そこでプロパティを設定します。オプションの場合は「チェック済み」または「未チェック」を選択します。
-
「OK」をクリックします。
Dreamweaver によって、HTML フォームと「レコードの挿入」サーバービヘイビアーの両方がページに自動的に追加されます。フォームオブジェクトが基本テーブルに配置され、Dreamweaver のページデザインツールでカスタマイズできるようになります。フォームオブジェクト全体がフォームの境界内に収まるようにしてください。
サーバービヘイビアーを編集するには、ウィンドウ/サーバービヘイビアーを選択してサーバービヘイビアーパネルを開き、「レコードの挿入」ビヘイビアーをダブルクリックします。