WWW 와 데이터베이스

(1)

page1

WWW 와 데이터베이스

(2)

page2

WWW 소개

 World Wide Web (WWW) 개념

 클라이언트 / 서버 구조의 분산 하이퍼미디어 시스템

 통합 인터넷 정보검색 시스템

 구성 형식

 HTTP (HyperText Transfer Protocol)

 클라이언트와 서버간의 데이터 전송 프로토콜

 HTML (HyperText Markup Language)

 하이퍼미디어 문서 기술 언어

 URL (Uniform Resource Locator)

 인터네트 상의 객체 식별자

(4)

page4

WWW 소개

 HTML

 generalized markup language

 문서의 논리적 구조 , 출력 방식 , 링크

 HTML 문서를 서버에서 관리

 정보 변경이 용이

 사용자 입력 기능 (Form)

 질의 검색 서비스나 주문형 서비스 용이

 URL

 형식

 protocol://host.domain[:port]/directory/filename

 예

 http://harp.kaist.ac.kr/kmedia/kmedia.html#oodb

 http://harp.kaist.ac.kr/cgi-bin/getdoc?museum

 ftp://harp.kaist.ac.kr

 gopher://cair.kaist.ac.kr

(5)

page5

WWW 소개

 WWW 시스템 구조

클라이언트

WWW

서버 CGI

WWW Browser

CGI Application

HTML 문서

Java Applet External

Viewer

서버 Request(URL)

Response(HTML문 서 )

(6)

page6

WWW 소개

 클라이언트

 HTML 브라우져

 Mosaic, Netscape, MSIE,HotJava, Arena

 VRML 브라우져

 Webspace

 Push 클라이언트

 PointCast

 서버

 CERN httpd

 NCSA httpd

(7)

page7

HTML

 HTML (Hyper Text Markup Language) 문서

 HTML 은 페이지의 구조를 묘사한다

 HTML 은 페이지의 모습을 묘사하지는 않는다

 문서의 실제 내용과 각종 속성을 나타내는 tag 들로 구성됨 (case- insensitive)

 기본 문법은 ‘ <tag_name>element</tag_name>‘ 의 형태

 <Tag> affected text </Tag>

 <Tag attr1=... attr2=...> affected text </Tag>

(8)

HTML

 기본 구조

<HTML>

<HEAD>

Head of the document

</HEAD>

<BODY>

Body of the document

</BODY>

</HTML>

(9)

page9

HTML 문서의 예 (A Homepage)

<HTML>

<HEAD>

<TITLE>Welcome to Byoung-yong Moon's Page</TITLE>

</HEAD>

<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000FF" VLINK="#FFFFFF" ALINK="#FF0000">

<CENTER><P><IMG SRC="byheader.gif" border=0 HEIGHT=100 WIDTH=640></P></CENTER>

<CENTER><P>Home of <FONT COLOR="#0000FF">Byoung-yong Moon</FONT>, a graduate student of Computer Science Department at KAIST</P></CENTER>

<CENTER><P><IMG SRC="line_l~1.gif" border=0 HEIGHT=26 WIDTH=560 ALIGN=ABSBOTTOM></P></CENTER>

<CENTER><P><A HREF="personal.html"><IMG SRC="personal.jpg" border=0 HEIGHT=50 WIDTH=150></A><A HREF="career.html"><IMG SRC="career.jpg" border=0 HEIGHT=50 WIDTH=150></A><A

HREF="favorites.html"><IMG SRC="favorites.jpg" border=0 HEIGHT=50 WIDTH=150></A><A HREF="links.html"><IMG SRC="links.jpg" border=0 HEIGHT=50 WIDTH=150></A></P></CENTER>

<CENTER><P><A HREF="index-han.html"><IMG SRC="korean.jpg" border=0 HEIGHT=60 WIDTH=120></A></P></CENTER>

<CENTER><P>If you want to reach me, email me at <I><A

HREF="mailto:[email protected]">[email protected].</A></I><BR><BR>Last updated on

<B>September 23, 1996</B></P></CENTER>

</BODY>

</HTML>

(10)

page10

Head Element

 <HEAD> ... </HEAD> 로 표시

 문서에 대한 정보 기술

 사용되는 Tag

 <TITLE> 문서의 제목 </TITLE>

 Web Browser 상단의 Title Bar 에 표시

 Web Browser의 Bookmark 에 사용

 <BASE href=“http://dblab.kaist.ac.kr/~bpark/”>

 base URL 지정

 HTML 문서 안의 모든 URL 은 BASE tag 에서 지정한 URL 로부터 상대적인 경로를 가짐

 예

…

(11)

Body Elements

 <BODY> ... </BODY> 로 표시

 문서의 실제 내용을 포함

 Web Browser 의 문서 내용 영역에 보이는 부분

 사용 가능한 Tag 의 종류

 Block Formatting

 Font Style

 List

 Anchor

 Image

 Table

 Frame

 Form

