본문 바로가기
국비 과정/JSP

국비 - 1027 ( 로그인 폼)

by 코딩호야 2022. 10. 27.

간단한 로그인 페이지 만들기 

 

member_2     ( oracle 페이지 )

DB 에 기본 테이블을 만들어 놓은 오라클 페이지이다.

create table member_2(
	id			varchar2(15),
	password 	varchar2(10),
	name		varchar2(15),
	age			number,
	addr		varchar2(40),
	tel			varchar2(20),
	gender		varchar2(5),
	hobby		varchar2(40),
	email		varchar2(30),
	primary	key(id))

 

 

 

loginForm.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원관리 시스템 로그인 페이지</title>
<style type = "text/css">
table{
	margin: auto;
	width: 300px;
	border: 1px solid gray;
	text-align: center;
	background-color: #cccc6666;
}

.td_title{
	font_weight: bold;
	font-size: x-large;
}
</style>
</head>
<body>
<form action="loginProcess.jsp" name="loginform" method="post">
<table>
	<tr>
		<td colspan="2" class="td_title">로그인 페이지</td>
	</tr>
	
	<tr>
		<td><label for= "id">아이디 : </label></td>
		<td><input type="text" name="id" id="id"></td>
	</tr>
	
	<tr>
		<td><label for="pass">비밀번호 : </label></td>
		<td><input type="password" name="pass" id="pass"></td>
	</tr>
	
	<tr>
		<td colspan="2">
			<a href="javascript:loginform.submit()">로그인</a>&nbsp;&nbsp;
			<a href="joinForm.jsp">회원가입</a>
		</td>
	</tr>
</table>
</form>

</body>
</html>

맨처음 로그인 화면을 나타내는 페이지이다. 실행하면 아래처럼 나타난다.

 

 

joinForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 회원관리 시스템 회원가입 페이지 </title>
<style type="text/css">
	table{
		margin: auto;
		width: 400px;
		border: 1px solid gray;
		text-align: center;
		background-color: #bbb00066;
	}
	.td_title{
		font-weight: bold;
		font-size: x-large;
		}
</style>
</head>
<body>
	<form action="joinProcess.jsp" name="joinform" method="post">
		<table>
			<tr>
				<td colspan="2" class="td_title"> 회원가입 페이지</td>
			</tr>
			
			<tr>
				<td><label for="id"> 아이디 </label></td>
				<td><input type="text" name="id" id="id"></td>
			</tr>
			
			<tr>
				<td><label for="pass"> 비밀번호 </label></td>
				<td><input type="password" name="pass" id="pass"></td>
			</tr>
			
			<tr>
				<td><label for="name"> 이름 </label></td>
				<td><input type="text" name="name" id="name"></td>
			</tr>
			
			<tr>
				<td><label for="age"> 나이 </label></td>
				<td><input type="text" name="age" id="age"></td>
			</tr>
			
			<tr>
				<td><label for="addr"> 주소 </label></td>
				<td><input type="text" name="addr" id="addr"></td>
			</tr>
			
			<tr>
				<td><label for="tel"> 전화 번호 </label></td>
				<td><input type="text" name="tel" id="tel"></td>
			</tr>
			
			<tr>
				<td><label for="gender"> 성별 </label></td>
				<td>
					<input type="radio" name="gender" id="gender1" value="남" checked="checked">남자
					<input type="radio" name="gender" id="gender2" value="여">여자
				</td>
			</tr>
			
			<tr>
				<td><label for="hobby"> 취미 </label></td>
				<td>
					<input type="checkbox" name="hobby" id="hobby" value="축구" checked="checked">축구
					<input type="checkbox" name="hobby" id="hobby" value="농구">농구
					<input type="checkbox" name="hobby" id="hobby" value="배구">배구
				</td>
			</tr>
			
			<tr>
				<td><label for="email"> 이메일 </label></td>
				<td><input type="text" name="email" id="email"></td>
			</tr>
			
			<tr>
				<td colspan="2">
					<a href="javascript:joinform.submit()">회원가입</a>&nbsp;&nbsp;
					<a href="javascript:joinform.reset()">다시작성</a>
				</td>
			</tr>
				
				
				
		</table>
	</form>

