WWW 와 데이터베이스.

Slides:



Advertisements
Similar presentations
HTML.  Hyper Text Markup Language  Hyper Text : Link  Markup :  전용 브라우저 (IE, Netscape, Opera..)  프로그램 + 실행 환경 ( 실행기 )
Advertisements

홈페이지 만들기. Cyber 공간에서 자신이 갖고 있는 정보 나 관심사를 다른 사람들에게 체계적으 로 공개하거나, 시간과 장소에 구애 받지 않고 정보화 시대에 발맞춰 자신을 어필 할 수 있음.
HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.
4 장 웹 브라우저의 사용 World Wide Web 의 개요  1990 년 말 스위스의 CERN 연구센터에서 많은 사용자가 쉽게 사용할 수 있도록 그래픽을 제공하는 환경을 개발  WWW, Web, World Wide Web, W3 등의 호칭  Hypertext.
컴퓨터 통신과 인터넷 2. 컴퓨터 통신 2.1 컴퓨터 통신 장비 ~ 고성능 컴퓨터. 전화선이나 전용선, 모뎀이나 통신카드, 통신용 프로그램 컴퓨터 IBM AT (286) 호환 기종 – 문자 서비스만 IBM AT (486-RAM 16MB) 급 호환 기종이상.
XHTML Basic 제 13 장 1. XHTML Basic의 개요 2. XHTML Basic 기본 문법 3. 표 만들기
홈페이지 제작 과정 강사: 정희영.
웹 프로그래밍 HTML, 자바스크립트, ASP를 중심으로
Introduction to Django
웹 페이지.
HTML5 웹 프로그래밍 입문 (개정판) 1장. 인터넷과 웹환경의 발전.
PHP programming 2000년 11월 13일 데이터베이스 연구실 김호숙.
2002/3/20 HTML 2002/3/20
HTML과 CSS HTML과 CSS 세미나에 오신 것을 환영합니다.
10장 동적 HTML (Dynamic HTML)
HTML & CSS 겉핥기 2012 SUMMER SPARCS.
HTML5 웹 프로그래밍 입문 (개정판) 4장. CSS3 스타일시트 기초.
HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세
MySQL 연동 PHP 프로그래밍 기초 순천향대학교 정보기술공학부 이상정.
웹 해킹 기초와 실습.
소프트웨어시스템설계(6주) 데이터베이스 연동
1 HTML5 개요.
7. JavaBeans 프로그래밍 JavaBeans JavaBeans 만들기 빈을 이용한 회원가입 양식 작성하기 빈 작성
UIT Series HTML + JavaScript [Chapter 1] Html을 이용한 웹 페이지 만들기.
HTML &JAVASCRIPT.
2 서블릿의 기초.
1. JSP(Java Server Pages) 소개
9장. 요청 흐름제어와 모듈화 #1: <jsp:forward> 액션태그 사용
웹 서비스 (Web Services).
DB와 WEB 연동(1) [2-Tier] Java Applet 이용
Web Server와 DB 연동.
1장. JSP 및 Servlet을 활용한 동적 웹 프로그래밍 소개 제1장.
Web Servers (IIS & Apache)
이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:
HTML 1 멀티미디어 저작 도구 I (드림 위버 CS3).
ASP 정 보 보 호 학 과 양 계 탁.
제 8장. 멀티미디어 데이터베이스 및 정보검색 시스템
HTML5 입문 인공지능 연구실.
9장 자바스크립트.
JavaScript 객체 전 혜 영.
인터넷의 작동 원리 PARSONS/OJA 인터넷.
HTML5 웹 프로그래밍 입문(교수용) 2장.HTML5 문서의 기본.
학습목표 학습목차 Table 태그를 이용하여 표 만들기를 이해할 수 있습니다.
제 23 장 WWW 23.1 하이퍼텍스트와 하이퍼미디어 23.2 브라우저 구조 23.3 고정 문서 23.4 HTML
홈페이지 만들기 HTML HyperText Markup Language 홈페이지를 만들 때 사용하는 언어
웹서버와 설치에 필요한 것 WWW ( world wide web ) TCP/IP 프로토콜을 이용하는 클라이언트/서버 환경
5. JSP의 내장객체1.
6부 WML/WML2.0 언어배우기 6-1 WML에 대해서 6-2 WML 기본 태그 6-3 글과 그림 삽입에 관련된 태그
5부 mHTML/KUN언어 배우기 5-1 mHTML과 KUN에 대해서 5-2 mHTML 기본태그
HTML5+CSS3 실무 테크닉 김은기 저.
8 데이터베이스 사용하기.
12 데이터베이스 사용하기.
웹 서비스 (Web Services).
Html(front end) & jsp(back end)
JDBC (Java Database Connectivity)
HTML5 웹 프로그래밍 입문 (개정판) 2장. HTML5 문서의 기본.
글꼴관련 태그 오산대학 컴퓨터정보과 김 영 권.
문단 관련 태그 위지윅과 특수문자 <BODY> 태그로 컬러 문서 만들기 글꼴 관련 태그 목록 관련 태그
HTML.
학습목표 학습목차 홈페이지에 색상을 표현하는 방법 이해할 수 있습니다.
HTML CSS 자바스크립트 무작정 따라하기
CGI (Common Gateway Interface)
인터넷응용프로그래밍 Atom(개발 환경).
CGI (Common Gateway Interface)
17장 웹 사이트 제작 완성 한빛미디어(주).
myfood.com 상명대 맛집 홈페이지 구축 제안서
Chapter03 HTML 포토앨범 만들기
Chapter02 HTML 자기소개서 작성하기
SQL Server Reporting Services Feature
Web & Internet [10] 입문 – input 태그
Presentation transcript:

