[ITWILL : JSP]홈페이지만들기2 : 아이디중복체크 포함한 회원가입기능 구현

ITWILL학원 : 34강 JSP기초 BY 정규태강사

1. 회원가입기능 구현

1-1. joinForm.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
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
<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<jsp:include page="../inc/top.jsp"></jsp:include>
<!-- 헤더들어가는 곳 -->

<!-- 본문들어가는 곳 -->
<!-- 본문메인이미지 -->
<div id="sub_img_member"></div>
<!-- 본문메인이미지 -->

<!-- 왼쪽메뉴 -->
<nav id="sub_menu">
<ul>
<li><a href="#">회원가입</a></li>
<li><a href="#">개인정보취급방침</a></li>
</ul>
</nav>
<!-- 왼쪽메뉴 -->

<!-- 본문내용 -->
<article>
<h1>Join Us</h1>
<form action="joinPro.jsp" method="post" id="join" name="fr" onsubmit="return check();">
<!-- 필수입력사항 -->
<fieldset>
<legend>필수입력사항</legend>
<label>아이디</label>
<input type="text" name="id" class="id">
<input type="button" value="중복확인" class="dup" onclick="winopen()"><br>
<label>비밀번호</label>
<input type="password" name="pw" placeholder="영문숫자조합 4자리이상" required><br>
<label>비밀번호확인</label>
<input type="password" name="pass2" required><br>
<label>이름</label>
<input type="text" name="name" required><br>
<label>이메일</label>
<input type="email" name="email" placeholder="예시 : funweb@funweb.com (@포함기입)" required><br>
<label>생년월일</label>
<input type="text" name="birth" placeholder="예시 : 801231 (6자리)" maxlength="6" required><br>
<label>성별</label>
<input type="radio" name="gender" value="f">여
<input type="radio" name="gender" value="m">남<br>
</fieldset>

<!-- 선택입력사항 -->
<fieldset>
<legend>선택입력사항</legend>
<label>주소</label>
<!-- <input type="text" name="address"><br> -->

<input type="text" id="sample4_postcode" placeholder="우편번호">
<input type="button" onclick="daumPostcode()" value="우편번호 찾기"><br>
<label>도로명주소(자동입력)</label>
<input type="text" name="addr" id="sample4_roadAddress" placeholder="우편번호찾기를 이용해주세요" readonly><br>
<input type="hidden" id="sample4_jibunAddress" placeholder="지번주소">
<span id="guide" style="color:#999;display:none"></span>
<input type="hidden" id="sample4_extraAddress" placeholder="참고항목">

<label>휴대폰번호</label>
<input type="text" name="mobile" placeholder="예시 : 010-1234-5678" maxlength="13"><br>
</fieldset>

<div class="clear"></div>
<div id="buttons">
<input type="submit" value="회원가입" class="submit">
<input type="reset" value="초기화" class="cancel">
</div>
</form>
</article>
<!-- 본문내용 -->
<!-- 본문들어가는 곳 -->

<div class="clear"></div>

<!-- 푸터들어가는 곳 -->
<jsp:include page="../inc/bottom.jsp"></jsp:include>
<!-- 푸터들어가는 곳 -->
</div>


<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

<!-- 유효성체크 : 데이터 빈공백체크(id와 성별) -->
<script type="text/javascript">
function check(){
//아이디가 입력이 안되어있을 경우 아이디입력하라는 메세지 출력
if(document.fr.id.value == "" || document.fr.id.value.length < 0){
alert("아이디를 입력해주세요")
history.back()
document.fr.id.focus();
return false;
}

if(document.fr.gender[0].checked == false && document.fr.gender[1].checked == false){
alert("성별을 확인해주세요")
history.back()
document.fr.id.focus();
return false;
}
}

<!-- 아이디중복체크 -->
function winopen(){
//새창을 열어서 페이지를 오픈 후 -> 회원아이디정보를 가지고 중복체크
//아래 2-1에 구현
}

//도로명주소 카카오API사용
function daumPostcode() {
new daum.Postcode({
(생략)
}).open();
}

</script>
</body>

1-2. joinPro.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
<%
//1. 한글처리
request.setCharacterEncoding("UTF-8");

%>
<!-- 2. 전달되는 데이터 입력(저장) => 자바빈 객채, 액션태그사용-->
<jsp:useBean id="mb" class="com.itwillbs.member.MemberBean" />
<jsp:setProperty property="*" name="mb"/>
<%
//3. 현재 날짜정보저장(또는 DAO에서 sql구문 작성시 now()를 이용해서 현재시각을 DB에 바로 담을 수 있다.)
mb.setRe_date(new Date(System.currentTimeMillis()));

//4. MemberDAO객체생성 -> 전달받은 정보 모두 저장
MemberDAO mdao = new MemberDAO();

//5. 회원 가입 메서드 (insertMember())
mdao.insertMember(mb);
%>

//6. 회원가입 완료시 로그인페이지로 이동
<script type="text/javascript">
alert("회원가입성공")
location.href="loginForm.jsp";
</script>

1-3. MemberDAO에 insertMember()메서드생성

  • 매개변수 6개 이상이면 성능이 급격하게 떨어진다는 연구결과가 있음
  • 매개변수가 6개이상일때는 javabean을 이용하여 받아오는 것이 성능에 좋다
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
//회원가입메서드
private void insertMember(MemberBean mb){
try {
con = getCon();
sql = "insert into fun_member values (?,?,?,?,?, "
+"?,?,?,?)";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, mb.getId());
pstmt.setString(2, mb.getPw());
pstmt.setString(3, mb.getName());
pstmt.setString(4, mb.getEmail());
pstmt.setInt(5, mb.getBirth());
pstmt.setString(6, mb.getGender());
pstmt.setString(7, mb.getAddr());
pstmt.setString(8, mb.getMobile());
pstmt.setDate(9, mb.getRe_date());

pstmt.executeUpdate();
System.out.println("회원가입성공");
} catch (NamingException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (Exception e) {
System.out.println("회원가입성공");
e.printStackTrace();
} finally {
closeDB();
}
}//insertMember메서드닫음

