부트캠프46일차 (delete , 사진등록 , id,pw찾기)

JSP

부트캠프46일차 (delete , 사진등록 , id,pw찾기)

동곤일상 2025. 4. 8. 17:11

1) deleteForm (회원탈퇴)

2)사진등록,변경

2-1)joinForm.jsp (회원가입)에 win_upload()함수추가

2-2)pictureForm.jsp 에 미리보기 구현

2-3)picture.jsp

2-4) updateForm수정(변경도가능하게끔)

3)ID찾기

3-1)id찾기를 처리하는부분 (기능)

4) pw찾기

4-1)pwForm.jsp

4-2)찾는방법( MemberDto의 메서드추가 및 pw.jsp)

1) deleteForm (회원탈퇴)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
   <!-- 
   	1. id파라미터저장
   	2.. 로그인정보검증
   	-- 로그아웃상태 : 로그인바람 => loginForm.jsp로이동
   	--본인탈퇴여부 검증 : 관리자를 제외하고 본인만탈퇴가능
   	--관리자라면 : 관리자비밀번호를 입력해서 회원 탈퇴시키기 가능
   	--본인이 아닌경우(본인만탈퇴가능) => main.jsp페이지로이동
    -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>탈퇴</title>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id"); 
String login = (String)session.getAttribute("login");
String msg = "";
String url ="";
if(login==null){
	msg = "로그인하세요";
	url = "loginForm.jsp";
} 
else if(!id.equals(login) && !login.equals("admin")){
	//로그인정보와 아이디가 다르고 로그인정보가admin이 아니라면
	msg = "본인만 탈퇴가능";
	url = "main.jsp";
}
else if(id.equals("admin")){ //admin은탈퇴할수없다
	msg="관리자는 탈퇴가 불가능";
	url ="main.jsp";
}
else{ %><!-- else if(id.equals(login) || login.equals("admin")) -->
<form action="delete.jsp" method="post" onsubmit="return input_check(this)">
<input type="hidden" name="id" value="<%=id %>">
<table><caption>회원비밀번호입력</caption>
	<tr><th><%=login+"의 비밀번호" %></th>
	<td><input type="password" name="pass"></td></tr>
	<tr><td colspan="2"> <button>탈퇴하기</button> </td></tr>
</table>
</form>
<%} %>
<script>
alert("<%=msg%>");
location.href = <%=url %>;
</script>

</body>
</html>

추가된 MemberDto 의 메서드

public boolean delete(String id) {
		Connection conn = DBConnection.getConnection();
		PreparedStatement psmt = null;
		String sql = "delete from member where id=?";
		try {
			psmt = conn.prepareStatement(sql);
            //파라미터로받은값(id)를 where절에넣는다
			psmt.setString(1, id);
			if(psmt.executeUpdate()>0) {
            //삭제에 성공했다면 true반환
				return true;
			}
			return false;	
		}
		catch(Exception e) {
			e.printStackTrace();
		}
		finally {
			DBConnection.close(conn, psmt, null);
		}
		return false;
	}

delete.jsp

이건 관리자로 로그인해서 탈퇴를 시도하는경우와

자기자신을 탈퇴하는 과정이 똑같지만

(자기자신이 탈퇴 시 강제로그아웃을 해야하므로

코드가길어졌다)

<%@page import="model.member.Member"%>
<%@page import="model.member.MemberDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!--
   1. 2개의 파라미터 정보를 조회하여 변수 저장
   2. 로그인 정보를 검증
      - 로그아웃 상태 : 로그인하세요. loginForm.jsp로 페이지 이동
      - 본인만 탈퇴가능(관리자는 제외) : 본인만 탈퇴 가능합니다. main.jsp로 페이지 이동
      - 관리자가 탈퇴는 불가 ("admin"은 탈퇴 불가) : 관리자는 탈퇴 불가합니다. list.jsp로 페이지 이동
   3. 비밀번호 검증
      - 로그인 정보로 비밀번호 검증. 
      - 비밀번호 불일치 : 비밀번호 오류 메시지 출력. deleteForm.jsp로 페이지 이동
   4. db에서 id에 해당하는 회원정보 삭제하기
      boolean MemberDao.delete(id)
      탈퇴 성공 
          - 일반 사용자 : 로그 아웃 실행. 탈퇴 메시지 출력, loginForm.jsp로 페이지 이동
          - 관리자 : 탈퇴메시지 출력, list.jsp로 페이지 이동
      탈퇴 실패
          - 일반 사용자 : 탈퇴실패메시지 출력, main.jsp로 페이지 이동
          - 관리자 : 탈퇴실패메시지 출력, list.jsp로 페이지 이동
 -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<% 
