JSP - 회원가입 기능 만들기

사이트 운용에서 고객들을 관리하기 위해 회원가입, 로그인, 로그아웃 기능은 꼭 구현해두어야 합니다.
이 글에선 프로젝트 때 만들었던 회원가입 기능을 재구성해보겠습니다.

회원가입

회원가입 기능의 원리는 사용자가 아이디나 닉네임, 비밀번호 등의 값을 입력하고 가입완료 버튼을 눌렀을 때 입력한 값이 데이터베이스로 전송되어 회원 데이터를 생성하는 것입니다.

뷰 작업

먼저 뷰 작업(디자인)을 해야겠죠. jsp 파일을 만들어 html, css 등을 사용해 데이터를 받을 회원가입 폼을 만듭니다.

joinForm

폼이 대강 만들어지면 jsp 안에서 데이터를 전송할 준비를 합니다.
여기서 해야 할 것이 두 가지인데 1. form 태그 사용 2. 제이쿼리로 버튼 동작하기 입니다.

우선 데이터가 입력될 태그들(이름~이메일)을 form 태그로 감싸줍니다.

저는 데이터 전송처리를 joinProc라는 가상의 페이지로 보낼것이기 때문에 form 태그의 action 주소를 해당 경로로 입력했습니다.

<form method="post" id="frm" name="frm" action="(joinProc 경로)">

	<label for="name">이름 : </label>
	<div class="inputGroup">
		<input type="text" class="formData" id="name" name="name">
	</div>

	...

	<label for="email">이메일 : </label>
	<div class="inputGroup">
		<input type="text" class="formData" id="email" name="email">
	</div>

</form>

그리고 ‘가입하기’ 버튼을 눌렀을 때 저 form 안의 데이터가 보내지도록 처리할 것입니다.

$('#button').click(function(){		
	$('#frm').submit();		
});

컨트롤러 작업

회원가입 페이지(jsp)가 서버를 통해 보여질 수 있도록 컨트롤러 작업을 합니다.
컨트롤러는 서블릿 메소드가 있는 Controller 인터페이스를 구현해서 오버라이딩 했습니다.

(여기서 if문은 만일에 경우에 대비해 넣은 것이니 없어도 상관없습니다.)

public class Join implements Controller {

	@Override
	public String exec(HttpServletRequest req, HttpServletResponse resp)
     	throws ServletException, IOException {
		String view = "(회원가입페이지 경로)";	//기본적으로 보여질 뷰

		if(req.getSession().getAttribute("SID") != null) {
			req.setAttribute("isRedirect", true);
			view = "(메인페이지 경로)";	//만약 로그인되지 않으면 메인페이지로 돌아가기
		}
		
		return view;
	}
}

기능 구현

사전작업을 마쳤으니 이제 본격적으로 기능 구현을 합니다.

SQL

클래스를 하나 만들어서 StringBuffer와 switch 문을 사용해 데이터베이스에 회원정보를 추가하는 sql 쿼리를 작성할거예요.

DB의 MEMBER 테이블에 필요한 데이터는 mno(회원번호), name(이름), id(아이디), pw(비밀번호), tel(전화번호), email(이메일) 입니다.
그런데 name, id, pw, tel, email에는 아직 어떤 데이터가 들어가는지 모르죠. 고객들이 회원가입을 할 때마다 입력되는 데이터가 달라지기 때문에 ?로 작성합니다.

public class MemberSQL {
	public final int ADD_MEMB	= 1001;

	public String getSQL(int code) {		
		StringBuffer buff = new StringBuffer();
		
		switch(code) {			
		case ADD_MEMB:
			buff.append("INSERT INTO ");
			buff.append("member ");
			buff.append("    (mno, name, id, pw, tel, email) ");
			buff.append("VALUES( ");
			buff.append("    (SELECT NVL(MAX(mno) + 1, 1001) FROM member), ");
			buff.append("    ?, ?, ?, ?, ? ");
			buff.append(") ");
			break;
		}	
		return buff.toString();
	}
}

