[ITWILL : JSP]Javabean 3 : 회원정보조회/수정 페이지만들기

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

자바빈 프로젝트 1 : 회원가입페이지만들기
자바빈 프로젝트 2 : 로그인 및 로그아웃페이지만들기
자바빈 프로젝트 3 : 회원정보조회 및 수정페이지만들기

1. 메인페이지 main.jsp에서 버튼 추가

메인페이지에 회원정보조회 버튼을 만든다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%//1.한글처리, 파라미터 (세션생성)
request.setCharacterEncoding("UTF-8");
String id = (String) session.getAttribute("id");//objectstring으로 다운캐스팅
String name = request.getParameter("name");
//1-1. id없이는 진입불가, id없는 경우 로그인페이지로 이동
if(id == null){
response.sendRedirect("loginForm.jsp");
}
%>
<h2><%=id %>님 환영합니다.</h2>

<input type="button" value="회원정보조회" onclick="location.href='memberinfo.jsp'">
<input type="button" value="회원정보수정" onclick="location.href='updateForm.jsp'">
<input type="button" value="로그아웃" onclick="location.href='logout.jsp'">
<input type="button" value="회원탈퇴" onclick="location.href='deleteForm.jsp'">

2. 회원정보조회페이지 memberinfo.jsp 생성

회원정보를 DB에서 가져와서 출력하는 memberinfo.jsp를 만든다

순서

  1. 한글설정 & 변수생성

    • 1-1. id값확인 -없으면 로그인페이지로 이동
  2. MemberDAO객체 생성 -> 회원정보 가져오는 메서드생성

    • MemberBean import하기
    • MemberBean 데이터타입 mb변수로 메서드정보 담아오기
  3. 데이터처리 : 테이블에 담기

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
//1. 한글설정 & 변수생성
String id = (String) session.getAttribute("id");//object이기에 형변환필수
//1-1.id값확인 -없으면 로그인페이지로 이동
if(id == null){
response.sendRedirect("loginForm.jsp");
}
//2. 멤버DAO객체 생성 -> 회원정보 가져오는 메서드생성
MemberDAO mdao = new MemberDAO();
MemberBean mb = mdao.getMember(id);

//3. 데이터처리 : 테이블로 표현
if(mb != null){
%>
<h2>마이페이지</h2>
<table border="1">
<tr>
<td>아이디</td>
<td><%=mb.getId() %></td>
</tr>
<tr>
<td>비밀번호</td>
<td><%=mb.getPw() %></td>
</tr>
<tr>
<td>이름</td>
<td><%=mb.getName() %></td>
</tr>
<tr>
<td>나이</td>
<td><%=mb.getAge() %></td>
</tr>
<tr>
<td>성별</td>
<td><%=mb.getGender() %></td>
</tr>
<tr>
<td>이메일</td>
<td><%=mb.getEmail() %></td>
</tr>
<tr>
<td>회원가입일</td>
<td><%=mb.getReg_date() %></td>
</tr>
</table>
<%
}
%>
<hr>
<input type="button" value="뒤로가기" onclick="location.href='main.jsp'">

3. DAO에서 getMember()메서드만들기

회원정보 가져오는 메서드 getMember()로 회원정보 전부 리턴 -> 테이블에 추가해야한다.

순서

  1. 드라이브로드 & 디비연결
  2. SQL 구문 작성 & pstmt 생성
  3. 실행 -> rs저장
  4. 데이터처리 : DB에 있는 회원정보 저장 후 memberinfo페이지로 전달
    • 4-1. MemberBean mb = null; //객체 레퍼런스 생성
    • 4-2. rs.next() : DB의 컬럼명과 일치해야함!
  5. 자원해제
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
public MemberBean getMember(String id){
MemberBean mb = null; //객체 레퍼런스 생성
//왜 null인가? 정보가 생성되는 시점은 rs에 있을때이다.
//따라서 rs가 없을땐 굳이 만들필요가 없다.

try{
//5-1. 드라이브로드 디비연결
con = getCon();
//5-2. SQL & pstmt 생성
sql = "select * from itwill_member where id=?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, id);
//5-3. 실행 -> rs저장
rs = pstmt.executeQuery();
//5-4. 데이터처리 : DB에 있는 회원정보 저장 후 memberinfo페이지로 전달
//5-4-1. MemberBean mb = null; //객체 레퍼런스 생성
//DB의컬럼명을 입력할 것
if(rs.next()){
mb = new MemberBean();
mb.setId(rs.getString("id"));
mb.setPw(rs.getString("pw"));
mb.setName(rs.getString("name"));
mb.setAge(rs.getInt("age"));
mb.setEmail(rs.getString("email"));
mb.setGender(rs.getString("gender"));
mb.setReg_date(rs.getTimestamp("reg_date"));

System.out.println("회원정보저장완료");
}
System.out.println("sql구문실행완료");
}catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally { //5-5. 자원해제
closeDB();
}
return mb;
}

