[Java] Sevlet/JSP - 회원서비스 - 마이페이지

회원서비스

 

< 마이페이지 >

 

1. 마이페이지 요청 버튼

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

 

 

2. MyPageController.java (Servlet)

- 매핑값 : /myPage.me

- 로그인 하지 않고 url로 접그하는 경우를 막기 위해 Session에 loginUser가 담겨있는지를 판단 후 보여줌

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    HttpSession session = request.getSession(); // 세션의 주소값 불러옴

    // 로그인 판별
    if (session.getAttribute("loginUser") == null) {
        session.setAttribute("alertMsg", "로그인한 사용자만 이용할 수 있습니다.");
        response.sendRedirect(request.getContextPath());
    } else {
        request.getRequestDispatcher("views/member/myPage.jsp").forward(request, response);
    }
}

 

3. myPage.jsp - 마이페이지 화면

- 스크립틀릿(<% %>)과 출력식(<%= %>) 사용

- Session에 담겨있는 loginUser에서 정보를 가져와 변수에 담음

<%
    String userId = loginUser.getUserId();
    String userName = loginUser.getUserName();
    // 필수입력사항이 아닌 경우 => null이 나올 수 있음
    String phone = (loginUser.getPhone() == null) ? "" : loginUser.getPhone();
    String email = (loginUser.getEmail() == null) ? "" : loginUser.getEmail();
    String address = (loginUser.getAddress() == null) ? "" : loginUser.getAddress();
    String interest = (loginUser.getInterest() == null) ? "" : loginUser.getInterest();
%>

- 화면에 정보 보여주기

- 취미 체크박스에 checked속성 부여 위해 script태그 사용

<form action="<%= contextPath %>/update.me" method="post" id="mypage-form">
    <table align="center">
        <tr>
            <td>* 아이디</td>
            <td><input type="text" name="userId" value="<%= userId %>"  readonly maxlength="12" required></td>
            <td></td>
        </tr>
        <tr>
            <td>* 이름</td>
            <td><input type="text" name="userName" value="<%= userName %>" maxlength="5" required></td>
            <td></td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;전화번호</td>
            <td><input type="text" name="phone" value="<%= phone %>" placeholder="- 포함해서 입력해주세요"></td>
            <td></td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;이메일</td>
            <td><input type="email" name="email" value="<%= email %>"></td>
            <td></td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;주소</td>
            <td><input type="text" name="address" value="<%= address %>"></td>
            <td></td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;취미</td>
            <td colspan="2">
                <input type="checkbox" id="climbing" value="등산" name="interest"><label for="climbing">등산</label>
                <input type="checkbox" id="drinking" value="음주" name="interest"><label for="drinking">음주</label>
                <input type="checkbox" id="challenge" value="챌린지" name="interest"><label for="challenge">챌린지</label>
                <br>
                <input type="checkbox" id="community" value="커뮤니티" name="interest"><label for="community">커뮤니티</label>
                <input type="checkbox" id="vegetarian" value="채식" name="interest"><label for="vegetarian">채식</label>
                <input type="checkbox" id="rest" value="휴식" name="interest"><label for="rest">휴식</label>
            </td>
        </tr>
    </table>
    <br><br>
    <script>
        // 사용자가 입력한 취미들
        var interest = '<%= interest %>';
        // 자바의 변수를 자바스크립트 변수로 받아줌

        $('input[type=checkbox]').each(function() {

            // 순차적으로 접근한 checkbox의 value속성값이 interest에 포함되어있을 경우 체크
            // -> checked속성 부여 => attr(속성명, 속성값);

            // 자바스크립트 indexOf => 찾고자하는 문자가 없을 경우 -1을 리턴 == 제이쿼리의 search메소드
            // 제이쿼리에서 value속성값을 리턴해주는 메소드 : val()
            // 제이쿼리에서 현재 접근한 요소 지정 : $(this)
            if(interest.search($(this).val()) != -1) { // 포함되어있을 경우 => checked 부여!
                $(this).attr('checked', true);
            }
        });
    </script>

    <div align="center">
        <button type="submit" class="btn btn-sm btn-secondary">정보변경</button>
        <button type="button" class="btn btn-sm btn-warning" data-toggle="modal" data-target="#updatePwdFor">비밀번호변경</button>
        <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#deleteMember">회원탈퇴</button>
    </div>

    <br><br>
</form>