WWW 와 데이터베이스

목차 서론 HTML 문법 CGI 프로그래밍 Web과 Database 연동 결론 WWW 소개 Java를 이용한 방법 Java Language Binding JDBC CGI를 이용한 방법 CGI Database Gateway Illustra Web DataBlade 결론

WWW 소개 World Wide Web (WWW) 개념 구성 형식 클라이언트/서버 구조의 분산 하이퍼미디어 시스템 통합 인터넷 정보검색 시스템 구성 형식 HTTP (HyperText Transfer Protocol) 클라이언트와 서버간의 데이터 전송 프로토콜 HTML (HyperText Markup Language) 하이퍼미디어 문서 기술 언어 URL (Uniform Resource Locator) 인터네트 상의 객체 식별자

WWW 소개 HTML URL generalized markup language HTML 문서를 서버에서 관리 문서의 논리적 구조, 출력 방식, 링크 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

WWW 소개 WWW 시스템 구조 External Viewer HTML 문서 WWW Browser Request(URL) CGI Application WWW 서버 CGI Response(HTML문서) 클라이언트 서버 Java Applet

WWW 소개 클라이언트 서버 HTML 브라우져 VRML 브라우져 Push 클라이언트 CERN httpd NCSA httpd Mosaic, Netscape, MSIE,HotJava, Arena VRML 브라우져 Webspace Push 클라이언트 PointCast 서버 CERN httpd NCSA httpd

HTML HTML (Hyper Text Markup Language) 문서 HTML은 페이지의 구조를 묘사한다 문서의 실제 내용과 각종 속성을 나타내는 tag들로 구성됨 (case-insensitive) 기본 문법은 ‘<tag_name>element</tag_name>‘의 형태 <Tag> affected text </Tag> <Tag attr1=... attr2=...> affected text </Tag>

HTML 기본 구조 <HTML> <HEAD> Head of the document <BODY> Body of the document </BODY> </HTML>

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:bymoon@mozart.kaist.ac.kr">bymoon@mozart.kaist.ac.kr.</A></I><BR><BR>Last updated on <B>September 23, 1996</B></P></CENTER> </BODY> </HTML>

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로부터 상대적인 경로를 가짐 예 … <IMG src=“icons/logo.gif”>

