오후 초반내용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- page 지정 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>Checkbox and Radio</h1>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">        
            <h4>Form elements</h4>
            <form>
                <div class="ui-field-contain">
                    <label for="date">Date Input</label>
                    <input type="date" data-role="date" id="date">                    
                </div>
                <div class="ui-field-contain">
                    <label for="name">Text Input</label>
                    <input type="text" name="name" id="name"> 
                </div>
                <div class="ui-field-contain">
                    <label for="textarea">TextArea</label>
                    <textarea rows="8" cols="40" name="textarea" id="textarea"></textarea>
                </div>
                <div class="ui-field-contain">
                    <label for="search">사용자 검색</label>
                    <input type="search" name="search" id="search">
                </div>
                <!-- flip 스위치 구현 select를 사용하여 구현 -->
                <div class="ui-field-contain">
                    <label for="slider2">Flip switch</label>
                    <select name="slider2" id="slider2" data-role="slider">
                        <option value="off">Off</option>
                        <option value="on" selected>On</option>                        
                    </select>                    
                </div>
            </form>                    
        </div>
        <div class="ui-field-contain">
            <label for="slider">Slider</label>
            <input type="range" name="slider" id="slider" value="50" min="0" 
            max="100" data-highlight="true">
        </div>
        
        <div class="ui-field-contain">
            <fieldset data-role="controlgroup" data-mini="true">
                <legend>Checkbox</legend>
                <input type="checkbox" name="checkbox" id="checkbox-1a">
                <label for="checkbox-1a">서울</label>
                <input type="checkbox" name="checkbox" id="checkbox-1b">
                <label for="checkbox-1b">천안</label>                
            </fieldset>
        </div>
        <div class="ui-field-contain">
            <label for="select-a">Select</label>
            <!-- <select name="select" id="select-a"> 브라우저 제공 원래형태처럼 표현-->
            <select name="select" id="select-a" data-native-menu="false"> 
                <option>도시선택</option>
                <option value="서울">서울</option>
                <option value="부산">부산</option>
                <option value="천안">천안</option>
                <option value="인천">인천</option>
            </select>
        </div>        
        <!-- footer  -->
        <div data-role="footer" data-position="fixed" data-fullscreen="true">
            <h1>화면 하단</h1>
        </div>
    </div>
 
</body>
</html>
cs


JQuery Mobile 화면이동하는 방법에는 세가지가 있다 

1. 한페이지에 통합적으로 처리(디자인 중심 페이지에 적합)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page" id="first_page">
        <!-- header  -->
        <div data-role="header" data-theme="b">
            <h1>화면이동 -first</h1>
            
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <a href="#second_page" class="ui-btn ui-corner-all ui-shadow ui-icon-forward ui-btn-icon-left ui-btn-icon-notext">두번째화면으로 이동</a>
                                                                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
    
    <!-- 두번째 페이지 -->
    <div data-role="page" id="second_page">
        <!-- header  -->
        <div data-role="header" data-theme="b">
            <h1>화면이동-second</h1>
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-left ui-icon-back ui-btn-icon-notext">이전</a>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            두번째 화면                                                                        
        </div>
                
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
    
 
</body>
</html>
cs


첫번째 화면

두번째 화면


2. 페이지 두개로 처리하는 방법

제이 쿼리 모바일 내부적으로 두번째 페이지를 ajax로 불러와 기존내용을 숨기고 바꿔치기 하기때문에 두번째 페이지에는 따로 제이쿼리 모바일 라이브러리들을 임포트할필요 없다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>화면이동 -first</h1>
            
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <a href="02-2.html" class="ui-btn ui-corner-all ui-shadow ui-icon-forward ui-btn-icon-left ui-btn-icon-notext">두번째화면으로 이동</a>
                                                                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
    
    
 
</body>
 
</html>
cs


02-2html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>두번째 페이지</title>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>두번째 화면</h1>
            <a href="#" data-rel="back" class="ui-btn ui-cornel-all ui-shawdow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">이전</a>
        </div>
        <div role="main" class="ui-content">
            <h1>Hello Second Page</h1>
        </div>
        <div data-role="footer">
            <h1>화면하단</h1>
        </div>
    </div>
 
</body>
</html>
cs


3. 새로운 페이지를 기존 방법 대로 불러오는 방법

03.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>화면이동 -first</h1>
            
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <a href="03-2.html" class="ui-btn" data-ajax="false">두번째화면으로 이동</a>
                                                                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
    
    
 
</body>
 
</html>
cs


03-2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>두번째 화면</h1>
            <a href="#" data-rel="back" class='ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext'>이전</a>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <h1>두번째 화면입니다.</h1>
                                                                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
    
    
 
</body>
 
</html>
cs


JQuaryMobile 방식은 일반의 링크 방식과 다름

A.html에서 B.html을 부를때 b.html의 내용을 가져와 a.html을 숨기고 b.html의 내용을 a.html의 돔트리에 삽입 -> b.html의 주소지만 실제내용은 a.html의 내용

위의 기술은 제이쿼리 모바일이 내부적으로 ajax 통신방법을 이용하여 처리

하이브리드 앱을 위해서는 DOM을 하나로 쓰는 모델을 해야한다 (앱에서 새로고침 기능이 없음) 




리스트뷰

모바일에서는 테이블을 쓰기가 힘듬 ( 화면상의 이유로 데이터가 떨어져서 출력될수있음)

