JSP 강의 Day10

주세환·2023년 4월 13일
Javajqueryjsp자바스크립트프론트엔드
0

JSP

목록 보기
11/16

고객

고객용 마이페이지

<c:if test="${sessionScope.id ne null}">  
	<a href="mypage.do">마이페이지</a>    
	<label>${sessionScope.name}님 로그인</label>    	
	<a href="#" onclick="logoutAction()">로그아웃</a>
</c:if>

customer_home.jsp에 마이페이지를 추가한다.

로그인을 한 화면

마이페이지 눌렀을 때.

@WebServlet(urlPatterns = {"/customer/mypage.do"})
public class CustomerMypageController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.getRequestDispatcher("/WEB-INF/customer/customer_mypage.jsp").forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
	}
}

CustomerMypageController.java를 생성한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>고객용 마이페이지</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" />
</head>

<body>
	<div class="container">
        
	</div>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js"></script>
	<script>
	</script>
</body>
</html>

customer_mypage.jsp도 생성한다.

아무것도 나오지 않는 것이 정상.

@WebServlet(urlPatterns = {"/customer/mypage.do"})
public class CustomerMypageController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		// 세션객체 생성
		HttpSession httpSession = request.getSession();
		// 세션에서 아이디 정보 얻기
		String sessionId = (String) httpSession.getAttribute("id");
		System.out.println(sessionId); // null인지 내용이 없는지
		// 세션 정보 존재 유무 확인
		
		if(sessionId == null) {
			response.sendRedirect("login.do");
		}
		else {
			request.getRequestDispatcher("/WEB-INF/customer/customer_mypage.jsp").forward(request, response);			
		}
	}
}

CustomerMypageController.java를 생성.

mypage.do로 접속했는데 login.do로 이동하였다.

로그인을 하지 않았으니 정상이다.

로그인을 하고 마이페이지를 누르면

mypage.do로 정상적으로 접속된다.

필터

이렇게 로그인이 되어야하는 상태를 요구하는 경우가 많기 때문에 필터를 만들어보자.

@WebFilter(urlPatterns = {"/customer/mypage.do", "/customer/orderlist.do"})
public class CustomerFilter implements Filter{	
	@Override
	public void doFilter(ServletRequest arg0, ServletResponse arg1, FilterChain arg2)
			throws IOException, ServletException {
		HttpServletRequest request = (HttpServletRequest) arg0;
		HttpServletResponse response = (HttpServletResponse) arg1;
		// 컨트롤러로 가기전에 수행해야 하는 작업들..
		// 로그인이 되었는지 확인
		// 로그인이 안되었다면 로그인 페이지로 이동
		System.out.println("customer filter = > " + request.getRequestURI());
		
		
		// 컨트롤러로 정상진입
		arg2.doFilter(arg0, arg1);
	}

}

filter라는 패키지를 생성하고 그 안에 CustomerFilter.java를 생성한다.

orderlist.do, mypage.do로 접속하였다.

콘솔에 출력된다. 정상적으로 작동한다는 뜻이다.

마이페이지

@WebServlet(urlPatterns = {"/customer/mypage.do"})
public class CustomerMypageController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String menu = request.getParameter("menu");
		if(menu == null) {
			response.sendRedirect("mypage.do?menu=1");
			return; // 메소드 종료. 아래쪽 실행 안됨.
		}
		request.getRequestDispatcher("/WEB-INF/customer/customer_mypage.jsp").forward(request, response);			
	}
}

CustomerMypageController를 수정하고 

@WebFilter(urlPatterns = {"/customer/mypage.do", "/customer/orderlist.do"})
public class CustomerFilter implements Filter{	
	@Override
	public void doFilter(ServletRequest arg0, ServletResponse arg1, FilterChain arg2)
			throws IOException, ServletException {
		HttpServletRequest request = (HttpServletRequest) arg0;
		HttpServletResponse response = (HttpServletResponse) arg1;
		System.out.println("customer filter = > " + request.getRequestURI());
		
		HttpSession httpSession = request.getSession();
		String sessionId = (String) httpSession.getAttribute("id");
		
		if(sessionId == null) { // 세션 객체 없으면 로그인 페이지로..
			response.sendRedirect("login.do");
			return; // 메소드를 종료시킴
		}
		
		//있으면 원래 수행하고자 하는 페이지로...
		arg2.doFilter(arg0, arg1);
	}
}

CustomerFilter를 이렇게 수정한다.

<body>
	<div class="container">
        <a href="mypage.do?menu=1" class="btn btn-primary">회원정보 수정</a>
        <a href="mypage.do?menu=2" class="btn btn-primary">회원 암호 변경</a>
        <a href="mypage.do?menu=3" class="btn btn-primary">회원탈퇴</a>
        <a href="mypage.do?menu=4" class="btn btn-primary">주문내역</a>
        <hr />
        <c:if test="${param.menu == 1}"> <!-- 주소창의 메뉴가 1이라면 -->
        	1
        </c:if>
        <c:if test="${param.menu == 2}">
        	2
        </c:if>
        <c:if test="${param.menu == 3}">
        	3
        </c:if>
        <c:if test="${param.menu == 4}">
        	4
        </c:if>
	</div>

customer_mypage.jsp를 이렇게 수정한다.

마이페이지에 들어가면 자동으로 mypage.do?menu=1로 들어가지고 그에 해당하는 내용이 아래에 나오게 된다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<div>
	<input type="text" placeholder="이름" />
	<input type="text" placeholder="나이" />
	<input type="button" value="정보변경" />
</div>
</html>