Body Elements <BODY> ... </BODY>로 표시 문서의 실제 내용을 포함 Web Browser의 문서 내용 영역에 보이는 부분 사용 가능한 Tag의 종류 Block Formatting Font Style List Anchor Image Table Frame Form

<BODY> Tag 지정할 수 있는 속성들 색깔은 RGB 값이나 지정된 이름을 사용 예 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>

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> 텍스트의 형식이 보이는대로 출력되게 한다 공백, 빈줄, 탭 인식한다 프로그램 소스 코드 내용을 보여줄 때 유용하다

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 체로 표시된다

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의 모든 내용을 중심에 배치해준다

Font Style (1/3) Character Styles Logical Styles <EM> 강조하고자 할 때, Italic 체 <STRONG> 더 강조하고자 할 때, Bold 체 <CODE> 코드, 타자체 <SAMP> literal 문자열, 타자체 <KBD> 키보드 입력, 타자체 <VAR> 변수의 이름, Italic 체 <DFN> 단어 정의, Italic 체 <CITE> 책 제목 등, Italic 체

Font Style (2/3) Character Styles (Continued) Physical Styles <B> Bold 체 <I> Italic 체 <TT> 고정 글씨 크기의 타자체 <U> 밑줄 <S> 가운데로 줄이 쳐진다 <BIG> 주변 텍스트보다 크게 나온다 <SMALL> 주변 텍스트보다 작게 나온다 <BLINK> 깜박이는 글자 (Netscape) <SUB> 아래 첨자 <SUP> 위 첨자

Font Style (3/3) 폰트 크기 설정 Headings <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

List Numbered Lists (Ordered Lists) Unordered Lists Definition 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 ...

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> 같은 문서 내에서는 파일 이름이 생략 가능하다

Images and Color (1/3) 영상 데이터의 출력 HTML에서 그림 삽입: <IMG> 그림과 텍스트 정렬 기본적인 사용 예 <IMG SRC=“posters/volcano.jpg”> 그림과 텍스트 정렬 ALIGN 값으로 다음과 같은 속성을 지정해준다 <IMG ALIGN=TOP | MIDDLE | BOTTOM | TEXTTOP | ABSMIDDLE | BASELINE | ABSBOTTOM> 텍스트를 그림에 Wrapping ALIGN=LEFT 혹은 ALIGN=RIGHT 텍스트 Wrapping을 중단 시키기 <BR CLEAR=LEFT | RIGHT | ALL>

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”>

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 BACKGROUND=“images/bkground.gif”>

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> <TD>39-49</TD> <TD>19-23</TD> </TR></TABLE> Drive Plate Front Cover 39-49 19-23

Table (2/4) <TABLE>의 속성 BORDER = n: 외부테두리 두께 CELLSPACING = n: 셀간 간격 CELLPADDING = n: 셀 데이터와 벽의 간격 WIDTH = n: 테이블의 너비 HEIGHT = n: 테이블의 높이 BGCOLOR = #rrggbb: 테이블의 바탕색

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: 셀의 바탕색

Table (4/4) 예제 교육내용안(1) 과 정 명 교육 기간 일수 시간 데이타베이스 이론 실습 주6일 주4일 24시간 <TABLE BORDER=2> <CAPTION>교육내용안(1)</CAPTION> <TR> <TH COLSPAN=2 ROWSPAN=2>과정명</TH> <TH COLSPAN=2>교육기간</TH> </TR> <TH>일수</TH> <TH>시간</TH> <TH ROWSPAN=2>데이타베이스</TH> <TH>이론</TH> <TD ALIGN=CENTER>주6일</TD> <TD ALIGN=CENTER>24시간</TD> <TH>실습</TH> <TD ALIGN=CENTER>주4일</TD> <TD ALIGN=CENTER>32시간</TD> </TABLE> 과 정 명 교육 기간 일수 시간 데이타베이스 이론 실습 주6일 주4일 24시간 32시간

