[JSP] 회원 기능 (1)

오늘은 memebr 테이블을 생성하여 로그인, 로그아웃, 회원가입 기능들을 구현해볼 것이다.

 

---

member 테이블

varchar2(300) userid;
varchar2(300) userpw;
varchar2(300) username;
varchar2(100) gender;
varchar2(500) email;

DTO, DAO 생성

DTO

: 필드와 getter & setter 생성

 

DAO

: DB와 연결할 수 있도록 DAO 에 connection 객체를 생성해야한다.

 

Connection을 미리 생성하여 관리하는 DataSource 객체는 context.xml에 정의되어 있다.

미리 준비한 DataSource를 자바 객체로 불러오기 위해서는 Context를 객체화해서 불러와야 한다.
Connection 이후에는 이전 순서대로 PreparedStatement, ResultSet]등이 필요하다.

1. context.xml 의 내용을 자바 객체로 불러온다. new InitialContext();
2. context.xml 에 작성한 DataSource 객체를 지정한 이름 "jdbc/oracle"로 불러온다.
3. context.xml 에 정의한 객체는 이름 앞에 접두사를 붙여야 한다. "java:comp/env/"
4. Object 타입을 반환하기 때문에 좌우의 자료형을 맞추기 위해 다운캐스팅 한다. (이후 예외 처리)

public class MemberDAO {

	private Context init;
	private DataSource ds;
	
	private Connection conn;
	private PreparedStatement pstmt;
	private ResultSet rs;
	
	private static MemberDAO instance = new MemberDAO(); // MemberDAO의 객체는 오직 하나뿐이다
	
	public static MemberDAO getInstance() {	// 객체를 반환하는 함수 getInstance()는 외부에서 호출가능
		return instance;
	}
	
	private MemberDAO() {	// 생성자 외부 호출 금지
		try {
			init = new InitialContext();	// context.xml 불러오기
			ds = (DataSource) init.lookup("java:comp/env/jdbc/oracle");	// context 내부 DataSource 불러오기
		} catch (NamingException e) {
			e.printStackTrace();
		}
	}
	
	private MemberDTO mapping(ResultSet rs) throws SQLException {
		MemberDTO dto = new MemberDTO();
		dto.setEmail(rs.getString("email"));
		dto.setGender(rs.getString("gender"));
		dto.setUserid(rs.getString("userid"));
		dto.setUsername(rs.getString("username"));
		dto.setUserpw(rs.getString("userpw"));
		return dto;
	}
	
	private void close() {
		try {
			if(rs != null) 		rs.close();
			if(pstmt != null) 	pstmt.close();
			if(conn != null) 	conn.close();
		} catch(SQLException e) {}
	}
	
	// DB 버전정보 (접속 여부 확인하기)
	public String getVersion() {
		String version = null;
		String sql = "select banner from v$version";
		try {
			conn = ds.getConnection();
			pstmt = conn.prepareStatement(sql);
			rs = pstmt.executeQuery();
			while(rs.next()) {
				version = rs.getString("banner");
			}
		} catch (SQLException e) {
			e.printStackTrace();
			version = e.getMessage();
		} finally { close(); }
		return version;
	}
	