(12)

page12

<BODY> Tag

 지정할 수 있는 속성들

 background - 배경 그림

 bgcolor - background color

 text - text color

 link - link color

 vlink - visited link color

 색깔은 RGB 값이나 지정된 이름을 사용

 예

 <BODY BACKGROUND=“tiles.gif”>

 <BODY BGCOLOR=black TEXT=white LINK=purple>

(13)

Block Formatting (1/3)

 블럭 설정 및 블럭의 유형 설정

 Headings <H1>...</H1> ... <H6>...</H6>

 H1 부터 H6 까지 6 개의 레벨이 있다

 H1 이 가장 높은 레벨이다

 Paragraph <P>...</P>

 문단의 시작과 끝을 명시해 준다

 가능한 속성

 <P ALIGN = LEFT|CENTER|RIGHT>

 Preformatted Text <PRE>...</PRE>

 텍스트의 형식이 보이는대로 출력되게 한다

 공백 , 빈줄 , 탭 인식한다

 프로그램 소스 코드 내용을 보여줄 때 유용하다

(14)

Block Formatting (2/3)

 Horizontal Rules <HR>

 수평선을 그려준다

 가능한 속성

 <HR SIZE=6> : 선의 두께를 픽셀 단위로 지정

 <HR WIDTH=100 | 80%> : 선의 폭을 지정

 <HR ALIGN=LEFT | RIGHT | CENTER>

 Line Break <BR>

 출력을 다음줄의 맨 왼쪽으로 이동 시킨다

 Address <ADDRESS>...</ADDRESS>

 address, signature, authorship 등으로 사용

 Italic 체로 표시된다

(15)

Block Formatting (3/3)

 Quotations

<BLOCKQUOTE>...</BLOCKQUOTE>

 다른데서 인용된 문장을 나타내는 데 사용

 들여 쓰기로 표시된다

 Text Alignment

 각 Element 별로 정렬하기

 <H1 ALIGN=CENTER>Storage System</H1>

 <P ALIGN=CENTER></P>

 Element 블럭을 정렬하기 : DIV

 <DIV ALIGN=LEFT | CENTER | RIGHT> ...</DIV>

 <CENTER> ... </CENTER> : Netscape Extension

 HTML의 모든 내용을 중심에 배치해준다

(16)

Font Style (1/3)

 Character Styles

 Logical Styles

 <EM> 강조하고자 할 때 , Italic 체

 <STRONG> 더 강조하고자 할 때 , Bold 체

 <CODE> 코드 , 타자체

 <SAMP> literal 문자열 , 타자체

 <KBD> 키보드 입력 , 타자체

 <VAR> 변수의 이름 , Italic 체

 <DFN> 단어 정의 , Italic 체

 <CITE> 책 제목 등 , Italic 체

(17)

Font Style (2/3)

 Character Styles (Continued)

 Physical Styles

 <B> Bold 체

 <I> Italic 체

 <TT> 고정 글씨 크기의 타자체

 <U> 밑줄

 <S> 가운데로 줄이 쳐진다

 <BIG> 주변 텍스트보다 크게 나온다

 <SMALL> 주변 텍스트보다 작게 나온다

 <BLINK> 깜박이는 글자 (Netscape)

 <SUB> 아래 첨자

 <SUP> 위 첨자

(18)

Font Style (3/3)

 폰트 크기 설정

 <FONT>

 <FONT SIZE=1...7 COLOR=“CYAN”>

 <FONT SIZE=-3...+4>

 <BASEFONT SIZE=1...7> : Netscape Extension

 기본 폰트 크기 설정 . 기본값은 3 이다 .

 Headings

 여섯 단계

 <H1> H1 Tag </H1>

H1 Tag

 <H2> H1 Tag </H2>

H2 Tag

 <H3> H1 Tag </H3> H3 Tag

 <H4> H1 Tag </H4> H4 Tag

 <H5> H1 Tag </H5> H5 Tag

 <H6> H1 Tag </H6> H6 Tag

(19)

List

 Numbered Lists (Ordered Lists)

 각각의 아이템에 번호가 매겨진다

 <OL> <LI>List Item 1<LI>List Item 2 </OL>

 <OL TYPE=A | a | I | i | 1 START=5>

 Unordered Lists

 번호가 매겨지지 않고 심볼이 표시된다

 <UL> <LI>List Item 1<LI>List Item 2 </UL>

 <UL TYPE=DISC | CIRCLE | SQUARE>

 Definition Lists

 용어와 용어의 정의로 구성된다

 <DL>...<DT>term<DD>definition...</DL>

 예

Term1

Term1 is defined as … Term2

Term2 is defined as ...

(20)

