Spring Legacy MiNi Project - STS / member view

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<a href="list">게시판</a>

<a href="loginForm">로그인</a>

<a href="insertForm">회윈가입</a>

회원아이디 체크 : confirmID.jsp

@RequestMapping(value="confirmID" ,method=RequestMethod.POST)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%--confirmID.jsp --%>
 {
 "check":${check}
 }

회원가입 폼 : insertForm.jsp

@RequestMapping("insertForm")

<%@ 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('addr_code').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;
	}//function-end

	//Ajax
	function confirmIDCheck() {
		if ($('#id').val() == '') {
			alert("ID를 입력 하시요");
		} else {
			//ID가 입력 되었을때 
			$.ajax({
				type : "POST",
				url : "confirmID",
				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
	}//cinfirmIDCheck()-end
</script>

<style type="text/css">
h2 {
	text-align: center;
}

table {
	margin: auto;
	background-color: ivoy;
}
</style>
</head>
<body>
	<h2>회원가입</h2>
	<form method="post" action="insertPro" onSubmit="return check()">

		<table border="1">

			<tr>
				<td>아이디</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="@daum.net">daum.net</option>
						<option value="@nate.com">nate.com</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="addr_code" id="addr_code" 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="addr_detail" id="addr_detail" size="40">
				</td>
			</tr>

			<tr>
				<td colspan="2">
				<input type="submit" value="회원가입">
				<input type="reset" value="다시입력">
				<input type="button" value="취소" onClick="location='main'"></td>
			</tr>
		</table>
	</form>
</body>
</html>

로그인 폼 : loginForm.jsp

@RequestMapping("loginForm.do")

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

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

h2 {
	text-align: center;
}
</style>
	<script>
		function check() {
			if (document.loginFrom.id.value == "") {
				alert('아이디를 입력하시오');
				document.loginForm.id.focus();
				return false;
			}
			if (document.loginFrom.pw.value == "") {
				alert('비밀번호를 입력하시오');
				document.loginForm.pw.focus();
				return false;
			}
			return true;
		}
	</script>

	<c:if test="${!mag.equals(null)}">
	${msg}
</c:if>

	<h2>로그인</h2>

	<form name="loginForm" method="post" action="loginPro"
		onsubmit="return check()">

		<table>
			<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="login">
					<input type="reset" value="다시입력">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

로그인 성공 : loginSucess.jsp

@RequestMapping(value="loginPro.do",method=RequestMethod.POST)

성공시 : return "member/loginSucess";//loginSucess.jsp 뷰리턴

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script>
function updateMember(){
	document.updateForm.action="memUpdateForm";//회원정보수정
	document.updateForm.submit();//서버로 전송
}
function deleteMember(){
	document.delForm.action="deleteMember";//회원탈퇴
	document.delForm.submit();//서버로 전송
}
</script>
<h2>${mdto.name}님 홈페이지 방문을 환영합니다.</h2>
<%--session등록--%>
<c:set var="id" value="${mdto.id}" scope="session"/>
<a href="list">게시판 글 목록</a>
<a href="javaScript:updateMember()">내정보 수정</a>
<a href="javaScript:deleteMember()">회원탈퇴</a>
<a href="logOut">로그아웃</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

@RequestMapping("logOut.do")

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%--logOut--%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 1초 뒤 메인으로 돌아감. -->
<meta http-equiv="refresh" content="1;main" />
<title>Insert title here</title>
</head>
<body>
	<%--세션 무효화 --%>
	<c:remove var="id" scope="session" />
	Bye
</body>
</html>

내정보수정 폼 : updateForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!-- 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('addr_code').value = data.zonecode;
				document.getElementById('addr').value = data.address;
			}
		}).open();
	}//openDaumPostcode()---
</script>
</head>
<body>
	<h2>내정보수정</h2>
	<form name="upForm" method="post" action="memUpdatePro">
		<table>
			<tr>
				<td>아이디</td>
				<td><b>${mdto.id}</b> <input type="hidden" name="id" value="${mdto.id}" size="20"></td>
			</tr>
			<tr>
				<td>비밀번호</td>
				<td><input type="password" name="pw" id="pw" value="${mdto.pw}" size="20"></td>
			</tr>
			<tr>
				<td>비밀번호 확인</td>
				<td><input type="password" name="pw2" id="pw2" value="${mdto.pw}" 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" value="${email1}">@
					<select name="email2" id="email2">
							<option value="${email2}">${email2}</option>
							<option value="@naver.com">naver.com</option>
							<option value="@daum.net">daum.net</option>
							<option value="@nate.com">nate.com</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" size="4" value="tel2"> <input
					type="text" name="tel3" id="tel3" size="4" value="tel3"></td>
			</tr>

			<!-- 우편번호 -->
			<tr>
				<td>우편번호</td>
				<td><input type="text" name="addr_code" id="addr_code" size="7" value="${mdto.addr_code}"
					readonly> <input type="button" value="주소검색"
					onClick="openDaumPostcode()"></td>
			</tr>

			<!-- 주소 -->
			<tr>
				<td>주소</td>
				<td><input type="text" name='addr' id="addr" size="60" value="${mdto.addr}" readonly>
					<br> 상세주소:<input type="text" name="addr_detail" id="addr_detail" size="40" value="${mdto.addr_detail}">
				</td>
			</tr>

			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="내정보 수정"> 
					<input type="reset" value="다시입력">
					<input type="button" value="취소" onClick="location='main'"></td>
			</tr>
		</table>
	</form>
<script>
function pwCheck(){
	if(document.upForm.pw.value!=document.upForm.pw2.value){
		alert("비밀번호가 다릅니다.");
		document.upForm.pw.focus();
		return false;
	}
}
</script>
</body>
</html>

저작자표시 비영리 동일조건

'IT > Java' 카테고리의 다른 글

Spring Legacy MiNi Project - STS / board java (0)	2021.08.10
Spring) AOP( Aspect Oriented Programming ) / 관점지향 프로그래밍 (0)	2021.08.09
Spring) JDBC / jdbcTemplate / JPA / spring data JPA (0)	2021.08.08
JUnit) 단위테스트와 통합테스트 (0)	2021.08.07
Spring Legacy MiNi Project - STS / member java (0)	2021.08.05

'IT/Java' Related Articles

Comments

wasup

Spring Legacy MiNi Project - STS / member view 본문

Spring Legacy MiNi Project - STS / member view

1. 툴 다운로드

2. 미니 프로젝트

2-1. Spring Legacy MiNi Project

2-2. Spring Boot MiNi Project

2-3 eGov

Spring Legacy MiNi Project 게시판, 회원관리

메인화면 : main.jsp