JavaServer Faces를 사용하여 웹 페이지에 동적 정보 표시 > 모듈 1: 데이터 연결을 사용하여 웹 페이지 작성 >
< 이전 | 다음 >

학습 1.2: 데이터베이스에 대한 연결 및 웹 페이지에 데이터 표시

이 학습에서는 데이터베이스를 연결하는 방법과 웹 페이지에 데이터 레코드를 표시하는 방법에 대해 설명합니다. 또한 웹 페이지로 관계형 레코드 목록을 추가하는 방법에 대해서도 설명합니다.

이 학습의 웹 사이트는 JavaServer Faces 컴포넌트가 있는 동적 웹 페이지를 사용하여 데이터베이스를 액세스하고 정보를 페이지에 표시합니다. 이 학습은 데이터베이스의 데이터를 설명하는 관계형 레코드 및 관계형 레코드 목록을 사용하므로 데이터를 데이터 테이블 또는 일반 HTML 테이블 양식으로 페이지에 표시할 수 있습니다. 이러한 컴포넌트로 Java™ 액세스 Bean이 사용됩니다.

데이터 액세스 Bean에 대한 추가 학습

데이터 액세스 Bean은 엔터프라이즈 Bean 중에서 Java Bean을 나타냅니다. 일반적으로 JSP(JavaServer Pages) 파일, Servlet 또는 다른 엔터프라이즈 Bean과 상호 작용하는 엔터프라이즈 Bean을 사용하는 클라이언트 프로그램에서 사용됩니다. 액세스 Bean을 사용하면 엔터프라이즈 Bean 사용 주기를 간단하게 관리할 수 있습니다. 즉, Java Bean을 프로그래밍하는 것처럼 쉽게 엔터프라이즈 Bean을 프로그래밍할 수 있으며, 이를 통해 엔터프라이즈 Bean 클라이언트 프로그램을 단순화하고 전체 개발 시간을 단축시킬 수 있습니다.

JavaServer Faces 및 Faces 컴포넌트에 대한 추가 학습

JavaServer Faces는 서버에서 실행되는 동적 웹 응용프로그램에 대해 사용자 인터페이스를 빌드할 수 있도록 도와주는 기술입니다. JavaServer Faces 프레임워크는 서버 요청에 대한 UI 상태를 관리하고 클라이언트에서 활성화한 서버측 이벤트의 개발을 위해 간단한 모델을 제공합니다. JavaServer Faces는 MVC(모델-보기-제어기) 프레임워크를 기본으로 합니다. JavaServer Faces의 경우 제어기는 servlet이고 모델은 JavaBeans™에서 표시하며 보기는 응용프로그램 코드가 없거나 조금만 있는 JavaServer Faces 컴포넌트로 구성된다는 의미가 됩니다. 이 모델의 목적은 프리젠테이션과 컨텐츠를 구별하는 데 있습니다.

Faces 컴포넌트와 같은 도구를 통해 사용자의 웹 응용프로그램에서 이 기술을 사용할 수 있습니다. Faces 컴포넌트에는 JavaServer Faces 인터페이스를 페이지 내에서 표현하기 위한 JSP(JavaServer Page) 사용자 정의 태그 라이브러리가 포함되어 있습니다. 이 마법사를 통해 Faces 컴포넌트를 사용하는 데 활용 가능한 JSP 파일을 작성할 수 있습니다. Faces 컴포넌트를 사용하면 팔레트 보기의 Faces 드로어에서 컴포넌트를 끌어 작성 중인 웹 페이지에 놓는 방법으로 웹 응용프로그램을 개발할 수 있습니다.

예를 들어, 텍스트 입력 필드를 끌어 페이지의 양식에 놓을 수 있습니다. 그런 다음, 실행 단추를 텍스트 입력 필드 옆에 끌어 놓을 수 있습니다. 마지막으로 해당 텍스트 입력 필드를 데이터 소스에 연결시킬 수 있습니다. 이렇게 하면 일반 사용자가 웹 응용프로그램에서 데이터 소스로 데이터를 입력할 수 있습니다.

Faces 컴포넌트를 사용하여 응용프로그램을 빌드할 때 얻을 수 있는 또 다른 이점은 사용자 인터페이스가 기본 프로그램 로직과 독립적으로 렌더링된다는 점입니다. 즉, 사용자의 응용프로그램이 서로 다른 플랫폼(예: 브라우저 또는 휴대용 장치)에서 실행되고 데이터에 액세스할 수 있습니다.
팔레트의 향상된 Faces 컴포넌트 드로어