-> 그러한 이유로 리스트 형식으로 데이터를 맣이 보여줌 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>ㅁ<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>listview</h1>
            
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <h4>읽기 전용(순서없음)</h4>
            <ul data-role="listview">
                <li>대한민국</li>
                <li>사우디 아라비아</li>
                <li>콜럼비아</li>
                <li>미국</li>
                <li>영국</li>
            </ul>                
            
            <h4>읽기 전용(순서있음)</h4>
            <ol data-role="listview">
                <li>대한민국</li>
                <li>사우디 아라비아</li>
                <li>콜럼비아</li>
                <li>미국</li>
                <li>영국</li>
            </ol>
                                                                    
        </div>
        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
    
    
 
</body>
 
</html>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>두번째 화면</h1>
            <a href="#" data-rel="back" class='ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext'>이전</a>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <h1>두번째 화면입니다.</h1>
                                                                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer" data-theme="b">
            <h1>화면 하단</h1>
        </div>
    </div>
    
    
 
</body>
 
</html>
cs

출력화면 



'App Development > Hybrid Programming' 카테고리의 다른 글

특강 5일차 (오후) - JQuery Mobile  (0) 2015.01.09
특강 5일차 (오전) - JQuery Mobile  (0) 2015.01.09
특강 4일차 (오전) - JQuery Mobile  (0) 2015.01.08
특강 3일차 (오후) - AJAX, JQueryMobile  (0) 2015.01.07
특강 3일차 (오전) - JQuery, AJAX  (0) 2015.01.07

JQuery 

부트스트랩 - UIFramework

JQueryMoblie UI 버튼 코딩

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<!-- 
width :  넓이(픽셀) height : 높이(픽셀) 
initial-scale : 초기 배율(기본 꽉 찬 화면)
minimum-scale : 최소 배율(기본 값 : 0.25, 범위: 0~10.0)
maximum-scale : 최대 배율(범위:0~10.0)
user-scalable : 확대, 축소 여부(yes/no)
 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
</head>
 
<body>
    <!-- page 지정 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>화면 상단</h1>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <h4>기본 버튼(ui-btn)</h4>
            <a href="#" class="ui-btn">a 태그</a>
            <button class="ui-btn">Button</button>
            
            <h4>모서리가 둥근 버튼(ui-corner-all)</h4>
            <a href="#" class="ui-btn ui-corner-all">a 태그</a>
            <button class="ui-btn ui-corner-all">Button</button>            
            
            <h4>그림자 효과 주기(ui-shadow)</h4>
            <a href="#" class="ui-btn ui-shadow">a 태그</a>
            <button class="ui-btn ui-shadow">Button</button>
            
            <h4>인라인(ui-btn-inline)</h4>
            <a href="#" class="ui-btn ui-btn-inline">a 태그</a>
            <button class="ui-btn ui-btn-inline">Button</button>
            
            <h4>테마(ui-btn-a, ui-btn-b)</h4>
            <a href="#" class="ui-btn ui-btn-b">a 태그</a>
            <button class="ui-btn ui-btn-b">Button</button>
            
            <h4>미니(조금 작게 표시)(ui-mini)</h4>
            <a href="#" class="ui-btn ui-mini">a 태그</a>
            <button class="ui-btn ui-mini">Button</button>
            
            <h4>아이콘 지정(ui-icon-delete), 아이콘 위치(ui-btn-icon-left)</h4>
            <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">a 태그</a>
            <button class="ui-btn ui-icon-camera ui-btn-icon-left">Button</button>
            
            <h4>아이콘만 표시(ui-btn-icon-notext)</h4>
            <!-- 직선 테두리를 곡선 형태로 ui-corner-all  -->
            <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">a 태그</a>
            <button class="ui-btn ui-icon-camera ui-btn-icon-notext">Button</button>
            
            <h4>아이콘 위치 지정(ui-btn-icon-left, right, top, bottom)</h4>
            <!-- 직선 테두리를 곡선 형태로 ui-corner-all  -->
            <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Left</a>
            <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">right</a>
            <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top">top</a>
            <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-bottom">bottom</a>
            
            <h4>비활성화(ui-state-disabled)</h4>
            <a href="#" class="ui-btn ui-state-disabled">a 태그</a>
            <!-- disabled="", disabled="siabled"  둘 다 가능 -->
            <button disabled="disabled">Button</button>
            
            <h4>일반적인 형태의 버튼(data-role="none")</h4>
            <button data-role="none">Button</button>
            
            
                                                            
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
                <h1>화면 하단</h1>
        </div>
    </div>
 
</body>
</html>
cs




커스텀 아이콘

실습 그림파일 

WEBCONTENT - images 폴더 생성후 폴더안에 그림파일 넣음


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<style type="text/css">
    /* 커스텀 아이어넣는 형식은 정해져 있음  */
    .ui-icon-myicon:after{
        background-image:url("../image/letter-s.png");
        background-size:18px 18px;
    }
</style>
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
 
</head>
 
<body>
    <!-- page 지정 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>아이콘 그림 지정과 커스텀 아이콘</h1>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <h4>아이콘(ui-icon-action)</h4>
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action">action</button>                        
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-alert">alert</button>
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-d">arrow-d</button>
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-d-l">arrow-d-L</button>
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-audio">audio</button>                        
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-camera">camera</button>
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-edit">edit</button>
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-heart">heart</button>
            
            <h4>커스텀 아이콘</h4>
            <!-- .ui-icon-myicon:after{
                background-image:url("../image/letter-s.png");
                background-size:18px 18px;
            } 18px * 18px 그림으로 항상 만들어야한다-->
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-myicon">myicon</button>
                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
                <h1>화면 하단</h1>
        </div>
    </div>
 
</body>
</html>
cs