</body>
</html>

처음 로그인 화면에서 회원가입을 눌렀을때의 회원가입 페이지를 나타내는 코드이다.

실행하면 아래같이 회원가입 페이지가 출력된다. 

각각의 요소들을 입력한 후 회원가입을 눌러주면  form action으로 연결되어있는 joinProcess로 넘어가게된다.

 

joinProcess.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.* , javax.sql.DataSource, javax.naming.*" %>
<%
	request.setCharacterEncoding("utf-8");

	String id = request.getParameter("id");
	String pass = request.getParameter("pass");
	String name = request.getParameter("name");
	int age = Integer.parseInt(request.getParameter("age"));
	String addr = request.getParameter("addr");
	String tel = request.getParameter("tel");
	String gender = request.getParameter("gender");
	String[] hobby = request.getParameterValues("hobby");
	String email = request.getParameter("email");
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	
	String texthobby = "";
	
	
	try{
		Context init = new InitialContext();
		DataSource ds = (DataSource)init.lookup("java:comp/env/jdbc/OracleDB");
		
		conn = ds.getConnection();

		for(int i = 0; i < hobby.length;i++){
			texthobby += hobby[i];
			
			if(i < hobby.length-1){
				texthobby += ", ";
			}
	
		}
		
		pstmt = conn.prepareStatement("INSERT INTO member_2 VALUES(?,?,?,?,?,?,?,?,?)");
		pstmt.setString(1, id);
		pstmt.setString(2, pass);
		pstmt.setString(3,name);
		pstmt.setInt(4, age);
		pstmt.setString(5, addr);
		pstmt.setString(6, tel);
		pstmt.setString(7, gender);
		pstmt.setString(8, texthobby);
		pstmt.setString(9, email);
		
		
		
		int result = pstmt.executeUpdate();
		
		if(result != 0){
			
			out.println("<script>");
			out.println("location.href='loginForm.jsp'");
			out.println("</script>");
		}
		else{
			out.println("<script>");
			out.println("location.href='joinForm.jsp'");
			out.println("</script>");
		}
	}catch(Exception e){
		e.printStackTrace();
	}finally{
		try{
			pstmt.close();
			conn.close();
		}catch(Exception e){
			e.printStackTrace();
		}
	}
		

%>

위의 회원가입에서 받아온 데이터들을 커넥션 풀을 이용하여 오라클 DB 로 연동시킨후 저장한다.

 

hobby는 위의 joinform.jsp 페이지에서  checkbox형태로  받아왔기때문에 여러개의 값이 들어올수 있으므로 

String[] hobby = request.getParameterValues("hobby");   이처럼 배열로 변수 선언을해준후 values 로 값을 받아서 저장해준다. 그후 변수 texthobby 를 선언해주고 texthobby 에  hobby 배열 값을 for 문을 통해서 각각 넣어준다. 

그후에는 나머지와 동일하게 값을 데이터베이스로 전달해주었다.

 

 

loginProcess.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.* , javax.sql.DataSource, javax.naming.*" %>

<%
	request.setCharacterEncoding("utf-8");

	String id = request.getParameter("id");
	String pass = request.getParameter("pass");
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rss = null;
	
	try{
		Context init = new InitialContext();
		DataSource ds = (DataSource)init.lookup("java:comp/env/jdbc/OracleDB");
		conn = ds.getConnection();
		
		pstmt = conn.prepareStatement("SELECT * FROM member_2 WHERE id = ?");
		pstmt.setString(1,id);
		
		rss = pstmt.executeQuery();
		
		if(rss.next()){
			if(pass.equals(rss.getString("password"))){       //  rss.getString 은 입력받은 비밀번호 값이고   앞에 pass는 db에 들어있는 비밀번호값이다.
				session.setAttribute("id",id);
				
				out.println("<script>");
				out.println("location.href='main.jsp' ");
				out.println("</script>");
			}
		}
		
		out.println("<script>");
		out.println("location.href='loginForm.jsp' ");
		out.println("</script>");
		
	}catch(Exception e){
		e.printStackTrace();
		
	}finally
	{
		try{
			rss.close();
			pstmt.close();
			conn.close();
			
		}catch(Exception e){
			e.printStackTrace();
		}
	}