request.setCharacterEncoding("UTF-8");
String id  = request.getParameter("id");//파라미터로받은 id
String login = (String)session.getAttribute("login");//로그인정보
String pass  = request.getParameter("pass");
String msg="";
String url="";
if(login==null){//로그인없이 deleteForm에접근시
	msg="로그인하세요";
	url = "loginForm.jsp";
}
//로그인정보가 admin이 아니고 + 로그인정보가id가 다를경우
else if(!login.equals("admin") && !id.equals(login)) {
	msg="본인만 탈퇴가능함";
	url="main.jsp";
}

else if(login.equals("admin")){//로그인한사람이 admin이라면
	Member admin = new MemberDto().selectOne(login);
	if(!admin.getPass().equals(pass)){
		//관리자비밀번호를 입력하지않았다면
		msg="관리자비번을 입력해";
		url="list.jsp";
	} 
	else{ //관리자비밀번호를 입력 시
		if(new MemberDto().delete(id)){
		//delete가 정상적으로 됐다면
		msg= id+"님 탈퇴성공";
		url="list.jsp";
		}
		else{ 
			msg=id+"님 탈퇴실패";
			url="list.jsp"; 
			} 
	}
}
else{ //회원의 아이디와login정보가 같을 떄
	Member mem = new MemberDto().selectOne(login);
	mem.getPass();	
	if(!mem.getPass().equals(pass)){
		msg="잘못된비번";
		url="main.jsp";
		} 
	else{  //비밀번호 일치 시
		if(new MemberDto().delete(id)){
			session.invalidate();//세션초기화(로그아웃)
			msg= id + "탈퇴성공(강제로그아웃)";
			url="loginForm.jsp";
		}
		else { 
			msg= id + "님 탈퇴실패";
			url = "main.jsp";
			} 
	} 
}
%>
<script>
alert("<%=msg%>")
location.href = "<%=url%>"
</script>
</body>
</html>

2)사진등록

joinForm.jsp에서 시작되게끔 만들어보겠습니다.

물론 updateForm에도 적용하게끔 할것임

2-1) joinForm.jsp (회원가입)에 win_upload()함수추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<!--  onsubmit :  나의 form 내부에 submit버튼 클릭되면 
			form 태그에 이벤트 발생(target == form)
return input_check(this) : input_check()함수 호출 , 매개변수this : form객체를 의미					
				-->
<form action="join.jsp" name="f" method="post" onsubmit="return input_check(this)">
	<input type="hidden" name="picture" value=""><!-- 업로드된 이미지의 이름이 들어갈태그 -->
	<table>
	<caption>회원가입</caption>
		<tr>
		<td rowspan="4" valign="bottom">
		<img src="" width="100" height="120"  id="pic"><br>
		<%--
			href = "javascript:win_upload()" : 자바스크립트의 win_upload()호출
		 --%>
		<font size="1"><a href="javascript:win_upload()">사진등록</a></font>
		</td><th>아이디</th>
		<td><input type="text" name="id">
		<button type="button" onclick="idchk()">중복검색</button>
		</td></tr>
		<tr><th>비밀번호</th><td><input type="password" name="pass"></td></tr>
		<tr><th>이름</th><td><input type="text" name="name"></td></tr>
		<tr><th>성별</th>
		<td>
		<label for="gender1">남</label>
		<input type="radio" name="gender" id="gender1" value="1">
		<label for="gender2">여</label>
		<input type="radio" name="gender" id="gender2" value="2">
		</td></tr>
		<tr><th>전화번호</th><td colspan="2"><input type="text" name="tel"></td></tr>
		<tr><th>이메일</th><td colspan="2"><input type="text" name="email"></td></tr>
		<!-- button태그의 기본type : submit임 -->
		<tr><td colspan="3"><button>회원가입</button></td></tr>
	</table><!-- -zzz -->
