한빛출판네트워크

제공 : 한빛 네트워크
저자 : Jack Herrington
역자 : 이대엽
원문 : Administering MySQL Using Flex

PHPMyAdmin은 끝내 준다. 이것에 대해서는 의심할 여지가 없다. PHPMyAdmin은 PHP를 기반으로 하는 최고의 애플리케이션 중의 하나라고 할 수 있는데, MySQL 관리에 있어 거추장스러운 명령행 인터페이스를 웹 브라우저로 바꿔 주기 때문이다. 하지만 이러한 큰 장점이 있음에도 불구하고 PHPMyAdmin는 사용하기에 편하거나 좋아 보이지는 않는다. 그래서 나는 MySQL 관리에 있어 매력적인 프론트 엔드를 둘 수 있을지 확인해 보려고 RIA(Rich Internet Application) 프레임워크를 이용해 보기로 생각했다.

이러한 작업을 하기 위해 Ajax를 선택할 수도 있었지만 클라이언트측 비호환성(incompatibility) 문제들을 다루고 싶지는 않았다. 실버라이트(Silverlight)도 확실히 흥미롭긴 하지만 아직까지는 이른 감이 있다. 그래서 나는 풍부한 사용자 인터페이스 툴킷과 손쉬운 웹 서비스 통합, 그리고 어떠한 운영 체제상에서도 동일한 방식으로 실행되는 플래시 애플리케이션을 생성해 준다는 이유로 Adobe Flex를 선택하게 되었다.

나는 애플리케이션을 구축하는 데 있어 많은 것들을 배웠는데, 내가 배웠던 것들로는 PHP에서 안전한 SQL 웹 서비스를 구축하는 법과 Flex에서 웹 서비스에 접근하는 법, 그리고 웹 서비스에서 반환된 데이터를 받아 데이터 그리드(data grid)에 표시하는 것을 얼마나 쉽게 할 수 있는지와 같은 것들이 포함된다. 이 기사에서 여러분은 백 엔드에서 프론트 엔드에 이르기까지의 전 단계를 밟아 나가면서 애플리케이션을 구축해 보고, 여러분만의 RIA에 써 볼만한 재미있는 요소들을 확인해 볼 수 있을 것이다.

백 엔드 구축하기

Flex 애플리케이션은 데이터를 요청하고 게시하는데 서버상의 웹 서비스와 소통하기를 좋아한다. 따라서 첫 번째로 해야 할 일은 데이터베이스와 테이블 목록, 혹은 테이블에 들어 있는 데이터를 XML로 반환하는 매우 간단한 PHP 스크립트를 만드는 것이었다.

[리스팅 1] req.php

getMessage()); } 

$dom = new DomDocument(); 
$dom->formatOutput = true; 

$root = $dom->createElement( "records" ); 
$dom->appendChild( $root ); 

$res =& $mdb2->query( $sql ); 
if (PEAR::isError($mdb2)) { die($mdb2->getMessage()); } 
while ($row = $res->fetchRow(MDB2_FETCHMODE_ASSOC)) 
{ 

    $rec = $dom->createElement( "record" ); 
    $root->appendChild( $rec ); 

    foreach( array_keys( $row ) as $key ) { 
        $key_elem = $dom->createElement( $key ); 
        $rec->appendChild( $key_elem ); 
        $key_elem->appendChild( $dom->createTextNode( $row[$key] ) ); 
    } 
} 
$res->free(); 

$mdb2->disconnect(); 

header( "Content-type: text/xml" ); 
echo $dom->saveXML(); 
?>

스크립트에서 첫 번째로 하는 일은 MDB2 라이브러리를 이용하여 데이터베이스에 연결하는 것이다. MDB2 라이브러리가 설치되어 있지 않다면 PEAR를 이용하여 다음과 같이 설치한다:

% pear install MDB2 
%

만약 PEAR가 작동하지 않는다면http://pear.php.net/mdb2로 이동하여 소스를 다운받아 PHP에 대한 인클루드 패스(include path) 어딘가에 패키지를 푼다. MDB2는 인기있는 PEAR DB 라이브러리를 대체한 일반화된 데이터베이스 어댑터 계층(generic database adapter layer)이다.

