Data Studio를 이용한 XML 주도형 Ajax 애플리케이션의 빠른 개발 :: 에이젝스 일반[SSISO Community]
 
SSISO 카페 SSISO Source SSISO 구직 SSISO 쇼핑몰 SSISO 맛집
추천검색어 : JUnit   Log4j   ajax   spring   struts   struts-config.xml   Synchronized   책정보   Ajax 마스터하기   우측부분

에이젝스 일반
[1]
등록일:2008-11-23 23:06:11 (0%)
작성자:
제목:Data Studio를 이용한 XML 주도형 Ajax 애플리케이션의 빠른 개발

Data Studio를 이용한 XML 주도형 Ajax 애플리케이션의 빠른 개발

효율적인 데이터 웹 서비스 개발을 위해 SQL/XML 편집기 사용법에 대한 학습

developerWorks
13 페이지 중 1 페이지 Go to the next page

문서 옵션
수평출력으로 설정

이 페이지 출력

토론

샘플 코드


제안 및 의견
피드백

튜토리얼 평가

이 컨텐츠를 개선하기 위한 도움을 주십시오.


난이도 : 중급

Tyler Anderson, 자유기고가 겸 개발자, Backstop Media

2008 년 10 월 14 일

웹 서비스에서는 XML 형식으로 인터넷에서 데이터를 교신하는 것이 보편화되어 있습니다. 또한 데이터베이스는 오랫동안 웹 애플리케이션에서는 없어서는 안 될 중요한 구성 요소로 자리잡았습니다. IBM® Data Studio를 써서 개발자들은 자동적으로 웹 서비스로 빌드하고 배치할 수 있는 SQL과 SQL/XML 질의를 정의함으로써 이 둘을 서로 통합할 수 있습니다. 이 튜토리얼에서는 Data Studio를 사용하여 데이터 주도형 웹 서비스를 개발하고 플레이하고자 하는 게임을 브라우징하고 이름순으로 검색하며 심지어 게임 추가, 수정, 삭제까지 가능한 게임 업종용 Ajax 애플리케이션을 만들어볼 것입니다. 클라이언트에서 구동되는 Ajax 애플리케이션은 XML 형식으로 게임 웹 서비스와 통신하며 양쪽 모두 WebSphere® Application Server에서 서비스됩니다.

시작하기 전에

자주 사용되는 약어
  • Ajax: Asynchronous JavaScript and XML
  • PHP: PHP Hypertext Preprocessor
  • URI: Uniform Resource Identifier
  • URL: Uniform Resource Locator
  • XML: Extensible Markup Language

이 튜토리얼은 Ajax 애플리케이션에 데이터를 제공하기 위해 데이터 주도형 웹 서비스를 생성하는 데 관심이 있는 XML 및 Ajax 개발자에게 추천할 만한 글이다. 또한 Data Studio에서 제공하는 이른바 손쓸 일 없는 자동 생성 기능을 사용하여 개발 시간을 좀 더 효율적으로 쓰는 데 관심있는 사람들에게도 적절하다. 개발자들은 Ajax 클라이언트와 통신할 SQL 및 SQL/XML 스크립트 몇 개를 갖고 웹 서비스를 빌드하여 배치한다. 서버 기반 프로그래밍 언어, 이를테면 자바(Java™)나 PHP는 필요없다.

이 튜토리얼에 대해

이 튜토리얼에서는 XML과 IBM Data Studio 덕택에 데이터 주도형 웹 서비스 개발을 어떻게 하여 좀 더 효율적으로 개발할 수 있을지 보인다. 질의 몇 개를 생성함으로써 게임 데이터베이스에 대한 연결을 관리하기 위해 Data Studio를 사용할 것이다. 해당 연결은 게임 웹 서비스를 통해 노출될 것이다. 따라서 Data Studio, XML, 최소한의 웹 서비스 지식을 갖고 무료 플래시 게임을 관리하는 데 사용할 게임 웹 서비스와 통신할 Ajax 클라이언트를 생성할 것이다. 이 서비스들은 모두 IBM WebSphere® Application Server Community Edition(이하 커뮤니티 에디션)에 배치될 것이다. 이 튜토리얼에서는 다음과 같이 목표를 설정한다.

  • Data Studio와 커뮤니티 에디션에 대해 쉽고 간단히 설치에 대해 안내한다.
  • DB2® Control Center를 이용하여 테이블을 갖는 신규 데이터베이스를 생성하고 설정한다.
  • Data Studio에서 최초의 데이터 개발 프로젝트를 생성한다.
  • Data Studio의 SQL 편집기를 사용하여 SQL과 SQL/XML 스크립트를 생성한다.
  • 게임 웹 서비스로서 SQL 및 SQL/XML을 노출한다.
  • 게임 웹 서비스를 통해 무료 플래시 게임을 관리할 Ajax 애플리케이션을 생성한다.

먼저 준비할 것들

이 튜토리얼의 내용을 잘 따라가려면 다음에 나열한 도구들이 필요하다.

  • Data Studio — 예전에 DB2 Developer Workbench였던 무료 플러그인으로서 효과적인 데이터베이스와 XML 주도형 웹 서비스 개발을 위해 사용할 수 있는 데이터 개발 및 SQL 편집기 기능이 들어있다. 이 튜토리얼에서는 버전 1.1.2를 사용한다.
  • 자바 애플리케이션 서버 — Data Studio를 이용해 생성하여 배치한 웹 서비스를 호스팅할 자바 애플리케이션 서버가 필요하다. 커뮤니티 에디션에는 Data Studio가 딸려오고 커뮤니티 에디션은 여기서 필요로 하는 웹 서비스 지원 기능을 모두 갖고 있기 때문에 애플리케이션 서버로 사용하기에 좋은 후보라 하겠다. 이 튜토리얼에서는 버전 1.1을 쓴다.
  • 데이터베이스 — Data Studio에서는 데이터 개발과 웹 서비스 생성을 위해 실제 동작하는 데이터베이스 연결을 필요로 한다. 이 튜토리얼에서는 XML 데이터베이스가 필요하다. IBM DB2 Express-C가 바로 그런 것이라 할 수 있다. 이 튜토리얼에서는 버전 9.5를 쓴다. DB2 설치를 하려면 IBM developerWorks 튜토리얼에서 "Use an XML database in PHP and Java applications"를 참고하기 바란다.

 

주요 내용 소개

이 절에서는 Data Studio가 Ajax 기반 클라이언트 개발에서 XML 사용을 어떻게 개선할 수 있을지 그리고 XML 데이터베이스가 전반적인 그림에 어떻게 잘 맞아 들어가는지 살펴볼 것이다. 또한 이 튜토리얼에서 빌드할 Gamerz라는 Ajax 애플리케이션에 대해 간단히 알아보자.

XML, Ajax, XML 데이터베이스, Data Studio

XML은 웹을 통해 데이터를 송수신하는 데 쓰이는 최상의 형식으로 Data Studio에서는 웹 서비스로서 간단한 SQL 질의를 노출할 수 있도록 하여 이를 쉽게 해준다. Data Studio를 이용하여 생성하는 데이터베이스 연결을 통해 실제 동작하는 데이터베이스에서 이러한 SQL 질의가 동작하는데, 당연히 하부의 데이터베이스와 데이터베이스 내의 데이터를 커뮤니티 에디션을 통해 배치할 웹 서비스를 통해 완벽하게 접근할 수 있도록 해준다. 마음대로 그런 웹 서비스를 이용한다면 브라우저에 표시할 XML 데이터를 받아 처리할 Ajax 클라이언트(물론 커뮤니티 에디션에서 서비스됨)을 생성할 수 있다. 그러고 나서 데이터베이스의 내용이 갱신될 필요가 있을 경우 Ajax 클라이언트는 그저 웹 서비스로 보내도록 XML로 인코딩한 다음 하부 데이터베이스를 수정할 적절한 오퍼레이션을 불러내면 된다.

XML 데이터베이스는 데이터베이스 데이터에 질의하기 위해 풍부한 XQuery 함수를 활용할 수 있도록 해주기 때문에 XML 데이터베이스가 필요함은 당연하다. Data Studio의 SQL 편집기에서는 팁과 자동 완성 기능을 제공한다.

