JAVA/Spring
sts를 이용한 member의 뷰 파일들
영공쁘이
2021. 8. 9. 17:42
confirmID.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%--confirmID.jsp --%>
{
"check":${check} <!-- controller에 있는 check 값을 가져오는 것이다. -->
}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> <!-- jquery를 사용하기 위해 필요한 것 -->
<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;
}//function-end
//Ajax
function confirmIDCheck(){ //javascript!
if($('#id').val()==''){ //$('').val() = 이것은 jquery다.
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
}//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.do" onSubmit="return check()">
<table border="1">
<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="@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="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>
<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" %>
<!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==''){ //전체 문서 안에 폼 안에 id이름!!! ==이 아니고 =면 공백이 할당된다!
alert("ID를 입력하시오.");
document.loginForm.id.focus();
return false;
}
if(document.loginForm.pw.value==''){ //전체 문서 안에 폼 안에 id이름!!! ==이 아니고 =면 공백이 할당된다!
alert("암호를 입력하시오.");
document.loginForm.pw.focus();
return false;
}
return true;
}
</script>
</head>
<body> <!-- controller에서 msg를 가져올 수 있따. -->
<c:if test="${!msg.equals(null)}">
${msg}
</c:if>
<h2>로그인</h2>
<form name="loginForm" method="POST" action="loginPro.do" onsubmit="return check()"> <!-- action은 uri에 찍히는 이름! onsubmit 함수 호출-->
<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" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//function을 넣을거다! js 부분이다.
function updateMember(){
document.updateForm.action="memUpdateForm.do"; //memUpdateForm.do(회원 정보 수정)로 가라!(id값을 숨겨서 보내서 여기로 간다!)
document.updateForm.submit(); //서버로 전송!
}
function deleteMember(){
document.delForm.action = "deleteMember.do"; //회원 탈퇴로 가라
document.delForm.submit(); //서버로 전송하라!
}
</script>
</head>
<body>
<!-- form을 여러 개 쓸 수 있다 -->
<h2>${mdto.name}님 저희 홈에 호신 것을 환영합니다.</h2>
<%-- session으로 등록하는 것 (로그인했을 때!!)--%>
<c:set var="id" value="${mdto.id}" scope="session"/> <!--scope: 한 사람이 들어와 세션하는 동안 관리하는 것 -->
<a href="list.do">게시판 글 목록</a>
<a href="javaScript:updateMember()">내 정보 수정</a> <!-- 폼이 2개라서 이렇게 쓴거다! -->
<a href="javaScript:deleteMember()">회원 탈퇴</a>
<a href="logOut.do">로그아웃</a>
<form name="updateForm" method="POST"> <!-- updateForm에 id를 보내주려고 만든 폼이다. -->
<input type="hidden" name="id" value="${id}"> <!-- 회원 정보보기를 위해서는 id를 꺼내와야해서 hidden하고 가져온거다.(숨겨서 보낸거다.) -->
</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" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<c:remove var="id" scope="session"/> <%--세션 무효화--%>
Bye Bye~~~
<meta http-equiv="refresh" content="1;main.do"/> <!-- 1초 후 main.do로 넘어가라~ -->
</body>
</html>updateForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%--회원정보 수정(updateForm) --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<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: #FFDEFD5";
}
</style>
<script>
function pwCheck(){
if(document.upForm.pw.value != document.upForm.pw2.value) //자바스크립트 문법(문서.폼이름.아이디이름.값)
{
alert("암호와 암호 확인이 다릅니다.");
document.upForm.pw.focus();
return false;
}
}
</script>
</head>
<body>
<h2>내 정보 수정</h2>
<form name="upForm" method="post" action="memUpdatePro.do">
<table border="1">
<tr>
<td>ID</td>
<td>
<b>${mdto.id}</b>
<input type="hidden" name="id" value=${mdto.id}>
</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()"> <!-- 커서를 잃었을 때 호출되는 것(onblur) -->
</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="@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" 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="zipcode" id="zipcode" size="7" value="${mdto.zipcode}" readonly>
<input type="button" value="주소 검색" onClick="openDaumPostcode()">
</td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" name="addr" id="addr" value="${mdto.addr}" readonly size="60">
<br>
상세 주소
<input type="text" name="addr2" id="addr2" size="40" value="${mdto.addr2}">
</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>