Web Programming Part2. & XML

Web Programming Part2. & XML

인공지능 연구실

Artificial Intelligence Laboratory

목차

1. Web Programming Part.2 2. JSP & DB 3. Terminology 4. Concepts of XML 5. DOM (Document Object Model) 6. 실습

2


WEB PROGRAMMING PART.2

3


지난주에 이어

JSP 에 관한 추가 학습 및 DB 연동 부분을 진행합니다 . 여기에서 지난 시간에 진행하였던 환경 구축이 되어

있어야 합니다 . 자 ! 재빠르게 Apache Tomcat 및 Eclipse 상황을

확인합시다 !!

4


JSP

자바 서버 페이지 (Java Server Pages, JSP) 는 HTML 내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 언어이다 . JavaEE 스펙 중 일부로 웹 애플리케이션 서버에서 동작한다 .

자바 서버 페이지는 실행 시에는 자바서블릿으로 변환된 후 실행되므로 서블릿과 거의 유사하다고 볼 수 있다 . 하지만 서블릿과는 달리 HTML 표준에 따라 작성되므로 웹 디자인하기에 편리하다 . 이와 비슷한 구조인 것인 PHP, ASP, ASP.NET 등도 있다 .

아파치 스트럿츠나 자카르타 프로젝트의 JSTL 등의 JSP 태그 라이브러리를 사용하는 경우에는 자바 코딩 없이 태그만으로 간략히 기술이 가능하므로 생산성을 높일 수 있다 .

출처 : http://ko.wikipedia.org/wiki/JSP5

http://ko.wikipedia.org/wiki/JSP


JSP 기초 문법 (1/10) 선언문 (Declaration)

- 선언문은 변수나 메소드를 선언할 때 사용하며 , JSP 태그 (<% %>) 안에서 느낌표 (!) 로 시작한다 .

6


JSP 기초 문법 (2/10) 표현식 (Expression)

- 문자열이나 변수 , 또는 메소드의 값을 출력할 때 사용하며 JSP태그 (<% %>) 안에서 등호 (=) 기호로 시작한다 . out.print() 메소드와 동일한 기능을 수행한다 .

- 출력문 안에서 세미콜론 (;) 은 입력할 필요 없음 .

7


JSP 기초 문법 (3/10) 스크립트 문 (Scriptlets)

- JSP 스크립트 태그 (<% %>) 내에서는 자바 코드를 사용할 수 있으며 일반적인 자바 코드와 마찬가지로 각 문장은 세미콜론 (;)으로 끝난다 .

8


JSP 기초 문법 (4/10) 실행결과

9


JSP 기초 문법 (5/10) 식별자

- 문자나 숫자 , _, $ 로 구성되어야 한다 .- 특수문자 사용불가 . (_, $ 는 예외 )- 한글 식별자 사용 가능 .- 첫 글자는 문자만 사용 가능 .- 대소문자 구분 .- 예약어는 사용 불가 .

10


JSP 기초 문법 (6/10) 자료형

11

자료형 크기 (bit) 유효값

boolean 8 true / falsebyte 8 -128 ~ 127 ( 정수 )char 16 유니코드 문자

short 16 -32768 ~ 32767 ( 정수 )int 32 -2147483648 ~ 2147483647 ( 정수 )

long 64 -9223372036854775808 ~ 9223372036854775807 ( 정수 )

float 32 음수 : -3.402823E38 ~ -1.401298E-45 ( 실수 )양수 : 1.401298E-45 ~ 3.402823E38 ( 실수 )

double 64 음수 : -1.79769313486232E308 ~ -4.94065645841247E-324 ( 실수 )양수 : 4.94065645841247E-324 ~ 1.79769313486232E308 ( 실수 )


JSP 기초 문법 (7/10) 주석

12

주석 설명

<!–- 주석 내용 --> HTML 형식의 주석

<%-- 주석 내용 --%> JSP 형식의 주석

// 주석 내용 자바 형식의 한 줄 주석

/* 주석 내용 */ 자바 형식의 여러 줄에 걸친 주석


