주말 (49일차에 이어짐 id.pw찾기 , loginForm관련 , picture절대경로만들기)

JSP

주말 (49일차에 이어짐 id.pw찾기 , loginForm관련 , picture절대경로만들기)

동곤일상 2025. 4. 12. 18:00

영원

아티스트: DK(디셈버)

앨범: 영원 (남은 인생 10년 X DK(디셈버))

발매일: 2024.03.18

일단 먼저 레이아웃을 좀더 꾸며보고싶지만

미적감각이 조금 떨어지는관계로....

id찾기와 pw찾기를 구현해볼까합니다

id찾기 or pw찾기를 누를 시

새로운창 하나를 띄운 후

거기에 해당하는 정보들을 입력합니다

입력한정보를 DB와 비교해 맞다면

id를 alert으로띄워준 후 창을 닫고
id 혹은 pw 입력부분에 찾은 값을 넣어줄겁니다

1)아이디찾기(idForm)

2)pw찾기(pwForm)

3)세션로그인 시 loginForm접근막기

4) picture 경로 오류

1) 아이디찾기(idForm)

webapp / view / idForm.jsp

(이름 , 전화번호를 입력해파라미터를 id로 전달하는 내용임)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/main.css">
<title>idForm(아이디찾기)</title>
</head>
<body>
<h3>아이디찾기</h3>
<form action="id" 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>

MemberController의 id매핑부분

(id라는 폼을 처리하는곳임)

@RequestMapping("id")
	public String id(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
		String name = request.getParameter("name");
		//name="name"인 파라미터를 가져와
		//charEncodingFilter를 만들어놨으므로 인코딩이필요없음
		String tel = request.getParameter("tel");
		String id = dto.idSearch(name, tel);
		//MemberDto에 가서 DB정보와비교해 가져온다
		if(id==null) {
			request.setAttribute("msg", "id를 찾을수없어요");
			request.setAttribute("id", id);
			return "search";
		}
		else {
		request.setAttribute("msg", name+"님의 id : "+id);
		request.setAttribute("id", id);
		return "search";
		}
	}

MemberDto의 idsearch메서드

(이름과 번호를 인자로받은 후 DB에넣어서 일치하는 id를 반환)

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;
	}

search

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script>
//requestScope.msg
alert("${msg}") //request의 속성인 msg를 알림창에띄움

//requestScope.id
opener.document.f.id.value = "${id}" 
//받은id를 opener(loginForm)의 id값에 넣어줌

self.close(); //나의창을 닫음
</script>

2) pw찾기(pwForm)

webapp/view/pwForm.jspp

<%@ 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>
</head><body><h3>비밀번호찾기</h3>
<form action="pw" method="post" onsubmit="return input_check(this)">
  <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로 넘어간다 -->
  </table>	
</form></body>
<script>
function input_check(f){
	if(f.id.value.trim() == ""){
		alert("ID입력바람")
		return false;
	}
	else if(f.email.value.trim() == ""){
		alert("Email입력바람")
		return false;
	}
	else if(f.tel.value.trim() == ""){
		alert("전화번호입력바람")
		return false;
	}
	else if(!isValidEmail(f.email.value.trim())){
		alert("올바르지않은 이메일형식")
		f.email.focus()
		return false;
	}
	else if(!isValidTel(f.tel.value.trim())){
		alert("올바르지않은 전화번호형식")
		f.tel.focus()
		return false;
	}
	else{
		return true;
	}
	
	function isValidEmail(email){
		const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9._]+\.[a-zA-Z]{2,}$/;
		return regex.test(email);
		/*
		   /^  .... $/ => 정규표현식 시작과 끝
		   [a-zA-Z0-9._%+-]+ : 대소문자 숫자 . - % + - 중  1개이상
		   @[a-zA-Z0-9._]+ : @ 문자뒤에 대소문자 숫자.  _ 중 한개이상
		   \. : .문자
		[a-zA-Z]{2,} : 대소문자 2개이상
		*/
	}
	
	
	function isValidTel(tel){
		const regex = /^(02|01[0126789])-?\d{3,4}-?\d{4}$/;
		return regex.test(tel);
/*
	(02|01[0126789])  : 02 or 010 011 ...019
	-?  : - 가 0 또는 1개
	\d{3,4}  : 숫자 3개or4개	
	\d{4} : 숫자4개
*/
	}
	
}
</script>
</html>

결과를 pw에 넘긴다!!!(같은request영역이므로 name들(입력값)을 사용해보자)

