우편번호/주소 입력, 회원가입 필수입력, id 중복확인, 취미선택까지 최종 기능 구현
https://postcode.map.daum.net/guide
--회원가입 창 jsp파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style type="text/css">
th {padding:8px;}
td {padding:3px 0 3px 3px;}
</style>
<script src="script2.js" type="text/javascript" charset="utf-8"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<body bgcolor="#E4F7BA">
<form method="post" name="regFrm" action="memberProc.jsp">
<table border="1" align="center" width="1100" style="boder-collapse:collapse">
<tr bgcolor="#425518">
<th colspan="3" align="center"><font color="#ffffff">회원가입</th>
</tr>
<tr>
<td>아이디</td>
<td>
<input name="id" onkeydown="inputIdChk();" autofocus>
<input type="button" value="ID중복확인" onclick="idCheck(this.form.id.value);">
<input type="hidden" name="idbtncheck" value="idUncheck">
</td>
<td>영문과 숫자로만 입력</td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="pwd"></td>
<td>특수기호,영문,숫자가 각 1개 이상씩, 8글자 이상</td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td><input type="password" name="repwd"></td>
<td>위의 비밀번호를 한번 더 넣으세요</td>
</tr>
<tr>
<td>이름</td>
<td><input name="name"></td>
<td>한글로 입력</td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" name="gender" value="m">남
<input type="radio" name="gender" value="w">여
</td>
<td>성별을 선택해주세요</td>
</tr>
<tr>
<td>생년월일</td>
<td><input name="birthday"></td>
<td>6자로 입력. ex) 190315</td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="email" name="email"></td>
<td>ex) email@naver.com</td>
</tr>
<tr>
<td>우편번호</td>
<td>
<input name="zipcode" id="postcode" readonly>
<!-- readonly: 사용자가 넣지 못하고 찾아서 넣을 수만 있도록 -->
<input type="button" name="serchAdrs" value="우편번호 찾기" onclick="findAddr();">
</td>
<td>우편번호를 검색하세요</td>
</tr>
<tr>
<td>주소</td>
<td><input name="address" id="addr" readonly><br>
<input name="detailAddress" id="detailAddr"></td>
<td>상세주소가 있으면 입력해주세요</td>
</tr>
<tr>
<td>취미</td>
<td>
<input type="checkbox" name="hobby" value="운동">운동
<input type="checkbox" name="hobby" value="넷플릭스">넷플릭스
<input type="checkbox" name="hobby" value="독서">독서
<input type="checkbox" name="hobby" value="음악감상">음악감상
<input type="checkbox" name="hobby" value="여행">여행
</td>
<td>취미를 선택하세요</td>
</tr>
<tr>
<td>직업</td>
<td><select name="job">
<option value="0" selected>선택하세요.
<option value="학생" >학생
<option value="회사원" >회사원
<option value="교육자" >교육자
<option value="요식업" >요식업
<option value="의료직" >의료직
<option value="법조인" >법조인
<option value="기타" >기타</select>
</td>
<td>직업을 선택하세요</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value="회원가입" onclick="inputCheck();"> 
<input type="reset" value="다시쓰기"> 
<input type="button" value="로그인" onclick="location.href='login.jsp'">
</td>
</tr>
</table>
</form>
</body>
</html>--js 파일
function inputIdChk() {
regFrm.idbtncheck.value = "idUncheck";
}
function idCheck(id) {
regFrm.idbtncheck.value = "idCheck";
if(id == "") {
alert("아이디를 입력해주세요");
regFrm.id.focus();
return;
}
url = "idCheck.jsp?id=" +id; //* 파일명?넘겨줄파라미터이름=파라미터값(띄어쓰기x)
window.open(url, "IDCheck", "width=300, height=150");
}
//항목 미입력시 알렅창 뜨게 하기
function inputCheck() {
if(regFrm.id.value == "") {
alert("아이디를 입력해주세요");
regFrm.id.focus();
return;
}
if(regFrm.idbtncheck.value != "idCheck") {
alert("아이디 중복체크를 해주세요");
return;
}
if(regFrm.pwd.value == "") {
alert("비밀번호를 입력해주세요");
regFrm.pwd.focus();
return;
}
if(regFrm.repwd.value == "") {
alert("비밀번호를 확인해주세요");
regFrm.repwd.focus();
return;
}
if(regFrm.pwd.value != regFrm.repwd.value) {
alert("비밀번호가 일치하지 않습니다");
regFrm.repwd.value="";
regFrm.repwd.focus();
return;
}
if(regFrm.name.value == "") {
alert("이름을 입력해주세요");
regFrm.name.focus();
return;
}
regFrm.submit();
}
//회원가입jsp파일에 있던 script태그의 findAddr 함수를 js파일로 옮겨옴
function findAddr() {
new daum.Postcode({
oncomplete: function(data) {
let roadAddr = data.roadAddress;
let jibun = data.jibunAddress;
let extraAddr = ''; //도로명과 지번 모두 합친 변수
document.getElementById("postcode").value = data.zonecode;
if(data.userSelectedType == 'R') {
if(roadAddr != '') {
if(data.bname != '') { //동주소가 있으면
extraAddr += data.bname;
}
if(data.buildingName != '') { //빌딩주소가 있으면
extraAddr += extraAddr != '' ? ', ' + data.buildingName : data.buildingName
}
roadAddr += extraAddr != '' ? '(' + extraAddr + ')' : '';
document.getElementById("addr").value = roadAddr;
}
} else if(data.userSelectedType == 'J') {
document.getElementById("addr").value = jibunAddr;
}
document.getElementById("detailAddr").focus();
}
}).open();
}--회원가입 실패/완료 jsp파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
%>
<jsp:useBean id="mgr" class="member.MemberMgr"/> <!-- select만 할 때는 이 구문만 넣어줘도됨 -->
<jsp:useBean id="bean" class="member.MemberBean"/> <!-- 같은 컬럼명을 찾아 데이터를 넣어줘야 하니까 쓰는 구문 -->
<jsp:setProperty property="*" name="bean"/>
<%
boolean result = mgr.insertMember(bean);
String msg = "회원가입에 실패하였습니다.";
String location = "member.jsp"; //회원가입 실패시 이동
if(result) { //result값이 참일 때
msg = "회원가입이 되었습니다";
location = "login.jsp";
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
alert("<%=msg %>");
location.href = "<%=location %>";
</script>
</body>
</html>--javaBean파일
package member;
public class MemberBean {
private String id;
private String pwd;
private String name;
private String gender;
private String birthday;
private String email;
private String zipcode;
private String address;
private String detailAddress;
private String hobby[]; //여러개 선택 가능하기 때문에 배열에 담기
private String job;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public String getBirthday() {
return birthday;
}
public void setBirthday(String birthday) {
this.birthday = birthday;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getZipcode() {
return zipcode;
}
public void setZipcode(String zipcode) {
this.zipcode = zipcode;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getDetailAddress() {
return detailAddress;
}
public void setDetailAddress(String detailAddress) {
this.detailAddress = detailAddress;
}
public String[] getHobby() {
return hobby;
}
public void setHobby(String[] hobby) {
this.hobby = hobby;
}
public String getJob() {
return job;
}
public void setJob(String job) {
this.job = job;
}
}--DB와 연동 java파일
package member;
import java.sql.*;
//아이디를 입력하면 db에 있는지 db와 연동하는 프로그래밍 자바 파일
public class MemberMgr {
private DBConnectionMgr pool;
public MemberMgr() {
pool = DBConnectionMgr.getInstance();
}
public boolean checkId(String id) {
Connection con = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
boolean flag = false;
try {
con = pool.getConnection();
String sql = "SELECT id FROM MEMBER WHERE id=?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, id);
rs = pstmt.executeQuery();
flag = rs.next();
} catch (Exception e) {
e.printStackTrace();
} finally {
pool.freeConnection(con, pstmt, rs);
}
return flag;
} //checkId end
//데이터 추가할 때
public boolean insertMember(MemberBean bean) { //자료타입: MemberBean 변수명: bean
Connection con = null;
PreparedStatement pstmt = null;
boolean flag = false;
try {
con = pool.getConnection();
String sql = "INSERT INTO MEMBER VALUES(?,?,?,?,?,?,?,?,?,?,?)";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, bean.getId());
pstmt.setString(2, bean.getPwd());
pstmt.setString(3, bean.getName());
pstmt.setString(4, bean.getGender());
pstmt.setString(5, bean.getBirthday());
pstmt.setString(6, bean.getEmail());
pstmt.setString(7, bean.getZipcode());
pstmt.setString(8, bean.getAddress());
pstmt.setString(9, bean.getDetailAddress());
String hobby[] = bean.getHobby();
char hb[] = {'0','0','0','0','0'};
String lists[] = {"운동","넷플릭스","독서","음악감상","여행"};
if(hobby != null) { //취미는 not null값이 아니니까 선택 안 할 수도 있음
for(int i=0; i<hobby.length; i++) {
for(int j=0; j<lists.length; j++) {
if(hobby[i].equals(lists[j])) {
hb[j] = '1';
break;
}//if end
}//중첩for end
}//for end
}
pstmt.setString(10, new String(hb));
pstmt.setString(11, bean.getJob());
if (pstmt.executeUpdate() == 1) //데이터 베이스의 내용이 바뀌면 executeUpdate, 조회는 executeQuery
flag = true;
} catch (Exception e) {
e.printStackTrace();
} finally {
pool.freeConnection(con, pstmt);
}
return flag;
}
}
public boolean loginMember(String id, String pwd) {
Connection con = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
boolean flag = false;
try {
con = pool.getConnection();
String sql = "SELECT id FROM MEMBER WHERE id=? and pwd=?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, id); //?에 해당하는 값들 불러오기
pstmt.setString(2, pwd);
rs = pstmt.executeQuery();
flag = rs.next();
} catch (Exception e) {
e.printStackTrace();
} finally {
pool.freeConnection(con, pstmt, rs);
}
return flag;
}
}
중첩 for문을 돌면서 입력된 값과 lists에 있는 값이 동일하면 1로 hb값을 바꿈
--회원가입 성공 시 나올 로그인 창 jsp파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="#E4F7BA">
<form method="post" name="loginFrm" action="loginProc.jsp">
<table align="center">
<tr>
<th colspan="2" align="center">로그인</th>
</tr>
<tr>
<td>아이디</td>
<td><input name="id" required>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="pwd" required></td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" value="로그인">
<input type="button" value="회원가입" onclick="location.href='member.jsp'">
</td>
</tr>
</table>
</form>
</body>
</html>--로그인 성공 실패 여부 판단 jsp파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- mgr에서 만든 메소드 사용 -->
<jsp:useBean id="mMgr" class="member.MemberMgr" />
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
boolean result = mMgr.loginMember(id, pwd);
String msg = "로그인에 실패했습니다";
if(result) {
session.setAttribute("idKey", id);
msg = "로그인이 되었습니다";
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
alert("<%=msg %>");
location.href="login.jsp";
//성공여부와 상관없이 이 페이지로 넘어감 구분하려면 login.jsp파일에서 구현
</script>
</head>
<body>--로그인 성공시 페이지 jsp파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String id = (String)session.getAttribute("idKey");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="#E4F7BA">
<% if(id != null) { //로그인 한 사람 %>
<h4><%=id %>님 환영합니다!</h4>
<p>즐거운 하루 되세요</p>
<p>행복한 하루 되세요</p>
<a href="logout.jsp">로그아웃</a>
<%
} else { //로그인 하지 않은 사람은 로그인 form보여주기
%>
<form method="post" name="loginFrm" action="loginProc.jsp">
<table align="center">
<tr>
<th colspan="2" align="center">로그인</th>
</tr>
<tr>
<td>아이디</td>
<td><input name="id" required>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="pwd" required></td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" value="로그인">
<input type="button" value="회원가입" onclick="location.href='member.jsp'">
</td>
</tr>
</table>
</form>
<% } %>
</body>
</html>--로그아웃 jsp 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<% session.invalidate(); %>
<script>
alert("로그아웃 되었습니다");
location.href="login.jsp";
</script>
</head>
<body>
</body>
</html>
투표 프로그램 만들기
제목을 클릭하면 제목에 해당하는 설문 폼이 등장
내 인생을 망치러 온 나의 구원, 개발