[spring]member Presentation

JAVA 2021. 8. 5. 17:19

Member관련 View 만들기

Controller 와 xml 파일: https://docc-storage.tistory.com/116

>> main.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
    
<a href="list.do">게시판</a>&nbsp;

<a href="loginForm.do">로그인</a>&nbsp;

<a href="insertForm.do">회원가입</a>&nbsp;

>> insertForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
       function openDaumPostcode(){
              new daum.Postcode({
                     oncomplete:function(data){
                              document.getElementById('zipcode').value=data.zonecode;
                              document.getElementById('addr').value=data.address;
                      }
               }).open();
       }//openDaumPostcode()---
</script>

<script>
	function check(){
		//데이터유효성 체크
		if($("#id").val()==''){
			alert("id를 입력하세요.");
			$("#id").focus();
			return false;
		}
		
		if($("#pw").val()==''){
			alert("암호를 입력하세요.");
			$("#pw").focus();
			return false;
		}
		
		if($("#pw2").val()==''){
			alert("암호확인를 입력하세요.");
			$("#pw2").focus();
			return false;
		}
		
		//암호와 암호확인이 같은지 비교
		if($("#pw").val()!=$("#pw2").val()){
			alert("비밀번호가 일치하지 않습니다.");
			$("#pw").val('');//내용삭제
			$("#pw2").val('');
			$("#pw").focus();
			return false;
		}
		
		//이름
		if($("#name").val()==''){
			alert("이름을 입력하세요.");
			$("#name").focus();
			return false;
		}
		
		return true;
	}//check()-end

	//Ajax
	function confirmIDCheck(){
		if($('#id').val()==''){
			alert("ID를 입력하세요.");
		}else{//ID가 입력되었을 때
			
			$.ajax({
				type:"POST",
				url:"confirmID.do",
				data:"id="+$("#id").val(),//서버로 넘길 인수값
				dataType:'JSON',//서버가 보내준 자료 타입
				success:function(data){
					if(data.check==1){
						//사용가능한 ID
						alert('사용가능한 ID');
						$("#pw").focus();
					}else if(data.check==-1){
						//사용중인 ID
						alert('사용중인 ID');
						$("#id").val('').focus();
					}
				}//success-end
			});
		}//else-end
		
	}//confirmIDCheck-end
</script>

<style type="text/css">
h2{text-align:center;}
table{
	margin:auto;
	background-color:ivory;
}
</style>
</head>
<body>
	<h2>회원가입</h2>
	<form method="post" action="insertPro.do" onSubmit="return check()">
		<table border="1">
		
			<!-- ID -->
			<tr>
				<td>ID</td>
				<td>
					<input type="text" name="id" id="id" size="20"/>
					<input type="button" value="ID중복체크" onclick="confirmIDCheck()"/>
				</td>
			</tr>
			
			<!-- 암호 -->
			<tr>
				<td>암호</td>
				<td>
					<input type="password" name="pw" id="pw" size="10"/>
				</td>
			</tr>
			<tr>
				<td>암호확인</td>
				<td>
					<input type="password" name="pw2" id="pw2" size="10"/>
				</td>
			</tr>
			
			<!-- 이름 -->
			<tr>
				<td>이름</td>
				<td>
					<input type="text" name="name" id="name" size="30"/>
				</td>
			</tr>
			
			<!-- 이메일 -->
			<tr>
				<td>이메일</td>
				<td>
					<input type="text" name="email1" id="email1"/>@
					<select name="email2" id="email2">
						<option value="@naver.com">naver.com</option>
						<option value="@nate.com">nate.com</option>
						<option value="@daum.net">daum.net</option>
					</select>
				</td>
			</tr>
			
			<!-- 전화번호 -->
			<tr>
				<td>전화번호</td>
				<td>
					<select name="tel1" id="tel1">
						<option value="010">010</option>
						<option value="017">017</option>
						<option value="018">018</option>
					</select>
					
					<input type="text" name="tel2" id="tel2" size="4">
					<input type="text" name="tel3" id="tel3" size="4">
				</td>
			</tr>
			
			<!-- 우편번호 -->
			<tr>
				<td>우편번호</td>
				<td>
					<input type="text" name="zipcode" id="zipcode" size="7" readonly />
					<input type="button" value="주소검색" onclick="openDaumPostcode()">
				</td>
			</tr>
			
			<!-- 주소 -->
			<tr>
				<td>주소</td>
				<td>
					<input type="text" name="addr" id="addr" size="60" readonly />
					<br/>
					상세주소: <input type="text" name="addr2" id="addr2" size="40" />
				</td>
			</tr>
			
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="회원가입" />
					<input type="reset" value="다시입력" />
					<input type="button" value="가입안함" onclick="location='main.do'"/>
				</td>
			</tr>
		</table>
	
	</form>
</body>
</html>

>> loginForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

    <%-- loginForm.jsp --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
margin:auto;
background-color:#e3dbeb;
}

h2{
text-align: center;
}
</style>

<script type="text/javascript">
	function check(){
		if(document.loginForm.id.value==''){
			alert('ID를 입력하세요')
			document.loginForm.id.focus();
			return false;
		}
		
		if(document.loginForm.pw.value==''){
			alert('암호를 입력하세요')
			document.loginForm.pw.focus();
			return false;
		}
		
		return true;
	}
</script>

