Web 01. 로그인 페이지 만들기 (DB와 연동해서 mvc패턴 이용하기)

1. web.xml파일에 welcome-file에 설정되어있는 index.jsp (메인페이지)  만들기 
   메인페이지에 menebar.jsp include 

<%@ include file = "views/common/menubar.jsp"%>

2. index.jsp파일에 바로 작성하지않고 메뉴바와 로그인폼 (항상 같은페이지에 있을것) 따로 
   webapp/views/common안에 menubar.jsp생성 

( html/ css 작성시에는 vscode이용) 
 

복습할 부분 >

CSS )  float: right 화면으로 부터 띄워서 오른쪽 배치 
           clear:both  float 끝내기 
           line-height  줄간격 조정 -> 메뉴바 중간정렬할수있음 (높이와 똑같이쓰기)
           큰부분부터 차례로  설정하기!!

html ) 로그인 전 ( 로그인폼) / 로그인 후 (로그아웃,마이페이지) 같은 jsp내에 작성
       전달받은 session안의 객체가 null일 경우 -> 로그인전  / 그게 아닐 경우 -> 로그인 후 페이지 보이게 하기 (if문)

menubar.jsp

1) 로그인 전     

< form action="<%request.getContextPath()%>/login.me" method="post">

     form의 submit버튼 클릭시 입력한 정보 넘어갈 경로 작성 
    request.getContextPath() :  ContextPath는 바뀔 수 있으니 메소드로 출력
    로그인은 post방식으로 넘겨야함( 개인정보가 url에 노출되면 안됨)

 

submit(로그인) 버튼 클릭 -> LoginController(mapping값 login.me)  Servlet으로  요청처리

 1) 요청시 전달값 뽑기 & 데이터 가공처리 ==>변수, 객체에 기록하기 

String userId = request.getParameter("userId");

 

2) 요청처리 (db에 sql문 실행)
Service>Dao>sql문 실행(member 테이블로 부터 select)

Member loginUser = new MemberService().loginMember(userId,userPwd);

service의 loginMember 으로 아이디와 패스워드값 전달한 후 멤버 객체로 돌려받음

MemberService

longinMember 메소드 생성( userId, userPwd) 매개변수 => 멤버객체 리턴 
Connection 객체 생성 (JDBCTemplate 에 만들어놓은 메소드 호출)

Dao에 Connection객체와 userId, userPwd 전달하며 호출  후 멤버객체 돌려받아 Servlet으로 리턴 

public Member loginMember(String userId, String userPwd) {
		Connection conn = /*JDBCTemplate.*/getConnection();
		
		Member m = new MemberDao().loginMember(conn,userId,userPwd);
		/*JDBCTemplate.*/close(conn);
		return m;
	}

 

MemberDao

Member 객체 생성 
PreparedStatement객체 생성
ResultSet객체생성

sql 구문 xml파일로부터 가져오기 ==> Properties 객체생성 필요 

private Properties prop = new Properties();

public MemberDao(){ 

  String filePath = MemberDao.class.getResource("/db/sql/member-mapper.xml").getPath();
           try {
                  prop.loadFromXML(new FileInputStream(filePath));
               } catch (IOException e) {
                   e.printStackTrace();
               }
 }

 

public Member loginMember(Connection conn, String userId,String userPwd) {
		//select문 => ResultSet객체 (한행 조회)=> Member객체에 담기
		Member m = null;
		PreparedStatement pstmt = null;
		ResultSet rset = null;
		
		String sql = prop.getProperty("loginMember");
		
		try {
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1,userId);
			pstmt.setString(2, userPwd);
			
			rset = pstmt.executeQuery(); // 한행|0행
			
			if(rset.next()) { //true > 조회된게 있을경우
				m= new Member(rset.getInt("user_no"),
							  rset.getString("user_id"),
							  rset.getString("USER_PWD"),
							  rset.getString("user_name"),
							  rset.getString("phone"),
							  rset.getString("email"),
							  rset.getString("address"),
							  rset.getString("interest"),
							  rset.getDate("enroll_date"),
							  rset.getDate("modify_date"),
							  rset.getString("status")
							  );
				
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			/*JDBCTemplate.*/close(rset);
			/*JDBCTemplate.*/close(pstmt);

		}
		return m;
	
	}