%>

처음화면에서 회원가입이 되어있는 사용자를 로그인하면 DB와 연결후 아이디값과 비밀번호 값이 일치하다면 로그인된다면 main.jsp로 넘어가게된다.

 

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String id=null;

	if(session.getAttribute("id")!=null){
		id=(String)session.getAttribute("id");
	}else{
		out.println("<script>");
		out.println("location.href='loginForm.jsp'");
		out.println("</script>");
	}
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원관리 시스템 메인 페이지</title>
</head>
<body>
<h3><%=id %> 로 로그인 하셨습니다.</h3>
<% if(id.equals("admin")){ %>
<a href="member_list.jsp"> 관리자 모드 접속(회원 목록 보기)</a>
<% } %>
</body>
</html>

위의 loginProcess.jsp 페이지에서 아이디와 비밀번호가 일치하는지 확인후 일치하다면 이처럼  로그인되었다는 화면이 출력된다. 

여기서 admin으로 로그인이 되었다면  member_list.jsp 페이지로 연결되어있는 관리자 모드 접속 창이 표시된다.

 

member_list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.* , javax.sql.DataSource, javax.naming.*" %>
<%
	String id = null;
	
	if((session.getAttribute("id")==null) || (!((String)session.getAttribute("id")).equals("admin"))){
		out.println("<script>");
		out.println("location.href='loginForm.jsp'");
		out.println("</script>");
	}
	
	Connection conn=null;
	PreparedStatement pstmt=null;
	ResultSet rs = null;
	try{
			Context init = new InitialContext();
			DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/OracleDB");
			conn = ds.getConnection();
			
			pstmt=conn.prepareStatement("SELECT * FROM member_2");
			rs=pstmt.executeQuery();
	}catch(Exception e){
		e.printStackTrace();
	}
		
			
%>    
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원관리 시스템 관리자모드 (회원 목록 보기)</title>
<style>
	table{
		margin : auto;
		width : 400px;
		border : 1px solid gray;
		text-align : center;
	}
	.td_title{
		font-weight : bold;
		font-size : x-large;
	}
</style>
</head>
<body>
<table>
	<tr><td colspan=2 class="td_title">회원 목록 </td></tr>
	<% while(rs.next()){ %>
	<tr>
		<td>
			<a href="member_info.jsp?id=<%=rs.getString("id") %>">
				<%=rs.getString("id") %>
			</a>
		</td>
		<td>
			<a href="member_delete.jsp?id=<%=rs.getString("id") %>">삭제</a>
		</td>
	</tr>
	<%} %>
</table>

</body>
</html>

위에서 관리자 모드를 클릭하게되면 회원목록이 실행되어서 표현이 된다.

 

member_info.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.* , javax.sql.DataSource, javax.naming.*" %>