관계형 레코드 목록 추가

이 학습에서는 데이터베이스에 있는 모든 안내 광고를 표시하는 관계형 레코드 목록을 작성합니다. 그런 다음, 데이터베이스에 연결하고 필요한 정보를 관계형 레코드 목록에 보관하는 테이블을 선택합니다. 마지막으로 이 관계형 레코드 목록을 데이터 테이블의 페이지에 표시합니다.
  • 관계형 레코드는 데이터베이스에서 하나의 레코드에만 연결됩니다. 이 경우 관계형 레코드는 샘플 데이터베이스의 단일 안내 광고를 표시합니다. 관계형 레코드를 사용하면 새 레코드를 작성하거나 기존 레코드를 편집하거나 이전 레코드를 삭제할 수 있습니다.
  • 관계형 레코드 목록은 데이터베이스에서 둘 이상의 레코드에 연결됩니다. 이 경우 관계형 레코드 목록은 샘플 데이터베이스의 안내 광고를 두 개 이상 모두 표시합니다.
  • 데이터 테이블은 관계형 레코드 목록의 데이터를 페이지에 표시합니다. 데이터 테이블은 단순히 레코드 및 레코드 목록의 위치를 지정합니다. 이 테이블은 HTML 테이블과 같이 데이터를 행과 열로 형식화하지 않습니다.
    데이터 테이블에 대한 추가 학습

    데이터 테이블은 관계형 레코드 목록과 같은 데이터 오브젝트를 보유하는 Faces JSP 페이지의 컴포넌트입니다.데이터 테이블은 HTML 테이블과 마찬가지로 행과 열로 표시되지만 HTML 테이블처럼 작동하지 않습니다. 테이블에서처럼 입력 및 출력 제어를 형식화하려면 팔레트의 향상된 Faces 컴포넌트 드로어에서 패널 - 그룹 상자를 사용해야 합니다. 이에 대한 내용은 학습 2.2: 데이터 테이블 형식화에서 다루게 됩니다.

    데이터 테이블은 Faces 컴포넌트이지 HTML 컴포넌트가 아니므로 Page Designer 보기가 아닌 특성 보기를 통해 제어됩니다. 특성 보기를 사용하면 다음과 같은 다양한 방법으로 데이터 테이블을 사용자 정의할 수 있습니다.
    • 열 추가, 제거 및 순서 변경
    • 텍스트 및 배경 형식화
    • 헤더, 바닥글 및 여백 추가
    • 결과 표시를 위한 페이징 추가

