이메일 수정 과 그 외 정보 수정 에 대한 코드 입니다.
앞서 비밀번호 변경 부분과 화면부 와 컨트롤러 부분 말고는 동일합니다..
이메일 수정 부분입니다.
Mapper.XML(Oracle DB)
<!-- 이메일 수정 -->
<select id="EmailModifyForm" resultType="MemberVO">
<![CDATA[
select * from member
where id = #{id}
]]>
</select>
<update id="EmailModify">
<![CDATA[
update member
set email = #{email}
where id = #{id}
]]>
</update>Controller
//이메일 수정
@GetMapping("/EmailModify")
public void EmailModify() {
service.EmailModifyForm();
}
@PostMapping("/EmailModify")
public String EmailModify(MemberVO member,HttpServletRequest request) {
HttpSession http = request.getSession();
http.setAttribute("member", member);
service.EmailModify(member);
return "redirect:/member/info";
}이메일은 비번 수정과 다르게 세션을 끊지않고 수정 후 마이페이지 화면으로 돌아게 하였습니다.
Service&DAO
Service
//이메일 수정
@Override
public void EmailModifyForm() {
dao.EmailModifyForm();
}
@Override
public void EmailModify(MemberVO member) {
dao.EmailModify(member);
}
DAO
//이메일 수정
@Override
public void EmailModifyForm() {
session.selectOne("mapper.member.EmailModifyForm");
}
@Override
public void EmailModify(MemberVO member) {
session.update("mapper.member.EmailModify",member);
}JSP
<%@include file="../common/sidebar.jsp"%>
<br><br>
<div style = "text-align:center;">
<form method="post" id="form">
<input type="hidden" name="id" value="${member.id}">
<div class="mail_wrap">이메일
<div class="mail_input_box">
<input type="text" name="email" id="email" class="mail_input" value="${member.email}" placeholder="이메일을 입력해주세요."/>
<div class="mail_check_button">전송</div>
</div>
<!-- email 형식이 올바르지 않을때 경고글을 나오게하기위해 -->
<span class="mail_input_box_warn"></span>
<br>
인증번호
<div class="mail_check_input_box" id="mail_check_input_box_false" >
<input class="mail_check_input" id="mail_check_input" placeholder="인증번호">
</div>
<!-- 인증번호 일치여부 -->
<div class="clearfix"></div>
<span id="mail_check_input_box_warn"></span>
</div>
<button type="button" class="modify" id="btn" >수 정</button>
</form>
</div>이메일에 대한 부분만 회원가입 JSP에서 가져와서 붙여넣어줍니다.
이메일 칸에는 비밀번호와 달리 기존 값을 가져오게 하였습니다. 이후 이메일을 수정한 후 인증코드를 적고 수정하는 방식입니다
JS
//email 정규표현식
function mailFormCheck(email){
var mailExp = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return mailExp.test(email);
}정규 표현식 함수 추가해줍니다.
<!-- 이메일 스크립트 -->
var code ="";
var mailnumCheck =false; //이메일 인증번호
//메일 보내기 버튼
$('.mail_check_button').click(function(){
var email = $('.mail_input').val();
//인증번호 입력란
var checkBox = $('.mail_check_input');
//정규표현식에 어긋났을경우
var warnMsg = $('.mail_input_box_warn');
if(mailFormCheck(email)){
warnMsg.html("이메일이 전송되었습니다.");
warnMsg.css("display",'inline-block');
warnMsg.css("color",'green');
}else{
warnMsg.html("이메일 형식이 올바르지 않습니다.");
warnMsg.css("display",'inline-block');
warnMsg.css("color",'red');
return false;
}
$.ajax({
type : 'post',
url : '${path}/member/MailCheck?email='+email,
success : function(data){
code = data;
}
})//end ajax
})
//이메일 인증코드 비교
$('.mail_check_input').blur(function(){
//사용자가 입력한 코드
var inputCode = $('.mail_check_input').val();
//결과 메시지
var checkResult = $('#mail_check_input_box_warn');
if(inputCode == code){
checkResult.html("인증번호가 일치합니다.");
checkResult.attr("class", "correct");
mailnumCheck = true;
}else{
checkResult.html("인증번호를 다시 확인해주세요.");
checkResult.attr("class","incorrect");
mailnumCheck = false;
}
})앞서 회원가입 부분에서 이메일 정규 표현식 비교 부분과 인증코드 비교 부분을 가져와서 붙여넣기 해주시면 됩니다.
//수정 버튼
$('.modify').on('click',function(){
var formObj = $('#form');
var email = $('.mail_input').val();
var inputCode = $(".mail_check_input").val();
if(email == "" || !mailFormCheck(email)){
alert("이메일을 재확인 해주세요.");
document.getElementById("email").focus();
return false;
}else if(inputCode == "" || inputCode != code){
alert("인증코드를 재확인 해주세요.");
document.getElementById("mail_check_input").focus();
return false;
}
formObj.submit();
})이후 수정 버튼 부분 입니다.
수정할 이메일 입력 후 인증번호 받고 수정을 누르면 데이터 및 화면에서 바뀐 이메일을 확인 하실 수 있습니다.
id,pw,email 을 제외한 정보 수정 부분입니다.
Mapper.XML(Oracle DB)
<!-- 정보 수정 -->
<select id="modifyForm" resultType="MemberVO">
<![CDATA[
select * from member
where id = #{id}
]]>
</select>
<update id="modify">
<![CDATA[
update member
set nickname = #{nickname} , tel = #{tel} , zipcode = #{zipcode},
roadAddress = #{roadAddress} , jibunAddress = #{jibunAddress} , namujiAddress = #{namujiAddress}
where id = #{id}
]]>
</update>Controller
//정보수정
@GetMapping("/modify")
public void modify() {
service.modifyForm();
}
@PostMapping("/modify")
public String modify(MemberVO member,HttpServletRequest request) {
HttpSession http = request.getSession();
http.setAttribute("member", member);
service.modify(member);
return "redirect:/member/info";
}이메일 수정 컨트롤러 부분과 동일합니다.
Service&DAO
Service
//정보 수정
@Override
public void modifyForm() {
dao.modifyForm();
}
@Override
public void modify(MemberVO member) {
dao.modify(member);
}
DAO
//정보 수정
@Override
public void modifyForm() {
session.selectOne("mapper.member.modifyForm");
}
@Override
public void modify(MemberVO member) {
session.update("mapper.member.modify",member);
}JSP
<%@include file="../common/sidebar.jsp"%>
<br><br>
<form method="post" id="form">
<input type="hidden" name="id" value="${member.id}">
<div class="textForm">닉네임
<input type="text" name="nickname" id="nickname" class="nickname_input" value="${member.nickname}" placeholder="닉네임을 입력해주세요.">
<span class="nick_input_re_1">사용 가능한 닉네임입니다.</span>
<span class="nick_input_re_2">닉네임이 이미 존재합니다.</span>
<span class="nick_input_re_3">특수문자를 사용하실 수 없습니다.</span>
<span class="nick_input_re_4">2~10자 사이로 가능합니다.</span>
</div>
<div class="textForm">휴대전화
<input type="text" name="tel" id="tel" class="tel_input" value="${member.tel}" placeholder="전화번호를 입력해주세요." >
<span class="tel_input_re_1"></span>
<span class="tel_input_re_2">올바르지 않은 번호입니다.</span>
</div>
<div class="textForm">
<input type="text" name="zipcode" id="zipcode" value="${member.zipcode}" class="zipcode" size="10" > <a
href="javascript:execDaumPostcode()" >우편번호검색</a> <br>
<input type="text" id="roadAddress" name="roadAddress" value="${member.roadAddress}" class="zipcode" placeholder="지번"><br>
<input type="text" id="jibunAddress" name="jibunAddress" value="${member.jibunAddress}" class="zipcode" placeholder="도로명"><br>
<input type="text" name="namujiAddress" class="zipcode" id="namujiAddress" value="${member.namujiAddress}" placeholder="나머지 주소" />
<span id="guide" style="color: #999"></span>
</div>
<button type="button" class="modify" id="btn" >수 정</button>
</form>JSP 파일은 뭐... 다 회원가입에서 수정할 것 을 가져와 붙여넣기 한것입니다.
JS
//닉네임 정규표현식(한글,영어,숫자 2~16자)
function nickFormCheck(nickname){
var nickExp = /^(?=.*[a-z0-9가-힣])[a-z0-9가-힣]{2,10}$/;
return nickExp.test(nickname);
}
//휴대폰번호 정규표현식(01로 시작하며(0)문자 추가 - 숫자만들어가며 3-4자 - 숫자만들어가면서 4자), '-?' 하이픈은 있을수도 없을수도
function telFormCheck(tel){
var telExp = /^01([0])-?([0-9]{3,4})-?([0-9]{4})$/;
return telExp.test(tel);
}정규 표현식 함수 입니다.
//유효성 검사 변수
var nickCheck = false;
var telCheck = false;닉네임과 휴대번호의 유효성 검사 변수 선언
//닉네임 중복검사
$('.nickname_input').on('propertychange change keyup paste input',function(){
var nickname = $('.nickname_input').val();
$.ajax({
type : 'post',
url : '${path}/member/NickCheck',
data : {nickname : nickname},
success : function(result){
if(result != 'fail'){
$('.nick_input_re_1').css("display","block");
$('.nick_input_re_2').css("display","none");
$('.nick_input_re_3').css("display","none");
$('.nick_input_re_4').css("display","none");
nickCheck = true;
}else{
$('.nick_input_re_1').css("display","none");
$('.nick_input_re_2').css("display","block");
$('.nick_input_re_3').css("display","none");
$('.nick_input_re_4').css("display","none");
nickCheck = false;
}
if(nickFormCheck(nickname) == false){
$('.nick_input_re_1').css("display","none");
$('.nick_input_re_2').css("display","none");
$('.nick_input_re_3').css("display","block");
$('.nick_input_re_4').css("display","none");
nickCheck = true;
}
if(nickname.length < 2 || nickname.length > 10){
$('.nick_input_re_1').css("display","none");
$('.nick_input_re_2').css("display","none");
$('.nick_input_re_3').css("display","none");
$('.nick_input_re_4').css("display","block");
nickCheck = true;
}
},
error : function(error){
console.log(error);
}
});//end ajax
})회원가입에서 쓰였던 함수와 동일합니다.
//휴대번호 정규표현식 검사
$('.tel_input').on('propertychange change keyup paste input',function(){
var tel = $('.tel_input').val();
if(!telFormCheck(tel)){
$('.tel_input_re_2').css('display','block');
$('.tel_input_re_1').css('display','none');
telCheck = false;
}else{
$('.tel_input_re_1').css('display','block');
$('.tel_input_re_2').css('display','none');
telCheck = true;
}
})회원가입에서 쓰였던 함수와 동일합니다.
function autoHypenPhone(str){
str = str.replace(/[^0-9]/g, '');
var tmp = '';
if( str.length < 4){
return str;
}else if(str.length < 7){
tmp += str.substr(0, 3);
tmp += '-';
tmp += str.substr(3);
return tmp;
}else if(str.length < 11){
tmp += str.substr(0, 3);
tmp += '-';
tmp += str.substr(3, 3);
tmp += '-';
tmp += str.substr(6);
return tmp;
}else{
tmp += str.substr(0, 3);
tmp += '-';
tmp += str.substr(3, 4);
tmp += '-';
tmp += str.substr(7);
return tmp;
}
return str;
}
var cellPhone = document.getElementById('tel');
tel.onkeyup = function(event){
event = event || window.event;
var _val = this.value.trim();
this.value = autoHypenPhone(_val) ;
}휴대번호 입력시 '-' 이 자동으로 입력되는 스크립트 입니다.
//수정 버튼
$('.modify').on('click',function(){
var formObj = $('#form');
var nickname = $('.nickname_input').val();
var tel = $('.tel_input').val();
var zipcode = $('.zipcode').val();
var namujiAddress = $('#namujiAddress').val();
if(nickname == "" || !nickFormCheck(nickname)){
alert("닉네임을 재확인 해주세요.");
document.getElementById("nickname").focus();
return false;
}else if(tel == "" || !telFormCheck(tel)){
alert("전화번호를 재확인 해주세요.");
document.getElementById("tel").focus();
return false;
}else if(zipcode == ""){
alert("주소를 재확인 해주세요.");
document.getElementById("zipcode").focus();
return false;
}else if(namujiAddress == ""){
alert("주소를 재확인 해주세요.");
document.getElementById("namujiAddress").focus();
return false;
}
formObj.submit();
})수정 버튼 또한 다른 수정 버튼들과 동일합니다 검사할 부분만 따로 변수 선언하여 조건문을 걸어줍니다.
/* 우편번호 검색API */
function execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var fullRoadAddr = data.roadAddress; // 도로명 주소 변수
var extraRoadAddr = ''; // 도로명 조합형 주소 변수
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraRoadAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraRoadAddr !== ''){
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
// 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.
if(fullRoadAddr !== ''){
fullRoadAddr += extraRoadAddr;
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('zipcode').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('roadAddress').value = fullRoadAddr;
document.getElementById('jibunAddress').value = data.jibunAddress;
// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
if(data.autoRoadAddress) {
//예상되는 도로명 주소에 조합형 주소를 추가한다.
var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
document.getElementById('guide').innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
} else if(data.autoJibunAddress) {
var expJibunAddr = data.autoJibunAddress;
document.getElementById('guide').innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
} else {
document.getElementById('guide').innerHTML = '';
}
}
}).open();
}마지막으로 다음주소 스크립트를 추가 시켜줍니다!!
이상입니다~
수정 할 부분을 수정 후 수정 버튼이 누르면 화면 과 db 단에서 정보가 수정이 됩니다.
'Spring > 커뮤니티 사이트' 카테고리의 다른 글
| [Spring][커뮤니티 사이트]ID,PW찾기 (0) | 2022.12.26 |
|---|---|
| [Spring][커뮤니티 사이트]회원 탈퇴 (0) | 2022.12.24 |
| [Spring][커뮤니티 사이트]회원 정보 수정(1) (0) | 2022.12.24 |
| [Spring][커뮤니티 사이트]로그인 &로그아웃 (2) | 2022.12.24 |
| [Spring][커뮤니티 사이트]회원가입(5) - 다음 주소API 와 회원 가입 버튼 (0) | 2022.12.24 |