0830 JSP - 비밀번호 입력 페이지 ~ 회원 정보 수정

렌더링의 순서에 따라서 정보를 가져오는지의 유무 

 

js 입력된 데이터 체크 

 

<form action ="memberUpdatePro.jsp" method = "post" name = "fr">

 

title 밑에 자바스크립트 입력

 

<script type ="text/javascript">
// js 입력된 데이터 체크 

</script>

 

 

 

 

body 밑에 쓴다면, 

 

 

 

 

console.log

 

개발자가 개발을 위해서 정보를 출력하기 위한 것 

console.log(window.document.fr);

일반 유저가 확인할 수 없는 곳에 있다. 

 

f12 를 눌러서 들어가면 console이라는 창이 뜸 

 

---

console.log(window.document.fr.pw);

 

 

 

 

 

 

---

console.log(window.document.fr.pw.value);

 

 

---

비밀번호 입력하세요 창 뜨기

 

<form action ="memberUpdatePro.jsp" method = "post" name = "fr" onsubmit="check();">


비밀번호 :  <input type = "password" name = "pw" value = "" placeholder ="비밀번호를 입력하세요"><br>




function check(){
if(window.document.fr.pw.value==""){
alert("비밀번호를 입력하세요!");
}
}

 

리턴값 넣어서 check() 안뜨게 하기 

break; 

if문에 쓸수는 있지만 함수를 끝내는 역할은 못한다. 

 

 

function check(){

if(window.document.fr.pw.value==""){
alert("비밀번호를 입력하세요!");
return; //함수의 종료 
}
alert("check() 끝");
}

 

 

비밀번호 없는지 체크하고 못넘어가게 하기 

 

return false;

 

<form action ="memberUpdatePro.jsp" method = "post" name = "fr" onsubmit="return check();">





function check(){

if(window.document.fr.pw.value==""){
alert("비밀번호를 입력하세요!");
document.fr.pw.focus();
return false; //함수의 종료 

}
alert("check() 끝");
}

비밀번호를 안쓰면, 쓰라는 창이 나오면서 계속 그 창에 머물러 있다. 

 

 

document.fr.pw.focus();

=> 비밀번호에 커서가 깜빡깜빡 거림 

 

 

 

회원정보 수정하기

 

<memberUpdatePro.jsp>

 

로그인 제어 

String id = (String)session.getAttribute("id");
if(id==null){
response.sendRedirect("loginForm.jsp");

}

 

 

정보수정

	<h1>memberUpdatePro.jsp</h1>
	<%
	//한글 처리 	
	request.setCharacterEncoding("UTF-8");
	//전달되는 정보 저장(수정할 데이터) - 액션태그
	%>
<!-- 	MemberBean umb = new MemberBean(); 이거랑 같은 태그 -->
	<jsp:useBean id="umb" class ="com.itwillbs.member.MemberBean" />
	<jsp:setProperty property="*" name = "umb"/>
	
	수정할 정보 : <%= umb %>

 

수정됨

---

DB에 가서 해당 회원의 정보를 수정

 

memberDAO.java

 

회원 정보 수정 동작을 만들어야 함. 

 

public int updateMember(MemberBean umb){
		
		return 0;
	}

} // class

memberupdatePro의 MemberBean이라는 객체를 받아와야함.

 

 [1] 정상수정, 
 [0] 비밀번호 오류 
[-1] 회원정보 없음 

 

1. 드라이버 로드
2. 디비 연결
3. sql 작성 & pstmt 객체
4. sql 실행
5. 데이터 처리 

 

 

 

 

과정이 다 똑같으므로, 변수를 선언하기
공통으로 사용할 변수 선언 

 

private Connection con = null;
private PreparedStatement pstmt = null;
private ResultSet rs = null;
private String sql = " ";

 

 

 

 

 

 

디비 연결해주는 메서드 구현

private Connection getConnection() throws Exception {
		final String DRIVER = "com.mysql.cj.jdbc.Driver";
		final String DBURL = "jdbc:mysql://localhost:3306/jspdb";
		final String DBID = "root";
		final String DBPW = "1234";
		
		Class.forName(DRIVER);
		//2.디비 연결
		 con = DriverManager.getConnection(DBURL, DBID, DBPW);
		 System.out.println(" DAO : 디비 연결 성공");
		 System.out.println(" DAO : " + con);
		return con;
	}

f2 - throws Exception

 

Connection con 의 Connection을 빼고, 연결정보를 위의 con에 저장하겠다 

 

 

밑으로 내려감,, 

 

 

f2 - 두번 째 클릭

 

 

con 이라는 변수에 저장 될 것 

 

 

 

