PowerPoint 프레젠테이션

Size: px

Start display at page:

Download "PowerPoint 프레젠테이션"

상욱 엽
5 years ago
Views:

1 JSP: Java Server Pages 2015 KO Kwangman

2 목차 1. 웹프로그래밍 2. WAS 시스템환경구축과 JSP 실행 3. 웹화면구성기초 4. JSP 실행원리와 JSP 스크립트의기본구성 5. 변수 / 연산자 / 클래스의활용 6. 모바일웹차트그리기 7. 조건 / 반복문의활용 8. JSP 내장객체의활용 9. 정보의전달과응답 : 회원정보의전송 10. 데이터베이스시스템활용 11. 실전프로젝트 : 회원관리시스템 2

3 웹 / 모바일웹 기존웹 -PC 와노트북컴퓨터의화면에맞게최적화된웹문서 모바일웹 - 스마트폰이나태블릿 PC 같은모바일기기에최적화된웹문서 3

4 앱 / 하이브리드앱 앱 (App) - 모바일디바이스를위한응용소프트웨어 - 하이브리드앱과의차별화를위해네이티브앱이라고도함 하이브리드앱 - 네이티브앱과모바일웹각각의장점이용 - 콘텐츠를이용하는내부프로그램은모바일웹기반으로구현하고, 스마트폰의카메라나센서와의인터페이스는앱방식을사용 4

5 포털사이트 사용자들이인터넷에접속할때기본적으로거쳐가는관문이되는사이트 5

6 JSP 기반웹프로그래밍 JSP 는 JAVA 를기반으로하는스크립트언어로서, 실행을위해서는 JVM(Java Virtual Machine : 자바가상머신 ) 을필요로함. JDK(Java Development Kit) 는 JVM, Java Compiler, 기타자바개발에필요한클래스파일및문서등으로구성 JSP 는 Java Servlet 의수행환경을제공하는서블릿컨테이너 ( 서블릿엔진또는 WAS(Web Application Server)) 를필요로함. 6

7 JSP 관련웹프로그래밍기술 HTML SQL Server CSS jqplot JavaScript jquery / jquery Mobile JSP 7

8 HTML Hyper Text Markup Language 의약자로하이퍼텍스트기능을가진문서를만드는언어 8

9 CSS - CSS(Cascading Style Sheet) 는마크업언어 (Markup Language) 가화면에실제표시되는방법을기술하는언어임 - W3C 의표준이며, 화면레이아웃과스타일을정의할때주로사용됨 9

10 JavaScript - 넷스케이프사가개발한스크립트언어로서, 주로클라이언트측에서이용되며사용자와의상호작용을가능하게함 ( 대화식웹페이지작성가능 ). - HTML 문서에포함되어있으며, 주로클라이언트로전송되어웹브라우저에서실행됨 마우스이벤트처리마우스가메뉴위에걸쳐지면이벤트를인식하여반응을나타냄 : 서브메뉴가팝업으로나타남. Form validation 사용자가입력한정보의오류체크 : 회원등록시아이디를입력하지않고중복확인버튼을클릭하면경고창이나타남 10

11 JSP - 스크립트언어는 HTML 문서내에삽입하여사용하며, -ASP(Active Server Page), PHP(Professional HTML Preprocessor), JSP(Java Server Pages) 가있음 -JSP 는오라클에합병된썬마이크로시스템즈에의해개발된스크립트언어로, 동적으로웹페이지를생성하기위한자바기반의서버측기술임 11