Frame (1/2) Frames 하나의 화면을 분할시켜 구성 Frame을 사용한 문서는 <BODY> tag 대신 <FRAMESET> 사용 <FRAMESET>...</FRAMESET> Frame들이 들어갈 수 있는 container 속성 ROWS, COLS: 화면을 분할하는 방법을 지정 예) <FRAMESET COLS=“100,50%,*”> <FRAMESET ROWS=“50%,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>

Frame (2/2) 예제 <html> <head> <title>Background Colors</title> </head> <FRAMESET ROWS="25%,75%"> <FRAME SRC="cell1.html" name="top" marginheight="1" SCROLLING="auto"> <FRAMESET COLS="33%,67%"> <FRAME SRC="cell2.html" name="left" margin width="1" scrolling="auto"> <FRAME SRC="cell3.html" name="right" </FRAMESET>

Form (1/7) <FORM>...</FORM> FORM에서 입력받는 방법 사용자로부터 입력을 받아 서버에 전달 속성 ACTION=“URL” form input을 처리할 CGI 프로그램의 URL METHOD=GET | POST form input을 CGI 프로그램에 전달하는 방식 FORM에서 입력받는 방법 INPUT SELECT TEXTAREA

Form (2/7) <INPUT> 사용자가 입력, 수정할 수 있는 field 속성: TYPE, NAME, VALUE, SIZE, CHECKED TYPE=TEXT |PASSWORD |RADIO |CHECKBOX |SUBMIT |RESET 입력 유형을 지정 NAME=“…” 입력 항목을 식별 VALUE=“…” 입력 항목의 값 SIZE 입력 필드의 크기(글자수) CHECKED TYPE=RADIO |CHECKBOX 일때 디폴트로 선택되었음을 의미

Form (3/7) 예제 <HTML> <HEAD><TITLE>Input Form</TITLE></HEAD> <BODY> <H2>INPUT FORM</H2> <FORM action="cgi-bin/input.cgi" method=get> <TABLE> <TR><TD>이름<TD><INPUT type=text size=20 name=name></TR> <TR><TD>비밀번호<TD><INPUT type=password size=20 name=password></TR> <TR><TD>성별<TD><INPUT type=radio name=sex value=male checked>남(male) <INPUT type=radio name=sex value=female>여(female)</TR> <TR><TD>직업<TD><INPUT type=checkbox name=job value=student checked>학생<br> <INPUT type=checkbox name=job value=company>회사원<br> <INPUT type=checkbox name=job value=research>연구원<br> <INPUT type=checkbox name=job value=misc>기타</TR> </TABLE> <INPUT type=submit value="접수"> <INPUT type=reset value="지우기"> </FORM> </BODY> </HTML>

Form (4/7) < SELECT > <OPTION> 하나 이상의 항목을 선택할 수 있는 선택 리스트 정의 속성: NAME, SIZE, MULTIPLE NAME=“…” SELECT 항목 식별자 SIZE=n 브라우져에 나타날 <OPTION>의 수 MULTIPLE 다중 선택 가능 <OPTION> 선택 항목 정의 속성: VALUE, SELECTED, DISABLE VALUE: 항목이 선택될 때의 값 SELECTED: 초기 선택 항목 표시 DISABLE: 선택 불가 표시

Form (5/7) 예제 <HTML> <HEAD><TITLE>Select Form</TITLE></HEAD> <BODY> <H2>SELECT FORM</H2> <FORM action="cgi-bin/input.cgi" method=get> <TABLE> <TR><TD>나이<TD><SELECT name=age> <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> <TR><TD>직업<TD><SELECT name=job multiple size=2> <OPTION value=student>학생 <OPTION value=company selected>회사원 <OPTION value=research>연구원 <OPTION value=personal>개인사업가 <OPTION value=free>프리랜서 </TABLE> <INPUT type=submit value="전송"> <INPUT type=reset value="지우기"> </FORM> </BODY> </HTML>

