[JSP] 로그인, 회원 가입 및 회원 관리

📌member 테이블 구현

📌구현해야 할 JSP 페이지

로그인

loginForm.jsp	로그인 하기 위한 페이지
loginProcess.jsp	로그인을 실제로 처리하는 페이지

회원가입

joinForm.jsp	회원 가입을 위한 페이지
joinProcess.jsp	회원 가입을 실제로 처리하는 페이지

메인 페이지

main.jsp

로그인 후 main 페이지

회원 관리(관리자) 페이지

memberList.jsp	회원 목록 페이지
memberInfo.jsp	회원 정보 페이지
memberDelete.jsp	회원 삭제 페이지

원래 실제로 일을 처리하는 페이지인 XXXProcess.jsp들은 jsp 파일로 생성하지 않고 Servlet 파일로 생성하지만 여기선 JSP 파일로만 구현해보도록 하겠다.

📌로그인

loginForm.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"%>
<html>
<head>
<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>
<form name="loginform" action="loginProcess.jsp" method="post">
<table>
	<tr>
		<td colspan="2" class = "td_title">
			로그인 페이지
		</td>
	</tr>
	<tr>
		<td style="text-align : right"><label style= "font-weight: bold" for = "id">아이디 : </label></td>
		<td><input type="text" name="id" id = "id"/></td>
	</tr>
	<tr>
		<td style="text-align : right"><label style= "font-weight: bold" 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>

36: 로그인 링크를 클릭하면 javascript를 사용하여 loginform 객체의 submit() 메소드를 호출하여 loginProcess.jsp 페이지로 보낸다. 이와 같이 명령어 말고 <input type="submit" value="로그인"> 로 작성하는 것도 물론 가능하다.

loginProcess.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="javax.sql.*" %>
<%@ page import="javax.naming.*" %>
<%
	String id=request.getParameter("id");
	String pass=request.getParameter("pass");
	
	Connection conn=null;
	PreparedStatement pstmt=null;
	ResultSet rs=null;
	
	String driver = "com.mysql.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/testDB";
	String sql = "SELECT * FROM member WHERE id=?";
	
	try {
		Class.forName(driver);
		conn=DriverManager.getConnection(url,"아이디","비밀번호");
		pstmt=conn.prepareStatement(sql);
		
  		pstmt.setString(1,id);
  		rs=pstmt.executeQuery();
  		
  		if(rs.next()){
  			if(pass.equals(rs.getString("password"))){
  				session.setAttribute("id",id); //session 영역에 "id"라는 이름의 속성 값을 생성
  				out.println("<script>");
  		  		out.println("location.href='main.jsp'");
  		  		out.println("</script>");
  			}
  		}
  		//로그인에 실패할 경우 "loginForm.jsp" 페이지로 이동한다.
  		out.println("<script>");
  		out.println("location.href='loginForm.jsp'");
  		out.println("</script>");
	}catch(Exception e){
		e.printStackTrace();
 	}finally{
 		try{
 			rs.close();
 			pstmt.close();
 			conn.close();
 		}
 		catch(Exception e){
 			e.printStackTrace();
 		}
 	}
%>

📌회원 가입

joinForm.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title>회원관리 시스템 회원가입 페이지</title>
<style>
	table{
		margin : auto;
		width : 400px;
		border : 1px solid gray;
		text-align: center;
	}
	.td_title{
		font-weight: bold;
		font-size: x-large;
	}
	.td_align{
		font-weight: bold;
		text-align: right;
	}
</style>
</head>
<body>
<form name="joinform" action="joinProcess.jsp" method="post">
<table border=1>
	<tr>
		<td colspan="2" class = "td_title">
			회원가입 페이지
		</td>
	</tr>
	<tr>
		<td class = "td_align"><label for = "id">아이디  </label></td>
		<td><input type="text" name="id" id = "id"/></td>
	</tr>
	<tr>
		<td class = "td_align"><label for = "pass">비밀번호  </label></td>
		<td><input type="password" name="pass" id = "pass"/></td>
	</tr>
	<tr>
		<td class = "td_align"><label for = "name">이름  </label></td>
		<td><input type="text" name="name" id = "name"/></td>
	</tr>
	<tr>
		<td class = "td_align"><label for = "age">나이  </label></td>
		<td><input type="text" name="age" id = "age"/>
		</td>
	</tr>
	<tr>
		<td class = "td_align"><label for = "male"></label>성별  </td>
		<td>
			<input type="radio" name="gender" value="남" checked id = "male"/>남자
			<input type="radio" name="gender" value="여" id = "female"/>여자
		</td>
	</tr>
	<tr>
		<td class = "td_align"><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>