다음으로 스크립트에서 하는 일은 출력 결과에 대한 XML 트리를 생성하는데 사용할 XML DOM Document 객체를 생성하는 것이다. 여기서부터 스크립트에서는 쿼리를 실행하여 XML 트리에 XML 태그로 row와 column을 추가한다. 마지막으로 스크립트에서는 모든 연결을 해제하고 XML을 PHP 출력 스트림에 저장함으로써 실행을 끝낸다.

내가 XML DOM 객체를 이용하는 까닭은 XML DOM 객체에서 데이터나 불균형한 태그, 혹은 XML을 지저분하게 만드는 갖가지 이유로 인해 발생하는 어떠한 인코딩 문제에도 처하지 않게 해줄 것이기 때문이다. 나는 XML 데이터 스트림이나 디버깅하면서 시간을 보낼 만큼 한가하지는 않다. 여러분도 마찬가지일 것이라 확신한다.

스크립트가 로컬 머신에서 실행될 수 있는 곳에 설치되면 curl 명령어를 이용하여 서버에 요청을 보낸다.

% curl "http://localhost/sql/req.php" 
 
 
     
        addresses
    
     
        ajaxdb 
     
... 
%

이 경우 데이터베이스나 mode를 지정하지 않았는데, 이렇게 하면 스크립트에서는 이용 가능한 데이터베이스 목록을 반환한다. 웹 서버 스크립트에서 이러한 작업을 수행하기 위한 권한이 있다고 가정했을 때 curl 문장 다음에 보여 지는 것이 요청의 결과이다. 여기에서는 서로 다른 데이터베이스 목록을 태그 형태로 가져왔다.

스크립트에서 반환되는 모든 데이터에는 여러 개의 태그를 포함하는 태그가 있을 것이다. 각 태그의 이름과 내용은 실행된 SQL문에 따라 달라질 것이다. 이 경우에는 database라는 이름을 가진 단 하나의 컬럼 만이 반환되었다. curl을 이용하는 것 외에 또 다른 대안은 URL을 브라우저로 불러들인 다음 페이지가 로딩된 후 소스 보기(View Source)를 선택하는 것이다.

다음 예제에서는 articles 데이터베이스에 연결하여 테이블 목록을 가져올 것이다. 여러분은 아래와 같은 결과를 볼 수 있을 것이다:

% curl ".../req.php?mode=getTables&db=articles" 
 
 
     
    article 
     
 
%

articles 데이터베이스에는 article이라는 이름을 가진 하나의 테이블만이 포함되어 있다. 모든 레코드를 가져오기 위해 전형적인 select * from article 쿼리를 실행하려면 아래에 보여 지는 URL을 사용한다:

% curl ".../req.php?mode=getData&db=articles&table=article" 
 
 
     
        1 
         
        Apple Computer is going to release the iPhone... 
     
     
        2 
         
        Google, Inc. of Mountain View California has... 
         
 
%

테이블에는 두 개의 레코드가 있다는 것을 알 수 있는데, 하나는 애플에서 출시한 정말 멋진 iPhone이고 다른 하나 역시 구글에서 출시했지만 전혀 다른 이유로 매우 멋진 Gears 시스템이다. 이제 로컬 머신에 이러한 매우 강력하고 유연한 백 엔드가 설치되었으므로 이번에는 백 엔드에 대한 Flex 프론트 엔드를 만들어 볼 차례다.

사용자 인터페이스 구축하기

나는 사용자 인터페이스로 시작해서 사용자 인터페이스 골격에 코드를 추가하여 상호적으로 살을 붙여 가면서 Flex 애플리케이션을 계층적으로 만들어 가는 방식을 선호하는 편이다. 본론으로 들어가서 Flex SDK가 설치되어 있지 않다면 먼저 Flex SDK를 설치하도록 한다. Flex SDK는 무료이고, Flex Builder 2 IDE는 시험 버전으로 배포된다. 여러분은 http://www.flex.org/download 에서 Flex SDK를 다운로드 할 수 있고 Flex 3 SDK는 오픈소스화될 예정이다. Flex Builder는 이클립스 기반의 개발 환경이므로 드래그 앤 드롭으로 인터페이스를 만드는데 사용할 수도 있겠지만 그렇게 할 필요는 없다. 나는 태그광(tag junky)라서 보통 코드 보기를 고집하고 MXML에 바로 작업을 하는 편이다.

