검색 및 결과 페이지 빌드

마지막 업데이트 날짜 2024년 4월 25일
메모

Dreamweaver의 현재 버전 이후로 사용자 인터페이스가 간소화되었습니다. 따라서 이 문서에 설명된 옵션 중에 Dreamweaver의 현재 버전에 없는 옵션이 있을 수 있습니다. 자세한 내용은 이 문서를 참조하십시오.

검색 및 결과 페이지 정보

Dreamweaver를 사용하여 사용자가 데이터베이스를 검색하고 검색 결과를 볼 수 있는 페이지 세트를 작성할 수 있습니다.

대부분의 경우 웹 애플리케이션에 이 기능을 추가하려면 최소 두 개의 페이지가 필요합니다. 첫 번째 페이지는 사용자가 검색 매개변수를 입력하는 HTML 양식이 포함된 페이지입니다. 이 페이지는 실제로 검색을 수행하지 않지만 검색 페이지라고 합니다.

필요한 두 번째 페이지는 대부분의 작업을 수행하는 결과 페이지입니다.결과 페이지에서는 다음 작업을 수행합니다.

  • 검색 페이지에서 전송한 검색 매개 변수를 읽습니다.

  • 데이터베이스에 연결하여 레코드를 검색합니다.

  • 검색한 레코드로 레코드세트를 구성합니다.

  • 레코드세트의 내용을 표시합니다.

    선택적으로 세부 정보 페이지를 추가할 수 있습니다. 세부 정보 페이지는 사용자에게 결과 페이지의 특정 레코드에 대한 더 많은 정보를 제공합니다.

    검색 매개변수가 하나뿐인 경우 Dreamweaver에서는 SQL 쿼리 및 변수를 사용하지 않고도 웹 애플리케이션에 검색 기능을 추가할 수 있습니다. 페이지를 간단히 디자인하고 몇 개의 대화 상자를 완성하세요.검색 매개변수가 둘 이상인 경우 SQL 문을 작성하고 여러 변수를 정의해야 합니다.

    Dreamweaver가 페이지에 SQL 쿼리를 삽입합니다. 페이지가 서버에서 실행되면 데이터베이스 테이블의 각 레코드가 확인됩니다. 레코드의 지정된 필드가 SQL 쿼리 조건을 충족하면 해당 레코드가 레코드 세트에 포함됩니다. SQL 쿼리는 실제로 검색 결과만 포함하는 레코드 세트를 작성합니다.

    예를 들어, 현장 영업 직원은 특정 지역의 일정 수준 이상 소득을 가진 고객에 대한 정보를 보유하고 있을 수 있습니다.검색 페이지의 양식에서 영업 담당자는 지역과 최소 소득 레벨을 입력한 다음 [제출] 버튼을 클릭하여 두 값을 서버로 보냅니다. 서버에서 이 값들은 결과 페이지의 SQL 문으로 전달되어 지정된 지역에 있고 지정된 수준 이상의 소득을 가진 고객만 포함하는 레코드 세트를 만듭니다.

검색 페이지 구성

웹의 검색 페이지에는 일반적으로 사용자가 검색 조건을 입력하는 양식 필드가 포함되어 있습니다.최소한 검색 페이지에는 [제출] 버튼이 있는 HTML 양식이 있어야 합니다.

검색 페이지에 HTML 양식을 추가하려면 다음 절차를 완료하십시오.

검색 페이지 또는 새 페이지를 열고 [삽입] > [양식] > [양식]을 선택하십시오.

페이지에 빈 양식이 만들어집니다. 양식의 경계를 보려면 보이지 않는 요소([보기] > [시각 보조 도구] > [보이지 않는 요소])를 활성화해야 할 수 있습니다. 경계는 얇은 빨간 선으로 표시됩니다.

[삽입] 메뉴에서 [양식]을 선택하여 사용자가 검색 매개변수를 입력할 양식 객체를 추가하십시오.