Button Group

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<!-- 
width :  넓이(픽셀) height : 높이(픽셀) 
initial-scale : 초기 배율(기본 꽉 찬 화면)
minimum-scale : 최소 배율(기본 값 : 0.25, 범위: 0~10.0)
maximum-scale : 최대 배율(범위:0~10.0)
user-scalable : 확대, 축소 여부(yes/no)
 -->
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- page 지정 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>Button Group</h1>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <h4>수직 버튼 그룹</h4>
            <!-- 
            data-role="controlgroup" 버튼을 수직 또는 수평으로 그룹핑(수직이 기본)
            data-type="horizontal | vertical" 수평, 수직
             -->
            <div data-role="controlgroup">
                <a href="#" class="ui-btn ui-corner-all">No Icon</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-top">top</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-bottom">bottom</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Notext</a>
                
            </div>    
            
            <h4>미니 수직 버튼 그룹</h4>
            <div data-role="controlgroup" data-mini="true">
                <a href="#" class="ui-btn ui-corner-all">No Icon</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-top">top</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-bottom">bottom</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Notext</a>
            
            </div>
            
            <h4>수평 버튼 그룹</h4>
            <div data-role="controlgroup" data-type="horizontal">
                <a href="#" class="ui-btn ui-corner-all">No Icon</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-back ui-btn-icon-left">Left</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-forward ui-btn-icon-right">Right</a>            
            </div>
            
            <div data-role="controlgroup" data-type="horizontal">
                <a href="#" class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-top">Top</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-refresh ui-btn-icon-top">Top</a>            
            </div>
            
            <div data-role="controlgroup" data-type="horizontal">
                <a href="#" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-bottom">bottom</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-shop ui-btn-icon-bottom">bottom</a>            
            </div>            
 
            <div data-role="controlgroup" data-type="horizontal">
                <a href="#" class="ui-btn ui-corner-all ui-icon-phone ui-btn-icon-notext">Icon only</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-mail ui-btn-icon-notext">Icon only</a>            
            </div>    
            
            <h4>미니 사이즈</h4>
            <div data-role="controlgroup" data-type="horizontal" data-mini="true">
                <a href="#" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-bottom">bottom</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-shop ui-btn-icon-bottom">bottom</a>            
            </div>                                            
                                                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
                <h1>화면 하단</h1>
        </div>
    </div>
 
</body>
</html>
cs


Header와 Footer에 아이콘 적용될때의 차이점

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<!-- 
width :  넓이(픽셀) height : 높이(픽셀) 
initial-scale : 초기 배율(기본 꽉 찬 화면)
minimum-scale : 최소 배율(기본 값 : 0.25, 범위: 0~10.0)
maximum-scale : 최대 배율(범위:0~10.0)
user-scalable : 확대, 축소 여부(yes/no)
 -->
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- page 지정 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>header</h1>
            <!-- 
                header에서 버튼은 ui-btn을 생략 가능하지만 생략시 기본값 아이콘
                적용되지 않는다. 자동으로 좌우 배치            
            -->
            <a href="#" class="ui-btn ui-btn-icon-left ui-icon-back">이전</a>
            <a href="#" class="ui-btn ui-btn-icon-right ui-icon-forward">다음</a>
            <!-- <a href="#">이전</a>            
            <a href="#" class="ui-btn-icon-right ui-icon-forward">다음</a> -->
        </div>
        <div data-role="header">
            <h1>header</h1>
            <a href="#" class="ui-btn ui-btn-icon-right ui-icon-forward ui-btn-right">다음</a>
        </div>
        
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
                                            
                                                    
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
            <h1>화면 하단</h1>
            <!-- header와 달리 좌우로 자동 배치 되지 않음 임의로 지정 -->
            <!-- 좌우 자동배치가 되지 않기 때문에 좌우를 지정해야 함 -->
            <a href="#" class="ui-btn ui-btn-icon-left ui-icon-back ui-btn-left">이전</a>
            <a href="#" class="ui-btn ui-btn-icon-right ui-icon-forward ui-btn-right">다음</a>
            
        </div>
    </div>
 
</body>
</html>
cs


Header와 Footer 그룹버튼 적용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- page 지정 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>header</h1>
            <!-- 버튼 그룹에서는 ui-btn 생략 불가 -->
            <div data-role="controlgroup" data-type="horizontal" align="center">
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-delete">Remove</a>
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-plus">Add</a>
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-u">Up</a>
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-d">Down</a>
            </div>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
                                                            
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
            <h1>화면 하단</h1>
            <div data-role="controlgroup" data-type="horizontal" align="center">
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-delete">Remove</a>
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-plus">Add</a>
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-u">Up</a>
                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-d">Down</a>
            </div>
        </div>
    </div>
 
</body>
</html>
cs


'App Development > Hybrid Programming' 카테고리의 다른 글

특강 5일차 (오전) - JQuery Mobile  (0) 2015.01.09
특강 4일차 (오후) - JQuery Mobile  (0) 2015.01.08
특강 3일차 (오후) - AJAX, JQueryMobile  (0) 2015.01.07
특강 3일차 (오전) - JQuery, AJAX  (0) 2015.01.07
특강 2일차 (오전, 오후) - 제이쿼리  (0) 2015.01.06

데이터 입력 및 표시 HTML 페이지

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    form {
        width:500px;
        margin:10px auto;
    }
    
    ul {
        padding:0;
        margin:0;
        list-style:none;
    }    
    
    ul li {
        padding:0;
        margin: 0 0 10px 0;
        
    }
    
    label {
        width:100px;
        float:left;            
    }
    
    table {
        border:solid 1px gray;
        width: 500px;
        margin: 0 auto;
        border-collapse:collapse;        
    }
    
    td {
        border: solid 2px gray;
    }
