Transcript Web Programming Part2 & XML

Web Programming Part2. & XML
인공지능 연구실
목차






1.
2.
3.
4.
5.
6.
Web Programming Part.2
JSP & DB
Terminology
Concepts of XML
DOM (Document Object Model)
실습
Artificial Intelligence Laboratory
2
WEB PROGRAMMING PART.2
Artificial Intelligence Laboratory
3
지난주에 이어
 JSP에 관한 추가 학습 및 DB 연동 부분을 진행합니다.
 여기에서 지난 시간에 진행하였던 환경 구축이 되어
있어야 합니다.
 자! 재빠르게 Apache Tomcat 및 Eclipse 상황을 확인
합시다!!
Artificial Intelligence Laboratory
4
JSP
 자바 서버 페이지(Java Server Pages, JSP)는 HTML 내에 자바 코
드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹
브라우저에 돌려주는 언어이다. JavaEE 스펙 중 일부로 웹 애플
리케이션 서버에서 동작한다.
 자바 서버 페이지는 실행 시에는 자바서블릿으로 변환된 후 실행
되므로 서블릿과 거의 유사하다고 볼 수 있다. 하지만 서블릿과
는 달리 HTML 표준에 따라 작성되므로 웹 디자인하기에 편리하다
. 이와 비슷한 구조인 것인 PHP, ASP, ASP.NET 등도 있다.
 아파치 스트럿츠나 자카르타 프로젝트의 JSTL 등의 JSP 태그 라
이브러리를 사용하는 경우에는 자바 코딩 없이 태그만으로 간략
히 기술이 가능하므로 생산성을 높일 수 있다.
출처: http://ko.wikipedia.org/wiki/JSP
Artificial Intelligence Laboratory
5
JSP 기초 문법 (1/10)
 선언문(Declaration)
- 선언문은 변수나 메소드를 선언할 때 사용하며, JSP태그(<%
%>)안에서 느낌표(!)로 시작한다.
Artificial Intelligence Laboratory
6
JSP 기초 문법 (2/10)
 표현식(Expression)
- 문자열이나 변수, 또는 메소드의 값을 출력할 때 사용하며
JSP태그(<% %>)안에서 등호(=)기호로 시작한다. out.print()
메소드와 동일한 기능을 수행한다.
- 출력문 안에서 세미콜론(;)은 입력할 필요 없음.
Artificial Intelligence Laboratory
7
JSP 기초 문법 (3/10)
 스크립트 문(Scriptlets)
- JSP 스크립트 태그(<% %>)내에서는 자바 코드를 사용할 수 있
으며 일반적인 자바 코드와 마찬가지로 각 문장은 세미콜론
(;)으로 끝난다.
Artificial Intelligence Laboratory
8
JSP 기초 문법 (4/10)
 실행결과
Artificial Intelligence Laboratory
9
JSP 기초 문법 (5/10)
 식별자
-
문자나 숫자, _, $로 구성되어야 한다.
특수문자 사용불가. (_, $는 예외)
한글 식별자 사용 가능.
첫 글자는 문자만 사용 가능.
대소문자 구분.
예약어는 사용 불가.
Artificial Intelligence Laboratory
10
JSP 기초 문법 (6/10)
 자료형
자료형
크기(bit)
유효값
boolean
8
true / false
byte
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
(실수)
Artificial Intelligence Laboratory
11
JSP 기초 문법 (7/10)
 주석
주석
설명
<!–- 주석 내용 -->
HTML 형식의 주석
<%-- 주석 내용 --%>
JSP 형식의 주석
// 주석 내용
자바 형식의 한 줄 주석
/* 주석 내용 */
자바 형식의 여러 줄에 걸친 주석
Artificial Intelligence Laboratory
12
JSP 문법 (8/10)
 지시문(Directives)
- “<%@”로 시작해서 정의하는 문을 지시문이라 한다.
- 지시문은 JSP컨테이너에게 메시지를 보내는 역할을 함.
- page, include, taglib 형태가 있음.
Artificial Intelligence Laboratory
13
JSP 기초 문법 (9/10)
 지시문(Directives)
- page
<%@ 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" %>
Artificial Intelligence Laboratory
14
JSP 기초 문법 (10/10)
 지시문(Directives)
- include
<%@ include file = "포함할 파일" %>
Artificial Intelligence Laboratory
15
JSP Session (1/6)
 Session
