본문 바로가기
자바 웹 개발자가 될거야/JSP

[JSP] 로그인페이지 / 메인 페이지 만들기

whitz 2021. 12. 8. 17:04

- 앞서 JSP에서 데이터베이스를 연결하여 Insert, Select, Update, Delete 기능을 보여주는 코드를 써봤는데 조금 더 다듬어서 로그인 페이지와 회원가입 페이지 그리고 부가적인 페이지를 만들어보았다

 

- 제일 먼저 login.jsp 페이지 만들어서 로그인 페이지를 첫 페이지로 시작해서 기능을 선보이겠다

- 로그인하면 그 입력한 아이디와 비밀번호를 이용해서 로그인처리하는 기능도 설계

- 로그인 성공하면 메인 페이지로 이동

 

전체적인 틀

 

< 로그인 페이지 >

 

- form 태그 사용해서 아이디, 비밀번호 입력받기

- 로그인 정보는 loginPro.jsp로 넘겨주기

- 첫 방문이라서 아이디, 비밀번호가 없다면 회원가입 버튼 눌러서 회원가입 폼으로 넘어가기

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 <h1>WebContent/member/loginForm.jsp</h1>
 <h2> 로그인 페이지 </h2>
 
 <fieldset>
   <legend> 로그인 </legend>
   <form action="loginPro.jsp" method="post">
     	아이디 : <input type="text" name="id"><br>
    	 비밀번호 : <input type="password" name="pass"><br>
     <input type="submit" value="로그인">   
     <input type="button" value="회원가입" onclick=" location.href='insertForm.jsp'; ">
   </form> 
 </fieldset>
 
</body>
</html>

 

 

① 로그인 처리하기

 

- loginPro.jsp 페이지 만들어서 로그인 처리를 해줄거임

- 입력받은 아이디와 비밀번호를 DB에 있는 회원정보와 비교해서 처리해줌

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>WebContent/member/loginPro.jsp</h1>
  <%
    // 한글처리 
    request.setCharacterEncoding("UTF-8");

  %>
    <jsp:useBean id="loginMB" class="com.itwillbs.member.MemberBean"></jsp:useBean>
    <jsp:setProperty property="*" name="loginMB"/>
    
  <%
    // DB연결에 해당하는 처리동작을 수행하는 객체를 생성
    MemberDAO mdao = new MemberDAO();
  
    int result = mdao.loginCheck(loginMB.getId(), loginMB.getPass());
    
	if(result == -1){
		%>
		  <script type="text/javascript">
		      var value = confirm("아이디가 없습니다. 회원가입 하시겠습니까?");
		      if(value){
		    	  location.href='insertForm.jsp';
		      }else{
		    	  history.back();
		      }		      
		  </script>
		<%
	}else if(result == 0){
		%>
		   <script type="text/javascript">
		       alert(' 비밀번호 오류! ');
		       history.back();		   
		   </script>
		<%		
	}else{ // result == 1
	   // 로그인정보를 세션 객체에 저장
	   session.setAttribute("id", loginMB.getId() );
	   // 회원가입 -> main.jsp 이동
	   response.sendRedirect("main.jsp");
	}

  %>
</body>
</html>

 

- MemberBean은 회원정보 저장하는 클래스

- 앞에 쓴 글에서는 DB 연결을 페이지마다 썼다면 이제부터는 객체를 따로 만들어서 불러올거임

 

- 아이디가 없는 경우 → 회원가입 동의여부 질문 → yes : 회원가입 페이지로 이동 / no : 원래(로그인)페이지로 이동

- 아이디는 있지만 비밀번호가 잘못된 경우 → 비밀번호 오류 ! 원래(로그인)페이지로 이동

- 아이디, 비밀번호가 회원정보와 동일한 경우 → 로그인정보 저장, main페이지로 이동

 

  • 1 - 사용 가능한 아이디
  • 0 - 사용 불가능한 아이디
  • -1 -> 에러 발생

 

< 메인페이지 >

 

- 로그인 성공 후 메인페이지로 이동