양식 객체에는 텍스트 필드, 메뉴, 옵션 및 라디오 버튼이 포함됩니다. 사용자가 검색을 세분화할 수 있도록 원하는 만큼 양식 객체를 추가할 수 있습니다. 하지만 검색 페이지의 검색 매개변수 수가 많을수록 SQL 문이 더 복잡해진다는 점을 유념하십시오.

양식에 제출 버튼을 추가합니다([삽입] > [양식] > [버튼]).
(선택 사항) 버튼을 선택하고 속성 관리자를 열어([창] > [속성]) [값] 상자에 새 값을 입력하여 제출 버튼의 레이블을 변경합니다.

다음으로, 사용자가 제출 버튼을 클릭할 때 폼에서 검색 매개변수를 보낼 위치를 지정합니다.

다음 이미지와 같이 문서 창 하단의 태그 선택기에서 <form> 태그를 선택하여 폼을 선택합니다:
양식 태그

폼의 속성 관리자에 있는 [액션] 상자에 데이터베이스 검색을 수행할 결과 페이지의 파일명을 입력하십시오.
[메서드] 팝업 메뉴에서 폼이 서버로 데이터를 전송하는 방법을 결정하는 다음 방법 중 하나를 선택하십시오:
  • GET은 폼 데이터를 쿼리 문자열로 URL에 추가하여 전송합니다.URL은 8192자로 제한되므로 긴 폼에서는 GET 메서드를 사용하지 마십시오.

  • POST는 메시지 본문에 폼 데이터를 전송합니다.

  • Default는 브라우저의 기본 메서드를 사용합니다(일반적으로 GET).

    검색 페이지가 완료되었습니다.

기본 결과 페이지 구성

사용자가 양식의 [검색] 버튼을 클릭하면 검색 매개변수가 서버의 결과 페이지로 전송됩니다. 브라우저의 검색 페이지가 아닌 서버의 결과 페이지가 데이터베이스에서 레코드를 검색하는 역할을 담당합니다. 검색 페이지가 서버에 단일 검색 매개변수를 제출하는 경우 SQL 쿼리와 변수 없이 결과 페이지를 작성할 수 있습니다. 검색 페이지에서 제출된 검색 매개변수를 충족하지 않는 레코드를 제외하는 필터가 있는 기본 레코드 집합을 만듭니다.

메모

검색 조건이 둘 이상인 경우 고급 레코드 집합 대화 상자를 사용하여 레코드 집합을 정의해야 합니다(고급 결과 페이지 작성 참조).

검색 결과를 저장할 레코드 집합 만들기

문서 창에서 결과 페이지를 엽니다.

아직 결과 페이지가 없는 경우 빈 동적 페이지를 만듭니다([파일] > [새로 만들기] > [빈 페이지]).

[바인딩] 패널을 열고([창] > [바인딩]) 더하기(+) 버튼을 클릭한 다음 팝업 메뉴에서 [레코드 집합]을 선택하여 레코드 집합을 만듭니다.
단순 [레코드세트] 대화 상자가 나타나는지 확인합니다.
레코드세트 대화 상자

메모

고급 대화 상자가 나타나면 [단순] 버튼을 클릭하여 단순 대화 상자로 전환합니다.

레코드세트의 이름을 입력하고 연결을 선택합니다.

연결은 사용자가 검색하려는 데이터가 포함된 데이터베이스에 대한 것이어야 합니다.

[테이블] 팝업 메뉴에서 데이터베이스에서 검색할 테이블을 선택합니다.
메모

단일 매개변수 검색에서는 단일 테이블의 레코드만 검색할 수 있습니다. 한 번에 둘 이상의 테이블을 검색하려면 고급 레코드세트 대화상자를 사용하고 SQL 쿼리를 정의해야 합니다.