디비연결작업 

 

 

 

 

 //공통으로 사용할 변수 선언 
	private Connection con = null;
	private PreparedStatement pstmt = null;
	private ResultSet rs = null;
	private String sql = " ";
	
	
	//디비 연결해주는 메서드 구현 
	
	private Connection getConnection() throws Exception {
		final String DRIVER = "com.mysql.cj.jdbc.Driver";
		final String DBURL = "jdbc:mysql://localhost:3306/jspdb";
		final String DBID = "root";
		final String DBPW = "1234";
		
		Class.forName(DRIVER);
		//2.디비 연결
		 con = DriverManager.getConnection(DBURL, DBID, DBPW);
		 System.out.println(" DAO : 디비 연결 성공");
		 System.out.println(" DAO : " + con);
		//연결정보를 위의 con에 저장하겠다 
		return con;
	}
	
	
	
	
	 // 정보 조회 메서드()
	 
	
	/**
	 * 
	 * JavaDoc 주석 : 문법에 대한 설명을 작성하는 주석문
	 * 
	 * 이 메서드는 로그인 정보 (id)를 입력받아서
	 *id에 해당하는 정보 모두를 조회 후 MemberBean 객체에 담아서 
	 *리턴하는 메서드 입니다. 
	 * 
	 */
	
	public MemberBean getMember(String id) throws Exception {
		//DB 에서 정보 조회 (select) -> MemberBean 객체 만들기 
		final String DRIVER = "com.mysql.cj.jdbc.Driver";
		final String DBURL = "jdbc:mysql://localhost:3306/jspdb";
		final String DBID = "root";
		final String DBPW = "1234";
		
		//2.디비 연결
		Class.forName(DRIVER);
		Connection con = DriverManager.getConnection(DBURL,DBID,DBPW);
		
		//3.sql 작성(select) & pstmt 객체
		
		String sql = "select * from itwill_member where id=?";
		PreparedStatement pstmt = con.prepareStatement(sql);
		
		// ???
		pstmt.setString(1,id);
		
		
		//4.SQL 실행

		ResultSet rs = pstmt.executeQuery();
		
		//MemberBean mb = new MemberBean();
		MemberBean mb = null;
		
		//5.데이터 처리 
		if(rs.next()){
			//회원정보 저장 (MemberBean)
			//rs(DB정보) -> MemberBean
			mb = new MemberBean();
			
			mb.setAge(rs.getInt("age"));
			mb.setEmail(rs.getString("email"));
			mb.setGender(rs.getString("gender"));
			mb.setId(rs.getString("id"));
			mb.setName(rs.getString("name"));
			mb.setPw(rs.getString("pw"));
			mb.setRegdate(rs.getTimestamp("regdate"));
			
		}
		
		//MemberBean 객체 생성 완료 
		System.out.println("정보 조회 완료! mb 리턴!");
		return mb;
	}
	//정보 조회 메서드()
	
	//정보 수정 동작()
	public int updateMember(MemberBean umb){
		// [1] 정상수정, [0] 비밀번호 오류 [-1] 회원정보 없음 
		int result = -1;
		try {
			//1. 드라이버 로드
			//2. 디비 연결
			
			con = getConnection();
	
			
			//3. sql 작성 & pstmt 객체
			//본인 여부 체크 
			sql = "select pw from itwill_member where id =?";
			
			pstmt = con.prepareStatement(sql);
			
			//?
			pstmt.setString(1,umb.getId());
			//4. sql 실행
			pstmt.executeQuery();
			rs = pstmt.executeQuery();
			//5. 데이터 처리 
			if(rs.next()) {
				//비밀번호가 있다(회원)
				if(umb.getPw().equals(rs.getString("pw"))) {
					//본인 -> 정보 수정 
					//3.sql 작성 (update-이름,나이,성별을 수정하는 구문)
					
					sql = "update itwill_member set name =?,age =?,gender =? where id=?";
					pstmt = con.prepareStatement(sql);
					
					pstmt.setString(1, umb.getName());
					pstmt.setInt(2, umb.getAge());
					pstmt.setString(3, umb.getGender());
					pstmt.setString(4, umb.getId());
					
					//4.sql 실행 
					pstmt.executeUpdate();
					
					
					result = 1;
				}else {
					//비밀번호 오류 
					result = 0;
				}
				
			}else {
				//비밀번호가 없다(비회원) - pw는 not null로 설정했기 때문 
				//return -1;
				result = -1;
			}
			System.out.println(" DAO : 정보 수정 완료("+result+")");
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		
		return result;
	}
	//정보 수정 동작()
			
} //class

 

 

DB에 가서 해당 회원의 정보를 수정
<memberUpdatePro.jsp>

 

 

DAO 객체 생성 

<% 
MemberDAO dao = new MemberDAO();
%>

 

 

회원정보를 수정해주는 메서드 실행
<UpdatePro.jsp>

 

 

int result = dao.updateMember(umb);

---

수정 후에, 메인페이지로 이동 
<main.jsp>

 

//result == 1, 0, -1
	if(result ==1){
		
	}else if(result==0){
		
	}else{ //result == -1
		
	}

result == 1  
수정 성공 - 메인페이지 이동 

result == 0 
수정 실패, 비밀번호 오류 - 페이지 뒤로 가기 

result == -1
수정 실패, 회원정보 오류 - 페이지 뒤로 가기 

 

// DB에 가서 해당 회원의 정보를 수정 
	
	// DAO 객체 생성
	MemberDAO dao = new MemberDAO();
	
	//회원정보를 수정해주는 메서드 실행
	int result = dao.updateMember(umb);
	
	//result == 1, 0, -1
	if(result ==1){
		//수정 성공 - 메인페이지 이동 
		%>
		<script type = "text/javascript">
			alert('수정 성공!');
			location.href="main.jsp"
		
		
		</script>
		<%
	}else if(result==0){ 
		//수정 실패 - 뒤로 가기%>
		<script type = "text/javascript">
			alert('수정실패 - 비밀번호 오류');
			history.back();
			
		
		</script>
	<% }else{ //result == -1 %>
			<script type = "text/javascript">
			alert('수정실패 - 회원정보 오류');
			history.back();
	<% }%>

넘어렵다..

 

 

 

번외

---

자바스크립트 코드 불러올 수 있게 하기 

Help -> Marketplace -> tern 검색 -> 첫번째 다운로드
그 후,  JSP 프로젝트 - > configure  -> 첫번째 -> jQuery 두개 클릭