Anchor

 <A> ... </A>

 HREF: 다른 곳으로의 링크를 명시 한다

 로컬 호스트의 다른 문서 연결

 <A HREF=“files/index.html”> Index </A>

 웹 상의 다른 호스트의 문서 연결

 <A HREF=“http://adam.kaist.ac.kr/home.html> Home </A>

 NAME: 문서내에서의 참조 포인트 지정

 직접 이동하고 싶은 부분을 설정 한다

 <A NAME=“Part4”> Part Four: Memory Hierachy </A>

 NAME 참조 포인트로의 연결

 <A HREF=“archi.html#Part4”> Go to Part 4 </A>

 같은 문서 내에서는 파일 이름이 생략 가능하다

(21)

Images and Color (1/3)

 영상 데이터의 출력

 HTML 에서 그림 삽입 : <IMG>

 기본적인 사용 예

 <IMG SRC=“posters/volcano.jpg”>

 그림과 텍스트 정렬

 ALIGN 값으로 다음과 같은 속성을 지정해준다

 텍스트를 그림에 Wrapping

 ALIGN=LEFT 혹은 ALIGN=RIGHT

 텍스트 Wrapping 을 중단 시키기

 <BR CLEAR=LEFT | RIGHT | ALL>

(22)

Images and Color (2/3)

 그림의 크기 지정

 WIDTH, HEIGHT 속성값을 픽셀 단위로 지정한다

 <IMG SRC=“rei.jpg” WIDTH=80 HEIGHT=30>

 그림과 텍스트의 간격 조정

 VSPACE, HSPACE 속성값을 픽셀 단위로 지정한다

 <IMG SRC=“rei.jpg” VSPACE=30 HSPACE=30>

 그림과 링크

 <A> Tag 안에 <IMG> 를 포함시키면 된다 .

 <A HREF=“home.html”><IMG SRC=“home.gif”></A>

 BORDER 속성값을 지정해 줄 수도 있다 .

 <A...><IMG SRC=“arrow.gif” BORDER=0></A>

 그림의 Alternative 제공

 ALT 속성에 문자열을 지정해준다 .

 <A HREF=“rei.jpg” ALT=“Rei’s Smiling Face”>

(23)

Images and Color (3/3)

 색을 지정하는 방법

 미리 정의된 색 이름들 사용 : red, blue, green...

 RGB값을 16 진수로 지정

 ex) #000000, #DE04E4, #FFFF00

 http://colors.infi.net/colorindex.html

 배경색 및 텍스트 색 변경

 BODY의 속성에 원하는 값을 지정한다

 <BODY BGCOLOR=“#000000” TEXT=“#871F78”

LINK=“#9805FF” VLINK=“#70DBDB”>

 <FONT> 로 일정 부분만 색 변경이 가능하다

 <FONT COLOR=“#FF0000”>RED</FONT>

 배경 그림 사용

 BODY의 속성에 원하는 값을 지정한다

 <BODY BACKGROUND=“images/bkground.gif”>

(24)

Table (1/4)

 표로 되어있는 정보를 나타내기에 유용하다

 <TABLE>...table contents...</TABLE>

 <CAPTION>...</CAPTION>: 테이블 제목을 명시한다

 <TR>...</TR>: 테이블 Row 를 명시한다

 <TH>...</TH>: 테이블 헤더 셀을 정의한다

 <TD>...</TD>: 테이블 데이타 셀을 정의한다

<TABLE>

<TR>

<TH>Drive Plate</TH>

<TH>Front Cover</TH>

</TR>

<TR>

<TD>39-49</TD>

<TD>19-23</TD>

</TR></TABLE>

Drive Plate Front Cover

39-49 19-23

(25)

page25

Table (2/4)

 <TABLE> 의 속성

 BORDER = n: 외부테두리 두께

 CELLSPACING = n: 셀간 간격

 CELLPADDING = n: 셀 데이터와 벽의 간격

 WIDTH = n: 테이블의 너비

 HEIGHT = n: 테이블의 높이

 BGCOLOR = #rrggbb: 테이블의 바탕색

(26)

page26

Table (3/4)

 <TR>, <TH>, <TD> 의 속성

 WIDTH = n: 셀의 너비

 HEIGHT = n: 셀의 높이

 ALIGN = Left|Center|Right: 셀내 가로 문자 정렬

 VALIGN = Top|Middle|Bottom: 셀내 세로 문자 정렬

 COLSPAN = n: 하나의 셀로 합할 행의 수

 ROWSPAN = n: 하나의 셀로 합할 열의 수

 NOWRAP: 셀내 문장이 두줄로 나누어 지지 않는다

 BGCOLOR = #rrggbb: 셀의 바탕색

(27)

page27

Table (4/4)

 예제

<CAPTION>교육내용안 (1)</CAPTION>

<TR>

</TR>

<TR>

</TR>

<TR>

<TH ROWSPAN=2>데이타베이스 </TH>

</TR>

</TR>

</TABLE>

과 정 명 교육 기간

일수 시간

데이타베이스

이론

실습

주 6 일

주 4 일

24시간

32시간 교육내용안 (1)