2. 아이디중복체크 구현

2-1. joinForm.jsp 추가작성

  • input태그에 onclick=”winopen()”을 설정해준 뒤 아래 winopen()함수를 생성한다.

  • 요즘은 버튼을 클릭하는 대신 제이쿼리의 ajax라이브러리를 사용하여 keydown이나 keyup function을 이용한 비동기처리방식을 사용한다

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

<!-- 필수입력사항 -->
<fieldset>
<legend>필수입력사항</legend>
<label>아이디</label>
<input type="text" name="id" class="id">
<input type="button" value="중복확인" class="dup" onclick="winopen()"><br>
<label>비밀번호</label>
<input type="password" name="pw" placeholder="영문숫자조합 4자리이상" required><br>
<label>비밀번호확인</label>
<input type="password" name="pass2" required><br>
<label>이름</label>
<input type="text" name="name" required><br>
<label>이메일</label>
<input type="email" name="email" placeholder="예시 : funweb@funweb.com (@포함기입)" required><br>
<label>생년월일</label>
<input type="text" name="birth" placeholder="예시 : 801231 (6자리)" maxlength="6" required><br>
<label>성별</label>
<input type="radio" name="gender" value="f">
<input type="radio" name="gender" value="m"><br>
</fieldset>


<!-- 아이디중복체크 -->
function winopen(){
//새창을 열어서 페이지를 오픈 후 -> 회원아이디정보를 가지고 중복체크
//1. 아이디가 없으면 알림창과 진행x
if(document.fr.id.value =="" || document.fr.id.value.length < 0){
alert("아이디를 먼저 입력해주세요")
document.fr.id.focus();
}else{
//2. 회원정보아이디를 가지고 있는 지 체크하려면 DB에 접근해야한다.
//자바스크립트로 어떻게 DB에 접근할까? => 파라미터로 id값을 가져가서 jsp페이지에서 진행하면 된다.
window.open("joinIdCheck.jsp?userid="+document.fr.id.value,"","width=500, height=300");
}
}

2-2. joinIdCheck.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
55
56
57
58
59
60
61
62
63
64
<%@page import="com.itwillbs.dao.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>아이디중복체크</h2>
<%//1. 한글처리 & 받아온 파라미터 변수화
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("userid");

//2. MemberDAO객체생성 -> 전달받은 정보 모두 저장
MemberDAO mdao = new MemberDAO();

//3. joinIdCheck(ID)메서드
int result = mdao.joinIdCheck(id);
if (result == 1){
out.print("사용가능한 아이디입니다");
//5. 아이디사용하기버튼추가 => 동기방식사용 but 요즘은 비동기방식을 더 많이사용한다
%>
<input type="button" value="아이디 사용하기" onclick="result();">
<%

}else if(result == 0){
out.print("중복된 아이디입니다");
}else{
out.print("에러 발생!!!(-1)");
}

%>
<!-- 4.팝업창구현 -->
<fieldset>
<!-- <form action="" method="post">
action속성에 값이 없으면 기본적으로 자기자신을 불러오지만 중복확인 버튼을 클릭했을때 변경되지않는다.-->
<form action="joinIdCheck.jsp" method="post" name="wfr">
ID : <input type="text" name="userid" value="<%=id%>">
<input type="submit" value="중복 확인">
</form>
</fieldset>

<!-- 6. 선택된아이디는 중복확인창에서 회원가입 페이지로 정보전달 -->
<script type="text/javascript">
function result(){
//팝업창의 아이디정보를 회원가입창에 아이디정보로 전달
//팝업창은 기존창과 종속관계를 가지고 있으므로 opener를 이용하면 된다.
//alert("팝업창의 id값"+document.wfr.userid.value + ", 회원가입창의 id값 : " +opener.document.fr.id.value)
//6-1. 회원가입페이지의 id값에 아이디중복으로 선택된 id값을 대입.
opener.document.fr.id.value = document.wfr.userid.value;

//6-3. 회원가입창 제어
//readonly 속성제어(커멜표기가 아닐때는 제어가 안됨 신기하네 ㅋㅋㅋ)
opener.document.fr.id.readOnly=true;

//6-2. 창닫기
window.close();
}

</script>

</body>

2-3. MemberDAO.java에 joinIdCheck()메서드 구현

rs데이터 처리

  • 1 - 사용 가능한 아이디
  • 0 - 사용 불가능한 아이디
  • -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
//아이디중복체크 메서드
public int joinIdCheck(String id){
int result = -1;
try {
//1. DB연결
con = getCon();
//2. sql 구문 & pstmt생성
sql = "select id from fun_member where id=?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, id);

//3. 실행 -> select -> rs저장
rs = pstmt.executeQuery();

//4. 데이터처리

if(rs.next()){
result = 0;
}else{
result = 1;
}

System.out.println("아이디 중복체크결과 : "+result);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
closeDB();
}
return result;
}//joinIdCheck 메서드닫음

[ITWILL : JSP]홈페이지만들기3 : 로그인/로그아웃 기능 구현

ITWILL학원 : 34강 JSP기초 BY 정규태강사

1. loginForm.jsp 생성

  • header include하기 : jsp:include page="../inc/top.jsp"
  • footer include하기 : jsp:include page="../inc/bottom.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
<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<jsp:include page="../inc/top.jsp"></jsp:include>
<!-- 헤더들어가는 곳 -->