joinProcess.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="javax.sql.*" %>
<%@ page import="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 gender=request.getParameter("gender");
	String email=request.getParameter("email");
	
	Connection conn=null;
	PreparedStatement pstmt=null;
	
	String driver = "com.mysql.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/testDB";
	String sql = "INSERT INTO member VALUES (?,?,?,?,?,?)";
	
	try {
  		Class.forName(driver);
  		conn=DriverManager.getConnection(url,"아이디","비밀번호");
  		pstmt=conn.prepareStatement(sql);
  		
  		pstmt.setString(1,id);
  		pstmt.setString(2,pass);
  		pstmt.setString(3,name);
  		pstmt.setInt(4,age);
  		pstmt.setString(5,gender);
  		pstmt.setString(6,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();
 		}
 	}
%>

📌메인 페이지

main.jsp

 <!-- 관리자 메인 페이지(main.jsp) -->
<%@ page language="java" contentType="text/html; charset=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>");
	}
%>
<html>
<head>
<title>회원관리 시스템 메인 페이지</title>
</head>
<body>
<h3><%=id %> 로 로그인하셨습니다.</h3>
<%if(id.equals("admin")){%>  <!-- 관리자 id: admin -->
<a href="memberList.jsp">관리자모드 접속(회원 목록 보기)</a>
<%}%>
</body>
</html>

📌회원 관리(관리자) 페이지

memberList.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="javax.sql.*" %>
<%@ page import="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;
	
	String driver = "com.mysql.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/testDB";
	String sql = "SELECT * FROM member";
	
	try {
			Class.forName(driver);	
			conn=DriverManager.getConnection(url,"아이디","비밀번호");
 
			pstmt=conn.prepareStatement(sql);
			rs=pstmt.executeQuery();
			
	}catch(Exception e){
		e.printStackTrace();
	}
 
%>
<html>
<head>
<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 border=1>
	<tr><td colspan=4 class="td_title">회원 목록</td></tr>
	<%int cnt=0; 
	  while(rs.next()){ 
		
		cnt+=1; %>
	<tr>
		<td>
		    <%=cnt%>
		</td>
		<td>
			<%=rs.getString("id") %>
		</td>
		<td>
			<a href="memberInfo.jsp?id=<%=rs.getString("id") %>">
				보기
			</a>
		</td>
		<td>
		    <a href="memberDelete.jsp?id=<%=rs.getString("id") %>">삭제</a>
		</td>
	</tr>
	<%} %>
</table>
</body>
</html>

memberInfo.jsp

 <%@ page language="java" contentType="text/html; charset=EUC-KR"%>
<%@ page import="java.sql.*"%>
<%@ page import="javax.sql.*" %>
<%@ page import="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 rs=null;
	
	String driver = "com.mysql.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/testDB";
	String sql = "SELECT * FROM member WHERE id=?";
	
	try {
			Class.forName(driver);
			conn=DriverManager.getConnection(url,"아이디","비밀번호");
 
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1,info_id);
			rs=pstmt.executeQuery();
			rs.next();
	}catch(Exception e){
		e.printStackTrace();
	}
%>
<html>
<head>
<title>회원관리 시스템 관리자모드(회원 정보 보기)</title>
<style>
	table{
		margin : auto;
		width : 400px;
		border : 1px solid gray;
		text-align: center;
	}
</style>
</head>
<body>
<table border=1>
	<tr>
		<td>아이디  </td>
		<td><%=rs.getString("id") %></td>
	</tr>
	<tr>
		<td>비밀번호  </td>
		<td><%=rs.getString("password") %></td>
	</tr>
	<tr>
		<td>이름  </td>
		<td><%=rs.getString("name") %></td>
	</tr>
	<tr>
		<td>나이  </td><td><%=rs.getString("age") %></td>
	</tr>
	<tr>
		<td>성별  </td><td><%=rs.getString("gender") %></td>
	</tr>
	<tr>
		<td>이메일 주소  </td>
		<td><%=rs.getString("email") %></td>
	</tr>
	<tr>
		<td colspan=2><a href="memberDelete.jsp?id=<%=rs.getString("id") %>">삭제</a></td>
	</tr>
	<tr>
		<td colspan=2><a href="memberList.jsp">리스트로 돌아가기</a></td>
	</tr>
</table>
</body>
</html>

