원래 프로젝트는 자바스크립트로 버튼 클릭시 함수로 window.open() 을 걸어 팝업창을 띄웠었는데

오늘은 하이퍼링크를 이용한 팝업창 띄우기를 도전해봤다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>        
    <head></head>
    <body>
    <table>
        <tr>
            <td align=right colspan=7>
                <a href="MemberServlet.do">[전체목록]</a>
                
                <!-- 회원가입 링크를 새 창(팝업창)으로 열기 -->-->
                <a href="memberInsert_form.html"
                    onclick="window.name='MemberServlet.do';window.open(this.href, 'insert',
                    'width=450,height=320,resizable=no,scrollbars=no,status=no');return false;">[회원가입]</a>
            </td>
        </tr>
    </table>
    </body>
</html>
cs

 

href에 링크로 연결될 페이지를 입력하고 onclick에는 원래 버튼을 누르면 연결될

자바스크립트 함수 안에 들어있던 소스를 그대로 붙여넣었다.

'FrontEnd > CSS & HTML' 카테고리의 다른 글

CSS : 부트스트랩(Bootstrap) 사용시 class container 요소의 위치 차이 비교  (0) 2016.10.14
HTML :: <pre>  (0) 2016.04.02
HTML :: select optgroup  (0) 2016.03.10
HTML :: id vs name  (0) 2016.03.01
1
2
3
4
5
<insert id="insert" parameterType="com.vo.Member" useGeneratedKeys="true" keyProperty="id">
        INSERT INTO members
        (password) 
        VALUES (password(#{password}));
</insert>
cs

 

password나 주민등록번호 같은 경우 암호화를 하여 저장해야 할 때가 있다.

INSERT INTO 테이블명 컬럼명 VALUES password(암호화할 문자열); 을 하면 된다.

1. export

phpAdmin에 접속한 뒤 export할 해당 테이블의 위에 있는 '내보내기'버튼을 누르고,

 

 

단에 있는 '파일로 저장' 부분에서 zip 압축을 클릭한 뒤 '실행' 버튼을 누르고 저장 경로를 설정 후 다운받는다.

설정한 경로에 가보면 sql 텍스트 파일로 안에 있는 테이블 정보를 확인할 수 있다.

 

 

2. import

import를 하기 전에, 데이터베이스 내에 동일한 이름으로 된 테이블이 존재하면 안 된다.

 

1) phpMyAdmin에서 import

 

 

데이터베이스를 클릭 >  'Import' > SQL 텍스트파일의 위치 찾아보기 > 압축을 푼 sql 파일 선택 > 업로드 > 실행 

 

 

성공적으로 import 되었음을 확인할 수 있다.

 

 

2) 명령 프롬프트 창에서 import

 

압축을 푼 sql 파일을 특정 경로에 놓고 명령 프롬프트에서 sql 파일이 있는 경로로 이동한다.

그 후 mysql -u 계정이름 -p 데이터베이스명 < 파일명.sql 을 하면 원하는 테이블을 import할 수 있다.

회원 가입을 받는 경우, 페이지 전체를 차지하는 큰 창이 아닌 조그마한 팝업 창을 띄워 받는 경우가 있다.

 

부모창(리스트)과 자식창(팝업창) 페이지 둘 다 자바스크립트를 걸어줘야 한다.

 

 

1. 부모창 페이지 소스

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
    <head>
    <script type="text/javascript">
        function insertPopup() {
            // window.name = "부모창 이름";            
            window.name = "MemberServlet.do";
            
            // window.open("자식창 이름", "불러올 자식 창의 닉네임", "팝업창 옵션");
            window.open("memberInsert_form.html""insert",
                    "width = 450, height = 320, resizable = no, scrollbars = no, status = no");
        }
    </script>
    </head>
    <body>
        // 회원가입에 링크를 걸어 팝업창을 띄운다.
        <a href="javascript:insertPopup();">[회원가입]</a><br>
    </body>
</html>
cs

 

 

 

 

 부모창에서 회원가입 링크를 누르면 이렇게 회원가입 페이지가 팝업 창으로 뜬다.

 

 