(28)

page28

Frame (1/2)

 Frames

 하나의 화면을 분할시켜 구성

 Frame 을 사용한 문서는 <BODY> tag 대신 <FRAMESET> 사용

 <FRAMESET>...</FRAMESET>

 Frame들이 들어갈 수 있는 container

 속성

 ROWS, COLS: 화면을 분할하는 방법을 지정 예 ) <FRAMESET COLS=“100,50%,*”>

 <FRAME>

 Frameset에 들어갈 하나의 frame 을 정의

 속성

 SRC=“...”: Frame에 들어갈 문서의 URL

 NAME=“...”: Frame에 부여할 이름

 SCROLLING=“yes|no|auto”: 스크롤이 가능하게 할지 아닐지 결정

 NORESIZE, MARGINWIDTH, MARGINHEIGHT 등

 <TARGET>

 <A HREF=“orchid.html” TARGET=“right”>Orchid</A>

(29)

page29

Frame (2/2)

 예제

<html>

<head>

<title>Background Colors</title>

</head>

<FRAME SRC="cell1.html" name="top"

marginheight="1" SCROLLING="auto">

<FRAME SRC="cell2.html" name="left"

margin width="1" scrolling="auto">

<FRAME SRC="cell3.html" name="right"

margin width="1" scrolling="auto">

</FRAMESET>

(30)

page30

Form (1/7)

 <FORM>...</FORM>

 사용자로부터 입력을 받아 서버에 전달

 속성

 ACTION=“URL”

 form input 을 처리할 CGI 프로그램의 URL

 METHOD=GET | POST

 form input 을 CGI 프로그램에 전달하는 방식

 FORM 에서 입력받는 방법

 INPUT

 SELECT

 TEXTAREA

(31)

page31

Form (2/7)

 <INPUT>

 사용자가 입력 , 수정할 수 있는 field

 속성 : TYPE, NAME, VALUE, SIZE, CHECKED

 입력 유형을 지정

 NAME=“…”

 입력 항목을 식별

 VALUE=“…”

 입력 항목의 값

 SIZE

 입력 필드의 크기 ( 글자수 )

 CHECKED

 TYPE=RADIO |CHECKBOX 일때 디폴트로 선택되었음을 의미

(32)

page32

Form (3/7)

 예제

<HTML>

<HEAD><TITLE>Input Form</TITLE></HEAD>

<BODY>

<H2>INPUT FORM</H2>

<TABLE>

<TR><TD>성별 <TD><INPUT type=radio name=sex value=male checked>남 (male) <INPUT type=radio name=sex value=female>여 (female)</TR>

</TABLE>

</FORM> </BODY> </HTML>

(33)

page33

Form (4/7)

 < SELECT >

 하나 이상의 항목을 선택할 수 있는 선택 리스트 정의

 속성 : NAME, SIZE, MULTIPLE

 NAME=“…”

 SELECT 항목 식별자

 SIZE=n

 브라우져에 나타날 <OPTION> 의 수

 MULTIPLE

 다중 선택 가능

 <OPTION>

 선택 항목 정의

 속성 : VALUE, SELECTED, DISABLE

 VALUE: 항목이 선택될 때의 값

 SELECTED: 초기 선택 항목 표시

 DISABLE: 선택 불가 표시

(34)

page34

Form (5/7)

 예제

<HTML>

<HEAD><TITLE>Select Form</TITLE></HEAD>

<BODY>

<H2>SELECT FORM</H2>

<OPTION value=10>10~19

<OPTION value=20 selected>20~29

<OPTION value=30>30~39 <OPTION value=40>40~49 <OPTION value=50>50~59 <OPTION value=60>60~

</SELECT> </TR>

<OPTION value=student>학생 <OPTION value=company selected> 회사원 <OPTION value=research>연구원 <OPTION value=personal> 개인사업가 <OPTION value=free>프리랜서

</SELECT> </TR>

</TABLE>

</FORM> </BODY> </HTML>

(35)

page35

Form (6/7)

 <TEXTAREA>

 사용자가 입력할 수 있는 여러 줄의 text block

 속성 : NAME, SIZE, MULTIPLE

 NAME=“…”

 TEXTAREA 항목 식별자

 COLS=n

 TEXTAREA의 창 크기 ( 문자 수 )

 ROWS=n

 TEXTAREA의 창 크기 ( 라인 수 )

 WRAP=off | virtual | physical

 입력된 텍스트의 경계 처리

(36)

page36

Form (7/7)

 예제

<HTML>

<HEAD><TITLE>TextArea Form</TITLE></HEAD>

<BODY>

<H2>TEXTAREA FORM</H2>

<TABLE>

안녕하세요 ? 여기에 원하시는 내용을 입력해 주세요 . 여기는 자동적으로 단어를 박스 경계에서 줄바꿈해 줍니다 .

</TEXTAREA></TR>

</TABLE>