- 망 환경에서 사용자 간 또는 컴퓨터 간의 대화를 위한 논리적
연결.
- 프로세스들 사이에서 통신하기 위해 메시지 교환을 통해 서로
인식한 이후부터 통신을 마칠 때까지의 기간.
출처: http://terms.naver.com/entry.nhn?docId=852344
Artificial Intelligence Laboratory
16
JSP Session (2/6)
 Session 의 생성
- Session은 쿠키와 달리 웹 브라우저가 아닌 서버에 값이 저장
된다.
- Session은 page 지시자의 속성을 'true' 지정함으로써 생성할
수 있다.
<%@ page session = "true" %>
Artificial Intelligence Laboratory
17
JSP Session (3/6)
 Session 기본 메소드
- setAttribute()/getAttribute()
<%
session.setAttribute("name", “AILAB");
session.setAttribute("country", "대한민국");
%>
<%
String name = (String)sesstion.getAttribute("name");
%>
 Session 종료 메소드
<%
session.invalidate();
%>
참고 사이트: http://freeair-textcube.blogspot.com/2010/11/jsp-java-session%EC%82%AC%EC%9A%A9%EB%B2%95.html
Artificial Intelligence Laboratory
18
JSP Session (4/6)
 Session 유효 시간 설정
- WEB-INF/web.xml에 <session-config> 태그 추가하여 지정.
<session-config>
<session-timeout>60</session-timeout>
</session-config>
- session.setMaxInactiveInterval() 메소드로 유효기간 지정
<%
session.setMaxInactiveInterval(60 * 60);
%>
Artificial Intelligence Laboratory
19
JSP Session (5/6)
 Session 예제
Artificial Intelligence Laboratory
20
JSP Session (6/6)
 Session 예제 실행 결과
Artificial Intelligence Laboratory
21
추가자료. Java Script (1/6)
 자바의 형태를 본 따서 만든 클라이언트 사이드 스크
립트 언어이다.
- 스크립트 언어(Script Language) - 컴퓨터 프로그래밍 언어로
서 응용 소프트웨어를 제어한다.
 홈페이지를 보다 역동적으로 꾸미는데 쓰인다.
 HTML 안에 포함 된 언어로서 인터프리터 언어이다.
- 인터프리터?
 소스 프로그램을 한번에 기계어로 변환시키는 컴파일러와는 달리
프로그램을 한 단계씩 기계어로 해석하여 실행하는 ‘언어처리
프로그램’이다.
Artificial Intelligence Laboratory
22
추가자료. Java Script (2/6)
 HTML 코드 중에 <Script type=“text/javascript"> 와
</Script>태그를 넣고 그 사이에 삽입
- ex)
<HTML>
<HEAD>
<TITLE>자바스크립트 테스트</TITLE>
<Script type="text/javascript">
document.write("Hello World!");
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>
Artificial Intelligence Laboratory
23
추가자료. Java Script (3/6)
 Java Script 의 변수선언은 기타 언어와 다르게 정수,
실수, 문자열, 배열 등의 변수의 타입을 구별하지 않
고 하나의 키워드로 정의할 수 있다.
- ex)
<HTML>
<HEAD>
<TITLE>자바스크립트 테스트</TITLE>
<Script type="text/javascript">
var i = 2;
var s = “string”;
document.write(“값 : "+ i + "<P>");
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>
Artificial Intelligence Laboratory
24
추가자료. Java Script (4/6)
 주석 사용
- ex)
<HTML>
<HEAD>
<TITLE>자바스크립트 테스트</TITLE>
<Script type="text/javascript">
//해당 구문은 변수선언 과 그 값에 대한 출력에 대한 내용임
var i = 2;
document.write(“값 : "+ i + "<P>");
/* 이것도 주석임 */
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>
Artificial Intelligence Laboratory
25
추가자료. Java Script (5/6)
 Java Script의 배열
- 변수 선언과 마찬가지로 하나의 키워드로 선언
- 타입에 관계 없이 정수, 문자열, 실수 등을 하나의 배열에 담
는 것이 가능
- ex) <HTML>
<HEAD>
<TITLE>자바스크립트 테스트</TITLE>
<Script type="text/javascript">
var a = new Array(4,”string”);
var b = [4,”string”];
document.write(a[0],a[1],b[0],b[1]);
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>
Artificial Intelligence Laboratory
26
추가자료. Java Script (6/6)
 함수선언 및 호출부분도 기타 언어와 마찬가지로 사용