</form>
<script>
function input_check(f){
	//f : <form...>
	//f.id : <input name="id">name이 id인태그
	if(f.id.value.trim() == ""){ 
		alert("아이디입력")
		f.id.focus(); //name이id인 곳에 포커스를 둠
		return false; //기본이벤트 취소
	}
	if(f.pass.value.trim() == ""){ 
		alert("비밀번호입력")
		f.pass.focus();
		return false; 
	}
	if(f.name.value.trim() == ""){ 
		alert("이름입력")
		f.name.focus();
		return false; 
	}
	return true;//아이디비번이름이 입력됐다면 true
}

function win_upload(){
	let op = "width=500,height=500 ,top=50 ,left=150";
	open("pictureForm.jsp","",op);
	
}
</script>
</body>
</html>

2-2) pictureForm.jsp 에 미리보기 구현

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원사진등록</title>
</head>
<body>
<table>
<tr><td><img id="preview" src=""></td></tr>
<tr><td>
<!--  MIME 타입 :문서의 형식설정 문서유형/세부종류 text/html , img/jpeg , img/gif...
	accept = "img/*" img문서유형만 업로드한단 뜻
-->
<form action="picture.jsp" method="post" enctype="multipart/form-data">
	<input type="file" name="picture" id="imageFile" accept="img/*">
	<input type="submit" value="사진등록">
</form></td></tr>
</table>
<script type="text/javascript">
let imagefile = document.querySelector('#imageFile');
let preview = document.querySelector('#preview');
//파일선택을 클릭시 발생하는 이벤트
imagefile.addEventListener('change',function(e){
	//선택된파일을 담는 변수
	//e.target.files : 선택된파일들
	let get_file = e.target.files;
	let reader = new FileReader(); //파일을 읽기위한 스트림객체
	
	//reader객체에 파일이 로드되는경우 이벤트등록
	//Img매개변수 : preeview객체를 저장
	//자바스크립트에서는 함수객체를 리턴할수있음
	reader.onload = (function(Img){
		//preview(이미지태그)를 매개변수로하는 함수호출
		return function(e){
			//e.target.result: 선택된파일의value값(파일명)
			Img.src = e.target.result;
		}
	})(preview);
	
	//get_file : 선택된파일이존재하는가?
	//reader.readAsDataURL(get_file[0]) :
		//첫번쨰선택된 파일을 reader로 읽기
	if(get_file){reader.readAsDataURL(get_file[0]);}
});
</script>

</body>
</html>

2-3) picture.jsp

D:\java\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\model1Study\member\picture

// 여기부분만같을거임org.eclipse.wst.server.core\tmp0\wtpwebapps\model1Study\member\picture

(form태그로 인해 사진등록 버튼 클릭시 실행)

<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@page import="java.io.File"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!-- 
	1.request객체로 이미지업로드불가능 ==>cos.jar
	2.이미지업로드폴더 : 현재폴더/picture 설정
	3.opener 화면에이미지볼수있도록 결과전달
	4.현재화면 close하기
-->
<%
String path = application.getRealPath("")+"member/picture/";
String fname = null;
File f = new File(path);//업로드되는 폴더정보
if(!f.exists()){
	f.mkdirs(); //없으면 폴더생성
}
//request : 이미지데이터저장
//path : 업로드되는 폴더정보
//10*1024*1024 : 최대업로드크기(10M)
//new DefaultFileRenamePolicy() : 중복파일명존재시 이름변경해

MultipartRequest multi = new MultipartRequest
	(request,path,10*1024*1024,"UTF-8",new DefaultFileRenamePolicy());

fname = multi.getFilesystemName("picture");

//getFilesystemName("picture") 파라미터가 'picture'인정보를가져옴
%>


