[02] 회원가입 기능

회원가입

아이디, 비밀번호, 이름, 관심분야를 받는 회원가입 폼을 만들고,

DB에 INSERT 해보자

---

 

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

기능	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=? ... 등 총 7개	실패시	views/common/errorPage.jsp
			성공시	/web  url재요청 => index.jsp

 

---

회원가입 페이지로 이동하기

이때, url을 직접입력하지 않고 서블릿을 거쳐서 이동한다.

---

 

STEP1) menubar.jsp (수정)

• 회원가입 버튼에 onclick이벤트를 넣은 후 회원가입 페이지를 요청하도록 함수를 만든다.
• 이때, 경로를 직접 입력해서url구조를 노출시키지 않고, enrollForm.me 서블릿을 호출한 후 포워딩을 하여 보안을 지킨다.

    <button type="button" onclick="enrollPage();">회원가입</button>
    <!-- 기본타입이 submit이기 때문에 type="button"을 입력 -->
<script>
     function enrollPage() {
          //원하는 페이지의 경로 직접입력하기
          //location.href = "<%=contextPath%>/views/member/memberEnrollForm.jsp";
          // >> url에 디렉토리 구조가 노출되어 보안에 취약해진다
          location.href = "<%=contextPath%>/enrollForm.me";
          //단순 페이지 요청에 있어서도 Servlet을 만들어 처리하자
          //포워딩 방식을 통해서 해당 페이지가 보여지게끔(이때 url에는 서블릿 매핑값만 남아있음)
     }
</script>

 

 

STEP2) MemberEnrollFormController.java

• 생성위치 : java/com/br/member/controller
  서블릿/매핑값 enrollForm.me
• 회원가입 페이지만 띄워주는 용도의 서블릿.
  디렉토리 구조를 숨기기 위해 포워딩 방식사용(url에는 매핑값만 남아있음)

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    RequestDispatcher view = request.getRequestDispatcher("views/member/memberEnrollForm.jsp");
    view.forward(request, response);
}

 

 

STEP3) memberEnrollForm.jsp

• 생성위치 : webapp/views/member
• 회원가입에 필요한 데이터를 입력받는 페이지를 설계한다.
• 메뉴바 삽입하기
  메뉴바의 경로는 views/common 폴더 안이고, 현재파일은 views/member폴더 안이다.
  상대경로로 이 위치를 포현하려면 상위폴더로 이동하는 구문 ../ 를 쓴다
  <%@ include file="../common/menubar.jsp" %>
• form태그의 매핑값은 insert.me를 넣는다.

<!-- contextPath는 menubar.jsp에만 선언했지만 include로 포함시켰기 때문에 쓸 수 있다. -->
<form action="<%=contextPath%>/insert.me" method="post" id="enroll-form">
    * 아이디
    <input type="text" name="userId" required>
    <button typr="button">중복확인</button>
    * 비밀번호
    <input type="password" name="userPwd" maxlength="15" required>
    * 비밀번호 확인
    <input type="password" maxlength="15" required>
    * 이름
    <!-- DB에서 이름이 15바이트이므로 최대길이 5-->
    <input type="text" name="userName" required maxlength="5">
    * 관심분야
    <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="movie" id="movie">
    <label for="movie">영화</label>
    
    <button type="submit">회원가입</button>
    <button type="reset">초기화</button>
</form>

 

---

회원가입 및 db에 데이터 추가

회원가입 과정을 진행하여보자

---

 

STEP1) MemberInsertController.java

• 생성위치 : java/com/br/member/controller
  서블릿/매핑값 insert.me
• 회원가입 데이터를 사용하여 db에 insert하는 처리하는 서블릿
• 관심사항 항목을 받은 input태그 checkbox는 다중선택이 가능하여 배열로 넘어온다.
  이때, java의 배열은 db에 삽입할 수 없다.
  따라서 String.join() 메소드를 활용해서 문자열로 가공처리 할것
  (null검사 필수)