JSP 문법 (8/10) 지시문 (Directives)

- “<%@” 로 시작해서 정의하는 문을 지시문이라 한다 . - 지시문은 JSP 컨테이너에게 메시지를 보내는 역할을 함 .- page, include, taglib 형태가 있음 .

13


<%@ page 속성 1 = " 속성값 1" 속성 2 = " 속성값 2" ... %>

<%@ page contentType = "text/html;charset = utf-8" %><%@ page import = "java.util.*, java.io.*, javax.sql.*" %><%@ page import = "java.util.*" errorPage = "error.jsp" %>

JSP 기초 문법 (9/10) 지시문 (Directives)

- page

14


JSP 기초 문법 (10/10) 지시문 (Directives)

- include

15

<%@ include file = " 포함할 파일 " %>


JSP Session (1/6) Session

- 망 환경에서 사용자 간 또는 컴퓨터 간의 대화를 위한 논리적 연결 .

- 프로세스들 사이에서 통신하기 위해 메시지 교환을 통해 서로 인식한 이후부터 통신을 마칠 때까지의 기간 .

출처 : http://terms.naver.com/entry.nhn?docId=852344

16

http://terms.naver.com/entry.nhn?docId=852344


JSP Session (2/6) Session 의 생성

- Session 은 쿠키와 달리 웹 브라우저가 아닌 서버에 값이 저장된다 .

- Session 은 page 지시자의 속성을 'true' 지정함으로써 생성할 수 있다 .

17

<%@ page session = "true" %>


JSP Session (3/6) Session 기본 메소드

- setAttribute()/getAttribute()

Session 종료 메소드

참고 사이트 : http://freeair-textcube.blogspot.com/2010/11/jsp-java-session-%EC%82%AC%EC%9A%A9%EB%B2%95.html

18

<% session.setAttribute("name", “AILAB"); session.setAttribute("country", " 대한민국 ");%> <% String name = (String)sesstion.getAttribute("name");%>

<% session.invalidate();%>

http://freeair-textcube.blogspot.com/2010/11/jsp-java-session-%EC%82%AC%EC%9A%A9%EB%B2%95.html

http://freeair-textcube.blogspot.com/2010/11/jsp-java-session-%EC%82%AC%EC%9A%A9%EB%B2%95.html


JSP Session (4/6) Session 유효 시간 설정

- WEB-INF/web.xml 에 <session-config> 태그 추가하여 지정 .

- session.setMaxInactiveInterval() 메소드로 유효기간 지정

19

<session-config> <session-timeout>60</session-timeout></session-config>

<% session.setMaxInactiveInterval(60 * 60);%>


JSP Session (5/6) Session 예제

20


JSP Session (6/6) Session 예제 실행 결과

21


추가자료 . Java Script (1/6)

자바의 형태를 본 따서 만든 클라이언트 사이드 스크립트 언어이다 .- 스크립트 언어 (Script Language) - 컴퓨터 프로그래밍

언어로서 응용 소프트웨어를 제어한다 . 홈페이지를 보다 역동적으로 꾸미는데 쓰인다 . HTML 안에 포함 된 언어로서 인터프리터 언어이다 .

- 인터프리터 ? 소스 프로그램을 한번에 기계어로 변환시키는 컴파일러와는 달리

프로그램을 한 단계씩 기계어로 해석하여 실행하는 ‘언어처리 프로그램’이다 .

22


추가자료 . Java Script (2/6) HTML 코드 중에 <Script type=“text/javascript">

와 </Script> 태그를 넣고 그 사이에 삽입- ex)

23

<HTML><HEAD><TITLE> 자바스크립트 테스트 </TITLE><Script type="text/javascript">

document.write("Hello World!"); </SCRIPT></HEAD><BODY></BODY></HTML>


추가자료 . Java Script (3/6) Java Script 의 변수선언은 기타 언어와 다르게 정수 ,

실수 , 문자열 , 배열 등의 변수의 타입을 구별하지 않고 하나의 키워드로 정의할 수 있다 .- ex)