레코드세트에 테이블 열 중 일부만 포함하려면 [선택됨]을 클릭하고 목록에서 Ctrl 키를 누른 채 클릭(Windows) 또는 Command 키를 누른 채 클릭(Macintosh)하여 원하는 열을 선택합니다.

결과 페이지에 표시할 정보가 포함된 열만 포함해야 합니다.

레코드세트 대화 상자는 지금 열어 두세요.다음에 검색 페이지에서 전송된 매개변수를 가져오고 매개변수를 충족하지 않는 레코드를 제외하는 레코드세트 필터를 만드는 데 사용합니다.

레코드세트 필터 만들기

필터 영역의 첫 번째 팝업 메뉴에서 일치를 검색할 데이터베이스 테이블의 열을 선택합니다.

예를 들어, 검색 페이지에서 보낸 값이 도시 이름인 경우 테이블에서 도시 이름이 포함된 열을 선택합니다.

첫 번째 메뉴 옆의 팝업 메뉴에서 등호를 선택합니다(기본값입니다).
세 번째 팝업 메뉴에서 검색 페이지의 양식이 POST 방법을 사용하는 경우 양식 변수를 선택하거나 GET 방법을 사용하는 경우 URL 매개 변수를 선택합니다.

검색 페이지는 양식 변수 또는 URL 매개 변수를 사용하여 정보를 결과 페이지로 전달합니다.

네 번째 상자에서 검색 페이지의 검색 매개 변수를 받는 양식 객체의 이름을 입력합니다.

오브젝트의 이름은 폼 변수 또는 URL 매개변수의 이름과 동일합니다.검색 페이지로 전환하고 양식 오브젝트를 클릭하여 선택한 다음 속성 검사기에서 오브젝트의 이름을 확인하여 이름을 가져올 수 있습니다.

예를 들어, 특정 국가로의 모험 여행만 포함하는 레코드세트를 만들고 싶다고 가정해 보겠습니다.테이블에 TRIPLOCATION이라는 열이 있고, 또한 검색 페이지의 HTML 양식이 GET 방법을 사용하고 국가 목록을 표시하는 Location이라는 메뉴 객체를 포함한다고 가정합니다.다음 예제는 필터 섹션이 어떻게 표시되어야 하는지 보여줍니다:

양식 오브젝트 매개 변수

(선택 사항) [테스트]를 클릭하고 테스트 값을 입력한 다음 [확인]을 클릭하여 데이터베이스에 연결하고 레코드세트의 인스턴스를 만듭니다.

테스트 값은 검색 페이지에서 반환되었을 값을 시뮬레이션합니다.[확인]을 클릭하여 테스트 레코드세트를 닫습니다.

레코드세트가 적절하다고 판단되면 [확인]을 클릭합니다.

서버에서 실행될 때 데이터베이스 테이블의 각 레코드를 확인하는 서버측 스크립트가 페이지에 삽입됩니다.레코드의 지정된 필드가 필터링 조건을 충족하면 레코드가 레코드세트에 포함됩니다.스크립트는 검색 결과만 포함하는 레코드세트를 구성합니다.

다음 단계는 결과 페이지에 레코드세트를 표시하는 것입니다.자세한 내용은 검색 결과 표시를 참조하십시오.

고급 결과 페이지 구성

검색 페이지가 둘 이상의 검색 매개 변수를 서버에 전송하는 경우 결과 페이지에 대한 SQL 쿼리를 작성하고 SQL 변수에서 검색 매개 변수를 사용해야 합니다.

메모

검색 조건이 하나뿐인 경우 간단한 레코드세트 대화 상자를 사용하여 레코드세트를 정의할 수 있습니다(기본 결과 페이지 작성 참조).

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이라는 하나의 텍스트 필드와 Department라는 다른 필드를 포함합니다:

ASP 예제

ColdFusion에서는 런타임 값이 #LastName##Department#입니다. PHP에서 런타임 값은 $_REQUEST["LastName"]$_REQUEST["Department"]입니다.