	// Member 목록을 반환하는 함수 (list 페이지)
	public List<MemberDTO> selectList() {
		ArrayList<MemberDTO> list = new ArrayList<>();
		String sql = "select * from member order by userid";
		try {
			conn = ds.getConnection();
			pstmt = conn.prepareStatement(sql);
			rs = pstmt.executeQuery();
			while(rs.next()) {
				MemberDTO dto = mapping(rs);
				list.add(dto);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally { close(); }
		return list;
	}
	
	// 사용자 입력값을 테이블에 추가하는 함수 (join-action 페이지)
	public int insert(MemberDTO dto) {
		int row = 0;
		String sql = "insert into member (userid, userpw, username, gender, email)"
				+ " values (?, ?, ?, ?, ?)";
		try {
			conn = ds.getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, dto.getUserid());
			pstmt.setString(2, dto.getUserpw());
			pstmt.setString(3, dto.getUsername());
			pstmt.setString(4, dto.getGender());
			pstmt.setString(5, dto.getEmail());
			row = pstmt.executeUpdate();
			
		} catch (SQLException e) {
			e.printStackTrace();
		} finally { close(); }
		return row;
	}
	
	// 입력값(id, password)를 전달받아서 일치하는 계정 하나를 반환하는 함수
    // login 페이지
	public MemberDTO login(MemberDTO dto) {
		MemberDTO login = null;
		String sql = "select * from member where userid = ? and userpw = ?";
		try {
			conn = ds.getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, dto.getUserid());
			pstmt.setString(2, dto.getUserpw());
			rs = pstmt.executeQuery();
			while(rs.next()) {
				login = mapping(rs);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally { close(); }
		return login;
	}

}

 

필요한 jsp 페이지 생성 

: header / login  / login-action / logout / list / join / join-action / index / delete

 

페이지를 많이 만들때에는 항상 header 를 만들어서 사용하자.

 

join.jsp

사용자에게 보이는 화면 / 회원가입

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp" %>

<section>
	<h3>회원가입 (join.jsp)</h3>
	<form method="POST" action="join-action.jsp">
		<p><input type="text" name="userid" placeholder="ID" required autofocus></p>
		<p><input type="password" name="userpw" placeholder="Password" required></p>
		<p><input type="text" name="username" placeholder="Name" required></p>
		<p><input type="email" name="email" placeholder="foo@bar.com" required></p>
		<p>
			<label><input type="radio" name="gender" value="남성" required>남성</label>
			<label><input type="radio" name="gender" value="여성" required>여성</label>
		</p>
		<p><input type="submit" value="가입신청"></p>
	</form>
</section>

</body>
</html>

 

join-action.jsp

실질적으로 회원가입 기능을 구현하는 페이지.

MemberDAO에 insert() 함수를 사용하여 데이터를 추가한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp" %>

<jsp:useBean id="dto" class="day14.MemberDTO" />
<jsp:setProperty property="*" name="dto" />

<c:set var="row" value="${dao.insert(dto) }" />
${row }

<c:if test="${row != 0 }">
	<c:redirect url="/list.jsp" />
</c:if>

<script>
	alert('가입이 처리되지 않았습니다')
	history.go(-1)
</script>

</body>
</html>

 

login.jsp

사용자에게 보여지는 로그인 페이지

join.jsp에서 회원가입을 진행한 후 login.jsp에 아이디와 비밀번호를 입력하면 로그인이 된다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp" %>

<section>
	<h3>login.jsp</h3>
	<form action="login-action.jsp" method="POST">
		<p><input type="text" name="userid" placeholder="ID" required autofocus></p>
		<p><input type="password" name="userpw" placeholder="password" required></p>
		<p><input type="submit" value="로그인"></p>
	</form>
</section>

</body>
</html>

 

login-action.jsp

실질적으로 login기능을 구현하는 페이지

사용자가 입력한 아이디와 비번을 dto 라는 이름으로 묶어서

useBean + setProperty 를 통해서 저장한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp" %>

<jsp:useBean id="dto" class="day14.MemberDTO" />
<jsp:setProperty property="*" name="dto" />

<c:set var="login" value="${dao.login(dto) }" scope="session" />

<c:if test="${not empty login }">
	<c:redirect url="/" />
</c:if>

<script>
	alert('계정 혹은 패스워드가 일치하지 않습니다')
	history.go(-1)
</script>

</body>
</html>

 

logout.jsp

세션을 만료시켜서 로그인을 해제한다.

 

login 이라는 이름의 세션 객체를 remove 태그를 이용하여 삭제한다.

로그인이 해제된 다음에는 대문페이지로 리다이렉트 시킴.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp" %>

<section>
	<h3>logout.jsp</h3>
	<c:remove var="login" scope="session" />
	<c:redirect url="/" />
</section>

</body>
</html>

---

 

String sql = "insert into member (userid, userpw, username, gender, email)"
+ " values (?, ?, ?, ?, ?)";
try {
conn = ds.getConnection();
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, dto.getUserid());
pstmt.setString(2, dto.getUserpw());
pstmt.setString(3, dto.getUsername());
pstmt.setString(4, dto.getGender());
pstmt.setString(5, dto.getEmail());
row = pstmt.executeUpdate();

}

 

이 부분에서 가장 오류가 많이 발생했었다.

매개변수 개수와 타입을 정확히 일치하게 받아줘야 해서 오타 또는 순서가 맞지 않으면 오류가 발생했다.

실수를 더 줄여야 하는데 참 쉽지가 않다,,