検索ページと結果ページの作成

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

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

検索ページと結果ページについて

Dreamweaver を使用して、ユーザーがデータベースを検索し、検索結果を表示できるページセットを作成できます。

ほとんどの場合、この機能を web アプリケーションに追加するには、少なくとも 2 つのページが必要です。最初のページは、ユーザーが検索パラメーターを入力する HTML フォームを含むページです。このページは実際の検索は行いませんが、検索ページと呼ばれます。

2 番目に必要なページは結果ページで、ほとんどの作業を実行します。結果ページでは、以下のタスクを行います。

  • 検索ページから渡された検索パラメーターの読み取り

  • データベースへの接続とレコードの検索

  • 検索されたレコードを含むレコードセットの作成

  • レコードセットの内容の表示

    オプションで、詳細ページを追加できます。詳細ページは、結果ページの特定のレコードに関する詳細情報をユーザーに提供します。

    検索パラメーターが 1 つしかない場合、Dreamweaver では SQL クエリと変数を使用せずに web アプリケーションに検索機能を追加できます。ページをデザインして、いくつかのダイアログボックスに入力するだけです。検索パラメーターが複数ある場合は、SQL 文を作成し、複数の変数を定義する必要があります。

    Dreamweaver はページに SQL クエリを挿入します。ページがサーバーで実行されると、データベーステーブルの各レコードが確認されます。レコード内の指定されたフィールドが SQL クエリ条件を満たす場合、そのレコードはレコードセットに含まれます。SQL クエリは実際に検索結果のみを含むレコードセットを作成します。

    例えば、フィールド営業担当者は、特定の地域で一定のレベル以上の収入を持つ顧客に関する情報を持っている場合があります。検索ページのフォームで、営業担当者は地理的地域と最低収入レベルを入力し、送信ボタンをクリックして2つの値をサーバーに送信します。サーバーでは、値が結果ページの SQL 文に渡され、指定された地域の顧客で、指定されたレベル以上の収入を持つ顧客のみを含むレコードセットが作成されます。

検索ページの作成

Webの検索ページには通常、ユーザーが検索パラメーターを入力するフォームフィールドが含まれています。最低限、検索ページには送信ボタン付きの HTML フォームが必要です。

検索ページに HTML フォームを追加するには、次の手順を実行してください。

検索ページまたは新しいページを開き、「挿入」>「フォーム」>「フォーム」を選択します。

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

挿入メニューからフォームを選択して、ユーザーが検索パラメーターを入力するためのフォームオブジェクトを追加します。

フォームオブジェクトには、テキストフィールド、メニュー、オプション、ラジオボタンなどがあります。ユーザーが検索を絞り込めるように、必要な数のフォームオブジェクトを追加できます。ただし、検索ページの検索パラメーターの数が多いほど、SQL 文はより複雑になることに注意してください。

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

次に、ユーザーが送信ボタンをクリックしたときに、フォームが検索パラメーターを送信する場所を指定します。

次の画像に示すように、ドキュメントウィンドウの下部にあるタグセレクターで <form> タグを選択して、フォームを選択します。
form タグ

フォームのプロパティインスペクターのアクションボックスに、データベース検索を実行する結果ページのファイル名を入力します。
「メソッド」ポップアップメニューで、フォームがサーバーにデータを送信する方法を決定する以下のメソッドのいずれかを選択します:
  • GET は、フォームデータを URL にクエリ文字列として追加することで送信します。URL は 8192 文字に制限されているため、長いフォームでは GET メソッドを使用しないでください。

  • POST は、フォームデータをメッセージの本文で送信します。

  • Default は、ブラウザーのデフォルトメソッド(通常は GET)を使用します。

    検索ページが完成しました。

基本的な結果ページの作成

ユーザーがフォームの検索ボタンをクリックすると、検索パラメーターがサーバー上の結果ページに送信されます。ブラウザー上の検索ページではなく、サーバー上の結果ページがデータベースからレコードを取得する責任があります。検索ページが単一の検索パラメーターをサーバーに送信する場合、SQL クエリや変数を使用せずに結果ページを作成できます。検索ページによって送信された検索パラメーターを満たさないレコードを除外するフィルターを使用して、基本的なレコードセットを作成します。

メモ

複数の検索条件がある場合は、高度なレコードセットダイアログを使用してレコードセットを定義する必要があります(高度な結果ページの作成を参照)。

検索結果を保持するレコードセットを作成します

ドキュメントウィンドウで結果ページを開きます。

