티스토리 뷰
DB연결은 지난번에 완료했고,
이어서 HTML,JS(프론트) -> CONTROLLER,SERVICE,MAPPER,XML을 거쳐
DB에 원하는 값을 INSERT 하는 기능을 추가해 보려고한다.
login.html을 작성했다.
최대한 간단하게 필요한 정보만 넣었고,
소스는 다음 login페이지를 다룰때 넣도록하고,
우선 회원가입 버튼을 누르면
toJoin: function() {
var form = document.createElement('form');
form.method = 'POST';
form.action = '/join';
document.body.appendChild(form);
form.submit();
},이 함수를 실행하도록 소스를 구성했다.
POST방식으로 form형식으로 데이터를 넘기도록 구성했다.
기본적으로 필요한 정보 아이디, 이메일, 비밀번호, 비밀번호 확인 까지 4가지의 정보를 입력해야한다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<link rel="stylesheet" href="/css/join.css">
</head>
<body>
<div class="container">
<h2>회원가입</h2>
<form id="joinForm">
<div class="input-group">
<label for="userid">아이디</label>
<div class="input-with-button">
<input type="text" id="userid" name="userid" placeholder="아이디를 입력해주세요" required>
<button type="button" id="checkDuplicateBtn">중복 체크</button>
</div>
<span id="duplicateCheckMessage"></span>
</div>
<div class="input-group">
<label for="useremail">이메일</label>
<input type="email" id="useremail" name="useremail" placeholder="이메일을 입력하세요." required>
</div>
<div class="input-group">
<label for="userpw">비밀번호</label>
<input type="password" id="userpw" name="password" required>
</div>
<div class="input-group">
<label for="confirm_password">비밀번호 확인</label>
<input type="password" id="confirm_password" name="confirm_password" required>
</div>
<button type="button" id="submitBtn">회원가입</button>
<p>이미 계정이 있으신가요? <a href="login.html">로그인</a></p>
</form>
</div>
<script src="/js/join.js"></script>
</body>위와 같이 작성하였고, 각각 입력값에 적당한 ID값을 세팅해주었다.
var JoinJsFun = {
initHtml : function () {
join_duplicateBtn.addEventListener("click", function(){
JoinJsFun.duplicateChk();
});
join_submitBtn.addEventListener("click", function(){
JoinJsFun.submitChk();
});
},
duplicateChk : function () {
if(userid.value.length < 5) {
alert("아이디를 5글자 이상으로 입력해주세요.")
}else{
var fd = new FormData();
fd.append('userid', userid.value);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/join-duplicateChk', true);
xhr.responseType = 'text';
xhr.setRequestHeader('Pragma', 'no-cache');
xhr.setRequestHeader('Cache-Control', 'no-cache, must-revalidate');
xhr.onreadystatechange = function () { };
xhr.onload = function () {
if (xhr.status === 200) { // 응답이 성공적으로 완료된 경우
//formdata에 담아서 전달
var response = JSON.parse(xhr.response);
if(response.RESULT === 'OK'){
console.log(" 메시지 : " + response.MESSAGE);
alert(response.MESSAGE);
isduplicate= true;
return isduplicate;
}else {
alert(response.MESSAGE);
isduplicate= true;
return isduplicate;
}
}
};
xhr.onerror = function() { alert('ERROR : ' + xhr.status); };
xhr.send(fd);
}
},주석 처리한 부분은 추후에 양식에 맞지않으면 재입력요구 기능을 추가할 예정이고,
기능1 : 아이디 중복체크 : 해당 아이디를 COUNT(*)기능을 통해 DB를 조회 후 없다면
"사용가능한ID입니다"라는 ALERT창으로 전달해준다.
1)Controller
//회원가입 - 아이디중복체크
@ResponseBody
@RequestMapping(value = [("/join-duplicateChk")], method = [(RequestMethod.POST)])
fun joinduplicateChk(@RequestParam("userid") userid : String): JSONObject {
return service.joinDulpicateChk(userid)
}ID 중복체크이기때문에 userid값 하나만 받아서 조회한다.
2)Service
fun joinDulpicateChk(userid : String) : JSONObject {
var jsono = JSONObject()
try {
val dulpiChk = mapper.joinduplicateChk(userid)
if (dulpiChk > 0) {
// 중복된 값이 있는 경우
jsono.put("RESULT", "ERR")
jsono.put("MESSAGE", "$userid 는 사용중인 ID입니다.")
} else {
// 중복된 값이 없는 경우
jsono.put("RESULT", "OK")
jsono.put("MESSAGE", "사용 가능한 ID입니다.")
}
} catch (e: Exception) {
// 예외 처리
jsono.put("RESULT", "error")
jsono.put("MESSAGE", "An error occurred: ${e.message}")
}
return jsono
}String으로 받은 userid를 파라미터로 넘긴다.
반환값은 JSONObject 형식을 사용하고,
RESULT , MESSAGE (key값) , value값 형태로 전달하려한다.
3)Mapper
fun joinduplicateChk(userid : String) : Int
4)Mapper.xml
<select id="joinduplicateChk" parameterType="String"
resultType="int">
SELECT COUNT(*)
FROM MEMBER
WHERE
ID = #{userid}
</select>변수로 넘겨받은 userid값을 조건에 두고, resultType는 COUNT(*)함수를 이용했기때문에
int 형식으로 반환한다.
이상 회원가입 -1 편을 마치도록하고 이어서 작성하도록 하겠다.
반응형
'Project > WWW' 카테고리의 다른 글
| 게시판 조회 기능 (1) (0) | 2025.01.16 |
|---|---|
| Nginx 디폴트(default)페이지 설정 (0) | 2024.12.05 |
| FlashMap["MESSAGE"] 적용 (0) | 2024.10.14 |
| 로그인 (Login)기능 (1) | 2024.08.30 |
| 회원가입(Join) 기능 추가 -2 (0) | 2024.08.30 |