새 관계형 레코드 목록을 작성하려면 다음을 수행하십시오.

  1. 웹 Perspective의 프로젝트 탐색기 보기에서 ClassifiedsTutorial > WebContent를 펼치십시오.
  2. WebContent 폴더에서 all_records.jsp를 두 번 클릭하십시오. all_records.jsp 파일이 편집기에 열립니다.
  3. 기본 텍스트에 해당하는 본문 영역의 기본 컨텐츠를 삭제하십시오.
  4. 팔레트 보기에서 데이터 드로어를 펼치십시오.
  5. 팔레트에서 관계형 레코드 목록 컴포넌트를 끌어와 공백 컨텐츠 영역에 놓으십시오. 관계형 레코드 목록 추가 창이 열립니다.
  6. 이름 필드에 all_recordlist를 입력하십시오. 관계형 레코드 목록 및 관계형 레코드 이름은 변수 이름에 사용되는 Java 표준 이름 지정 규칙을 준수해야 합니다. (예를 들면, 이름에 공백이 없어야 합니다.)
  7. 데이터 제어 추가가 선택되어 있는지 확인하십시오. 데이터 제어 추가를 선택한 경우에는 마법사가 해당 페이지에 레코드 목록을 표시하도록 데이터 테이블을 작성합니다. 선택하지 않은 경우에는 마법사가 레코드 목록만 작성하고 해당 데이터를 페이지에 표시하지 않습니다. 여기에서는 마법사를 사용하여 기본 데이터 테이블을 작성하고 나중에 이를 사용자 정의합니다. 관계형 레코드 목록 추가 창이 다음과 같이 표시됩니다.
    관계형 레코드 목록 추가 창

    다음을 클릭하십시오.

  8. 마법사의 다음 페이지에 있는 연결 이름 필드에서 새로 작성을 클릭하여 새 데이터베이스 연결을 작성하십시오. 새 JDBC 연결 대화 상자가 열립니다. 새 연결 작성 단일 선택 단추를 선택한 후 다음을 클릭하십시오.
  9. 데이터베이스 관리자 선택 목록에서 Derby를 펼친 후 10.1을 선택하십시오.
  10. 데이터베이스 위치 필드에서 찾아보기를 클릭하고 <workspace_location>\ClassifiedsTutorial\WebContent\\database를 선택하십시오. 여기에서 <workspace_location>은 현재 작업공간의 디렉토리입니다. 확인을 클릭하여 폴더 찾아보기 창을 닫으십시오.
  11. 클래스 위치 필드에서 JDBC 드라이버 클래스를 구현하는 JAR의 위치를 입력하거나 찾아보기를 클릭하여 파일 시스템에서 해당 위치를 선택하십시오. JAR 파일의 위치를 선택한 후에는 열기를 클릭하십시오.
  12. 데이터베이스에 액세스하기 위해서는 사용자 ID를 입력해야 할 수도 있습니다. 암호는 필요하지 않습니다. 새 데이터베이스 연결 마법사가 다음과 같이 표시됩니다.
    새 데이터베이스 연결 창
  13. 새 JDBC 연결 마법사에서 완료를 클릭하십시오. 관계형 레코드 목록 추가 마법사로 돌아갑니다.
  14. 프로젝트 데이터베이스 연결 구성을 클릭하십시오. JDBC 연결 특성 창이 열립니다.
  15. 런타임 연결 세부사항 섹션 옆에 있는 편집을 클릭하십시오. 드라이버 관리자 연결 사용을 런타임 연결 유형으로 선택하십시오. 완료를 클릭한 다음 확인을 클릭하여 관계형 레코드 목록 추가 대화 상자로 되돌아 갑니다. Derby 데이터베이스에 대한 연결을 작성했으므로 표시할 테이블 또는 레코드 목록을 선택해야 합니다. 관계형 레코드 목록 추가 마법사에 데이터베이스의 테이블이 표시됩니다.
  16. W5SAMPLE을 펼치고 ADS를 선택하십시오. 다음을 클릭하십시오. 마법사의 나머지 페이지에서는 레코드 목록의 열을 제외한 1차 키 정의, 다른 테이블에 관계 추가, 필터 및 정렬 조건 지정과 같은 고급 옵션을 수행할 수 있습니다. 이후의 학습에서 이 페이지에 대해 추가적으로 배우게 됩니다.
    관계형 레코드 목록 추가 대화 상자
  17. 이 대화 상자의 관계형 레코드 추가 페이지에서 관계형 레코드 목록에 포함하려는 열을 지정합니다. 다음을 클릭하십시오.
  18. 이 학습의 경우 안내 광고마다 제목, 설명, 카테고리, 가격 및 전화번호만 표시해야 합니다. 기본적으로 모든 열이 선택되어 있으므로 클릭하면 모두 지워지지만 다음 열은 그대로 표시됩니다.
    • MAINCATEGORY: String
    • TITLE: String
    • DESCRIPTION: String
    • PRICE: BigDecimal
    • PHONE: String
  19. 웹 페이지에 표시할 데이터 테이블의 구성을 구체화할 수 있습니다. 열을 다시 정렬하려면 열을 선택하고 위로 및 아래로 화살표를 클릭하여 원하는 위치로 이동하십시오.
    다음 순서대로 열을 배열하십시오.
    • TITLE
    • DESCRIPTION
    • MAINCATEGORY
    • PRICE
    • PHONE
    완료를 클릭하십시오.
    이제 웹 페이지의 모양은 다음과 같습니다.
    현재 페이지 모양
  20. 페이지를 저장하십시오.
다음 학습에서는 이 페이지가 실제 웹 서버에서 어떻게 표시되는지 확인할 수 있습니다. 데이터 테이블 및 JavaServer Faces 컴포넌트를 형식화하는 데에는 여러 옵션이 있습니다. 이러한 옵션 중 일부는 다음 모듈에서 다루게 됩니다. 이 페이지의 다양한 JavaServer Faces 컴포넌트에 대해 별도로 특성 보기를 탐색할 수도 있습니다(예: 데이터 테이블 및 개별 출력 컴포넌트).

학습 체크포인트

학습 1.2를 완료했습니다. 이 학습에서는 데이터베이스에 대한 연결을 작성하고 관계형 레코드 목록을 사용하여 웹 페이지에 데이터 레코드를 표시하는 방법에 대해 학습했습니다.

< 이전 | 다음 >