1. 회원가입 버튼을 클릭했을 때
=> 중복체크 버튼을 안 눌렀을 때 alert로 중복체크하세요 띄워주면 된다. ( 못 가게 막아야한다. )
2. 중복체크 버튼을 눌렀을 때
아이디를 변경하게 되면 다시 중복체크하게 해야한다. -- alert("중복체크 하세요")
변수 하나를 잡아서 check = 0 / check = 1 이렇게 해서 중복체크 버튼을 눌렀는지 체크하면 된다.
이렇게 하면 2번을 할 수가 없다. 다시 생각 !!!!!!!!
------> check변수에 처음에 아무 값도 안 넣어놓는 것이 키포인트 !!!
그러고 만약에 내가 hong이라는 데이터를 입력하면 check 변수와 내가 넣은 데이터 값이 다르다.
그럼 이 때 중복체크를 하세요라는 문구를 띄워준다.
중복체크를 하게되면 check라는 변수 안에 내가 입력한 아이디 값을 담는다.
그렇게 되면 check 변수의 값과 아이디 값이 동일하니 중복체크를 했다는 것을 확인할 수 있다.
여기서 내가 아이디 값을 바꾸게 되면 check라는 변수 안에 있는 값과 내가 적은 아이디 값이 달라지게 된다. 그럼 또 이 때 중복 체크를 하라고 띄워주는 것이다.
즉 check라는 변수의 값과 내가 입력한 아이디값이 동일한지를 체크할 수 있다 !!
변수 활용:
check라는 변수를 사용해 중복 체크 버튼이 눌렸는지 확인한다.
처음에는 check 변수를 빈 값으로 설정하고, 사용자가 아이디 중복 체크를 하면, check 변수에 입력한 아이디 값을 저장한다.
이후 사용자가 아이디를 변경하면 check 변수의 값과 현재 입력된 아이디 값을 비교하여,
두 값이 다르면 중복 체크를 다시 하도록 안내한다.
이러한 과정을 통해 사용자가 아이디를 변경하거나 중복 체크를 하지 않았을 경우,
다시 중복 체크를 하도록 유도하여 정확한 회원가입 절차를 진행할 수 있다.
member.js
let check = '';
//아이디 중복체크
function checkId(){
let id = document.getElementById("id").value;
if(id == '')
document.getElementById("idDiv").innerHTML = "먼저 아이디 입력";
else {
window.open("./checkId.jsp?id="+id,"myWindow","width=450 height=150 top=100 left=750");
check = document.getElementById("id").value;
}
}
//우편번호 - Daum API
function checkPost() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('zipcode').value = data.zonecode;
document.getElementById("addr1").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("addr2").focus();
}
}).open();
}
$(function () {
$('form').on('submit', function(e){
e.preventDefault();
let accept = true;
$('#nameDiv').empty();
$('#idDiv').empty();
$('#pwdDiv').empty();
$('#repwdDiv').empty();
if(!$('#name').val()){
$('#nameDiv').html('이름을 입력해주세요.').css('color', 'red');
$('#name').focus();
accept = false;
}
if(!$('#id').val()){
$('#idDiv').html('아이디를 입력해주세요.').css('color', 'red');
$('#id').focus();
accept = false;
} else if(check != document.getElementById("id").value) { // 중복체크가 이루어지지 않았을 때
alert("아이디 중복체크를 해주세요.");
$('#id').focus();
accept = false;
}
if(!$('#pwd').val()){
$('#pwdDiv').html('비밀번호를 입력해주세요.').css('color', 'red');
$('#pwd').focus();
accept = false;
}
if(!$('#repwd').val()){
$('#repwdDiv').html('비밀번호 확인을 해주세요.').css('color', 'red');
$('#repwd').focus();
accept = false;
}
if($('#pwd').val() != $('#repwd').val()){
$('#repwdDiv').html('비밀번호가 일치하지 않습니다.').css('color', 'red');
$('#repwd').focus();
accept = false;
}
if(accept){
$.ajax({
type: 'post',
url: '../member/memberWrite.jsp',
data: {
name: $('#name').val(),
id: $('#id').val(),
pwd: $('#pwd').val()
},success: function(){
},error: function(e){
console.log(e);
}
});
}
});
});
처음에 값을 넣고 중복체크를 안했을 때 중복체크를 하라고 alert 창이 띄워지게 된다.
중복체크 후 아이디를 변경했을 때 회원가입 버튼을 누르면 다시 중복체크를 하라고 alert 창이 뜨는 것을 확인할 수 있다.
3. 회원가입 ==> memberWrite.jsp
=> 유효성 검사 - 이름 / 아이디 / 비밀번호 / 비밀번호 재확인
MemberDAO.java
public void join(MemberDTO memberDTO) {
getConnection();
String sql = "insert into member(name, id, pwd) values(?,?,?)";
try {
pstmt = con.prepareStatement(sql); //생성
// ? 데이터 매핑
pstmt.setString(1, memberDTO.getName());
pstmt.setString(2, memberDTO.getId());
pstmt.setString(3, memberDTO.getPwd());
pstmt.executeUpdate(); //실행 - 개수 리턴
} catch (SQLException e) {
e.printStackTrace();
}finally {
try {
if(pstmt != null)
pstmt.close();
if(con != null)
con.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}memberWrite.jsp
<%@page import="member.bean.MemberDTO"%>
<%@page import="member.bean.MemberDTO"%>
<%@page import="member.dao.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name = request.getParameter("name");
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
MemberDTO memberDTO = new MemberDTO();
memberDTO.setName(name);
memberDTO.setId(id);
memberDTO.setPwd(pwd);
MemberDAO memberDAO = MemberDAO.getInstance();
memberDAO.join(memberDTO);
%>
중복체크 후에 회원가입 버튼을 누르면 테이블에 데이터가 잘 들어간 것을 확인할 수 있다.
강사님 답
memberWriteForm.jsp
<tr>
<th>아이디</th>
<td>
<input type="text" name="id" id="id" placeholder="아이디 입력"/>
<input type="button" value="중복확인" onclick="checkId()" />
<input type="hidden" id="check" value=""/>
<div id="idDiv"></div>
</td>
</tr> <tr>
<th>아이디</th>
<td>
<input type="text" name="id" id="id" placeholder="아이디 입력"/>
<input type="button" value="중복확인" onclick="checkId()" />
<input type="text" id="check" value=""/>
<div id="idDiv"></div>
</td>
</tr>원래는 hidden으로 설정하는게 맞지만 확인을 위해 text로 해봄.
checkId.jsp
<%@page import="member.dao.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//데이터
String id = request.getParameter("id");
//DB
MemberDAO memberDAO = MemberDAO.getInstance();
//id가 있으면 true(사용 불가능) / id가 없으면 false(사용 가능)
boolean exist = memberDAO.isExistId(id); //id가 있으면 true(사용 불가능)
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<% if (exist) { %>
<%=id %>은(는) 이미 사용 중입니다.
<br><br>
<form action="checkId.jsp">
아이디 <input type="text" name="id">
<input type="submit" value="중복체크"/>
</form>
<% } else { %>
<%=id %>은(는) 사용 가능한 아이디입니다.
<br><br>
<input type="button" value="사용하기" onclick="checkIdClose('<%=id %>')" />
<% } %>
<script type="text/javascript">
function checkIdClose(id){
opener.document.getElementById("id").value = id;
opener.document.getElementById("check").value = id;
window.close();
opener.document.getElementById("pwd").focus();
}
</script>
</body>
</html>
memberWriteForm.jsp
회원가입 버튼을 누르면 memberWrite()함수로 가게하기
<tr >
<td colspan="2" align="center">
<input type="submit" value="회원가입" onclick="memberWrite(event)" />
<input type="reset" value="다시입력" />
</td>
</tr>form 이름 잡아주기
<form name="memberWriteForm" method="post" action="memberWrite.jsp">member.js
//회원가입
function memberWrite(e){
let isValid = true; // 유효성 검사를 통과하면 true, 아니면 false
document.getElementById("nameDiv").innerHTML = "";
document.getElementById("idDiv").innerHTML = "";
document.getElementById("pwdDiv").innerHTML = "";
document.getElementById("repwdDiv").innerHTML = "";
if(document.memberWriteForm.name.value == ""){
document.getElementById("nameDiv").innerHTML = "이름을 입력해주세요.";
e.preventDefault();
isValid = false;
}
if(document.getElementById("id").value == ""){
document.getElementById("idDiv").innerHTML = "아이디를 입력해주세요.";
e.preventDefault();
isValid = false;
}
if(document.getElementById("pwd").value == ""){
document.getElementById("pwdDiv").innerHTML = "비밀번호를 입력해주세요.";
e.preventDefault();
isValid = false;
}
if(document.getElementById("pwd").value != document.getElementById("repwd").value){
document.getElementById("repwdDiv").innerHTML = "비밀번호가 맞지 않습니다.";
e.preventDefault();
isValid = false;
}
// 중복 체크 확인
if(document.getElementById("check").value != document.getElementById("id").value){
document.getElementById("idDiv").innerHTML = "중복체크를 해주세요!";
e.preventDefault();
isValid = false;
}
if(isValid)
document.memberWriteForm.submit();
}
중복체크도 잘되고 / 아이디 변경했을 때 중복체크 하는 것도 잘됨
memberWriteForm.jsp
<form name="memberWriteForm" method="post" action="/projectJSP/member/memberWrite.jsp">
http://localhost:8080/projectJSP/member/memberWrtieForm.jsp
↓ 요청
http://localhost:8080/projectJSP/member/memberWrtie.jsp
/projectJSP/memberWrtie.jsp
memberWrtie.jsp
<form name="memberWriteForm" method="post" action="memberWrite.jsp">MemberDTO.java
package member.bean;
import java.util.Date;
import lombok.Getter;
import lombok.Setter;
@Getter
@Setter
public class MemberDTO {
private String name;
private String id;
private String pwd;
private String gender;
private String email1;
private String email2;
private String tel1;
private String tel2;
private String tel3;
private String zipcode;
private String addr1;
private String addr2;
private Date logtime;
}memberWrite.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="member.bean.MemberDTO"%>
<%@page import="member.dao.MemberDAO"%>
<%
//데이터
request.setCharacterEncoding("UTF-8"); // form post로 받을때 설정 안해주면 한글 다 깨짐
String name = request.getParameter("name");
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String gender = request.getParameter("gender");
String email1 = request.getParameter("email1");
String email2 = request.getParameter("email2");
String tel1 = request.getParameter("tel1");
String tel2 = request.getParameter("tel2");
String tel3 = request.getParameter("tel3");
String zipcode = request.getParameter("zipcode");
String addr1 = request.getParameter("addr1");
String addr2 = request.getParameter("addr2");
MemberDTO memberDTO = new MemberDTO();
memberDTO.setName(name);
memberDTO.setId(id);
memberDTO.setPwd(pwd);
memberDTO.setGender(gender);
memberDTO.setEmail1(email1);
memberDTO.setEmail2(email2);
memberDTO.setTel1(tel1);
memberDTO.setTel2(tel2);
memberDTO.setTel3(tel3);
memberDTO.setZipcode(zipcode);
memberDTO.setAddr1(addr1);
memberDTO.setAddr2(addr2);
//DB
MemberDAO memberDAO = MemberDAO.getInstance();
memberDAO.memberWrite(memberDTO);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
회원가입을 축하합니다.
<script type="text/javascript">
window.onload = function(){
alert("회원가입을 축하합니다.");
location.href = "../index.jsp"
}
</script>
</body>
</html>submit ~ action 페이지 이동
<form /> 안에 있는 name 속성들을 들고 이동한다. 그러므로 name 속성이 꼭 있어야 한다 !!!
MemberDAO.java - memberWrite( ) 함수
public void memberWrite(MemberDTO memberDTO) {
getConnection();
String sql = "insert into member values(?,?,?,?,?,?,?,?,?,?,?,?,sysdate)";
try {
pstmt = con.prepareStatement(sql); //생성
// ? 데이터 매핑
pstmt.setString(1, memberDTO.getName());
pstmt.setString(2, memberDTO.getId());
pstmt.setString(3, memberDTO.getPwd());
pstmt.setString(4, memberDTO.getGender());
pstmt.setString(5, memberDTO.getEmail1());
pstmt.setString(6, memberDTO.getEmail2());
pstmt.setString(7, memberDTO.getTel1());
pstmt.setString(8, memberDTO.getTel2());
pstmt.setString(9, memberDTO.getTel3());
pstmt.setString(10, memberDTO.getZipcode());
pstmt.setString(11, memberDTO.getAddr1());
pstmt.setString(12, memberDTO.getAddr2());
pstmt.executeUpdate(); //실행 - 개수 리턴
} catch (SQLException e) {
e.printStackTrace();
}finally {
try {
if(pstmt != null)
pstmt.close();
if(con != null)
con.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
'HOMEWORK' 카테고리의 다른 글
| DAY49 - MyBatis HOMEWORK (2024.09.10) (0) | 2024.09.10 |
|---|---|
| DAY 47 - 미니프로젝트(member) HOMEWORK - 글목록 보기 (2024.09.06) (0) | 2024.09.09 |
| DAY 43 - Servlet HOMEWORK (2024.09.02) (6) | 2024.09.02 |
| DAY 33 - JS HOMEWORK - 덧셈문제 (2024.08.19) (0) | 2024.08.22 |
| DAY 35 - JS HOMEWORK - 2단~9단 / 연인날짜계산 / 로또 (0) | 2024.08.21 |