</head>
<body>
	<c:if test="${!empty msg}">
		${msg}
	</c:if>
	<h2>로그인</h2>
	
	<form name="loginForm" method="post" action="loginPro.do" onsubmit="return check()">
		<table border="1">
			<tr>
				<td>ID</td>
				<td><input type="text" name="id" id="id" size="20"></td>
			</tr>
		
			<tr>
				<td>암호</td>
				<td><input type="password" name="pw" id="pw" size="20"></td>
			</tr>
			
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="로그인">&nbsp;
					<input type="reset" value="다시입력">
				</td>
			</tr>
		
		</table>
	
	</form>
	
</body>
</html>

>> loginSuccess.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

    <%-- loginSuccess.jsp --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	function updateMember(){
		document.updateForm.action="memUpdateForm.do";//회원정보 수정폼
		document.updateForm.submit();//서버로 전송
	}
	
	function deleteMemeber(){
		document.delForm.action="deleteMember.do";//회원 탈퇴
		document.delForm.submit();//서버로 전송
	}
</script>
</head>
<body>
	<h2>${mdto.name}님 오신것을 환영합니다.</h2>
	<%-- session 등록 --%>
	<c:set var="id" value="${mdto.id}" scope="session"/>
	
	<a href="list.do">게시판 글목록</a>
	
	<a href="javaScript:updateMember()">내정보 수정</a>
	<a href="javaScript:deleteMember()">회원 탈퇴</a>
	<a href="logOut.do">로그아웃</a>
	
	<form name="updateForm" method="post">
		<input type="hidden" name="id" value="${id}">
	</form>
	
	<form name="delForm" method="post">
		<input type="hidden" name="id" value="${id}">
	</form>
</body>
</html>

>> logOut.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

    <%-- logOut.jsp --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<c:remove var="id" scope="session"/><%--세선 무효와--%>
Bye Bye~~

<!-- 1초후에 메인폼으로 돌아가기 -->
<meta http-equiv="refresh" content="1;main.do"/>
</body>
</html>

>> updateForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

    <%-- updateForm.jsp --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
       function openDaumPostcode(){
              new daum.Postcode({
                     oncomplete:function(data){
                              document.getElementById('zipcode').value=data.zonecode;
                              document.getElementById('addr').value=data.address;
                      }
               }).open();
       }//openDaumPostcode()---
</script>


<style type="text/css">
	h2{text-align:center;}
	table{margin:auto; padding:3px; background-color:#FFEFD5;}
</style>

<script type="text/javascript">
	function pwCheck(){
		if(document.upForm.pw.value!=document.upForm.pw2.value){
			alert('암호와 암호확인이 다릅니다.');
			document.upForm.pw.focuse();
			return false;
		}
		return true;
	}


</script>
</head>
<body>
	<h2>내정보 수정</h2>
	<form name="upForm" method="post" action="memUpdatePro.do">
		<table border="1">
			<tr>
				<td>ID</td>
				<td>
					<input type="text" name="id" value="${mdto.id}" size="20">
				</td>
			</tr>
			
			<tr>
				<td>암호</td>
				<td>
					<input type="password" name="pw" id="pw" size="20">
				</td>
			</tr>
			<tr>
				<td>암호확인</td>
				<td>
					<input type="password" name="pw2" id="pw2" size="20" onblur="pwCheck()">
				</td>
			</tr>
			
			<tr>
				<td>이름</td>
				<td>
					<input type="text" name="name" id="name" size="30" value="${mdto.name}">
				</td>
			</tr>
			
			<tr>
				<td>이메일</td>
				<td>
					<input type="text" name="email1" id="email1" size="30" value="${email1}">
					
					<select name="email2" id="email2">
						<option value="${email2}">${email2}</option>
						<option value="@naver.com">naver.com</option>
						<option value="@nate.com">nate.com</option>
						<option value="@daum.net">daum.net</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>전화번호</td>
				<td>
					<select name="tel1" id="tel1">
						<option value="${tel1}">${tel1}</option>
						<option value="010">010</option>
						<option value="017">017</option>
						<option value="018">018</option>
					</select>
					
					<input type="text" name="tel2" id="tel2" value="${tel2}" size="4">
					<input type="text" name="tel3" id="tel3" value="${tel3}" size="4">
				</td>
			</tr>
			<tr>
				<td>우편번호</td>
				<td>
					<input type="text" name="zipcode" id="zipcode" size="7" value="${mdto.zipcode}">
					<input type="button" value="주소검색" onclick="openDaumPostcode()">
				</td>
			</tr>
			<tr>
				<td>주소</td>
				<td>
					<input type="text" name="addr" id="addr" value="${mdto.addr}" size="60" readonly="readonly">
					<br/>
					상세주소: <input type="text" name="addr2" id="addr2" value="${mdto.addr2}" size="60" readonly="readonly">
				</td>
			</tr>
			
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="내정보 수정">&nbsp;
					<input type="reset" value="다시입력">&nbsp;
					<input type="button" value="취소" onclick="location='main.do'">
				</td>
			</tr>		
		
		</table>
	
	</form>
</body>
</html>

'JAVA' 카테고리의 다른 글

[spring] tiles: 동적배치 (0)	2021.08.10
[spring]board Business,Dataservice(xml방식) (0)	2021.08.06
[spring] member Business,Dataservice(xml방식) (0)	2021.08.04
[spring] 스프링 프로젝트 2가지: Starter Project,Legacy Project(STS) (0)	2021.08.04
java환경변수,tomcat웹배포,mysql다운로드 (0)	2021.08.04

ABOUT ME

docc-storage docc-storage

Member관련 View 만들기

'JAVA' 카테고리의 다른 글

티스토리툴바

ABOUT ME

Member관련 View 만들기

'JAVA' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바