[03] 마이페이지

마이페이지 만들기

마이페이지에서 로그인한 유저의 정보를 확인할 수 있게 해보자.

---

 

 

 

<< 이전포스팅에서 완료된 요청     |    이번포스팅에서 구현할 요청 >>

기능	url요청	요청시 전달값		응답페이지 또는 url재요청
	/web			index.jsp
로그인요청	/login.me	userId=?&userPwd=?	실패시	views/common/errorPage.jsp
			성공시	/web  url재요청=> index.jsp
로그아웃요청	/logout.me			/web  url재요청=> index.jsp
회원가입페이지	/enrollForm.me			views/member/memberEnrollForm.jsp
회원가입요청	/insert.me	userId=? ... 등 총 n개	실패시	views/common/errorPage.jsp
			성공시	/web  url재요청 => index.jsp
마이페이지요청	/myPage.me		로그인전	/web   url재요청 => index.jsp
			로그인후	views.member/myPage.jsp

 

 

 

---

마이페이지

---

STEP1) menubar.jsp (수정)

• 마이페이지버튼에 서블릿 매핑값을 입력한다.
  >> 디렉토리 구조를 노출시키지 않기 위해 포워딩을 할것!
• 매핑값 : myPage.me

<a href="<%=contextPath%>/myPage.me">마이페이지</a>

 

 

STEP2) MyPageController.java

• 생성위치 : java/com/br/member/controller
  서블릿/매핑값 myPage.me
• 단순 페이지 포워딩 용도
• 마이페이지 버튼은 로그인 성공'후'에 노출됨
  >> 로그인 성공 당시 이미 session에 Member객체를 담아뒀음(어떤 jsp든 꺼내쓸수 있다)
  >>여기서 request에 정보를 담을 필요가 없다!

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	//응답페이지 (views/member/myPage.jsp) 포워딩하기
	request.getRequestDispatcher("views/member/myPage.jsp").forward(request,response);
}

 

 

STEP3) myPage.jsp

• 생성위치 : webapp/views/member
• 마이페이지 화면을 설계한다.
• 회원가입폼과 형태를 동일하게 유지하되, 다음과 같은 변화가 있다.
  - db로부터 가져온 값을 넣어 사용자에게 표시 
  - 비밀번호 변경은 다른 페이지에서 제공할것이므로 지운다
• 최상단부 (html태그 이전)
  - menubar.jsp에서 loginUser를 session으로부터 꺼내 Member객체로 담아놨음
  >> 바로 getter메소드로 필요한 데이터를 꺼내놓는다.
  - 필수입력이 아니었던 정보는 null 상태
  >> 이대로 출력식에 쓰면 텍스트상자에 null이 적혀지게 되므로 3항 연산자를 통해 빈 문자열을 담도록 한다

<%
    String userId = loginUser.getUserId();
    String userName = loginUser.getUserName();
    String interest = loginUser.getInterest()==null? "":loginUser.getInterest();		
%>

 

• 바디부
  - input태그의 value값으로 출력식을 넣어 기존 데이터들이 표시되도록 한다.
  - 아이디는 수정하지 못하게 readonly 속성을 부여한다.

* 아이디  
<input type="text" name="userId" value="<%=userId%>" readonly>
* 이름  
<input type="text" name="userName" value="<%=userName%>">
* 관심분야
<input type="checkbox" name="interest" value="sports" id="sports">
<label for="sports">운동</label> 
<input type="checkbox" name="interest" value="climbing" id="climbing">
<label for="climbing">등산</label> 
.....
<input type="checkbox" name="interest" value="fishing" id="fishing">
<label for="fishing">낚시</label>

 

    *** 다수의 checkbox로 이루어져 복수선택 가능한 interest항목은 회원정보를 표현하기에 조금 까다롭다.
      - db에는 선택된 value속성들이 (,)로 연결되어 하나의 문자열로 저장된다.
        ("sports,climbing,game" 의 형태 혹은 "" 가 담겨있을 것 )
      >> 선택자에 순차적으로 접근하는 each() 메소드와 문자열의 포함여부를 조회하는 search() 메소드를 통해서 조건에 맞는 요소에 cheched 속성을 부여한다

<script>
    $(function(){
        //현재 로그인한 회원의 관심분야들 자바스크립트 변수에 옮겨담기
        //출력식을 따옴표로 감싸주는것을 잊지 않는다.
        const interest = "<%=interest%>";
        //순차적으로 접근하면서 함수 적용하기
        $('input[type=checkbox]').each(function(){
            // $(this) : 순차적으로 접근한 체크박스요소
            // $(this).val() : 해당요소의 value값(sports, climbing..)
            if(interest.search($(this).val()) != -1) { 
                //포함되었을 경우 인덱스를, 없다면 -1 반환하는 search메소드
                //포함된 경우 checked속성을 부여한다.
                $(this).attr("checked",true);
            }
        })
    })
</script>

 

 

---

오류상황제어

로그인하지 않은 상태에서 즐겨찾기 등을 통해

http://localhost:8887/web/myPage.me

로 접근하면 nullpointerException 발생, 500에러가 뜬다.

//오류발생 시작한 구문
String userId = loginUser.getUserId();
//로그인 성공경험이 없기때문에 loginUser가 null이다.

---

 

STEP1) MyPageController.java (수정)

>> 상위의 케이스를 방지하기 위해 마이페이지로 넘어가는 서블릿을 수정해준다.

1. session 객체를 만든 후 loginUser의 null 여부를 확인하여 로그인 여부를 확인한다.
2. 로그인 전에는 alert띄우며 메인페이지를 응답하며, 로그인 후에는 마이페이지를 응답하도록 코드를 추가한다.
3. alertMsg : 회원가입 구현단계 에서 팝업이 되도록 설정을 해놓았다. 팝업창에 쓰일 메세지만 전달하면 된다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    HttpSession session = request.getSession();
    if(session.getAttribute("loginUser")==null) { //로그인 전 상태
        //session에 alertMsg담아두면 menubar.jsp 로딩되는 상황에서 알람 뜸
        session.setAttribute("alertMsg", "로그인 후 이용가능한 서비스입니다.");
        response.sendRedirect(request.getContextPath());
    }else { //로그인 후
        //응답페이지 (views/member/myPage.jsp)
        request.getRequestDispatcher("views/member/myPage.jsp").forward(request,response);
    }
}