현재 인터페이스에 있었으면 하는 것은 상단에 위치하는 두 개의 컨트롤과 하단에 위치하면서 테이블에 들어 있는 데이터를 보여 줄 데이터 그리드(data grid) 하나이다. 상단의 컨트롤은 내가 데이터베이스와 테이블을 선택할 수 있도록 드롭 다운(drop-down) 컨트롤이어야 할 것이다.

이러한 형태를 갖추기 위한 MXML 코드는 [리스팅 2]에 나타나 있다.

[리스팅 2] flexmysql.mxml

이 코드를 Flex Builder 2에서 컴파일하여 실행하면 [그림 1]에 나타나 있는 결과를 볼 수 있을 것이다.


[그림 1] 인터페이스 레이아웃

꽤 멋지지 않나? 그라데이션이 적용된 배경이 아주 좋아 보인다. 컨트롤들도 확실히 보기 좋다. 그리고 이것은 내 쪽에서는 최소한의 작업만으로 이루어진 것이다. 물론 그래픽 디자이너가 전환 효과(transitional effect)와 이미지와 같은 것들로 매우 화려하게 꾸밀 수도 있었을 것이다. 하지만 나라면 아주 깔끔한 인터페이스를 고수하고 모든 클라이언트상에서 동일하게 보여 지고 작동하게 할 것이며, Ajax 애플리케이션에서는 이렇게 하기가 수월치 않다.

데이터베이스 목록 가져오기

이 Flex 애플리케이션 코드에 살을 붙이는 첫 번째 단계는 애플리케이션이 로드된 후 폼 상단에 위치한 콤보 박스를 데이터베이스로 채워 넣는 것이다. 이렇게 하는 코드가 [리스팅 3]에 나타나 있다.

[리스팅 3] flexmysql2.mxml

코드의 크기를 줄이기 위해 이전 예제와 동일한 부분은 그대로 두었다. 크게 추가된 부분은 서버와 통신하게 될 HTTP Service Flex 객체를 생성하는 태그이다. 이 서비스 객체는 Flex 애플리케이션이 구동될 때 호출되는 onInitialize 메소드에서 호출된다.

onInitialize 메소드는 서비스 URL을 설정한 다음 요청을 시작한다. 요청이 완료되면 onResult 메소드가 호출된다. onResult 메소드는 웹 서버에서 반환된 결과를 콤보 박스의 dataProvider에 설정한다.

정말로 멋진 부분은 바로 이 부분이다:

myservice.lastResult..database.*

한번 살펴 보자. 만약 E4X에 관해 들어 본 적이 없다면 약간 설명해 주도록 하겠다. myservice.lastResult 변수는 실제로는 하나의 XML 문서다. ".." 구문은 XPath의 "//" 구문에 해당된다. ".." 구문의 의미는 "주어진 이름의 태그를 모두 가져온다"이고, 여기에서는 "모든 database 태그를 가져온다"라는 의미이다. 애스터리스크(*)는 database 태그의 임의의 자식 태그(child tag)를 의미한다. 여기에서는 database 태그의 자식이 데이터베이스명의 리터럴 텍스트(literal text)로 하나만 있기 때문에 이 코드의 의미는 "XML 문서에서 각각의 데이터베이스명을 가져온다"가 된다. 멋지지 않은가?

사람들이 Flex에서 XML 데이터 소스에 접근하는 것이 얼마나 쉬운지 격찬하는 이유는 바로 ActionScript의 E4X 확장 때문이다. 내가 알고 있는 다른 어떠한 언어에서도 이것만큼 XML 문서에 쿼리하는 것이 쉽지는 않았다.

그러므로 내가 호언장담하는 E4X를 이용해서 브라우저에서 이 애플리케이션을 실행하면 [그림 2]와 같은 결과를 볼 수 있다.


[그림 2] 데이터베이스명으로 채워진 데이터베이스 콤보 박스

콤보 박스를 클릭해서 끌어 내리면 장비에 들어 있는 데이터베이스 목록을 볼 수가 있다. 그렇다. 장비에 데이터베이스가 많긴 하다. PHP, Flex, Rails 등과 관련된 기사에서는 거의 모두 데이터베이스를 사용한다. 그래서 데이터베이스가 상당히 많은 것이다.