</FORM> </center> </BODY> </HTML>

(37)

page37

CGI

 CGI (Common Gateway Interface)

 Web 서버와 응용프로그램 사이의 데이타 교환 규칙 정의

 Web 서버는 CGI 규칙에 의해 정의된 환경변수 또는 표준입력 (stdin) 을 이용 하여 응용프로그램의 수행에 필요한 입력 데이타를 응용프로그램에게 전달

 응용프로그램은 프로그램 수행 결과를 HTML 문서 형식으로 Web 서버에게 전 달

Web Server (httpd)

CGI 응용프로그램 (docobj.cgi)

환경변수 , stdin stdout (HTML 문서 )

URL 예 : http://harp.kaist.ac.kr/~kmedia/cgi-bin/docobj.cgi

(38)

page38

CGI

 WWW 서버 (httpd) 환경 설정

 conf/srm.conf 파일중에서 ScriptAlias 와 AddType 부분을 다음과 같 이 수정

# ScriptAlias: This controls which directories contain server scripts.

# Format: ScriptAlias fakename realname

ScriptAlias /cgi-bin/ /usr/local/etc/httpd/cgi-bin/

AddType text/x-server-parsed-html .html

AddType application/x-httpd-cgi .cgi

(39)

page39

CGI

 CGI 환경 변수

 SERVER_SOFTWARE=server_name/version

 SERVER_NAME=domain_name

 SERVER_PORT=number

 REQUEST_METHOD=GET | POST

 PATH_INFO=extra_path

 PATH_TRANSLATED=/trans/extra_path

 SCRIPT_NAME=/path/script_name

 QUERY_STRING=query_string

 REMOTE_HOST=domain_name

 REMOTE_ADDR=IP_addr

 REMOTE_USER=name

 CONTENT_LENGTH=length

(40)

page40

CGI 프로그래밍

 CGI 로 사용자 입력 정보 전달 과정

 사용자가 Form 양식에 있는 submit 버튼을 누름

 사용자가 입력한 정보들을 name=value 의 쌍으로 묶음 (query string)

 CGI 프로그램의 URL(action 에 명시 ) 뒤에 덧붙여 Web 서버로 전송

 http://harp.kaist.ac.kr/cgi-bin/docobj.cgi?name=value&name=value&name=value

 Web 서버는 이를 환경 변수에 저장하고 CGI 포로그램을 수행시킴

 URL 은 PATH_INFO 에 저장

 ? 이하는 QUERY_STRING 에 저장

 CGI 로 전달된 사용자 입력 정보의 인코딩

 & : name=value&name=value

 + : 공백

 %FF : 특수 문자

(41)

page41

CGI 프로그래밍

 순서

 query string 을 읽어 들임

 환경변수 QUERY_STRING 또는 표준입력 (stdin) 이용

 query string 을 디코딩

 + 를 공백으로

 %FF 를 해당 문자로

 & 으로 구분된 name=value 쌍 분리

 name=value 를 name 과 value 로 분리

 각 name 에 대한 value 값을 처리하도록 프로그래밍

(42)

page42

CGI 프로그래밍

 예제

이름 : <INPUT type=text size=20 name=login> <br>

나이 : <INPUT type=text size=5 name=age> <br>

성별 : <INPUT type=radio name=sex value=male> male

<INPUT type=radio name=sex value=female> female <br>

학교 : <SELECT name=school>

</FORM>

 PATH_INFO

 /~bpark/cgi-bin/getproc.cgi

 QUERY_STRING

 login=박병권 &age=35&sex=male&school=%5B 한국 + 대학 %5D Http://dblab.kaist.ac.kr/~bpark/index.html

(43)

page43

Web 과 Database 연동

 WWW 강점

 단순성

 일반 사람들도 쉽게 정보를 만들고 검색 가능

 개방성

 많은 종류의 클라이언트와 서버가 개발 됨

 다양한 플랫폼을 지원

 인터네트 기반

 전세계를 대상으로 하는 광범위한 정보 서비스 가능

 GUI 기반 클라이언트

 Mosaic, Netscape, MS IE, ...

 멀티미디어 기능 강화 (3D, Audio, Video, Animation,...)

 다양한 인터네트 서비스 통합 (news, e-mail, ftp, telnet, ...)

(44)

page44

Web 과 Database 연동

 WWW 약점

 방향 상실 문제

 map 지원 어려움

 query 기능 필요

 복잡한 멀티미디어 정보 표현의 한계

 intermedia synchronization 지원 필요

 링크의 일관성 부재

 HTML 문서안에 링크 내재

 dangling link 존재

 대규모 데이타 관리 문제

 데이타 저장에 화일 시스템 이용 (DB 직접 지원 안됨 )

 데이타베이스 기반 서비스 (OLTP) 지원 어려움

(45)

page45

Web 과 Database 연동

 데이타베이스 시스템

데이타베이스 데이타베이스 응용 프로그램