- ex) 선언
function first_func() {
var i = 1;
document.write(“값 : "+ i + "<P>");
}
- ex) 호출
first_func()
Artificial Intelligence Laboratory
27
JSP & DB 연동
Artificial Intelligence Laboratory
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
Artificial Intelligence Laboratory
29
MySQL 설치 (1/20)

http://www.mysql.com/downloads

http://borame.cs.pusan.ac.kr/ai_home/lecture/java2012/mysqlinstaller-5.5.24.0.msi
Artificial Intelligence Laboratory
30
MySQL 설치 (2/20)
Artificial Intelligence Laboratory
31
MySQL 설치 (3/20)
Artificial Intelligence Laboratory
32
MySQL 설치 (4/20)
Artificial Intelligence Laboratory
33
MySQL 설치 (5/20)
Artificial Intelligence Laboratory
34
MySQL 설치 (6/20)
Artificial Intelligence Laboratory
35
MySQL 설치 (7/20)
Artificial Intelligence Laboratory
36
MySQL 설치 (8/20)
Artificial Intelligence Laboratory
37
MySQL 설치 (9/20)
Artificial Intelligence Laboratory
38
MySQL 설치 (10/20)
Artificial Intelligence Laboratory
39
MySQL 설치 (11/20)
Artificial Intelligence Laboratory
40
MySQL 설치 (12/20)
Artificial Intelligence Laboratory
41
MySQL 설치 (13/20)
Artificial Intelligence Laboratory
42
MySQL 설치 (14/20)
Password: 1234
Artificial Intelligence Laboratory
43
MySQL 설치 (15/20)
Artificial Intelligence Laboratory
44
MySQL 설치 (16/20)
Artificial Intelligence Laboratory
45
MySQL 설치 (17/20)
Artificial Intelligence Laboratory
46
MySQL 설치 (18/20)
 환경변수 설정
Artificial Intelligence Laboratory
47
MySQL 설치 (19/20)
 환경변수 설정
Artificial Intelligence Laboratory
48
MySQL 설치 (19/20)
 환경변수 설정
Artificial Intelligence Laboratory
49
MySQL 설치 (20/20)
 환경변수 설정
- 시스템 변수 Path에 MySQL 설치 경로 추가
- 예) C:\Program Files\MySQL\MySQL Server 5.5\bin;
Artificial Intelligence Laboratory
50
Eclipse와 MySQL 연동 환경 구축 (1/7)
 아직 끝나지 않았답니다. T-T
 Connector/J을 다운 받습니다.
 http://www.mysql.com/downloads/connector/j/
Artificial Intelligence Laboratory
51
Eclipse와 MySQL 연동 환경 구축 (2/7)
Artificial Intelligence Laboratory
52
Eclipse와 MySQL 연동 환경 구축 (3/7)
 다운 받은 파일을 압축을 풀어야겠죠?
 압축을 푼 폴더를 jre7\lib\ext\ 경로에 복사합니다.
- ex. C:\Program Files\Java\jre7\lib\ext
Artificial Intelligence Laboratory
53
Eclipse와 MySQL 연동 환경 구축 (4/7)
 Eclipse를 실행합니다.
 우리가 DB를 연동할 JSP
프로젝트 선택한 후
Properties 선택!
Artificial Intelligence Laboratory
54
Eclipse와 MySQL 연동 환경 구축 (5/7)
⓶
⓵
⓷
Artificial Intelligence Laboratory
55
Eclipse와 MySQL 연동 환경 구축 (6/7)
 조금 전 Connector를 복사한 폴더 선택합니다.
 mysql-connector-java-5.1.20-bin.jar 선택 후 열기.
Artificial Intelligence Laboratory
56
Eclipse와 MySQL 연동 환경 구축 (6/7)
jar 파일 확인 후 OK!
Artificial Intelligence Laboratory
57
Eclipse와 MySQL 연동 환경 구축 (7/7)
 Apache Tomcat의 lib 폴더에 mysql-connector-java5.1.20-bin.jar 복사합니다.
Artificial Intelligence Laboratory
58
DB 생성 예제 (1/9)
 MySQL Workbench를 실행 후 New Connection 선택