<script>
/*
 * opener : 현재창을 open한 window객체(joinForm.jsp페이지의 window객체)
 */
	img = opener.document.getElementById("pic");//id="pic" ..이미지객체임
	/*id=pic인 태그에 미리보기 지원*/
	img.src = "picture/<%= fname%>"; 
	
	/*form하위의 name=picture인 값에 넣어라*/
	opener.document.f.picture.value = "<%=fname%>";
	//self : 현재페이지
	self.close();//창을 닫는다
/*
 * BOM 
 	window : 최상위객체
 	document : 문서객체
 	 form : <form name="f"..>
		input: <input type="hidden" value="fname"..>
 	location : 현재페이지의 url저장
 	history : 현재페이지의 과거부터현재까지의 url정보
 */
</script>

2-4) updateForm수정

form태그의 name을 주고

input hidden을 추가해줌

(회원가입 뿐만아니라 update시에도 사진을 변경,추가할수있게됨)

<form action="update.jsp" name="f" method="post" onsubmit="return input_check(this)">
<table><caption>회원정보수정</caption>
<tr><td rowspan="4" valign="bottom">
	<input type="hidden" name="picture" value="<%=mem.getPicture()%>">
	<img src="picture/<%=mem.getPicture()%>" width="100" height="120" id="pic"><br>

3) id찾기 (idForm.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>idForm(아이디찾기)</title>
</head>
<body>
<h3>아이디찾기</h3>
<form action="id.jsp" method="post">
<table>
<tr><th>이름</th><td><input type="text" name="name"></td></tr>
<tr><th>전화번호</th><td><input type="text" name="tel"></td></tr>
<tr><td colspan="2"><input type="submit" value="아이디찾기"></td></tr>
</table></form>

</body>
</html>

3-1) id찾기를 처리하는부분 (기능)

기능에맞게 구현한 MemberDto.idSearch메서드

(DB와 연동하기위한)

public String idSearch(String name , String tel) {
		Connection con = DBConnection.getConnection();
		PreparedStatement psmt = null;
		ResultSet rs = null;
		String sql = "select id from member where name=? and tel=?";
		try {
			psmt = con.prepareStatement(sql);
			psmt.setString(1, name);
			psmt.setString(2,tel);
			rs = psmt.executeQuery();
			if(rs.next()) {
				return rs.getString("id");
			}
		}
		catch(Exception e) {
			e.printStackTrace();
		}
		finally {
			DBConnection.close(con, psmt, rs);
		}
		return null;
	}

id.jsp

<%@page import="model.member.MemberDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <!-- 
   1.파라미터값 저장
   2.DB에서 두개의파라미터를 이용해 id값을 리턴
   	id MemberDto.idSearch(name,tel)
   	3.id존재 : 화면에 아이디뒤쪽 2자를 **표시해 화면에출력하기
   		아이디전송 버튼을 누르면 opener창에 id입력란에 전달,
   		id.jsp 화면을 닫자
    id없음 : id가없습니다 후 idForm.jsp로 이동 
    -->
    
<%
//request객체를 그냥가져오면 글씨가 깨질거임
	request.setCharacterEncoding("UTF-8");
	String name = request.getParameter("name");
	String tel = request.getParameter("tel");
	String id = new MemberDto().idSearch(name, tel);
	if(id == null){
%>
<script>
alert("아이디가 없어요");
location.href = "idForm.jsp";//아이디찾기로다시이동
</script>
<%} else{ %>

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>아이디찾는화면</title>
</head>
<body>
<table>
<tr><th>아이디</th><td><%=id.substring(0,id.length()-2)+"**"%></td></tr>
<tr><td colspan="2">
	<input type="button" value="아이디전송" onclick="idsend('<%= id.substring(0,id.length())%>')">
</table>
<script>
function idsend(id){
	opener.document.f.id.value = id;
	//loginForm의 form하위의 id의 value
	self.close();
}
</script>
<%} %>
</body>
</html>

아이디전송 누를 시 창을 닫고 id의 value에 찾은 id값을 넣는다

(idForm.jsp페이지만 열어서 하면 정상적으로 작동X)

4) PW찾기

4-1) pwForm.jsp