(선택 사항) [테스트]를 클릭하여 기본 변수 값을 사용하는 레코드세트의 인스턴스를 만듭니다.

기본값은 검색 페이지에서 반환되었을 값들을 시뮬레이션합니다.[확인]을 클릭하여 테스트 레코드세트를 닫습니다.

레코드세트가 적절하다고 판단되면 [확인]을 클릭합니다.

페이지에 SQL 쿼리가 삽입됩니다.

다음 단계는 결과 페이지에 레코드세트를 표시하는 것입니다.

검색 결과 표시

검색 결과를 보관하는 레코드세트를 만든 후에는 결과 페이지에 정보를 표시해야 합니다. 레코드 표시는 바인딩 패널에서 결과 페이지로 개별 열을 드래그하는 간단한 작업일 수 있습니다. 레코드세트를 통해 앞뒤로 이동하는 탐색 링크를 추가하거나 페이지에 둘 이상의 레코드를 표시하는 반복 영역을 만들 수 있습니다.또한 세부 정보 페이지에 링크를 추가할 수도 있습니다.

동적 테이블에서 결과를 표시하는 것 이외에 페이지에서 동적 콘텐츠를 표시하는 방법에 대한 자세한 정보는 데이터베이스 레코드 표시를 참조하십시오.

결과 페이지에서 동적 테이블이 표시될 위치에 삽입점을 놓고 [삽입] > [데이터 오브젝트] > [다이내믹 데이터] > [동적 테이블]을 선택합니다.
동적 테이블 대화 상자를 완성하여 검색 결과를 보관하도록 정의한 레코드세트를 선택합니다.
[확인]을 클릭합니다. 검색 결과를 표시하는 동적 테이블이 결과 페이지에 삽입됩니다.

결과 페이지에 대한 세부 정보 페이지 만들기

검색 및 결과 페이지 집합에는 결과 페이지의 특정 레코드에 대한 자세한 정보를 표시하는 세부 정보 페이지가 포함될 수 있습니다. 이 경우 결과 페이지는 마스터-세부 정보 페이지 집합에서 마스터 페이지의 역할도 합니다.

관련 페이지를 열고 기존 매개 변수를 해당 페이지로 전달하는 링크를 만들 수 있습니다. 서버 동작은 ASP 서버 모델을 사용할 때만 사용할 수 있습니다.

페이지에 관련 페이지로 이동 서버 동작을 추가하기 전에 해당 페이지가 다른 페이지에서 양식 또는 URL 매개 변수를 받는지 확인하십시오. 서버 동작의 역할은 이러한 매개 변수를 세 번째 페이지로 전달하는 것입니다. 예를 들어, 결과 페이지에서 받은 검색 매개 변수를 다른 페이지로 전달하여 사용자가 검색 매개 변수를 다시 입력하지 않아도 되도록 할 수 있습니다.

또한 페이지의 텍스트나 이미지를 선택하여 관련 페이지로의 링크로 사용하거나, 아무것도 선택하지 않고 페이지에 포인터를 놓으면 링크 텍스트가 삽입됩니다.

[관련 페이지로 이동] 상자에서 [찾아보기]를 클릭하고 관련 페이지 파일을 찾습니다.

현재 페이지가 자신에게 데이터를 제출하는 경우 현재 페이지의 파일 이름을 입력하십시오.

전달하려는 매개 변수가 GET 방법을 사용하여 HTML 양식에서 직접 받은 것이거나 페이지의 URL에 나열되어 있는 경우 [URL 매개 변수] 옵션을 선택합니다.
전달하려는 매개 변수가 POST 방법을 사용하여 HTML 양식에서 직접 받은 것인 경우 [양식 매개 변수] 옵션을 선택합니다.
[확인]을 클릭합니다.

새 링크를 클릭하면 페이지는 쿼리 문자열을 사용하여 관련 페이지로 매개 변수를 전달합니다.