2. 자식창 페이지 소스

 

회원가입 항목을 전부 입력한 뒤 확인 버튼을 누르면 창이 닫히면서 리스트에 회원 명단이 자동으로 추가되어야 한다.

 

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
<html>
    <head>
    <script type="text/javascript">
        // 자동으로 팝업 창이 닫히게 하는 함수
        function popupClose(form) {
            // form의 target을 부모 창으로 설정함            
            form.target = opener.name;
            
            form.submit();
            
            if (opener != null) {
                opener.insert = null;
                
                self.close();
            }
        }
    </script>
    </head>
    <body>
    <form method="post" name="writeform" action="memberInsert_pro.jsp" target="MemberServlet.do">
        <input type="submit" value="확인" onclick="window.close()" >
        <input type="button" value="창 닫기" onclick="window.close()">
    </form>
    </body>
</html>
cs

 

 

자바스크립트 함수에서 target을 부모 창으로 설정한 뒤 form에도 target으로 부모 창을 적어줘야 한다.

 

원래는 submit에 onclick을 설정하지 않아도 self.close();만으로 닫혀야 하는데,

 

창이 닫히지 않아서 onclick에 window.close();로 이벤트를 줬다.

회원가입 창에서 주민등록번호를 입력하는 text type 부분에 문자가 아닌 숫자만 가능하게 하도록 하는 소스이다.

 

onkeyup과 onchange 이벤트를 이용하여 text 창에 숫자가 아닌 문자나 특수문자를 입력하면 그 즉시 자동으로 삭제된다.

 

 

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>주민등록번호 입력 예제</title>
<script type="text/javascript">
    function getTypeCheck(s, spc) {
        var i;
        
        for (i = 0; i < s.length; i++) {
            if (spc.indexOf(s.substring(i, i + 1)) < 0) {
                return false;
            }
        }
        
        return true;
    }
    
    function onlyNum(obj,n) {
        var re = /[^0-9]/gi;
        var NUM = "0123456789";
        var str_space = /\s/;
     
        if(n == undefined || n == null) {
            var n = "";
            var n2 = "";
        } 
        else {
            if(n == "") {
                var n = "";
                var n2 = "";
            } 
            else {
                var n = eval(n);
                var n2 = n;
            }
        }
     
        if(!getTypeCheck(obj.value, NUM)) {
            alert("숫자를 입력해주세요.");
            
            obj.value = obj.value.replace(re,"");
            obj.value = n2;
            
            obj.focus();
            
            return false;
        }
    }
</script>
</head>
<body>
    <h2>주민등록번호 입력 예제</h2>
    <input type="text" name="juminA" id="juminA" onkeyup="onlyNum(this, '');" onchange="onlyNum(this, '');" /> -
    <input type="text" name="juminB" id="juminB" onkeyup="onlyNum(this, '');" onchange="onlyNum(this, '');" />
</body>
</html>
cs

 

 

 

alert 창이 뜨면서 onkeyup 이벤트를 걸어놓았기 때문에 공백으로 문자가 지워진다.

-

검색 버튼을 누르면 키워드 검색을 하는 부분이다.

onkeydown을 이용하여 Enter키를 누름과 동시에 이벤트가 발생되도록 작성했다.

 

* onkeydown : 키를 누르는 즉시 발생하는 이벤트를 설계하는 용도이다.

 

 

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
<html>
<head>
<script type="text/javascript">
    // 검색 기능
    function searchCheck(form) {
            
        if (form.keyword.value == "") {
            alert("검색할 단어를 입력하세요.");
 
            form.keyword.focus();
            
            return;
        }
 
        // form.action으로 url 주소를 추가하는 방식으로 더함
        form.action += "personServlet.do";
        form.action += "?keyfield=" + form.keyfield.value;
        form.action += "&compare=" + document.querySelector("input[name = 'compare']:checked").value;
        form.action += "&keyword=" + form.keyword.value;
 
        form.submit();
    }        