24


var i = 2;var s = “string”;document.write(“ 값 : "+ i + "<P>");

</SCRIPT></HEAD><BODY></BODY></HTML>


추가자료 . Java Script (4/6) 주석 사용

- ex)

25


// 해당 구문은 변수선언 과 그 값에 대한 출력에 대한 내용임var i = 2;document.write(“ 값 : "+ i + "<P>");/* 이것도 주석임 */



추가자료 . Java Script (5/6) Java Script 의 배열

- 변수 선언과 마찬가지로 하나의 키워드로 선언- 타입에 관계 없이 정수 , 문자열 , 실수 등을 하나의 배열에 담는

것이 가능- ex)

26


var a = new Array(4,”string”);var b = [4,”string”];document.write(a[0],a[1],b[0],b[1]);



추가자료 . Java Script (6/6) 함수선언 및 호출부분도 기타 언어와 마찬가지로 사용

- ex) 선언

- ex) 호출

27

function first_func() {var i = 1;document.write(“ 값 : "+ i + "<P>");}

first_func()


JSP & DB 연동

28


MySQL MySQL 은 다중 스레드 , 다중 사용자 형식의 구조질의어 형식의

데이터베이스 관리 시스템 (SQL DBMS) 이다 . MySQL AB 가 관리 및 지원하고 있으며 , Qt 처럼 이중 라이선스가 적용된다 . 하나의 옵션은 GPL이며 , GPL 이외의 라이선스로 적용하려는 경우 전통적인 지적재산권 라이선스의 적용을 받는다 .

MySQL AB 는 MySQL 라이선스에 의한 판매 지원 및 서비스 계약 시스템을 개발 , 유지한다 . 그리고 또한 인터넷을 통한 전 세계의 협력자들을 고용한다 . MySQL AB 는 David Axmark, Allan Larsson 그리고 Michael "Monty" Widenius 에 의해 설립되었다 .

MySQL AB 는 또한 MAX DB 라고 불리는 MySQL AB 와는 기반코드가 다른 데이터베이스 관리 시스템을 판매하고 있다 .

일부에서는 예전 SQL 의 이니셜인 시퀄 (SEQUEL:Structured English Query Language) 이라고 발음하여 마이시퀄이라고도 부르며 , 대한민국에서는 마이에스큐엘로 더 많이 발음된다 .

출처 : http://ko.wikipedia.org/wiki/Mysql

29

http://ko.wikipedia.org/wiki/Mysql


MySQL 설치 (1/20) http://www.mysql.com/downloads

http://borame.cs.pusan.ac.kr/ai_home/lecture/java2012/mysql-installer-5.5.24.0.msi

30

http://www.mysql.com/downloads




MySQL 설치 (2/20)

31


MySQL 설치 (3/20)

32


MySQL 설치 (4/20)

33


MySQL 설치 (5/20)

34


MySQL 설치 (6/20)

35


MySQL 설치 (7/20)

36


MySQL 설치 (8/20)

37


MySQL 설치 (9/20)

38


MySQL 설치 (10/20)

39



40



41



42



43

Password: 1234



44



45



46


MySQL 설치 (18/20) 환경변수 설정

47



48



49



- 시스템 변수 Path 에 MySQL 설치 경로 추가- 예 ) C:\Program Files\MySQL\MySQL Server 5.5\bin;

50


Eclipse 와 MySQL 연동 환경 구축 (1/7) 아직 끝나지 않았답니다 . T-T Connector/J 을 다운 받습니다 . http://www.mysql.com/downloads/connector/j/

51

http://www.mysql.com/downloads/connector/j/


Eclipse 와 MySQL 연동 환경 구축 (2/7)

52


Eclipse 와 MySQL 연동 환경 구축 (3/7) 다운 받은 파일을 압축을 풀어야겠죠 ? 압축을 푼 폴더를 jre7\lib\ext\ 경로에 복사합니다 .

- ex. C:\Program Files\Java\jre7\lib\ext

53


Eclipse 와 MySQL 연동 환경 구축 (4/7) Eclipse 를 실행합니다 . 우리가 DB 를 연동할

JSP 프로젝트 선택한 후 Properties 선택 !

54



55

⓵

⓶

⓷


Eclipse 와 MySQL 연동 환경 구축 (6/7) 조금 전 Connector 를 복사한 폴더 선택합니다 . mysql-connector-java-5.1.20-bin.jar 선택 후 열기 .

56



57

jar 파일 확인 후 OK!



58

Apache Tomcat 의 lib 폴더에 mysql-connector-java-5.1.20-bin.jar 복사합니다 .


DB 생성 예제 (1/9) MySQL Workbench 를 실행 후 New Connection

선택

59


DB 생성 예제 (2/9)

60



61

더블 클릭 !!



62



63



64



65



66



67


JSP & DB 연동 테스트

test.jsp

68


결과 화면

69


TERMINOLOGY

70


용어 정리

브라우저

- World Wide Web(www) 에서 모든 정보를 볼 수 있도록 해 주는

응용프로그램 .

- Internet Explorer 와 Chrome, Firefox 등 .

71


용어 정리

Markup Language- Markup 정보를 표현하는 언어 .

Markup : 문서처리를 지원하기 위해 문서에 추가되는 정보 .

- 주어진 형식에 따라 작성한 후 , 이를 인식할 수 있는 reader 프로그램을 이용하여 이를 표현 .

- 종류는 SGML, HTML, XML, XHTML 등이 있음 .

72

SGML

Markup Lan-guage

XML

HTML


CONCEPTS OF XML

73


XML 이란 ?

EXtensible Markup Language. 구조화된 데이터 형식을 제공하는 메타 표시 언어

74


XML 개발 배경

• HTML 은 데이터를 브라우저에 표현하는 방법을

지정하는 태그의 집합 .• 브라우저는 HTML 페이지를 있는 그대로 해석해서

화면에 표현 .

75


XML 개발 배경

태그를 자유롭게 정의할 수 있게 되면 , 태그와 속성 이름을 데이터를 설명하는 의미 있는 이름으로 지을 수 있음 .

순수한 데이터를 표현 정보로부터 분리해 내는 것이 XML 개발된 핵심 이유 .

76


XML 설계 목표

XML 은 인터넷 상에서 바로 사용될 수 있도록 한다 . XML 은 다양한 응용들을 지원할 수 있도록 한다 . XML 은 SGML 과 호환성이 있어야 한다 . XML 문서들을 처리하는 프로그램의 작성이 쉽도록 한

다 . XML 에서의 선택적 특성을 최소화 한다 . XML 문서들은 사람이 이해하기 쉽고 명확해야 한다 . XML 설계는 신속히 준비되어야 한다 . XML 의 설계는 간결하고 형식을 갖추도록 한다 . XML 문서는 생성하기 쉽도록 한다 . XML Markup 의 간결함은 중요하게 다루지 않는다 .

77


XML 문서의 구조

78


XML 특징

내용을 구체적으로 선언할 수 있음 . 여러 플랫폼 간에 더 의미 있는 검색 결과를 가져올 수

있음 . 웹 기반의 데이터 보기 및 처리 응용 프로그램에 적용

가능 .

79


XML 장점

HTML: 디자인을 위해 추가된 이미지나 클라이언트 측 코드 등은 변하지 않는다 해도 웹 서버에서는

이 모두를 데이터와 혼합하여 다시 만들어 보내 야 함 . XML: 클라이언트는 변경된 데이터만 전달받고 , 앞서

다운로드 받은 스타일 시트를 계속 사용할 수 있 음 .

-> 따라서 웹 서버의 부하를 줄일 수 있고 , 네트워크 트래픽을 감소시키고 , 전체적인 웹 애플리케이션의 성능이 향상됨 .

80


XML 사용 이유

Web server 와 Web page 내용을 양방향으로 전달하고 사용할 수 있음 .

DB 와 연동이 가능 . Web page 의 특정 내용에 대한 search 가 가능 .

-> 지능형 검색 , 데이터 교환 등 인터넷에서 사용자가 요구하는 사항을 수행할 수 있음 .

81


XSL

XML 문서의 스타일시트를 만드는 기술 . XML 문서는 데이터만 가지고 있음 . -> 시각적으로

표시하거나 다른 종류의 문서로 변화하기 위해 포맷팅 처리가 필요 . -> 이를 위해 XSL 을 개발하여 사용 .

XSL 에서는 XML 문서 내부에서 데이터의 위치를 지정하는데 XPath 라는 기술을 사용한다 .

82


XPath

• XPath 는 XML 문서의 part 를 정의하기 위한 syntax.• XPath 는 XML 문서 내부를 검색하기 위한 path ex-

pression 을 사용 .• XPath Expression

83

Path Expression0 Description/ Root node 로부터 선택

@ Attribute 선택

/order/date Order 의 자식 중 date 선택

/order[@num =‘312597’]

num 속성 값이 312597 인 order 선택


DOM(DOCUMENT OBJECT MODEL)

84


DOM 이란 ?

Document Object Model. XML 을 기반으로 만들어진 표준 . XML 문서에 동적으로 접근하고 변경할 수 있는

프로그래밍 인터페이스 . DOM 을 이용해서 XML 문서의 내용을 읽고 , 변경하

며 , 새 XML 문서를 만드는 애플리케이션을 작성할 수 있음 .

XML 문서를 처리하는 많은 방법들이 존재하지만 거의 이 (DOM parsing)방법을 이용하여 parsing.

85


DOM 동작 구조

애플리케이션은 DOM 파서를 통해 XML 문서에 접근 . DOM 파서는 애플리케이션의 요청을 받아 XML 문서의 전체 내용을 읽음 -> 메모리 상에 트리 구조를 만듦 -> 애플리케이션은 메모리 상에 만들어진 XML 문서 트리를 통해 XML 문서의 내용에 접근 .

86

XML 파서 XML 문서애플리케이션

DOM 파서가 실제 사용되는 방식


DOM 동작 구조

87

Document Node

NodeList

Element Node

(MEMBER)NamedNodem

ap

Attr Node(MEMBER)

NodeList

Text Node(“홍길동” )


DOM 과 Xpath 비교 (1/3)

88

DOM XPath공통점 XML 문서를 다룸

정의 Object Model Language for addressing parts of an XML document

내용XML 문서의 구조를 tree형태로 메모리에 상주시킴

XML 문서의 어떠한 부분에 접근하기 위한 경로를 지정해주는 것

기능 XML 수정 탐색

사용 - 문서의 구조를 모를 때 - 문서의 크기가 작을 때

- 문서의 구조를 잘 알고 있을 때- 문서의 크기 상관없음

탐색방법 캐쉬되지 않은 정방향(XmlReader)

임의 access 가 필요한 경우( 정해진 표현 식 : (@, /, // etc..)


DOM 과 Xpath 비교 (2/3) 예 )item.xml 에서 DOM 탐색 vs. XPath탐색

89

<root> <title attr1="test1"> <item attr="test">item1</item> <item>item2</item> <item>item3</item> </title> <title2>test</title2></root>


DOM 과 Xpath 비교 (3/3)

90

DOM XPathTitle 의 test1 의 데이터 가져오기

Obj.getElementsByTagName("title")[0].getAttribute(“test1“)

xmlObj.selectSingleNode("root/ti-tle“)

xmlObj.selectSingleNode("//title")

xmlObj.selectNodes("/root/title/item[@attr1=‘test1']")

title 하위태그로 있는 item 태그들을 배열로 받기

mlObj.getElementsByTagName("title")[0].childNodes

xmlObj.selectNodes("/root/title/item[='item2']“)


DOM XML Parser 예제 (1/3) ReadXMLFile.-

java

91


DOM XML Parser 예제 (2/3) ExampleXML.jsp

92


DOM XML Parser 예제 (3/3) Console 출력 결과

93


실습

94

Documents

Web Programming Part2. & XML