4. 회원정보수정페이지 updateForm.jsp 생성

순서

  1. 한글처리 & 세션변수
    • 1-1. 로그인여부체크 (로그인x->로그인페이지로이동) //object->string 형변환필수
  2. 드라이브로드 & 디비연결 = 멤버DAO객체 생성 -> getMember()메서드호출
    • 로그인한 사용자의 정보를 가져오기
    • getMember()를 이용해서 id에 해당하는 회원정보 가져오기
  3. 데이터처리 : 테이블형식으로 출력
  4. 비밀번호를 입력받은 뒤 수정하기 ->updatePro.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
<%//1.로그인여부체크 (로그인x->로그인페이지로이동)
request.setCharacterEncoding("UTF-8");
String id = (String) session.getAttribute("id");//object이기에 형변환필수
if(id == null){
response.sendRedirect("loginForm.jsp");
}
//2. 드라이브로드 & 디비연결 : 로그인한 사용자의 정보를 가져오기
MemberDAO mdao = new MemberDAO();
MemberBean mb = mdao.getMember(id);

//3. 데이터처리 : 테이블형식으로 출력
//4. 비밀번호를 입력받은 뒤 수정하기 ->updatePro.jsp에서 진행
%>
<fieldset>
<legend>회원정보수정</legend>
<form action="updatePro.jsp" method="post" name="fr">
아이디 <input type="text" name="id" value="<%=mb.getId() %>" readonly><br>
비밀번호 <input type="password" name="pw" placeholder="비밀번호를 입력하세요" required><br>
이름 <input type="text" name="name" value="<%=mb.getName() %>"><br>
나이 <input type="text" name="age" value="<%=mb.getAge() %>"><br>
성별
<input type="radio" name="gender" value="여"
<% if(mb.getGender().equals("여")){ %>
checked
<%}%>
> 여성
<input type="radio" name="gender" value="남"
<% if(mb.getGender().equals("남")){ %>
checked
<%}%>
> 남성<br>
이메일 <input type="text" name="email" value="<%=mb.getEmail() %>"><br>
<input type="submit" value="회원정보수정하기">
</form>
</fieldset>

<button onclick="location.href='main.jsp'">뒤로가기</button>

5. 회원정보수정페이지 updatePro.jsp 생성

순서

  1. 로그인여부체크 ->로그인페이지이동
  2. 액션태그사용 : 전달된 정보를 저장(아이디,비번,이름,나이,성별,이멜) = jsp:useBean
    2-1. 파라미터 값 저장 = jsp:setProperty
  3. MeberDAO객체 생성 -> updateMember()메서드 호출
  4. 데이터처리 : 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
32
33
34
35
36
37
38
39
40
41
42
43
44
<%
//1. 한글처리 & 로그인여부체크 ->로그인페이지이동
request.setCharacterEncoding("UTF-8");
String id = (String) session.getAttribute("id");
if (id == null) {
response.sendRedirect("loginForm.jsp");
}

%>
<!-- 2. 액션태그사용 : 전달된 정보를 저장(아이디,비번,이름,나이,성별,이멜) -->
<jsp:useBean id="mb" class="com.itwillbs.member.MemberBean" />
<!-- 2-1. 파라미터 값 저장 -->
<jsp:setProperty property="*" name="mb"/>

<%//3. MeberDAO객체 생성
MemberDAO mdao = new MemberDAO();

//4. 데이터처리 : 1-수정완료, 0-비번오류, -1-아이디없음
int result = mdao.updateMember(mb);

if(result == 1){
%>
<script type="text/javascript">
alert("회원정보수정 성공");
</script>
<%
System.out.println("회원정보수정성공");
response.sendRedirect("main.jsp");
}else if(result == 0){
%>
<script type="text/javascript">
alert("비밀번호오류로 회원정보수정실패");
history.back();
</script>
<%
}else{
%>
<script type="text/javascript">
alert("존재하지않는 아이디입니다.");
history.back();
</script>
<%
}
%>