데이타베이스 엔진 (DBMS)

클라이언트

서버

network

(46)

page46

Web 과 Database 연동

 데이타베이스 시스템 강점

 복잡한 데이타 모델링 기능

 질의어 및 질의 최적화 기능

 트랜잭션 기능

 파손 회복 기능

 데이타 접근 권한 관리 기능

 색인 관리 기능

 강력한 응용개발 도구 , Form 개발 도구

 데이타베이스 시스템 단점

 전세계를 대상으로 한 광범위 서비스에 부적합

 Form File 형식에 대한 표준 부재

(47)

page47

WWW 와 데이타베이스의 연동

 장점

 WWW 과 데이타베이스의 장점 모두 활용

 데이타베이스 기반 대규모 멀티미디어 정보 서비스 가능

 DBMS 와 데이타베이스 개발 도구를 이용 멀티미디어 데이타베이스 구 축 관리

 WWW 을 이용 전세계 가입자에게 멀티미디어 정보서비스 제공

 다양한 사용자 플랫폼 지원

 동일한 사용자 인터페이스 제공

(48)

page48

WWW 와 데이타베이스의 연동

 WWW 변화 과정

 GUI & Multimedia (1994)

 Image, Audio, Video

 CGI (1995)

 Form, Table

 CGI

 Security

 Java (1996)

 Applet (mobile Code)

 Object (1997)

 Orblet (CORBA + Java)

 Java Beans

 ActiveX

(49)

page49

WWW 와 데이타베이스의 연동

WWW Client

WWW Server

Database Gateway

DBMS

WWW Client

WWW Server

Middleware

DBMS

WWW Client

CGI

Java

Orblet

WWW Client

Orblet

WWW Client

Orblet

(a) Database Gateway (b) Database Middeware (c) Distributed Objects

request HTML

request

DB request

HTML

data

Call Level Interface

request

response

(50)

page50

Web 과 Database 연동

 연동 방법

 Browser External Viewer 이용 방법

 Java 를 이용한 방법

 Java Language Binding

 JDBC

 CGI 를 이용한 방법

 CGI Database Gateway

 Illustra Web DataBlade

(51)

page51

Browser External Viewer 를 이용 방법

 시스템 구조

클라이언트

서버 Web 서버

WWW Browser

DBMS 엔진

데이타베이스 데이타베이스

관리 도구

Database Access

Internet

(52)

page52

Browser External Viewer 를 이용 방법

 장점

 기존 데이타베이스 응용 개발 도구 사용 가능

 구현 용이

 응용 확장에 대한 신축성

 단점

 별도의 사용자 인터페이스 사용

 클라이언트 환경 통일 부재 : 대규모 서비스 어려움

 WWW 기술 활용 못함

(53)

page53

Java 를 이용한 방법

 Java Language Binding

 ODMG Object Model(ODL, OML) 을 Java 로 구현

 Java ODL, Java OML, Java OQL

Java Applet Web Browser

Download bytecode

Database access Desktop Client

Server Machine

Web Server

DB Server

(54)

page54

Java 를 이용한 방법

 Applets

 Applications

Java Applet JDBC Driver

Internet Web and Database Server Download bytecode

Database access

Desktop Client Internet Server Machine

Java Application JDBC Driver Desktop Client Local Disk

Database access Internet

Database Server

(55)

page55

Java 를 이용한 방법

 JDBC Driver Architecture

Java Application

JDBC Manager

JDBC-ODBC Bridge Driver

Driver A

Driver B

JDBC API

JDBC Driver API

Database Access Protocols

JDBC 구현 ODBC and

DB Drivers

(56)

page56

JCBC 이용

 예제