VO

VO 클래스를 만들어 MemberSQL.ADD_MEMB의 쿼리를 구성하는 필드들을 private 접근지정자로 캡슐화합니다.
이 클래스는 필드 캡슐화를 통해 외부에서의 접근을 차단하고 내부적으로 접근할 수 있는 getter, setter 메소드만 공개해서 유효한 값들을 데이터로 저장하는 기능을 합니다.

여기서는 이에 더해 클래스에 값이 올바르게 담겼는지 확인하기 위해서 toString() 오버라이드를 하였습니다.

public class MemberVO {
	private int mno;
	private String name, id, pw, tel, email;	
	
	public int getMno() {
		return mno;
	}
	public void setMno(int mno) {
		this.mno = mno;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPw() {
		return pw;
	}
	public void setPw(String pw) {
		this.pw = pw;
	}
	public String getTel() {
		return tel;
	}
	public void setTel(String tel) {
		this.tel = tel;
	}
	public String getEmail() {
		return 	email;
	}
	public void setEmail(String email) {
		this.email = email;
	}

	@Override
	public String toString() {	//값이 올바르게 담겼는지 확인 위함
		return "mno=" + mno + ", name=" + name + ", id=" + id + 
				", pw=" + pw + ", tel=" + tel + ", mail=" + email;
	}
}

DAO

사용자(고객)로부터 요청이 왔을 때 입력된 데이터를 vo에 담아 dao에 요청하면 dao는 DB로부터 데이터를 입력하거나 조회한 후 그 결과를 돌려줍니다.

public class MemberDao {
	DBCP db;
	Connection con;
	Statement stmt;
	PreparedStatement pstmt;
	ResultSet rs;
	MemberSQL mSQL;
	
	public MemberDao() {
		db = new DBCP();
		mSQL = new MemberSQL();
	}

	public int addMember(MemberVO mVO) {		
		int cnt = 0 ;
		con = db.getCon();
		String sql = mSQL.getSQL(mSQL.ADD_MEMB);	//sql 쿼리 가져오기
		pstmt = db.getPSTMT(con, sql);
		
		try {	//ADD_MEMB의 ? 채우기
			pstmt.setString(1, mVO.getName());
			pstmt.setString(2, mVO.getId());
			pstmt.setString(3, mVO.getPw());
			pstmt.setString(4, mVO.getTel());
			pstmt.setString(5, mVO.getEmail());
			cnt = pstmt.executeUpdate();
		} catch(Exception e) {
			e.printStackTrace();
		} finally {
			db.close(pstmt);
			db.close(con);
		}
		return cnt;
	}
}

JoinProc 컨트롤러 구현

위에서 jsp 작업을 할 때 데이터 전송 경로를 joinProc라는 가상의 페이지로 설정했었죠. 그 가상의 페이지가 동작하도록 컨트롤러를 구현해주어야 합니다.

public class JoinProc implements Controller {

	@Override
	public String exec(HttpServletRequest req, HttpServletResponse resp) 
		throws ServletException, IOException {
		MemberVO mVO = new MemberVO();
		
		mVO.setName(req.getParameter("name"));
		mVO.setId(req.getParameter("id"));
		mVO.setPw(req.getParameter("pw"));
		mVO.setTel(req.getParameter("tel"));
		mVO.setEmail(req.getParameter("email"));
		
		MemberDao mDao = new MemberDao();
		PointDao pDao = new PointDao();
		int cnt = 0;
		cnt = mDao.addMember(mVO);

		String view = "(메인페이지 경로)";
		req.setAttribute("isRedirect", true);
		if(cnt==1) {
			req.getSession().setAttribute("SID", mVO.getId());
			cnt = pDao.getPoint(mVO.getId());
		} else {
			view = "(회원가입페이지 경로)";
		}
		return view;
	}
}

여기까지 했다면 회원가입 기능 완성입니다. 작업 원리가 파악이 된다면 크게 어렵지 않을 거예요.

comments powered by Disqus