</style>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //목록
        function selectData(){
            //table의 내부내용을 제거(초기화)
            $('#output').empty();
            
            $.getJSON('getPeopleJSON.jsp', function(data){
                $(data).each(function(index,item){
                    var output='';
                    
                    output += '<tr>';
                    output += '<td>'+item.id+'</td>';
                    output += '<td>'+item.name+'</td>';
                    output += '<td>'+item.job+'</td>';
                    output += '<td>'+item.address+'</td>';
                    output += '<td>'+item.bloodType+'</td>';
                    output += '</tr>';
                    
                    $('#output').append(output);
                    
                });
            });
        }
        
        //이벤트 연결 
        $('#insert_form').submit(function(event){
            
            //입력 양식의 내용을 요청 매개 변수 문자열로 만듬
            //(파라미터네임과 value의 쌍, 인코딩 처리)
            var data = $(this).serialize();
            
                    //요청 URL        ,전송할 데이터, 전송이 성공하면 호출되는 함수 
            $.post('insertPerson.jsp', data, initForm); 
            
            //기본 이벤트 제거 
            event.preventDefault();
            
        });
        
        function initForm(data){
                    //전송된 데이터를 JSON 객체로 생성
            var s = $.parseJSON(data); //여기 데이터는 무슨데이터?
            
            if(s.result=='success'){
                alert('등록 완료');
                
                //폼 초기화 
                $('#id').val('');
                $('#name').val('');
                $('#job').val('');
                $('#address').val('');
                $('#bloodType').val('');
            }else {
                alert('등록 실패!!');
            }
            
            //목록 읽기 
            selectData();
            
        }
        
        //초기 회면에 데이터를 표시 
        selectData();
        
    });
</script>
</head>
<body>
<div>
    <form id="insert_form" method="method">
        <fieldset>
            <legend>데이터 추가</legend>
            <ul>
                <li>
                    <label for="id">아이디</label>
                    <input type="text" name="id" id="id">
                </li>
                <li>
                    <label for="name">이름</label>
                    <input type="text" name="name" id="name">
                </li>
                <li>
                    <label for="job">직업</label>
                    <input type="text" name="job" id="job">
                </li>                                
                <li>
                    <label for="address">주소</label>
                    <input type="text" name="address" id="address">
                </li>                            
                <li>
                    <label for="id">혈행형</label>
                    <input type="text" name="bloodType" id="bloodType">
                </li>
                <li>
                    <input type="submit" value="추가">
                </li>
            </ul>
        </fieldset>                
    </form>
</div>
 
<table id="output">
    
</table>
 
</body>
</html>
cs


get People JSON.jsp 서버 페이지 - 데이터 불러오는 서버 페이지

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<%@ page language="java" contentType="text/plain; charset=euc-kr"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
[<% 
String jdbcUrl = "jdbc:oracle:thin:@172.18.65.193:1521:xe";
String dbId = "hr";
String dbPass = "hr";
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
 
try{
    Class.forName("oracle.jdbc.driver.OracleDriver");
    conn = DriverManager.getConnection(jdbcUrl, dbId, dbPass);
    
    String sql = "select * from people order by id asc";
    pstmt = conn.prepareStatement(sql);
    rs = pstmt.executeQuery();
    
    while(rs.next()){
        String id = rs.getString("id");
        String name = rs.getString("name");
        String job= rs.getString("job");
        String address= rs.getString("address");
        String bloodType= rs.getString("bloodType");
        
        if(rs.getRow()>1){
            out.print(", ");
        }
        %>
        {
            "id": "<%=id %>",
            "name": "<%=name %>",
            "job": "<%=job %>",
            "address": "<%=address %>",
            "bloodType": "<%=bloodType %>"            
        }
        <%
    }    
    
}catch(Exception e){
    e.printStackTrace();
    
} finally{
    if(rs!=null)try{rs.close();}catch(SQLException e){}
    if(pstmt!=null)try{pstmt.close();}catch(SQLException e){}
    if(conn!=null)try{conn.close();}catch(SQLException e){}
}
    
%>
]
cs

insertPerson.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<%@ page language="java" contentType="text/plain; charset=euc-kr"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<% 
String jdbcUrl = "jdbc:oracle:thin:@172.18.65.193:1521:xe";
String dbId = "hr";
String dbPass = "hr";
 
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String job = request.getParameter("job");
String name = request.getParameter("name");
String address = request.getParameter("address");
String bloodType = request.getParameter("bloodType");
Connection conn = null;
PreparedStatement pstmt = null;
 
try{
    Class.forName("oracle.jdbc.driver.OracleDriver");
    conn = DriverManager.getConnection(jdbcUrl, dbId, dbPass);
    
    String sql = "insert into people(id, name, job, address, bloodType) values (?,?,?,?,?)";
    pstmt = conn.prepareStatement(sql);
    pstmt.setString(1, id);
    pstmt.setString(2, job);
    pstmt.setString(3, name);
    pstmt.setString(4, address);
    pstmt.setString(5, bloodType);
    
    pstmt.executeUpdate();
    %>
    {"result":"success"}
    <%
    
}catch(Exception e){
    
    %>
    {"result":"failure"}
    <%
    e.printStackTrace();
    
} finally{
    
    if(pstmt!=null)try{pstmt.close();}catch(SQLException e){}
    if(conn!=null)try{conn.close();}catch(SQLException e){}
}
    
%>
 
cs



JQueryMobile + SenchaTouch

교재: 

jQueryMobilenSenchaTouch.pdf


데이터 처리량이 많지 않은 곳에서 사용

앱을 만든다면 아직까지는 네이티브를 추천 

속도를 향상시키기이해서는 웹브라우저 자체 엔진의 속도를 향상시켜야 한다 


기초

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<!-- 
width :  넓이(픽셀) height : 높이(픽셀) 
initial-scale : 초기 배율(기본 꽉 찬 화면)
minimum-scale : 최소 배율(기본 값 : 0.25, 범위: 0~10.0)
maximum-scale : 최대 배율(범위:0~10.0)
user-scalable : 확대, 축소 여부(yes/no)
 -->
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- page 지정 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>화면 상단</h1>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-contnet">
            <p>Hello jQuery Mobile</p>
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
                <h1>화면 하단</h1>
        </div>
    </div>
 