Gamerz Ajax 애플리케이션

이 튜토리얼에서는 마음 속에 품었던 무료 플래시 게임을 관리할 Ajax 애플리케이션을 생성할 것이다. 그러고 나면 브라우저를 리로드(reload)하지 않고 동일 페이지에서 플레이할 수 있다! 그림 1에서 마지막 페이지를 보라.


그림 1. Ajax Gamerz 홈 페이지 소개
Ajax Gamerz 홈 페이지 소개

게임마다 제목이 있고 각 게임에 대해 Play, View, Update, Delete 이렇게 링크 네 개가 있다. 게임이 너무 많아 한 번에 다 볼 수 없다면 제목별로 게임 검색을 할 수도 있다. 검색은 데이터베이스 내의 XML 데이터에 Xquery를 사용하여 수행된다. 또한 데이터베이스에 신규 게임을 추가하는 기능도 있다. 실제로 게임을 플레이하려면 미니 풀(Mini Pool) 게임 옆의 Play를 클릭해 보라(그림 2 참조).


그림 2. Ajax 애플리케이션에서 플래시 게임 플레잉
Ajax 애플리케이션에서 플래시 게임 플레잉

게임마다 지시 사항이 있고 따라서 그걸 보거나 바로 플레이할 수도 있다. 다음으로 Data Studio와 커뮤니티 에디션의 기본적인 설치 방법에 대해 살펴보자.

 

 

빠른 설치 가이드

이 절에서는 Data Studio, 커뮤니티 에디션, DB2를 빨리 설치할 수 있는 방법을 제시한다.

Data Studio 설치

먼저 Data Studio를 다운로드하자(먼저 준비할 것들에서 링크 참조). Download using the new IBM Installation Manager (recommended) 링크를 클릭하여 IBM 설치 관리자를 사용하여 다운로드한다. 다운로드한 파일을 열면 그림 3과 같은 창이 나타난다.


그림 3. IBM 다운로드 사이트에 연결
IBM 다운로드 사이트에 연결

IBM 사용자 ID와 암호를 입력하고 OK를 클릭하면 된다. 다음 화면에서 설치하고자 하는 패키지를 선택한다(그림 4 참조).


그림 4. IBM 설치 관리자
IBM 설치 관리자

Data Studio 1.1.0은 옛날 버전이다. 최근 버전을 얻으려면 Check for Other Versions and Extensions를 클릭한다. 그러면 최신 버전이 나타날 것이다(그림 5 참조).


그림 5. 적절한 패키지 설치
적절한 패키지 설치

최근 버전을 체크한다(이 튜토리얼에서는 버전 1.1.2를 썼다). 그러고 나서 Next를 클릭하면 사용 계약 페이지가 나온다. 게속하려면 내용을 읽고 수락한다. 그런 다음 Next를 눌러 다음 화면으로 계속해 나간다(그림 6 참조).


그림 6. 새로운 패키지 그룹 설치
새로운 패키지 그룹 설치

여기에서는 설치 디렉터리와 패키지 그룹 이름을 선택한다. 새 패키지 그룹으로 설치되는지 확인하고 Next를 클릭한다.

다음 화면에서는 기존에 설치된 이클립스(Eclipse)에 기능을 확장할지를 물어온다. 그렇게 하겠다고 하자. 별 문제없다. 어쨌든 기본적으로 Data Studio에는 이클립스가 따라온다. 따라서 이 튜토리얼에서는 이 화면은 무시하고 Next를 클릭한다.

다음 화면에서는 추가로 설치할 언어를 선택할 수 있다. 다 했으면 Next를 클릭한다. 다음 화면에서는 설치할 기능을 선택한다. 전에 언급한 대로 Data Studio에는 커뮤니티 에디션이 따라온다. 이게 그 부분인데 그림 7처럼 WebSphere Application Server Community Edition Installer를 체크하고 Next를 클릭한다(이 튜토리얼에서는 버전 1.1.0.2를 사용한다). 다음으로 IBM 설치 관리자를 사용하여 커뮤니티 에디션을 설치한다.


그림 7. 설치할 기능 선택
설치할 기능 선택

이제 앙케이트 페이지에 와 있을 것이다. 내용을 채워넣고 Next를 누르면 설치 요약 페이지가 나타난다. 다 잘 된 것 같다면 Install을 클릭한다..

설치가 끝나면 설치가 성공적으로 끝났음을 보여주는 화면이 나타날 것이다(그림 8 참조).


그림 8. 설치 성공
설치 성공

WebSphere Application Server Community Edition 설치

이제 Data Studio가 설치되었고 애플리케이션 서버인 커뮤니티 에디션을 설치할 수 있다. Data Studio 설치 디렉터리를 살펴보자(그림 6으로 가서 어디에 설치했는지 보라). 그러고 나서 설치 디렉터리 밑의 다음 하위 디렉터리를 보자: <Data Studio 설치 디렉터리>\dwb\bin\

wasce_setup-1.1.0.2-win.exe 파일을 찾는다. 이 파일을 열어 커뮤니티 에디션 설치를 시작한다. 시스템에 설치된 어떤 자바를 쓸 것인지 물어올 수도 있고, 여러분의 경우엔 Data Studio와 함께 설치된 자바를 선택한다. 위치는 <Data Studio 설치 디렉터리>\jdk\bin\java.exe다. 정확하게 진행했다면 커뮤니티 에디션 설치 환영 페이지가 그림 9처럼 나타날 것이다.


그림 9. 커뮤니티 에디션 설치 마법사 환영 페이지
커뮤니티 에디션 설치 마법사 환영 페이지

계속 하려면 사용 계약을 읽고 수락한 후 Next를 눌러 설치 위치 페이지를 연다(그림 10 참조).


그림 10. 설치 위치 선택
설치 위치 선택

기본 위치를 쓰면 된다. Next를 눌러 계속한다.

설치 전 요약 내용을 담은 화면이 나타난다. 문제없으면 계속하여 Install을 클릭한다. 설치가 성공적으로 끝나면 그림 11처럼 확인 화면이 나타난다.


그림 11. 설치 성공
설치 성공

Data Studio와 커뮤니티 에디션 설치는 끝났고 이제 마지막 설치할 게 남았다. DB2다.

DB2 설치

DB2는 이 튜토리얼에서 여러분이 쓸 XML 데이터베이스이고 이 튜토리얼에 적합한 DB2가 있다. 먼저 준비해야 할 것들 부분에서 링크를 찾아 설치 부분을 참고하기 바란다.

다음으로 DB2에서 새 데이터베이스와 테이블을 생성하자.

 

DB2 Control Center에서 신규 데이터베이스 생성

DB2는 Control Center라는 멋진 데이터베이스 관리용 GUI를 갖고 있다. Control Center를 이용하여 게임 데이터베이스를 생성하고 데이터베이스에 새로 테이블을 생성할 것이다.

신규 데이터베이스 생성

Data Studio의 기능을 사용하려면 먼저 데이터베이스부터 생성해야 한다. Control Center를 연다. 신규 데이터베이스를 생성하려면 All Databases 폴더에서 오른쪽 클릭한 후 Create Database>Standard를 선택한다(그림 12 참조).


그림 12. 신규 데이터베이스 생성
신규 데이터베이스 생성

대화 창이 나오면 신규 데이터베이스의 이름을 적는다. database nameGAMING이라고 넣고 Finish를 클릭한다. 데이터베이스가 생성되면 테이블을 생성할 준비는 끝난 셈이다.

신규 테이블 생성

이제 게임 데이터베이스에 게임 데이터를 저장할 신규 테이블을 생성할 것이다. All Databases 폴더를 펼치고 GAMING database>Create에서 오른쪽 클릭한다(그림 13 참조).


그림 13. 신규 테이블 생성
신규 테이블 생성

테이블 생성 마법사에서 Table name 필드에 GAMES를 넣고 Next를 클릭하면 신규 테이블에 열(column)을 추가하는 화면이 나타난다. Add를 클릭하고 자동으로 만들어진 ID 필드를 설정한다(그림 14 참조).