- 로그인 정보가 없이 바로 메인페이지로 어떻게 들어왔다하면 로그인페이지로 이동시켜버림

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 <h1>WebContent/member/main.jsp</h1>
  
  <h2> 메인페이지 </h2>

  <%
    String id = (String)session.getAttribute("id");
  
    if(id == null){
    	response.sendRedirect("loginForm.jsp");
    }
  %>
  
  로그인 아이디 : <%=id %><br>
  <input type="button" value="로그아웃" onclick=" location.href='logout.jsp'; ">
  
  <hr><hr>
  
  <h2><a href='info.jsp'> 회원 정보 확인하기</a></h2>
  
  <hr><hr>
  
  <h2><a href='updateForm.jsp'> 회원 정보 수정하기</a></h2>  
  
  <hr><hr>
  
  <h2><a href='deleteForm.jsp'> 회원 정보 삭제하기</a></h2>
  
  <% 
  	if(id != null){
  		if(id.equals("admin")){
  			
  		//if(id !=null && id.equals("admin")){}
  		
  %>
  <hr><hr>
  <hr><hr>
  
  <!-- 관리자로 로그인했을때만 이 메뉴를 볼 수 있게   -->  
  <h2><a href='list.jsp'> 회원전체 목록보기</a></h2>
  
  <%
  		}
  	}
  	%>
</body>
</html>

 

- 메인페이지에 보여줄 기능

  · 로그아웃 버튼

  · 회원정보 확인

  · 회원정보 수정

  · 회원정보 삭제

  · 관리자로 로그인했을때만 회원전체 목록 보이기

 

 

 

① 회원정보 확인하기

 

- 로그인한 사용자의 정보를 출력해줌

- 로그인 안한 사용자가 이 페이지로 바로 접근하려 했을 때 로그인 페이지로 이동시킴

- 자바빈 이용해서 DB연결

 

<%@page import="com.itwillbs.member.MemberBean"%>
<%@page import="com.itwillbs.member.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>WebContent/member/info.jsp</h1>
  <%

    String id = (String) session.getAttribute("id");
    
    if(id == null){
    	response.sendRedirect("loginForm.jsp");
    }
    // 로그인한 사용자의 모든 정보를 DB에서 가져와서 화면에 출력 
    
    // DAO 객체를 생성
    MemberDAO mdao = new MemberDAO();
    
    // DAO 객체 안에있는 회원정보를 가져오는 메서드 호출
    MemberBean mb = mdao.getMember(id);
  
  %>
  <h3> 아이디 : <%=mb.getId() %> </h3>
  <h3> 비밀번호 : <%=mb.getPass() %></h3>
  <h3> 이름 : <%=mb.getName() %></h3>
  <h3> 나이 : <%=mb.getAge() %></h3>
  <h3> 성별 : <%=mb.getGender() %></h3>
  <h3> 이메일 : <%=mb.getEmail() %></h3>
  <h3> 회원가입일 : <%=mb.getReg_date() %></h3>
  
  
  <h2><a href="main.jsp">메인페이지로 이동</a></h2>
</body>
</html>

 

- 마지막에 a링크 이용하여 메인페이지로 이동할 수 있게 설계

- id를 기준으로 정보를 다 들고옴

 

 

 

'자바 웹 개발자가 될거야 > JSP' 카테고리의 다른 글

[JSP] 페이징 처리 / 한 페이지에 보여지는 게시글 수  (0) 2021.12.10
[JSP] 회원정보 수정 / 회원정보 삭제 구현하기  (0) 2021.12.08
[JSP] JSP와 DB연결 후 조회 / 수정 / 삭제해보기  (0) 2021.11.29
[JSP] JSP Mysql 연결 / 드라이버 이름 확인하기 / JSP에서 입력받아 DB로 보내기 / 워크밴치 재설치  (0) 2021.11.23
[MYSQL] CLI 실행 / ' 잘못 쳤을 때 / 오라클 데이터형 비교 / 날짜타입 / 실행 단축키  (0) 2021.11.22

'자바 웹 개발자가 될거야/JSP' Related Articles

티스토리툴바