한빛출판네트워크

제공 : 한빛 네트워크
저자 : Bill Lubanovic
역자 : 유일호
원문 : Migrating Web-Based PHP Applications to Ajax

[이전 기사 보기]
웹 기반 PHP 애플리케이션을 Ajax로 마이그레이션 하기(1)

개선

역사적인 수업은 끝났다. 그리고 위대한 수업이 시작된다.

설명을 명료하고 명확하게 만들기 위해, 우리의 예제코드들은 발생할 수 있는 에러와 보안문제들을 무시한다. jQuery와 Ajax 기술을 사용해서 오래된 스크립트를 어떻게 향상 시킬 수 있는지 보여주는데 목적이 있다. 상용으로 사용하기 위해서는, 함수의 에러 리턴, 입력 데이터의 무결성을 체크해야 한다. 그리고 다른 좋은 개발 방법을 따르도록 해야 한다. 새로운 Ajax 메소드는 클라이언트나 서버 안에서 에러가 발생할 경우 어떠한 경고나 에러도 없이 실패할 수도 있다. FireBug 는 Ajax 애플리케이션을 개발하고 디버깅할 때 아주 쉽게 사용할 수 있는 도구이다. 모든 기능을 갖춘 버전이 Firefox 플러그인으로 존재한다. 그러나 부분적인 기능을 가진 버전이긴 하지만 IE나 다른 브라우저를 위해서도 존재한다.

우리의 폼이 필요로 하는 요건을 정의해 보자:

1. 데이터베이스 안의 people 테이블로부터 데이터를 가져온다. id 컬럼은 주키(primary key)이다.
2. 풀다운(pull-down) 메뉴 안에 이름들을 보여준다.(폼의 select 엘리먼트)
3. 메뉴로부터 사람을 고르게 한다.
4. 테이블안에 그 사람의 정보를 보여준다: 이름,성(last name),좋아하는 춤 그리고 좋아하는 파이.

이 예제는 브라우저를 죽이지 않고 다수의 사람들을 HTML SELECT 엘리먼트 안에 집어넣을 것이라고 가정한다. 크기가 큰 데이터는 페이지 처리가 된 테이블이나 그와 비슷한 것이 요구된다. 페이지는 다음과 같은 모습일 것이다:

People
(please select a person) Alfredo de Darc Ransom Duxover Creighton Barrel Papa Gasquette Bob Frapples

First Name	First Name	Dance	Pie
Alfredo	de Darc	tango	blueberry

버전1: 오리지널 코드

오리지널 버전에서는 모든 것을 하나의 PHP 스크립트 안에서 처리한다: 정적인 HTML을 만들고, 사람들의 오리지널 목록을 생성한다. 그리고 사람이 선택되면 그 아래의 테이블에 삽입한다.

people1.php:







People


(select a person)
$row[fname] $row[lname]n";
?>

" ", "lname"=>" ", "dance"=>" ", "pie"=>" ");
echo <<< END




First Name
Last Name
Dance
Pie

$info[fname]
$info[lname]
$info[dance]
$info[pie]



END;
?>

소스를 만들기에는 별로 어렵지 않지만 이것은 벌써 문제점을 가지고 있다. 좋은 소식은 한곳에 모든 code가 있다는 것이다. 나쁜 소식 또한 한곳에 모든 code가 있다는 것이다. 여기에 계획이 있다:

1. 스크립트를 세가지 파일로 나눈다: 정적인 내용(HTML), 클라이언트측 처리(JavaScript), 그리고 서버측 처리(PHP).
2. jquery.js 와 새로운 JavaScript 파일을 HTML 파일 안에 포함한다.
3. 동적인 내용을 담는 모든 태그에 유일한 id 어트리뷰트를 추가한다.
4. Ajax 스타일의 서버 호출과 페이지 엘리먼트의 업데이트를 하기 위해 JavaScript 함수를 정의한다.

우리는 두 가지 방법중의 하나로 동적인 내용과 정적인 내용을 합칠 수가 있다.:

• PHP가 동적인 내용을 HTML로 리턴하고, JavaScript 는 innerHTML 을 사용해서 페이지 엘리먼트 안에 채워 넣는다.
• PHP가 동적인 내용을 JSON 포맷의 데이터 배열로 리턴하고, JavaScript는 그것을 재구성하고, 대상 페이지 엘리먼트에 HTML을 집어넣는다. 두가지 모두 한번 시도해 보자.

버전 2: Ajax 서브밋, HTML 리턴

이 버전에서는, PHP는 option 태그를 생성하고, 우리는 단지 그것을 select 로 감싸진 부분에 넣기만 하면 된다. HTML파일부터 시작한다, 이것은 단지 컨테이너에 불과하다:

people2.html:






People







First Name
Last Name
Dance
Pie



 
 
 
 

이제 JavaScript파일을 보자. jQuerys의 핵심적인 함수는 $() 이고 jQuery 오브젝트를 리턴 한다. 이것의 인자는 많은 형태를 가질 수 있지만 우리는 아래의 두 가지 형태만 사용할 것이다.:

• $(document): DOM의 document 오브젝트를 선택한다.
• $("#myid"): id="myid" 로 된 엘리먼트를 선택한다.

jQuery의 $(document).ready 호출은 window.onload 를 대신한다. 이것은 모든 이미지들이 로딩되기를 기다리는 대신에 DOM이 사용 가능한 상태가 되면 호출 될 것이다. 이것은 동기화 문제를 피할 수 있다. jQuery로 폼 엘리먼트와 함께 모든 자바스크립트 함수들을 다룰 수 있다. 모든 JavaScript 함수들은 이 안에서 폼 엘리먼트들과 함께 동작할 것이다.

load() 함수는 서버쪽의 people.php 스크립트를 호출하고, 결과물을 people 이라는 id를 사용해 select 엘리먼트 안에 집어넣는다. 이것은 오리지널 버전의 첫 번째 부분과 동일하다. 서버로의 Ajax 커넥션을 만들고, 반환된 HTML을 people 이라는 id를 사용해 엘리먼트 안에 집어넣는다.: (소괄호와 중괄호의 구별을 위해서 코드를 펼쳐냈다.)

people2.js:
$(document).ready
    (
    function()
        {
        // DOM이 사용가능일 때 이것을 호출한다:
        $("#people").load("people2.php?cmd=init");
        // 사람이 선택되면 이것을 호출한다:
        $("#people").change(function()
            {
		// 선택된 옵션으로부터 사용자의 id를 가져온다:
            var user_id = $(":selected").val();
            $("#info").load("people2.php?cmd=info&id=" + user_id);
            });
        }
    );

이번 버전에서는 이것이 우리가 필요한 자바스크립트의 전부이다. 여담이지만, 이런 방식은 AHAH (Asynchronous HTML 그리고 HTTP)라고 불렸었다. 이제 우리는 이것이 호출할 PHP 스크립트를 살펴 볼 것이다. 이 버전은 오리지널과 비슷해 보이지만 이것은 단지 현재쿼리에 대한 결과를 부분적인 HTML로 내보낸다:

people2.php:
  (select a person)n";
        while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
                echo "$row[fname] $row[lname]n";
        }
elseif ($cmd == "info")
        {
        $id     = mysql_real_escape_string($id);
        $result = mysql_query("select * from people where id="$id"");
        $info = mysql_fetch_array($result, MYSQL_ASSOC);
        echo <<< END

$info[fname]
$info[lname]
$info[dance]
$info[pie]


END;
        }
?>

이것을 AJAJ라고 부르고 싶겠지만, 고맙게도 아무도 그렇게 하지 않는다.

---

역자 유일호님은 현재 어느 중소기업의 소프트웨어 엔지니어로 근무하고 있으며, 잡다한 스킬덕에 여러 가지 개발관련 일을 맡아서 하고 있습니다. 이 기사를 번역하는 시점에는 Ajax를 이용한 프로젝트를 맡아서 진행하고 있습니다.