그림 14. 자동으로 만들어진 ID 필드 생성
자동으로 만들어진 ID 필드 생성

열 이름으로 ID를 입력하고 형(type)은 INTEGER를 넣는다. 그러고 나서 Value generation 그룹 상자에서 Identity 라디오 버튼을 선택한다. 이제 OK를 클릭한다. 그러고 나서 다른 필드를 추가하려면 다시 Add를 클릭한다. 이제 XML 필드를 생성하자(그림 15 참조).


그림 15. 데이터 저장을 위해 XML 필드 생성
데이터 저장을 위해 XML 필드 생성

열 이름으로 GAMEDATA, 형으로 XML을 입력한다. 그리고 Nullable 체크 박스가 선택되지 않았는지 확인한다. OK를 클릭하면 두 데이터베이스의 열이 나타날 것이다(그림 16 참조).


그림 16. 데이터베이스 열 목록
데이터베이스 열 목록

계속하기 위해 네 번째 단계(Keys)까지 Next를 클릭한다(그림 17 참조).


그림 17. 기본 키 필드 생성
기본 키 필드 생성

여기서는 ID에 기본(primary) 필드를 생성할 것이다. Add Primary를 클릭하고 Available columns 상자에서 Selected columns 상자로 ID 필드를 이동한 다음 OK를 클릭한다(그림 17에서는 Add Primary 버튼이 활성화되어 있지 않음을 볼 수 있다. 이는 기본 키(primary key)가 이미 생성되었기 때문이다). 이제 Finish를 클릭하여 GAMES 테이블을 생성한다.

GAMING 데이터베이스 설정이 다 끝났다! 다음으로 Data Studio를 이용한 데이터 개발로 들어가보자.

 

Data Studio에서 첫 번째 데이터 개발 프로젝트 생성

데이터베이스가 준비되었고 이제 새로운 데이터 개발 프로젝트를 생성할 수 있다.

신규 데이터베이스 연결 설정

Data Studio를 쓰기 전에 데이터베이스 연결 설정이 필요하다. Data Studio는 시스템에 존재하는 DB2 데이터베이스를 찾아서 데이터베이스 탐색기 뷰에 표시해줄 수 있다(그림 18).


그림 18. 데이터베이스 탐색기 뷰
데이터베이스 탐색기 뷰

그림 18처럼 GAMING 데이터베이스를 볼 수 있다. 연결하려면 GAMING[DB2 Alias]>Reconnect에서 오른쪽 클릭하여 재연결한다(그림 19 참조).


그림 19. 기존 데이터베이스에 연결
기존 데이터베이스에 연결

팝업 화면에서 DB2 사용자 이름과 암호를 넣고 OK를 눌러 계속 한다. 연결이 성공하면 아이콘이 초록색으로 바뀐다(그림 20 참조).


그림 20. 연결됨!
연결됨!

잘 되었다! 이제 Data Studio에서 GAMING 데이터베이스와 연결이 되었다.

데이터 개발 프로젝트 생성

이제 하부 데이터베이스 연결로서 GAMING 데이터베이스를 명시할 데이터 개발 프로젝트를 생성할 수 있다. 신규 데이터 개발 프로젝트를 생성하려면 File>New>Data Development Project를 클릭하여 설정 페이지를 연다(그림 21 참조).


그림 21. 신규 데이터 개발 프로젝트 설정
신규 데이터 개발 프로젝트 설정

프로젝트 이름을 넣고 Next를 클릭한다. 그러고 난 후 기존 연결을 선택한다(그림 22 참조).


그림 22. 데이터베이스 연결 선택
데이터베이스 연결 선택

Use an existing connection option을 선택하고 GAMING 연결을 선택한다. Finish를 클릭하여 Data Project Explorer에서 신규 프로젝트를 살펴보자(그림 23 참조).


그림 23. 새로 생성한 데이터 개발 프로젝트 확인
새로 생성한 데이터 개발 프로젝트 확인

다 끝났다. 데이터 프로젝트에 스크립트 몇 개를 생성하자.

 

-- 다음페이지 --

 

SQL 편집기를 이용하여 SQL과 SQL/XML 스크립트 생성하기

여러분 마음대로 할 수 있는 신규 데이터 개발 프로젝트를 통해 GAMING 데이터베이스에 질의하고 명령을 수행할 SQL 스크립트와 SQL/XML 스크립트 몇 개를 생성할 것이다. 다음 절에서는 이번 절에서 생성한 SQL 스크립트를 웹 서비스로 노출시킬 것이고, 당연히 여기서 생성한 SQL 스크립트에 대한 웹 접근을 제공한다.

SQL 스크립트 생성

SQL 스크립트를 새로 생성하려면 SQL Scripts 폴더에서 오른쪽 클릭한 후 New>SQL 또는 XQuery Script를 선택한다(그림 24 참조).


그림 24. 신규 SQL 스크립트 생성
신규 SQL 스크립트 생성

설정 페이지가 나타난다(그림 25 참조).


그림 25. 신규 SQL 스크립트 설정
신규 SQL 스크립트 설정

첫 번째 질의를 getGames라고 명명하고 Finish를 클릭한다. Data Studio SQL 편집기를 이용하여 질의를 생성하므로 다음 두 가지 기능에 대해 알아두자.

  • Content Assist: 쓸 수 있는 함수, 변수, 여타 옵션을 팝업 창으로 표시한다. 불러내려면 ctrl+space를 누른다.
  • Content Tip: 현재 함수의 문법에 대한 팁을 표시한다. 불러내려면 ctrl+shift+space를 누른다.

getGames.sql 스크립트를 정의하자(Listing 1).


Listing 1. getGames.sql 스크립트
                    
select *
from GAMES

이 스크립트는 단순히 GAMES 테이블에서 모든 엔트리를 끌어낸다. 이제 똑같은 방법을 써서 새로운 SQL 스크립트를 생성하자. 이번에는 이름을 getGame.sql로 해서 정의한다(Listing 2).


Listing 2. getGame.sql 스크립트
                    
select *
from GAMES
where GAMES.ID = :id

이 스크립트에서는 주어진 id 필드(:id)와 일치하는 데이터베이스의 게임 엔트리를 선택한다. 이것이 Data Studio SQL 편집기를 이용하여 설정 가능한 필드를 명시하는 방법이다.

이제 updateGame.sql 스크립트를 생성하고 정의하자(Listing 3).


Listing 3. updateGame.sql 스크립트
                    
update GAMES
set GAMES.GAMEDATA = :gamedata
where GAMES.ID = :id

설정 가능한 필드가 두 개 있다. 하나는 :gamedata이고 또 하나는 :id다. :gamedata 필드에서 명시한 대로 XML 데이터를 갖는 GAMES 테이블 내의 엔트리를 갱신하기 위함이다.

다음으로 신규 게임을 데이터베이스에 삽입할 스크립트인 addNewGame.sql을 생성하고 정의해 보자(Listing 4).


Listing 4. addNewGame.sql 스크립트
                    
insert into GAMES
(GAMEDATA)
values (:gamedata)

여기서는 단일한 설정 필드를 취함을 볼 수 있다. :gamedata인데 게임 데이터를 담는 XML 필드다. 이 필드를 취해 데이터베이스에 삽입한다.

마지막으로 생성할 SQL 스크립트는 deleteGame.sql 스크립트로 Listing 5에 정의했다.


Listing 5. deleteGame.sql 스크립트
                    
delete from GAMES
where GAMES.ID = :id

이 스크립트에서는 설정 가능 인자인 :id에서 명시한 대로 데이터베이스의 게임 엔트리를 제거한다.

게임 검색용 SQL/XML 스크립트 생성

SQL/XML 스크립트를 사용하면 GAMEDATA 필드 내의 XML 데이터에 직접 접근할 수 있다. 거기서 기본적인 "where" 절 형태로 어떤 데이터 형으로도 질의할 수 있다(Listing 3의 update 구문에서 했던 것처럼).

getGameByTitle.sql 스크립트를 생성하고 정의하자(Listing 6 참조).