Form (6/7) <TEXTAREA> 사용자가 입력할 수 있는 여러 줄의 text block 속성: NAME, SIZE, MULTIPLE NAME=“…” TEXTAREA 항목 식별자 COLS=n TEXTAREA의 창 크기(문자 수) ROWS=n TEXTAREA의 창 크기(라인 수) WRAP=off | virtual | physical 입력된 텍스트의 경계 처리

Form (7/7) 예제 <HTML> <HEAD><TITLE>TextArea Form</TITLE></HEAD> <BODY> <center> <H2>TEXTAREA FORM</H2> <FORM action="cgi-bin/input.cgi" method=get> <TABLE> <TR><TD>SQL 입력란<TD><TEXTAREA name=sql cols=30 rows=10></TEXTAREA> </TR> <TR><TD>사용자 의견란<TD><TEXTAREA name=user cols=30 rows=10 wrap=physical> 안녕하세요? 여기에 원하시는 내용을 입력해 주세요. 여기는 자동적으로 단어를 박스 경계에서 줄바꿈해 줍니다. </TEXTAREA></TR> </TABLE> <INPUT type=submit value="전송"> <INPUT type=reset value="지우기"> </FORM> </center> </BODY> </HTML>

URL예: http://harp.kaist.ac.kr/~kmedia/cgi-bin/docobj.cgi CGI CGI (Common Gateway Interface) Web 서버와 응용프로그램 사이의 데이타 교환 규칙 정의 Web 서버는 CGI 규칙에 의해 정의된 환경변수 또는 표준입력(stdin)을 이용하여 응용프로그램의 수행에 필요한 입력 데이타를 응용프로그램에게 전달 응용프로그램은 프로그램 수행 결과를 HTML 문서 형식으로 Web 서버에게 전달 URL예: http://harp.kaist.ac.kr/~kmedia/cgi-bin/docobj.cgi 환경변수, stdin Web Server (httpd) CGI응용프로그램 (docobj.cgi) stdout (HTML문서)

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

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

CGI 프로그래밍 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 : 특수 문자

CGI 프로그래밍 순서 query string을 읽어 들임 query string을 디코딩 환경변수 QUERY_STRING 또는 표준입력(stdin) 이용 query string을 디코딩 + 를 공백으로 %FF를 해당 문자로 &으로 구분된 name=value 쌍 분리 name=value를 name과 value로 분리 각 name에 대한 value 값을 처리하도록 프로그래밍

CGI 프로그래밍 예제 PATH_INFO QUERY_STRING Http://dblab.kaist.ac.kr/~bpark/index.html <FORM method=get action=“cgi-bin/getproc.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> <OPTION value=“[한국 대학]” checked> 한국 대학 <OPTION value=“[대전 대학]” checked> 대한 대학 </SELECT> <INPUT type=submit value=“등록”> <INPUT type=reset value=“지우기”> </FORM> PATH_INFO /~bpark/cgi-bin/getproc.cgi QUERY_STRING login=박병권&age=35&sex=male&school=%5B한국+대학%5D

Web과 Database 연동 WWW 강점 단순성 개방성 인터네트 기반 GUI 기반 클라이언트 일반 사람들도 쉽게 정보를 만들고 검색 가능 개방성 많은 종류의 클라이언트와 서버가 개발 됨 다양한 플랫폼을 지원 인터네트 기반 전세계를 대상으로 하는 광범위한 정보 서비스 가능 GUI 기반 클라이언트 Mosaic, Netscape, MS IE, ... 멀티미디어 기능 강화 (3D, Audio, Video, Animation,...) 다양한 인터네트 서비스 통합 (news, e-mail, ftp, telnet, ...)