12 jquery / jquery Mobile - jquery: jquery Foundation( 에서 HTML5 를기반으로자바스크립트를사용하기쉽게만든오픈소스자바스크립트라이브러리이며, 웹브라우저호환성이있고, 다양한위젯을제공하고있음 - jquery Mobile( jquerymobile.com): jquery 를기반으로 Mobile 환경에서사용가능하도록제작된자바스크립트라이브러리임 12

13 jqplot - Chris Leonello 가개발 - jquery 기반의다양한차트를제공하는오픈소스자바스크립트라이브러리 13

14 SQL Server - 마이크로소프트 ( 가개발한관계형데이터베이스관리시스템 - 윈도우운영체제에서작동 - 기능과사용자에따라여러버전으로배포 - 무료로사용할수있는 Express 버전도제공 - 관계형데이터베이스관리시스템은 SQL Server 외에오라클 ( 과 MySQL( 등이있음 14

15 WAS 애플리케이션개발환경구축 3 웹브라우저설치 Chrome, IE, Opera, Safari 2 WAS 환경구축 (Tomcat 설치 ) 1 JVM 환경구축 (JDK 설치 ) 15

16 웹문서작성과실행 일반텍스트문서편집기 ( 메모장 ) 스크립트문서작성지원편집기 ( 노트패드 ++ 등 ) 통합개발환경 ( 이클립스등 ) 16

17 웹문서의편집과저장 C:/Program Files/Apache Software Foundation/Tomcat 7.0/webapps/ROOT 폴더에저장 17

18 계속 18

19 웹문서보기 웹브라우저의주소란에 을입력하면그실행결과로화면이나타남 19

20 웹문서를스마트폰으로보기 1 HTML 문서수정 20

21 계속 2 IP 주소확인 - 명령프롬프터에서 ipconfig 라고입력하면 (❶), - 현재사용중인시스템의 IPv4 주소를확인할수있음 (❷). 21

22 계속 3 실행 -IP 주소가 인경우 - 스마트폰의웹브라우저주소창에 을입력하면스마트폰의화면에최적화된크기의콘텐츠를볼수있음 22

23 WAS 환경설정 가상디렉토리 포트변경 환경설정 홈디렉토리변경 기본문서변경 23

24 가상디렉토리설정 - 가상디렉토리 : 컴퓨터내의물리적폴더의경로에대해가상의경로 - 관련파일 : server.xml C:/Program Files/Apache Software Foundation/Tomcat 7.0/conf 폴더 c:/jsp 라는폴더에 jsp 라는가상디렉토리명설정 24

25 계속 도메인명 /jsp/test.jsp 를지정예 : /jsp/02/2.4/hello.html 환경이변경되면 Tomcat 를다시시작해야함 25

홈디렉토리변경 - 홈디렉토리 : http://localhost:8080 또는 외부에서 localhost 대신 ip 주소나도메인명으로접속할때참조하는폴더 - 디폴트홈디렉토리 :

26 홈디렉토리변경 - 홈디렉토리 : 또는 외부에서 localhost 대신 ip 주소나도메인명으로접속할때참조하는폴더 - 디폴트홈디렉토리 : C:/Program Files/Apache Software Foundation/Tomcat 7.0/webapps/ROOT - 관련파일 : server.xml c:/jsp 라는폴더를홈디렉토리로설정 26

홈페이지기본문서변경 - 홈페이지의기본문서란홈디렉토리또는가상디렉토리에접속할때기본적으로불려지는문서 - 예 : http://www.naver.

27 홈페이지기본문서변경 - 홈페이지의기본문서란홈디렉토리또는가상디렉토리에접속할때기본적으로불려지는문서 - 예 : 이라고웹브라우저의주소창에입력했을때나타나는첫화면이네이버홈페이지의기본문서임 - 관련파일 : web.xml index.html 가없으면 index.jsp 가홈페이지로출력된다. 27

가기본환경으로설정되어있고, Tomcat 등의 WAS 는 8080 Port 로설정되어있음 - 웹문서실행 :

28 Port 의변경 - Port: 웹서버 (WAS 서버 ) 로사용자의데이터및서버의데이터가출입하는통로 - 마이크로소프트 IIS(internet information services) 등의웹서버는 80 Port 가기본환경으로설정되어있고, Tomcat 등의 WAS 는 8080 Port 로설정되어있음 - 웹문서실행 : 네 /02/2.4/hello.html [80 디폴트 ] 8080 Port 를 80 Port 로변경한예 28

29 HTML 기반의웹화면구성 29

30 웹브라우저콘텐츠영역의화면구성 30

31 index.html 31

32 CSS 를이용한웹화면디자인 32

33 1 Inline style sheet CSS 속성을적용하고자하는 HTML 엘리먼트의태그안에삽입하여표시 33

34 css1.html 34

35 속성 35

36 2 Internal style sheet - 각태그에적용할때마다 CSS style 을기술하기때문에반복적일수도있고 HTML 태그와 CSS 가혼재되어스크립트가복잡한단점이있는 Inline style sheet 방법개선 - <head> 태그사이에 CSS 를정의하고적용하고자하는태그에서불러사용 - 한번정의한 style 을문서내의여러부분에서반복하여사용할수있고, HTML 태그와 CSS 를분리하여스크립트관리가간편한장점이있음 36

37 css2.html 37

38 계속 38

39 계속 39

40 3 External style sheet - Internal style sheet 에서정의된 CSS style 을하나의파일로분리하고여러 HTML 문서에서불러사용하는방법 - 사용자에게일관성있는화면을제공할수있으며, 개발이편리해지고, 유지보수가용이하며, 관리비용을절감할수있음 40

41 style1.css 41

42 css3.html 42

43 JavaScript 의예 JavaScript 는 HTML 문서를통하여사용자와상호작용이가능하도록함 43

44 1 HTML 문서내부의정의 HTML 문서내에 JavaScript 를정의하여사용 44

45 javascript1.html 45

46 2 외부파일이용하기 - JavaScript 를외부파일로작성 ( javascript.js) - 여러 HTML 문서에서불러사용 ( javascript2.html) - HTML 문서가간단해짐 46

47 javascript1.js [ 폴더 : js] 47

48 javascript2.html 48

49 jquery Mobile 기반의 모바일웹화면디자인 jquery Mobile 을이용하면간단한설정으로일반웹화면을모바일웹화면으로최적화하여출력가능 49

50 jquery Mobile 사용환경 50

51 jquery Mobile 라이브러리 jquery Mobile 라이브러리사용방법 1 CDN(Content Delivery Network) 버전을링크하여이용하는방법 2 zip 파일을다운로드하여사용하는방법 51

52 CDN 방식 52

53 jquery Mobile 이용모바일웹문서 53

54 jquerymobile1.html 54

55 계속 55

56 커스텀데이터속성 / 속성값 56

57 계속 57

58 푸터위치의조정 58

59 jquerymobile2.html 59

60 이미지목록 하나의이미지를리스트형식으로출력 60

61 image.html 61

62 엘리먼트 62

63 엘리먼트속성 63

64 커스텀데이터속성값 64

65 오디오목록과자동재생 하나의오디오목록을출력하고지정된오디오가자동으로재생 65

66 audio.html [ 폴더 : 03/mobile2] 66

67 엘리먼트 / 속성 67

68 커스텀데이터속성 / 속성값 68

69 비디오목록과자동재생 하나의비디오목록을출력하고지정된비디오가자동으로재생 69

70 video.html [ 폴더 : 03/mobile3] 70

71 엘리먼트 / 속성 71

72 JSP 스크립트작성과실행원리 72

73 JSP 스크립트구성컴포넌트 73

74 샘플소스 : index.jsp 74

75 계속 75

76 계속 76

77 1 지시문 (directive) 77

78 계속 78

79 2 스크립트릿 (scriptlet) 79

80 3 주석문 (comment) 80

81 4 선언문 (declaration) 81

82 5 표현식 (expression) 82

83 6 액션태그 (action tag) 83

84 계속 84

85 이미지목록과이벤트처리 이미지목록의한이미지아이템을클릭하면팝업창으로이미지상세내용을보여줌 85

86 jquery/jquery Mobile 라이브러리 include 파일작성 jquerymobile.inc 86

87 image.jsp 87

88 계속 88

89 계속 89

90 엘리먼트 / 속성 / 커스텀데이터속성 90

91 계속 91

92 웹문서로딩후에실행될 jquery 용함수만들기 92

93 Multi-page template - jquery 에서는하나의웹문서내에다수의페이지구성이가능 - 각페이지의속성은 data-role= page 로설정하며, 각 id 는다른값으로지정 - 초기에는앞부분의페이지가화면에출력되며, 페이지간이동으로화면전환이가능 93

94 오디오목록과이벤트처리 오디오목록을출력하고목록을클릭하면지정된오디오가재생 94

95 audio.jsp 95

96 계속 96

97 비디오목록과이벤트처리 비디오목록을출력하고목록을클릭하면지정된비디오가재생 97

98 video.jsp 98

99 계속 99

100 계속 100

101 jqplot 개요 - 차트 : 다양하고복잡한정보를분석하는데도움을주는유용한도구 - jqplot( 차트라이브러리로서라인차트 (line chart), 바차트 (bar chart), 파이차트 (pie chart) 등다양한형태제공 101

102 jqplot 차트환경구축 - jqplot: jquery 자바스크립트프레임워크를위한차트라이브러리 - jqplot 라이브러리의다운로드및설치 102

103 라인차트 라인차트를이용한기업의월별이익실적 103

104 chart_line1.jsp 모바일로즐기는 JSP 웹프 104

105 계속 105

106 계속 106

107 데이터라벨표시 107

108 바차트 라인차트소스를일부수정하면바차트로변환이가능함 108

109 chart_bar1.jsp 109

110 데이터라벨표시 110

111 수평으로차트그리기 111

112 파이차트 라인차트소스를일부수정하면파이차트로변환이가능 112

113 chart_pie.jsp 113

114 계속 114

115 라인 / 바차트 : 다중데이터시리즈 기업의지역별월별이익실적 115

116 라인차트 116

117 바차트 117

118 수평으로차트그리기 118

1. 자바프로그램기초 및개발환경 2 장 & 3 장. 자바개발도구 충남대학교 컴퓨터공학과

1. 자바프로그램기초 및개발환경 2 장 & 3 장. 자바개발도구 충남대학교 컴퓨터공학과 학습내용 1. Java Development Kit(JDK) 2. Java API 3. 자바프로그래밍개발도구 (Eclipse) 4. 자바프로그래밍기초 2 자바를사용하려면무엇이필요한가? 자바프로그래밍개발도구 JDK (Java Development Kit) 다운로드위치 : http://www.oracle.com/technetwork/java/javas