>>> 생성한 Member객체를 다시 Service로 리턴 

 member-mapper.xml 파일의 sql구문 >

<entry key="loginMember">
		SELECT 
				USER_NO
			  , USER_ID
			  , USER_PWD
			  , USER_NAME
			  , PHONE
			  , EMAIL
			  , ADDRESS
			  , INTEREST
			  , ENROLL_DATE
			  , MODIFY_DATE
			  , STATUS
		 FROM MEMBER
		WHERE USER_ID = ?
		  AND USER_PWD = ?
		  AND STATUS = 'Y'	  	

	</entry>

 

3) 처리된 결과를 가지고 사용자가 보게될 응답뷰(jsp)지정 후 포워딩 또는 url 재요청

---

⭐⭐⭐중요⭐⭐⭐
 응답페이지에 전달할 값이 있을 경우 어딘가에 담아야됨 -> 담을 수 있는 영역 == jsp내장 객체

1) application : 담긴 데이터를 "웹 애플리케이션 전역" 에서 사용 가능
2) session : 담긴 데이터를 직접 지우거나, 세션이 만료(서버 멈추거나, 브라우저 종료) 되기 전까지 어떤 jsp/Servlet이든 사용가능
3) request : 담긴 데이터를 현재  request객체를 포워딩한 응답 jsp에서만 사용가능 (일회성)
4) page : 해당 jsp에서 담고 그 jsp에서만 사용가능

공통적으로 데이터를 담고자 한다면 .setAttribute("키", 밸류)
                   데이터를 꺼내고자한다면 .getAttribute("키")
                   데이터를 지우고자한다면 .removeAttribute("키")

---

3_1) 돌려받은 멤버객체가 null이면 조회결과 없음 => 로그인 실패=> 에러페이지 응답

if(loginUser == null) {
			//조회결과 없음 == 로그인 실패 ==> 에러페이지(views/common/errorPage.jsp) 응답 
			request.setAttribute("errorMsg","로그인에 실패했습니다");
			
			RequestDispatcher view = request.getRequestDispatcher("views/common/errorPage.jsp");
			view.forward(request, response);

에러메세지를 attribute에 담은 후 eerorPage.jsp  로 jsp위임 포워딩

 

3_2) 돌려받은 멤버객체가 null이 아니면 => 로그인 성공 => 메인페이지 로그인성공페이지 (로그인후 ) 보이도록 함

  Session 객체에  정보 담기 (로그인한 회원의 정보가 여기저기 필요하기 때문)

 HttpSession session = request.getSession();
 session.setAttribute("loginUser", loginUser);

 url 재요청 방식 (redirect) 로 로그인 후 메인페이지의 url이 변경되지 않도록

response.sendRedirect(request.getContextPath());

 

menubar.jsp

2) 로그인 후 

 session이 null이 아닐경우 
 객체안의 정보( 로그인한 사람의 이름) 출력 -> loginUser.getUserName() 
 a태그의 href="<%=request.getContextPath()%>/logout.me >경로 설정 

로그아웃 요청시에는 전달값 , sql문 실행할 필요 없기때문에  다시 로그인전 메인페이지 보이게 하면됨

1) 로그아웃 처리할 Servlet생성( mapping값 logout.me)

2) 로그아웃 버튼 클릭시 ->> session 만료시키기 == 세션 무효화 시키기(세션비우기)

   HttpSession session = request.getSession(); // 세션가지고오기
   session.invalidate(); 

 3) 응답페이지 => 메인페이지(index.jsp)

  response.sendRedirect(request.getContextPath());

*  redirect : 클라이언트가 요청한 내용에 대해 서버가 바로 응답하는 것이 아니라 클라이언트에게 다시요청하라고 서버가 강제하는것  ( url재요청 방식) 기존에 저페이지를 응답하는 url이 존재할 경우 사용가능 

* response.sendRedirect(String location) : 이동시킬 페이지가 위치해 있는 경로로 매개변수 지정
* response.sendRedirect("http://www.naver.com") : 특정사이트로 이동시키고 싶을 경우 url입력