Web과 Database 연동 WWW 약점 방향 상실 문제 map 지원 어려움 query 기능 필요 복잡한 멀티미디어 정보 표현의 한계 intermedia synchronization 지원 필요 링크의 일관성 부재 HTML 문서안에 링크 내재 dangling link 존재 대규모 데이타 관리 문제 데이타 저장에 화일 시스템 이용 (DB 직접 지원 안됨) 데이타베이스 기반 서비스 (OLTP) 지원 어려움

Web과 Database 연동 데이타베이스 시스템 network 클라이언트 데이타베이스 응용 프로그램 서버 데이타베이스 엔진 (DBMS) 데이타베이스

Web과 Database 연동 데이타베이스 시스템 강점 데이타베이스 시스템 단점 복잡한 데이타 모델링 기능 질의어 및 질의 최적화 기능 트랜잭션 기능 파손 회복 기능 데이타 접근 권한 관리 기능 색인 관리 기능 강력한 응용개발 도구, Form 개발 도구 데이타베이스 시스템 단점 전세계를 대상으로 한 광범위 서비스에 부적합 Form File 형식에 대한 표준 부재

WWW와 데이타베이스의 연동 장점 WWW과 데이타베이스의 장점 모두 활용 데이타베이스 기반 대규모 멀티미디어 정보 서비스 가능 DBMS와 데이타베이스 개발 도구를 이용 멀티미디어 데이타베이스 구축 관리 WWW을 이용 전세계 가입자에게 멀티미디어 정보서비스 제공 다양한 사용자 플랫폼 지원 동일한 사용자 인터페이스 제공

WWW와 데이타베이스의 연동 WWW 변화 과정 GUI & Multimedia (1994) CGI (1995) Image, Audio, Video CGI (1995) Form, Table CGI Security Java (1996) Applet (mobile Code) Object (1997) Orblet (CORBA + Java) Java Beans ActiveX

WWW 와 데이타베이스의 연동 WWW Client WWW Client WWW Client WWW Server WWW Java Call Level Interface WWW Client request HTML Orblet WWW Server WWW Server request response CGI request HTML WWW Client Middleware Orblet Database Gateway DB request data DBMS WWW Client DBMS Orblet (a) Database Gateway (b) Database Middeware (c) Distributed Objects

Web과 Database 연동 연동 방법 Browser External Viewer 이용 방법 Java를 이용한 방법 Java Language Binding JDBC CGI를 이용한 방법 CGI Database Gateway Illustra Web DataBlade

Browser External Viewer를 이용 방법 시스템 구조 클라이언트 WWW Database Access Browser Internet DBMS 데이타베이스 Web 서버 엔진 관리 도구 데이타베이스 서버

Browser External Viewer를 이용 방법 장점 기존 데이타베이스 응용 개발 도구 사용 가능 구현 용이 응용 확장에 대한 신축성 단점 별도의 사용자 인터페이스 사용 클라이언트 환경 통일 부재: 대규모 서비스 어려움 WWW 기술 활용 못함

Java를 이용한 방법 Java Language Binding ODMG Object Model(ODL, OML)을 Java로 구현 Java ODL, Java OML, Java OQL Download bytecode Java Applet Web Server Web Browser Database access DB Server Desktop Client Server Machine

Java를 이용한 방법 Applets Applications Download bytecode Java Applet Internet Web and Database Server Database access JDBC Driver Desktop Client Internet Server Machine Applications Java Application Database access JDBC Driver Internet Local Disk Desktop Client Database Server

Database Access Protocols Java를 이용한 방법 JDBC Driver Architecture Java Application JDBC API JDBC Manager JDBC Driver API JDBC-ODBC Bridge Driver Driver A Driver B JDBC 구현 ODBC and DB Drivers Database Access Protocols

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();

CGI를 이용한 방법 CGI Database Gateway Internet 클라이언트 Web 외부 Browser 뷰어 데이타베이스 Web Server 응용 서버 DBMS HTML 문서 생성화일 데이타베이스 서버

