회원가입(Join) 기능 추가 -2
아이디 중복체크를 끝낸 후,
아래 초록백 회원가입 버튼을 클릭하고 회원가입기능을 마무리 하려한다.
1)join.js
var JoinJsFun = {
initHtml : function () {
join_duplicateBtn.addEventListener("click", function(){
JoinJsFun.duplicateChk();
});
join_submitBtn.addEventListener("click", function(){
JoinJsFun.submitChk();
});
},
두번째 함수인 subminChk()을 실행시켜보려한다.
submitChk : function() {
if(isduplicate === false ) {
alert("아이디 중복체크를 완료해주세요.");
}else if(!useremail.value){
alert("이메일을 입력해주세요.");
}else if(!userpw.value){
alert("비밀번호를 입력해주세요.");
}else if(userpw.value !== confirm_password.value ){
alert("비밀번호가 다릅니다. 다시 입력해주세요");
}else {
var fd = new FormData();
fd.append('userid', userid.value);
fd.append('userpw', userpw.value);
fd.append('useremail', useremail.value);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/join-submit', true);
xhr.responseType = 'text';
xhr.setRequestHeader('Pragma', 'no-cache');
xhr.setRequestHeader('Cache-Control', 'no-cache, must-revalidate');
xhr.onload = function () {
if (xhr.status === 200) { // 응답이 성공적으로 완료된 경우
alert("회원가입이 완료되었습니다.");
window.location.href = '/login';
} else {
alert("회원가입에 실패했습니다. 다시 시도해주세요.");
}
};
xhr.onerror = function() {
alert('ERROR : ' + xhr.status);
};
xhr.send(fd); // xhr.onload와 xhr.onerror 설정 후에 호출
}
},
버튼을 클릭한 후 실행되는 함수이다.
가장먼저 아이디 중복생성를 막기위해 중복체크를 하지않는다면 실행되지 않도록 작성했다.
각각 userid, userpw, useremail 필수값들이 없다면 진행되지 alert를 띄우도록 구성했다.
또한 입력한 비밀번호값을 다시 확인하는 방법을 사용했다.
만약 비밀번호가 일치하지않는다면, 위와 비슷한
alert("비밀번호가 다릅니다. 다시 입력해주세요");이라는 문구가 뜨도록 구성했다.
2)Controller.
//회원등록
@ResponseBody
@RequestMapping(value = [("/join-submit")], method = [(RequestMethod.POST)])
@Throws(Exception::class)
fun joinsubmit(@RequestParam("userid") userid : String,
@RequestParam("userpw") userpw : String,
@RequestParam("useremail") useremail : String): JSONObject {
return service.joinsubmit(userid, userpw, useremail)
}
POST방식으로 값들을 보내고 Controller에서 처리하는 과정이다.
각각 필요한 변수들을 @RequestParam으로 받고 각각 파라미터는 String형식,
반환값은 JSONObject형식으로 받도록 구성했다
3)Service
@Throws(Exception :: class)
@Transactional(rollbackFor = [(Exception::class)])
fun joinsubmit(userid: String, userpw: String, useremail:String) : JSONObject{
var jsono = JSONObject()
try {
mapper.joinsubmit(userid, userpw, useremail)
jsono["RESULT"] = "OK"
jsono["MESSAGE"] = "회원가입이 완료되었습니다."
} catch (e : Exception){
logger.error("ERROR : " + e)
jsono["RESULT"] = "ERROR"
jsono["MESSAGE"] = "회원가입에 실패했습니다."
}
return jsono
}받아온 파라미터를 이용하여 joinsubmit을 실행시켜 DB에 값을 담으려한다.
4)Mapper
fun joinsubmit(userid: String, userpw: String, useremail: String)
5)Mapper.xml
<insert id="joinsubmit" parameterType="String">
INSERT INTO MEMBER (MEMCODE,ID, PW, EMAIL, REGDT , UPDDT)
VALUES (fn_getmemcode() ,#{userid} , #{userpw}, #{useremail}, NOW(), NOW())
</insert>
파라미터들의 Type는 String이기때문에 파라미터타입을 작성했고,
Insert문이기 때문에 resultType는 작성하지 않았다.
보면 MEMCODE에 값을 입력할땐, 입력받는 값이 없기때문에 db에 미리 작성해놓은 함수를 이용해 값을 생성해서 넣기로했다.
6)fn_getmemcode()
CREATE DEFINER=`root`@`localhost` FUNCTION `ekeprldb`.`fn_getmemcode`() RETURNS varchar(10) CHARSET utf8mb4 COLLATE utf8mb4_general_ci
DETERMINISTIC
BEGIN
DECLARE max_num INT;
DECLARE new_memcode VARCHAR(10);
-- 초기값 설정
SET max_num = 0;
-- 기존 memcode에서 숫자 부분을 추출하여 가장 큰 값을 가져옴
SELECT IFNULL(MAX(CAST(SUBSTRING(memcode, 4) AS UNSIGNED)), 0) INTO max_num
FROM your_table_name;
-- 1을 더한 값을 새로운 memcode로 변환
SET new_memcode = CONCAT('MEM', LPAD(max_num + 1, 6, '0'));
RETURN new_memcode;
END작성한 function의 가장 기본은 초기값을 0으로잡고,
가장 큰 값을 찾은 후 그 다음 숫자로 MEMCODE를 1씩 추가하여 생성하는 함수이다.
7)확인
alert창에서 확인을 누르면 Login페이지로 redirect시켰다.
DB를 확인해보면
입력한 값들이 잘 들어간걸 확인할 수 있다.
이제 회원가입 기능을 구현을 했지만,
PW 암호화 같은 여러 기능을 추가로 구현하려한다.
회원가입은 여기까지.