<%
	String id = null;
	
	if((session.getAttribute("id") == null) || (!((String) session.getAttribute("id")).equals("admin"))){
		out.println("<script>");
		out.println("location.href='loginForm.jsp' ");
		out.println("</script>");
	}
	String info_id = request.getParameter("id");
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rss = null;
	
	try{
		Context init = new InitialContext();
		DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/OracleDB");
		
		conn = ds.getConnection();
		
		pstmt = conn.prepareStatement("SELECT * FROM member_2 WHERE id=?");
		pstmt.setString(1, info_id);
		
		rss = pstmt.executeQuery();
		
		rss.next();
	}catch(Exception e){
		e.printStackTrace();
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 관리 시스템 (회원 정보 보기)</title>
<style type="text/css">
table{
	margin : auto;
	width : 400px;
	border : 1px solid gray;
	text-align : center;
	
}
</style>
</head>
<body>
	<table>
		<tr>
			<td>아이디 : </td>
			<td><%=rss.getString("id")%></td>
		</tr>
			<tr>
		<td>비밀번호 : </td>
			<td><%=rss.getString("password")%></td>
		</tr>
		<tr>
			<td>이름 : </td>
			<td><%=rss.getString("name")%></td>
		</tr>
		<tr>
			<td>나이 : </td>
			<td><%=rss.getInt("age")%></td>
		</tr>
		<tr>
			<td>주소 : </td>
			<td><%=rss.getString("addr")%></td>
		</tr>
		<tr>
			<td>전화 번호 : </td>
			<td><%=rss.getString("tel")%></td>
		</tr>
	
		
		<tr>
			<td>성별 : </td>
			<td><%=rss.getString("gender")%></td>
		</tr>
		
		<tr>
			<td>취미 : </td>
			<td><%=rss.getString("hobby")%></td>
		</tr>
		
	
		<tr>
			<td>이메일 : </td>
			<td><%=rss.getString("email")%></td>
		</tr>
		
		<tr>
			<td colspan="2"><a href="member_list.jsp"> 리스트로 돌아감 </a></td>
		</tr>
		
											
	</table>
	<%
		rss.close();
	%>

</body>
</html>

위에 회원목록에서 회원을 클릭하게되면 이처럼 출력하게된다.

 

pstmt = conn.prepareStatement("SELECT * FROM member_2 WHERE id=?");
pstmt.setString(1, info_id);

 

위코드로 PreparedStatement 에  저장되어있는 id의 값을 데이터베이스에서 가져와서 

 

각각을 ResultSet  getString  ( rss.getString )으로 출력한 모습이다.

 

 

member_delete.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.* , javax.sql.DataSource, javax.naming.*" %>
<%
	if((session.getAttribute("id") == null) || (!((String) session.getAttribute("id")).equals("admin"))){
		out.println("<script>");
		out.println("location.href='loginForm.jsp' ");
		out.println("</script>");
	}
	String delete_id = request.getParameter("id");

	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rss = null;
	
	try{
		Context init = new InitialContext();
		DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/OracleDB");
		
		conn = ds.getConnection();
		
		pstmt = conn.prepareStatement("DELETE FROM member_2 WHERE id = ?");
		pstmt.setString(1, delete_id);
		
		int count = pstmt.executeUpdate();
		
		if(count > 0){
			System.out.println("삭제 되었습니다.");
		}
		else{
			System.out.println("삭제되지 않았습니다.(레코드가 존재하지 않습니다.)");
		}
		out.println("<script>");
		out.println("location.href='member_list.jsp'");
		out.println("</script>");
	}catch(Exception e){
		e.printStackTrace();
	}finally{
		try{
			pstmt.close();
			conn.close();
			
		}catch(Exception e){
			e.printStackTrace();
		}
	}
%>

위에서 삭제를 눌렀을때를 처리하기위한 코드페이지이다.  삭제를 누르면  delete 쿼리문을 연결해서 해당 아이디와  맞는 데이터를 삭제한다.

 

위에서부터 계속해서

if((session.getAttribute("id") == null) || (!((String) session.getAttribute("id")).equals("admin")))

이 코드로 session에 들어있는 id값을 비교해주는 이유는  session에 들어있는 값은 tomcat에서 기본적으로 30분이 설정되어있기 때문에  30분이 지났을경우 다시 값이 있는지 비교해서 없다면 첫화면으로 돌아가려는 의미이다.  ( session 값 유지시간은 설정이 따로 가능하다 tomcat 에서 기본은 30분 )

 

예시로 은행어플을 들어갔을때  로그인후 보통 30분 정도 아무행동을 취하지않으면 자동로그아웃이 되는데 

session을 이용한것으로 이해할수있다. 자동으로 로그아웃 시킴으로써 보안성을 높일수 있다.

저작자표시 (새창열림)

'국비 과정 > JSP' 카테고리의 다른 글

국비 - 1018 ( JSTL 파일 올리기 )  (0) 2022.10.18
국비 - 1017 ( 게시판 폼 만들기 )  (0) 2022.10.17
국비 - ( JSP MVC 패턴 )  (4) 2022.10.12
국비 - 1011 ( javabeans , template )  (2) 2022.10.11
국비 - 1006 ( response , page context , 액션태그)  (0) 2022.10.06

관련글

티스토리툴바