JSP
JSP 무작정 해보기 - 회원가입
3년안에 내집 마련
2019. 11. 5. 00:21
반응형
저번 시간에 로그인 까지 구현을 하였다.
이번 시간에는 회원가입을 구현해 보도록 하겠다.
우선 회원가입 창을 만들어야 한다.
회원가입 창은 Login.jsp를 그대로 복사해 온 뒤 몇가지만 수정 해주면 된다.
1. 기본 틀
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-type" content = "text/html"; charset="UTF-8">
<meta name = "viewport" content="width=device-width", inital-scale="1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>로그인 페이지</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type = "button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expended="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="main.jsp">jsp 연습</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item active">
<a class = "nav-link" href="Main.jsp">메인<span class = "sr-only">(current)</span></a></li>
<li class="nav-item">
<a class = "nav-link" href="Practice.jsp">게시판</a>
</li>
<li class="nav-item">
<a class = "nav-link" href="Practice.jsp">게시판</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class= "dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">접속하기<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="active"><a href="Login.jsp">로그인</a></li><!-- default로 적용되는 것은 로그인 -->
<li><a href="Join.jsp">회원가입</a></li><!-- dropmenu 2 -->
<li><a href="https://tkdrms568.tistory.com">내 블로그로 이동하기</a></li><!-- dropmenu 3 -->
</ul>
</li>
</ul>
</div>
</nav>
<div class="col-lg-10"></div>
<div class="col-lg-10">
<div class="jumbotron" style="padding-top:10px;">
<form method="post" action="Joinaction.jsp">
<h3 style="text-align: center;">회원가입 화면</h3>
<div class="form-group"><!-- 입력 항목의 그룹화 -->
<input type="text" class="form-control" placeholder="ID" name = "userID" maxlength = "20">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="비밀번호" name = "userPassword" maxlength = "20">
</div>위에 있는 코드는 Login.jsp와 Join.jsp 코드가 동일 한 부분이다.
ID, 비밀번호 입력 창까지는 동일하다.
이제 이 뒤에 추가적으로 코드를 추가해서 회원가입 창을 만들어 준다.
3. 이름 창 만들기
<div class="form-group"><!-- 입력 항목의 그룹화 -->
<input type="text" class="form-control" placeholder="이름" name = "userName" maxlength = "20">
</div>˙ input type = "text" = 이름을 입력하기 위해서 text 창을 사용
˙ name = "userName" = 입력 값을 userName 변수에 전달
4. 성별 창 만들기
성별 창 같은 경우 남자 여자 버튼 중 선택을 할 수 있도록 만들어야 한다.
<div class="form-group" style="text-align:center;">
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary active">
<input type = "radio" name = "userGender" autocomplete="off" value="남자" checked>남자
</label>
<label class = "btn btn-primary">
<input type = "radio" name = "userGender" autocomplete="off" value="여자" checked>여자
</label>
</div>
</div>˙ <div class = "btn-group" data-toggle = "buttons"> = 남자 여자 성별 선택시 버튼 형식으로 선택하기 위해
˙ <label class = "btn btn-primary active"> = 버튼 색깔
˙ <input type = "radio" name = "userGender" autocomplete="off" value="남자" checked>남자 = 남자 선택창
˙ <input type = "radio" name = "userGender" autocomplete="off" value="여자" checked>여자 = 여자 선택창5. 이메일 입력 창 만들기
<div class="form-group">
<input type="email" class="form-control" placeholder="이메일" name = "userEmail" maxlength = "50">
</div>˙ input type = "email" = email 입력창, 이메일 폼으로 집어 넣지 않으면 에러가 난다.6. 전체적인 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <!-- 위의 페이지 : 페이지 인코딩 하는 부분, UTF-8을 사용하는 이유 : 국제적인 코딩언어, 한글 영어 둘다 보여주는 인코딩 언어 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-type" content = "text/html"; charset="UTF-8">
<meta name = "viewport" content="width=device-width", inital-scale="1"> <!-- 반응형 웹사이트 적용을 위해 8번 줄을 적어줘야함 -->
<link rel="stylesheet" href="css/bootstrap.css"> <!-- 다운받은 css 적용을 하겠다고 알려줌 -->
<title>회원 가입 페이지</title>
</head>
<body>
<!-- 게시판 맨 위에 버튼 만들기 -->
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type = "button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expended="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="main.jsp">jsp 연습</a>
</div>
<!-- 메뉴바 안에 메뉴 집어 넣기 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item active">
<a class = "nav-link" href="Main.jsp">메인<span class = "sr-only">(current)</span></a></li>
<li class="nav-item">
<a class = "nav-link" href="Practice.jsp">게시판</a>
</li>
<li class="nav-item">
<a class = "nav-link" href="Practice.jsp">게시판</a>
</li>
</ul>
<!-- 오른쪽에 밑으로 내려오게 하는 메뉴바 만들기 -->
<ul class="nav navbar-nav navbar-right">
<li class= "dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">접속하기<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="active"><a href="Login.jsp">로그인</a></li><!-- default로 적용되는 것은 로그인 -->
<li><a href="Join.jsp">회원가입</a></li><!-- dropmenu 2 -->
<li><a href="https://tkdrms568.tistory.com">내 블로그로 이동하기</a></li><!-- dropmenu 3 -->
</ul>
</li>
</ul>
</div>
</nav>
<div class="container"><!-- 컨텐츠를 감싸기 위해 컨테이너 사용 -->
<div class="col-lg-10"></div>
<div class="col-lg-10">
<div class="jumbotron" style="padding-top:10px;"><!-- 네모난 회색박스 -->
<form method="post" action="Joinaction.jsp">
<h3 style="text-align: center;">회원가입 화면</h3>
<div class="form-group"><!-- 입력 항목의 그룹화 -->
<input type="text" class="form-control" placeholder="ID" name = "userID" maxlength = "20">
</div><!-- id 창 만들기 form-control을 사용하므로 Bootstrap 자체만의 스타일로 컨트롤이 표시됨 -->
<div class="form-group">
<input type="password" class="form-control" placeholder="비밀번호" name = "userPassword" maxlength = "20">
</div>
<div class="form-group"><!-- 입력 항목의 그룹화 -->
<input type="text" class="form-control" placeholder="이름" name = "userName" maxlength = "20">
</div>
<div class="form-group" style="text-align:center;"><!-- 입력 항목의 그룹화 -->
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary active">
<input type = "radio" name = "userGender" autocomplete="off" value="남자" checked>남자
</label>
<label class = "btn btn-primary">
<input type = "radio" name = "userGender" autocomplete="off" value="여자" checked>여자
</label>
</div>
</div>
<div class="form-group"><!-- 입력 항목의 그룹화 -->
<input type="email" class="form-control" placeholder="이메일" name = "userEmail" maxlength = "50">
</div>
<input type="submit" class="btn btn-warning form-control" value="회원가입">
</form>
</div>
</div>
<script src="https://code.jquery,com/jquery-3.4.1.min.js"></script><!-- jquery 사용을 위해서 -->
<script src="js/bootstrap.js"></script><!-- js 사용하기 -->
</body>
</html>7. 회원가입 동작 코드 작성1
public int join(User user) {
String sql = "insert into user values(?,?,?,?,?)";
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1,user.getUserID());
pstmt.setString(2,user.getUserPassword());
pstmt.setString(3,user.getUserName());
pstmt.setString(4,user.getUserGender());
pstmt.setString(5,user.getUserEmail());
return pstmt.executeUpdate(); // sql문 실행 결과 값을 return
} catch(Exception e) {
e.printStackTrace();
}return -1; // DB 오류
}다음 코드는 회원가입 창에서 정보를 받아 오면 그 값을 join 함수에 집어 넣는 코드이다.
1. String sql = "insert into user values(?,?,?,?,?)";
-> 회원가입시 받는 정보가 5개이기 떄문에 ?를 5개 만들어 준다.
2. pstmt = conn.prepareStatement(sql);
-> pstmt 변수에 sql문을 집어 넣어 DB에서 sql문을 실행 시킴
3. pstmt.setString(1,user.getUserID());
-> 첫번째 물음표에 userID를 집어 넣는다.
4. return pstmt.executeUpdate();
-> sql문 결과 값을 return
return -1;
-> 만약 DB오류가 생기면 -1을 return8. 회원가입 동작 코드 작성2
다음과 같이 회원가입 창을 만들었으면 회원가입 동작할 수 있도록 코드를 작성한다.
if(user.getUserID() == null || user.getUserPassword() == null || user.getUserName() == null||
user.getUserGender() == null ||user.getUserEmail() ==null){
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('입력이 안된 사항이 있습니다.')");
script.println("history.back()");
script.println("</script>");
}만약 아이디, 비밀번호, 이름, 성별, 이메일 중 하나라도 입력이 되지 않았으면 에러 코드 창을 띄워 준다.
9. user 정보를 받았을 경우
else {
userDAO userDao = new userDAO();
int result = userDao.join(user);다음과 같이 입력 user 정보를 받은 경우 join 함수에 user 정보를 input 변수로 사용한다.
10. DB 오류가 날 경우(ID가 존재할 시)
if(result==-1){
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('이미 존재하는 ID 입니다.')");
script.println("history.back()");
script.println("</script>");
}만약 ID가 존재할 경우 -1을 return 해주는데 -1을 return 해주는 경우 '이미 존재하는 ID 입니다.'라는 경고창을 띄워준다.
11. 로그인 성공 시
else{
PrintWriter script = response.getWriter();
script.println("location.href = 'Main.jsp' ");
script.println("</script>");
}다음과 같이 로그인에 성공하면 Main.jsp로 이동시켜 준다
반응형