Listing 6. getGameByTitle.sql SQL/XML 스크립트
                    
SELECT *
  FROM GAMES
  WHERE XMLEXISTS('
for $i in $x/game
  where 1 and $i/title=$y
  return $i
'
    PASSING  GAMES.GAMEDATA AS "x",
             CAST(:title AS VARCHAR(256)) AS "y")

처음 부분은 비슷하게 시작했지만 where 절에서 통상적인 조건을 사용하는 대신 XMLEXISTS 함수를 사용했다. 이 함수는 게임 엔트리가 일치하는지 결정하기 위해 XQuery 코드를 위치시킬 수 있는 함수다. 그리하여 XML 데이터에서 제목 검색을 하여 제목이 $y 변수의 값과 일치하면 XML 문서가 존재한다는 뜻이므로 XMLEXISTS 함수는 참(true)을 반환하는 for 반복문이 나타남을 볼 수 있다. PASSING 구문에서는 $x$y 변수 값을 명시했음에 주목하기 바란다. $x 변수는 GAMEDATA 필드에 담겨진 XML 데이터가 위치하고 있고 설정 가능 인자인 title$y 변수의 내용에 위치된다.

이로써 모든 데이터베이스 스크립트 생성을 마쳤다. 그림 26에 모두를 나열한 것을 보였다.


그림 26. 새로 만든 SQL과 SQL/XML 스크립트 모두 보기
새로 만든 SQL과 SQL/XML 스크립트 모두 보기

이제는 이 SQL과 SQL/XML 질의를 웹 서비스에 노출하자.

 

질의를 노출할 웹 서비스 생성하기

여러분은 여섯 가지 데이터베이스 질의를 갖고 있으며 웹 프로젝트 서버 인스턴스로서 커뮤니티 에디션을 추가하여 서비스로서 인터넷에 이들을 노출할 준비를 마쳤다. 또한 테스트를 위해 커뮤니티 에디션 위에 웹 서비스를 빌드하여 배치할 것이다.

신규 웹 서비스 생성

질의를 노출하기 위해 웹 서비스를 생성할 것이다. Web services 폴더에서 오른쪽 클릭한 후 New Web Service를 선택한다(그림 27 참조).


그림 27. 신규 웹 서비스 생성
신규 웹 서비스 생성

설정 페이지가 나타날 것이다(그림 28 참조).


그림 28. 신규 웹 서비스 설정
신규 웹 서비스 설정

생성할 웹 서비스의 프로젝트, 이름, 네임스페이스 URI를 적자. 프로젝트로 gaming을 선택하고 웹 서비스 이름으로 GamingService를, 네임스페이스로 urn:gaming을 선택한다. 이제 Finish를 누르면 프로젝트 공간에 신규 웹 서비스가 나타난다(그림 29 참조).


그림 29. 질의를 신규 웹 서비스로 이동
질의를 신규 웹 서비스로 이동

또한 그림 29처럼 전에 생성해 둔 여섯 개의 SQL 및 SQl/XML 스크립트를 GamingService 웹 서비스로 드래그 앤 드롭(drag and drop)하자. 여섯 개 모두 선택한 다음 드래그해 GamingService 웹 서비스로 옮기는 것이다(그림 29 참조).

이제 웹 서비스에는 여섯 개의 오퍼레이션이 담겨있다(그림 30 참조).


그림 30. 신규 웹 서비스. 오퍼레이션 여섯 개로 완료
신규 웹 서비스. 오퍼레이션 여섯 개로 완료

다음으로 프로젝트에서 서버로서 커뮤니티 에디션을 설정하자.

서버 인스턴스로 커뮤니티 에디션 추가

배치 준비가 완료된 웹 서비스가 있으니 프로젝트 공간에서 서버 인스턴스로서 커뮤니티 에디션 설정을 하자. Server 뷰를 열고 Window>Show View>Other를 클릭한 다음 Server>Servers를 펼치고 OK를 클릭한다.

신규 서버를 추가하기 위해 Server 뷰에서 오른쪽 클릭하고 New>Server를 선택한다(그림 31 참조).


그림 31. 신규 서버 인스턴스 추가
신규 서버 인스턴스 추가

신규 서버 정의(Define a New Server) 창이 나타난다(그림 32 참조).


그림 32. 커뮤니티 에디션 v1.1 선택
커뮤니티 에디션 v1.1 선택

이 튜토리얼에서는 서버가 로컬 호스트에서 동작중이므로 서버의 호스트 이름으로 localhost를 선택한다. 그러고 나서 서버 타입으로 WebSphere Application Server Community Edition v1.1 Server를 선택하고 Next를 클릭한다. 설정 페이지가 나타날 것이다(그림 33 참조).


그림 33. 신규 서버 설정
신규 서버 설정

애플리케이션 서버 설치 디렉터리로서 커뮤니티 에디션을 설치한 디렉터리 위치를 입력한다(그림 10에서 선택했던 대로). 그림 33처럼 설정을 마쳤다면 Next를 선택한다.

이 부분에서 커뮤니티 에디션 설정을 할 수 있는데 구동할 포트는 어떤 것을 쓸지 여타 상세 내용이 여기에 포함된다(그림 34 참조).


그림 34. 연결 인자 명기
연결 인자 명기

이 튜토리얼의 목적대로라면 기본값도 잘 돌아간다. Finish를 클릭하여 커뮤니티 에디션 설정을 완료한다.

새로운 서버를 마련했다. Server 뷰에서 보면 상태가 현재 Stopped로 보일 것이다. 서버를 시작하려면 오른쪽 클릭한 후 Start를 선택한다(그림 35 참조).


그림 35. 커뮤니티 에디션 서버 시작하기
커뮤니티 에디션 서버 시작하기

이제 서버가 Started 상태로 보일 것이다.

커뮤니티 에디션에 웹 서비스를 빌드하고 배치하기

커뮤니티 에디션을 동작하도록 했으니 웹 서비스를 배치할 때가 되었다. GamingService 웹 서비스에서 오른쪽 클릭하고 Build and Deploy를 선택한다(그림 36 참조).


그림 36. 웹 서비스 빌드와 배치
웹 서비스 빌드와 배치

설정 페이지가 나타난다(그림 37).


그림 37. 배치 설정
배치 설정

서버 타입으로 WebSphere Application Server Community Edition v1.1을 선택하고 서버로 Community Edition 1.1을 선택한다. 그러고 나서 RESTSOAP 프로토콜 양쪽 모두에 체크 표시를 한다. Register database connection with Web serverLaunch Web Services Explorer after deployment에도 체크 표시한다(그림 37 참조).

Finish를 클릭하면 그림 38과 같은 팝업 창이 뜬다.


그림 38. DB2 드라이버를 자동으로 설치
DB2 드라이버를 자동으로 설치

그림 38에서 나타난 메시지는 서버가 여러분을 위해 커뮤니티 에디션에 DB2 드라이버를 설치할 거라는 이야기다. Yes를 누르면 또 다른 사용 계약 수락을 묻는 마지막 팝업 창이 나타난다. Yes를 클릭하여 계속 진행하면 GamingService는 커뮤니티 에디션에 빌드되고 배치된다.

웹 서비스 탐색기를 사용하여 웹 서비스 테스트하기

웹 서비스가 배치되었으므로 이제 좀 간단한 테스트를 할 준비가 되었다. 웹 서비스 탐색기는 배치가 성공한 후 자동으로 열린다. Navigator 창을 보자(그림 39 참조).


그림 39. Navigator 창에서 이용할 수 있는 오퍼레이션들
Navigator 창에서 이용할 수 있는 오퍼레이션들

여기에서 GamingService와 가용한 오퍼레이션을 살펴볼 수 있다.

이제 데이터베이스에 게임 엔트리를 추가하고 그와 동시에 addNewGame 오퍼레이션을 테스트해볼 것이다. addNewGame 오퍼레이션(그림 39 참조)을 클릭한다. Actions 창을 띄우게 된다(그림 40 참조).


그림 40. 신규 게임 추가
신규 게임 추가

gamedata 인자로 Listing 7을 입력한다.