<!-- 본문들어가는 곳 -->
<!-- 본문메인이미지 -->
<div id="sub_img_member"></div>
<!-- 본문메인이미지 -->
<!-- 왼쪽메뉴 -->
<nav id="sub_menu">
<ul>
<li><a href="#">Join us</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</nav>
<!-- 왼쪽메뉴 -->
<!-- 본문내용 -->
<article>
<h1>로그인</h1>
<form action="loginPro.jsp" id="join" method="post">
<fieldset>
<legend>로그인정보</legend>
<label>아이디</label> <input type="text" name="id"><br>
<label>비밀번호</label> <input type="password" name="pw"><br>
</fieldset>
<div class="clear"></div>
<div id="buttons">
<input type="submit" value="Submit" class="submit">
<input type="reset" value="Cancel" class="cancel">
</div>
</form>
</article>
<!-- 본문내용 -->
<!-- 본문들어가는 곳 -->

<div class="clear"></div>
<!-- 푸터들어가는 곳 -->
<jsp:include page="../inc/bottom.jsp"></jsp:include>
<!-- 푸터들어가는 곳 -->
</div>
</body>

2. loginPro.jsp생성

  • int데이터타입으로 변수받아서 데이터처리.
  • 아이디와 비밀번호가 DB와 일치시 main.jsp페이지로 이동.
  • 아이디와 비밀번호가 DB와 불일치시 뒤로가기.
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
<% //1. 한글처리 및 변수가져오기
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String pw = request.getParameter("pw");

//2. MemberDAO객체생성 -> idcheck(id, pw) 메서드생성
MemberDAO mdao = new MemberDAO();
int result = mdao.idCheck(id, pw);

//3.데이터처리
if(result == 1){
//아이값을 세션객체에 저장
session.setAttribute("id", id); //두번째파라미터에서 업캐스팅발생 object->String
System.out.println("아디일치비번일치->로그인성공");
response.sendRedirect("../main/main.jsp");
}else if(result == 0){
System.out.println("아디일치,비번불일치->로그인실패");
%>
<script type="text/javascript">
alert("비밀번호가 일치하지 않습니다");
history.back();
</script>
<%
}else{
System.out.println("아디불일치,비번불일치->로그인실패");
%>
<script type="text/javascript">
alert("존재하지않는 아이디입니다");
history.back();
</script>
<%
}
%>

3. memberDAO.java에 idCheck()메서드 생성

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
public int idCheck(String id, String pw){
int result = -1;

try {
//1.DB여결
con = getCon();
//2.SQL & PSTMT
sql = "select pw from fun_member where id=?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, id);
//3.실행 -> rs -> 데이터처리
rs = pstmt.executeQuery();
if(rs.next()){
if(pw.equals(rs.getString("pw"))){
result = 1;
}else{
result = 0;
}
}
} catch (Exception e) {
e.printStackTrace();
} finally { //4.자원해제
closeDB();
}
return result;
}//idCheck메서드 닫음

4. top.jsp 추가

  • 로그인한 경우 id님 환영합니다와 함께 로그인 버튼을 로그아웃으로 변경
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
<% //화면상단에 위치하는 메뉴바 처리페이지
String id = (String)session.getAttribute("id"); //다운캐스팅 Object -> String
%>
<header>
<div id="login">
<%if(id == null){
%>
<div id="login"><a href="../member/loginForm.jsp">로그인</a> | <a href="../member/joinForm.jsp">회원가입</a></div>
<%
}else if(id != null){
%>
<div id="login"><%=id %>님 환영합니다 | <a href="../member/logout.jsp">로그아웃</a></div>
<%
}
%>
</div>
<div class="clear"></div>
<!-- 로고들어가는 곳 -->
<div id="logo"><img src="../images/logo.gif" width="265" height="62" alt="Fun Web"></div>
<!-- 로고들어가는 곳 -->
<nav id="top_menu">
<ul>
<li><a href="../index.jsp">홈</a></li>
<li><a href="../company/welcome.html">회사소개</a></li>
<li><a href="#">솔루션</a></li>
<li><a href="../center/notice.jsp">고객센터</a></li>
<li><a href="#">무엇이든 물어보세요</a></li>
</ul>
</nav>
</header>

5. logout.jsp 생성

1
2
3
4
5
6
7
8
<%
session.invalidate();
System.out.println("로그아웃성공");
%>
<script type="text/javascript">
alert("정상적으로 로그아웃 되었습니다");
location.href="../main/main.jsp";
</script>

[ITWILL : JSP]홈페이지만들기1 : 프로젝트 시작 설정 및 자바빈생성과 DB연결

ITWILL학원 : 33강 JSP기초 BY 정규태강사

html로 만들어진 홈페이지를 jsp로 변경해보자.

1. main.jsp 생성

  • path설정

    • / 와 ./는 현재폴더
    • ../는 상위폴더
  • 페이지 인클루드 2가지방법

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- JSP 지시어 : 공통으로 사용되는 변수를 파일에 지정해서 추가 -->
    <%@ include ~ %>

    <!-- 액션태그 : 공통으로 사용되는 메뉴들을(페이지) 특정 공간에 추가 -->
    <jsp:include page="">

    <!-- 예시 -->
    <jsp:include page="../inc/top.jsp"></jsp:include>
  • 코드블록 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<div id="wrap">

<!-- 헤더파일들어가는 곳 (page Include)-->
<jsp:include page="../inc/top.jsp"></jsp:include>
<!-- 헤더파일들어가는 곳 (page Include)-->

<!-- 메인이미지 들어가는곳 -->
<!-- 메인이미지 들어가는곳 -->

<!-- 메인 콘텐츠 들어가는 곳 -->
<!-- 메인 콘텐츠 들어가는 곳 -->

<!-- 푸터 들어가는 곳 -->
<jsp:include page="../inc/bottom.jsp"></jsp:include>
<!-- 푸터 들어가는 곳 -->

</div>
</body>

2. index.jsp생성

1
2
3
4
<%//프로젝트의 시작페이지 구현

response.sendRedirect("./main/main.jsp");
%>

3. top.jsp 생성

화면상단에 위치하는 메뉴바 처리페이지

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- html코드가 필요없다  (html body태그안에 넣어도 되고 html태그 없어도 됨)-->

<% //화면상단에 위치하는 메뉴바 처리페이지

