XML로 웹프로그래밍하기
허준회
2000년 3월 25일
HTML은 지금까지 웹문서를 표현하는데 아주 큰 공헌을 하였다. 이러한 역할이 앞으로 계속되겠지만 그 중요성은 점점 줄어들고 있다. 지금 다루고자 하는 XML을 제쳐두고라도 그러한 현상은 이미 확산되어 있다.
지금 웹브라우저 열고 유명한 포털 사이트나 신문사 사이트로 접속해서 해당 웹페이지의 소스를 확인해 보라. HTML이 아닌 다른 스크립트가 잔뜩 있음을 쉽게 확인할 수 있다.
이는 사용자와의 대화성 증가와 기존의 업무 처리가 웹에서 이루어지고 웬만한 어플리케이션이 할 일을 지금은 웹문서로 대신하다 보니 HTML의 영향력이 그 만큼 줄어들었기 때문이다. 이제 웹페이지를 그저 단순한 문서라고 보기에는 그 복잡도와 역할은 너무 커져서 이제는 하나의 플랫폼이 된 느낌이다. 게다가 자바 애플릿과 ActiveX콘트롤의 사용으로 웹브라우저 하나만으로 대부분의 업무가 가능해졌다.
이런 가운데, 아무런 부족함이 없어 보이는 웹플랫폼에 XML의 중요성이 부각되기 시작했다. XML의 쓰임은 생각보다 폭넓고 영향력이 매우 크다.
HTML은 어쩌면 자신의 고유 기능인 문서 표현까지도 XML에게 그 자리를 내주게 될지 모르는 운명에 처해 있다. 이런 일이 가능하게 된 것은 각 벤더의 끊임없는 XML표준화 노력과 그에 준하는 응용 어플리케이션과 솔루션 개발에 있다.
XML은 지금 이시점에서도 진화하고 있다. 아직도 제안중인 표준이 많이 있으며 여러 분야에서 XML에 대한 수요는 엄청나다. 기존의 아스키 문서를 대체할 메타 데이터 포맷이 될 XML을 어떻게 웹기술에 적용할 수 있는지 지금부터 알아보자.
참고로 XML의 기본적인 내용과 표준화는 마이크로소프트 1999년 9월호에 특집으로 소개되었다. 이 기사를 읽은 후 본 내용을 읽는다면 이해에 도움이 될 것이다. 이 보고서에서는 XML에 대한 이해 보다는 실제 XML을 웹 프로그래밍에서 어떻게 이용할지 소개하도록 하겠다.
☼이 글은 마이크로소프트 2000년 4월호에 필자가 쓴 기사를 보강한 것이다.
Web 프로그래밍에서 XML의 이용
지금까지 독립 어플리케이션으로 가능했던 여러가지 업무들이 웹에서 구현되어 사용되고 있다. ASP서비스니 웹데스크탑이니 이런 말들이 나의 PC에서만 가능했던 작업을 인터넷이 연결된 어느 PC에서 가능하게 하고 있다. 사용자와 관리자에게는 더 없은 편리함과 효율을 제공했지만 개발자에는 많은 어려움을 주고 있다. 웹시스템 개발은 지금까지 개발해온 단독 어플리케이션이나 클라이언-서버 환경과 또다른 개발 방법론과 기술을 요구하고 있다. 게다가 웹시스템은 사용자 증가와 요구 기능 추가로 계속 확장가능해야 하며 기존 시스템과도 연동되야 한다.
과연 이런 상황에서 XML이 웹 시스템 개발을 어떻게 개선시키고 발전시킬 수 있을까? 개발자는 어떤 부분에 XML을 도입할 수 있을까? XML을 도입하면 개발 시간을 단축하고 시스템 확정성을 높일 수 있을까?
이글을 통해 이런 궁금함을 조금씩 조금씩 살펴보기로 하겠다.
먼저 XML의 특징을 살펴보야한다. XML이 도대체 어떤 특징을 가지고 있으며 왜 개발되었는지 알고 있어야 이를 도입할 수 있다.
XML의 특징
데이터 표현
XML문서가 HTML과 다른 점은 데이터와 스타일이 분리되어 있는 점이다. HTML은 그 자체로 데이터와 스타일을 결합해서 이를 표와 같은 형식으로 보여줄 수 있다. 하지만 XML문서안에는 데이터만 존재한다. 이를 IE와 같은 웹브라우저로 보면 IE자체에 내장된 스타일시트를 통해 Tree구조로 XML문서를 볼 수 있다. 만약 XML문서에 따로 스타일을 주고 싶다면 XSL,CSS스타일시트로 스타일을 줄 수 있다.
데이터 변환
XML문서를 XSLT를 이용해서 다른 XML, WML, HTML, 일반 텍스트등으로 변환할 수 있다.
데이터 교환
XML 스키마를 정의할 때, NameSpace을 사용하면 NameSpace를 갖고 있는엘리먼트는 서로 다른 시스템에 같은 의미로 해석될 수 있고 XML이 일반 텍스트 데이터이므로 서로 다른 시스템에서 읽고 쓰는데 아무런 문제가 없고 이를 파서를 이용하여 파싱한 후, DOM을 만들면 XML을 구성하고 있는 데이터를 쉽게 읽을 수도 있다.
Web서비스 구축에 XML도입할 만한 부분
XML의 특징을 살펴본 결과, 웹시스템을 구축하는데 어떤 부분을 XML로 구현할 수 있는지 감이 조금은 올 것이다. 이에 대해 좀 더 구체적으로 살펴보면 다음과 같다.
웹 문서 관리와 표현
앞에서 언급했듯이 XML은 데이터 부분과 스타일이 구분되어 있다. 그러므로 데이터 크기가 HTML에 비해 작고 여러 스타일로 다양한 효과를 줄 수 있다. 문제는 DB와 연동하여 동적으로 HTML생성하는 경우인데, ASP의 경우 ASP스크립트 내에 HTML소스를 포함하고 있어 HTML내에 원하는 데이터를 삽입하면 됐었다. XML의 경우 크게 두가지 처리 방법이 있는데, 서버쪽에서 DB와 연동하여XML을 생성하고 이를 XSL나 CSS로 스타일 처리를 하여 HTML로 변환해서 웹으로 서비스 할 수 있고 아니면 HTML내에 XML은 삽입시키거나 연결시켜서 DOM을 생성하여 HTML 태그 내에서 원하는 Element를 표시할 수 있다.
하나의 XML문서로 다양한 데이터 서비스
웹의 환경이 PC뿐만 아니라 PDA, 핸드폰 등으로 넓어지고 있다. 단말기 어떤 환경인가 따라 마크업언어가 다른데, PDA에서는 HDML, 핸드폰에서 WML이 사용되고 있다. 이런 경우 하나의 컨텐트를 다양한 형태로 서비스 해야 하는 경우, XML로 데이터를 만들고 이를 XSLT를 이용해서 변환해서 서비스할 수 있다.
HTML이 사용되는 일반적인 웹의 환경에서도 사용자 권한에 따라 서비스하는 데이터를 제한하고 할 때, XSL스타일시트를 별도로 만들어 두면 같은 XML문서를 갖고 컨텐트를 재구성하여 서비스 할 수 있다.
상이한 시스템간의 데이터 연동
XML을 이용한 수 많은 마크업언어가 쏟아지고 있는 가운데, 많은 부분이 데이터 표현을 위한 부분도 있지만 데이터 교환을 위한 마크업언어도 많이 개발되고 있다.
지금까지는 서로 다른 시스템간의 데이터를 교환하기 위해서는 제대로 된 표준이 없었기 때문에 Text형태로 주로 데이터를 교환했으나 그 데이터를 사람이 알아보기 힘들었고 응용 프로그램을 개발하는데도 많은 시간의 비용이 들었으며 확장하기도 매우 힘들었다.
하지만 XML로 데이터를 교환하며 XML처리를 위한 기본 기술이 공개되어 있으며 각종 엔진도 무료로 사용할 수 있기 때문에 적은 시간과 비용으로 데이터 교환을 위한 시스템 구축이 용이하다. 미리 협약을 맺지 않아도 데이터 자체가 XML이란 표준 기술을 이용했기 때문에 쉽게 다른 시스템과 데이터를 교환할 수 있다.
대표적인 예가 메시징 소프트웨어를 들 수 있가 있는데, 현재 메시징 소프트웨어는 외국산과 국내산을 합하면 10여종 가까이 되는데, 저마다 데이터 표준이 다르기 때문에 서로 메시지를 주고 받을 수 없는 어려움이 생긴다. 메시징을 위한 마크업 언어가 표준화되어 있다면 여러 개의 메시징 소프트웨어를 사용할 필요가 없었을 것이다.
그외에 XML EDI나 전자상거래, 그룹웨어에서도 데이터 교환으로 XML문서를 사용할 수 있으며 전용 마크업이 표준화되고 있다.
관련 기반 기술 소개
XML Parser 와 DOM(Document Object Model)
메모장에서 XML문서 편집하지 않는 이상 DOM은 XML문서를 구성하는데 반드시 필요하다. 현재 윈도 프랫폼에서는 MSXML DOM이 IE를 통해 배포되기 때문에 어떤 환경에서도 바로 사용할 수 있으며 COM으로 개발되어 있으므로 Visual Basic과 같은 RAD툴에서 사용할 수 있으며 Visual C++에서도 사용할 수 있다. ASP와 같은 웹서버 환경에서도 스크립트 언어로 간단하게 XML문서를 처리할 수 있다.
MS XML DOM은 DOM표준을 따라 개발되었으며 그외 MS에서 더 필요한 확장API를 제공하고 있다.
유닉스 플랫폼에서는 Java로 개발된 파서와 DOM이 사용되고 있으며 대부분 SAX Parser를 기반으로 개발되고 있다. IBM,Oracle,Sun과 같은 큰 회사에 XML 파서와 DOM을 개발하고 있으며 현재도 표준안에 따라 계속 업데이트 되고 있다. Java로 개발된 파서는 속도면에서 C++로 개발된 XML파서 보다 느리며 웹브라우저와 같은 클라이언트 환경에서는 서버와 같은 Java Parser를 이용하기가 힘들기 때문에 XML기반의 시스템을 구축하는데 어려움이 많다. Client환경에서 MSXML 파서를 사용할 경우 자바로 만들어진 서버측 XML 파서와 호환성에서 약간의 차이를 보이며, 특히 현재 표준화 작업중인 XSL스타일시트의 경우 지원 스펙이 서로 다르기 때문에 문제가 심각하다고 할 수 있다.
이러한 문제점은 JDK에 XML 관련 패키지가 추가된다면 어느 정도 해결될 수 있다. 하지만 Java 파서의 파싱 속도는 늘 문제가 되고 있는 상태다.
XML 스키마와 NameSpace
XML 스키마는 XML문서의 구조를 XML형식으로 표현한 것이다. SGML에서 말하면 DTD(Document Type Definition)라고 할 수 있겠다. 지금까지는 SGML의 DTD로 XML문서의 구조를 결정하였으나 현재MS에서 이를 DCD(Document Content Description)라는 이름으로 XML 스키마가 표준이 되도록 노력하고 있다. 재미있는 것은 MS에서 DCD가 표준화되기도 전에 이미 IE5에 포함된MSXML에서 이용할 수 있다는 점이다. XML에 앞서나가고 있는 MS자신감을 엿볼 수 있는 부분이다. 하지만 다른 XML파서에서는 아직 지원하지 않고 있다.
XML스키마를 만들어 두면 서로 다른 시스템에서 여러 개발자가 XML문서를 생성할 때, 이것을 참고하여 문서가 올바른지 체크할 수 있으며, 개발할 때 참고할 수 있다. 예를 들어, 어떤 Element의 속성이나 어떤 타입의 값이 들어가는지 알 수 있으며 다른 Element와 관계도 스키마만 보면 알 수 있다.
XSL과 XSLT
XML문서를 다른 문서 형태로 변환하거나 워드와 같은 스타일을 지원하는데 필요한 기술이다. XSL에서는 문서에 스타일을 적용하기 위한 포맷팅 객체와 문서 변환을 위한 Transform기능을 지원하며 이를 특별히XSLT(XSL Transform)이라고 부른다.
문제점
XML기술 확산에 가장 큰 문제점은 호환성에 있다. 벤더마다 개발한 XML파서와 XSL 프로세서가 서로 지원하는 스펙이 조금씩 다르다는 점이다. 만약 서버와 클라이언트에서 사용하는 파서가 다를 경우 서버에서 문제 없던 XML문서가 클라이언트에서 문제를 일으킬 수 있다. 특히 중요한 한글 지원에 문제가 생기는 경우가 많다.
가능하면 한 종류의 파서를 전체시스템에서 사용하는 것이 좋다. 앞으로 이런 문제는 XML 관련 표준화가 완성단계에 이르면 해결될 전망이다.
예제와 함께 하는 XML 프로그래밍
XML Parser와 DOM 다루기
그렇다면 DOM의 사용법을 통해 <예제1>과 같은XML 문서에서 원하는 데이터를 어떻게 얻을 수 있는지 알아보도록 하겠다.
DOM(Document Object Model)
화면 1 VB 개체찾아보기에서 살펴본 MSXML DOM 인터페이스.
DOM이란 XML문서를 다루기 위해 플랫폼 중립적으로 기술된 인터페이스의 표준으로 트리 기반의 API를 제공한다. DOM은 XML문서를 계층적으로 접근할 수 있게 해주며 다양한 노드로 구성되어 있다. 각각의 노드는 XML문서를 구성하고 있는 Elemetn, Attribute, Entity, PI, Commnent,DTD,CDATA 등을 나타내며 기본 속성인 Node 인터페이스를 공통적으로 갖고 있다. 또한 이런 노드를 묶을 수 있는 list와 attribute를 묶는 map을 제공하고 있다.
다음은 DOM을 구성하고 있는 노드와 컬렉션을 나타낸 것이다. MSXML DOM에서 각 개체의 인터페이스 이름도 함께 소개하였다.
|
이름 |
인터페이스 |
설명 |
|
Document |
IXMLDOMDocument |
XML문서의 루트 노드를 나타낸다. |
|
DocumentType |
IXMLDocumentType |
XML문서의 DTD나 Schema를 나타낸다. |
|
DocumentFragment |
IXMLDocument Fragment |
XML문서 일부를 잠시 담기 위한 개체이다. Copy & Paste에 사용한다. |
|
Element |
IXMLDOMElement |
Element 노드를 나타낸다. 참고로 Element노드에 속한 텍스트는 Text나 CDATASection 노드에 포함된다. |
|
Attriubte |
IXMLDOMAttribute |
attribute를 나타낸다. |
|
Entity |
IXMLDOMEntity |
DTD에 정의된 파싱되지 않는 entity를 나타낸다. |
|
EntityReference |
IXMLDOMEntityReference |
XML문서안에 있는 entity의 참조를 나타낸다. |
|
Natation |
IXMLDOMNotation |
DTD안에 선언된 Notation을 말한다. |
|
Text |
IXMLDOMText |
Element노드의 자식인 Text를 나타내는 노드이다. |
|
CDataSection |
IXMLDOMCDATASection |
XML문서의 CDataSection을 나타낸다. |
|
Comment |
IXMLDOMComment |
XML문서의 Comment를 나타낸다. |
|
Processing Instruction |
IXMLDOMProcessingInstruction |
XML문서의 PI를 나타낸다. |
|
NodeList |
IDOMNodeList |
Node를 컬렉션으로 묶으주는 역할을 한다. |
|
NamedNodeMap |
IXMLDOMNamedNodeMap |
Attribute를 컬렉션으로 묶어주는 역할을 한다. |
표 1 DOM을 구성하는 인터페이스
이러한 MSXML DOM은 COM으로 구성되어 있기 때문에 클라이언트 측면을 따져보면 IE에서 VBScript나 JavaScript로 이용할 수 있고 서버 측면에서는 IIS의 ASP 스크립트나 ASP Component에서도 이용할 수 있다. 그렇다면 각각 어떻게 활용되고 있는지 살펴보자.
n XMLDOMDocument 개체 생성하기
MSXML의 기능을 이용하려면 맨 처음 XMLDOMDocument개체를 생성해야 한다. 이 개체로부터 XML문서를 파싱하고 생성된 DOM으로부터 XML문서 구성하고 있는 각 노드를 다룰 수 있다. 또한 노드를 생성시킬 수도 있다.
JScript에서는 다음과 같이 XMLDOMDocument개체를 생성한다.
var mydoc = new ActiveXObject("Microsoft.XMLDOM");
VBScript에서는 다음과 같다.
Dim xmldoc
Set xmldoc = CreateObject("Microsoft.XMLDOM")
Visual Basic에서는 다음과 같다.
Dim xmldoc = new DOMDocument
물론 MSXML을 참조해야 한다.
n XML문서 읽고 저장하는 방법
XML문서는 XMLDOMDocument개체의 load 메쏘드를 이용해서 XML문서의 경로와 파일명을 입력하면 XML문서를 읽고 그 대신 XML문서가 위치한 URL을 입력하면 HTTP로 XML문서를 로딩한다. 또한 loadxml메쏘드를 이용하면 String형태로 XML문서를 읽을 수 있다.
XMLDoc.load("http://xmlfiles/reports.xml")
XMLDoc.loadXML("<customer><first_name>Joe</first_name>
<last_name>Smith</last_name></customer>")
저장은 Save메쏘드를 이용하면 특정 위치에 XML문서를 저장할 수 있다.
<%
dim xmldoc
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async = false
xmldoc.load(“http://xmlfiles/reports.xml”)
xmldoc.save(Server.MapPath("sample.xml"))
%>
위 예는 ASP 스크립트에서 다른 URL에서 로딩한 XML문서를 서버에 저장하는 코드이다.
n XSL적용하기
ASP 스크립트에서,
Set objNodeDoc = CreateObject("microsoft.xmldom")
Set objNodeXSL = CreateObject("microsoft.xmldom")
strXML=Server.MapPath(“문서.xml")
strXSL=Server.MapPath(“스타일.xsl")
objNodeDoc.async = false
objNodeDoc.load(strXML)
objNodeXSL.async = false
objNodeXSL.load(strXSL)
' 웹브라우저로 변환한 결과를 보낸다.
Response.Write(objNodeDoc.transformNode(objNodeXSL))
XSL을 적용하여 XML문서 변환하는 방법은 아주 간단한다. 위 예제에서 처럼 먼저 XML,XSL문서의 DOM개체를 구성한 후, XML문서의 Document 개체가 제공하는 transformNode 메쏘드에 XSL문서의 Document개체를 입력하여 실행하면 결과 문서가 출력된다.
n NodeList 개체 사용하기
노드 개체의 자식 노드를 알기 위해서는 childNodes속성를 이용하면 NodeList라는 컬렉션 개체가 리턴되는데, 이 개체의 length속성과 item(index), nextNode, reset 메쏘드를 이용하여 자식 개체를 쉽게 얻을 수 있다.
Set objList=objNode.childNodes
For i=0 to objList.length-1
‘ 자식 노드의 하위 텍스트 값을 얻는다.
objList.item(i).text
‘ name이라는 속성 값을 얻는다.
objList.item(i).attributes.getNamedItem("name").nodeValue
Next
n 노드의 속성 정보 얻기
이 역시 노드 개체의 attributes 속성에는 NamedNodeMap이라는 개체 정보가 담겨져 있는데, 이 개체로부터 노드의 속성 값을 그 속성 이름으로 알 수 있고 NodeList처럼 item(index), nextNode, reset 메쏘드로 속성 값을 얻을 수 있다.
지금까지 알아본 것 외에도 DOM은 많은 기능을 제공하고 있다. 자세한 사항은 MS사이트를 참고하기 바란다. 이제는 데이터만 존재한 XML에 생명력을 불어넣기 위해 XSL로 스타일을 처리하는 방법에 관해 알아볼 것이다.
XML
XSL or CSS
XSL로 XML문서 스타일 표현하기
|
XML |
|
XSL or CSS |
화면 2 XSL이나 CSS를 이용하여 단순한 트리구조로 된 XML문서를 스타일이 처리된 다른 문서로 변환할 수 있다.
CSS(Cascading Style Sheets)는 HTML에서도 이용할 수 있는 규격이다. HTML로 스타일을 제외한 문서 내용을 만들고 CSS로 스타일을 주는 형식으로 되어 있다. XML에서도 거의 동일한 방식으로 CSS를 이용할는데, XML를 구성하고 있는 엘리먼트 별로 스타일을 준다고 생각하면 된다. 그것 보다는 XSL를 이용하는 것이 좀 더 XML(?)답다고 할 수 있겠다.
<?xml version="1.0" encoding="euc-kr"?>
<BOOKLIST>
<ITEM>
<CODE>2000-0001</CODE>
<CATEGORY>XML</CATEGORY>
<RELEASE_DATE>2000-02-21</RELEASE_DATE>
<TITLE>XML의 이해</TITLE>
<PRESS>오럴리</PRESS>
</ITEM>
<ITEM>
<CODE>1999-1023</CODE>
<CATEGORY>ASP</CATEGORY>
<RELEASE_DATE>1999-09-10</RELEASE_DATE>
<TITLE>Active Server Pages의 이해</TITLE>
<PRESS>정보세대</PRESS>
</ITEM>
<ITEM>
<CODE>1998-0923</CODE>
<CATEGORY>HTML</CATEGORY>
<RELEASE_DATE>1998-07-07</RELEASE_DATE>
<TITLE>HTML의 이해</TITLE>
<PRESS>용진출판사</PRESS>
</ITEM>
</BOOKLIST>
예제 1 XML문서 예
XSL에 관하여
화면 3 XML 문서 XML문서 HTML문서 일반 Text : XML Parser, XSL Processor XSL 문서
XSL의 이용하면 XML문서를 여러가지 형태로 변환할 수 있다.
XSL은 XML로 정의된 스타일 및 Transform기능을 갖고 있는 언어이다. <예제2 >는 XSL문서의 예이다. 보면 알겠지만 즉, XML문법을 따르고 있고 xsl이라는 namespace 를 갖고 있다. 그리고 IE에서 읽으면 XML문서와 동일하게 읽혀진다.
XSL은 W3C에 현재 제안중인데 formatting object와 formatting vocabulary를 사용해서 문서 포맷을 정의할 수 있다. 이것은 마치 워드프로세서와 같은 복잡한 스타일을 줄 수 있는 것이 가능한데, 아직 IE에서는 적용되지 않았으며 현재는 XSLT(XSL Transform)기능이 구현되어 있다.
XSLT는 XSL의 일부분으로 XML문서를 다른 XML문서나 또 다른 형태의 문서나 데이터 포맷으로 변환하기 위한 표준이다. 즉, XSLT를 이용하면 XML로 만들어진 데이터를 어떤 포맷의 데이터 변환할 수 있는 것이다. 바이너리 포맷은 불가능하지만 텍스트 형태로 되어 있다면 충분히 가능하다. 만약 같은 정보를 여러 데이터 포맷으로 서비스해야 할 경우 XSLT를 이용하면 쉽게 해결할 수 있다. 예를 들어 주식 정보를 웹, 핸드폰의 단문메시지, WAP폰, PDA, 셋톱박스 등으로 전송해야 할 경우 주식 정보를 클라이언트 따라 따로 구성해야 한다면 많은 인력이 필요하고 시간을 다투는 주식 정보를 전송하는 시스템 구현에도 많은 어려움이 뒤따를 것이다. 하지만 주식 정보를 XML로 구성하고 이를 클라이언트에 따라 XSL 문서를 만든 후, XSL 프로세서를 이용하여 변환하면 클라이언트 환경에 맞는 데이터를 서비스할 수 있다.
XSL의 동작방법
CSS는 XML문서 element별로 스타일 정보를 지정할 수 있었다. 제한적이긴 하지만 적용하기 쉬웠다. 하지만 XSL은 다르게 생각해야 한다. XSL은 대상 노드를 지정하는 templates라는 xslt 엘리먼트로 적용할 스타일을 지정한다. 이러한 template는 pattern또는 filter를 지정할 수 있는데, 이를 통해 원하는 특정 element나 element 그룹에 스타일 정보를 적용할 수 있다.
XML을 구성하고 있는 특정 위치의 element나 반복되는 element를 xsl에서 지정한 대로 변환할 때, 원하는 곳에 원하는 모습으로 변환할 수 있다는 뜻이다. 이것이 가능한 것은 XML문서가 Tree구조로 되어 있으므로 element의 위치를 경로로 표시할 수 있기 때문이다.
XML문서에 XSL적용하는 방법
XSL은 여러가지 방법은 XML문서에 적용할 수 있는데, 아래 내용을 XML문서에 포함시킨후, IE에서 읽어들이면 변환된 결과를 볼 수 있다.
<?xml-sytlesheet type=”text/xsl” href=”style.xsl”>
XSL 이해하기
<?xml version=”1.0”?>
<xsl:stylesheet xmlns:xsl=”http://www.w3.org/TR/WD-xsl”>
<xsl:template match=”/”>
<xsl:value-of select=”*”/>
<xsl:template>
</xsl:stylesheet>
예제 2 XSL문서의 예
XSL문서는 루트 엘리먼트로 <xsl:stylesheet>를 갖고 있다. 그 안에 <xsl:template>라는 엘리먼트가 있는데, XSL문서에서 가장 자주 쓰이는 엘리먼트이다. <xsl:template>의 속성으로 Match가 있는데 그 값으로 “/”, “//”, “.”, “@”, “*”라는 오퍼레이터가 올 수 있다. <xsl:template>의 역할은 하나의 스타일시트를 정의하는 것이고 그 속성인 Match는 XML문서를 구성하고 있는 엘리먼트를 지정하는 패턴 값이 올 수 있다. 즉, 어떤 패턴에 맞는 엘리먼트는 <xsl:template>로 지정된 스타일이 적용된다고 생각하면 된다. <예제2>에서는 match속성에 “/”라는 값이 왔는데, 이는 XML문서의 루트 노드를 의미한다. 그렇다면 <xsl:tempalte>엘리먼트 하위에 있는 <xsl:value-of>의 역할은 무엇인가?
<xsl:value-of>엘리먼트는 이는 select속성에 해당하는 엘리먼트의 값을 값을 그대로 출력하는 역할을 한다. <예제1>의 경우 루트 이하 모든 엘리먼트의 값을 출력하는 것이다.
<예제2>의XSL를 <예제1>에 적용한 결과는 <화면4> 에서 확인할 수 있다.
화면 4 <예제1>의 XML문서에 <예제2>의 XSL스타일시트를 적용한 결과
xsl_test.bmp
결과 문서의 소스를 보면 HTML이 아닌 XML문서인 것을 확인할 수 있다. 그렇다면 위 예제를 보기 좋게 다시 한번 꾸며보자. 단순히 텍스트를 뿌리는 것이 아니라, HTML태그로 스타일을 줘 보자.
<?xml version="1.0" encoding="euc-kr"?>
<xsl:stylesheet xmlns:xsl="uri:xsl">
<xsl:template match="/">
<HTML>
<head>
<Title> 책 목록 </Title>
</head>
<body>
<ul>
<xsl:apply-templates select="//ITEM" />
</ul>
</body>
</HTML>
</xsl:template>
<xsl:template match="ITEM">
<li>
<xsl:value-of />
</li>
</xsl:template>
</xsl:stylesheet>
<예제 3> HTML태그로 스타일을 준 XSL문서
<화면 5> <예제1>의 XML문서에 <예제3>의 XSL스타일시트를 적용한 결과
<예제3>의 XSL 스타일시트를 <예제1>의 XML파일에 적용하면 <화면5>와 같은 결과를 IE에서 확인할 수 있다. <예제3>의 소스를 보면 <예제2>와 다소 다른데, 우선 <xsl:apply-templates>라는 엘리먼트가 추가되어 있고 HTML에 태그를 포함하고 있다. 이 문서에는 두개의 스타일 쉬트를 포함하고 있는데, 첫번째가 루트 노드의 스타일시트와 두번째는 ITEM 엘리먼트에 해당하는 스타일시트이다. 이는 match속성에 있는 값으로 알 수 있다.
루트에 해당하는 스타일 시트에서 HTML태그로 전체 문서의 형식을 결정하고 body태그 안에 ITEM의 값이 리스트로 나타나도록 한다. 이때 사용한 <xsl:apply-templates>는 현재 노드, 즉 루트로부터 select 속성에서 지정한 패턴에 해당하는 엘리먼트에 정의된 템플릿을 적용한다. 루트 노드로부터 ITEM 엘리먼트에 해당하는 템플릿을 찾는데, item앞에 ‘//’가 붙었으므로 현재 노드의 모든 하위 노드를 탐색해서 ITEM 엘리먼트를 찾아 템플릿을 적용한다. 즉, 현재 노드로부터 단말 노드까지 탬색한 후, 다시 되돌아와 다른 가지의 노드를 탐색하는 것이다. 그러면 BOOKLIST 엘리먼트 하위에 있는 모든 ITEM에 템플릿을 적용할 수 있다.
ITEM 템플릿에서는 ITEM하위 노드 값을 그대로 차례대로 표시하는 <xsl:value-of>를 사용하였으므로 <화면2>와 같이 ITEM마다 책제목과 종류 등이 한줄로 표시된 것이다.
XSL이 어떻게 동작하는지 기본적인 개념이 파악이 된 것이라 믿고 다음 단계에서는 기본적인 XSLT관련 엘리먼트와 패턴과 패턴을 이루는 오퍼레이터를 소개하기로 하겠다.
기본적인XSLT 엘리먼트와 패턴소개
앞에서도 언급했듯이 XSLT는 XSL의 일부분으로서 XSL Transform을 짧게 표시한 것이다. XSLT관련 Element중 많이 사용되는 것을 소개하고자 한다.
n xsl:stylesheet
XSL 스타일시트의 루트 엘리먼트로서 다른 모든 엘리먼트를 포함하고 있다. 이 엘리먼트는 스타일시트에서 사용될 스크립트 언어를 지정하며, 결과 문서를 만들 때 입력 문서의 WhiteSpace를 보존할지 여부를 지정한다. 또한 XSL엘리먼트 앞에 붙을 namespace선언과 결과 문서가 어떤 것인지에 대한 정보를 담고 있다.
예)
<xsl:stylesheet xmlns:xsl=http://www.w3.org/TR/WD-xsl
defaulat-space=”preseve”
ident-result=”yes”
language=”JScript”
result-ns=”HTML”>
……
</xsl:stylesheet>
n xsl:template
match속성에 패턴을 지정하여 특정 노드나 Context Point를 원하는 스타일로 결과가 나오도록 지정하는 역할을 한다.
예)
<xsl:template match=”ITEM”>
…
</xsl:template>
XML문서를 구성하는 ITEM엘리먼트에 템플릿을 지정하는 예를 나타낸 것이다.
n xsl:apply-templates
이 엘리먼트를 이용하여 XSL 프로세서가 현재 노드의 자식 노드 중 템플릿이 적용된 노드를 정의한 스타일로 반영하는 역할을 한다.
<예제3>에서도 루트 노드를 하위에 있는 ITEM노드에 템플릿을 적용하기위해 <xsl:apply-templates>를 사용한 것을 볼 수 있다. 물론 ITEM노드에 해당하는 <xsl:template>엘리먼트가 존재하고 있다. 이처럼 루트 노드의 특정 자식 노드마다 템플릿을 적용하면 지정한 템플릿에 맞게 다양한 스타일을 줄 수 있다.
예)
<xsl:apply-templates select=”pattern” order-by=”pattern_list” />
n xsl:copy
현재 컨텍스트 포인트에 전체노드를 삽입한다. XML문서 일부분을 그대로 넣는다고 생각하면 된다. 만약 XML문서안에 Well-formed한 HTML 태그 있다면 그대로 결과 문서에 넣을 수 있게 된다.
<xsl:template match=”*”>
<xsl:copy />
</xsl:template>
n xsl:value-of
XML노드의 값을 출력한다. select속성을 이용하면 값을 출력할 엘리먼트를 선택할 수 있다. 만약 select속성을 사용하지 않으면 현재 노드를 값을 출력한다.
패턴
<xsl:template> 엘리먼트의 match속성이나 <apply-templates>의 select속성에서 XML문서를 구성하고 있는 특정 엘리먼트나 속성을 지정하기 위해서는 패턴을 사용한다. 그 패턴에는 각 노드의 위치와 영향을 미치는 노드의 구조 등을 나타낼 수 있는데, Path 오퍼레이터를 이용하여 패턴을 구성하는 스트링을 만들 수 있다.
|
Operator |
설명 |
|
/ |
Child Path Opeator로서 특정 노드의 자식을 나타낸다. |
|
// |
재귀적으로 특정 노드를 찾는다. 예를 들면 booklist//title하면 booklist하위에 있는 특정 가지에서만 찾는 것이 아니라 모든 하위 노드에서title노드를 찾는다. |
|
@ |
노드의 속성을 가리킨다. 예를 들면 book/@print_date 하면 book엘리먼트의 print_date라는 속성을 선택하게 된다. |
|
* |
이름에 관계없이 모든 엘리먼트나 어트리뷰트를 선택한다. 예를 들어 book/*는 book엘리먼트 하위 모든 엘리먼트를 선택하는 것이고 book/@*는 모든 어트리뷰트를 선택하는 것이다. |
표 2 Path 오퍼레이터 소개
위 Path 오퍼레이터를 이용한 패턴의 예는 다음과 같다.
|
패턴 |
설명 |
|
/ |
루트 노드를 선택 |
|
book/author |
book엘리먼트를 author라는 자식노드를 선택 |
|
// |
투트와 그 하위노드는 모두를 나타냄 |
|
//* |
루트 이하 모든 엘리먼트 노드를 나타냄 |
|
book//author |
book엘리먼트 이하 모든 author엘리먼트를 선택 |
|
.//auhtor |
현재 엘리먼트 이하 모든 author엘리먼트를 선택 |
|
book/*/author |
book엘리먼트의 손자인 author엘리먼트를 선택 |
|
*/@print_date |
엘레먼트 이름과 관계없이 print_date속성을 선택 |
표 3 패턴의 예
XML노드 생성하기
XSL스타일시트의 결과물로서 원본 XML문서에 없던 새로운 XML 노드와 속성을 생성할 수 있다. 다음 엘리먼트가 바로 그 때 사용되는 것들이다.
xsl:attribute
xsl:cdta
xsl:comment
xsl:element
xsl:entity-ref
xsl:pi
이름만 봐도 어떤 노드를 생성하는지 알 수 있다.
XML on the Web Browser
웹브라우저에서 XML을 처리하고 보여준다는 것은 웹브라우저가 XML Parser를 갖고 이를 DOM으로 만들 수 있어야 하는 능력을 갖고 있음을 뜻한다. 현재 IE가 이를 잘 지원하고 있다. 일직히 4.0때 XML을 지원하였고 XSL도 지원하고 있다. 계속 표준화되고 있는 사항을 반영하고 있으며 상당히 안정화되어 있다.
IE에서는 여러가지 방법으로 XML을 지원하는데, 다음과 같다.
n XML문서에 스타일시트를 지정한다.
IE에서 XML문서를 바로 읽으면 내장된 스타일시트를 적용해서 트리구조로 보여준다. XML을 문서 자체를 본다는 것 이외의 의미는 없다. 단지 XML문서 구조와 Well-Formed한지 확인해 볼 수 있으며 디버깅 정보를 보여주는데 의의를 둘 수 있다. 만약 XML문서에 스타일 시트 파일을 지정해 주면 변환된 결과를 브라우저로 확인할 수 있다. 이때 변환 결과가 HTML이라고 하더라도 문서 소스를 보면 XML문서 소스를 볼 수 있다.
n HTML안에 XML을 포함시키거나 링크 정보를 넣어서 XML 데이터를 HTML안에서 표시할 수 있다. 예제4가 그 예이다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" FOR=window EVENT=onload>
start();
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function start()
{
var rootElem = email.documentElement;
var rootLength = rootElem.childNodes.length;
for (cl=0; cl<rootLength; cl++)
{
currNode = rootElem.childNodes.item(cl)
switch (currNode.nodeName)
{
case "TO":
todata.innerText=currNode.text;
break;
case "FROM":
fromdata.innerText=currNode.text;
break;
case "CC":
ccdata.innerText=currNode.text;
break;
case "SUBJECT":
subjectdata.innerText=currNode.text;
break;
case "BODY":
bodydata.innerText=currNode.text;
break;
}
}
}
</SCRIPT>
<TITLE>Untitled</TITLE>
</HEAD>
<BODY>
<XML ID="email">
<EMAIL LANGUAGE="Western" ENCRYPTED="128" PRIORITY="HIGH">
<TO>Jodie@msn.com</TO>
<FROM>Bill@msn.com</FROM>
<CC>Philip@msn.com</CC>
<SUBJECT>My first DTD</SUBJECT>
<BODY>Hello, World!</BODY>
</EMAIL>
</XML>
<DIV ID="to" STYLE="font-weight:bold;font-size:16">
To:
<SPAN ID="todata" STYLE="font-weight:normal"></SPAN>
</DIV>
<BR>
<DIV ID="from" STYLE="font-weight:bold;font-size:16">
From:
<SPAN ID="fromdata" STYLE="font-weight:normal"></SPAN>
</DIV>
<BR>
<DIV ID="cc" STYLE="font-weight:bold;font-size:16">
Cc:
<SPAN ID="ccdata" STYLE="font-weight:normal"></SPAN>
</DIV>
<BR>
<DIV ID="from" STYLE="font-weight:bold;font-size:16">
Subject:
<SPAN ID="subjectdata" STYLE="font-weight:normal"></SPAN>
</DIV>
<BR>
<HR>
<SPAN ID="bodydata" STYLE="font-weight:normal"></SPAN><P>
</BODY>
</HTML>
예제 4 HTML안에 XML문서를 삽입한 모습
<예제4>에서는 HTML문서안 XML을 포함시켜 이를 DOM으로 구성하였다. 위와 같은 문서를 웹서버에서 DB와 연동하여 동적으로 생성하여 웹브라우저로 보내면 사용자는 경우에 따라 같은 포맷으로 된 여러 정보를 얻을 수 있다.
또 다른 방식으로 <XML>태그 부분을 아래와 같이 변경해도 동일한 결과를 얻을 수 있다. 만약 xml문서가 서버에 따로 존재하는 경우 아래와 같이 처리하는 것이 더 능률적일 수 있다. 경우에 따라서 다른 XML 문서를 불러올 수 있기 때문이다.
<XML ID="email" SRC="Lst11_2.xml"></XML>
n VBScript나 JavaScript로 직접 MSXML개체를 생성하여 XML문서를 파싱한 후, DOM을 생성하는 방법이다. 물론 웹브라우저에 내용을 표시하려면 HTML태그의 힘을 빌려야 한다. 예제5가 그 예이다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="onload">
// XML문서를 로딩한다.
var source = new ActiveXObject("Microsoft.xmldom");
source.load("Lst8_4.xml");
// XSL문서를 로딩한다.
var style = new ActiveXObject("Microsoft.xmldom");
style.load("Lst8_5.xsl");
// XSL문서를 이용해서 XML문서를 변환한다.
document.all.item("xslContainer").innerHTML =
source.transformNode(style.documentElement);
</SCRIPT>
<TITLE>Code Listing 8-6</TITLE>
</HEAD>
<BODY>
<DIV ID="xslContainer"></DIV>
</BODY>
</HTML>
예제 5 웹브라우저에서 XSL을 이용하여 HTML을 생성한 후, 이를 HTML에 삽입하여 보여주는 예
XML on the Web Server
n 파일로 존재하는 XML문서를 XSL스타일시트를 이용 HTML변환하여 서비스한다.
ASP 스크립트에서도 쉽게 XML문서를 사용할 수 있다. VBScript로 DOM개체를 2개 생성한 후, 각각 XML문서와 XSL문서를 로딩한다. 그리고 XML문서에 XSL 스타일시트를 적용하면 결과가 나오는데 이를 Response개체에 실어서 브라우저로 보내면 된다. 이때, 결과값이 HTML이면 꼭 IE가 아니더라도 다른 웹브라우저에서도 출력물을 볼 수 있다. 아래 예제는 Java Script로 앞에서 설명한 내용을 실제 구현해 본 것이다.
<%@ LANGUAGE = JScript %>
<%
// Set the source and stylesheet locations here
var sourceFile = Server.MapPath("simple.xml");
var styleFile = Server.MapPath("simple.xsl");
// Load the XML
var source = Server.CreateObject("Microsoft.XMLDOM");
source.async = false;
source.load(sourceFile);
// Load the XSL
var style = Server.CreateObject("Microsoft.XMLDOM");
style.async = false;
style.load(styleFile);
result = source.transformNode(style);
Response.Write(result);
%>
예제 6 ASP스크립트에서 XML을HTML로 변환하여 브라우저로 응답하는 예
n DB로부터 XML문서를 생성한 후, 이를 XSL스타일시트로 처리해서 HTML로 서비스한다.
XML문서를 DB로부터 동적 생성한다는 점만 빼고는 위 스크립트를 그대로 이용할 수 있다. XML방명록의 경우 이러한 방법을 사용하여 구현했다.
만약 XML을 지원하는 IE용으로 개발하면 XML문서를 파일로 생성할 것이 아니라 ASP스크립트로 HTML내에 XML문서를 삽입해서 처리할 수 있을 것이다.
XML로 만든 방명록
지금부터 앞에서 소개한 기술을 바탕으로 실제 XML를 이용하여 방명록을 만들어보자.
클라이언트 웹서버 CGI 웹브라우저 Parser,DOM Parser,DOM 데이터베이스 XML문서를 서버에 전송한다. XML문서를 파싱한 후, DOM으로 구성하여 노드 정보를 알아낸 후 DB에 저장한다. 서버 XSL 처리기 XSL스타일시트 XML문서 HTML문서
웹프로그래밍 할 때, 제일 처음 만드는 것이 아마도 방명록일 것이다. 방명록의 프로세스 흐름은 단순하기 때문에 구현하기 가장 쉽다. 일단은 웹페이지에 입력한 데이터를 웹서버에 있는 CGI을 통해 파일아나 DB에 저장되고, 사용자가 방명록을 보기 원하면 저장된 데이터를 불러와서 HTML로 구성해서 사용자의 웹브라우저에 보내주면 된다.
화면 6 웹환경에서 클라이언트와 서버 사이에 XML데이터가 전송되는 과정
위와 같은 프로세스 흐름에 XML을 적용하면 <화면6>처럼 클라이언트와 서버의 데이터 흐름에 XML로 구성된 데이터가 전달되고 이 데이터를 이용하기 위해 양단에서 XML파서로 문서 파싱한 후, DOM을 구성하는 과정이 추가된다. 또한 사용자에게 방명록을 보여줄 때는 웹서버에서 XML데이터를 XSL스타일시트문서로 변환해서 HTML로 보여준다. 이 방법은 경우에 따라 다른 방법을 쓸 수도 있다.
구현 환경
n 서버
운영체제: MS 윈도2000서버
웹서버: IIS 5.0
데이터베이스: Access 2000
n 클라이언트
IE 5.0
XML 방명록은 위와 같은 시스템에서 구현하였으며 현재 http://joone.inticity.com으로 접속하면 동작하는 모습을 볼 수 있다. 운영환경은 IIS3.0이상이며 서버와 클라이언트 모두 IE4.0이상이 설치되어 있어야 한다. 그 이유는 MSXML이 IE4.0이상에서 포함되어 있기 때문이다.
XML문서 정의하기
방명록에서 사용할 XML문서는 두가지이다. 첫번째는 사용자가 폼에 입력한 데이터이고 두번째는 방명록이다. 그 예는 다음과 같다.
<?xml version="1.0"?>
<message>
<msg name="name">주네</msg>
<msg name="email">joone@kdline.co.kr</msg>
<msg name="homepage">http://members.tripod.co.kr/joone</msg>
<msg name="subject">테스트</msg>
<msg name="content">테스트입니다.</msg>
<table>visit</table>
</message>
<예제 7> 방명록을 입력할 때 사용되는 XML문서
<예제7>는 사용자가 웹브라우저에서 입력한 내용을 XML로 구성한 예를 보여주고 있다. 특이한 점은 table엘리먼트인데, 입력할 table이름을 적어주면 된다.
<?xml version="1.0"?>
<board>
<line no="1">
<msg name="name" caption="이름">허준회</msg>
<msg name="email" caption="E-Mail">joone@netian.com</msg>
<msg name="homepage" caption="홈페이지">http://joone.inticity.com</msg>
<msg name="subject" caption="제목">방명록</msg>
<msg name="content" caption="내용">XML로 데이터를 넣다.</msg>
</line>
<line no="2">
<msg name="name" caption="이름">주네</msg>
<msg name="email" caption="E-Mail">joone@iislab.kyunghee.ac.kr</msg>
<msg name="homepage" caption="홈페이지">http://joone.net</msg>
<msg name="subject" caption="제목">테스트</msg>
<msg name="content" caption="내용">테스트임.</msg>
</line>
</board>
예제 8 방명록을 구성하는 XML문서
원칙적으로는 DTD나 XML스키마를 정의해서 사용해야 하지만, 테스트하는 수준이라서 스키마까지 작성하지 않았다.
입력폼에서의 XML구성하기
화면 7 방명록을 쓰는 웹페이지 모습.
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual InterDev 1.0">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=ks_c_5601-1987">
<TITLE>글쓰기</TITLE>
<script language="javascript">
<!----
function send(form) {
if (form.name.value=="") { alert("\이름을 적어 주세요.");return; }
if (form.email.value=="") { form.email.value=" ";}
if (form.homepage.value=="") { form.homepage.value=" ";}
if (form.subject.value=="") { alert("\제목을 적어 주세요.");return; }
if (form.content.value=="") { alert("\n자료 설명을 꼭 적어 주세요.");return; }
// MSXML 개체 생성 및 기본 XML파일 로딩
var docMessage = new ActiveXObject("Microsoft.XMLDOM");
docMessage.async=false
docMessage.load("visit_msg.xml");
var isLoading=true;
// XML문서를 완전히 로딩할 때까지 기다린다.
while(isLoading){
if (docMessage.readyState==4)
isLoading=false;
}
// 폼에 입력 받은 값을 DOM의 해당 Element의 값으로 입력한다.
var docRoot=docMessage.documentElement;
var listNode=docRoot.childNodes;
listNode.item(0).text=form.name.value;
listNode.item(1).text=form.email.value;
listNode.item(2).text=form.homepage.value;
listNode.item(3).text=form.subject.value;
listNode.item(4).text=form.content.value;
listNode.item(5).text="visit"; // table이름 지정
// 서버로 완성된 XML문서를 보낸다.
form.xmldata.value=docMessage.xml;
form.submit();
}
//---->
</script>
</HEAD>
<BODY bgcolor="#FFFFFF">
<h3 align="center">방명록 쓰기</h3>
<div align="center"><center>
<form name="form" action="msg_insert.asp" method="POST">
<input type="hidden" name="xmldata">
<table width="507">
<tr>
<td> </td>
</tr>
<tr>
<td align="center"><small>이름 </small></td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td align="center">E-Mail</td>
<td>
<input type="text" name="email">
</td>
</tr>
<tr>
<td align="center">HomePage</td>
<td>
<input type="text" name="homepage">
</td>
</tr>
<tr>
<td align="center"><small>제목 </small></td>
<td>
<input type="text" name="subject" size="50">
</td>
</tr>
<tr>
<td align="center"> </td>
<td> </td>
</tr>
<tr>
<td align="center"><small>내용:</small></td>
<td>
<textarea name="content" rows="15" cols="60"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<p align="center"><br>
<input type="button" value=" 자료 등록 " onclick="send(this.form)">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
<a href="default.htm"><small>돌아가기</small></a>
</center></div>
</BODY>
</HTML>
예제 9 XML방명록 입력 페이지 소스
<예제9>은 방명록 입력 웹페이지의 HTML소스이다. 대부분은 기존 웹페이지와 비슷하지만 자바스크립트로 되어 있는 send 함수를 눈여겨 보기 바란다. Form에서 바로 데이터를 바로 서버로 보내지 않고 send함수를 호출한다. send함수에서는 MSXML개체를 생성한 후, 서버로부터 XML문서를 로딩한다. 로딩할 XML문서 <예제7>인데, 모든 Element에 값을 갖고 있지 않다. 한마디로 비어있는 XML문서를 로딩한다고 생각하면 된다. 그러면 DOM이 생성된 비어있는 각 Element에 Form에서 입력 받은 값을 채운 후에 POST방식으로 서버에 구성한XML 문서를 보낸다.
XML을 DB에 저장하기
<화면 8> 화면7에서 입력한 내용이 위에서 처럼 XML문서로 구성되어 서버로 전달된다.
<%
' DB 연결 개체 생성하기
Set DbCon = Server.CreateObject("ADODB.Connection")
DbCon.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:\xmlboard.mdb"
DbCon.Open
Dim objNodeDoc, objNodeRootElement,objNodeCurrent,objList
' MSXML 개체 생성하기
Set objNodeDoc = CreateObject("microsoft.xmldom")
objNodeDoc.preserveWhitespace=true
objNodeDoc.loadXML(Request("xmldata"))
' Root 엘리먼트 얻기
Set objNodeRootElemenet=objNodeDoc.documentElement
' Root 엘리먼트의 자식 컬렉션 얻기
Set objList=objNodeRootElemenet.childNodes
Dim i,strTable,strFields,strValues
' 클라이언트로 부터 받은 XML문서에서 테이블 이름과 그 테이블을 구성하는 필드 이름을 얻고 입력할 값도 얻는다.
For i=0 to objList.length-1
if objList.item(i).nodeName="msg" then
strFields = strFields & objList.item(i).attributes.getNamedItem("name").nodeValue & ","
strValues = strValues & "'" & strNodeValues & objList.item(i).text & "',"
end if
if objList.item(i).nodeName="table" then
strTable=objList.item(i).text
end if
Next
Dim iLength
iLength=Len(strFields)
strFields=Mid(strFields,1,iLength-1)
iLength=Len(strValues)
strValues=Mid(strValues,1,iLength-1)
' Query문장 만들기
strSQL="Insert into " & strTable & "(" & strFields & ") values (" & strValues &")"
' Query실행하기
Set Result = DbCon.Execute(strSQL)
%>
<html>
<head>
<Title>글 올리기</title>
<body>
<FONT size=+2><center>등록되었습니다!</center></FONT>
<p>
<center><A href="default.htm">[돌아가기] </A><A href="viewMsg.asp?xmldoc=visit_board&table=visit&xsldoc=viewMsg">[방명록보기]</A><center> </center>
<CENTER>귀하가 입력한 데이터는 XML로 다음과 같이 구성되어 서버로 보냈습니다.</CENTER>
<CENTER>
<br><textarea rows="10" cols="80" name="content"><%=objNodeDoc.xml%></textarea></CENTER>
</center>
</body>
</html>
예제 10 DB에 XML문서 입력하는 ASP스크립트
방명록 데이터를 XML로 받은 서버는 이를 파싱하여 DOM으로 구성하고 받은 XML문서로부터 테이블 이름, 필드 이름, 필드에 들어갈 값을 얻어 내어 이로부터 Query문장을 생성한 후, DB연결 개체의 Execute메쏘드를 해당 Query를 실행시켜 테이블에 하나의 레코드셋을 생성시킨다.
<예제10>의 큰 특징은 DB스키마만 알면 어떤 데이터도 XML로 구성해서 DB에 입력할 수 있는 점이다. 그 이유는 전달된 XML문서의 테이블 엘리먼트에서 테이블 이름을 얻을 수 있고 msg엘리먼트의 name 속성에서 필드 이름을 해당 엘리먼트의 값으로부터 필드에 채워질 데이터를 얻을 수 있기 때문이다. XML스키마를 잘 구성하면 좀 더 복잡한 형식의 데이터를 쉽게 DB에 입력할 수 있을 것이다.
기존에는 DB에 데이터를 입력하는 asp스크립트 소스를 웹브라우저의 입력폼마다 따로 만들었을 것이다. 하지만 XML로 데이터를 받으면 하나의 ASP스크립트만 가지고 다양한 데이터를 입력할 수 있다.
XSLT를 이용한 데이터 변환
화면 9 방명록을 보는 모습
<%
'DB 연결 개체 생성
Set objDBConn = Server.CreateObject("ADODB.Connection")
objDBConn.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:\xmlboard.mdb"
objDBConn.Open
'MSXML 개체 생성
Dim objNodeDoc,objNodeXSL ,objRS, objNodeRootElement
' XML문서용
Set objNodeDoc = CreateObject("microsoft.xmldom")
' XSL문서용
Set objNodeXSL = CreateObject("microsoft.xmldom")
'Local에서 XML파일 읽어오기
Dim strXML, strXSL, iLine
'XML,XSL 문서의 서버 경로를 얻어온다.
strXML=Server.MapPath(Request.QueryString("xmldoc") & ".xml")
strXSL=Server.MapPath(Request.QueryString("xsldoc") & ".xsl")
'기본 XML파일로 DOM생성
objNodeDoc.async = false
objNodeDoc.load(strXML)
objNodeXSL.async = false
objNodeXSL.load(strXSL)
Set objNodeRootElement=objNodeDoc.documentElement
Set objNodeMsg = objNodeRootElement.firstChild
' DB로 부터 레코드셋을 구성한다.
Set objRS=objDBConn.Execute ("select * from " & Request.QueryString ("table") )
objRS.MoveFirst
Set objNodeMsgTemp=objNodeMsg
iLine=1
' 반복되는 레코스셋을 하나의 엘리먼트의 자식으로 묶는다.
Do While Not objRS.EOF
objNodeMsgTemp.attributes.getNamedItem("no").nodeValue=iLine
iLine=iLine+1
Set objList=objNodeMsgTemp.childNodes
For i=0 to objList.length-1
objList.item(i).text=objRS.Fields(objList.item(i).attributes.getNamedItem("name").nodeValue)
Next
objRS.MoveNext
' 엘리먼트는 복사해서 다른 레코드셋의 정보를 담아 Root Element에 추가한다.
Set objNodeMsgTemp=objNodeMsg.cloneNode(true)
if not objRS.EOF then
objNodeRootElement.appendChild(objNodeMsgTemp)
end if
Loop
' 웹브라우저로 변환한 결과를 보낸다.
Response.Write(objNodeDoc.transformNode(objNodeXSL))
%>
예제 11 DB로부터 레코드셋을 구성하여 XML문서를 생성한 후, XSL문서를 적용하여 결과를 웹브라우저로 보내는 ASP스크립트 소스
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"
xmlns:dt="urn:schemas-microsoft-com:datatypes" xml:space="preserve">
<xsl:template match="/">
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<TITLE>Title</TITLE>
</HEAD>
<BODY>
<center> <p><b>XML과 XSL를 이용한 방명록</b></p>
<p><a href="default.htm">돌아가기</a></p></center>
<xsl:for-each select="/board/line" order-by="-@no">
<p>
<center><b><xsl:value-of select="@no" /></b></center>
<table width="75%" border="1" align="center">
<xsl:for-each select="msg">
<tr>
<td width="20%"><xsl:value-of select="@caption" /></td>
<td width="80%"><xsl:value-of select="." /></td>
</tr>
</xsl:for-each>
</table>
</p>
</xsl:for-each>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
예제 12 변환에 사용된 XSL문서 소스. 이를 통해 HTML문서를 생성할 수 있다.
자, 이제 저장된 방명록 데이터를 다시 XML문서로 구성해서 클라이언트로 보내는 과정에 대해 알아보자.
그냥 XML로 보내면 사용자에게 의미가 없으므로 XSL스타일시트를 적용해서 HTML로 변환한 후, 웹브라우저로 보낸다. 우선 테이블에 있는 레코드셋을 XML로 구성한다. 이때도 역시 문서의 기본 구조만을 담고 있는 XML문서(예제8에서 노드의 값이 없고<line>엘리먼트가 하나만 존재)를 로딩하여 레코드셋으로 값을 채운다. 이 때, 여러 개의 메시지를 반복되는 엘리먼트로 구성하기 위해 노드를 복사해서 새로운 값으로 채운 후, 루트 엘리먼트의 자식으로 삽입하였다. 이렇게 구성한 XML문서를 TransformNode 메쏘드를 이용해서 XSL스타일시트를 적용하면 결과로 HTML문서를 생성한다. 이를 웹브라우저로 보내면 사용자는 <화면9>에서 처럼 방명록을 볼 수 있게 된다.
참고로 <예제12>를 구성하는 아래 엘리먼트를 보면 알 수 있듯이 <line>엘리먼트 no속성으로 반복되는 <line>엘리먼트를 정렬하여 스타일을 적용한다.
<xsl:for-each select="/board/line" order-by="-@no">
…
</xsl:for-each>
<예제12>의 특징으로는 앞에서 XML문서를 DB로 입력할 때와 마찬가지로 DB스키마 정보만 알면 특정 테이블의 데이터를 HTML로 변환해서 웹브라우저로 볼 수 있다는 점이다. 이것이 가능한 이유는 Get방식으로 레코드셋을 구성한 테이블 이름과 이를 담을 수 있는 XML스키마나 위 예제처럼 빈 XML파일 이름과 XSL파일 이름을 지정하여 서버에 요청하면 된다.
사용자의 권한에 따라 다른 XSL스타일시트를 적용하면 볼 수 있는 정보를 제한하거나 다른 스타일을 적용할 수도 있다.
장점과 다른 방법
지금까지 XML을 이용해서 웹에서 간단한 방명록을 구현해 보았다. 필자가 구현한 방법이 꼭 정석이라고 말할 수는 없겠지만, 위와 같은 모델이 가장 XML답다고 할 수 있겠다.
서버에서 DB로부터XML문서를 구성할 때 DOM을 통하지 않고 스트링 처리로 구성하여 파일로 생성한 후, 이를 웹브라우저에서 로딩하여 사용할 수 있게 할 수 있지만, 이렇게 하면 특정 XML파일만 생성할수도 XML의 장점을 제대로 활용하지 못하는 결과를 낳을 수도 있다.
그러므로 서버와 클라이언트 사이에 XML문서를 주고 받을 때는 양단에서 XML파서와 DOM을 사용하는 것이 좋은 모델이라고 할 수 있다.
이 밖에 XSL을 사용하지 않고 ASP로 HTML문서를 생성할 때, XML로 데이터를 구성해서 HTML문서안에 삽입하는 방법도 있다. 특히 이미지와 복잡한 테이블로 디자인되어 있는 HTML문서에 특정 정보를 삽입하려면 이 방법을 사용해야 한다. XSL로 사용하여 복잡한HTML문서를 생성하는 것은 생각보다 쉽지 않기 때문이다. 하지만 XSL를 사용하면, 경우에 따라 HTML로 서비스 할 컨텐트를 WML이나 HDML로 서비스할 수 있는 장점을 가지고 있다.
그렇다면 웹 프로그래밍에서 XML을 도입할 때 어떤 장점을 누릴 수 있을까?
첫번째는 프로세스와 데이터 흐름이 단순하고 명확해 진다는 것이다. 앞에서도 ASP로 구현된 소스를 봐서도 알겠지만 클라이언트가 여러가지 데이터를 보내는 것이 아니라 XML문서 하나만 보내면 된다.
두번째는 코드의 재사용성이 증가된다는 점이다. 위 예에서 처럼 하나의 asp스크립트 소스로 여러가지 데이터를 DB에 입력하거나 다시 XML로 구성할 수 있는 것을 보면 알 수 있다.
세번째, 데이터 처리와 스타일 처리를 분리할 수 있다. XML은 데이터 정보와 스타일 정보가 분리되어 있게 때문에 이러한 장점을 누릴 수 있다.
플랫폼과 XML
필자가 구현한 내용은 모두 MS에서 개발한 웹서버, XML파서, XML DOM, XSL 처리기 등을 이용하였다. 그 이유는 XML에 대해서는 가장 빨리 대응하고 있느 회사가 바로 MS이기 때문이다. 유닉스나 리눅스 진영은 대부분 자바로 구현된 파서를 사용해야 하는데, 속도나 안정성에서 아직 MS쪽을 따라잡지 못하고 있고 특히 IE에 포함된 XML엔진과 웹서버에 사용하는 XML엔진이 모두 COM으로 구현된 같은 개체를 사용하기 때문에 호환성 문제도 없다. 게다가 ASP, VB, VC++,JavaScript,VBScript 등에서 동일한 방식으로 사용할 수 있는 장점도 있다.
참고문헌
마이크로소프트웨어1999년 9월혹 특집 “XML 정보 시스템의 미래를 바꾼다”
XML IE5 Programmer Reference, Wrox출판사
MSDN OnLine: XML Developer Center, http://msdn.microsoft.com/xml