Listing 7. 새로운 게임 데이터 더하기
                    
<gamedata>
  <game>
    <title>Mini Pool</title>
    <url>http://www.legitgames.com/games/files/minipool.swf</url>
    <width>570</width>
    <height>420</height>
  </game>
</gamedata>

Go를 클릭하여 오퍼레이션을 실행한다.

오퍼레이션이 잘 수행되었는지 보려면 웹 서비스 탐색기 오른쪽 하단 부에 있는 상태(Status) 창을 보기 바란다. Listing 8과 같은 XML이 나타나야 한다.


Listing 8. 데이터베이스에 게임 엔트리가 성공적으로 추가되었을 때 상태 창에 나타난 결과
                    
<?xml version="1.0" encoding="UTF-8" ?>
<ns1:addNewGameResponse xmlns=""
     xmlns:ns1="urn:gaming"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <updateCount>1</updateCount>
</ns1:addNewGameResponse>

updateCount가 1이라는 걸 주목하자. 이는 새로운 레코드가 데이터베이스에 추가되었음을 가리킨다.

Data Studio 덕택에 이제 개발할 Ajax 클라이언트를 위해 데이터를 전달해줄 데이터 그리고 XML 주도형 웹 서비스를 성공적으로 생성했다.

 

Ajax로 된 게임 클라이언트 생성

지금까지 모든 것은 그림 12에서 소개했던 Ajax 클라이언트에 초점을 맞춰왔다. 마침내 코딩을 시작할 때가 되었다. 이번 절에서는 Ajax 클라이언트를 코딩하고 GamingService 웹 서비스와 인터페이스할 것이다.

HTTP 헬퍼 함수

HTTP 헬퍼(helper) 함수를 설정해 GamingService 웹 서비스와 통신할 수 있도록 할 것이다. 우선 다음 디렉터리에 파일을 하나 새로 만든다.

<WAS CE INSTALL DIR> \repository\default\gamingGamingServiceEAR\1.0\
  gamingGamingServiceEAR-1.0.car\gamingGamingServiceWeb.war\

주의: 명령과 디렉터리 경로는 한 줄로 되어야 한다. 여기서는 문서로 표시하다 보니 여러 줄로 나뉘어 표시될 수도 있다.

이 디렉터리에 파일을 생성하면 여러분이 이미 커뮤니티 에디션에 빌드하고 배치한 웹 서비스로 들어간다는 점을 명심하기 바란다. 따라서 이후에 배치를 할 필요가 없다. 실 서비스 환경에서라면 아마도 Ajax 클라이언트를 분리해 배치하겠지만 여기서 볼 방법은 그저 단순하게 하기 위함이다.

새로 만들 파일은 url-aux.js라고 이름을 붙이고 Listing 9의 내용을 넣는다.


Listing 9. XML 문서를 뽑아내는 데 도움을 주고 웹 서비스 요청을 만드는 데 도움을 주는 함수들
                    