%>
<header>
<div id="login"><a href="../member/loginForm.jsp">login</a> | <a href="../member/joinFrom.jsp">join</a></div>
<div class="clear"></div>
<!-- 로고들어가는 곳 -->
<div id="logo"><img src="../images/logo.gif" width="265" height="62"></div>
<!-- 로고들어가는 곳 -->
<nav id="top_menu">
<ul>
<li><a href="../index.jsp">HOME</a></li>
<li><a href="../company/welcome.html">COMPANY</a></li>
<li><a href="#">SOLUTIONS</a></li>
<li><a href="../center/notice.html">CUSTOMER CENTER</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
</header>

4. bottom.jsp 생성

화면하단에 위치하는 footer 처리페이지

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- html코드가 필요없다  (html body태그안에 넣어도 되고 html태그 없어도 됨)-->

<% //화면하단에 위치하는 footer 처리페이지

%>
<footer>
<hr>
<div id="copy">All contents Copyright 2011 FunWeb 2011 FunWeb
Inc. all rights reserved<br>
Contact mail:funweb@funwebbiz.com Tel +82 64 123 4315
Fax +82 64 123 4321</div>
<div id="social">
<img src="../images/Instagram.gif" width="33" height="33" alt="Instagram">
<img src="../images/twitter.gif" width="34" height="34" alt="Twitter">
</div>
</footer>

5. joinForm.jsp 생성

원하는 회원가입 폼양식 생성하면 된다.
코드블록은 생략하도록 한다.

6. joinPro.jsp 생성

자바빈을 작성하려면 테이블이 생성되어있어야한다.
joinPro.jsp의 남은 코드는 순서대로 아래에 추가해서 작성할 예정이다.

1
2
3
4
5
<%
// 한글처리
request.setCharacterEncoding("UTF-8");
// 전달되는 데이터 입력(저장) => 자바빈 이용
%>

7. MySQL에서 테이블생성

  • 자바빈을 작성하려면 테이블이 생성되어있어야한다.

  • 회원테이블 정보 : 제약조건

    • 아이디(id) : pk
    • 비밀번호(pw) : nn
    • 이름(name) : nn
    • 이메일(email) : nn, uq
    • 생년월일(birth) : nn
    • 성별(gender) : nn
    • 주소(addr)
    • 휴대폰번호(mobile)
    • re_date : 가입일자
    • 전화번호 : 보통 실무에서 varchar를 이용하는 것이 편하다
    • 생년월일 : int나 varchar를 쓰는데, 실무에선 varchar로 받아서 바로 이용하는 것이 편하다

8. MemberBean.java생성

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

package com.itwillbs.member;

import java.sql.Date;

//1번규약 :public 클래스
public class MemberBean {
//자바빈은 항상 패키지를 포함해야한다.
//데이터를 저장하는 객체(한번에 회원정보를 저장가능한 객체) => DB에 데이터전달

//2번 규약: private멤버변수
private String id;
private String pw;
private String name;
private String email;
private int birth;
private String gender;
private String addr;
private String mobile;
private Date re_date;

//4번규약 : 디폴트생성자

//3번규약 : getter, setter
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}

(중략)

//5번 선택: toString
/* (non-Javadoc)
* @see java.lang.Object#toString()
*/
@Override
public String toString() {
return "MemberBean [id=" + id + ", pw=" + pw + ", name=" + name + ", email=" + email + ", birth=" + birth
+ ", gender=" + gender + ", addr=" + addr + ", mobile=" + mobile + ", re_date=" + re_date + "]";
}
}

9. MemberDAO.java 생성

DB연결과 자원해제 메서드를 생성한다

  • 자원해제는 사용한 객체 역순으로 진행하는 것이 안전하게 자원해제할 수 있다
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
import javax.sql.DataSource;