まだ結果ページがない場合は、空白の動的ページを作成します(ファイル/新規/空白ページ)。

バインディングパネル(ウィンドウ/バインディング)を開き、プラス(+)ボタンをクリックして、ポップアップメニューからレコードセットを選択して、レコードセットを作成します。
基本設定のレコードセットダイアログボックスが表示されることを確認します。
レコードセットダイアログボックス

メモ

代わりに高度なダイアログボックスが表示された場合は、シンプルボタンをクリックして、シンプルなダイアログボックスに切り替えます。

レコードセットの名前を入力し、接続を選択します。

接続は、ユーザーが検索したいデータを含むデータベースへの接続である必要があります。

テーブルポップアップメニューで、データベースで検索するテーブルを選択します。
メモ

単一パラメーター検索では、単一のテーブル内のレコードのみを検索できます。複数のテーブルを同時に検索するには、 高度なレコードセットダイアログボックスを使用してSQLクエリを定義する必要があります。

レコードセットにテーブルの一部の列のみを含めるには、 「選択済み」をクリックし、リストでControlキーを押しながらクリック (Windows)またはCommandキーを押しながらクリック(Macintosh)して、 目的の列を選択します。

結果ページに表示する情報を含む列のみを 含めるようにしてください。

レコードセットダイアログボックスは今のところ開いたままにしておいてください。次に、これを使用して検索ページから送信されたパラメーターを取得し、 パラメーターに一致しないレコードを除外するレコードセットフィルターを作成します。

レコードセットフィルターの作成

フィルター エリアの最初のポップアップメニューから、データベーステーブル内で 一致を検索する列を選択します。

例えば、検索ページから送信される値が 都市名の場合、テーブル内の都市名を含む列を選択します。

最初のメニューの横にあるポップアップメニューから、 等号(=)を選択します(デフォルトのはずです)。
3番目のポップアップメニューから、検索ページのフォームが POSTメソッドを使用している場合は「フォーム変数」を、 GETメソッドを使用している場合は「URLパラメーター」を選択します。

検索ページは、フォーム変数またはURLパラメーターを使用して 結果ページに情報を渡します。

4番目のボックスには、検索ページで検索パラメーターを 受け取るフォームオブジェクトの名前を入力します。

オブジェクトの名前は、フォーム変数または URLパラメーターの名前としても機能します。名前を取得するには、検索ページに切り替え、フォーム上のフォームオブジェクトをクリックして選択し、プロパティインスペクターでオブジェクトの名前を確認することができます。

例えば、 特定の国へのアドベンチャー旅行のみを含むレコードセットを作成する場合を 想定します。テーブルに TRIPLOCATION という名前の列があるとします。 また、検索ページのHTMLフォームがGETメソッドを使用し、 国のリストを表示するLocationという名前のメニューオブジェクトを含んでいる と仮定します。次の例は、フィルターセクションがどのように表示されるかを示しています。

フォームオブジェクトのパラメーター

(オプション)「テスト」をクリックし、テスト値を入力して「OK」をクリックし、 データベースに接続してレコードセットのインスタンスを作成します。

テスト値は、検索ページから返されたであろう値を シミュレートします。「OK」をクリックしてテスト レコードセットを閉じます。

レコードセットを確認したら、「OK」をクリックします。

サーバーサイドスクリプトがページに挿入され、サーバーで実行される際に データベーステーブルの各レコードをチェックします。レコード内の指定されたフィールドがフィルタリング条件を満たす場合、 そのレコードはレコードセットに含まれます。スクリプトは 検索結果のみを含むレコードセットを作成します。

次のステップは、 結果ページにレコードセットを表示することです。詳細については、 検索結果の表示を参照してください。

高度な結果ページの作成

検索ページが複数の検索パラメーターを サーバーに送信する場合は、結果ページ用のSQLクエリを記述し、 SQL変数で検索パラメーターを使用する必要があります。

メモ

検索条件が 1 つだけの場合は、シンプルなレコードセットダイアログボックスを使用してレコードセットを定義できます(基本的な結果ページを作成するを参照)。

Dreamweaver で結果ページを開き、バインディングパネル(ウィンドウ/バインディング)を開いて、プラス(+)ボタンをクリックし、ポップアップメニューからレコードセットを選択してレコードセットを作成します。
詳細設定のレコードセットダイアログボックスが表示されることを確認します。

詳細設定のダイアログボックスには、SQL ステートメントを入力するためのテキスト領域があります。 シンプルダイアログボックスが表示される場合は、詳細設定ボタンをクリックして詳細設定ダイアログボックスに切り替えます。