</body>
</html>
cs


JQUERY + 버튼 만들기 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<!-- 
width :  넓이(픽셀) height : 높이(픽셀) 
initial-scale : 초기 배율(기본 꽉 찬 화면)
minimum-scale : 최소 배율(기본 값 : 0.25, 범위: 0~10.0)
maximum-scale : 최대 배율(범위:0~10.0)
user-scalable : 확대, 축소 여부(yes/no)
 -->
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
 
</script>
 
</head>
 
<body>
    <!-- page 지정 -->
    <div data-role="page">
        <!-- header  -->
        <div data-role="header">
            <h1>화면 상단</h1>
        </div>
        
        <!-- 내용  -->
        <div role="main" class="ui-content">
            <h4>기본 버튼(ui-btn)</h4>
            <a href="#" class="ui-btn">a 태그</a>
            <button class="ui-btn">Button</button>
            
            <h4>모서리가 둥근 버튼(ui-corner-all)</h4>
            <a href="#" class="ui-btn ui-corner-all">a 태그</a>
            <button class="ui-btn ui-corner-all">Button</button>            
            
            <h4>그림자 효과 주기(ui-shadow)</h4>
            <a href="#" class="ui-btn ui-shadow">a 태그</a>
            <button class="ui-btn ui-shadow">Button</button>
            
            <h4>인라인(ui-btn-inline)</h4>
            <a href="#" class="ui-btn ui-btn-inline">a 태그</a>
            <button class="ui-btn ui-btn-inline">Button</button>
            
            <h4>테마(ui-btn-a, ui-btn-b)</h4>
            <a href="#" class="ui-btn ui-btn-b">a 태그</a>
            <button class="ui-btn ui-btn-b">Button</button>
                        
        </div>
        
        <!-- footer  -->
        <div data-role="footer">
                <h1>화면 하단</h1>
        </div>
    </div>
 
</body>
</html>
cs


'App Development > Hybrid Programming' 카테고리의 다른 글

특강 4일차 (오후) - JQuery Mobile  (0) 2015.01.08
특강 4일차 (오전) - JQuery Mobile  (0) 2015.01.08
특강 3일차 (오전) - JQuery, AJAX  (0) 2015.01.07
특강 2일차 (오전, 오후) - 제이쿼리  (0) 2015.01.06
특강 2일차 (오전) - 자바스크립트  (0) 2015.01.06

기본 이벤트 제거

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 이벤트 제거</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<style>
    * {
        margin:5px;
        padding:5px;
        border:3px solid black;
    }
</style>
<script type="text/javascript">
    $(function(){
        $('a').click(function(event){
            $(this).css('background-color', 'blue');
            
            //기본 이벤트 제거
            //return false; 써도 됨
            event.preventDefault();
        });
    });
</script>
</head>
<body>
    <h1>
        <a href="http://www.naver.com">네이버</a>
    </h1>
</body>
</html>
cs


이벤트 전파 제거

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 전파 제거</title>
<style>
    * {
        margin:5px;
        padding:5px;
        border:3px solid black;
    }
</style>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('h1').click(function(){
            $('h1').click(function(){
                $(this).css('background-color', 'yellow');
            });
            
            $('p').click(function(){
                $(this).css('background-color', 'pink');
                
                //이벤트 전파제거
                event.stopPropagation();
            });
        });
    });
</script>
</head>
 
<body>
<h1 id="header">header
    <p id="paragraph">Paragraph</p>
</h1>
 
</body>
</html>
cs

이벤트 제거 처리를 안하면 Paragraph 를 클릭해도 Header부분의 색깔이 변경

이벤트 제거 처리후 Pragraph 영역의 색깔만 변한다 

        


동적으로 만드는 태그를 통해 연결이 필요시 on method를 사용한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>미래에 만들어질 태그에 이벤트 연결</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //현재의 태그와 미래의 태그 모두 이벤트 연결
        $(document).on('click', 'h1', function(){
            var length = $('h1').length; //h1태그의 갯수 
            var targetHTML = $(this).html();
            //기존 데이터 뒤에 새로 만들어진 데이터를 삽입
            $('#wrap').append('<h1>'+length+ ' - ' + targetHTML+ '</h1>');            
        });
    });
    
</script>
</head>
<body>
    <div id="wrap">
        <h1>Header</h1>
    </div>
</body>
</html>
cs



AJAX

굉장히 빠르다는 느낌으로 페이지를 부분적으로 처리 가능 

구글이 전폭적으로 AJAX 를 활용한 후 전세계에 활성화

비동기 통신과 전체적인 페이지를 다시 로딩해야 하는 경우를 구분하여 페이지 작성

데이터를 받는 페이지 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
//AJAX(Asynchronous Javascript And XML) : 자바스크립트와 XML을 이용한 비동기 통신
 $(function(){
    //text 정보 일기
    //         URL                      옵션
    $.ajax('myFirstStringAction.jsp', {
        //통신이 성공해서 서버에서 데이터 전송된 경우
        success:function(data){
            //data : 서버에서 전송된 데이터
            //body에 전송된 데이터를 추가
            $('body').append(data);
        }
    });            
 });
</script>
</head>
<body>
 
</body>
</html>
cs

데이터 받아올 서버 myFirstStringAction.jsp

1
2
3
<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
Hello JSP!!    
cs


