[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>