코딩항해기

[과제/JSP] JSP 기초 연습을 위한 회원가입 구현하기 본문

problem solving/과제&실습 코딩

[과제/JSP] JSP 기초 연습을 위한 회원가입 구현하기

miniBcake 2024. 8. 6. 17:20

 

 

(Apache tomcat / jsp / eclipse)

 

jsp연습을 위해 회원가입을 구현 연습을 진행했다.

DB연결 대신 ArrayList 컬렉션 프레임워크를 사용하였으며,

id가 같은 회원은 존재할 수 없으며, pw확인 기능이 있어야한다. (pw를 두 번 입력해서 동일한지 확인하는 기능)

 

먼저, DTO와 DAO를 구현했다.

DTO

더보기
package join;

public class JoinDTO {
	private String id;
	private String pw;
	private String pwCheck; //pw일치 확인 용 //저장되지는 않는다.
	private String 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 getPwCheck() {
		return pwCheck;
	}
	public void setPwCheck(String pwCheck) {
		this.pwCheck = pwCheck;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

DAO

더보기
package join;

import java.util.ArrayList;

public class JoinDAO {
	private ArrayList<JoinDTO> datas;//DB연결 대신 DB로 활용될 예정
	
	public JoinDAO() {
		this.datas = new ArrayList<>();
		
		//샘플데이터
		JoinDTO user1 = new JoinDTO();
		user1.setId("teemo");
		user1.setPw("1234");
		user1.setName("티모");
		datas.add(user1);
		JoinDTO user2 = new JoinDTO();
		user2.setId("ari");
		user2.setPw("333");
		user2.setName("아리");
		datas.add(user2);
	}

	public boolean insert(JoinDTO joinDTO) {
		//id중복검사는 jsp에서 진행될 예정이다.
		JoinDTO data = new JoinDTO();
		data.setId(joinDTO.getId());
		data.setPw(joinDTO.getPw());
		data.setName(joinDTO.getName());
		return this.datas.add(data);
	}
	private boolean update(JoinDTO joinDTO) {
		return false;
	}
	private boolean delete(JoinDTO joinDTO) {
		return false;
	}
	public JoinDTO selectOne(JoinDTO joinDTO) {
		//중복되는 id가 있는지 검사할 때 사용될 selectOne
		for(JoinDTO data : this.datas) {
			if(joinDTO.getId().equals(data.getId())) {
				return data;
			}
		}
		return null;
	}
	private ArrayList<JoinDTO> selectAll(JoinDTO joinDTO){
		ArrayList<JoinDTO> datas = new ArrayList<>();
		return datas;
	}
}

 

 

JSP

아이디 사용불가, 비밀번호 불일치 등을 원하는 위치에 배치하고 싶어 따로 넣었더니 flag용도의 boolean 변수가 세 개가 됐다... 이 부분을 강사님께 질문했더니 추후 진도를 더 나가게 되면 개선할 수 있는 부분이라고 한다.

insert를 하단에 배치하는 것도 좋았을 것 같다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:useBean class='join.JoinDAO' id="joinDAO"/>
<jsp:useBean class='join.JoinDTO' id="joinDTO"/>
<jsp:setProperty property="*" name="joinDTO" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>회원가입</h1>
	<form method='POST'>
		ID :
		<input type='text' name='id' pattern="[A-Za-z]{5,20}" required> <br>
		<%
		boolean flag = false;
		boolean pwCheck = false;
		boolean joinFail = false;
		
		if(request.getMethod().equals("POST")){
			if(joinDTO.getPw().equals(joinDTO.getPwCheck())){
				pwCheck = true;
			}
			if(joinDAO.selectOne(joinDTO) != null){
				%>
				<div style="color:red;">해당 아이디 사용불가</div>
				<% 
				joinFail = true;
			}
			else{
				if(pwCheck){
					flag = joinDAO.insert(joinDTO);
				}
			}
		}
		%>
		PW :
		<input type='password' name='pw' pattern="[A-Za-z0-9]{5,20}" required> <br>
		PW check :
		<input type='password' name='pwCheck' pattern="[A-Za-z0-9]{5,20}" required> <br>
		<%
		if(request.getMethod().equals("POST")){
			if(!pwCheck){
				%>
				<div style="color:red;">비밀번호가 일치하지 않습니다.</div>
				<% 
				joinFail = true;
			}
		}
		%>
		NAME :
		<input type='text' name='name' required> <br>
		<input type="submit" value="회원가입">
		<%
		if(request.getMethod().equals("POST") && pwCheck && !joinFail){
			if(flag){
				%>
				<div style="color:blue;"><%= joinDTO.getName() %>님 회원가입을 축하합니다!</div>
				<% 
			}
			else{
				%>
				<div style="color:red;">회원가입 실패, 관리자에게 문의하세요.</div>
				<% 
			}
		}
		%>
	</form>
</body>
</html>

 

 

최초 실행화면

 

id 중복

 

비밀번호 불일치

 

회원가입 성공