CGI를 이용한 방법 Web Server와 DBMS를 연결해 줄 수 있는 Database Gateway 가 필요함 CGI (Common Gateway Interface) 이용 방법 확장 API (Netscape의 NSAPI) 이용 방법 특정 DBMS 전용 Web 서버 이용 방법

CGI를 이용한 방법 Database Gateway를 통해 데이타베이스에 저장된 데이타를 HTML 문서로 변환하는 방법 Script 화일 이용 방법 확장된 HTML (SQL-embedded HTML) 이용 방법 Function Library 이용 방법

... Database Gateway 개발 방법 CGI를 이용한 Database Gateway 시스템 구조 (1) Web 서버 DBMS 데이타베이스 엔진 관리 도구 데이타베이스

Database Gateway 개발 방법 CGI를 이용한 Database Gateway 시스템 구조 (1) 장점 단점 기존의 Web Server를 그대로 이용 가능 구현이 용이 응용 확장에 대한 신축성 단점 process 생성 및 소멸, data copy로 인한 성능 저하 반복적인 DB 연결로 인한 성능 저하 gateway process 증가로 인한 동시 서비스 수의 제한

... Database Gateway 개발 방법 CGI를 이용한 Database Gateway 시스템 구조 (2) Dispatcher Database Gateway ... Web 서버 CGI DBMS 데이타베이스 엔진 관리 도구 Dispatcher 데이타베이스

Database Gateway 개발 방법 CGI를 이용한 Database Gateway 시스템 구조 (2) 장점 단점 기존의 Web Server를 그대로 이용 가능 구현이 용이 응용 확장에 대한 신축성 데이타베이스에 대한 반복 질의의 효율적 수행 Gateway 갯수 조절에 의한 서비스 확장성 단점 process 생성 및 소멸, data copy로 인한 성능 저하

Database Gateway 개발 방법 확장 API를 이용한 Database Gateway 시스템 구조 Web 서버 데이타베이스 DBMS 관리 도구 엔진 데이타베이스

Database Gateway 개발 방법 서버 확장 API를 이용한 Database Gateway 장점 단점 process 생성 및 소멸, data copy 발생하지 않음 단점 구현이 어려움 서버 확장 API에 대한 표준 부재 특정 Web Server에 의존 다른 서버 활용 못함 응용 확장에 대한 신축성 저하

Database Gateway 개발 방법 특정 DBMS 전용 Database Gateway를 내장한 Web 서버 시스템 구조 데이타베이스 DBMS 관리 도구 엔진 데이타베이스

Database Gateway 개발 방법 특정 DBMS 전용 Database Gateway를 내장한 Web 서버 장점 단점 process 생성 및 소멸, data copy 발생 않음 Code 최적화 가능 단점 구현이 어려움 다른 Web 서버 활용 못함 응용 확장에 대한 신축성 떨어짐

Database Gateway 사례 객체지향 DBMS 지원 O2Web (O2 Technology Inc., France) Gateway 방식: CGI 이용 HTML 문서 생성: method function(o2report) 이용 InterServ (NTT Data Comm., Japan) 지원 DBMS: UniSQL Gateway 방식: DBMS 전용 Web Server HTML 문서 생성: Script 언어 이용

Database Gateway 사례 객체지향 DBMS 지원 NaviServer (NaviSoft, Inc.) 지원 DBMS: Illustra Gateway 방식: DBMS 전용 Web Server HTML 문서 생성: SQL-Embedded HTML 이용 Illustra’s Web DataBlade (Illustra Infor. Tech., Inc.) Gateway 방식: CGI 이용 HTML 문서 생성: Function Library 이용

Database Gateway 사례 관계형 DBMS 지원 Web/Genera (Yale Univ.) 지원 DBMS: Sybase Gateway 방식: CGI 이용 HTML 문서 생성: Web/Genera schema 이용 WebRex (Information Technology Solutions, Inc.) 지원 DBMS: Oracle Gateway 방식: DBMS 전용 Web Server HTML 문서 생성: ?