memberDelete.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="javax.sql.*" %>
<%@ page import="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 delete_id=request.getParameter("id");
	
	Connection conn=null;
	PreparedStatement pstmt=null;
	
	String driver = "com.mysql.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/testDB";
	String sql = "DELETE FROM member WHERE id=?";
	
	try {
			Class.forName(driver);
			conn=DriverManager.getConnection(url,"아이디","비밀번호");
			
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1,delete_id);
			pstmt.executeUpdate();
			
			out.println("<script>");
			out.println("location.href='memberList.jsp'");
			out.println("</script>");
	}catch(Exception e){
		e.printStackTrace();
	}finally{
		try{
			pstmt.close();
			conn.close();
		}
		catch(Exception e){
			e.printStackTrace();
		}
	}
%>

📌결과

guest 삭제 후

'JSP & Servlet > 실습' 카테고리의 다른 글

[JSP & Servlet] 게시판 만들기 (feat. MySQL) - DAO(Data Access Object) (0)	2022.06.27
[JSP & Servlet] 게시판 만들기 (feat. MySQL) - Service 클래스 (0)	2022.06.27
[JSP & Servlet] 게시판 만들기 (feat. MySQL) - Action 클래스 (0)	2022.06.26
[JSP & Servlet] 게시판 만들기 (feat. MySQL) - Controller 클래스 (0)	2022.06.26
[JSP & Servlet] 게시판 만들기 (feat. MySQL) - 테이블 생성 및 vo(Value Object) (0)	2022.06.26

📌member 테이블 구현
📌구현해야 할 JSP 페이지
📌로그인
📌회원 가입
📌메인 페이지
📌회원 관리(관리자) 페이지
📌결과

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[JSP] 로그인, 회원 가입 및 회원 관리

📌member 테이블 구현

📌구현해야 할 JSP 페이지

📌로그인

📌회원 가입

📌메인 페이지

📌회원 관리(관리자) 페이지

📌결과

'JSP & Servlet > 실습' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<%@ page language="java" contentType="text/html; charset=UTF-8"%>
	<html>
	<head>
	<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>
	<form name="loginform" action="loginProcess.jsp" method="post">
	<table>
	<tr>
	<td colspan="2" class = "td_title">
	로그인 페이지
	</td>
	</tr>
	<tr>
	<td style="text-align : right"><label style= "font-weight: bold" for = "id">아이디 : </label></td>
	<td><input type="text" name="id" id = "id"/></td>
	</tr>
	<tr>
	<td style="text-align : right"><label style= "font-weight: bold" for = "pass">비밀번호 : </label></td>
	<td><input type="password" name="pass" id = "pass"/></td>
	</tr>
	<tr>
	<td colspan="2">
	<a href="javascript:loginform.submit()">로그인</a>
	<a href="joinForm.jsp">회원가입</a>
	</td>
	</tr>
	</table>
	</form>
	</body>
	</html>

	<%@ page language="java" contentType="text/html; charset=UTF-8"%>
	<%@ page import="java.sql.*"%>
	<%@ page import="javax.sql.*" %>
	<%@ page import="javax.naming.*" %>
	<%
	String id=request.getParameter("id");
	String pass=request.getParameter("pass");

	Connection conn=null;
	PreparedStatement pstmt=null;
	ResultSet rs=null;

	String driver = "com.mysql.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/testDB";
	String sql = "SELECT * FROM member WHERE id=?";

	try {
	Class.forName(driver);
	conn=DriverManager.getConnection(url,"아이디","비밀번호");
	pstmt=conn.prepareStatement(sql);

	pstmt.setString(1,id);
	rs=pstmt.executeQuery();

	if(rs.next()){
	if(pass.equals(rs.getString("password"))){
	session.setAttribute("id",id); //session 영역에 "id"라는 이름의 속성 값을 생성
	out.println("<script>");
	out.println("location.href='main.jsp'");
	out.println("</script>");
	}
	}
	//로그인에 실패할 경우 "loginForm.jsp" 페이지로 이동한다.
	out.println("<script>");
	out.println("location.href='loginForm.jsp'");
	out.println("</script>");
	}catch(Exception e){
	e.printStackTrace();
	}finally{
	try{
	rs.close();
	pstmt.close();
	conn.close();
	}
	catch(Exception e){
	e.printStackTrace();
	}
	}
	%>

	<!-- 관리자 메인 페이지(main.jsp) -->
	<%@ page language="java" contentType="text/html; charset=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>");
	}
	%>
	<html>
	<head>
	<title>회원관리 시스템 메인 페이지</title>
	</head>
	<body>
	<h3><%=id %> 로 로그인하셨습니다.</h3>
	<%if(id.equals("admin")){%> <!-- 관리자 id: admin -->
	<a href="memberList.jsp">관리자모드 접속(회원 목록 보기)</a>
	<%}%>
	</body>
	</html>