Artificial Intelligence Laboratory
59
DB 생성 예제 (2/9)
Artificial Intelligence Laboratory
60
DB 생성 예제 (3/9)
더블 클릭!!
Artificial Intelligence Laboratory
61
DB 생성 예제 (4/9)
Artificial Intelligence Laboratory
62
DB 생성 예제 (5/9)
Artificial Intelligence Laboratory
63
DB 생성 예제 (6/9)
Artificial Intelligence Laboratory
64
DB 생성 예제 (7/9)
Artificial Intelligence Laboratory
65
DB 생성 예제 (8/9)
Artificial Intelligence Laboratory
66
DB 생성 예제 (9/9)
Artificial Intelligence Laboratory
67
JSP & DB 연동 테스트
 test.jsp
Artificial Intelligence Laboratory
68
결과 화면
Artificial Intelligence Laboratory
69
TERMINOLOGY
Artificial Intelligence Laboratory
70
용어 정리
 브라우저
-
World Wide Web(www)에서 모든 정보를 볼 수 있도록 해 주는 응용
프로그램.
-
Internet Explorer와 Chrome, Firefox등.
Artificial Intelligence Laboratory
71
용어 정리

Markup Language
- Markup 정보를 표현하는 언어 .
 Markup : 문서처리를 지원하기 위해 문서에 추가되는 정보.
- 주어진 형식에 따라 작성한 후, 이를 인식할 수 있는 reader 프로그
램을 이용하여 이를 표현.
- 종류는 SGML, HTML, XML, XHTML 등이 있음.
Markup Language
SGML
HTML
XML
Artificial Intelligence Laboratory
72
CONCEPTS OF XML
Artificial Intelligence Laboratory
73
XML 이란?
 EXtensible Markup Language.
 구조화된 데이터 형식을 제공하는 메타 표시 언어
Artificial Intelligence Laboratory
74
XML 개발 배경
• HTML은 데이터를 브라우저에 표현하는 방법을 지정하
는 태그의 집합.
• 브라우저는 HTML 페이지를 있는 그대로 해석해서 화면
에 표현.
Artificial Intelligence Laboratory
75
XML 개발 배경
 태그를 자유롭게 정의할 수 있게 되면, 태그와 속성
이름을 데이터를 설명하는 의미 있는 이름으로 지을
수 있음.
 순수한 데이터를 표현 정보로부터 분리해 내는 것이
XML 개발된 핵심 이유.
Artificial Intelligence Laboratory
76
XML 설계 목표










XML은 인터넷 상에서 바로 사용될 수 있도록 한다.
XML은 다양한 응용들을 지원할 수 있도록 한다.
XML은 SGML과 호환성이 있어야 한다.
XML 문서들을 처리하는 프로그램의 작성이 쉽도록 한
다.
XML에서의 선택적 특성을 최소화 한다.
XML 문서들은 사람이 이해하기 쉽고 명확해야 한다.
XML 설계는 신속히 준비되어야 한다.
XML의 설계는 간결하고 형식을 갖추도록 한다.
XML 문서는 생성하기 쉽도록 한다.
XML Markup의 간결함은 중요하게 다루지 않는다.
Artificial Intelligence Laboratory
77
XML 문서의 구조
Artificial Intelligence Laboratory
78
XML 특징
 내용을 구체적으로 선언할 수 있음.
 여러 플랫폼 간에 더 의미 있는 검색 결과를 가져올
수 있음.
 웹 기반의 데이터 보기 및 처리 응용 프로그램에 적용
가능.
Artificial Intelligence Laboratory
79
XML 장점
 HTML: 디자인을 위해 추가된 이미지나 클라이언트 측
코드 등은 변하지 않는다 해도 웹 서버에서는
이 모두를 데이터와 혼합하여 다시 만들어 보내
야 함.
 XML: 클라이언트는 변경된 데이터만 전달받고, 앞서
다운로드 받은 스타일 시트를 계속 사용할 수 있
음.
-> 따라서 웹 서버의 부하를 줄일 수 있고, 네트워크 트래픽을 감
소시키고, 전체적인 웹 애플리케이션의 성능이 향상됨.
Artificial Intelligence Laboratory
80
XML 사용 이유
 Web server와 Web page 내용을 양방향으로 전달하고
사용할 수 있음.
 DB와 연동이 가능.
 Web page의 특정 내용에 대한 search가 가능.
 -> 지능형 검색, 데이터 교환 등 인터넷에서 사용자가