MemberDto의 pwSearch메서드

	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;
		
	}

Controller의 pw부분

@RequestMapping("pw")
	public String pw(HttpServletRequest request, HttpServletResponse response) {
		String id = request.getParameter("id");
		//name="name"인 파라미터를 가져와
		String email = request.getParameter("email");
		String tel = request.getParameter("tel");
		String pass = dto.pwSearch(id, tel, email);
		//MemberDto에 가서 DB정보와비교해 가져온다
		if(pass==null) {
			request.setAttribute("msg", "password를 찾을수없어요");
			request.setAttribute("pass", pass);
			return "pwSearch";
		}
		else {
		request.setAttribute("msg", id+"님의 password : "+pass);
		request.setAttribute("pass", pass);
		return "pwSearch";
		}
	}

pwSearch.jsp

(controller의 메시지를 출력해주고 찾은pass를 로그인창에 넣어준 후

해당 pw찾기창을 닫아준다)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script>
alert("${requestScope.msg}")

opener.document.f.pass.value = "${requestScope.pass}"
//request영역의 속성인 msg , pass

self.close();
</script>

이메일형식에맞지않게작성시

pw찾는 모습

3) 세션에로그인 시 (loginForm접근을 막기)

상단에 목록을보면 admin님 하이 , 로그아웃 과 같은

로그인시에 뜨는 메뉴가떠있지만 , 로그인폼에 접근이되는모

보기가 좋지도않을뿐더러 이중로그인?등의 문제가생길것같다

(그래서 로그인폼에 접근 할때 세션정보를 조회해서 막아보도록했음)

다음과같이 controller에 loginForm을 매핑해서 세션정보를 조회해

세션의 속성인 login이 존재한다면 main화면으로이동(forward방식)

그게 아니라면 그냥 loginForm에접근

@RequestMapping("loginForm") 
	public String loginForm(HttpServletRequest request, HttpServletResponse response ) {
		String login = (String)request.getSession().getAttribute("login");
		if(login!= null) {
			request.setAttribute("msg", "이미로그인했어요");
			request.setAttribute("url", "member/main");
			return "alert";	
		}
		else {
			return "member/loginForm";
		}
	}

다음영상과같이 loginForm의 접근을 막고main으로돌아가게됨

4)picture폴더를 인식하지못하는문제해결

controller에서 실행하지않고

서버실행 후 url로접근시 picture폴더 인식을 못하는 문제

MemberController에서 실행했을때의 화면

url로 접근시 화면

( 추가 : 하지만 지금 경로를 자세히보면

http://localhost:8080/model2Study/member/member/list 로 되어있으니

../ 의 상대경로가 먹지않는것이다

http://localhost:8080/model2Study/member/list 로변경한다면 잘 될것임)

picutre폴더가 존재하는 곳

webapp/picture

변경 전 이미지의 경로(상대경로)

<td><img src="../picture/${mem.picture}" width="30" height="30"></td>

변경 후의 img 경로(절대경로)

/webapp/picutre가 아니라

C:/java/workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/model2Study/picture

( request.getServletContext().getRealPath("")+"/picture/" )

여기서 picture를 가져오는것 (사람마다 workspace위치가다름 주의!)

webapp하위의 picuture에 복사하면 저곳에 자동으로 들어가게될거임

하지만 반대는 성립하지않음!

<img src="${pageContext.request.contextPath}/picture/${mem.picture}" width="200" height="210"></td>
<!--현재 웹 애플리케이션의 context path(루트경로)를 문자열로 반환 
	/model2Study/picture 가 반환될것임 (이걸 해야 url로 접근시 사진이안뜨는문제를 막음)
-->

'JSP' 카테고리의 다른 글

부트캠프51일차 (model2 idchk) , (MyBatis시작 , 세팅법 사용법) (0)	2025.04.15
부트캠프50일차(Model2 : mail , id pw search , password수정 , pictureForm) (0)	2025.04.14
부트캠프49일차(model2 {login ,main ,info ,update,delete,list,layout (1)	2025.04.11
부트캠프48일(core태그 , fmt태그 , fn태그 , model2시작) (0)	2025.04.10
부트캠프47일 (EL , JSTL) (0)	2025.04.09

현재글주말 (49일차에 이어짐 id.pw찾기 , loginForm관련 , picture절대경로만들기)

web동곤

백엔드위주

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

Today :
Yesterday :

web동곤