</script>
</head>
<body>
<table>
    <tr>
        <td>
            <form method="post" name="search">
            <!-- onkeydown 이벤트 : 키보드 키를 누르는 즉시 발생하는 이벤트. -->
            <!-- event.keyCode == 13 : Enter 키의 코드가 13번임. 즉 Enter키를 누르면 발생하는 이벤트 함수. -->
            <input type="text" name="keyword" value="${cri.keyword}" 
                onkeydown = "if (event.keyCode == 13)
                                document.getElementById('btnSearch').click()" />
            <!-- 검색 기능을 하는 searchCheck function으로 이동-->
            <input type="button" id="btnSearch" value="검색" onclick="searchCheck(form)" />
            </form>
        </td>
    </tr>
</table>
</body>
</html>
cs

1. 정의

jQuery에서 제공하는 달력 형식의 UI 위젯 중 하나.

날짜를 다룰 때 UI 형식으로 쉽게 날짜를 선택하도록 도와줌.

 

 

2. 형식 소스

1) CDN 호스트를 사용하는 경우

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#datepicker").datepicker();
            });
        </script>
    </head>
    <body>
    <p>Date : <input type="text" id="datepicker"></p>
    </body>
</html>
cs

 

링크 형식을 stylesheet로 설정하고, script 사이트 링크를 거는 CDN 호스트를 사용했다.

 

 

2) 직접 내려받아 사용하는 경우

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="./js/jquery-ui.css">
        <script src="./js/jquery-1.8.3.js"></script>
        <script src="./js/jquery-ui.js"></script>        
        <script type="text/javascript">
            $(function () {
                $("#datepicker").datepicker();
            });
        </script>
    </head>
    <body>
    <p>Date : <input type="text" id="datepicker"></p>
    </body>
</html>
cs

 

프로젝트 내 js 폴더에 직접 다운받아 import 해줬다.

 

 기본 테마 디자인이다.

기호에 따라 테마를 다운받아 변경할 수도 있고, 달력의 속성을 변경할 수도 있다.

 

 

3. 테마 변경

http://jqueryui.com/themeroller/ 사이트 접속 > Gallery > 원하는 테마 Download 하여 경로 안에 -ui.js, -ui.css 파일을 덮어쓰기 한다.

 

 

적용된 테마 디자인 화면이다.

 

 

4. datepicker 속성 변경

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<script type="text/javascript" src="./js/script.js"></script>
<link rel="stylesheet" href="./js/jquery-ui.css">
<script src="./js/jquery-1.8.3.js"></script>
<script src="./js/jquery-ui.js"></script>
<script type="text/javascript">
    $(function() {
        $("#datepicker").datepicker({
            dateFormat : "yy-mm-dd",
            monthNamesShort : ['1월''2월''3월''4월''5월''6월''7월''8월''9월''10월''11월''12월'],
            dayNamesMin : ['일''월''화''수''목''금''토'],
            changeMonth : true,
            changeYear : true,
            yearRange : "c-70:c+70",
            showMonthAfterYear : true
        });
    });
</script>
</head>
<body>
cs

 

함수 안에 여러 옵션을 설정해주면 datepicker의 속성이 변경된다.

 

 

5. datepicker가 요청되는 순서

ㄱ. datepicker를 요청

ㄴ. id가 datepicker인 요소를 받음

ㄷ. return 후

ㄹ. 화면으로 출력

'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글

JavaScript :: getElementById() vs querySelector() 차이  (0) 2016.05.05
JavaScript :: onkeydown 이벤트 예제  (0) 2016.05.05
JavaScript :: typeof  (0) 2016.03.15
JavaScript :: 함수  (0) 2016.03.15
JavaScript :: window.location  (0) 2016.03.14

Servlet + jstl + JDBC 를 이용한 게시판 소스 중 JDBC DAO 파일 소스 전문 JDBC를 공부하다가, 

Mybatis로 발전해서 게시판 프로젝트 공부를 했었는데

다시 JDBC를 이용하여 혼자 힘으로 해보려니 조금 어려운 면이 있기도 했다.

 

확실히 Mybatis가 편하다.

 

 

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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
package com.dao;
 
import java.sql.*;
import java.util.*;
 