class Select {

public static void main(String argv[]) { try {

// Create a URL specifying an ODBC data source name.

String url = “jdbc:odbc:wombat”;

//Connect to the database at that URL.

Connection con = DriverManager.getConnection(url, “bpark”, “”);

//Execute a SELECT statement.

Statement stmt = con.createStatement();

ResultSet rs = stmt.executeQuery(“SELECT id, name FROM Student”);

//Step through the result rows.

System.out.println(“Got results:”);

while (rs.next()) {

// get the values from the current row:

int a = rs.getInt(1);

char name[] = rs.getString(2).tocharArray();

...

} stmt.close();

con.close();

(57)

page57

CGI 를 이용한 방법

 CGI Database Gateway

데이타베이스 HTML 문서

생성화일 Web

Browser 외부 뷰어

Web Server

DBMS Database

Gateway 데이타베이스

응용 서버 클라이언트

서버

Internet

(58)

page58

CGI 를 이용한 방법

 Web Server 와 DBMS 를 연결해 줄 수 있는 Database Gateway 가 필요함

 Database Gateway 개발 방법

 CGI (Common Gateway Interface) 이용 방법

 확장 API (Netscape 의 NSAPI) 이용 방법

 특정 DBMS 전용 Web 서버 이용 방법

(59)

page59

CGI 를 이용한 방법

 Database Gateway 를 통해 데이타베이스에 저장된 데이타를 HTML 문서로 변환하는 방법

 Script 화일 이용 방법

 확장된 HTML (SQL-embedded HTML) 이용 방법

 Function Library 이용 방법

(60)

page60

Database Gateway 개발 방법

 CGI 를 이용한 Database Gateway 시스템 구조 (1)

Database Gateway

DBMS 엔진

데이타베이스 Web 서버

CGI

데이타베이스 관리 도구

..

.

Database

Gateway

(61)

page61

Database Gateway 개발 방법

 CGI 를 이용한 Database Gateway 시스템 구조 (1)

 장점

 기존의 Web Server 를 그대로 이용 가능

 구현이 용이

 응용 확장에 대한 신축성

 단점

 process 생성 및 소멸 , data copy 로 인한 성능 저하

 반복적인 DB 연결로 인한 성능 저하

 gateway process 증가로 인한 동시 서비스 수의 제한

(62)

page62

Database Gateway 개발 방법

 CGI 를 이용한 Database Gateway 시스템 구조 (2)

Dispatcher

DBMS 엔진

데이타베이스 Web 서버

CGI

데이타베이스 관리 도구 Database

Gateway

...

Dispatcher

(63)

page63

Database Gateway 개발 방법

 CGI 를 이용한 Database Gateway 시스템 구조 (2)

 장점

 기존의 Web Server 를 그대로 이용 가능

 구현이 용이

 응용 확장에 대한 신축성

 데이타베이스에 대한 반복 질의의 효율적 수행

 Gateway 갯수 조절에 의한 서비스 확장성

 단점

 process 생성 및 소멸 , data copy 로 인한 성능 저하

(64)

page64

Database Gateway 개발 방법

 확장 API 를 이용한 Database Gateway 시스템 구조

DBMS 엔진

데이타베이스 Web 서버

데이타베이스 관리 도구 Database Gateway

확장 API

(65)

page65

Database Gateway 개발 방법

 서버 확장 API 를 이용한 Database Gateway

 장점

 process 생성 및 소멸 , data copy 발생하지 않음

 단점

 구현이 어려움

 서버 확장 API 에 대한 표준 부재

 특정 Web Server 에 의존

 다른 서버 활용 못함

 응용 확장에 대한 신축성 저하

(66)

page66

Database Gateway 개발 방법

 특정 DBMS 전용 Database Gateway 를 내장한 Web 서버 시스 템 구조

DBMS 엔진

데이타베이스 Web 서버

데이타베이스 관리 도구 Database

Gateway

(67)

page67

Database Gateway 개발 방법

 특정 DBMS 전용 Database Gateway 를 내장한 Web 서버

 장점

 process 생성 및 소멸 , data copy 발생 않음

 Code 최적화 가능

 단점

 구현이 어려움

 다른 Web 서버 활용 못함

 응용 확장에 대한 신축성 떨어짐

(68)

page68

Database Gateway 사례

 객체지향 DBMS 지원

 O2Web (O2 Technology Inc., France)

 지원 DBMS: O2

 Gateway 방식 : CGI 이용

 HTML 문서 생성 : method function(o2report) 이용

 InterServ (NTT Data Comm., Japan)

 지원 DBMS: UniSQL

 Gateway 방식 : DBMS 전용 Web Server

 HTML 문서 생성 : Script 언어 이용

(69)

page69

Database Gateway 사례

 객체지향 DBMS 지원

 NaviServer (NaviSoft, Inc.)

 지원 DBMS: Illustra

 HTML 문서 생성 : SQL-Embedded HTML 이용

 Illustra’s Web DataBlade (Illustra Infor. Tech., Inc.)

 지원 DBMS: Illustra

 HTML 문서 생성 : Function Library 이용

(70)

page70

Database Gateway 사례

 관계형 DBMS 지원

 Web/Genera (Yale Univ.)

 지원 DBMS: Sybase

 HTML 문서 생성 : Web/Genera schema 이용

 WebRex (Information Technology Solutions, Inc.)

 지원 DBMS: Oracle

 HTML 문서 생성 : ?

(71)

page71

Database Gateway 사례

 관계형 DBMS 지원

 Blackie/WWWEnterprise/15

(Blackie DBGateway Tech., Inc.)

 지원 DBMS: Informix

 HTML 문서 생성 : Script 언어 이용

 Decoux (Oracle)

 지원 DBMS: Oracle

 HTML 문서 생성 : 확장된 HTML markup 이용

(72)

page72

Database Gateway 사례

 ODBC 지원

 WebDBC (Nomad Development, Inc.)

 지원 DBMS: ODBC

 HTML 문서 생성 : HTX 라는 확장된 HTML markup 이용

 WebBase (ExperTelligence, Inc.)

 HTML 문서 생성 : .htf 라는 확장된 HTML markup 이용

(73)

page73

Database Gateway 사례

 ODBC 지원

 Commerce Builder (The Internet Factory, Inc.)

 HTML 문서 생성 : SMX 라는 script 언어 이용

 Cold Fusion (Allaire, Inc.)

 HTML 문서 생성 : DBML 이라는 script 언어 이용

(74)

page74

Database Gateway 사례

 본 연구실에서 개발한 사례

 KAIST Database Gateway

 지원 DBMS: 오디세우스 (ODYSSEUS) - 본 연구실에서 개발한 객체지 향 DBMS -

 Gateway 방식 : proprietry 방식

 HTML 문서 생성 방식 : proprietry 방식

(75)

page75

Illustra Web DataBlade

 Architecture

Web

Server

Build SQL statement

Application pages

WebExplode() Web DataBlade HTML page

with dynamic data

HTML page with MISQL tag

request

Dynamic Page

Webdriver(CGI)

Illustra

CGI

Envn’t Web.conf

SQL

Dynamic Page

(76)

page76

Illustra Web DataBlade

 Webdriver

 Web Server와 Illustra 를 연결하는 CGI Driver

 DB로부터 HTML 응용 page 를 extract 하여 WebExplode 를 수행시킴

 WebExplode가 생성한 HTML 문서를 Web Server 에게 전달

 WebExplode function

 HTML 응용 page 안에 내장된 SQL 문장을 생성 및 수행

 SQL 수행 결과를 Webdriver 에 전달

 Web DataBlade tags and attributes

 SGML-compliant tags and attributes

 SQL 문장을 HTML 응용 page 속에 내장시킴

 Web DataBlade functions

 Formatting of HTML pages

 Retrieval of CGI environment variables

(77)

page77

Illustra Web DataBlade

 Configuration Variables in Web.conf

 MI_USER miadmin

 MI_DATABASE webdb

 MItab web_pages

 MInam ID

 Micol page

 Mival apb

 WEB_HOME /cgi-bin/Webdriver

 web_pages Table

ID desc page

select_table The 1st application page <HTML>…<?MISQL>...

<HTML>…<?MISQL>...

The 2nd application page display_table

... ... ...

(78)

page78

Illustra Web DataBlade

 Application page 예

select_table

<HTML>

<HEAD>

<TITLE> Select from Table </TITLE>

</HEAD>

<BODY>

<?MIVAR COND=($table_name.nxst.) NAME=$table_name> <?/MIVAR>

Select from table: <HR>

<?MIVAR>

<?/MIVAR>

</BODY>

</HTML>

(79)

page79

Illustra Web DataBlade

 Application page 예

display_table

<HTML>

<HEAD>

<TITLE> Display Table Data </TITLE>

</HEAD>

<BODY>

<?MIBLOCK COND=($table_name.xst.)>

<TR>

<?MISQL SQL=“SELECT a.column_name FROM columns a, tables b

WHERE a.column_member = b.table_type

AND b.table_name = trim(both from ‘$table_name’);”> <TD>$* </TD> <?/MISQL>

</TR>

<?MISQL SQL=“SELECT * FROM $table_name;”>

</TABLE>

<?/MIBLOCK > </BODY> </HTML>

(80)

page80

Database Gateway 예제

 GSQL

 A simple public domain database gateway

 지원 DBMS: Sybase, Oracle

 HTML 문서 생성 : proc file (SQL-specification file) 이라는 script file 이 용

(81)

page81

Database Gateway 예제

 GSQL Database Gateway 시스템 구조

DBMS

WWW server sqlmain

(database application program)

proc file gsql

(database gateway) CGI executable (shell script)

HTML SQL

Database

(82)

page82

Database Gateway 예제

 CGI Executable 예제 (C Shell Script)

# ! /bin/csh

# set DBMS environment source setup

# dispatch the sample PROC file ./gsql sample.proc $QUERY_STRING

(83)

page83

Database Gateway 예제

 GSQL PROC file 예제

HEADING <H2> Database Gateway Example Using GSQL </H2>;

TEXT <HR>;

TEXT <P> ...;

TEXT <HR>;

SUB paintings SELECTLIST AS paintings;

SUB sculture SELECTLIST AS sculture;

SUB objects SELECTLIST AS objects;

SUB _attrlist SELECTLIST variable $;

SHOW _attrlist TITLE “<P> Select what you want.” SCROLL paintings, sculture, objects d’art;

...

SQLPROG /gsql_demo/sqlmain;

FROMLIST museum;

DEFINE database sample_db;

DEFINE login whang;

DEFINE passwd whang;

(84)

page84

Database Gateway 예제

 GSQL 예제 PROC file 의 실행 화면

(85)

page85

결론

 광범위한 멀티미디어 데이타베이스 서비스 시스템

 향후 발전 방향

– WWW + Java + CORBA+Database 통합

WWW 와 데이터베이스