[21.10.26] MQBProject

1) 

 

전체 index.jsp를 하나의 큰 틀로 잡고, 그 안에 header와 container, 그리고 footer를 잡았다.

container 안에는 nav.jsp와 ${display}, 각각 로그인 영역과 회원가입 영역으로 나누었다.

좀더 세부적으로 ${display} 영역 내 

 

 

2) 회원가입 유효성 검사

 

 

 

 

 

3) 이미지 클릭 시 홈(index.jsp)으로 돌아가기

 

 

상단의 이미지 클릭 시 홈(index.jsp)으로 돌아가게끔 하려고 한다.

index.jsp에서 단 두줄만 바꿔주면 된다.

 

 

<h1>
	<img alt="까마귀" src="/MQBProject/img/img2.gif" width="70" height="70"
	onclick="location.href='/MQBProject/index.jsp'" style="cursor: pointer;">MVC 기반의 미니 프로젝트
</h1>

*주요 내용 :

→ style="cursor: pointer; 을 넣어주는 이유는 이미지에 이벤트 기능이 걸려있음을 명시해주기 위해 화살표 모양의 커서에서

손가락 모양의 커서로 바꿔준다.

 

 

4) 아이디 중복 체크

 

////////command.properties

 

////////memberMapper.xml

<!-- 아이디 중복 체크 -->
	<select id="isCheckId" parameterType="java.lang.String" resultType="member"> 
		select * from member where id=#{id}
	</select>

 

 

////////member.js

$(function() {
	//회원가입
	$('#writeBtn').click(function() {
		$('#nameDiv').empty();
		$('#writeForm #idDiv').empty();
		$('#writeForm #pwdDiv').empty();
		$('#repwdDiv').empty();

		//name 속성
		if ($('input[name="name"]').val() == '') {
			$('#nameDiv').html('이름 입력');
			$('#name').focus();
			
		} else if ($('#writeForm #id').val() == '')
			$('#writeForm #idDiv').html('아이디 입력');
			
		else if ($('#writeForm #pwd').val() == '')
			$('#writeForm #pwdDiv').html('비밀번호 입력');
			
		else if ($('#writeForm #pwd').val() != $('#repwd').val())
			$('#repwdDiv').html('비밀번호 틀림');
			
		else if ($('#writeForm #id').val() != $('#check').val()){
			
			$('#writeForm #idDiv').html('중복체크 하세요');
			$('#writeForm #idDiv').css('color', 'orange');
		}
		else
			$('form[name="writeForm"]').submit();
	});


//-----------------------------중략----------------------------------


//아이디 중복 체크
$('#writeForm #id').focusout(function(){
	$('#writeForm #idDiv').empty();
	
	if($('#writeForm #id').val() == '') {
		$('#writeForm #idDiv').html('먼저 아이디를 입력하세요');
	}else{
		$.ajax({
			url: '/MQBProject/member/checkId.do',
			type: 'post',
			data: 'id=' + $('#writeForm #id').val(), // 앞에 항상 변수명이 들어가야 한다
			// data: {'id': $('#writeForm #id').val()} ~ 식으로 써주는 방법도 있다
			dataType: 'text',
			success: function(data){
				// alert(data);
				data = data.trim();
				
				if(data == 'exist'){
					$('#writeForm #idDiv').html('사용 불가능');
					$('#writeForm #idDiv').css('color', 'red');
					
				} else if(data == 'non_exist'){
					$('#writeForm #idDiv').html('사용 가능');
					$('#writeForm #idDiv').css('color', 'blue');
					
					$('#checkId').val($('#writeForm #id').val());
				}
			},
			error: function(err){
				console.log(err);
			}			
		});
	}	
});

 

 

 

 

 

5) 우편번호 검색

 

////////command.properties

 

 

 

////////memberMapper.xml

<!-- 우편번호 -->
	<select id="getZipcodeList" parameterType="java.util.Map" resultType="zipcode">
		select * from newzipcode
		where sido like '%'||#{sido}||'%'
		and sigungu like '%'||#{sigungu}||'%'
		and roadname like '%'||#{roadname}||'%'
	</select>

 

 

////////member.js

$('#zipcodeBtn').click(function(){
	window.open("/MQBProject/member/checkPost.do", "checkPost", "width=500 height=500 top=200 left=700");
	
});

 

 

[결과]