Web Programming Part2. & XML 인공지능 연구실
목차 1. Web Programming Part.2 2. JSP & DB 3. Terminology 4. Concepts of XML 5. DOM (Document Object Model) 6. 실습
Web Programming Part.2
지난주에 이어 JSP에 관한 추가 학습 및 DB 연동 부분을 진행합니다. 여기에서 지난 시간에 진행하였던 환경 구축이 되어 있어야 합니다. 자! 재빠르게 Apache Tomcat 및 Eclipse 상황을 확인합시다!!
JSP 자바 서버 페이지(Java Server Pages, JSP)는 HTML 내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 언어이다. JavaEE 스펙 중 일부로 웹 애플리케이션 서버에서 동작한다. 자바 서버 페이지는 실행 시에는 자바서블릿으로 변환된 후 실행되므로 서블릿과 거의 유사하다고 볼 수 있다. 하지만 서블릿과는 달리 HTML 표준에 따라 작성되므로 웹 디자인하기에 편리하다. 이와 비슷한 구조인 것인 PHP, ASP, ASP.NET 등도 있다. 아파치 스트럿츠나 자카르타 프로젝트의 JSTL 등의 JSP 태그 라이브러리를 사용하는 경우에는 자바 코딩 없이 태그만으로 간략히 기술이 가능하므로 생산성을 높일 수 있다. 출처: http://ko.wikipedia.org/wiki/JSP
JSP 기초 문법 (1/10) 선언문(Declaration)
JSP 기초 문법 (2/10) 표현식(Expression) 문자열이나 변수, 또는 메소드의 값을 출력할 때 사용하며 JSP태그(<% %>)안에서 등호(=)기호로 시작한다. out.print() 메소드와 동일한 기능을 수행한다. 출력문 안에서 세미콜론(;)은 입력할 필요 없음.
JSP 기초 문법 (3/10) 스크립트 문(Scriptlets)
JSP 기초 문법 (4/10) 실행결과
JSP 기초 문법 (5/10) 식별자 문자나 숫자, _, $로 구성되어야 한다. 특수문자 사용불가. (_, $는 예외) 한글 식별자 사용 가능. 첫 글자는 문자만 사용 가능. 대소문자 구분. 예약어는 사용 불가.
JSP 기초 문법 (6/10) 자료형 자료형 크기(bit) 유효값 boolean 8 true / false byte -128 ~ 127 (정수) char 16 유니코드 문자 short -32768 ~ 32767 (정수) int 32 -2147483648 ~ 2147483647 (정수) long 64 -9223372036854775808 ~ 9223372036854775807 (정수) float 음수: -3.402823E38 ~ -1.401298E-45 (실수) 양수: 1.401298E-45 ~ 3.402823E38 (실수) double 음수: -1.79769313486232E308 ~ -4.94065645841247E-324 (실수) 양수: 4.94065645841247E-324 ~ 1.79769313486232E308 (실수)
JSP 기초 문법 (7/10) 주석 주석 설명 <!–- 주석 내용 --> HTML 형식의 주석 <%-- 주석 내용 --%> JSP 형식의 주석 // 주석 내용 자바 형식의 한 줄 주석 /* 주석 내용 */ 자바 형식의 여러 줄에 걸친 주석
JSP 문법 (8/10) 지시문(Directives) “<%@”로 시작해서 정의하는 문을 지시문이라 한다. page, include, taglib 형태가 있음.
JSP 기초 문법 (9/10) 지시문(Directives) page <%@ page contentType = "text/html;charset = utf-8" %> <%@ page import = "java.util.*, java.io.*, javax.sql.*" %> <%@ page import = "java.util.*" errorPage = "error.jsp" %>
JSP 기초 문법 (10/10) 지시문(Directives) include <%@ include file = "포함할 파일" %>
JSP Session (1/6) Session 망 환경에서 사용자 간 또는 컴퓨터 간의 대화를 위한 논리적 연결. 프로세스들 사이에서 통신하기 위해 메시지 교환을 통해 서로 인식한 이후부터 통신을 마칠 때까지의 기간. 출처: http://terms.naver.com/entry.nhn?docId=852344
<%@ page session = "true" %> JSP Session (2/6) Session 의 생성 Session은 쿠키와 달리 웹 브라우저가 아닌 서버에 값이 저장된다. Session은 page 지시자의 속성을 'true' 지정함으로써 생성할 수 있다. <%@ page session = "true" %>
JSP Session (3/6) Session 기본 메소드 Session 종료 메소드 setAttribute()/getAttribute() Session 종료 메소드 참고 사이트: http://freeair-textcube.blogspot.com/2010/11/jsp-java-session-%EC%82%AC%EC%9A%A9%EB%B2%95.html <% session.setAttribute("name", “AILAB"); session.setAttribute("country", "대한민국"); %> String name = (String)sesstion.getAttribute("name"); %> <% session.invalidate(); %>
JSP Session (4/6) Session 유효 시간 설정 WEB-INF/web.xml에 <session-config> 태그 추가하여 지정. session.setMaxInactiveInterval() 메소드로 유효기간 지정 <session-config> <session-timeout>60</session-timeout> </session-config> <% session.setMaxInactiveInterval(60 * 60); %>
JSP Session (5/6) Session 예제
JSP Session (6/6) Session 예제 실행 결과
추가자료. Java Script (1/6) 자바의 형태를 본 따서 만든 클라이언트 사이드 스크립트 언어이다. 스크립트 언어(Script Language) - 컴퓨터 프로그래밍 언어로서 응용 소프트웨어를 제어한다. 홈페이지를 보다 역동적으로 꾸미는데 쓰인다. HTML 안에 포함 된 언어로서 인터프리터 언어이다. 인터프리터? 소스 프로그램을 한번에 기계어로 변환시키는 컴파일러와는 달리 프로그램을 한 단계씩 기계어로 해석하여 실행하는 ‘언어처리 프로그램’이다.
추가자료. 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>
추가자료. 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>
추가자료. 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>
추가자료. 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>
추가자료. Java Script (6/6) 함수선언 및 호출부분도 기타 언어와 마찬가지로 사용 ex) 선언 - ex) 호출 function first_func() { var i = 1; document.write(“값 : "+ i + "<P>"); } first_func()
JSP & DB 연동
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
MySQL 설치 (1/20) http://www.mysql.com/downloads
MySQL 설치 (2/20)
MySQL 설치 (3/20)
MySQL 설치 (4/20)
MySQL 설치 (5/20)
MySQL 설치 (6/20)
MySQL 설치 (7/20)
MySQL 설치 (8/20)
MySQL 설치 (9/20)
MySQL 설치 (10/20)
MySQL 설치 (11/20)
MySQL 설치 (12/20)
MySQL 설치 (13/20)
MySQL 설치 (14/20)
MySQL 설치 (17/20)
MySQL 설치 (17/20)
MySQL 설치 (18/20) 환경변수 설정
MySQL 설치 (19/20) 환경변수 설정
MySQL 설치 (20/20) 환경변수 설정 시스템 변수 Path에 MySQL 설치 경로 추가 예) C:\Program Files\MySQL\MySQL Server 5.6\bin;
Eclipse와 MySQL 연동 환경 구축 (1/7) 아직 끝나지 않았답니다. T-T Connector/J을 다운 받습니다. http://dev.mysql.com/downloads/connector/j/
Eclipse와 MySQL 연동 환경 구축 (2/7)
Eclipse와 MySQL 연동 환경 구축 (3/7) 다운 받은 파일을 압축을 풀어야겠죠? 압축을 푼 폴더를 jre7\lib\ext\ 경로에 복사합니다. ex. C:\Program Files\Java\jre7\lib\ext
Eclipse와 MySQL 연동 환경 구축 (4/7) 우리가 DB를 연동할 JSP프로젝트 선택한 후 Properties 선택!
Eclipse와 MySQL 연동 환경 구축 (5/7) ⓶ ⓵ ⓷
Eclipse와 MySQL 연동 환경 구축 (6/7) 조금 전 Connector를 복사한 폴더 선택합니다. mysql-connector-java-5.1.20-bin.jar 선택 후 열기.
Eclipse와 MySQL 연동 환경 구축 (6/7) jar 파일 확인 후 OK!
Eclipse와 MySQL 연동 환경 구축 (7/7) Apache Tomcat의 lib 폴더에 mysql-connector-java-5.1.25-bin.jar 복사합니다.
DB 생성 예제 (1/9) MySQL Workbench를 실행 후 New Connection 선택
DB 생성 예제 (2/9)
DB 생성 예제 (3/9) 더블 클릭!!
DB 생성 예제 (4/9)
DB 생성 예제 (5/9)
DB 생성 예제 (6/9)
DB 생성 예제 (7/9)
DB 생성 예제 (8/9)
DB 생성 예제 (9/9)
DB 생성 예제 (9/9)
DB 생성 예제 (9/9)
JSP & DB 연동 테스트 test.jsp
결과 화면
Terminology
용어 정리 브라우저 World Wide Web(www)에서 모든 정보를 볼 수 있도록 해 주는 응용프로그램. Internet Explorer와 Chrome, Firefox등.
용어 정리 Markup Language Markup 정보를 표현하는 언어 . 주어진 형식에 따라 작성한 후, 이를 인식할 수 있는 reader 프로그램을 이용하여 이를 표현. 종류는 SGML, HTML, XML, XHTML 등이 있음. SGML Markup Language XML HTML
Concepts of XML
XML 이란? EXtensible Markup Language. 구조화된 데이터 형식을 제공하는 메타 표시 언어
XML 개발 배경 HTML은 데이터를 브라우저에 표현하는 방법을 지정하는 태그의 집합.
XML 개발 배경 태그를 자유롭게 정의할 수 있게 되면, 태그와 속성 이름을 데이터를 설명하는 의미 있는 이름으로 지을 수 있음. 순수한 데이터를 표현 정보로부터 분리해 내는 것이 XML 개발된 핵심 이유.
XML 설계 목표 XML은 인터넷 상에서 바로 사용될 수 있도록 한다. XML은 다양한 응용들을 지원할 수 있도록 한다. XML은 SGML과 호환성이 있어야 한다. XML 문서들을 처리하는 프로그램의 작성이 쉽도록 한다. XML에서의 선택적 특성을 최소화 한다. XML 문서들은 사람이 이해하기 쉽고 명확해야 한다. XML 설계는 신속히 준비되어야 한다. XML의 설계는 간결하고 형식을 갖추도록 한다. XML 문서는 생성하기 쉽도록 한다. XML Markup의 간결함은 중요하게 다루지 않는다.
XML 문서의 구조
XML 특징 내용을 구체적으로 선언할 수 있음. 여러 플랫폼 간에 더 의미 있는 검색 결과를 가져올 수 있음. 웹 기반의 데이터 보기 및 처리 응용 프로그램에 적용 가능.
XML 장점 HTML: 디자인을 위해 추가된 이미지나 클라이언트 측 코드 등은 변하지 않는다 해도 웹 서버에서는 이 모두를 데이터와 혼합하여 다시 만들어 보내 야 함. XML: 클라이언트는 변경된 데이터만 전달받고, 앞서 다운로드 받은 스타일 시트를 계속 사용할 수 있 음. -> 따라서 웹 서버의 부하를 줄일 수 있고, 네트워크 트래픽을 감소시키고, 전체적인 웹 애플리케이션의 성능이 향상됨.
XML 사용 이유 Web server와 Web page 내용을 양방향으로 전달하고 사용할 수 있음. DB와 연동이 가능. Web page의 특정 내용에 대한 search가 가능. -> 지능형 검색, 데이터 교환 등 인터넷에서 사용자가 요구하는 사항을 수행할 수 있음.
XSL XML 문서의 스타일시트를 만드는 기술. XML 문서는 데이터만 가지고 있음. -> 시각적으로 표시하거나 다른 종류의 문서로 변화하기 위해 포맷팅 처리가 필요. -> 이를 위해 XSL을 개발하여 사용. XSL에서는 XML 문서 내부에서 데이터의 위치를 지정하는데 XPath라는 기술을 사용한다.
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 선택
DOM (Document object Model)
DOM 이란? Document Object Model. XML을 기반으로 만들어진 표준. DOM을 이용해서 XML 문서의 내용을 읽고, 변경하며, 새 XML문서를 만드는 애플리케이션을 작성할 수 있음. XML문서를 처리하는 많은 방법들이 존재하지만 거의 이 (DOM parsing)방법을 이용하여 parsing.
DOM 동작 구조 애플리케이션은 DOM 파서를 통해 XML문서에 접근. DOM 파서는 애플리케이션의 요청을 받아 XML 문서의 전체 내용을 읽음 -> 메모리 상에 트리 구조를 만듦 -> 애플리케이션은 메모리 상에 만들어진 XML 문서 트리를 통해 XML 문서의 내용에 접근. XML 파서 XML 문서 애플리케이션 DOM 파서가 실제 사용되는 방식
DOM 동작 구조 Document Node NodeList Element Node (MEMBER) NamedNodemap Attr Node Text Node (“홍길동”)
DOM과 Xpath 비교 (1/3) 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탐색 <root> <title attr1="test1"> <item attr="test">item1</item> <item>item2</item> <item>item3</item> </title> <title2>test</title2> </root>
title 하위태그로 있는 item 태그들을 배열로 받기 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/item[@attr1=‘test1']") title 하위태그로 있는 item 태그들을 배열로 받기 mlObj.getElementsByTagName("title")[0].childNodes xmlObj.selectNodes("/root/title/item[='item2']“)
DOM XML Parser 예제 (1/3) ReadXMLFile.java
DOM XML Parser 예제 (2/3) ExampleXML.jsp
DOM XML Parser 예제 (3/3) Console 출력 결과
실습