• doPost메소드는 doGet메소드를 호출하므로 어떤 방식이든 doGet메소드에 작성한다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //1) 요청시 전달값 뽑기(+가공처리) => 변수/객체에 담기
    //post방식일 경우 한글이 있다면 인코딩 필요
    request.setCharacterEncoding("UTF-8");
		
    String userId = request.getParameter("userId");
    String userPwd = request.getParameter("userPwd");
    String userName = request.getParameter("userName");
    String[] interestArr = request.getParameterValues("interest");
    //자바 배열은 db에 바로 넣을 수 없어서 문자열로 가공처리 필요
    String interest = "";
    if(interestArr != null) {
        interest = String.join(", ", interestArr);
    }
    //데이터 담아두기
    Member m = new Member(userId, userPwd, userName, phone, email, address, interest);
		
    //2) 요청처리 (db에 sql문 실행)
    int result = new MemberService().insertMember(m);

    //3) 처리 결과를 가지고 사용자가 보게될 응답뷰 지정 후 포워딩 또는 url재요청
    if(result>0) {
        //회원가입 성공 => index페이지
        response.sendRedirect(request.getContextPath());			
    }else {
        // 회원가입 실패 => views/common/errorPage.jsp
        // 포워딩할때 request에 errorMsg를 저장해서 전달(에러페이지에서 출력함)
        request.setAttribute("errorMsg", "회원가입 실패했습니다");
        request.getRequestDispatcher("views/common/errorPage.jsp").forward(request, response);			
    }
}
//doPost메소드는 doGet메소드를 호출한다.
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doGet(request, response);
}

 

 

STEP2) MemberService.java (수정)

• 회원가입을 처리하는 메소드 insertMember(m) 생성

public int insertMember(Member m) {
    Connection conn = getConnection();
    int result = new MemberDao().insertMember(conn, m);
    if(result>0) { //성공
        commit(conn);
    } else { //실패
        rollback(conn);
    }
    close(conn);
    return result;	
}

 

 

STEP3) member-mapper.xml (수정)

• 회원가입을 처리하는 sql문 작성 (키값은 insertMember)

<entry key="insertMember">
    INSERT
           INTO MEMBER 
        (
           USER_NO
         , USER_ID
         , USER_PWD
         , USER_NAME
         , INTEREST
        )
           VALUES
        (
            SEQ_UNO.NEXTVAL
          , ?
          , ?
          , ?
          , ?
        )	
</entry>

 

 

STEP4) MemberDao.java (수정)

• 회원가입을 처리하는 메소드 insertMember(conn, m) 생성

public int insertMember(Connection conn, Member m) {
    //insert문 => 처리된 행수반환
    int result = 0;
    PreparedStatement pstmt = null;
    String sql = prop.getProperty("insertMember");
    try {
        pstmt = conn.prepareStatement(sql);
        pstmt.setString(1, m.getUserId());
        pstmt.setString(2, m.getUserPwd());
        ...
        pstmt.setString(4, m.getInterest());
        result = pstmt.executeUpdate();
    } catch (SQLException e) {
        e.printStackTrace();
    } finally {
        close(pstmt);
    }
    return result;
}

 

 

---

알람창 띄우기

여러 상황에서 활용할 수 있는 alertMsg 값을 설정해보자

---

 

STEP1) MemberInsertController.java(수정)

• 회원가입 성공 시 알람메세지를 설정하기 위해 코드 일부를 수정한다
• 알람메세지 설정하기 (1/2)
  1) url 재요청을 하면서 값을 넘기기 위해서는 session객체에 데이터를 담아야한다.
    "alertMsg"라는 키값으로 메세지 문구를 담는다.
  2) 어떤 페이지든 공통분모로 갖는 menubar.jsp에 알람설정을 한다(STEP2)

...
    if(result>0) {
        //회원가입 성공 => index페이지
        //성공알람 띄우기
        //request에 담으면 index에서 쓸 수 없음.(포워딩이 아니기 때문)
        HttpSession session = request.getSession();
        session.setAttribute("alertMsg", "성공적으로 회원가입이 되었습니다.");
        response.sendRedirect(request.getContextPath());			
    }else {
			...
    }
.....

 

 

STEP2) menubar.jsp (수정)

• 알람메세지 설정하기 (2/2)
  3) 최상단부(html태그 이전)에 alertMsg 변수를 옮겨담는다.
    해당 코드는 menubar.jsp가 로딩될때마다 실행되나, alertMsg에 데이터가 없는 경우 null이 담긴다.
  4) 바디부에 null여부 검사 후 alertMsg에 담긴 문구를 출력하는 코드를 작성한다.
  5) session의 alsertMsg를 지운다.
    (지우지 않으면 menubar.jsp 로딩시마다 알람이 뜸)

<% String alertMsg = (String)session.getAttribute("alertMsg"); %>
.....
<body>
    <% if(alertMsg != null) { %>
        <script>
            alert('<%=alertMsg%>'); //홑따옴표로 감싸주는걸 잊지 않는다
            <% session.removeAttribute("alertMsg"); %>
        script>
    <% } %>
.....