728x90
기존에 기록했던 걸...다시 정리해보기로 했다...
기존에 다른 블로그에 적었던 것은 욕이 너무 많아서
옛날 기억을 살리면서 다시 써야지.
백업을 하다말다 했더니 백업 기록이 그렇게 많지는 않더라
처음에 만들었던 SQL
CREATE TABLE memberDB (
userId VARCHAR2(20) PRIMARY KEY,
userPw VARCHAR2(50) NOT NULL CHECK (LENGTH(userPw) >= 4),
userName VARCHAR2(20) NOT NULL CHECK (LENGTH(userName) >= 2),
userSSN1 NUMBER(6, 0) NOT NULL CHECK (LENGTH(userSSN1) = 6),
userSSN2 NUMBER(7, 0) NOT NULL CHECK (LENGTH(userSSN2) = 7 AND SUBSTR(userSSN2, 1, 1) BETWEEN 1 AND 4),
userGender VARCHAR2(20) CHECK (userGender IN ('male', 'female')),
userPhoneNum1 NUMBER(3, 0) NOT NULL,
userPhoneNum2 NUMBER(4, 0) NOT NULL,
userPhoneNum3 NUMBER(4, 0) NOT NULL,
userEmailId VARCHAR2(50) NOT NULL,
userEmailDomain VARCHAR2(50) NOT NULL,
userSignDate DATE DEFAULT SYSDATE
);
ALTER TABLE memberDB
ADD (nickname VARCHAR2(20) UNIQUE);자주 가는 쇼핑몰이나 네이버 등의 사이트를 참고하면서 만들었다.
외국 사이트도 그렇고 요즘 사이트도 그렇고 SSN은 많이 빼는 추세지만
그래도 여전히 나한테는 회원가입 시 이름+SSN 입력이 익숙해서 넣기로 했다.
문제는 닉네임.
SQL을 만들고 닉네임을 넣는 것을 깜빡해서 ADD로 추가했는데
DTO랑 꼬여서 나중에 다시 만들게 된 주범이다.
설계를 철저하게 하고 만드는 것이 중요하다는 것을 깨닫게 만들어주었다...
놀랍게도 당시에 만들었던 설계도를 찾았다.
1. 로그인 페이지
아이디
비밀번호
로그인 버튼
아이디 찾기
비밀번호 찾기
회원가입
2. 아이디 찾기
이름 / SSN을 입력하면 아이디 출력 + 가입 날짜 출력
3. 비밀번호 찾기
1) 이름 / SSN / 아이디를 입력하면 일부 출력
2) 추가 질문 – 질문과 대답이 정확히 일치하면 전체 출력
2)-2 이름 / SSN / 아이디를 입력하면 임시 비밀번호를 이메일로 전송
4.1 회원가입 – 약관동의
- 약관 동의 / 3개 다 체크해야 진행
4.2 회원가입 – 회원 여부 확인
- 이름 / SSN으로 아이디 여부 확인
- 회원일 경우: 아이디 + 가입일 출력 + 로그인 바로가기 / 비밀번호 바로가기
- 비회원일 경우: 회원가입 창
4.3 회원가입 – DB입력
- 아이디 최소 4글자 이상
- 비밀번호 최소 4글자 이상, 특수문자 포함?
- 이름 2글자 이상
- SSN focus (OOOOOO – OOOOOOO)
- 성별 Radio
- 휴대폰 번호 3글자 - 4글자 - 4글자
- 이메일 기본 사이트 + 직접 입력
- 비밀번호 변경 / 찾기를 할 때 사용할 추가 질문
- 가입일 저장
솔직히 처음 설계한 것치고는 나쁘지 않은 것 같다.
이때의 베이스가 지금도 거의 변함이 없다는 점에서
스타트는 잘 끊은 듯?
비밀번호 보이기 기능은 구현하고 싶은데
어떻게 해야 할지 고민했던 기억이 난다.
이때 사용했던 것은 type 바꿔치기
누를 때마다 type을 text와 password를 전환하는 것이다.
$(function () {
$("#loginForm").on("submit", function(event) {
var userId = $("#userId").val();
var userPw = $("#userPw").val();
var errorSpan = $("#confirmUserIdPwError");
if (userId && userPw) {
$.ajax({
type: "POST",
url: "confirm_IDPW_login_Possible",
data: {
userId: userId,
userPw: userPw,
},
beforeSend: function() {
// AJAX 요청 전에 수행할 작업 (로딩 표시 등)
$("#loginButton").prop("disabled", true); // 버튼 비활성화
},
success: function(response) {
if (response === "loginFail") {
errorSpan.text("아이디나 비밀번호를 확인해주세요.");
} else {
errorSpan.text("");
$("#loginForm")[0].submit();
}
},
error: function(error) {
console.error("아이디, 비밀번호 검사 에러:", error);
},
complete: function() {
// AJAX 요청 완료 후 수행할 작업 (로딩 표시 해제 등)
$("#loginButton").prop("disabled", false); // 버튼 활성화
}
});
} else {
errorSpan.text("");
}
});
$("#loginForm").submit(function(event) {
return validateForm(event);
});
function validateForm(event) {
var userId = $("#userId").val();
var userPw = $("#userPw").val();
// ID 공백 여부
if (userId.trim() === "") {
alert("아이디를 입력하세요");
event.preventDefault();
return false;
}
// PW 공백 여부
if (userPw.trim() === "") {
alert("비밀번호를 입력하세요");
event.preventDefault();
return false;
}
//아이디 및 비밀번호 존재 여부
if($("#confirmUserIdPwError").text() != ""){
event.preventDefault();
$("#userId").focus();
return false;
}
return true;
};
// PW visible
$("#showPasswd").click(function () {
var showPW = $("#userPw");
if (showPW.attr("type") === "password") {
showPW.attr("type", "text");
} else {
showPW.attr("type", "password");
}
});에이젝스 검사, 아이디와 비밀번호 공백 확인, 비밀번호 보이기 기능이 구현되어 있다.
$("#findIdForm").submit(function(event) {
//이름 공백 확인
if ($("#userName").val().trim() === "") {
alert("이름를 확인해주세요");
event.preventDefault();
$("#userName").focus();
return false;
}
//SSN 길이 확인
if ($("#ssn1").val().length != 6 || $("#ssn2").val().length != 7) {
alert("주민등록번호를 확인해주세요");
event.preventDefault();
$("#ssn1").focus();
return false;
}
})
//SSN focus
$("#ssn1").on('input', function() {
var maxLength = 6;
if ($(this).val().length >= maxLength) {
$(this).val($(this).val().slice(0, maxLength));
$("#ssn2").focus();
}
});간단한 기능만 넣었다.
$(function() {
$("#allCheckbox").click(function() {
clickAllChk(this.checked);
});
$(".checkboxes").click(function() {
$("#allCheckbox").prop("checked",$(".checkboxes:checked").length === $(".checkboxes").length);
});
});
function clickAllChk(tc) {
$(".checkboxes").prop("checked", tc);
}
function chkAgreement() {
if ($(".checkboxes:not(:checked)").length === 0) {
alert("약관에 모두 동의하셨습니다. 다음 페이지로 이동합니다.");
location.href = "confirm_Id.jsp";
} else {
alert("모든 약관에 동의해야 다음 페이지로 이동할 수 있습니다.");
}
}체크박스 연동 기능만 넣었다.
기능은 별거 없다. 중복 확인하는 Ajax들...비밀번호 검사...자식 창 띄우기 정도
이 정도 분량을 주말 이틀 동안 만들어서 꽤 힘들었던 기억이 난다.
사실 이외에도
회원가입 성공 / 실패 페이지, 아이디 찾기 출력,
비밀번호 찾기 출력, 로그인 결과창 등을 만들었는데
DB의 userSignDate 문제로 제대로 출력이 안 되어서 담지 못했다.
DB는 스프링으로 넘어가면서 바꿨던 것 같은데...
이 다음 프로젝트 import할 때도 안 되면 생각 좀 해봐야겠다
아무튼 그 때나 지금이나 내 목표는 하나다.
"기성품에 한없이 가깝되, 더 유용한 로그인폼을 만들자"
그런 점에서 나쁘지 않은 시작이라고 할 수 있지 않을까
'팀프로젝트 > JAVA' 카테고리의 다른 글
| JAVA 팀플) 20240119_JSP 명칭 변경 (0) | 2024.03.12 |
|---|---|
| JAVA 팀플) 20240118(서블릿 명칭 변경) (0) | 2024.03.12 |
| JAVA 팀플) 20240117_자잘한 수정과 이메일 ajax 추가 (0) | 2024.03.11 |
| JAVA 팀플) 20240116_회원가입 구현, 전체 비밀번호 찾기 구현 (0) | 2024.03.11 |
| 팀플_20240115 (0) | 2024.03.06 |