JAVA
[spring]member Presentation
docc
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>
<a href="loginForm.do">로그인</a>
<a href="insertForm.do">회원가입</a> >> 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="로그인">
<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="내정보 수정">
<input type="reset" value="다시입력">
<input type="button" value="취소" onclick="location='main.do'">
</td>
</tr>
</table>
</form>
</body>
</html>