-
Servlet-JSP MVC06 (3) - 기타 설정Web/Servlet-JSP 2023. 6. 24. 10:37
귀여운 펭귄 1. MemberContent.jsp화면을 수정했다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="kr.bit.model.*" %> <% // MemberVO vo=(MemberVO)request.getAttribute("vo"); %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:set var="ctx" value="${pageContext.request.contextPath}"/> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script> <script type="text/javascript"> function update(){ document.form1.action="<c:url value='/memberUpdate.do'/>"; document.form1.submit(); } function frmreset(){ document.form1.reset(); } </script> </head> <body> <div class="container"> <h2>상세화면</h2> <div class="panel panel-default"> <div class="panel-heading"> <c:if test="${sessionScope.userId!=null && sessionScope.userId!=''}"> <label>${sessionScope.userName}님이 로그인 하셨습니다.</label> </c:if> <c:if test="${sessionScope.userId==null || sessionScope.userId==''}"> <label>안녕하세요</label> </c:if> </div> <div class="panel-body"> <form id="form1" name="form1" class="form-horizontal" method="post"> <input type="hidden" name="num" value="${vo.num}"/> <div class="form-group"> <label class="control-label col-sm-2">번호:</label> <div class="col-sm-10"> <c:out value="${vo.num}"/> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">아이디:</label> <div class="col-sm-10"> <c:out value="${vo.id}"/> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">비밀번호:</label> <div class="col-sm-10"> <c:out value="${vo.pass}"/> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">이름:</label> <div class="col-sm-10"> <c:out value="${vo.name}"/> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">나이:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="age" name="age" value="${vo.age}" style="width: 10%"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">이메일:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="email" name="email" value="${vo.email}" style="width: 30%"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">전화번호:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="phone" name="phone" value="${vo.phone}" style="width: 30%"> </div> </div> </form> </div> <div class="panel-footer" style="text-align: center;"> <c:if test="${!empty sessionScope.userId}"> <c:if test="${sessionScope.userId==vo.id}"> <input type="button" value="수정하기" class='btn btn-primary' onclick="update()"/> </c:if> <c:if test="${sessionScope.userId!=vo.id}"> <input type="button" value="수정하기" class='btn btn-primary' onclick="update()" disabled="disabled"/> </c:if> </c:if> <input type="button" value="취소" class='btn btn-warning' onclick="frmreset()"/> <input type="button" value="리스트" onclick="location.href='${ctx}/memberList.do'" class='btn btn-success'/> </div> </div> </div> </body> </html>변경사항
1.1 로그인 유무에 따라 memberContent.jsp 상단에 뜨는 메세지를 다르게 하였다.
<c:if test="${sessionScope.userId!=null && sessionScope.userId!=''}"> <label>${sessionScope.userName}님이 로그인 하셨습니다.</label> </c:if> <c:if test="${sessionScope.userId==null || sessionScope.userId==''}"> <label>안녕하세요</label> </c:if>1.2 로그인 유무에 따라 수정하기 버튼을 띄우고, 로그인 id와 상세정보의 id가 같을 때만 수정하기 버튼이 활성화 되도록 변경하였다.
<c:if test="${!empty sessionScope.userId}"> <c:if test="${sessionScope.userId==vo.id}"> <input type="button" value="수정하기" class='btn btn-primary' onclick="update()"/> </c:if> <c:if test="${sessionScope.userId!=vo.id}"> <input type="button" value="수정하기" class='btn btn-primary' onclick="update()" disabled="disabled"/> </c:if> </c:if>1.3 form태그의 submit을 javascript로 만들어서 form태그 밖에서 subimt할 수 있도록 하였다.
<input type="button" value="수정하기" class='btn btn-primary' onclick="update()"/> <input type="button" value="취소" class='btn btn-warning' onclick="frmreset()"/><script> function update(){ document.form1.action="<c:url value="memberUpdate.do"/>"; document.from1.submit() } function freset(){ document.form1.reset(); } </script>> document.form1
-> 현재페이지.폼명
2. memberRegister.jsp 도 비슷한 방식으로 수정하였다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:set var="ctx" value="${pageContext.request.contextPath}"/> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script type="text/javascript"> function add(){ // form의 데이터 유효성 체크.. document.form1.action="<c:url value='/memberInsert.do'/>"; document.form1.submit(); } function frmreset(){ document.form1.reset(); } </script> </head> <body> <div class="container"> <h2>회원가입화면</h2> <div class="panel panel-default"> <div class="panel-heading"> <c:if test="${sessionScope.userId!=null && sessionScope.userId!=''}"> <label>${sessionScope.userName}님이 로그인 하셨습니다.</label> </c:if> <c:if test="${sessionScope.userId==null || sessionScope.userId==''}"> <label>안녕하세요</label> </c:if> </div> <div class="panel-body"> <form id="form1" name="form1" class="form-horizontal" method="post"> <div class="form-group"> <label class="control-label col-sm-2" for="id">아이디:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="id" name="id" placeholder="아이디를 입력하세요" style="width: 30%"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pass">비밀번호:</label> <div class="col-sm-10"> <input type="password" class="form-control" id="pass" name="pass" placeholder="비밀번호를 입력하세요" style="width: 30%"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="name">이름:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="name" name="name" placeholder="이름을 입력하세요" style="width: 30%"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="age">나이:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="age" name="age" placeholder="나이입력" style="width: 10%"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="email">이메일:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="email" name="email" placeholder="이메일을 입력하세요" style="width: 30%"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pass">전화번호:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="phone" name="phone" placeholder="전화번호를 입력하세요" style="width: 30%"> </div> </div> </form> </div> <div class="panel-footer" style="text-align: center;"> <c:if test="${sessionScope.userId==null || sessionScope.userId==''}"> <input type="button" value="등록" class='btn btn-primary' onclick="add()"/> </c:if> <c:if test="${sessionScope.userId!=null && sessionScope.userId!=''}"> <input type="button" value="등록" class='btn btn-primary' onclick="add()" disabled="disabled"/> </c:if> <input type="button" value="취소" class='btn btn-warning' onclick="frmreset()"/> <input type="button" value="리스트" onclick="location.href='${ctx}/memberList.do'" class='btn btn-success'/> </div> </div> </div> </body> </html>> 회원인증과 관련하여 정리하자면,
-로그인
로그인 폼으로 id,비번 입력 -> Login컨트롤러가 값을 받고, DB에 저장된 id와 비번과 일치하는지 검사
-> 일치시에 session을 생성하여 로그인 id를 저장
-> response 해더에 생성된 session id를 쿠키의 형태로 클라이언트에게 넘겨준다.
(request.getSession() -세션객체를 얻으면 Cookie에 session id를 넣고 응답해더에 넣어줌)
-로그아웃
-세션을 종료시키는 방법-
>session을 강제로 종료시키거나
>브라우저가 종료되거나
> 세션의 만료시간이 종료되면
이중 로그아웃은 로그아웃 버튼을 누르면, session을 강제로 종료시키는 것이다.
> session이 종료되면, 기존에 session id가 만료된다.
> 클라이언트는 새로운 요청시에 새로운 session id와 저장소를 부여받게 된다.
> 따라서 기존에 저장된 값들에 접근할 수 없다.
- 로그인 유무 검사
클라이언트가 session id를 부여받고 session에 특정 값을 저장했다면,
모든 뷰는 클라이언트가 사용하는 session저장소에 접근하여 저장된 값을 확인할 수 있다.
따라서 ${sessionScope.~~} 등 session에 접근하여 저장된 특정값을 확인하여 로그인 유무를 판단할 수 있다.
참고자료:
나프2탄(인프런) - 박매일
https://www.inflearn.com/course/%EB%82%98%ED%94%84-mvc-2
[NarP Series] MVC 프레임워크는 내 손에 [나프2탄] - 인프런 | 강의
본 과정은 WEB MVC 프레임워크가 무엇이고 WEB MVC 프레임워크가 어떻게 변형이 되면서 Spring WEB MVC 프레임워크로 넘어가는지 TPC(생각하고-표현하고-코딩하고) 기법을 통해 단계적으로 학습하고 이
www.inflearn.com
'Web > Servlet-JSP' 카테고리의 다른 글
Servlet-JSP MVC07 (2) - ajax로 JSON 다루기 (0) 2023.06.26 Servlet-JSP MVC07 (1) - Ajax를 활용한 id 중복확인 (0) 2023.06.25 Servlet-JSP MVC06 (2) - 로그아웃 처리와 여러설정 (0) 2023.06.24 Servlet-JSP MVC06 (1) - Session을 이용한 로그인 처리 (0) 2023.06.24 Servlet-JSP MVC04 (2) - handlerMapping and viewResolver (0) 2023.06.16