6. DAO에서 updateMember()메서드만들기

회원정보 수정 메서드

순서

  1. 드라이브로드 & 디비연결
  2. SQL 구문 작성 & pstmt 생성
    • 2-1. select 사용해서 id가 있는지 체크
  3. 실행 -> rs저장
  4. 데이터처리 : DB에 있는 회원인 경우
    • 4-1. DB에 있는 회원 -> 비번체크 : 비번일치(->수정) 비번불일치(->에러)
      • 비번일치하는 경우 : SQL 구문작성 & pstmt 생성 -> 실행
    • 4-2. DB에 없는 회원 -> 에러
  5. 자원해제
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
public int updateMember(MemberBean mb){
int result = -1;

try {
//6-1. 드라이브로드 디비연결
con = getCon();
//6-2. SQL 구문작성 & pstmt 생성
sql = "select pw from itwill_member where id=?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, mb.getId());
//6-3. 실행 -> rs저장
rs = pstmt.executeQuery();
//6-4. 데이터처리 : DB에 있는 회원인 경우 수정 아닌 경우 에러
if(rs.next()){//DB에 있는 회원
if(mb.getPw().equals(rs.getString("pw"))){//비번일치
//6-5. 비번일치하면 정보수정 작업
//6-5-1. SQL 구문작성 & pstmt 생성
sql = "update itwill_member set name=?, age=?, gender=?, email=? "
+ "where id=?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, mb.getId());
//6-5-2. 실행
pstmt.executeUpdate();
System.out.println("회원정보수정성공");
result = 1;
}else{
result = 0;
System.out.println("아디일치,비번불일치 - 회원정보수정실패");
}
}else{ //DB에 없는 회원
result = -1;
System.out.println("존재하지않는아이디 - 회원정보수정실패");
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally{
closeDB();
}
return result;
}//updateMember닫힘

[ITWILL : JSP]Javabean 2 : 로그인,로그아웃페이지만들기

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

자바빈 프로젝트 1 : 회원가입페이지만들기
자바빈 프로젝트 2 : 로그인 및 로그아웃페이지만들기
자바빈 프로젝트 3 : 회원정보조회 및 수정페이지만들기

1. 로그인폼페이지 작성

1
2
3
4
5
6
7
8
9
<fieldset>
<legend>로그인</legend>
<form action="loginPro.jsp" method="post" name="fr">
아이디 <input type="text" name="id" required ><br>
비밀번호 <input type="password" name="pw"><br>
<input type="submit" value="로그인하기">
<input type="button" value="회원가입하기" onclick="location.href='insertForm.jsp'">
</form>
</fieldset>

2. 로그인프로페이지 작성

파라미터를 저장할 때 세가지 방법이 있다.

  1. 파라미터 사용 : getParameter()
  2. 자바빈객체사용 : Javabean jb = new Javabean(), jb.set변수()
  3. 액션태그 사용 : useBean(), setProperty()

자세히 : 자바빈기초

  • getParameter() : 주소줄과 폼태그에 작성한 INPUT은 getParameter로 가져온다.
  • getAttribute() : 세션, 페이지에서 저장한 값들은 getAttribute로 가져온다.

이 중 로그인 페이지에선 파라미터를 사용할 예정이다.

로그인페이지 작성 순서

  1. 한글처리 & 파라미터저장
    • 1-1. 파라미터저장 -> 파라미터사용
    • 1-2. 파라미터저장 -> 액션태그사용
  2. 로그인처리 -> DAO에서 처리
    • why? DB와 관련된 모든 사항은 DAO에서 처리하니까.
    • 로그인 메서드는 DB에서 해당 값이 있는지 체크하고 결과를 리턴
    • 리턴값은 정수형 데이터값 사용(1-로그인처리, 0-비번오류, (-1)-아이디없음)
  3. 결과(result가 -1,0,1)에 따른 페이지 이동처리
    • result = 1 : 아이디정보를 세션값으로 저장(키값, 저장할 데이터이름), main.jsp로 이동
    • result = 0 : 비번불일치 알림창, history.back()
    • result = -1 : 없는아이디 알림창, history.back()
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
<%//1. 한글처리
request.setCharacterEncoding("UTF-8");
//1-1. 파라미터사용 : 전달된 파라미터값 저장(아이디,비번)
String id = request.getParameter("id");
String pw = request.getParameter("pw");
%>
<!--1-2.액션태그사용 : 전달된 파라미터값 저장(아이디,비번)
`useBean`객체생성(id값 아무거나 작성해도 됨) -> `setProperty`로 파라미터저장
<jsp:useBean id="mb" class="com.itwillbs.member.MemberBean" />
<jsp:setProperty property="*" name="mb"/>
-->

<% //2. 로그인처리 -> DAO에서 처리 따라서 객체만 생성
MemberDAO mdao = new MemberDAO();
mdao.idCheack(id, pw);

//3. 결과(result가 -1,0,1)에 따른 페이지 이동처리
if(result == 1){
//3-1. 아이디정보를 세션값으로 저장(키값, 저장할 데이터이름)
session.setAttribute("id", id); //object자리에 string을 담았기에 업캐스팅발생
response.sendRedirect("main.jsp");
}else if(result == 0){
%>
<script type="text/javascript">
alert("비밀번호가 일치하지 않습니다");
history.back();
</script>
<%
}else{
%>
<script type="text/javascript">
alert("없는 아이디입니다");
history.back();
</script>
<%
}
%>

3. DAO페이지 작성

기존에 만들었던 MemberDAO를 그대로 가져온 뒤 idCheck()메서드만 생성하면 된다.

기존 MemberDAO 태그

순서

  1. 드라이브로드 디비연결
  2. SQL & pstmt 생성
  3. 실행 -> rs저장
  4. 데이터 처리
    • 왜 while이 아닌 if인가? where절에서 id는 pk조건을 가지고 있으므로 중복이 없기때문.
  5. 세션정보를 만들 수 있을까?
    • session.setAttribute();
    • 만들 수 없다. why? session은 jsp내장객체이다.
    • java에서 사용할 수 없지만 추후 서블릿을 통해 사용할 수 있다.
    • 그래서 지금은 main.jsp페이지에서 세션만들거임.
  6. 자원해제
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
public int idCheack(String id, String pw){
int result = -1;
try {
//4-1. 드라이브로드 디비연결
con = getCon();
//4-2. SQL & pstmt 생성
sql = "select pw from itwill_member where id=?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, id);
//4-3. 실행 -> rs저장
rs = pstmt.executeQuery();
//4-4. 데이터 처리
//왜 while이 아닌 if인가? where절에서 id는 pk조건을 가지고 있으므로 중복이 없기때문
if(rs.next()){
if(pw.equals(rs.getString("pw"))){
result = 1;
System.out.println("아이디,비번일치 = 로그인성공(1)");
//4-5. 세션정보를 만들 수 있을까? 만들 수 없다.
}else{
result = 0;
System.out.println("아이디있지만 비번다름 (0)");
}
}else{
result = -1;
System.out.println("아이디,비번없음 (-1)");
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally { //4-6. 자원해제
closeDB();
}
return result;
}//idCheck닫힘

4. main 페이지작성 후 로그아웃 페이지 연결하기.

순서

  1. 메인페이지, 한글처리 파라미터 저장
  2. 세션생성
  3. 메인페이지에 로그아웃버튼을 만들고 로그아웃페이지에 연결한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%//1.한글처리, 파라미터 (세션생성)
request.setCharacterEncoding("UTF-8");
String id = (String) session.getAttribute("id");//object를 string으로 다운캐스팅
//1-1. id없이는 진입불가, id없는 경우 로그인페이지로 이동
if(id == null){
response.sendRedirect("loginForm.jsp");
}
%>

<h2><%=id %>님 환영합니다.</h2>

//2. 버튼생성
<input type="button" value="회원정보조회" onclick="location.href='memberinfo.jsp'">
<input type="button" value="회원정보수정" onclick="location.href='updateForm.jsp'">
<input type="button" value="로그아웃" onclick="location.href='logout.jsp'">
<input type="button" value="회원탈퇴" onclick="location.href='deleteForm.jsp'">

4-1. 로그아웃페이지작성

메인페이지 연결한 로그아웃페이지를 만든다.

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

iframe태그

iframe태그

브라우저 영역에 다른 문서를 보여주는 태그이다.
화면을 독립적으로 사용하길 원할때 사용한다.

Read More
JOIN

JOIN

join 조인

여러 테이블에 있는 데이터를 합쳐서 출력.
join은 FROM절에 작성된다.

Read More