public class MemberDAO {

Connection con = null;
String sql = "";
PreparedStatement pstmt = null;
ResultSet rs = null;

//디비연결메서드
/*private void getCon() throws NamingException, SQLException {
//Context 객체 생성
//Context인터페이스이기때문에 직접객체생성할 수 없어서 InitialContext클래스를 사용해서 객채생성
//예외처리 : throws사용하는 방법
Context init = new InitialContext(); //업캐스팅
//디비연결정보를 불러오기 ->DataSource 타입으로 저장
// 고정문구"java:comp/env/다른문구context파일의 name값입력"
DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/mysqlDB");
//ds 사용해서 연결
//멤버변수는 static이 아니기때문에 new BoardDAO();객체생성 후에 멤버변수들이 생성된다.
//그리고 getCon()메서드를 하면 멤버변수 con에 데이터(ds.getConnection();)가 담기게 된다.
//따라서 이때 return하지 않고 써도된다.
con = ds.getConnection();
System.out.println("디비연결성공 :"+con);
}
*/
private Connection getCon() throws Exception {
Context init = new InitialContext();
DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/funwebDB");

return con;
}

//자원해제메서드
public void close(){
try{
if(rs != null) rs.close();
if(pstmt != null) pstmt.close();
if(con != null) con.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}

10. context.xml 생성

주요 체크사항
- name : 사용할 이름으로 작성
- url : 테이블이 있는 DB경로
- username과 password

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>
<!-- 디비연결에 필요한 정보 저장 -->
<Context>
<Resource
name="jdbc/fubwebDB"
auth="Container"
type="javax.sql.DataSource"
driverClassName="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/funwebdb"
username="root"
password="1234"
/>
</Context>
SQL의 OBJECT종류 : 인덱스(Index), 시노님(Synonym)

[ITWILL : JSP]Javabean 14 : 게시판만들기(ServletContext사용하여 파일업로드와 다운로드)

ITWILL학원 : 32강 JSP기초 BY 정규태강사

UTF-8인코딩을 기본으로 ServletContext이용하여 가상경로에 파일을 저장하는 파일업로드와 다운로드기능 구현

1. webcontent 하위 새로운 폴더 2개 생성 : fileuputf, upload

앞으로 파일다운로드기능구현시 생성되는 jsp, html페이지를 이 폴더(fileuputf)안에 생성한다.
업로드되는 파일들은 upload라는 폴더안에 들어가게 된다.=> 가상경로라고 부른다.

2. fileUploadForm.jsp 생성

1
2
3
4
5
6
7
8
<fieldset>
<form action="fileUploadPro.jsp" method="post" enctype="multipart/form-data">
작성자 : <input type="text" name="name"><br>
제목 : <input type="text" name="subject"><br>
파일 : <input type="file" name="file"><br>
<input type="submit" value="파일업로드">
</form>
</fieldset>

3. fileUploadPro.jsp 생성

  1. 가상경로

  2. MultipartRequest객체생성 : request정보를 직접 가져올 수 없고 multi를 통해서 가져올 수 있다.

  3. Enumeration : 다음 요소가 있으면 반환해주는 인터페이스.

  4. 파일업로드 기능은 예외가 많이때문에 예외처리를 해야한다

  5. 사용자가 입력한 데이터를 fileCheck.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!-- 파일 업로드 처리  -->
<%
//1. 파일 저장 위치 (가상경로) 만들기
// D:\workspace_jsp7\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\fileUpload/upload
//System.out.println("가상경로 : "+request.getRealPath("/upload"));
String uploadPath = request.getRealPath("/upload");

//2. 저장 크기 지정 (10MB)
int maxSize = 10 * 1024 * 1024;

//3. 정보를 저장하는 변수 만들기
String name ="";
String subject ="";
String filename = ""; //서버에 올라갈 파일명
String OFilename = ""; //오리지널 파일명

//6. 예외처리
try{
//4. MultipartRequest 객체생성
//4-1. cos 라이브러리 추가
//4-2. 객체 생성
//request정보를 직접가져올 수 없고 multi를 통해서 가져올 수 있다.
MultipartRequest multi = new MultipartRequest(request, uploadPath,
maxSize, "UTF-8", new DefaultFileRenamePolicy());

//5. 파일업로드완료
//5-1. 전달되는 이름, 제목 저장
name = multi.getParameter("name");
subject = multi.getParameter("subject");
//5-2. 전달된 파일의 이름 확인
Enumeration files = multi.getFileNames(); //업캐스팅
String file1 = (String) files.nextElement(); //위의 업캐스팅한 걸 다운캐스팅
//5-3. 서버에 저장되는 파일 이름
filename = multi.getFilesystemName(file1);
System.out.println("filename : "+filename);
//5-4. 원래 파일이름
OFilename = multi.getOriginalFileName(file1);
System.out.println("OFilename : "+OFilename);
//여기까지 업로드 기능 구현 완료! => 6. 파일업로드는 예외가 많이때문에 예외처리를 해야한다
}catch(Exception e){
e.printStackTrace();
}
%>

<!-- 데이터를 전달하기
enctype안적어도 될까? 업로드 유무로 판단!
업로드할꺼면 필요, 업로드하지않을거면 필요하지않다
아래처럼 input type을 text로 그냥 가져가면 중요한 정보들이 유출될 수있다.
보안을 위해 2가지 방법이 있다.
1안은 submit버튼사용 2안은 a태그사용한 방법이다. 편한 걸로하면되지만 보통 2안으로 많이한다
-->

<%-- <form action="fileCheck.jsp" method="post">
<input type="text" name="name" value="<%=name %>" readonly><br>
<input type="text" name="subject" value="<%=subject %>"><br>
<input type="text" name="filename" value="<%=filename %>"><br>
<input type="text" name="ofilename" value="<%=OFilename %>"><br>
<input type="submit" value="확인하기">
</form> --%>

<!-- 1안 : form태그는 보여주지않는 않고 fileCheck에서 출력할 것이므로 hidden으로 type을 지정 후 submit버튼 이용-->
<form action="fileCheck.jsp" method="post">
<input type="hidden" name="name" value="<%=name %>" readonly><br>
<input type="hidden" name="subject" value="<%=subject %>"><br>
<input type="hidden" name="filename" value="<%=filename %>"><br>
<input type="hidden" name="ofilename" value="<%=OFilename %>"><br>
<input type="submit" value="올린 파일 정보하기">
</form>

<!-- 2안 : hidden때문에 생성된 submit버튼 위의 빈칸이 신경쓰이면 a태그를 이용가능.
a태그를 이용하여 post방식 어떻게 데이터를 전달할수있을까? 이때 js를 사용한다 onclick="javascript:filecheck.submit" -->
<form action="fileCheck.jsp" method="post" name="filecheck">
<input type="hidden" name="name" value="<%=name%>"><br>
<input type="hidden" name="subject" value="<%=subject%>"><br>
<input type="hidden" name="filename" value="<%=filename%>"><br>
<input type="hidden" name="ofilename" value="<%=OFilename%>"><br>
</form>
<a href="#" onclick="javascript:filecheck.submit();">업로드 확인 및 다운로드 페이지로 이동</a>

4. fileCheck.jsp생성

  • 사용자가 입력한 정보를 체크하고 파일명을 눌렀을때 다운로드 가능하도록 file_down.jsp로 이동하는 기능 구현
  • 서버에 저장된 파일명의 a태그에서 get방식으로 파라미터로 정보를 전달한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<h2>업로드하지 않고 확인용으로 전달받은 데이터 화면에 출력</h2>
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String subject = request.getParameter("subject");
String filename = request.getParameter("filename");
String ofilename = request.getParameter("ofilename");
%>


<fieldset>
<legend>업로드 정보 확인용</legend>
작성자명 : <%=name %><br>
제목 : <%=subject %><br>
서버에 저장된 파일명 : <a href="file_down.jsp?file_name=<%=filename %>"> <%=filename %></a><br>
원본파일명 : <%=ofilename %><br>
</fieldset>

5. file_down.jsp 생성

  1. servletContext : 지금 쓰고있는 내 프로젝트 정보.

  2. MIME타입 : 클라이언트에게 전송되는 데이터(문서)를 다양하게 처리 가능하도록 하는 메커니즘
    웹에서 파일의 확장자는 큰 의미가 없음(스트림형태로 데이터가 전달) -> 스트림형태일때는 데이터 구분못함.
    따라서 각 데이터(문서)에서 올바른 형태의 데이터를 전달하도록 MIME 타입을 지정
    브라우저들이 응답정보(리소스)를 받았을때 어떤 형태로 처리해야하는지 판단하는 기준
    마임타입을 가져오는 방법은 getServletContext().getMimeType()으로 가능

  3. 브라우저에 따른 데이터 처리(대응)

    • 왜 인터넷익스플로러를 기준으로 나눌까?

      • 인터넷익스폴러는 다운로드시 한글파일이 깨짐 -> 따라서 파일을 인코딩해서 다운로드함
      • 이때 공백문자가 플러스(+)기호로 나옴 -> 이걸 %20으로 변경
    • 인터넷익스플로러인지 아닌지는 어떻게 구분할까?

      • 접속한 사용자정보(User-Agent)를 불러와서 indexOf사용하여 MSIE이나 Trident이 들어가 있으면 익스플로러이다.
        1
        2
        3
        String agent = request.getHeader("User-Agent");
        System.out.println("agent : "+ agent);
        boolean ieBrowser = agent.indexOf("MSIE") > -1 || agent.indexOf("Trident") > -1;
  4. 데이터다운로드 처리

    • 브라우저가 응답정보를 읽어서(해석) 처리시 “Content-Disposition” 설정값이 “attachment;” 모든 데이터 다운로드 처리한다.

    • 만약 설정안하게되면 어떻게 될까? 브라우저의 기본값에 의해 처리한다.

  5. 데이터 출력(다운로드)

    • flush() : 데이터가 담긴 배열이 꽉 차지 않았을때는 데이터를 출력하지않는다. 이때 flush가 배열의 빈 공간을 공백으로 채워서 데이터 출력되도록 만들어준다.
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
<%@page import="java.net.URLEncoder"%>
<%@page import="javax.activation.MimeType"%>
<%@page import="java.io.FileInputStream"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<% //1. 전달받은 데이터 저장
String filename = request.getParameter("file_name");
System.out.println(" 전달된 파일 명 : "+filename);

//2. 파일 다운로드할 위치(= 파일 업로드 위치) =>가상경로
//savepath는 저장되는 폴더명
String savepath = "upload";

//3. 내 프로젝트 정보(ServletContext)안에서 가상경로를 실제경로로 계산해줘야한다.
//3-1. 서버안에 있는 물리적 위치 확인
ServletContext context = getServletContext();
String DownloadPath = context.getRealPath(savepath);
System.out.println("DownloadPath : "+DownloadPath);
//3-2. 다운로드할 파일의 전체 경로
//역슬러시 두개는 이스케이프문자로서 역슬러시 1개만 표현됨
String FilePath = DownloadPath+"\\"+filename;
//여기까지다운로드기능완료

//4. 데이터 응답처리를 다운로드 형태로 구현
//4-1. 파일을 한번에 처리하기위한 배열
byte[] b = new byte[4069];

//4-2. 파일입출력을 처리하는 파일 입력 스트림 객체생성(즉, 파일을 읽어오는 통로만들기)
FileInputStream fis = new FileInputStream(FilePath);

//4-3. 다운로드할 파일의 마임타입 확인(mime)
//=> 클라이언트에게 전송되는 데이터(문서)를 다양하게 처리 가능하도록 하는 메커니즘
String MimeType = getServletContext().getMimeType(FilePath);
System.out.println("Mime type: "+MimeType);

if(MimeType == null){
//기본값 지정 - 이진파일을 처리하기위한 기본타입
//-> 잘 알려지지 않은 파일을 의미하기때문에
//-> 브라우저는 보통 자동실행을 안하고 대화상자를 이용하여 사용자에게 실행할지 질문함
MimeType = "application/octet-stream";
}

//4-4내 응답정보를 마임타입으로 지정
response.setContentType(MimeType);

//5. 브라우저에 따른 데이터 처리(대응)
//왜 인터넷익스플로러를 기준으로 나눌까?
//인터넷익스폴러는 다운로드시 한글파일이 깨짐 -> 따라서 파일을 인코딩해서 다운로드함
//이때 공백문자가 플러스(+)기호로 나옴 -> 이걸 %20(공백)으로 변경

//익스인지 아닌지는 어떻게 알까?
String agent = request.getHeader("User-Agent");
System.out.println("agent : "+ agent);
boolean ieBrowser =
agent.indexOf("MSIE") > -1 || agent.indexOf("Trident") > -1;

if(ieBrowser){ // IE 일때 : +를 %20(공백)으로 변경
filename = URLEncoder.encode(filename, "UTF-8").replaceAll("\\+", "%20");
}else{ // IE 아닐때 : 데이터인코딩(한글깨짐방지)
filename = new String(filename.getBytes("UTF-8"), "iso-8859-1");
}

//6. 데이터다운로드 처리
//브라우저가 응답정보를 읽어서(해석) 처리시
//"Content-Disposition" 설정값이 "attachment;" 모든 데이터 다운로드 처리
response.setHeader("Content-Disposition", "attachment; filename="+filename);

//7. 데이터출력(다운로드)
ServletOutputStream out2 = response.getOutputStream();
//7-1. 데이터출력 통로 생성
int data = 0;
while((data = fis.read(b,0,b.length)) != -1){
//데이터출력시 파일이 있을동안 계속 진행
out2.write(b,0,data); //배열에다가 data를 담아서 출력
out2.flush();
}
//8. 자원해제

out2.close();
fis.close();

//9. java.lang.IllegalStateException:
//이 응답을 위해 getOutputStream()이 이미 호출되었습니다.
// => JSP->Servlet 변환시 out 객체가 자동생성, 추가로 OutputStream 객체 생성시
// 오류 메세지 출력( 다운로드 문제 X, 서버에 에러 메세지 로그 쌓임)

out.clear();
out = pageContext.pushBody();
%>

5-1. java.lang.IllegalStateException에러

java.lang.IllegalStateException: 이 응답을 위해 getOutputStream()이 이미 호출되었습니다.

jsp가 실행될때 java파일로 변환되어 실행되고 그 바뀌는 걸 servlet이라고 한다.
이 변환시에 out이라는 객체가 자동 생성된다.
만약 추가로 OutputStream 객체생성시 IllegalStateException에러가 발생한다.

다운로드기능에는 문제가 없으나 에러가 실행될때마다 서버에 에러 메세지 로그 쌓이기때문에 처리해야한다.

1
2
out.clear();
out = pageContext.pushBody();

SQL의 OBJECT종류 : 뷰(View)

코드블록상에 [] 대괄호는 생략가능하다는 의미이다.

SQL의 OBJECT 종류

  • 지금까지 테이블(table) object에 관한 것을 배웠다.
  • 이제 다른 object들을 배워보자.
Read More

[ITWILL : JSP]Javabean 13 : 게시판만들기(파일다운로드)

ITWILL학원 : 31강 JSP기초 BY 정규태강사

이 부분은 어렵다. 반복해서 보자.

1. up.jsp에 onclick이벤트 연결

  • onclick에 function을 넣어도 되고 location.href넣어도 둘 다 동일한 결과 출력된다.
    • input type=”button” value=”파일삭제” onclick=”downfile()”
    • input type=”button” value=”파일삭제” onclick=”location.href=’./down.jsp’”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<fieldset>
<form method="post" name="myform">
<input type="text" name="filename" value="<%=fileName%>">
<input type="button" value="파일삭제" onclick="delfile()">
<input type="button" value="파일다운로드" onclick="downfile()">
</form>
</fieldset>

<script type="text/javascript">
function delfile(){
document.myform.action="./delup.jsp"; //myform이름의 폼태그의 action값을 설정
document.myform.submit();
}

function downfile(){
document.myform.action="./down.jsp"; //myform이름의 폼태그의 action값을 설정
document.myform.submit();
}
</script>

2. down.jsp생성

  1. 인코딩

    • 모든 UTF-8을 EUC-KR(euc-kr)로 변경해준다. 대소문자 둘 다 가능.
    • string은 그냥 담아도 되고 객체에 담아도 된다. 즉 1번과 2번이 동일 WHY? String의 특징!
    • 1번 : String filename=request.getParameter(“filename”)
    • 2번 : String filename= new String(request.getParameter(“filename”));
  2. java.io 아래에 있는 입출력 객체를 import한다

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
<%@page import="java.io.FileNotFoundException"%>
<%@page import="java.io.FileInputStream"%>
<%@page import="java.io.File"%>
<%@page import="java.io.OutputStream"%>
<%@page import="java.io.InputStream"%>
<%@ page language="java" contentType="text/html; charset=euc-kr"
pageEncoding="euc-kr"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Insert title here</title>
</head>
<body>
<h2>다운로드페이지</h2>
<%
//1. 인코딩
//string은 그냥 담아도 (=String filename=request.getParameter("filename"))되고 객체에 담아도된다
//String filename= new String(request.getParameter("filename"));
//파라미터 데이터를 가져와서 8859_1 인코딩방식으로 바꾼 뒤 EUC-KR로 한번 더 바꾸는 것
String filename = new String((request.getParameter("filename")).getBytes("8859_1"),"euc-kr");

//2. 파일저장경로(절대경로)
String filePath = "D:/upfile";

//3. 입출력시 필요한 객체 생성
InputStream in = null;
OutputStream os = null;
File file = null;
File viewFile = null;

//3-1. 추가 레퍼런스생성
boolean skip = false; //플래그만들기
String client = "";

// 4. 예외처리
try{
//5. 변수생성 : 인코딩시 변경되는 string 따로 저장하려고 3개 변수 만듬
String fname1 = "";
String fname2 = "";
String fname = "";

fname = filename;
fname1 = new String(fname.getBytes("8859_1"), "euc-kr");
//9. try catch구문으로 묶기
try{
//6. 전달된 파일 경로,이름 사용해서 파일 객체 생성
file = new File(filePath, fname);
viewFile = new File(filePath,fname1);

//확인차 페이지에 출력
out.print("file : "+file+"<br>");
out.print("viewfile : "+viewFile);

//8. 파일을 읽어오기 위해서 입력 통로를 생성
// 객체를 만든 순간 = 해당 폴더로 이동해서 파일을 선택한 상황임.
// InputStream in = null;
in = new FileInputStream(file); //업캐스팅
}catch(FileNotFoundException e){
skip = true;
}

//10. String변수만들어주기
fname2 = new String(fname1.getBytes("euc-kr"), "8859_1");

//11. 응답객체초기화 for 다운로드 팝업창 생성된 것처럼 보이게끔하여 다운로드 진행중임을 표시
response.reset();

2-1. down.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
	//12. 다운로드처리
//12-1. 클라이언트가 다운로드 요청시 사용자 웹브라우저 정보필요
//why? 브라우저별로 설정해줘야하는 것들이 다르기 때문
client = request.getHeader("User-Agent");
//System.out.println("client :" + client);
//12-2. 사용자브라우저에 따른 처리
//12-2-1. mine 타입이용하여 값세팅하기
response.setContentType("application/x-msdownload");
response.setHeader("Content-Description", "JS Generated Data");
//12-2-2. 브라우저마자 실행 제어
if(!skip){ //false항상실행
if(client.indexOf("MSIE 5.5") != -1){
response.setHeader("Content-Type", "doesn/matter; charset=euc-kr");
response.setHeader("Content-Disposition", "filename"+ new String(fname.getBytes("euc-kr"),"8859_1"));
}else{
response.setHeader("Content-Type", "application/octet-stream; charset=euc-kr");
response.setHeader("Content-Disposition", "attachment; filename="+new String(fname.getBytes("euc-kr"),"8859_1"));
}
//12-2-3. 문자열만들기
response.setHeader("Content-Transfer-Encoding", "binary;");
response.setHeader("Content-Length", ""+file.length());
response.setHeader("Pragma", "no-cache;");
response.setHeader("Expires", "-1;");

//12-3. 데이터출력할 수 있는 통로 생성
os = response.getOutputStream();

//12-3-1. 바이트스트림
byte[] b = new byte[4096];
int leng = 0;

//12-3-2. 파일을 읽어서 leng에 저장이 될 것이고 데이터가 있을 경우에만 진행
//leng은 데이터가 없으면 -1값을가진다
while((leng = in.read(b))> 0){
//데이터출력(다운로드)
os.write(b,0,leng);
}
}else{
out.print("파일다운로드 실패");
return;
}

}catch(Exception e){
System.out.println("다운로드도중 에러발생");
e.printStackTrace();
}finally{
if(in != null) in.close();
if(os != null) os.close();
}

%>

[ITWILL : JSP]Javabean 12 : 게시판만들기(파일업로드), UTF-8과 EUC-KR차이

ITWILL학원 : 31강 JSP기초 BY 정규태강사

1. 새로운 프로젝트 fileUpload 생성

  1. 새로운 다이나믹 앱 프로젝트 생성 : 프로젝트명 fileUpload
  2. 라이브러리 추가 : cos.jar를 복사하여 D:\fileUpload\WebContent\WEB-INF\lib에 복붙하기
  3. WebContent하위에 fileUP폴더 생성 후 그 안에 up.html페이지 생성(아래 단계)

2. up.html 작성

  • up.htmlmeta charset="UTF-8" 에서 meta charset="euc-kr"로 변경
    • UTF-8과 euc-kr 둘 다 한글을 처리하는 메타태그임.
    • UTF-8 : 한글 조합형의 유니코드 인코딩방식
    • EUC-KR : 한글 완성형의 유니코드 인코딩방식. 한글 2BYTE로 사용.
    • 참고링크 : UTF-8과 EUC-KR의 차이점
1
2
3
4
5
6
7
8
<fieldset>
<legend>파일업로드</legend>
<form action="up.jsp" method="post" enctype="multipart/form-data">
이름 : <input type="text" name="name"><br>
파일 : <input type="file" name="upfile"><br>
<input type="submit" value="파일업로드">
</form>
</fieldset>

3. up.jsp 작성

  • 에러해결 : java build path > library > add library > server runtime > 톰캣 추가
  • UTF-8euc-kr로 싹 다 바꾸기
  • onclick에 function을 넣어도 되고 location.href넣어도 둘 다 동일한 결과 출력된다.
    • input type=”button” value=”파일삭제” onclick=”delfile()”
    • input type=”button” value=”파일삭제” onclick=”location.href=’./delup.jsp’”
  • 참고링크1 : Enumeration
  • 참고링크2 : Enumeration
  • 참고링크3 : Enumeration
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
<%
//1. 전달되는 데이터 인코딩
request.setCharacterEncoding("euc-kr");

//2. 업로드 폴더 지정(절대경로 = 파일을 직접적으로 접근하는 방식)
String savePath = "d:\\upfile";

//3. 업로드 파일 크기 => 10MB
int maxSize = 10 * 1024 * 1024;

//4. 파일 이름 저장하는 변수 생성
String fileName="";
String originalFileName="";


//5. 예외처리 포함한 파일업로드
try{
MultipartRequest multi = new MultipartRequest(request, savePath, maxSize, "euc-kr", new DefaultFileRenamePolicy());
//여기까지 파일업로드완료

//6. 파일업로드 결과를 화면에 출력
//6-1. 폼의 이름 반환
Enumeration formNames = multi.getFileNames(); //업캐스팅

//6-2. 전달된 파일의 정보를 저장
String formname = (String) formNames.nextElement(); //위의 업캐스팅한 걸 다운캐스팅

//7. 서버에 저장된 파일의 이름저장
fileName = multi.getFilesystemName(formname);

//8. 원래 파일의 이름 저장
originalFileName = multi.getOriginalFileName(formname);

//9.파일업로드 성공시 해당 정보 출력
if(fileName == null){
out.println("파일업로드 실패!");
}else{
out.print("업로드한 사람 : "+multi.getParameter("name")
+"<br>업로드 파일이름(서버저장) : "+fileName+"<br>업로드 파일이름(원본): "+originalFileName
+"<br>file태그정보 : "+formname);
}

}catch(Exception e){
out.println("파일업로드 중 예외상황발생");
e.printStackTrace();
}
%>
<fieldset>
<form method="post" name="myform">
<input type="text" name="filename" value="<%=fileName%>">
//onclick에 function을 넣어도 되고 location.href넣어도 동일한 결과 출력
<input type="button" value="파일삭제" onclick="delfile()">
<input type="button" value="파일삭제" onclick="location.href='./delup.jsp'">
<input type="button" value="파일다운로드">
</form>
</fieldset>

4. delup.jsp 생성

한글파일빼고는 삭제가 잘 진행된다.
인코딩방식의 문제이므로 나중에 처리하기로한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%
//1. 전달된 파일 이름 저장
String filename = request.getParameter("filename");

//2. 파일 객체 생성 -> 삭제
//File f = new File("해당파일의 위치+파일명");
//객체를 만든 순간 = 해당 폴더로 이동해서 파일을 선택한 상황임.
File f = new File("D:\\upfile/"+filename);

//3. 파일삭제
f.delete();
out.println("파일삭제완료");

//3-1. 한글파일빼고는 삭제가 잘 진행된다.
out.println(filename);
%>