import com.vo.Person;
 
public class PersonDAO implements PersonDAOImpl {
 
    Connection conn = null;
    PreparedStatement pstmt = null;
    ResultSet rs = null;
    
    String url = "jdbc:mysql://localhost:3306/basicjsp?useUnicode=true&amp;characterEncoding=utf8&amp;zeroDateTimeBehavior=convertToNull";
    String id = "jspid";
    String pass = "jsppass";
    
    String sql = "";
        
    public void connectDB() {
        try {
            Class.forName("com.mysql.jdbc.Driver");
            
            conn = DriverManager.getConnection(url, id, pass);
        }
        catch (Exception e) {
            e.printStackTrace();
        }
    }
    
    @Override
    public List<HashMap<String, Object>> selectAll() {
        List<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
    
        try {
            
            sql = "SELECT id, name, sex, age, DATE_FORMAT(date, '%Y-%m-%d') AS date, rcount FROM persons";
            
            pstmt = conn.prepareStatement(sql);
            rs = pstmt.executeQuery();
            
            while (rs.next()) {    
                connectDB();
                
                HashMap<String, Object> params = new HashMap<String, Object>();
                
                params.put("id", rs.getInt("id"));
                params.put("name", rs.getString("name"));
                params.put("sex", rs.getString("sex"));
                params.put("age", rs.getInt("age"));
                params.put("date", rs.getShort("date"));
                params.put("rcount", rs.getInt("rcount"));
                
                params.put("column""id");
                params.put("sort""ASC");
                
                list.add(params);
            }
            
            conn.close();
            pstmt.close();
            rs.close();
        }
        catch (Exception e) {
            e.printStackTrace();
        }
        
        return list;
    }
 
    @Override
    public List<HashMap<String, Object>> selectAllLimit(int offset, int recordsPerPage,
            String sortItem, String sortMethod) {
        List<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
         
        try {
            connectDB();
            
            sql = "SELECT id, name, sex, age, DATE_FORMAT(date, '%Y-%m-%d') AS date, rcount FROM persons ";
            
            if (sortItem != null && sortItem.equals("id")) {
                sql += "ORDER BY id ";
            }
            else if (sortItem != null && sortItem.equals("name")) {
                sql += "ORDER BY name ";
            }
            else
                sql += "ORDER BY age ";
            
            if (sortMethod != null && sortMethod.equals("ASC")) {
                sql += "ASC ";
            }
            else {
                sql += "DESC ";
            }
            
            sql += "LIMIT " + offset + ", " + recordsPerPage;
            
            pstmt = conn.prepareStatement(sql);
 
            rs = pstmt.executeQuery();
            
            while (rs.next()) {
                HashMap<String, Object> params = new HashMap<String, Object>();
                
                params.put("id", rs.getInt("id"));
                params.put("name", rs.getString("name"));
                params.put("sex", rs.getString("sex"));
                params.put("age", rs.getInt("age"));
                params.put("date", rs.getString("date"));
                params.put("rcount", rs.getInt("rcount"));
                
                params.put("offset", offset);
                params.put("recordsPerPage", recordsPerPage);
                params.put("sortItem", sortItem);
                params.put("sortMethod", sortMethod);
                
                list.add(params);
            }
            
            conn.close();
            pstmt.close();
            rs.close();
        }
        catch (Exception e) {
            e.printStackTrace();
        }
        
        return list;
    } 
    
    @Override
    public Person selectById(int id) {
        Person person = new Person();
        
        try {
            connectDB();
            
            sql = "SELECT * FROM persons WHERE id = ?";
            
            pstmt = conn.prepareStatement(sql);
            
            pstmt.setLong(1, id);
            
            rs = pstmt.executeQuery();
            
            while (rs.next()) {
                person.setId(rs.getInt(1));
                person.setName(rs.getString(2));
                person.setSex(rs.getString(3));
                person.setAge(rs.getInt(4));
                person.setDate(rs.getString(5));
                person.setrCount(rs.getInt(6));
            }
            
            conn.close();
            pstmt.close();
            rs.close();
            
        } catch (Exception e) { }
        
        return person;
    }
 