비밀번호찾기 클릭 후 작성하는 부분

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- /webapp/member/pwForm.jsp--%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비밀번호찾기</title>
<link rel="stylesheet" href="../css/main.css">
</head><body><h3>비밀번호찾기</h3>
<form action="pw.jsp" method="post">
  <table>
     <tr><th>아이디</th><td><input type="text" name="id"></td></tr>
     <tr><th>이메일</th><td><input type="text" name="email"></td></tr>
     <tr><th>전화번호</th><td><input type="text" name="tel"></td></tr>
     <tr><td colspan="2"><input type="submit" value="비밀번호찾기"></td></tr>
     <!-- submit을 누르면 pw.jsp로 넘어간다 -->
  </table>	
</form></body></html>

4-2) 찾는방법( MemberDto의 메서드추가 및 pw.jsp)

MemberDto().pwSearch(id,tel,email)

public String pwSearch(String id,String tel,String email) {
		Connection con = DBConnection.getConnection();
		PreparedStatement psmt = null;
		ResultSet rs = null;
		String sql = "select pass from member where id=? and tel=? and email=?";
		try {
			psmt = con.prepareStatement(sql);
			psmt.setString(1, id);
			psmt.setString(2, tel);
			psmt.setString(3,email);
			rs = psmt.executeQuery();
			if(rs.next()) {
				return rs.getString("pass");
			}
		}
		catch(Exception e) {
			e.printStackTrace();
		}
		finally {
			DBConnection.close(con, psmt, rs);
		}
		return null;
		
	}

pw.jsp(비밀번호찾기 버튼 누를시 동작하는 페이지)

<%@page import="model.member.MemberDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- /webapp/member/pw.jsp
  1. 파라미터 저장.
  2. db에서 id,email과 tel 을 이용하여 pass값을 리턴
       pass = MemberDao.pwSearch(id,email,tel)
  3. 비밀번호 검증 
     비밀번호 찾은 경우 :화면에 앞 두자리는 **로 표시하여 화면에 출력. 닫기버튼 클릭시 
                     현재 화면 닫기
     비밀번호 못찾은 경우: 정보에 맞는 비밀번호를 찾을 수 없습니다.  메세지 출력후
                     현재 페이지를 pwForm.jsp로 페이지 이동. 
-->
<%
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String tel = request.getParameter("tel");
String email = request.getParameter("email");
String pass = new MemberDto().pwSearch(id, tel, email);
if(pass==null){
%>
<script>
alert("정보에맞는 비밀번호를 찾을수없습니다");
location.href = "pwForm.jsp";
</script>
<%} else{%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비번찾기</title>
</head>
<body>
<table>
<tr><th>비밀번호</th><td><input type="text" value="<%=pass.substring(0,pass.length()-2)+"**"%>"></td></tr>
<tr><td colspan="2"><input type="button" value="비밀번호전송" onclick="sendPw('<%=pass.substring(0,pass.length())%>')"></td></tr>
</table>
<script type="text/javascript">
function sendPw(ps){
	//opener : 이 창을 연 최상위부모window객체(loginForm.jsp)
	//name='f'인form의 name='pass'인 태그의 value = ps;
	opener.document.f.pass.value = ps;
	self.close();
}
</script>
<%} %>

</body>
</html>

'JSP' 카테고리의 다른 글

부트캠프47일 (EL , JSTL) (0)	2025.04.09
부트캠프47일(pw찾기 , 비밀번호수정폼) (0)	2025.04.09
부트캠프45일차(로그인 , main , sitemesh , 회원목록 , updateForm) (0)	2025.04.07
부트캠프44일차(model1 ) (0)	2025.04.04
부트캠프43일차(내장객체 , cookie ,JDBC) (0)	2025.04.03

현재글부트캠프46일차 (delete , 사진등록 , id,pw찾기)

web동곤

백엔드위주

반복문, Spring, Easy, Eclipse, 인텔리제이, 기초, 유익한, java, `, 꿀팁, 자바, 스코프, 유익, 코딩, 이클립스, 형변환, 메서드, 기본, 초보, Method,

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

web동곤