본문 바로가기

개발/Web

[Java] Sevlet/JSP - 회원서비스 - 회원가입

회원서비스

 

< 회원가입 >

1) 회원가입 양식 요청

2) 회원가입 요청

두 단계로 나눌 수 있음

 

* MEMBER테이블

- 사용자에게 받을 정보 : 아이디, 비밀번호, 이름, 번호, 이메일, 취미

 

1) 회원가입 양식 요청

 

1. 회원가입 양식 요청 버튼

- 단순한 정적 페이지 요청이라도 디렉토리 구조가 노출되지 않도록 Servlet을 거쳐서 화면을 요청하도록 함

<button type="button" onclick="enrollPage();">회원가입</button>
<script>
    function enrollPage() {
        // http://localhost:8001/jsp/enrollForm.me(매핑값)
        location.href = "<%= contextPath %>/enrollForm.me"; 
    }			
</script>

 

2. MemberEnrollFormController.java (Servlet)

- 매핑값 : /enrollForm.me

- RequsetDispatcher객체 생성 후 포워딩

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

 

 

 

2) 회원가입 요청

 

1. 회원가입 양식 화면

- form태그 작성. url에 요청값이 노출되지 않도록 post 방식

- input태그에 name속성을 부여해야 요청 시 값을 전달할 수 있음

<form action="<%= contextPath %>/insert.me" method="post" id="enroll-form">
    <table align="center">
        <tr>
            <td>* 아이디</td>
            <td><input type="text" name="userId" maxlength="12" required></td>
            <td><button>중복확인</button></td>
        </tr>
        <tr>
            <td>* 비밀번호</td>
            <td><input type="password" name="userPwd" maxlength="15" required></td>
            <td></td>
        </tr>
        <tr>
            <td>* 비밀번호 확인</td>
            <td><input type="password" maxlength="15" required></td>
            <td></td>
        </tr>
        <tr>
            <td>* 이름</td>
            <td><input type="text" name="userName" maxlength="5" required></td>
            <td></td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;전화번호</td>
            <td><input type="text" name="phone" placeholder="- 포함해서 입력해주세요"></td>
            <td></td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;이메일</td>
            <td><input type="email" name="email"></td>
            <td></td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;주소</td>
            <td><input type="text" name="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>
    <div align="center">
        <button type="submit">회원가입</button>
        <button type="reset">초기화</button>
    </div>
    <br><br>
</form>

 

2. MemberInsertContoller.java

- 매핑값 : /insert.me

- post방식으로 요청 시 인코딩

- 같은 name속성을 가진 input태그가 여러 개일 경우 getParameterValues() : String[]

- 값을 모두 들고 Service단으로 가기 위해 VO객체에 넣어 가공

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

    // 회원가입 - POST방식으로 요청함
    // 1) 인코딩 설정
    request.setCharacterEncoding("UTF-8");

    // 2) request객체로부터 요청시 값 빼기
    String userId = request.getParameter("userId");   
    String userPwd = request.getParameter("userPwd");  
    String userName = request.getParameter("userName");   
    String phone = request.getParameter("phone");          
    String email = request.getParameter("email");             
    String address = request.getParameter("address");
    String[] interestArr = request.getParameterValues("interest"); 
    // 선택한 취미를 하나의 문자열로 만들어서 컬럼에 넣을 것임
    String interest = ""; 
    if (interestArr != null) { // 체크 안했으면 빈문자열 
        interest = String.join(",", interestArr);		
    }		

    // 3) Member 객체에 담기
    Member m = new Member();
    m.setUserId(userId);
    m.setUserPwd(userPwd);
    m.setUserName(userName);
    m.setPhone(phone);
    m.setEmail(email);
    m.setAddress(address);
    m.setInterest(interest);

    // 4) 요청처리(Service단으로 토스)
    int result = new MemberService().insertMember(m);

    // 5) 처리 결과를 가지고 사용자가 보게 될 응답화면 지정
    if(result > 0) { // 성공 => /jsp를 요청 => url재요청방식 (sendRedirect방식)
        request.getSession().setAttribute("alertMsg", "회원가입에 성공했습니다."); // 성공 메시지
        response.sendRedirect(request.getContextPath()); // 웰컴페이지로 
    } else { // 실패 => 에러페이지
        request.setAttribute("errorMsg", "회원가입에 실패했습니다.");
        RequestDispatcher view = request.getRequestDispatcher("views/common/errorPage.jsp");
        view.forward(request, response);
    }
}

 

3. MemberService.java (자바Class)

- insertMember()

- Connection객체 생성 후 같이 전달

- 실행하려는 SQL문이 DML(INSERT, UPDATE, DELETE)문일 경우 성공 여부에 따른 트랜잭션 처리

public int insertMember(Member m) {
    Connection conn = JDBCTemplate.getConnection();

    int result = new MemberDao().insertMember(conn, m);

    // insert문 => 트랜잭션 처리
    if(result > 0) JDBCTemplate.commit(conn);
    else JDBCTemplate.rollback(conn);

    JDBCTemplate.close(conn);

    return result;
}

 

4. MemberDao.java (자바Class)

- insertMember()

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(3, m.getUserName());
        pstmt.setString(4, m.getPhone());
        pstmt.setString(5, m.getEmail());
        pstmt.setString(6, m.getAddress());
        pstmt.setString(7, m.getInterest());

        result = pstmt.executeUpdate();
    } catch (SQLException e) {
        e.printStackTrace();
    } finally {
        JDBCTemplate.close(pstmt);
    }

    return result;
}

- SQL문

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