 |
|
난이도 : 중급 Ed Slattery, Advisory Software Engineer, IBM
Judy Taylor, Software Engineer, IBM
원문 게재일 : 2007 년 8 월 21 일
번역 게재일 : 2009 년 10 월 13 일
Project Zero는 PHP 등의 유명한 웹 기술을 기반으로 하는 대화식 웹 애플리케이션을 빠르게
개발할 수 있는 환경을 제공합니다. 이 연습에서는 개발 도구를 설치하는 단계부터 PHP를 백
엔드 스크립트 언어로 사용하여 Ajax Web 2.0 샘플을 작성하는 단계에 대한 자세한 설명을 통해
Project Zero를 얼마나 쉽게 시작할 수 있는지 보여 줍니다. Web 2.0 애플리케이션을 확장하는
예제를 설명하면서 애플리케이션을 내보내는 작업에 대해서도 설명합니다.
편집자 주: IBM® WebSphere® sMash 및 IBM WebSphere
sMash Developer Edition의 토대는 좋은 평판을 받고 있는 Project
Zero 인큐베이터 프로젝트이다. Project Zero는 WebSphere sMash를 위한 개발 커뮤니티로 개발자에게
애플리케이션 개발을 위한 무료 플랫폼을 제공하는 동시에 최신 빌드, 최신 기능 및 커뮤니티 지원도 지속적으로
제공할 것이다.
시작하기 전에
시작하기 전에 먼저 Project Zero 웹 사이트를
둘러보자. Project Zero 커뮤니티에 가입하여 프로젝트에 동참하거나 토론 포럼에 참여하여 각 개발 단계에서
프로젝트에 대한 의견을 제안할 수 있다. 이 기사에서는 사용자의 시스템에 적합한 JDK(Java™ Development
Kit)가 설치되어 있는 것으로 간주한다. 또한 PHP 및 JavaScript 개념에도 익숙해야 한다.
Project Zero 개요
Project Zero는 대화식 웹 애플리케이션을 빠르고 간편하게 개발할 수 있는 환경을 제공하며 이
프로젝트의 목적은 애플리케이션 개발자가 비즈니스 로직에 최대한 집중할 수 있도록 돕기 위해 완벽한 웹 전개
인프라를 제공하는 것이다. 쉽게 시작할 수 있다는 것을 보여 주기 위해 이 기사에서는 빈 디렉토리부터 시작하여
필수 개발 도구를 모두 설치한 다음 PHP를 백 엔드 스크립트 언어로 사용하여 Ajax Web 2.0 샘플을 개발하는 일련의
단계를 담고 있는 연습 과정을 설명한다. 여기에서는 Eclipse를 개발 환경으로 사용한다.
이 기사에서는 연습을 완료하는 데 필요한 모든 지시 사항을 제공하기는 하지만 Project Zero
사이트(참고자료 참조)에서 Project Zero for PHP를 다운로드하고 설치하는
방법에 대한 자세한 지시 사항을 확인할 수 있다.
Project Zero for PHP 설치하기
이제 이 연습을 시작하는 첫 번째 단계로서 이 목록에 제시된 단계를 수행하여 Project Zero for PHP를 설치한다.
- 새로운 빈 디렉토리(예:
zero_example)를 작성한다.
- Eclipse 내에서 PHP용 전체 개발 환경을 다운로드한다(참고자료에서
링크 참조). 참고: Download 페이지에서 빌드 페이지를 선택해야 한다. 이 기사에서는
안정적인 빌드인 S20070910-RC1을 선택했지만 이후로 변경되었을 수도 있으므로 안정적인 빌드
중 최신 빌드를 선택해야 한다. 중요: S20070611-M1 등의 이전 버전은 현재 릴리스의
Project Zero와 더 이상 작동하지 않는다. 사용 중인 운영 체제에 해당하는 All-in-One PDT .zip
파일(예: pdt-all-in-one-<release_name>-win32.zip)을 다운로드한 다음 zero_example
디렉토리에 압축 풀기한다. 예를 들어, Eclipse를 사용하는 경우 zero_example/<pdt_release_name>/eclipse라는
디렉토리가 작성된다.
이제 개발 환경이 갖추어졌으므로 Project Zero에서 PHP를 사용하여 개발 작업을 진행하는 데
필요한 Eclipse 플러그인을 다음과 같은 방법으로 설치할 수 있다.
- zero_example/eclipse 디렉토리에 있는 eclipse.exe를 실행한 후 메시지가 표시되면
zero_example/workspace라는 새 작업 공간 이름을 지정한다.
- 메뉴에서 Help > Software Updates > Find and Install...을 선택한다.
- 표시되는 대화 상자에서 Search for new features to install을 선택하고 Next를 클릭한다.
이제 소프트웨어 업데이트를 검색할 새 원격 사이트를 추가할 수 있다.
- New remote site를 클릭한 후 표시되는 대화 상자에서 사이트에
Project Zero라는 이름을 지정한다.
- 새 원격 사이트에 다음 주소를 할당한다.
http://www.projectzero.org/update/zero.eclipse.php.latest
- OK를 클릭한 후 바깥쪽 대화 상자에서 Finish를 클릭한다.
- 검색 결과 대화 상자에서 트리에 있는 전체 Project Zero 요소를 선택하고 Next를 클릭한다.
- 라이센스 계약에 동의한 후 Next를 클릭한다.
- Finish와 Install All을 차례로 클릭한다.
PHP를 위한 Project Zero 환경이 이제 설치되었다. Eclipse를 다시 시작하라는
요청에 따라 다시 시작하고 나면 환경을 사용하기 위한 준비가 완료된다. 이제 간단한 PHP
애플리케이션을 작성할 수 있다.
첫 번째 애플리케이션 개발하기: MyFirstProject
첫 번째 애플리케이션 개발을 시작하면서 가장 먼저 수행할 단계는 다음과 같이 Eclipse에서 새 Zero 프로젝트를 작성하는 것이다.
- File > New > Project...를 선택한 후 대화 상자에서 Zero 범주를 펼친다(그림 1 참조).
- Project Zero PHP Application을 선택하고 Next를 클릭한다.
- 프로젝트에 이름(예:
MyFirstProject)을 지정하고 Finish를 클릭한다. 그러면 프로젝트가 작성된다.
그림 1. Project Zero 범주
위에서 선택한 Project Zero PHP Application은 앞으로 PHP를 사용할 것임을
의미하므로 적합한 php.ini 파일이 프로젝트의 config 디렉토리에 자동으로 배치된다. Listing 1에서는
이 INI 파일에 포함된 컨텐츠 중 일부를 보여 준다. Listing 1의 코드는 PHP에게 Zero 확장을 로드하도록
지시한다.
Listing 1. Project Zero PHP 확장
extension = zero.php.ZeroExtension
extension = zero.php.JSONExtension
extension = zero.php.LoginServiceExtension
extension = zero.php.ACFExtension
extension = zero.data.php.QueryExtension
extension = zero.php.XMLExtension
extension = zero.php.NetworkExtension
extension = zero.php.URIUtilsExtension
|
필수 PHP 종속성도 ivy.xml 파일에 추가되었다. 탐색 창에서 이 파일을 두 번 클릭하면
zero.php 종속성을 목록에서 볼 수 있다. (참고적으로 여기에서 Add를 클릭하면 추가할 수 있는
다른 모듈의 목록을 볼 수 있다.)
이제 Zero에서 PHP를 활성화하고 PHP에서 Zero 확장을 활성화했으므로 Zero 런타임에서
P8 엔진을 호출하여 웹 애플리케이션으로부터 들어오는 데이터를 처리할 수 있다. PHP는 Zero PHP
확장의 서비스를 사용하여 Zero Global Context에 액세스할 수 있다.
Zero Global Context는 Zero 개발에 필요한 핵심 요소 중 하나이다. 클라이언트와
서버에 필요한 모든 것을 Global Context에서 찾을 수 있다. (Zero 문서의 Core Developer's Guide에서
자세한 정보를 확인할 수 있으며 참고자료에서 링크 정보를 볼 수 있다.)
다음으로 수행할 단계는 PHP 스크립트를 사용하여 클라이언트 측에서 약간의 데이터를
입력하면 서버측에서 해당 데이터를 읽어오는 간단한 PHP 애플리케이션을 작성하는 것이다.
PHP 애플리케이션 작성하기
시작하기 전에 창의 오른쪽 맨 위 모서리에 있는 이름을 검사하여 PHP Perspective에서 개발 중인지
확인한다. PHP Perspective에 있지 않은 경우에는 창의 오른쪽 위 모서리에 있는 더하기 기호가 표시된 아이콘을
클릭하여 Perspective를 변경한다.
이제 다음 단계를 수행한다.
- MyFirstProject 디렉토리를 펼친다.
- public 디렉토리를 마우스 오른쪽 단추로 클릭하고
MyFirstForm.php라는
새 PHP 파일을 작성한다. Listing 2의 코드를 양식에 복사하여 기본 PHP 태그를 덮어쓴 후 파일을 저장한다.
Listing 2. 간단한 양식
<!--Input form with one field and a button-->
<html>
<head>
<title>My First Form</title>
</head>
<body>
<form name="input" action="/action.php" method="POST">
<input type="text" name="item">
<input type="submit" name="action" value="Post a message">
</form>
</body>
</html>
|
참고: 파일 확장자가 .php이기는 하지만 실제 내용은 PHP가 아니라 HTML이므로
확장자를 .html로 변경하더라도 정상적으로 작동한다. PHP 스크립트를 이 양식에 포함시킬 수도 있지만
이 기사에서는 POST를 처리하기 위해 action.php라는 또 하나의 양식을 작성한다. form action='action.php'
코드 행은 작업을 처리하는 스크립트를 서버에 알려준다.
이제 public 디렉토리에서 action.php라는 두 번째
PHP 파일을 작성한 후 Listing 3의 코드를 붙여넣고 파일을 저장한다.
Listing 3. 간단한 PHP 백 엔드
<html>
<body>
<b>Processing your entry</b>
<?php
$method = zget('/request/method');
echo "<p>The request was a $method</p>";
$keys = zlist('/request/params', true);
echo "<p>Here is the data:</p>";
echo "<table cellspacing='0' cellpadding='0' border='1' >";
echo "<tr><td>Key</td><td>Values</td></tr>";
for ($i=0;$i<count($keys);$i++) {
echo "<tr><td>$keys[$i]</td>";
echo "<td>";
$value = zget($keys[$i]);
if (is_array($value)) {
for ($j=0;$j<count($value);$j++) {
echo "$value[$j] ";
}
} else {
echo "$value";
}
echo "</td>";
echo "</tr>";
}
echo "</table>";
?>
</body>
</html>
|
Listing 3에는 HTML 코드와 PHP 코드가 혼합되어 있다. 이 PHP 코드는 약간의 HTML
코드를 출력하지만 원래 양식에 입력한 값을 사용한다. 이 양식에서 Project Zero 부분은 다음과 같다.
Listing 4. Global Context에서 항목 가져오기
$method = zget('/request/method');
$keys = zlist('/request/params', true);
...
$value = zget($keys[$i]);
|
Listing 4의 첫 번째 행에서는 zget()을 사용한다. 이
메소드는 Zero 확장을 php.ini 파일에 추가하여 PHP에 포함된 Zero 런타임의 일부이며 Global
Context에서 단일 값을 가져온다. 두 번째 행에서는 zlist()를 사용하고
있으며 Global Context의 항목은 키/값 쌍으로 구성된 목록이기 때문에 이 경우에는 '/request/params'를
매개변수로 제공한다. 이 Listing의 세 번째 행을 포함한 루프에서는 수신된 키를 사용하여 해당 값을
가져와서 배열 또는 문자열로 인쇄한다.
PHP 애플리케이션 실행하기
이러한 두 양식이 결합되어 전체 Zero 예제 애플리케이션이 만들어진다. Eclipse에서
프로젝트 이름을 마우스 오른쪽 단추로 클릭하고 Run as > Project Zero Application을
선택한다. 그러면 웹 서버가 로컬 호스트의 8080 포트에서 시작된다. 이제 브라우저에서 http://localhost:8080/MyFirstForm.php를
실행하면 입력 양식이 표시되어야 한다. This is my zero project와
같은 간단한 데이터를 입력하고 단추를 클릭한다. 그러면 출력 양식이 표시되면서 앞에서 입력한
데이터가 들어 있는 테이블이 표시되어야 한다(그림 2 참조).
그림 2. 샘플 출력
브라우저의 Back 단추를 클릭하여 입력 양식으로 돌아간 후 다른 데이터를
입력하고 post a message를 다시 클릭하여 새로 입력한 데이터를 표시할 수 있다. 애플리케이션의
실행을 중지하려면 콘솔 창의 빨간색 사각형 기호를 클릭한다.
Project Zero를 제대로 이해하기 위해서는 Global Context에서 쿼리하고 설정할 수 있는 데이터
요소를 비롯하여(이 예제에서는 get() 메소드를 사용하여 데이터 요소를 확인함)
data zero 등의 다른 플러그인을 사용하여 데이터베이스의 데이터를 저장 및 검색하는 방법도 알아야 한다.
애플리케이션 내보내기
|
.zip 파일이 Eclipse에 표시되지 않을 경우
.zip 파일을 디스크에 저장했더라도 이 파일은 Eclipse에서 생성된 아티팩트가 아니므로
Eclipse에 파일의 현재 상태가 아직 등록되어 있지 않다. 프로젝트 이름을 마우스 오른쪽 단추로 클릭하고
Refresh를 선택한다.
|
|
프로젝트를 내보내기 전에 콘솔 탭 위의 제목에 있는 빨간색 사각형을 클릭하여
Zero 서버를 중지해야 한다. 서버를 중지한 후에는 다음 지시 사항에 따라 애플리케이션을 내보낼
수 있다.
- Eclipse에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 Export...를 선택한다.
- Zero 범주를 펼치고 Project Zero Export Wizard를 선택한다.
- 내보낼 디렉토리의 이름을 선택한 후 소스를 포함하도록 상자를 선택한다.
- 마지막으로 Finish를 선택한다. 그러면 선택한 디렉토리에 프로젝트가
.zip 파일 형식으로 내보내진다.
.zip 파일은 프로젝트를 전송하기 위한 수단에 불과하기 때문에 명령행에서 프로젝트를
실행하려면 명령행 Zero 런타임을 설치한 후 런타임의 apps 디렉토리에 프로젝트를 압축 풀기해야 한다.
이 시점에서 애플리케이션을 Zero 서버에 전개하려면 Project Zero 설명서(참고자료
참조)의 지시 사항에 따라 명령행 런타임을 가져온다. Zero 핵심 라이브러리를 선택하는 "zero seed"를
실행할 때까지 CLI 설치 지시 사항을 수행해야 한다. 설명서의 해당 섹션에 있는 나머지 지시 사항에서는
샘플을 설치하고 apps 디렉토리를 작성하는 방법에 대해 설명하는 내용이므로 계속해서 나중에 사용할
샘플을 미리 설치하거나 Windows® 탐색기를 사용하여 apps 디렉토리만 작성할 수도 있다. 이들
단계를 완료한 후에는 이 연습의 현재 섹션으로 돌아온다.
|
전개 관련 문제
MyFirstForm.php를 로드하는 중에 오류 500이 발생한 경우에는 config 디렉토리에
php.ini 파일이 실제로 있는지 확인한다. 이 파일이 없는 경우에는 다른 샘플 프로젝트나 PHP를 설치한
디렉토리에서 파일을 찾아서 가져온다.
작업 양식을 로드하는 중에 unknown method get() 오류가 발생한 경우에는
php.ini 파일에 정의된 Zero 확장이 있는지 확인한다.
|
|
이제 다음 단계에 따라 애플리케이션을 실행한다.
- Eclipse에서 내보낸 .zip 파일을 <zerohome>/apps 디렉토리에 압축
풀기한다. 그러면 애플리케이션의 apps 아래에 디렉토리 구조가 작성된다. .zip 파일을 압축 풀기한
방법에 따라 단일 애플리케이션 디렉토리(예: MyFirstProject)가 작성되거나 애플리케이션 디렉토리가
포함된 기본 디렉토리가 작성될 수 있다.
- 디렉토리를 애플리케이션의 기본 디렉토리로 변경해야 하며 이 디렉토리에는
config라는 서브디렉토리가 있어야 한다. 그런 다음
zero resolve를 입력한다.
- 마지막으로
zero run을 입력한다. 그러면 Eclipse에서
처음에 봤던 서버와 동일한 서버가 8080 포트에서 시작된다. 이제 브라우저에서 MyFirstForm.php 파일을 로드할
수 있다.
- 서버를 다시 중지하려면 명령 프롬프트에서 Ctrl-C를 누른다.
Ajax 기능 추가하기 -- 두 번째 애플리케이션: MyFirstDojoApp에서 Ajax와 Project Zero 사용하기
지금까지 간단한 PHP 애플리케이션을 작성했다. 이제부터는 JavaScript와 Dojo를 사용하여
Ajax 기능을 두 번째 애플리케이션에 쉽게 추가하는 방법에 대해 설명한다. 먼저 다음 단계를 수행한다.
- 먼저 Eclipse에서 File > New > Project...를 클릭하여 새 Zero 애플리케이션 프로젝트를 작성한다.
- Project Zero PHP 애플리케이션 스타일을 선택하고 Next를 클릭한다.
- 프로젝트에 이름(예:
MyFirstDojoApp)을 지정하고 Finish를 클릭한다.
이 애플리케이션에서는 Dojo도 사용할 것이므로 다음과 같이 Zero 구성을 설정해야 한다.
- MyFirstDojoApp을 펼치고 config 디렉토리를 펼친다.
- ivy.xml 파일을 연 후 Zero Package Information 분할창에서 Add...를 클릭한다.
- Dependency Selection 창에서 Dojo 종속성이 있는지 확인한 후(그림 3
참조) 종속성이 있으면 단계 8로 이동한다.
- Dojo 종속성이 없으면 Manage Repository를 클릭한다(그림 3 참조).
- Manage Repository 창에서 다른 데이터를 입력하지 않은 채로 Search를 클릭한다.
- 저장소가 검색되는 동안 잠시 기다리면 목록이 표시된다(그림 3b 참조).
- Dojo 종속성을 선택하고 Download와 Close를 차례로 클릭한다.
- Dependency Selection 창에서 최신 Dojo를 선택하고 OK를 클릭한다. (필자는 Dojo
0.9를 사용했지만 현재는 다음 상위 버전이 나와 있다.) Zero Package Information 분할창의 종속성 목록에
Dojo가 추가되었는지 확인한다.
- File > Save 메뉴를 사용하여 변경 사항을 저장한다.
그림 3. Dojo 종속성
그림 3b. Manage Repository 창
|
Zero 종속성 업데이트하기
Dojo 및 PHP와 같은 모든 종속성은 버전 제어에 의해 관리되므로 Eclipse 도구 모음에서
Update Dependencies 단추를 클릭하거나 메뉴에서 Zero > Update Dependencies를 선택하면
종속성이 최신 버전으로 업데이트된다(그림 4 참조).
|
|
그림 4. 종속성 업데이트하기
이제 애플리케이션에 대한 JavaScript 및 HTML 프론트 엔드를 작성하자.
public 디렉토리에서 Example.html이라는 새 파일을 작성한
후 Listing 5의 코드를 붙여넣고 파일을 저장한다.
Listing 5. 간단한 JavaScript 프론트 엔드
<html>
<head>
<title>Dojo Zero Example</title>
<style type="text/css">
@import "dijit/themes/noir/noir.css";
@import "dojo/dojo.css"
</style>
<script type="text/javascript" src="dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dojo.parser");
function enterPressed() {
alert('The enter button was pressed');
}
</script>
</head>
<body>
<br/>
<br/>
Type your name then press enter: <input type='text' id ='name'/>
<br/>
<br/>
<br/>
<button dojoType='dijit.form.Button' onclick='enterPressed' >Enter</button>
</body>
</html>
|
Listing 5의 코드는 서버와 통신하지는 않고 Enter
단추를 클릭했을 때 "The button was pressed"라는 팝업 메시지만 표시한다. 이 코드에서는 단추에서
일반적인 onClick을 사용하지 않는 대신 Dojo 이벤트 시스템을 사용하여
페이지가 로드될 때 호출할 메소드를 등록한다.
Dojo 테스트하기
이 단계에서 애플리케이션에 대한 테스트를 수행하여 시나리오의 Dojo 부분이 정상적으로
작동하는지 확인하는 것이 좋다.
- 프로젝트 이름을 마우스 오른쪽 단추로 클릭하고 Run as... > Project Zero Application을 선택한다.
- 브라우저에서 http://localhost:8080/Example.html로 이동한다.
- Example.html은 단추와 입력 필드가 포함된 입력 분할창이어야 한다(그림 5 참조). 입력
필드에 텍스트를 입력하고 단추를 클릭한다. "The enter button was pressed"라는 팝업 메시지가 표시되는지
확인한다.
- 이 시점에서 Firefox 확장인 Google Firebug를 가져와서 Firefox에 설치할 수
있다. 이렇게 하면 나중에 Firefox에서 복잡한 JavaScript 파일도 처리할 수 있다.
- 입력 분할창이 표시되기는 하지만 단추를 클릭했을 때 메시지가 표시되지 않는다면
Dojo가 사용되지 않고 있는 것이므로 Enter 단추의 글꼴과 모양을 확인한다(그림 5 참조). Dojo 컨트롤에는
템플리트(이 예제의 경우 "noir")에 따라 페이지 머리글에 표시된 것과 동일한 스타일이 적용된다. 따라서
Dojo가 실행되지 않고 있을 때는 일반적인 시스템 글꼴 및 단추 모양이 표시된다. 이전 단락에서 설정한
프로젝트의 Dojo 종속성을 다시 확인한다(그림 3 참조).
그림 5. Dojo 단추
PHP 백 엔드 추가하기 및 프론트 엔드 완료하기
이제 버튼 클릭 이벤트를 Zero에 전달하는 코드와 이벤트를 선택하여 처리하는 간단한 PHP 스크립트를 추가하자.
- public 디렉토리에서
ExampleResponse.php라는 새 파일을 추가한다.
- Listing 6의 코드를 붙여넣고 파일을 저장한다.
Listing 6. 또 하나의 PHP 백 엔드
<?php
$method = zget('/request/method');
echo " The request was a $method ";
$keys = zlist('/request/params', true);
echo "\n Here is the data: ";
for ($i=0;$i<count($keys);$i++) {
echo " Key: $keys[$i] value:";
$value = zget($keys[$i]);
if (is_array($value)) {
for ($j = 0; $j <count($value) ; $j++ ) {
echo " $value[$j] ";
}
} else {
echo " $value ";
}
}
?>
|
이 연습의 첫 번째 예제와 매우 유사한 Listing 6에서는 메시지를
가져와서 표시할 컨텐츠를 리턴한다.
그런 다음 Example.html로 돌아가서 앞에서 작성한 ExampleResponse와 함께 바인드할
enterPressed 함수를 추가한다.
Listing 7. PHP 백 엔드에 해당하는 enterPressed 함수
function enterPressed()
{
var deferred = dojo.xhrGet({
url: "ExampleResponse.php",
handleAs: "text",
content: {name: dojo.byId('name').value},
timeout: 5000, //Time in milliseconds
handle: function(response, ioArgs){
if(response instanceof Error){
if(response.dojoType == "cancel"){
alert("Request cancelled.");
}else if(response.dojoType == "timeout"){
alert("Request timed out.");
}else{
alert(response);
}
}else{
alert(response);
}
return response;
}
});
}
|
경고를 표시하기 위한 처리기가 위에 있는 enterPressed
함수의 정의에 포함되어 있다. 이 함수는 Dojo 0.4.3을 대상으로 작성된 이 기사의 이전 버전에서
사용했던 dojo.io.bind에 대한 호출을 대체한다.
모든 작업을 저장한다.
이제 브라우저로 이동하여 Example.html 페이지를 새로 고친 후 name 필드에 텍스트를
입력하고 Enter 단추를 클릭하면 서버에서 리턴된 "The request was a GET" 메시지가 표시된다(그림
6 참조).
그림 6. 애플리케이션
완성된 Zero Ajax 애플리케이션
드디어 Zero Ajax 애플리케이션이 완성되었다. 이 애플리케이션이 지금까지 작성해 본 애플리케이션
중에서 가장 완벽한 웹 애플리케이션은 아닐지라도 정말 쉽게 작성했다는 것만은 인정할 수 있을 것이다.
서버측의 모든 기능이 정상적으로 작동하기는 했지만 만일 오류가 발생한다면 어떻게 해야
할까? 이제부터는 부가적인 연습 차원에서 PHP 스크립트를 변경하여 오류를 발생시킨 후 오류를 디버깅하는
방법에 대해 살펴보자.
마우스 추적하기
마지막으로 재미 삼아 마우스 위치를 서버에 알려주면 서버에서 텍스트 상자에 배치할
위치를 리턴하는 예제를 작성해보자. 모든 마우스 이동을 전송하게 되면 시스템 효율이 저하되므로
좋은 방법이 아니지만 여기에서는 Ajax의 대화 기능을 보여 주기 위해 이 방법을 사용한다.
Dojo에서 페이지의 본문을 컨트롤로 인식하여 마우스 이동을 추적할 수 있도록 하려면
본문에 이름을 지정해야 한다. 또한 리턴된 결과에 대한 새 위젯도 추가해야 한다. Listing 8에서는
페이지의 body 섹션을 보여 준다.
Listing 8. 새 위젯
<body id="body">
<br/>
<br/>
Type your name then press enter: <input type='text' id ='name'/>
<br/>
<br/>
<br/>
<button dojoType='dijit.form.Button' onclick='enterPressed' >Enter</button>
<br/>
Mouse Position: <input type='text' id='pos'/>
<br/>
</body>
|
그런 다음 마우스 이동 처리기를 이벤트에 연결하는 코드를 init()
메소드에 추가하고 변경 사항을 모두 저장한다 Listing 9에서는 init() 메소드를 보여 준다.
Listing 9. 본문의 마우스 이동 연결하기
function init()
{
var domElement = document.getElementById('body');
dojo.connect(domElement, 'onmousemove',
function (evt)
{
var deferred = dojo.xhrGet({
url: "MouseResponse.php",
handleAs: "text",
content: {x:evt.pageX , y:evt.pageY},
timeout: 5000, //Time in milliseconds
handle: function(response, ioArgs){
if(!(response instanceof Error)){
dojo.byId('pos').value = response;
}
return response;
}
});
}
);}
dojo.addOnLoad(init);
|
마지막으로 마우스 이동을 처리하는 PHP 스크립트를 public 디렉토리에 추가한 후
Listing 9의 코드와 같이 MouseResponse.php를 호출한다. Listing 10의
컨텐츠를 PHP 파일에 붙여넣는다.
Listing 10. 마우스 이동을 처리하는 PHP 백 엔드
<?php
$keys = zlist('/request/params',false);
for ($i=0;$i<count($keys);$i++) {
echo "$keys[$i]=";
$value = zget('/request/params/'.$keys[$i]);
echo "$value";
}
?>
|
이제 페이지를 실행하면 그림 7과 같이 위치 업데이트가 표시되어야 한다.
그림 7. 애플리케이션
서버를 종료하기 전에 이 페이지를 닫는다. 그렇지 않으면 처리할 마우스 이동에 대한 오류 메시지가 표시된다.
요약 및 다음 단계 -- 살펴본 내용
이 연습에서 수행한 작업은 다음과 같다.
- Eclipse Development Environment for PHP를 설치했다.
- Web 2.0에서의 PHP 개발을 지원하는 Project Zero 환경을 설치했다.
- 간단한 HTML 양식과 PHP 백 엔드를 개발했다.
- 애플리케이션을 내보낸 후 Zero 명령행에서 애플리케이션을 실행했다.
- JavaScript와 HTML을 결합한 두 번째 PHP 애플리케이션을 프론트 엔드용으로 개발했다.
- 일부 오류를 만든 후 디버깅했다.
- 추가 콜백과 새 Dojo 위젯을 사용하여 Ajax 애플리케이션을 확장했다.
다음 단계
지금까지 간단한 Ajax Zero 애플리케이션을 모두 작성했으므로 앞으로는
Dojo 라이브러리와 PHP 백 엔드 스크립트를 다양한 방법으로 활용해 볼 수 있다. Apache
Derby를 통해 이러한 도구를 Data Zero 구성 요소와 결합하여 실질적인 데이터 검색 시스템을
개발할 수도 있을 것이다. Project Zero와 함께 제공되는 Employee Demo PHP 샘플을 보면
시작할 때 많은 도움을 받을 수 있다. 참고자료 섹션의 Project
Zero Documentation 링크를 따라가면 Project Zero 데모를 볼 수 있다.
참고자료에 있는 Project Zero Developer's Guide에서
Zero Global Context 및 기타 관련 항목(예: 리소스(REST) 처리)에 대한 자세한 정보를 볼 수 있다.
이 연습이 Project Zero를 시작하는 데 많은 도움이 되었기를 바란다. projectzero.org에
방문하면 이 성장하는 커뮤니티에 참여할 수 있다. Project Zero 라이브러리가 자주 업데이트되고
있으므로 developerWorks에서 종종 확인하기 바란다.
참고자료 교육
제품 및 기술 얻기
토론
필자소개 | 
| | Ed Slattery는 작년에 PHP 팀에서 활약하면서 P8 런타임용 구문 분석기와 스캐너를 개발했다. |
| 
| | Judy Taylor는 PHP 팀의 오픈 소스 소프트웨어 전문가로 소프트웨어 테스트에 대한 경험이 풍부하다. |
기사에 대한 평가
|
| 이 문서 북마킹 하기
|
| 