요구하는 사항을 수행할 수 있음.
Artificial Intelligence Laboratory
81
XSL
 XML 문서의 스타일시트를 만드는 기술.
 XML 문서는 데이터만 가지고 있음. -> 시각적으로 표
시하거나 다른 종류의 문서로 변화하기 위해 포맷팅
처리가 필요. -> 이를 위해 XSL을 개발하여 사용.
 XSL에서는 XML 문서 내부에서 데이터의 위치를 지정하
는데 XPath라는 기술을 사용한다.
Artificial Intelligence Laboratory
82
XPath
• XPath는 XML 문서의 part를 정의하기 위한 syntax.
• XPath는 XML 문서 내부를 검색하기 위한 path
expression을 사용.
• XPath Expression
Path Expression0
Description
/
Root node로부터 선택
@
Attribute 선택
/order/date
Order의 자식 중 date 선택
/order[@num =‘312597’]
num 속성 값이 312597 인 order 선택
Artificial Intelligence Laboratory
83
DOM
(DOCUMENT OBJECT MODEL)
Artificial Intelligence Laboratory
84
DOM 이란?
 Document Object Model.
 XML을 기반으로 만들어진 표준.
 XML 문서에 동적으로 접근하고 변경할 수 있는 프로그
래밍 인터페이스.
 DOM을 이용해서 XML 문서의 내용을 읽고, 변경하며,
새 XML문서를 만드는 애플리케이션을 작성할 수 있음.
 XML문서를 처리하는 많은 방법들이 존재하지만 거의
이 (DOM parsing)방법을 이용하여 parsing.
Artificial Intelligence Laboratory
85
DOM 동작 구조
 애플리케이션은 DOM 파서를 통해 XML문서에 접근.
 DOM 파서는 애플리케이션의 요청을 받아 XML 문서의
전체 내용을 읽음 -> 메모리 상에 트리 구조를 만듦 > 애플리케이션은 메모리 상에 만들어진 XML 문서 트
리를 통해 XML 문서의 내용에 접근.
DOM 파서가 실제 사용되는 방식
애플리케이션
XML 파서
XML 문서
Artificial Intelligence Laboratory
86
DOM 동작 구조
Document Node
NodeList
Element Node
(MEMBER)
NamedNodemap
Attr Node
(MEMBER)
NodeList
Text Node
(“홍길동”)
Artificial Intelligence Laboratory 87
DOM과 Xpath 비교 (1/3)
DOM
공통점
XPath
XML문서를 다룸
정의
Object Model
Language for addressing parts
of an XML document
내용
XML문서의 구조를 tree형태
로 메모리에 상주시킴
XML문서의 어떠한 부분에 접근
하기 위한 경로를 지정해주는
것
기능
XML 수정
탐색
사용
-문서의 구조를 모를 때
-문서의 크기가 작을 때
-문서의 구조를 잘 알고 있을
때
-문서의 크기 상관없음
캐쉬되지 않은 정방향
(XmlReader)
임의 access가 필요한 경우
(정해진 표현 식 : (@, /, //
etc..) Artificial Intelligence Laboratory
탐색방법
88
DOM과 Xpath 비교 (2/3)
 예)item.xml에서 DOM 탐색 vs. XPath탐색
<root>
<title attr1="test1">
<item attr="test">item1</item>
<item>item2</item>
<item>item3</item>
</title>
<title2>test</title2>
</root>
Artificial Intelligence Laboratory
89
DOM과 Xpath 비교 (3/3)
DOM
XPath
Title의 test1의 데이터 가져오기
Obj.getElementsByTagName("title")[0
].getAttribute(“test1“)
xmlObj.selectSingleNode("root/title
“)
xmlObj.selectSingleNode("//title")
xmlObj.selectNodes("/root/title/ite
m[@attr1=‘test1']")
title 하위태그로 있는 item 태그들을 배열로 받기
mlObj.getElementsByTagName("title")
[0].childNodes
xmlObj.selectNodes("/root/title/ite
m[='item2']“)
Artificial Intelligence Laboratory
90
DOM XML Parser 예제 (1/3)
 ReadXMLFile.java
Artificial Intelligence Laboratory
91
DOM XML Parser 예제 (2/3)
 ExampleXML.jsp
Artificial Intelligence Laboratory
92
DOM XML Parser 예제 (3/3)
 Console 출력 결과
Artificial Intelligence Laboratory
93
실습
Artificial Intelligence Laboratory
94