Database Gateway 사례 관계형 DBMS 지원 Blackie/WWWEnterprise/15 (Blackie DBGateway Tech., Inc.) 지원 DBMS: Informix Gateway 방식: CGI 이용 HTML 문서 생성: Script 언어 이용 Decoux (Oracle) 지원 DBMS: Oracle HTML 문서 생성: 확장된 HTML markup 이용

Database Gateway 사례 ODBC 지원 WebDBC (Nomad Development, Inc.) 지원 DBMS: ODBC Gateway 방식: CGI 이용 HTML 문서 생성: HTX라는 확장된 HTML markup 이용 WebBase (ExperTelligence, Inc.) Gateway 방식: DBMS 전용 Web Server HTML 문서 생성: .htf라는 확장된 HTML markup 이용

Database Gateway 사례 ODBC 지원 Commerce Builder (The Internet Factory, Inc.) 지원 DBMS: ODBC Gateway 방식: DBMS 전용 Web Server HTML 문서 생성: SMX라는 script 언어 이용 Cold Fusion (Allaire, Inc.) Gateway 방식: CGI 이용 HTML 문서 생성: DBML이라는 script 언어 이용

Database Gateway 사례 본 연구실에서 개발한 사례 KAIST Database Gateway 지원 DBMS: 오디세우스 (ODYSSEUS) - 본 연구실에서 개발한 객체지향 DBMS - Gateway 방식: proprietry 방식 HTML 문서 생성 방식: proprietry 방식

Illustra Web DataBlade Architecture Illustra Webdriver(CGI) Application pages request SQL Web Server Build SQL statement Dynamic Page HTML page with dynamic data HTML page with MISQL tag Dynamic Page CGI Envn’t Web.conf WebExplode() Web DataBlade

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

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>... display_table The 2nd application page <HTML>…<?MISQL>... ... ... ...

Illustra Web DataBlade Application page 예 select_table <HTML> <HEAD> <TITLE> Select from Table </TITLE> </HEAD> <BODY> <FORM METHOD=POST ACTION=<?MIVAR>$WEB_HOME<?MIVAR>> <?MIVAR COND=($table_name.nxst.) NAME=$table_name> <?/MIVAR> Select from table: <HR> <?MIVAR> <INPUT TYPE=text SIZE=40 NAME=table_name VALUE=$table_name> <?/MIVAR> <INPUT TYPE=submit VALUE=Select> <INPUT TYPE=hidden NAME=Mival VALUE=display_table </FORM> </BODY> </HTML>

Illustra Web DataBlade Application page 예 display_table <HTML> <HEAD> <TITLE> Display Table Data </TITLE> </HEAD> <BODY> <?MIBLOCK COND=($table_name.xst.)> <TABLE BORDER=3> <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;”> <TR> { <TD> $* </TD> } </TR> <?/MISQL> </TABLE> <?/MIBLOCK > </BODY> </HTML>

Database Gateway 예제 GSQL A simple public domain database gateway 지원 DBMS: Sybase, Oracle Gateway 방식: CGI 이용 HTML 문서 생성: proc file (SQL-specification file)이라는 script file 이용

(database application Database Gateway 예제 GSQL Database Gateway 시스템 구조 WWW server sqlmain (database application program) SQL CGI executable (shell script) DBMS HTML gsql (database gateway) Database proc file

Database Gateway 예제 CGI Executable 예제 (C Shell Script) # ! /bin/csh # set DBMS environment source setup # dispatch the sample PROC file ./gsql sample.proc $QUERY_STRING

Database Gateway 예제 GSQL PROC file 예제 HEADING <H2> Database Gateway Example Using GSQL </H2>; TEXT <HR>; TEXT <P> ...; 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;

Database Gateway 예제 GSQL 예제 PROC file의 실행 화면

결론 광범위한 멀티미디어 데이타베이스 서비스 시스템 Database 향후 발전 방향 WWW DBMS Gateway WWW + Java + CORBA+Database 통합 WWW Database Gateway DBMS