function loadXML(fileName){
  var xmlDoc;
  if (window.ActiveXObject){
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
  else if (document.implementation &&
           document.implementation.createDocument){
    xmlDoc=document.implementation.createDocument("","",null);
  }
  else{
    alert('Unsupported browser');
  }

  xmlDoc.async=false;
  xmlDoc.load(fileName);
  return(xmlDoc);
}

function post(url, data, func) { 
  var request;
  if (window.XMLHttpRequest){
    request = new XMLHttpRequest();
  }
  else if (window.ActiveXObject){
    request = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else{
    alert('unsupported browser');
  }

  request.open("POST", url, true);
  request.setRequestHeader("Content-Type",
                           "application/x-www-form-urlencoded"); 

  request.onreadystatechange = function(){
    if (request.readyState == 4){
      func(request.responseText);
    }
  };
  request.send(data);
}

여기서는 두 가지 함수가 있다.

  • 첫 번째, loadXML()은 url로 명시함으로써 RESTful한 GET 방식의 웹 서비스 오퍼레이션을 수행한 후 XML 문서 형식으로 데이터를 반환한다. 하부 GAMING 데이터베이스를 변경하지 않는 웹 서비스 오퍼레이션의 경우 이 함수를 사용할 것이다.
  • 두 번째는 url로 명시함으로써 웹 서비스를 수행하여 RESTful한 POST 방식의 웹 서비스를 수행한다. 이번에는 데이터베이스에 변경을 가하는 웹 서비스 오퍼레이션에만 이 함수를 사용할 것이다.

이제 HTML로 된 환영 페이지를 만들자.

환영 페이지

환영 페이지는 게이머가 게임 관리를 할 때 볼 메인 HTML이다. 게이머들은 HTML과 Ajax를 한 번만 로드하면 거기에서 게임과 관련된 모든 것을 관리할 수 있다.

이 페이지를 생성하기 위해 다음 디렉터리에 index.html을 생성한다.

<WAS_CE_1.1_INSTALL DIR>\repository\default\gamingGamingServiceEAR\1.0\
  gamingGamingServiceEAR-1.0.car\gamingGamingServiceWeb.war\

주의: 명령과 디렉터리 경로는 한 줄로 되어야 한다. 여기서는 문서로 표시하다 보니 여러 줄로 나뉘어 표시될 수도 있다.

이제 Listing 10처럼 내용을 채워넣자.


Listing 10. 환영 페이지. Ajax로 된 게임 관리 홈페이지
                    
<html>
<head>
<title>Ajax Gamerz Page</title>

<script src="url-aux.js" type="text/javascript"></script>
<script src="lib-main.js"  type="text/javascript"></script>

</head>

<body>

  <div id="main" style="width: 100%;">
    <div id="header" style="text-align: center;">
      <h1>Welcome Gamer!!</h1>
    </div>

    <div id="main-inner">

      <div id="changeable" style="margin-top: 50px; width: 100%;">
      </div>

      <div id="footer" style="text-align: center; clear:both; padding-top: 50px;">
        &copy; Free Flash Gamerz Portal.<br/>
      </div>
    </div>
    
    <script type="text/javascript">
      getGames();
    </script>
  </body>
</html>

이 페이지는 테이블이 없는 HTML 페이지로 설정했으며 정돈된 형태로 표시하기 위해 div 태그를 사용하였다. 여기서 재미있는 div 태그는 id="changeable"이다. 이 절 뒷 부분에 걸쳐 자바스크립트(JavaScript)를 사용해 이 div 태그의 내용에 수정을 가할 것이다.

페이지가 로드되면 getGames() 함수가 호출됨에 주목하자. Ajax를 써서 각 게임을 표시하기 위해 이 함수를 작성할 것이다.

환영 페이지에 Ajax 함수 추가하기

현재 웹 서비스와 환영 페이지에서 XML 콘텐츠를 가져와 설정 가능한 div 태그로 마무리하여 그 안에 내용을 대치해 넣는 데 도움을 줄 수 있는 함수를 두 개 갖고 있다. 이제 웹 브라우저에서 http://localhost:8080/gamingGamingService/rest/gamingGamingService/getGames를 주소창에 입력하여 getGames 오퍼레이션을 테스트해볼 것이다.

결과값으로 Listing 11과 같은 XML이 반환되어야 한다.


Listing 11. getGames 오퍼레이션의 RESTful(GET 방식)한 호출
                    
<ns1:getGamesResponse>
  <row>
    <ID>9</ID>
    <GAMEDATA>
      <game>
        <title>Mini Pool</title>
<url>http://www.legitgames.com/games/files/minipool.swf</url>
        <width>570</width>
        <height>420</height>
      </game>
    </GAMEDATA>
  </row>
  <row>
    <ID>10</ID>
    <GAMEDATA>
      <game>
        <title>Sub Commander</title>
<url>http://www.legitgames.com/games/files/subcommander.swf</url>
        <width>550</width>
        <height>400</height>
      </game>
    </GAMEDATA>
  </row>
</ns1:getGamesResponse>

결과는 데이터베이스에 들어 있는 모든 게임을 표시해주는 것이다. 게임 두 개가 데이터베이스에 들어갔다.

이제 Ajax를 써서 페이지의 초기 내용을 설정하자. 그렇게 하려면 lib-main.js라는 파일을 다음 디렉터리에 새로 생성한다.

<WAS_CE_1.1_INSTALL DIR>\repository\default\gamingGamingServiceEAR\1.0\
  gamingGamingServiceEAR-1.0.car\gamingGamingServiceWeb.war\

주의: 명령과 디렉터리 경로는 한 줄로 되어야 한다. 여기서는 문서로 표시하다 보니 여러 줄로 나뉘어 표시될 수도 있다.

이제 Listing 12처럼 내용을 정의한다.


Listing 12. 전역 변수들
                    
var serviceurl = 
"http://localhost:8080/gamingGamingService/rest/gamingGamingService/";
var getallOp = "getGames";
var getOp = "getGame";
var gettitleOp = "getGameByTitle";
var addnewOp = "addNewGame";
var updateOp = "updateGame";
var deleteOp = "deleteGame";
...

serviceurl에 GamingService 웹 서비스의 URL을 입력했다. 그러고 나서 웹 서비스의 여섯 개의 변수에 각각 여섯 가지 오퍼레이션을 설정했다. 이제 Listing 13의 헬퍼 함수를 담는 lib-main.js 파일을 계속 정의해 나가자.


Listing 13. 헬퍼 함수들
                    
function delayedRefresh2(text){
    alert(text);
    setTimeout("getGames()", 500);
}

function delayedRefresh(){
    setTimeout("getGames()", 500);
}

function setDiv(content){
    document.getElementById("changeable").innerHTML = content;
}

function getChildValue(item, name){
    return item.getElementsByTagName(name)[0].firstChild.nodeValue;
}

function fullLink(name, displayName, id, title, url, width, height){
    var retStr = '<a href="javascript:' + name +
                 '(' + id + ', \'' + title + '\', \'' +
                 url + '\', ' + width + ', ' + height + ')">' + 
                 displayName + '</a>';
    return retStr;
}

function idLink(name, displayName, id){
    var retStr = '<a href="javascript:' + name +'(' + id + ')">' + 
                 displayName + '</a>';
    return retStr;
}

function linkOnly(name, displayName){
    var retStr = '<a href="javascript:' + name + '()">' +
                 displayName + '</a>';
    return retStr;
}

function button(name, displayName, id){
    var retStr = '<input name="' + name + '" type="button"
                         value="' +
                 displayName + '" onclick="javascript:' + name + 
                                          '(' + id + ')"/>';
    return retStr;
}

function input(name, displayName, value, size){
    var retStr = ' <input size="' + size + '"
                          name="' + name + '"
                          value="' + value + '"/>';
    retStr = '<br/>' + retStr + '<br/>';
    retStr = '<b>' + displayName + '</b>:'  + retStr + '<br/>';
    return retStr;
}

function view(displayName, value){
    var retStr = ' ' + value;
    retStr = '<b>' + displayName + '</b>:'  + retStr + '<br/>';
    return retStr;
}
...

이 함수들은 브라우저에 요소를 표시함에 따라 과도하게 많은 문자열 붙이기 작업을 감추어 좀 더 깔끔한 Ajax 코드 작성을 할 수 있도록 해준다. 뒷 부분에서 각 함수에 대해 좀 더 자세히 설명할 것이다.

lib-main.js 정의를 계속해 나가자. 이번에는 getGames() 함수를 추가한다(Listing 14 참조).


Listing 14. Ajax를 사용하여 모든 게임 데이터를 보기 위해 getGames 오퍼레이션 호출
                    
function getGames(){
    var url = serviceurl + getallOp;
    var xmlDoc = loadXML(url);

    var str = '<table border="1px"><tr>' +
              '<th>Title</th><th>Play</th></tr>';
    var games = xmlDoc.getElementsByTagName("game");
    var ids = xmlDoc.getElementsByTagName("ID");

    for (i = 0; i < ids.length; i++) {
        var game = games.item(i);
        var id = ids.item(i).firstChild.nodeValue;
        var title = getChildValue(game, "title");
        url = getChildValue(game, "url");
        var width = getChildValue(game, "width");
        var height = getChildValue(game, "height");
        str = str + "<tr><td>" + title + '</td>' +
            '<td>' + fullLink('play', 'Play', id,
                              title, url, width, height) + '</td>' +
            '<td>' + idLink('getGame', 'View', id) + '</td>' + 
            '<td>' + fullLink('updateGame', 'Update', id,
                              title, url, width, height) + '</td>' +
            '<td>' + idLink('deleteGame', 'Delete', id) + '</td>' +
            '</tr>';
    }
    str = str + '</table><br/>' +
          linkOnly('getGameByTitleForm', 'Search by Title') + '<br/>'
        + linkOnly('addNewGame', 'Add New Game');

    setDiv(str);
}

이 함수는 getGames 오퍼레이션에 URL을 설정하고 XML 문서로 내용을 꺼내온다. 그러고 나서 각 엔트리를 표시할 표(table)를 구성한다. XML로 된 각 게임 엔트리는 표시를 위해 반복해서 HTML로 생성된다. 각 게임에는 링크가 네 개 수반된다. 즉 게임마다 다음 네 가지 링크가 있다.

  • 플레이(Play)
  • 보기(View)
  • 갱신(Update)
  • 삭제(Delete)

게임들은 두 개의 링크가 있다.

  • 제목으로 게임 검색(Search the games by title)
  • 신규 게임 추가(Add new games)

변경 가능한 div 요소의 HTML 내용은 setDiv() 함수를 사용하여 str에 설정된다.

그림 41에서 실제 동작하는 getGames() 함수를 확인해 보기 바란다.


그림 41. 플레이 가능한 게임 보기
플레이 가능한 게임 보기

다음으로 보기(View) 기능을 정의할 수 있다.

게임의 상세 정보 체크

이제 View 링크에 대한 기능 구현을 할 것이다. 우선 getGame() 오퍼레이션을 테스트하기 위해 브라우저가 다음 주소를 가리키게 해주기 바란다.

 
http://localhost:8080/gamingGamingService/rest/gamingGamingService/getGame?id=9

ID가 미니 풀(Mini Pool) 게임과 일치하는 id를 붙여 넣었는지 확인하기 바란다. Listing 11로 돌아가 보면 getGames 오퍼레이션을 불러냈을 때 ID를 볼 수 있다. Listing 15는 게임이 반환하는 XML이다.


Listing 15. RESTful(GET 방식)한 getgame 오퍼레이션의 호출
                    
<ns1:getGameResponse>
  <row>
    <ID>9</ID>
    <GAMEDATA>
      <game>
        <title>Mini Pool</title>
<url>http://www.legitgames.com/games/files/minipool.swf</url>
        <width>570</width>
        <height>420</height>
      </game>
    </GAMEDATA>
  </row>
</ns1:getGameResponse>

이것이 여러분이 지금 생성한 getGame() 함수에서 파싱하여 브라우저에 표시할 XML 데이터다. lib-main.js 파일 정의를 계속해 나가자. Listing 16의 자바스크립트 함수를 추가하자.


Listing 16. Ajax를 사용하여 단일 게임을 보기 위해 getGame 오퍼레이션 불러내기
                    
function getGameXML(xmlDoc){
    var game = xmlDoc.getElementsByTagName("game").item(0);
    if(game == null)
        return 'No result found!<br/><br/>' +
               linkOnly('getGameByTitleForm', 'Back');

    var title = getChildValue(game, "title");
    var url = getChildValue(game, "url");
    var width = getChildValue(game, "width");
    var height = getChildValue(game, "height");

    var str =
        view('Title', title) +
        view('URL (to flash)', url) +
        view('Width', width) +
        view('Height', height) + '<br/>' +
        linkOnly('getGames', 'Back');

    return str;
}

function getGame(id){
    var url = serviceurl + getOp + '?id=' + id;
    var res = getGameXML(loadXML(url));
    setDiv(res);
}

먼저 코드는 getGame() 함수를 호출하고 명시한 id를 붙여 URL을 구성한다. 그러고 나서 XML을 뽑아낸 다음 getGameXML() 함수로 전달한다. 이 함수는 그저 XML을 파싱해 브라우저에 표시해 준다. 게임 요소가 발견되지 않으면 코드는 일치하는 게임이 없음을 알게 된다. 그럴 경우 제목으로 검색의 결과가 없다.

실제 돌아가는 View 링크를 보려면 그림 42를 보기 바란다.


그림 42. 게임의 상세 내용 보기
게임의 상세 내용 보기

살펴볼 상세 내용은 거기에 다 있다. 다음으로 제목으로 게임을 검색할 것이다.

제목을 기반으로 게임 검색

이제 각 게임을 볼 수 있으니 제목으로 검색(Search by Title) 링크를 구현할 것이다. 우선 getGameByTitle 오퍼레이션을 테스트하기 위해 브라우저에서 다음 URL을 넣는다.

http://localhost:8080/gamingGamingService/rest/gamingGamingService/
   getGameByTitle?title=Sub%20Commander

주의: 명령과 디렉터리 경로는 한 줄로 되어야 한다. 여기서는 문서로 표시하다 보니 여러 줄로 나뉘어 표시될 수도 있다.

여기서 "Sub Commander"라는 제목으로 검색하면 Listing 17처럼 XML이 반환될 것이다.


Listing 17. GET 방식으로 불려진 RESTful한 getGameByTitle 오퍼레이션
                    
<ns1:getGameByTitleResponse>
  <row>
    <ID>10</ID>
    <GAMEDATA>
      <game>
        <title>Sub Commander</title>
<url>http://www.legitgames.com/games/files/subcommander.swf</url>
        <width>550</width>
        <height>400</height>
      </game>
    </GAMEDATA>
  </row>
</ns1:getGameByTitleResponse>

이렇게 하여 getGame 오퍼레이션에서 했던 것처럼 표시할 수 있는 일치하는 엔트리에 대한 데이터를 가져온다.

lib-main.js 파일 정의를 계속하자(Listing 18 참조).


Listing 18. Ajax를 이용해 제목으로 게임을 검색하는 폼을 표시하기
                    
function getGameByTitleForm(){
    setDiv(input('title', 'Title', '', 50) +
           button('getGameByTitle', 'Search') + '<br/><br/>' +
           linkOnly('getGames', 'Back'));
}

이 파일은 검색하고자 하는 제목을 입력할 수 있는 폼을 간단히 생성한다. 그림 43에 실제 동작하는 모습을 보였다.


그림 43. 제목으로 검색
제목으로 검색

이제 getGameByTitle 함수를 정의할 것이다(Listing 19 참조).


Listing 19. Ajax를 사용하여 제목이 일치하는 게임을 보여주기 위한 getGameByTitle 오퍼레이션 불러오기
                    
function getGameByTitle(){
    var title;
    var inputTags = document.getElementById("changeable").
                    getElementsByTagName("input");
    for (var i = 0; i < inputTags.length; i++) {
        var tag = inputTags.item(i);
        if(tag.name === 'title'){
            title = tag.value;
        }
    }

    var url = serviceurl + gettitleOp + '?title=' + title;
    var res = getGameXML(loadXML(url));
    setDiv(res);
}

이 함수는 "title"이라고 이름 붙은 태그를 검색하기 위해 changeable div 태그의 input 태그를 잡아낸 후 title 변수에 그 값을 넣어둔다. getGameByTitle 오퍼레이션에 위치를 구성하는 URL은 얻어진 내용을 이용해 생성되고 이전에 정의된 getGameXML() 함수를 사용하여 브라우저에 표시된다.


그림 44. 결과 보기
결과 보기

일치하는 엔트리가 표시된다. 흡사 getGame() 함수를 사용하여 표시된 것과 비슷하다.

이제 "Add New Game" 링크를 구현할 것이다.

신규 게임 추가

말하자면 지금까지는 GET을 사용하여 RESTful한 오퍼레이션을 모두 정의했다. 이제는 POST라고 부르는 것을 사용하여 오퍼레이션을 정의할 차례다. 그 시작으로 "Add New Game" 링크를 구현한다. Listing 20처럼 lib-main.js 파일 정의를 계속해 나간다.


Listting 20. Ajax를 써서 신규 게임 추가 폼 표시
                    
function addNewGame(){
    var str =
        input('title', 'Title', '', 50) +
        input('url', 'URL (to flash)', '', 80) +
        input('width', 'Width', '', 5) +
        input('height', 'Height', '', 5) +
        button('processNewGame', 'Save', '') + '<br/><br/>' +
        linkOnly('getGames', 'Back');

    document.getElementById("changeable").innerHTML = str;
}

이 함수는 게임의 네 가지 상세 내용, 즉 제목(title), URL, 폭(width), 높이(height)를 입력하는 폼을 생성한다. 그림 45에 실제 폼을 보였다.


그림 45. 신규 게임 상세 내용 입력
신규 게임 상세 내용 입력

사용자가 Save를 클릭하면 processNewGame() 함수가 호출된다.


Listing 21. Ajax를 사용하여 addNewGame 오퍼레이션을 불러내어 신규 게임을 데이터베이스로 저장
                    
function processNewGame(){
    var url = serviceurl + addnewOp;

    inputTags = document.getElementById("changeable").
                getElementsByTagName("input");
    var xmldata = '<gamedata><game>';
    for (var i = 0; i < inputTags.length; i++) {
        var tag = inputTags.item(i);
        if(tag.name !== 'processNewGame'){
            xmldata = xmldata + "<" + tag.name + ">" + tag.value +
                "</" + tag.name + ">";
        }
    }
    xmldata = 'gamedata=' +
              encodeURI(xmldata + '</game></gamedata>');

    post(url, xmldata, delayedRefresh2);
}

이 함수는 인코딩된 POST 데이터로서 원하는 변수와 함께 addNewGame 오퍼레이션에 URL을 구성한다. 네 개 입력 상자 각각의 변수들이 for 루프에서 추출되어 XML 태그들과 위치한다. encodeURI 함수는 웹 서비스가 기대하는 형식으로 인코딩을 수행한다. Save를 클릭하면 addNewGame 오퍼레이션에 Listing 22처럼 XML을 전송한다.


Listing 22. addNewGame 오퍼레이션에 보내진 XML
                    
<gamedata>
  <game>
    <title>Monkey Cliff Diving</title>
    <url>http://www.legitgames.com/games/files/diving.swf</url>
    <width>550</width>
    <height>400</height>
  </game>
</gamedata>

데이터베이스는 Listing 22처럼 된 XML을 신규 ID를 갖고 저장하고 성공적으로 추가되었음을 확인한 것을 알려주고 결과를 반환하며(Listing 23 참조) 자바 스크립트 팝업 창을 띄운다.


Listing 23. 성공적으로 추가되었음을 확인
                    
<?xml version="1.0" encoding="UTF-8" ?>
<ns1:addNewGameResponse xmlns=""
     xmlns:ns1="urn:gaming"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <updateCount>1</updateCount>
</ns1:addNewGameResponse>

성공적으로 추가되었음을 알려준 후 환영 페이지에 신규로 추가된 게임을 다시 표시하기 위해 페이지를 리로드해준다(그림 46).


그림 46. 새로운 게임을 포함하여 이용 가능한 게임을 표시
새로운 게임을 포함하여 이용 가능한 게임을 표시

신규 게임이 성공적으로 추가되었다. 이제 각 게임에 대해 갱신(Update) 링크를 구현할 것이다.

게임 갱신

지금까지 게임을 추가할 수 있었으니 사용자들이 게임을 갱신할 수 있도록 Update 링크를 구현할 것이다. Listing 24처럼 updateGame() 함수를 생성하자.


Listing 24. Ajax를 써서 게임 편집 폼 표시
                    
function updateGame(id, title, url, width, height){
    var str =
        input('title', 'Title', title, 50) +
        input('url', 'URL (to flash)', url, 80) +
        input('width', 'Width', width, 5) +
        input('height', 'Height', height, 5) +
        button('processUpdatedGame', 'Edit', id) + '<br/><br/>' +
        linkOnly('getGames', 'Back');

    setDiv(str);
}

이 함수는 신규 게임 데이터를 입력하는 폼을 구성하여 브라우저에 표시한다(그림 47).


그림 47. 새로 추가된 게임 편집
새로 추가된 게임 편집

이제 편집된 내용을 데이터베이스에 저장하기 위해 Edit 버튼이 어떤 일을 할지 설정할 필요가 있다(Listing 25 참조).


Listing 25. Ajax를 사용하여 editGame 오퍼레이션을 불러내어 게임에 대한 편집 내용을 데이터베이스에 저장
                    
function processUpdatedGame(id){
    var url = serviceurl + updateOp;

    inputTags = document.getElementById("changeable").
                         getElementsByTagName("input");
    var xmldata = '<gamedata><game>';
    for (var i = 0; i < inputTags.length; i++) {
        var tag = inputTags.item(i);
        if(tag.name !== 'processUpdatedGame'){
            xmldata = xmldata + "<" + tag.name + ">" + tag.value +
                "</" + tag.name + ">";
        }
    }
    xmldata = 'id=' + id + '&gamedata=' +
              encodeURI(xmldata + '</game></gamedata>');
    
    post(url, xmldata, delayedRefresh2);
}

여기서는 processNewGame() 함수와 마찬가지로 모든 input 태그는 changeable div 태그에서 얻어져 XML 문서로 삽입된다. 그러고 나서 XML 데이터는 encodeURI를 써서 인코딩되어 게임 엔트리의 ID와 함께 웹 서비스의 updateGame 오퍼레이션에 게임 엔트리 ID와 함께 전송된다.

그러고 나면 브라우저에서 Listing 26에서 보듯 성공적으로 수정이 끝났음을 볼 수 있을 것이다.


Listing 26. 성공적으로 수정되었음을 확인
                    
<?xml version="1.0" encoding="UTF-8" ?>
<ns1:updateGameResponse xmlns=""
     xmlns:ns1="urn:gaming" 
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <updateCount>1</updateCount>
</ns1:updateGameResponse>

성공적으로 수정된 후 갱신된 것을 포함하여 게임 엔트리는 브라우저에서 리로드된다(그림 48 참조).


그림 48. 최근 수정된 게임을 포함하여 이용 가능한 게임 보기
최근 수정된 게임을 포함하여 이용 가능한 게임 보기

게임이 갱신되었다.

이제 삭제(Delete) 링크를 구현할 것이다. 그렇게 하여 더 이상 데이터베이스에서 필요없는 게임을 지울 수 있다.

게임 삭제

이제 GAMING 데이터베이스에서 모든 측면을 다루는 데 있어 마지막 함수인 삭제 함수를 구현할 것이다. Listing 27처럼 lib-main.js 파일을 편집하자.


Listing 27. Ajax를 사용하여 deleteGame 오퍼레이션을 불러내어 데이터베이스에서 게임 제거하기
                    
function deleteGame(id){
    var url = serviceurl + deleteOp + "?id=" + id;
    post(url, '', delayedRefresh);
}

이 함수는 URL에 삭제할 게임의 ID를 추가하여 deleteGame 오퍼레이션의 URL을 구성한다. 그러고 나서 post 함수가 인자없이 호출된다. 반환된 후 게임은 브라우저에 화면을 새로 고침한다(그림 49).


그림 49. 삭제된 걸 제외하고 이용 가능한 게임을 보여준다.
삭제된 걸 제외하고 이용 가능한 게임을 보여준다.

이제 GAMING 데이터베이스에서 게임의 모든 측면을 다룰 수 있게 되었다. 하지만 "Play" 링크는 어떻게? 다음에 정의할 것이다.

게임 플레이

게임을 플레이할 수 있을 때가 되었다. 그러기 위해 play 함수를 구현하자(Listing 28 참조).


Listing 28. Ajax를 사용하여 플래시 게임을 플레이하기 위해 플래시 객체 띄우기
                    
function play(id, title, url, width, height){
    var str = 
'<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
         codebase="http://download.macromedia.com/pub/shockwave/'+
'                  cabs/flash/swflash.cab#version=7,0,19,0"
         WIDTH="' + width + '"
         HEIGHT="' + height + '"
         id="FlashContent">' +
'    <PARAM NAME=movie VALUE="' + url + '"' +
'    <PARAM NAME=quality VALUE=high>' +
'    <PARAM NAME="AllowScriptAccess" VALUE="never">' +
'    <embed width="' + width + '"
            height="' + height + '"
            src="' + url + '"
            quality="high"
            NAME="FlashContent"
            AllowScriptAccess="never"
            TYPE="application/x-shockwave-flash"
            PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
     </embed>' +
'</OBJECT><br/><br/>' +
'<a href="javascript:getGames()">Back';
    setDiv(str);
}

이 함수는 플래시 객체를 표시하기 위해 데이터베이스에 있는 게임의 데이터로부터 데이터를 사용하여 게임에 대한 모든 인자를 설정하여 changeable div 태그의 내용을 설정한다. 게임이 즉시 플레이되도록 그렇게 하고 나서 플래시는 브라우저에 로드되어야 한다(그림 50 참조).


그림 50. 게임 플레이
게임 플레이

어느 웹 사이트에서든 게임을 플레이하거나 게임에 대한 지시 사항을 볼 수 있다.

이제 Ajax 클라이언트 작성을 끝마쳤고 데이터베이스에서 게임의 모든 내용을 관리할 수 있게 되었다. 그리고 브라우저에서 플레이할 수도 있게 되었다!

 

요약

이제 여러분은 XML과 Data Studio를 사용하여 Ajax 클라이언트로 서로 통신하는 웹 서비스를 만들 줄 아는 전문가가 되었다. 또한 여러분은 손 하나 까딱하지 않아도 되지만 완벽한 기능을 갖춘 웹 서비스 가이드로서 Data Studio의 SQL 편집기를 사용하는 SQL 및 SQL/XML에서 웹 서비스 대부분을 만들었다. 게다가 XML과 웹 서비스를 써서 게이머가 웹 페이지를 새로 고침하지 않고도 자유롭게 이용 가능한 플래시 게임을 보고, 편집하고, 추가하고, 삭제하며, 플레이할 수 있도록 해주는 멋진 인터페이스를 만들 수 있었다!

기사의 원문보기

다운로드 하십시오

설명 이름 크기 다운로드 방식
튜토리얼 예제 코드 x-devajaxds-tut-example.zip 363KB HTTP
다운로드 방식에 대한 정보

 

 

참고자료

교육


제품 및 기술 얻기

  • Data Studio: 데이터 관리 생애 주기 동안 일관성 있게 통합된 사용자 인터페이스를 갖고 데이터 주도형 애플리케이션 설계, 개발, 배치, 관리를 효과적으로 수행할 수 있도록 해주는 통합 개발 관리 환경

  • DB2 Express-C 9.5: 신뢰성, 유연성, 강력함을 지닌 완벽한 기능의 관계형 XML 데이터 서버

  • 커뮤니티 에디션: 오픈 소스 커뮤니티의 최신 혁신이 이미 통합된 경량화된 애플리케이션 서버(아파치, 톰캣 포함)

  • 제품 평가를 위한 IBM 체험판 소프트웨어: DB2®, Lotus®, Rational®, Tivoli®, WebSphere® 등 애플리케이션 개발 도구와 미들웨어 제품을 developerWorks에서 직접 다운로드하여 쓸 수 있는 체험판 소프트웨어로 다음 번 프로젝트를 해보기 바란다.


토론

필자소개

Tyler Anderson은 Bringham Young University에서 2004년 전산학 학위를 취득했고 동대학에서 2005년 12월 컴퓨터공학 석사 학위를 취득했다. Tyler는 현재 Backstop Media에서 자유기고가이자 개발자로 활동하고 있다.

 

[본문링크] Data Studio를 이용한 XML 주도형 Ajax 애플리케이션의 빠른 개발
[1]
코멘트(이글의 트랙백 주소:/cafe/tb_receive.php?no=31416
작성자
비밀번호

 

SSISOCommunity

[이전]

Copyright byCopyright ⓒ2005, SSISO Community All Rights Reserved.