데이터를 보내고 받기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //데이터를 서버로 전송한 후 서버에서 데이터 전달 받기
        $.ajax({
            //호출 URL
            url:'myFirstParamAction.jsp', // 요청 URL
            data: {name: 'dragon', age:21}, //서버쪽에 전달할 데이터
            success: function(data){ // 서버의 응답이 성공 했을때 호출
                $('body').append(data);
            }
        });
    });
</script>
</head>
<body>
    
</body>
</html>
cs

myFirstParamAction.jsp

1
2
3
4
5
6
7
8
9
<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%
    String name = request.getParameter("name");
    String age = request.getParameter("age");
        
%>
이름 : <%= name%>, 나이 : <%= age %>
 
cs


XML 통신

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //XML 데이터를 읽어 옴
        $.ajax('myFirstXMLAction.jsp',{
            success:function(data){
                $(data).find('person').each(function(){
                    //find 메소드를 이용해서 태그에 접근
                    var name = '<li>' + $(this).find('name').text() + '</li>';
                    var job = '<li>' + $(this).find('job').text() + '</li>';
                    var age = '<li>' + $(this).find('age').text() + '</li>';
                    
                    $('body').append('<ul>' + name + job + age + '</ul>');                    
                }); // 각각의 배열을 접근하여 person 을 찾음
            }
        });
    });
</script>
</head>
<body>
 
</body>
</html>
 
cs

서버 - myFirstXMLAction.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<?xml version="1.0" encoding="UTF-8"?>
<people>
    <person>
        <name>강호동</name>
        <job>MC</job>
        <age>45</age>
    </person>
    <person>
        <name>유재석</name>
        <job>MC</job>
        <age>44</age>
    </person>    
</people>    
cs

JSON 을 활용해 데이터 받기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
//JSON: Java Script Object Notation
//XML에 비해 용량이 반으로 줄어들어 더 빠르게 데이터 전송 가능 
//JSON은 JSON 전용 데이터 메소드가 있어 바로 처리 가능
    $(function(){
        $.getJSON('myFirstJSONAction.jsp', function(data){
            $(data).each(function(index, item){
                var output = '';
                output += '<div>';
                output += '<h1>'+ item.name+'</h1>';
                output += '<p>'+ item.job+'</p>';
                output += '<p>'+ item.age+'</p>';
                output += '</div>';
                
                $('#output').append(output);
                
            });
        });
    });
 
</script>
</head>
<body>
    <div id="output"></div>
</body>
</html>
 
cs

데이터 서버 페이지 - myFirstJSONAction.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
 
[
    {
        "name": "강호동",
        "job": "MC",
        "age": 30
    },    
    {
        "name": "유재석",
        "job": "MC",
        "age": 50        
    }
]
 
cs


데이터베이스에서 데이터 가져오기

JDBC 드라이버 파일을 다운받아 WEB-INF -> lib 폴더에 넣는다

ojdbc14.jar


'App Development > Hybrid Programming' 카테고리의 다른 글

특강 4일차 (오전) - JQuery Mobile  (0) 2015.01.08
특강 3일차 (오후) - AJAX, JQueryMobile  (0) 2015.01.07
특강 2일차 (오전, 오후) - 제이쿼리  (0) 2015.01.06
특강 2일차 (오전) - 자바스크립트  (0) 2015.01.06
특강 1일차 (오후)  (0) 2015.01.05

Session



세션 타임 설정을 위한 두가지 방법 

1. web.xml에 직접 설정하는 방법 

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" ... version="2.5">
  ...
  ...
  ...
  <session-config>
    <session-timeout>100</session-timeout> <!-- 분단위  -->
  </session-config>
</web-app>
cs

2. jsp 페이지에 임의로 설정

1
2
3
<%
  session.setMaxInactiveInterval(100 * 60); // 초 단위
%>
cs

 

아직 db에 대한 학습을 하지 않앟기때문에 web.xml에 임의로 저장하여 활용

 web.xml에 파라미터로써 로그인 ID와 Password를 저장하고 활용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
               http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  version="2.5"> 
 <!-- 기존 내용  -->
 <!-- 아래의 내용만 삽입  -->
 <context-param>
   <param-name>MasterID</param-name>
   <param-value>jspbook</param-value>
 </context-param>
 <context-param>
   <param-name>MasterPassword</param-name>
   <param-value>112233</param-value>
 </context-param>
 <!-- 삽입 끝  -->
 
</web-app>
cs


login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
 <html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>로그인</title></head>
 </head>
 <body>
관리자  (Master)로 로그인하세요.<br/>
 <form action="loginProcess.jsp" method="post">
 ID : <input type="text" name="id"><br/>
 Password : <input type="password" name="pw"><br/>
 <input type="submit" value="전송">
 </body>
 </html>
cs

