JSP: Java Server Pages 2015 KO Kwangman
목차 1. 웹프로그래밍 2. WAS 시스템환경구축과 JSP 실행 3. 웹화면구성기초 4. JSP 실행원리와 JSP 스크립트의기본구성 5. 변수 / 연산자 / 클래스의활용 6. 모바일웹차트그리기 7. 조건 / 반복문의활용 8. JSP 내장객체의활용 9. 정보의전달과응답 : 회원정보의전송 10. 데이터베이스시스템활용 11. 실전프로젝트 : 회원관리시스템 2
웹 / 모바일웹 기존웹 -PC 와노트북컴퓨터의화면에맞게최적화된웹문서 모바일웹 - 스마트폰이나태블릿 PC 같은모바일기기에최적화된웹문서 3
앱 / 하이브리드앱 앱 (App) - 모바일디바이스를위한응용소프트웨어 - 하이브리드앱과의차별화를위해네이티브앱이라고도함 하이브리드앱 - 네이티브앱과모바일웹각각의장점이용 - 콘텐츠를이용하는내부프로그램은모바일웹기반으로구현하고, 스마트폰의카메라나센서와의인터페이스는앱방식을사용 4
포털사이트 사용자들이인터넷에접속할때기본적으로거쳐가는관문이되는사이트 5
JSP 기반웹프로그래밍 JSP 는 JAVA 를기반으로하는스크립트언어로서, 실행을위해서는 JVM(Java Virtual Machine : 자바가상머신 ) 을필요로함. JDK(Java Development Kit) 는 JVM, Java Compiler, 기타자바개발에필요한클래스파일및문서등으로구성 JSP 는 Java Servlet 의수행환경을제공하는서블릿컨테이너 ( 서블릿엔진또는 WAS(Web Application Server)) 를필요로함. 6
JSP 관련웹프로그래밍기술 HTML SQL Server CSS jqplot JavaScript jquery / jquery Mobile JSP 7
HTML Hyper Text Markup Language 의약자로하이퍼텍스트기능을가진문서를만드는언어 8
CSS - CSS(Cascading Style Sheet) 는마크업언어 (Markup Language) 가화면에실제표시되는방법을기술하는언어임 - W3C 의표준이며, 화면레이아웃과스타일을정의할때주로사용됨 9
JavaScript - 넷스케이프사가개발한스크립트언어로서, 주로클라이언트측에서이용되며사용자와의상호작용을가능하게함 ( 대화식웹페이지작성가능 ). - HTML 문서에포함되어있으며, 주로클라이언트로전송되어웹브라우저에서실행됨 마우스이벤트처리마우스가메뉴위에걸쳐지면이벤트를인식하여반응을나타냄 : 서브메뉴가팝업으로나타남. Form validation 사용자가입력한정보의오류체크 : 회원등록시아이디를입력하지않고중복확인버튼을클릭하면경고창이나타남 10
JSP - 스크립트언어는 HTML 문서내에삽입하여사용하며, -ASP(Active Server Page), PHP(Professional HTML Preprocessor), JSP(Java Server Pages) 가있음 -JSP 는오라클에합병된썬마이크로시스템즈에의해개발된스크립트언어로, 동적으로웹페이지를생성하기위한자바기반의서버측기술임 11
jquery / jquery Mobile - jquery: jquery Foundation(www.jquery.com) 에서 HTML5 를기반으로자바스크립트를사용하기쉽게만든오픈소스자바스크립트라이브러리이며, 웹브라우저호환성이있고, 다양한위젯을제공하고있음 - jquery Mobile( jquerymobile.com): jquery 를기반으로 Mobile 환경에서사용가능하도록제작된자바스크립트라이브러리임 12
jqplot - Chris Leonello 가개발 - jquery 기반의다양한차트를제공하는오픈소스자바스크립트라이브러리 13
SQL Server - 마이크로소프트 (www.microsoft.com) 가개발한관계형데이터베이스관리시스템 - 윈도우운영체제에서작동 - 기능과사용자에따라여러버전으로배포 - 무료로사용할수있는 Express 버전도제공 - 관계형데이터베이스관리시스템은 SQL Server 외에오라클 (www.oracle.com) 과 MySQL(www.mysql.com) 등이있음 14
WAS 애플리케이션개발환경구축 3 웹브라우저설치 Chrome, IE, Opera, Safari 2 WAS 환경구축 (Tomcat 설치 ) 1 JVM 환경구축 (JDK 설치 ) 15
웹문서작성과실행 일반텍스트문서편집기 ( 메모장 ) 스크립트문서작성지원편집기 ( 노트패드 ++ 등 ) 통합개발환경 ( 이클립스등 ) 16
웹문서의편집과저장 C:/Program Files/Apache Software Foundation/Tomcat 7.0/webapps/ROOT 폴더에저장 17
계속 18
웹문서보기 웹브라우저의주소란에 http://localhost:8080/hello.html 을입력하면그실행결과로화면이나타남 19
웹문서를스마트폰으로보기 1 HTML 문서수정 20
계속 2 IP 주소확인 - 명령프롬프터에서 ipconfig 라고입력하면 (❶), - 현재사용중인시스템의 IPv4 주소를확인할수있음 (❷). 21
계속 3 실행 -IP 주소가 10.20.7.95 인경우 - 스마트폰의웹브라우저주소창에 http://10.20.7.95:8080/hello.html 을입력하면스마트폰의화면에최적화된크기의콘텐츠를볼수있음 22
WAS 환경설정 가상디렉토리 포트변경 환경설정 홈디렉토리변경 기본문서변경 23
가상디렉토리설정 - 가상디렉토리 : 컴퓨터내의물리적폴더의경로에대해가상의경로 - 관련파일 : server.xml C:/Program Files/Apache Software Foundation/Tomcat 7.0/conf 폴더 c:/jsp 라는폴더에 jsp 라는가상디렉토리명설정 24
계속 http:// 도메인명 /jsp/test.jsp 를지정예 : http://localhost: 8080/jsp/02/2.4/hello.html 환경이변경되면 Tomcat 를다시시작해야함 25
홈디렉토리변경 - 홈디렉토리 : http://localhost:8080 또는 외부에서 localhost 대신 ip 주소나도메인명으로접속할때참조하는폴더 - 디폴트홈디렉토리 : C:/Program Files/Apache Software Foundation/Tomcat 7.0/webapps/ROOT - 관련파일 : server.xml c:/jsp 라는폴더를홈디렉토리로설정 26
홈페이지기본문서변경 - 홈페이지의기본문서란홈디렉토리또는가상디렉토리에접속할때기본적으로불려지는문서 - 예 : http://www.naver.com/ 이라고웹브라우저의주소창에입력했을때나타나는첫화면이네이버홈페이지의기본문서임 - 관련파일 : web.xml index.html 가없으면 index.jsp 가홈페이지로출력된다. 27
Port 의변경 - Port: 웹서버 (WAS 서버 ) 로사용자의데이터및서버의데이터가출입하는통로 - 마이크로소프트 IIS(internet information services) 등의웹서버는 80 Port 가기본환경으로설정되어있고, Tomcat 등의 WAS 는 8080 Port 로설정되어있음 - 웹문서실행 : http://localhost/j 네 /02/2.4/hello.html [80 디폴트 ] 8080 Port 를 80 Port 로변경한예 28
HTML 기반의웹화면구성 29
웹브라우저콘텐츠영역의화면구성 30
index.html 31
CSS 를이용한웹화면디자인 32
1 Inline style sheet CSS 속성을적용하고자하는 HTML 엘리먼트의태그안에삽입하여표시 33
css1.html 34
속성 35
2 Internal style sheet - 각태그에적용할때마다 CSS style 을기술하기때문에반복적일수도있고 HTML 태그와 CSS 가혼재되어스크립트가복잡한단점이있는 Inline style sheet 방법개선 - <head> 태그사이에 CSS 를정의하고적용하고자하는태그에서불러사용 - 한번정의한 style 을문서내의여러부분에서반복하여사용할수있고, HTML 태그와 CSS 를분리하여스크립트관리가간편한장점이있음 36
css2.html 37
계속 38
계속 39
3 External style sheet - Internal style sheet 에서정의된 CSS style 을하나의파일로분리하고여러 HTML 문서에서불러사용하는방법 - 사용자에게일관성있는화면을제공할수있으며, 개발이편리해지고, 유지보수가용이하며, 관리비용을절감할수있음 40
style1.css 41
css3.html 42
JavaScript 의예 JavaScript 는 HTML 문서를통하여사용자와상호작용이가능하도록함 43
1 HTML 문서내부의정의 HTML 문서내에 JavaScript 를정의하여사용 44
javascript1.html 45
2 외부파일이용하기 - JavaScript 를외부파일로작성 ( javascript.js) - 여러 HTML 문서에서불러사용 ( javascript2.html) - HTML 문서가간단해짐 46
javascript1.js [ 폴더 : js] 47
javascript2.html 48
jquery Mobile 기반의 모바일웹화면디자인 jquery Mobile 을이용하면간단한설정으로일반웹화면을모바일웹화면으로최적화하여출력가능 49
jquery Mobile 사용환경 50
jquery Mobile 라이브러리 jquery Mobile 라이브러리사용방법 1 CDN(Content Delivery Network) 버전을링크하여이용하는방법 2 zip 파일을다운로드하여사용하는방법 51
CDN 방식 52
jquery Mobile 이용모바일웹문서 53
jquerymobile1.html 54
계속 55
커스텀데이터속성 / 속성값 56
계속 57
푸터위치의조정 58
jquerymobile2.html 59
이미지목록 하나의이미지를리스트형식으로출력 60
image.html 61
엘리먼트 62
엘리먼트속성 63
커스텀데이터속성값 64
오디오목록과자동재생 하나의오디오목록을출력하고지정된오디오가자동으로재생 65
audio.html [ 폴더 : 03/mobile2] 66
엘리먼트 / 속성 67
커스텀데이터속성 / 속성값 68
비디오목록과자동재생 하나의비디오목록을출력하고지정된비디오가자동으로재생 69
video.html [ 폴더 : 03/mobile3] 70
엘리먼트 / 속성 71
JSP 스크립트작성과실행원리 72
JSP 스크립트구성컴포넌트 73
샘플소스 : index.jsp 74
계속 75
계속 76
1 지시문 (directive) 77
계속 78
2 스크립트릿 (scriptlet) 79
3 주석문 (comment) 80
4 선언문 (declaration) 81
5 표현식 (expression) 82
6 액션태그 (action tag) 83
계속 84
이미지목록과이벤트처리 이미지목록의한이미지아이템을클릭하면팝업창으로이미지상세내용을보여줌 85
jquery/jquery Mobile 라이브러리 include 파일작성 jquerymobile.inc 86
image.jsp 87
계속 88
계속 89
엘리먼트 / 속성 / 커스텀데이터속성 90
계속 91
웹문서로딩후에실행될 jquery 용함수만들기 92
Multi-page template - jquery 에서는하나의웹문서내에다수의페이지구성이가능 - 각페이지의속성은 data-role= page 로설정하며, 각 id 는다른값으로지정 - 초기에는앞부분의페이지가화면에출력되며, 페이지간이동으로화면전환이가능 93
오디오목록과이벤트처리 오디오목록을출력하고목록을클릭하면지정된오디오가재생 94
audio.jsp 95
계속 96
비디오목록과이벤트처리 비디오목록을출력하고목록을클릭하면지정된비디오가재생 97
video.jsp 98
계속 99
계속 100
jqplot 개요 - 차트 : 다양하고복잡한정보를분석하는데도움을주는유용한도구 - jqplot(www.jqplot.com): 차트라이브러리로서라인차트 (line chart), 바차트 (bar chart), 파이차트 (pie chart) 등다양한형태제공 101
jqplot 차트환경구축 - jqplot: jquery 자바스크립트프레임워크를위한차트라이브러리 - jqplot 라이브러리의다운로드및설치 102
라인차트 라인차트를이용한기업의월별이익실적 103
chart_line1.jsp 모바일로즐기는 JSP 웹프 104
계속 105
계속 106
데이터라벨표시 107
바차트 라인차트소스를일부수정하면바차트로변환이가능함 108
chart_bar1.jsp 109
데이터라벨표시 110
수평으로차트그리기 111
파이차트 라인차트소스를일부수정하면파이차트로변환이가능 112
chart_pie.jsp 113
계속 114
라인 / 바차트 : 다중데이터시리즈 기업의지역별월별이익실적 115
라인차트 116
바차트 117
수평으로차트그리기 118