나는 회원관리 부분이 제일 기본이면서 해보고 싶어서 맡게 되었다.
소스는 나눠서 작성해보고,, 마지막에 전체 소스를 올리던가
아니면 더 좋은 방법이 있으면 그걸로~ㅎ
create table Member ( -- 회원테이블
m_no number primary key, -- 회원번호
m_id varchar2(20), -- 회원아이디
m_pass varchar2(20), -- 회원비밀번호
m_nick varchar2(20), -- 회원닉네임
m_email varchar2(20), -- 회원이메일
m_name varchar2(20), -- 회원이름
tel varchar2(20), -- 회원전화번호
birth date, -- 회원생년월일
address varchar2(200), -- 회원주소
address_d varchar2(100), -- 회원상세주소
reg_date date, -- 회원가입일
del char(1) -- 회원삭제여부
);- 처음에는 회원주소를 한 컬럼에 저장했는데, 회원정보 수정부분에서
데이터를 보여주는 부분에서 불편해서 나눴다.
package model;
import java.sql.Date;
public class Member {
private int m_no;
private String m_id;
private String m_pass;
private String m_nick;
private String m_email;
private String m_name;
private String tel;
private Date birth;
private String address;
private String address_d;
private Date reg_date;
private String del;
public int getM_no() { return m_no; }
public void setM_no(int m_no) { this.m_no = m_no; }
public String getM_id() { return m_id; }
public void setM_id(String m_id) { this.m_id = m_id; }
public String getM_pass() { return m_pass; }
public void setM_pass(String m_pass) { this.m_pass = m_pass; }
public String getM_nick() { return m_nick; }
public void setM_nick(String m_nick) { this.m_nick = m_nick; }
public String getM_email() { return m_email; }
public void setM_email(String m_email) { this.m_email = m_email; }
public String getM_name() { return m_name; }
public void setM_name(String m_name) { this.m_name = m_name; }
public String getTel() { return tel; }
public void setTel(String tel) { this.tel = tel; }
public Date getBirth() { return birth; }
public void setBirth(Date birth) { this.birth = birth; }
public String getAddress() { return address; }
public void setAddress(String address) { this.address = address; }
public String getAddress_d() { return address_d; }
public void setAddress_d(String address_d) { this.address_d = address_d; }
public Date getReg_date() { return reg_date; }
public void setReg_date(Date reg_date) { this.reg_date = reg_date; }
public String getDel() { return del; }
public void setDel(String del) { this.del = del; }
}- Member.java
<body>
<h1 class="bottommargin"
style="font-size: 56px; line-height: 1.4em;
text-align: center; margin-bottom: 20px;">회 원 가 입</h1>
<div align="center">
<form action="join.sun" method="post" name="frm" onsubmit="return chk()">
<fieldset>
<input type="hidden" name="idchk" value="unChk">
<input type="hidden" name="nickchk" value="unChk">
<input type="hidden" name="emailchk" value="unChk">
<pre><b class="red">*</b><b>는 반드시 입력항목입니다</b></pre>
<div> <!-- 아이디 -->
<label for="m_id"><span style="color: red"><b>*</b></span></label>
<input type="text" name="m_id" id="m_id" placeholder="아이디" required="required"
autofocus="autofocus" class="form-controlloginbtn">
<input class="btn btn-primary chk" type="button" value="중복체크" onclick="id_chk()">
<div id="err_id"></div>
</div>
<div> <!-- 비밀번호 -->
<label for="m_pass"><span style="color: red"><b>*</b></span></label>
<input type="password" name="m_pass" id="m_pass" placeholder="비밀번호" required="required"
class="form-controllogin">
</div>
<div> <!-- 비밀번호 재확인 -->
<label for="m_pass2"><span style="color: red"><b>*</b></span></label>
<input type="password" name="m_pass2" placeholder="비밀번호 재확인" required="required"
onchange="pass_chk()" class="form-controllogin">
<div id="same"></div>
</div>
<div> <!-- 닉네임 -->
<label for="m_nick"><span style="color: red"><b>*</b></span></label>
<input type="text" name="m_nick" id="m_nick" placeholder="닉네임" required="required"
class="form-controlloginbtn">
<input type="button" class="btn btn-primary chk" value="중복체크" onclick="nick_chk()">
<div id="err_nick"></div>
</div>
<div> <!-- 이메일 -->
<label for="m_email"><span style="color: red"><b>*</b></span></label>
<input type="email" name="m_email" id="m_email" placeholder="이메일" required="required"
class="form-controlloginbtn">
<input type="button" class="btn btn-primary chk" value="중복체크" onclick="email_chk()">
<div id="err_email"></div>
</div>
<div> <!-- 이름 -->
<label for="m_name"><span style="color: red"><b>*</b></span></label>
<input type="text" name="m_name" id="m_name" placeholder="이름" required="required"
class="form-controllogin">
</div>
<div> <!-- 휴대전화 -->
<label for="tel"><span style="color: red"><b>*</b></span></label>
<input type="tel" name="tel" required="required"
pattern="010-\d{3,4}-\d{4}" placeholder="010-0000-0000"
title="010-숫자3/4-숫자4"
class="form-controllogin">
</div>
<div> <!-- 생년월일 -->
<label for="birth"><span style="color: red"><b>*</b></span></label>
<input type="date" name="birth" required="required" placeholder="생년월일"
class="form-controllogin">
</div>
<div> <!-- 주소 -->
<label for="address"><span style="color: red"><b>*</b></span></label>
<input type="text" id="address_kakao" name="address" placeholder="주소"
required="required" readonly="readonly" class="form-controllogin" />
</div>
<div> <!-- 상세주소 -->
<label for="address_detail"><span style="color: red"><b>*</b></span></label>
<input type="text" name="address_detail" placeholder="상세주소" required="required"
class="form-controllogin">
</div>
<div> <!-- 가입하기 -->
<input type="submit" class="btn btn-primary btnsize" value="등록">
<input type="button" class="btn btn-primary btnsize" value="취소" onclick="history.back()">
</div>
</fieldset>
</form>
</div>
</body>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
window.onload = function(){
document.getElementById("address_kakao").addEventListener("click", function(){ //주소입력칸을 클릭하면
//카카오 지도 발생
new daum.Postcode({
oncomplete: function(data) { //선택시 입력값 세팅
document.getElementById("address_kakao").value = data.address; // 주소 넣기
document.querySelector("input[name=address_detail]").focus(); //상세입력 포커싱
}
}).open();
});
}
</script>지도를 사용하기 위해서는 input에 id값만 맞춰주면 밑의 화면을 띄울 수 있다.
/* 비밀번호 확인, 중복체크 버튼 눌렀는지 확인 */
function chk() {
var getName = /^[가-힣]+$/;
//이름 유효성 검사
if(!getName.test($("#m_name").val())) {
alert("이름은 한글만 입력가능");
$("#m_name").val("");
$("#m_name").focus();
return false;
}
if (frm.m_pass.value != frm.m_pass2.value) {
alert("비밀번호 재확인이 일치하지 않습니다");
frm.m_pass.focus();
frm.m_pass.value = "";
frm.m_pass2.value = "";
return false;
}
if (frm.idchk.value == "unChk") {
alert("아이디 중복체크를 해주세요.");
return false;
}
if (frm.nickchk.value == "unChk") {
alert("닉네임 중복체크를 해주세요.");
return false;
}
if (frm.emailchk.value == "unChk") {
alert("이메일 중복체크를 해주세요.");
return false;
}
};- form에서 등록(submit)을 누르면 script부분을 실행하게 된다.
여기서 이름에 한글만 들어가고, 암호화 암호확인이 같은지 체크되고, 중복체크를 안한 경우 체크하라고 말을 해준다.
/* 아이디 중복체크 & 특정단어 필터링 */
function id_chk() {
var getCheck= RegExp(/^[a-zA-Z0-9]{0,20}$/);
//아이디 유효성검사
if(!getCheck.test($("#m_id").val())){
alert("아이디는 영문자와 숫자만 입력가능");
$("#m_id").val("");
$("#m_id").focus();
return false;
}
if (!frm.m_id.value) {
alert("아이디를 입력하고 체크해주세요");
frm.m_id.focus();
return false;
}
if (frm.m_id.value.match(/admin/gi)||frm.m_id.value.match(/master/gi)) {
alert("아이디에 admin 또는 master 단어 포함할 수 없음");
frm.m_id.value = "";
frm.m_id.focus();
$('#err_id').html("");
frm.idchk.value == "unChk";
return false;
}- 아이디는 영문자와 숫자만 입력가능한지 체크하고,
DB에 관리자 테이블은 있지만 따로 관리자회원가입폼은 없기 때문에 insert로 강제로 넣어줄 예정이다.
관리자를 구별할 방법은 'admin' 또는 'master'이기 때문에 포함될수 없는 단어로 등록을 해놓았다.
math(/단어/gi) -> gi는 대소문자를 구별하지않고 단어를 찾아준다!!
// 변수 id에 입력한 id를 담아서 post방식으로 confirmId.sun을 실행하고, 그 결과를 받아서
// id가 err_id인 곳에 html 형식으로 보여줘라
$.post('confirmId.sun', "m_id=" + frm.m_id.value, function(data) {
if(data == 1) {
$('#err_id').html("아이디 중복");
$('#err_id').css("color","red");
frm.idchk.value="unChk";
}
else {
$('#err_id').html("사용가능한 아이디");
$('#err_id').css("color","blue");
frm.idchk.value="chk";
}
});
}- 처음에는 '아이디 중복' 단어가 떴어도 따로 막는곳이 없기 때문에 등록을 진행돼서 그 부분을 막기 위해서,
form 밑에 hidden으로 unChk를 처음에 줬고, 아이디가 사용 가능할때만 chk로 바꿔서 등록이 되게 했고,
아이디 중복이면 다시 unChk로 바꿔서 중복체크 버튼을 클릭하게 만들었다!
회원가입폼은 너무 기본단계이기도 했지만, 유효성 부분에서 생각보다 만든 시간이 걸렸고,
제일 힘들었던 부분은 decorators.xml을 사용했는데 처음 사용하다 보니,
중복체크후 msg를 띄울때는 excludes를 설정해줬어야 했는데 그 부분을 놓쳐서 자꾸 html 전체가 넘어와서
msg만을 띄우는 포인트가 어려웠다.
이때도 배운점이 안되면 System.out.println(); 를 이용해라!!!
대부분 문제는 id값이 안 맞아서 값이 안 넘어오거나, 넘긴 데이터가 없는데 출력하라니까 에러가 발생한거다!!!
decorators.xml를 사용할 때는 excludes 활용 잘하기!!
안되면 값을 출력해봐!!!
'프로젝트 > Mirinae(크라우드 펀딩)' 카테고리의 다른 글
| 크라우드 펀딩 사이트(Mirinae) (0) | 2021.12.23 |
|---|