로그인 기능 구현하기(eclipse, mysql)

충찌·2021년 12월 23일
0

JSP

목록 보기
2/4
post-thumbnail

회원가입 기능을 구현했으니 이번에는 저장된 DB를 통해 로그인을 해봐야겠다.

로그인, 로그인기능, 로그아웃을 순서대로 만들예정이다.

1. 로그인 폼 만들기 - login.jsp



<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html><html><head><meta charset="UTF-8">
<title>로그인</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
</head>
<body>
<jsp:include page="menu.jsp"/>
<div class="jumbotron">
	<div class="container">
		<h1 class="display-3">로그인</h1>
	</div>
</div>
<div class="container" align="center">
	<div class="col-md-4 col-me-offset-4">
		<h3 class="form-signin-heading">Please sign in</h3>
		<%
			String error = request.getParameter("error");
			if(error!=null){
				out.print("<div class='alert alert-danger'>");
				out.print("아이디와 비밀번호를 확인해주세요.");
				out.print("</div>");
			}
		%>
		<form class="form-signin" action="processLoginMember.jsp" method="post">
			<div class="form-group">
				<label class="sr-only">User Name</label>
				<input name="id" class="form-control" placeholder="ID" required autofocus>
			</div>
			<div class="form-group">
				<label class="sr-only">Password</label>
				<input type="password" name="password" class="form-control" placeholder="Password" required>
			</div>
			<button class="btn btn-lg btn-success btn-block" type="submit">로그인</button>
			<button class="btn btn-lg btn-secondary btn-block" type="button" onclick="location.href='addMember.jsp'">회원가입</button>
		</form>
	</div>
</div>
</body>
</html>






조촐하니 귀여운 로그인 페이지가 만들어진다.




2. 로그인 기능 구현하기 - processLoginMember.jsp

회원가입 기능이랑 마찬가지로 jstl사용해서 DB연결시켜줬다.


<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>

<%
	/* 파라미터로 넘어온 값 얻기, 문자셋 설정 */
	request.setCharacterEncoding("utf-8");

	String id = request.getParameter("id");
	String password = request.getParameter("password");
	
%>

<%-- 데이터 셋 설정 --%>
<sql:setDataSource var="dataSource"
	url="jdbc:mysql://localhost:3306/board"
	driver="com.mysql.jdbc.Driver" user="root" password="1234"/>
	
<%-- id, password에 맞는 회원정보를 DB에서 추출 --%>	
<sql:query dataSource="${dataSource }" var="resultSet">
select * from member where id =? and password=?
<sql:param value="<%=id %>"/>
<sql:param value="<%=password %>"/>
</sql:query>

<%-- 출력 결과 처리, session에 id 정보 저장 후 결과 페이지로 이동(get 방식) --%>
<c:forEach var="row" items="${resultSet.rows }">
	<%
		session.setAttribute("sessionId", id);
	%>
	<c:redirect url="resultMember.jsp?msg=2"/>
</c:forEach>

<%-- 조회 결과 데이터가 없으면 다시 로그인 페이지로 이동, 이동시 error의 파라미터값을 1로 전달 --%>
<c:redirect url="login.jsp?error=1"/>





resultMember.jsp는 회원수정과 삭제 기능 다 만들고나서 만들어 줄 예정이다.




화면 위에 메뉴창을 만들어서 길안내? 같은 역할해주는 navbar 페이지를 따로 만들어주자!

3. 메뉴창 만들어주기 - menu.jsp

로그인 기능에서 sessionId 저장하는 것도 만들어줬는데 로그인을 하지 않은 상태에서는 당연히 sessionId==null이다.


그래서 null일경우에는 로그인과 회원가입 메뉴만 보이고 로그인 후에는 로그아웃과 회원수정 메뉴만 보여지도록 했다.


<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	/* 로그인시 저장했던 sessionId 가져오기 로그인 안한 상태면 sessionId==null */
	String sessionId = (String)session.getAttribute("sessionId");
%>
<nav class="navbar navbar-expand navbar-dark bg-dark">
	<div class="container">
		<div class="navbar-header">
			<a class="navbar-brand" href="./welcome.jsp">Home</a>
		</div>
		<div>
		<div class="navbar-nav mr-auto">
			<c:choose>
				<c:when test="${empty sessionId }"> <%-- ${sessionId==null} --%>
					<li class="nav-item"><a class="nav-link" href="<c:url value='login.jsp'/>">로그인</a></li>
					<li class="nav-item"><a class="nav-link" href="<c:url value='addMember.jsp'/>">회원가입</a></li>
				</c:when>
				<c:otherwise>
					<li style="padding-top:7px; color:white;">[<%=sessionId %>님]</li>
					<li class="nav-item"><a class="nav-link" href="<c:url value='logout.jsp'/>">로그아웃</a></li>
					<li class="nav-item"><a class="nav-link" href="<c:url value='updateMember.jsp'/>">회원 수정</a></li>
				</c:otherwise>
			</c:choose>
		</div>
		</div>
	</div>
</nav>





로그인을 하지 않은 경우

로그인을 한 경우



이제 로그아웃 기능을 만들어줄텐데 정말 쉽다.
부여해준 session을 없애기만 하면 된다.

4. 로그아웃 하기 - logout.jsp

위의 사진에 로그아웃을 누르면 다시 로그인창으로 돌아오게 해줬다.




<%@ page contentType="text/html; charset=UTF-8"%>
<%
	/* 로그인 정보 삭제 */
	session.invalidate();
	/* 로그인 페이지로 이동 */
	response.sendRedirect("login.jsp");
%>





로그인 기능이 금방 끝났다.
이제 회원 수정과 삭제만 남았다. 아직 크게 어려운 부분은 없는데 회원관련한 페이지 다 만들면 mysql연결을 jstl말고 예외처리 하는 거 사용해서 한번 만들어 봐야겠다.

아직은 혼자서 다 적는 것 보다는 보고 따라 적는게 더 많지만 언젠가는 껌이라면서 후루룩 쓰는 날이 올 것 같다.ㅎ

profile
벨로그? 난 켈로그

0개의 댓글