    @Override
    public int selectCount() {
        int n = 0;
        
        try {
            connectDB();
            
            String sql = "SELECT COUNT(*) FROM persons";
            
            pstmt = conn.prepareStatement(sql);
            
            rs = pstmt.executeQuery();
            
            rs.next();
            
            n = rs.getInt(1);
            
            pstmt.close();
            rs.close();
            
        } catch (Exception e) { }
        
        return n;
    }
 
    @Override
    public int insert(Person person) {
        int id = -1;
        
        sql = "INSERT INTO persons (name, sex, age, rcount) VALUES (?, ?, ?, 0)";
        
        try {
            connectDB();
            
            pstmt = conn.prepareStatement(sql);
            
            pstmt.setString(1, person.getName());
            pstmt.setString(2, person.getSex());
            pstmt.setInt(3, person.getAge());
            
            pstmt.executeUpdate();
            
            pstmt.close();
            conn.close();
        }
        catch (SQLException e) {
            e.printStackTrace();
        }
        
        return id;
    }
 
    @Override
    public void update(Person person) {    
        sql = "UPDATE persons SET name = ? , sex = ?, age = ? WHERE id = ?";
        
        try {
            connectDB();
            
            pstmt = conn.prepareStatement(sql);
            
            pstmt.setString(1, person.getName());
            pstmt.setString(2, person.getSex());
            pstmt.setInt(3, person.getAge());
            pstmt.setInt(4, person.getId());
            
            pstmt.executeUpdate();
            
            pstmt.close();
            conn.close();
        }
        catch (Exception e) {
            e.printStackTrace();
        }
    }
 
    @Override
    public void updateCount(int id) {    
        sql = "UPDATE persons SET rcount = rcount + 1 WHERE id = ?";
        
        try {
            connectDB();
            
            pstmt = conn.prepareStatement(sql);
            
            pstmt.setInt(1, id);
            
            pstmt.executeUpdate();
            
            pstmt.close();
            conn.close();
        }
        catch (Exception e) {
            e.printStackTrace();
        }
    }
 
    @Override
    public void delete(int id) {
        sql = "DELETE FROM persons WHERE id = ?";
        
        try {
            connectDB();
            
            pstmt = conn.prepareStatement(sql);
            
            pstmt.setInt(1, id);
            
            pstmt.executeUpdate();
            
            pstmt.close();
            conn.close();
        }
        catch (Exception e) {
            e.printStackTrace();
        }    
    }
}
cs

 

 

- selectAll : 리스트 전체 출력 메소드

- selectAllLimit : 정렬 방식에 따라 변경되는 리스트 출력 메소드

if문과 LIMIT 를 이용한 쿼리를 구현하는데에서 시행착오가 조금 있었다.

- selectById : 특정 게시글을 선택했을 때 해당 글 하나의 정보만을 출력하는 메소드

- selectCount : 전체 리스트 수를 출력하는 메소드

- insert : 게시글 삽입 메소드

- update : 게시글 수정 메소드

- updateCount : 게시글 조회수 증가 메소드

- delete : 게시글 삭제 메소드

'BackEnd > Java' 카테고리의 다른 글

Java :: Random 함수  (0) 2016.06.05
Jsp :: jsp 내장객체  (0) 2016.06.03
Java :: 패키지 이름 명명 규칙  (0) 2016.04.02
Servlet :: Servlet(서블릿) 이란?  (0) 2016.04.01
Java :: 다형성  (1) 2016.03.23

<pre> ~ </pre>

 

Line break, 강제적 줄바꿈

일반적으로 html에서는 키보드의 enter, tab, space 등을 무조건 공백 하나로만 취급함

그러나 <pre> 태그 안의 문자열들에 대해서는 원하는 곳에 배치 가능

공백이나 문장 구조를 쉽게 표현 가능

다른 태그를 안에 사용하면 안 됨

여러 줄의 코드를 그대로 출력하고자 할 때 블록 형태로 사용됨

 





<pre> 태그 쓰지 않았을 때




<pre> 태그 썼을 때

+ Recent posts