loginProcess.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<%@ page contentType="text/html;charset=utf-8" %>
<%
 String storedID = application.getInitParameter("M
asterID");  
 String storedPW = application.getInitParameter("M
asterPassword");  
 String id = request.getParameter("id");
 String pw = request.getParameter("pw");
 if (id.equals(storedID) && pw.equals(storedPW)) { 
   session.setAttribute("MasterLoginID", id); 
%>
<html>
<head><title>로그인 처리</title></head>
<body>
로그인에 성공했습니다. <br/><br/>
<a href="loginCheck.jsp">로그인 체크</a>
</body>
</html>
<%
 } else if (id.equals(storedID)) { 
%>
<script>
alert("패스워드가 다릅니다.");  
history.go(-1);
</script>
<%
 } else {  
%>
<script>
alert("로그인  ID가 다릅니다.");
history.go(-1);
</script>
<%
 }
%>
cs

※ 대부분의 JSP 페이지 및 Servlet은 session 기본 객체를 사용하게 된다. 따라서 로그인과관련된 코딩이 없어도 session 기본 객체는 이미 생성되며 session 기본 객체의 생성 시점

로그인 성공 시점은 일치하지 않는다는 점에 유의해야 한다. 이는 곧 사용자가 로그아웃

하더라도 기존의 session 기본 객체는 계속 유지될 수 있다는 것을 의미한다.


로그인 지속 여부 판단

로그인이 되어 있다는 것을 판단하는 방법은 session 기본 객체에 로그인 표식을 위한 속성

이 존재하는지의 여부를 판단하는 것으로 이루어진다.

loginCheck.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<%@ page contentType="text/html;charset=utf-8" %>
<%
 String masterID = (String)session.getAttribute("M
asterLoginID");
 boolean isLogin = false;
 if (masterID != null) {
   isLogin = true; 
 }
%>
<html>
<head><title>로그인여부 검사</title></head>
<body>
<%
   if (isLogin) {
%>
ID "<%= masterID %>"로 로그인 한 상태  <br/><br/>
<a href="logout.jsp">로그아웃</a>
<%
   } else {
%>
로그인하지 않은 상태
<%
   }
%>
</body>
</html>
cs

로그아웃 처리 logout.jsp

session.invalidate() 메소드를 통해 세션을 종료하면 된다 

1
2
3
4
5
6
7
8
9
10
11
<%@ page contentType="text/html;charset=utf-8" %>
<%
 session.invalidate();
%>
<html>
<head><title>로그아웃</title></head>
<body>
로그아웃하였습니다. <br/><br/>
<a href="login.html">처음부터</a>
</body>
</html>
cs

아래와 같이 세션에서 객체 속성을 삭제하는 방법으로도 처리 가능 

1
session.removeAttribute("MasterLoginID");
cs



로그인 처리를 위해 쿠키 대신에 세션을 사용하는 이유는?

쿠키는 클라이언트에도 정보가 저장되서 관리가 어렵지만 세션을 이용하면 서버에서만 데이터를 관리하면 되기때문에 관리가 용이하고 보안 측면에서 더 강화된다 


Cookie

쿠키(cookie)는 인터넷 사용자가 어떠한 웹 사이트를 방문할 경우 그 사이트가 사용하고 있

는 서버에서 인터넷 사용자의 컴퓨터에 설치하는 작은 기록 정보 파일을 일컫는다. 쿠키에

담긴 정보는 인터넷 사용자가 같은 웹 사이트를 방문할 떄마다 읽혀서 서버로 전송되고 새로운정보로 바뀔 수도 있다.



두 번째 인자로서 쿠키의 값을 지정

Cookie 객체의 멤버 메소드

Cookie의 생성 및 활용

1
2
3
4
<%
  Cookie cookie = new Cookie("cookieName", "cookieValue");
  response.addCookie(cookie);
%>
cs

Cookie 클래스 생성자의 첫 번째 인자로서 쿠키의 이름을, 두 번째 인자로서 쿠키의 값을 지정

createCookie.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- createCookie.jsp -->
<%@ page contentType="text/html;charset=utf-8" %>
<%@ page import="java.net.URLEncoder" %>
<%@ page import="java.util.Date" %>
<%
    Cookie cookie = new Cookie("name", URLEncoder.encode("jspbook 쿠키 테스트"));
    Cookie cookie2 = new Cookie("date", new Date().toString());
    response.addCookie(cookie);
    response.addCookie(cookie2);
%>
<html>
<head><title>쿠키생성</title></head>
<body>
쿠키 이름: <%= cookie.getName() %><br/>
쿠키 값: <%= cookie.getValue() %><br/>
<br/>
쿠키 이름: <%= cookie2.getName() %><br/>
쿠키 값: <%= cookie2.getValue() %>
<p><a href="getCookies.jsp">Next Page to view the cookie value</a></p>
</body>
</html>
cs

실행화면





• 쿠키 생성 및 응답전송 단계: JSP를 활용하여 서버 측에서 쿠키를 생성한다. 이렇게 생성

된 쿠키는 응답 데이터와 함께 브라우저로 전송된다.

• 쿠키 저장 단계: 웹 브라우저는 응답 데이터에 포함된 쿠키를 쿠키 저장소에 보관한다. 

대부분의 경우 하드디스크의 파일 형태로 저장된다.

• 쿠키 요청전송 단계: 한번 저장된 쿠키는 웹 브라우저에서 서버로 요청을 보낼 때마다 함

께 전송된다. 웹 서버는 웹 브라우저가 전송한 쿠키에서 필요한 데이터를 읽어서 필요한 

작업을 수행할 수 있다.

쿠키의 전송은 1)응답전송과 2)요청전송으로 나뉜다는 점에 유의하자. 응답전송은 서버가 

생성된 후 서버에서 브라우저로 한 번만 일어난다. 하지만 요청전송은 일단 웹 브라우저에 

쿠키가 저장되면 쿠키가 삭제되기 전까지 매번 웹 서버에 전송된다. 그러므로 쿠키를 활용

해서 지속적으로 브라우저로부터 데이터를 받아낼 수 있으며, 브라우저를 닫은 이후에 다시 

브라우저를 열어서 해당 사이트로 접속할 때에도 전송된다는 점에 유의하자. 


서버 측에서 전송받은 쿠키의 데이터 읽어오기

Cookie[] cookies = request.getCookies();

getCookies.jsp 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%@ page contentType="text/html;charset=utf-8" %>
<%@ page import="java.net.URLDecoder" %>
<html>
<head><title>쿠키 목록</title></head>
<body>
쿠키 목록<br/>
<%
   Cookie[] cookies = request.getCookies();
   if (cookies != null && cookies.length > 0) {
       for (int i = 0 ; i < cookies.length ; i++) {
%>
<%= cookies[i].getName() %>=<%= URLDecoder.decode(c
ookies[i].getValue()) %><br/>
<%
       }
   } else {
%>
전송 받은 쿠키가 없습니다.
<%
   }
%>
</body>
</html>
cs

※ 쿠키 값이 인코딩되었을 가능성이 있으므로 URLDecorder.decode( ) 메소드를 활용해서 쿠키 값을 디코딩하는 메소드를 활용하면서 쿠키 값을 얻어와야 한다.

쿠키삭제 

아래와같은 방법으로 쿠키 삭제 

1
2
cookie.setMaxAge(0);
response.addCookie(cookie);
cs


deleteCookies.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ page contentType="text/html;charset=utf-8" %>
<%@ page import = "java.net.URLEncoder" %>
<%
 Cookie[] cookies = request.getCookies();
   if (cookies != null && cookies.length > 0) {
       for (int i = 0 ; i < cookies.length ; i++) {
           if (cookies[i].getName().equals("name
")) {
               cookies[i].setMaxAge(0);
               response.addCookie(cookies[i]);
           }
       }
   }
%>
<html>
<head><title>쿠키 삭제</title></head>
<body>
name 쿠키를 삭제합니다.
<p><a href="getCookies.jsp">Next Page to view the c
ookie value</a></p>
</body>
</html>
cs


쿠키의 유효 시간을 지정하지 않은 경우 웹 브라우저를 닫으면 쿠키는 자동으로 삭제되며 이후에 웹 브라우저를 실행할 때에 지워진 쿠키는 서버로 요청전송되지 않는다. 쿠키의 유효 시간을 설정하면 웹 브라우저를 닫더라도 유효 시간이 남아 있으면 해당 쿠키가 삭제되지 않고 이후 요청전송될 수 있다.


create1hourCookie.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <%@ page contentType="text/html;charset=utf-8" %>
 <%
    Cookie cookie = new Cookie("cookieTime", "1 hour");
    cookie.setMaxAge(60 * 60); 
    response.addCookie(cookie);
 %> 
 
<html>
<head><title>쿠키유효시간설정</title></head>
<body>
유효시간이  1시간인  cookieTime 쿠키 생성.
<p><a href="getCookies.jsp">Next Page to view the c
ookie value</a></p>
</body>
</html>
cs


쿠키를 이용한 ID 기억하기 구현


login2.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 <%@ page contentType="text/html;charset=utf-8" %>
 <html>
 <head><title>로그인</title></head>
 <%
  boolean isIDShow = false;
  String id = null;
  Cookie[] cookies = request.getCookies();
  if (cookies != null && cookies.length > 0) {
    for (int i = 0 ; i < cookies.length ; i++) {
      if (cookies[i].getName().equals("id")) {
       isIDShow = true;
       id = cookies[i].getValue();
      }
    }
  }
 %>
 <body>
관리자  (Master)로 로그인하세요.<br/>
 <form action="loginProcess2.jsp" method="post">
 <%
  if (isIDShow) {
 %>
 ID : <input type="text" name="id" value="<%= id %>">
 <input type="checkbox" name="idstore" value="store" 
checked>ID 기억하기
 </input><br/>
 <%
  } else {
 %>
 ID : <input type="text" name="id">
 <input type="checkbox" name="idstore" value="store
">ID 기억하기</input><br/>
 <%
  }
 %>
cs

login2.jsp는 간단한 로그인 폼 생성 페이지이지만 브라우저로부터 전송된 쿠키 정보 중 "id" 이름의 쿠키가 있는지 확인하여 그 쿠기가 있다면 ID 정보를 폼 입력에 미리 넣어주는 역할을 한다

loginProcess2.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<%@ page contentType="text/html;charset=utf-8" %>
<%
 String storedID = application.getInitParameter("M
asterID");  
 String storedPW = application.getInitParameter("M
asterPassword");  
 String id = request.getParameter("id");
 String pw = request.getParameter("pw");
 if (id.equals(storedID) && pw.equals(storedPW)) { 
   session.setAttribute("MasterLoginID", id);
%>
<html>
<head><title>로그인 처리</title></head>
<body>
로그인에 성공했습니다. <br/><br/>
<a href="loginCheck.jsp">로그인 체크</a> 
</body>
</html>
<%
   String IDStore = request.getParameter("idstore");
    if (IDStore != null && IDStore.equals("store")) 
{
      Cookie cookie = new Cookie("id", id);
      response.addCookie(cookie);
     out.println("<a href='login2.jsp'>로그인 화면 다
시 보기</a>");
   }
 } else if (id.equals(storedID)) { 
%>
<script>
alert("패스워드가 다릅니다.");  
history.go(-1);
</script>
<%
 } else {
%>
<script>
alert("로그인  ID가 다릅니다.");
history.go(-1);
</script>
<%
 }
%> 
gcs

getInitParameter 와 getParameter 차이점

getInitParameter 

 web.xml 에다가 지정해둔 파라미터들의 값을 얻어 올수 있다.. 불변의 값들을 미리 xml 에다가 적어놓구 필요할때마다 호출해서 사용

getParameter 

리퀘스트 범위내에서 Parameter 값을 얻어오는 것. 전의 페이지에서 값을 넘겨주면 이 메소드를 활용하여 값ㅇ르 받아온다 


※ setPath() 메소드의 일반적인 활용법

일반적으로 쿠키는 웹 애플리케이션에 포함된 대부분의 JSP, 서블릿에서 공통으로 사용되는 

경우가 많기 때문에 대부분의 쿠키는 경로를 “/”로 지정한다. 즉, 생성된 쿠키가 cookie라면 

cookie.setPath("/")를 호출하면 된다. 

'Java > Servlet, JSP' 카테고리의 다른 글

HTTP 프로토콜의 이해  (0) 2014.11.05

+ Recent posts

티스토리툴바