WEB-INF 아래에 customer_menu 폴더를 생성하고 main.jsp를 생성한다.

<c:if test="${param.menu == 1}"> <!-- 주소창의 메뉴가 1이라면 -->
	<jsp:include page="../customer_menu/main.jsp"></jsp:include>
</c:if>

customer_mypage.jsp를 위처럼 수정한다.

이렇게 customer_mypage.jsp에서 main.jsp를 불러올 수 있다.

회원정보 수정

@Select({
	" SELECT m.id, m.name, m.age FROM member m WHERE id=#{id} "
})
public Member selectMemberOne(@Param("id") String id);

mapper를 하나 생성한 뒤

@WebServlet(urlPatterns = {"/customer/mypage.do"})
public class CustomerMypageController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String menu = request.getParameter("menu");
		if(menu == null) {
			response.sendRedirect("mypage.do?menu=1");
			return; // 메소드 종료. 아래쪽 실행 안됨.
		}
		
		// 세션에서 아이디 꺼내기
		String id = (String) request.getSession().getAttribute("id");		
		if( Integer.parseInt(menu) == 1) { // 정보변경시
			// 아이디를 전송해서 이름과 나이를 받아옴
			Member obj = MybatisContext.getSqlSession().getMapper(MemberMapper.class).selectMemberOne(id);
			request.setAttribute("obj", obj);
		}
		
		request.getRequestDispatcher("/WEB-INF/customer/customer_mypage.jsp").forward(request, response);			
	}
}

CustomerMypageController를 수정해주고

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<div>
	<input type="text" placeholder="이름" value="${obj.name}"/>
	<input type="number" placeholder="나이" value="${obj.age}"/>
	<input type="button" value="정보변경" />
</div>
</html>

main.jsp에 추가해준다.

마이페이지에 들어가면 로그인 계정의 이름, 나이 정보를 가져와서 출력한다.

<div>
	<form action="mypage.do?menu=1" method="post">
		<input type="text" name="name" placeholder="이름" value="${obj.name}"/>
		<input type="number" name="age" placeholder="나이" value="${obj.age}"/>
		<input type="button" value="정보변경" onclick="updateMember()"/>
	</form>
</div>

main.jsp를 수정해주고

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	int menu = Integer.parseInt(request.getParameter("menu"));
	if(menu == 1) { //회원정보수정
		String id = (String) request.getSession().getAttribute("id");
		
		Member obj = new Member();
		obj.setId(id);
		obj.setName(request.getParameter("name"));
		obj.setAge(Integer.parseInt( request.getParameter("age")) );
		
		MybatisContext.getSqlSession().getMapper(MemberMapper.class).updateMemberOne(obj);
	}
	else if(menu == 2) {
	    
	}

	else if(menu == 3) {
	    
	}

	else if(menu == 4) {
	    
	}
	
	response.sendRedirect("mypage.do?menu=" + menu);
}

CustomerMypageController의 doPost를 위처럼 수정한다.

customer로 로그인을 하여 마이페이지에 들어왔다.

변경할 이름과 나이를 작성하고 정보변경을 누르면

화면은 변하지 않는다.

콘솔에서 확인하면 이름과 나이가 수정된 것을 확인할 수 있다.

암호 변경

// 비밀번호 변경
@Update ({
	" UPDATE member set password = #{obj.newpw} WHERE id = #{obj.id} and password = #{obj.password} "
})
public int updatepwMember(@Param("obj") Member obj);

Mapper를 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<div>
	<form action="mypage.do?menu=2" method="post">
		<input type="password" name="pw" id="pw" placeholder="현재 암호" value="${obj.password}"/>
		<input type="password" name="pw1" id="pw1" placeholder="변경할 암호" value="${obj.newpw}"/>
		<input type="password" name="pw2" id="pw2" placeholder="변경할 암호 확인" value="${obj.newpw}"/>
		<input type="button" value="암호 변경" onclick="updatepwMember()"/>
	</form>
</div>

menu2.jsp 생성

function updatepwMember(){
	// 유효성 검사
	const pw = document.getElementsByName("pw")[0].value;
	const pw1 = document.getElementsByName("pw1")[0].value;
	const pw2 = document.getElementsByName("pw2")[0].value;
	
	if( pw1.value !== pw2.value){
		alert('암호가 일치하지 않습니다.');
		pw1.focus();
		return false;
	}
	//  document.getElementsByTagName("form")[0].submit();
	const form = document.getElementsByTagName("form");
	form[0].submit();
}

customer_mypage.jsp의 script에 추가하고

else if(menu == 2) { // 암호 변경
	String id = (String)request.getSession().getAttribute("id");
	
	String hashPw = Hash.hashPW(id, request.getParameter("pw"));
	String hashPw1 = Hash.hashPW(id, request.getParameter("pw1"));
	
	Member obj = new Member();
	obj.setId(id);
	obj.setPassword(hashPw);
	obj.setNewpw(hashPw1);
	
	int ret = MybatisContext.getSqlSession().getMapper(MemberMapper.class).updatepwMember(obj);
	
	if(ret == 1) {
		response.sendRedirect("home.do");
		System.out.println("성공");
		return;
	}

CustomerMypageController의 else if(menu == 2)의 부분을 위처럼 수정한다.

비밀번호 pw1 에서 pw로 변경하였다.

콘솔에 성공이 출력되었다.

변경된 비밀번호로 정상적으로 로그인된다.

profile
주세환
이전 포스트

JSP 강의 Day10

다음 포스트

JSP 강의 Day11

0개의 댓글