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

💡 핵심 요약 (TL;DR)

홈페이지만들기3 : 로그인/로그아웃 기능 구현의 동작 원리를 이해하고 실제 프로젝트에 적용하기 위한 실무 가이드다. 핵심 설정과 구현 코드를 단계별로 파악하여 상황에 맞게 유연하게 활용할 수 있다.

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

1. loginForm.jsp 생성

• header include하기 : jsp:include page="../inc/top.jsp"
• footer include하기 : jsp:include page="../inc/bottom.jsp"

<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. 한글처리 및 변수가져오기
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()메서드 생성

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님 환영합니다와 함께 로그인 버튼을 로그아웃으로 변경

<% //화면상단에 위치하는 메뉴바 처리페이지
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 생성

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

#TILITWILL(JAVA)