レコードセットの名前を入力し、接続を選択します。

接続は、ユーザーが検索したいデータを含むデータベースへの接続である必要があります。

SQL テキスト領域に Select ステートメントを入力します。

ステートメントに、検索パラメーターを保持する変数を含む WHERE 句が含まれていることを確認してください。次の例では、変数は varLastNamevarDept と呼ばれています:

SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE ¬

WHERE LASTNAME LIKE 'varLastName' ¬

AND DEPARTMENT LIKE 'varDept'

入力量を減らすには、詳細設定レコードセットダイアログボックスの下部にあるデータベース項目のツリーを使用できます。手順については、SQL を記述して詳細設定レコードセットを定義するを参照してください。

SQL 構文のヘルプについては、www.adobe.com/go/learn_dw_sqlprimer の SQL 入門を参照してください。

変数領域でプラス(+)ボタンをクリックし、変数の名前、デフォルト値(実行時の値が返されない場合に変数が取る値)、実行時の値(通常はリクエスト変数などのブラウザーによって送信された値を保持するサーバーオブジェクト)を入力して、SQL 変数に検索パラメーターの値を指定します。

次の ASP の例では、検索ページの HTML フォームは GET メソッドを使用し、LastName と呼ばれる 1 つのテキストフィールドと Department と呼ばれるもう 1 つのテキストフィールドを含んでいます:

ASP の例

ColdFusion では、実行時の値は #LastName##Department# になります。PHP の場合、ランタイム値は $_REQUEST["LastName"]$_REQUEST["Department"] になります。

(オプション)テストをクリックして、デフォルトの変数値を使用してレコードセットのインスタンスを作成します。

デフォルト値は、検索ページから返されるであろう値をシミュレートします。OK をクリックしてテストレコードセットを閉じます。

レコードセットを確認したら、「OK」をクリックします。

SQL クエリーがページに挿入されます。

次のステップは、結果ページにレコードセットを表示することです。

検索結果の表示

検索結果を保持するレコードセットを作成したら、結果ページに情報を表示する必要があります。レコードの表示は、バインディングパネルから結果ページに個々の列をドラッグするだけの簡単な作業です。レコードセット内を前後に移動するナビゲーションリンクを追加したり、ページに複数のレコードを表示する繰り返し領域を作成したりできます。また、詳細ページへのリンクを追加することもできます。

動的テーブルで結果を表示する以外のページに動的コンテンツを表示する方法の詳細については、データベースレコードの表示を参照してください。

結果ページで動的テーブルを表示したい場所に挿入ポイントを配置し、挿入/データオブジェクト/動的データ/動的テーブルを選択します。
動的テーブルダイアログボックスを完了し、検索結果を保持するために定義したレコードセットを選択します。
「OK」をクリックします。 検索結果を表示する動的テーブルが 結果ページに挿入されます。

結果ページ用の詳細ページを作成する

検索ページと結果ページのセットには 詳細ページを含めて、結果ページの特定のレコードに関する詳細情報を表示することができます。この場合、結果ページはマスター詳細ページセットのマスターページとしても機能します。

関連ページを開き、既存のパラメーターをそのページに渡すリンクを作成できます。このサーバービヘイビアーは、ASPサーバーモデルを使用している場合にのみ利用できます。

ページにGo To Related Pageサーバービヘイビアーを追加する前に そのページが別のページからフォームまたはURLパラメーターを受け取ることを確認してください。サーバービヘイビアーの役割は これらのパラメーターを第3のページに渡すことです。例えば、結果ページが受け取った検索パラメーターを別のページに渡すことで、ユーザーが検索パラメーターを再度入力する手間を省くことができます。

また、ページ上のテキストや画像を選択して関連ページへのリンクとして使用することも、ページ上で何も選択せずにポインターを配置してリンクテキストを挿入することもできます。

[Go To Related Page] ボックスで [参照] をクリックし、関連ページファイルを見つけます。

現在のページがそれ自身にデータを送信する場合は、現在のページのファイル名を入力してください。

渡したいパラメーターがGETメソッドを使用してHTMLフォームから直接受け取られた場合、またはページのURLにリストされている場合は、URLパラメーターオプションを選択してください。
渡したいパラメーターがPOSTメソッドを使用してHTMLフォームから直接受け取られた場合は、フォームパラメーターオプションを選択してください。
「OK」をクリックします。

新しいリンクがクリックされると、ページはクエリ文字列を使用してパラメーターを関連ページに渡します。