[60] 230324 JSP: 회원가입, 로그인, 로그아웃 기능 구현하기 [K-디지털 트레이닝 60일]

Notice

Recent Posts

Recent Comments

Links

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

In Total

관리 메뉴

A Joyful AI Research Journey🌳😊

[60] 230324 JSP: 회원가입, 로그인, 로그아웃 기능 구현하기 [K-디지털 트레이닝 60일] 본문

🌳Bootcamp Revision 2023✨/HTML5, CSS3, JSP

[60] 230324 JSP: 회원가입, 로그인, 로그아웃 기능 구현하기 [K-디지털 트레이닝 60일]

yjyuwisely 2023. 3. 24. 15:33

230324 60th class

진도: 교재가 아닌 자체 수업 (교재: 최범균의 JSP 2.3 웹 프로그래밍: 기초부터 중급까지, 저자: 최범균)
책 예제 코드: https://github.com/madvirus/jsp23
저자 블로그: https://javacan.tistory.com/

최범균의 JSP 2.3 웹 프로그래밍: 기초부터 중급까지 | 최범균 - 교보문고

최범균의 JSP 2.3 웹 프로그래밍: 기초부터 중급까지 | [최범균의 JSP 2.3 웹 프로그래밍 기초부터 중급까지]는 JSP 2.3의 새로운 특징 반영과 JSP를 지원하는 요소인 서블릿과 표현 언어 등의 새로운

product.kyobobook.co.kr

오늘 배운 것 중 기억할 것을 정리했다.

몰랐던 것

Exception is a standard class from which every exceptions inherit.
SQLException is a class that inherits from Exception and that is designed specifically for database(SQL) exceptions.

다시 기억할 것

input 태그를 이용해서 데이터 값을 타이핑하는 형태가 아닌, 단순하게 보이게 하는 방법이다.
뒤에 readonly를 붙이거나,
표현식을 두고 input 태그에 type을 hidden으로 설정한다.

번호: <input type="text" name="no" value="<%=rs.getString("no") %>" readonly> <!-- 첫번째 방법 -->
번호: <%=rs.getInt("no") %> <input type="hidden" name="no" value="<%=rs.getString("no") %>"> <!-- 두번째 방법: hidden 쓴다. -->

2023.03.24 - [🌳K-Digital Revision 2023✨/JSP] - [60] 230324 JSP: 카페 글쓰기 응용 [K-디지털 트레이닝 60일]

이 글의 제일 마지막에 있는 내용인데, 위의 내용을 응용한 것이다.

input type="hidden"으로 input 형태는 숨긴다. 게시판 목록의 작성일과 시간은 MySQL의 값을 출력한다.

<%=session.getAttribute("user_id")%>
<input type="hidden" name="id" value="<%=session.getAttribute("user_id")%>">

1	index.jsp	로그인 성공했을 때 뜨는 페이지
2	insertBoard.jsp	로그인했을 때만 글쓰기 버튼이 나타난다. 로그인했을 때만 글쓰기 버튼이 나타난다.
3	insertBoardServer.jsp
4	InsertMember.jsp	회원가입 양식
5	InsertMemberServer.jsp	회원가입 서버
6	LoginServer.jsp	로그인 서버
7	LogoutServer.jsp	로그아웃 서버
8	modifyBoard.jsp	수정, 삭제 버튼을 추가한다.
9	removeBoard.jsp	게시판 글 삭제하기
10	viewBoardDetail.jsp	수정, 삭제 버튼을 추가한다.
11	viewBoardList.jsp	mySQL의 board 테이블의 DB를 가져온다.
12	viewLoginForm.jsp	로그인 양식, 로그아웃 버튼도 넣는다.
13	viewMemberList.jsp
14	~~viewMemberListbook.jsp~~	책의 예시

회원가입 양식
코드) insertMember.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 양식</title>
</head>
<body>
<form action="insertMemberServer.jsp" method="post"> <!-- post로 해야 비밀번호가 URL에 노출 안 된다. -->
<table>
<tr><td>아이디</td></tr>
<tr><td><input type="text"></td></tr>

<tr><td>비밀번호</td></tr>
<tr><td><input type="password"></td></tr>

<tr><td>이름</td></tr>
<tr><td><input type="text"></td></tr>

<tr><td>생년월일</td></tr>
<tr><td><input type="text" placeholder="년(4자)">
		<select>
			<option>월</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>6</option>
			<option>7</option>
			<option>8</option>
			<option>9</option>
			<option>10</option>
			<option>11</option>
			<option>12</option>
		</select>
		<input type="text" placeholder="일"></td>
		
<tr><td>성별</td></tr>
<tr><td>
		<select>
			<option>성별</option>
			<option>남자</option>
			<option>여자</option>
			<option>선택 안 함</option>
		</select>	
</td></tr>

<tr><td>이메일</td><tr>	
<tr><td><input type="text"></td></tr>

<tr><td>연락처</td><tr>	
<tr><td><input type="text"></td></tr>

<tr><td><input type="submit" value="가입하기"></td><tr>				
</table>
</form>
</body>
</html>

결과)

name is the name that is used when the value is passed (in the URL or in the posted data).
id is used to uniquely identify the element for CSS styling and JavaScript.

2023.02.03 - [💻 Self-Study Revision✨/나의 개발 일지✍🏻] - 🐥[K-디지털 트레이닝 21일~26일] HTML, CSS: 첫 번째 개인 프로젝트 하면서 새로 알게 된 것 모음(1)

MySQL에 아래 코드로 새로운 데이터를 넣는다.

desc member;
insert into member values('abcd12','1234','정자바','20230324','m','abcd@gmail.com','01012345678')

코드) 회원가입 서버 insertMemberServer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>    
<% request.setCharacterEncoding("utf-8"); %> <!-- 한글깨짐 해결 -->    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 서버</title>
</head>
<body>
<%
	//여기서 insert할 것을 넣는다. (아이디, 비밀번호, 이름, 생년월일, 성별, 이메일, 연락처)
	//아이디
	String id = request.getParameter("id");
	//비밀번호
	String password = request.getParameter("password");
	//이름
	String name = request.getParameter("name");
	//생년월일
	String birthday = request.getParameter("year")+request.getParameter("month")+request.getParameter("day"); //연결할 때 concat을 써도 된다.
	//성별
	String gender = request.getParameter("gender");
	//이메일
	String email = request.getParameter("email");
	//연락처
	String phone = request.getParameter("phone");
	
	// 1. JDBC 드라이버 로딩(mysql)
	Class.forName("com.mysql.jdbc.Driver");
	//java api에 db을 연결하기 위한 객체
	Connection conn = null;
	
	//workbench sql을 작성한 후 ctrl+enter(결과도출)
	//sql문장을 작성을 하고, 그 sql문장을 실행하기 위한 객체
	//Statement stmt = null;
	PreparedStatement pstmt = null;
	
	try{
		String jdbcDriver = "jdbc:mysql://localhost:3306/sample?serverTimezone=Asia/Seoul";
		String dbUser = "root";
		String dbPass = "1234";
		
		//2. 데이터베이스 커넥션 생성
		conn = DriverManager.getConnection(jdbcDriver,dbUser,dbPass);
		
		// 여기까지가 DB 연결 코드 
		
		//3. Statement 생성
		//SQL 코드 복사
		String query = "insert into member values(?,?,?,?,?,?,?);"; //물음표(?) 처리로 사용자가 입력한 값을 넣게 된다.
		pstmt = conn.prepareStatement(query);
		pstmt.setString(1, id);//첫번째 물음표에는 id값을 넣어라.
		pstmt.setString(2, password);//2번째 물음표에는 password값을 넣어라.
		pstmt.setString(3, name);//3번째 물음표에는 name값을 넣어라.
		pstmt.setString(4, birthday);//4번째 물음표에는 birthday: year,month,day값을 넣어라.
		pstmt.setString(5, gender);//5번째 물음표에는 gender값을 넣어라.
		pstmt.setString(6, email);//6번째 물음표에는 email값을 넣어라.
		pstmt.setString(7, phone);//7번째 물음표에는 phone값을 넣어라.
			
		//4. 쿼리 실행
		//workbench에서 ctrl+enter(쿼리문장을 실행)를 통해 도출된 select결과를 Resultset에 저장 
		//rs = pstmt.executeQuery();
		pstmt.executeUpdate(); //insert가 정상적으로 처리. insert작업 때 select일 때 executeUpdate()를 사용한다. 나머지는 rs=pstmt.executeQuery();를 쓴다.
		//insert 한 후 게시판 목록 리스트 화면(viewBoardList.jsp)으로 이동하라고 응답한다. 
		response.sendRedirect("viewBoardList.jsp");
		
	}catch(Exception ex){
		System.out.println(ex.getMessage()); //콘솔에 오류 메시지를 띄운다.
		out.println("DB 연결 실패");
	}finally{
		if(conn!=null){conn.close();}
	}	
%>
</body>
</html>

결과)

로그인 화면 및 서버

코드) 로그인 양식 viewLoginForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 화면</title>
</head>
<body>
<form action="LoginServer.jsp">
<table>
	<tr><td>아이디</td>
		<td><input type="text" name="id"></td></tr>	
	<tr><td>비밀번호</td>
		<td><input type="password" name="password"></td></tr>
	<tr><td colspan="2"><input type="submit" value="로그인"></td></tr>

</table>
</form>
</body>
</html>

4행의 MySQL에서 적은 아이디, 비밀번호가 DB에 없다. (null로 뜬다.)

코드) 로그인 서버 LoginServer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>    
<% request.setCharacterEncoding("utf-8"); %> <!-- 한글깨짐 해결 -->    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 서버</title>
</head>
<body>
<%
	//여기서 insert할 것을 넣는다. (아이디, 비밀번호)
	//아이디
	String id = request.getParameter("id");
	//비밀번호
	String password = request.getParameter("password");
	
	// 1. JDBC 드라이버 로딩(mysql)
	Class.forName("com.mysql.jdbc.Driver");
	//java api에 db을 연결하기 위한 객체
	Connection conn = null;
	
	//workbench sql을 작성한 후 ctrl+enter(결과도출)
	//sql문장을 작성을 하고, 그 sql문장을 실행하기 위한 객체
	//Statement stmt = null;
	PreparedStatement pstmt = null;
	
	//select의 결과를 DBMS에서 java로 저장하기 위한 객체
	ResultSet rs = null;
	
	try{
		String jdbcDriver = "jdbc:mysql://localhost:3306/sample?serverTimezone=Asia/Seoul";
		String dbUser = "root";
		String dbPass = "1234";
		
		//2. 데이터베이스 커넥션 생성
		conn = DriverManager.getConnection(jdbcDriver,dbUser,dbPass);
		
		// 여기까지가 DB 연결 코드 
		
		//3. Statement 생성
		//SQL 코드 복사
		String query = "select * from member where id=? and password =?"; //물음표(?) 처리로 사용자가 입력한 값을 넣게 된다.
		pstmt = conn.prepareStatement(query);
		pstmt.setString(1, id);//첫번째 물음표에는 id값을 넣어라.
		pstmt.setString(2, password);//2번째 물음표에는 password값을 넣어라.
			
		//4. 쿼리 실행
		//workbench에서 ctrl+enter(쿼리문장을 실행)를 통해 도출된 select결과를 Resultset에 저장 
		rs = pstmt.executeQuery();
		//pstmt.executeUpdate(); //insert가 정상적으로 처리. insert작업 때 select일 때 executeUpdate()를 사용한다. 나머지는 rs=pstmt.executeQuery();를 쓴다.
		//insert 한 후 게시판 목록 리스트 화면(viewBoardList.jsp)으로 이동하라고 응답한다. 
		//response.sendRedirect("viewBoardList.jsp");
		
		if(rs.next()){//select결과가 1건 있음(로그인해도 됨)
			//session영역의 id변수에 id값을 저장
			session.setAttribute("user_id", id);
			//메인페이지로 이동(index.jsp)
			response.sendRedirect("index.jsp");
		}else{//select결과가 없음(로그인하면 안 됨)
			//회원가입 페이지로 이동
			response.sendRedirect("insertMember.jsp");
		}
		
	}catch(SQLException ex){
		System.out.println(ex.getMessage()); //콘솔에 오류 메시지를 띄운다.
		out.println("DB 연결 실패");
	}finally{
		if(conn!=null){conn.close();}
	}	
%>
</body>
</html>

코드) 로그인 성공했을 때 뜨는 페이지 index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>      
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 성공</title>
</head>
<body>
<%=session.getAttribute("user_id") %>님 어서오세요.
${user_id}님 환영합니다. <!-- 두 코드 다 된다. -->
</body>
</html>

결과)

세션을 죽이려면 모든 브라우저 창을 끈다. 또는 세션의 기본값: 30분이 지나면 세션이 만료된다.

참고: https://cloudstudying.kr/lectures/82#implemetation

수정된 코드) 로그인했을 때만 글쓰기 버튼이 나타난다. insertBoard.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>     
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 글쓰기 테이블</title>
</head>
<body>
<form action = "insertBoardServer.jsp" method="post"> <!-- 글쓰기를 하기 위한 서버.jsp -->
	<table border="1">
		<tr>
			<td>제목</td>
			<td><input type="text" name="title"></td>
		</tr>
		<tr>	
			<td>내용</td>
			<td><textarea rows="10" cols="30" name="content"></textarea></td>
		</tr>
		<tr>
			<td colspan="2"><!-- 좌우의 셀들을 병합한다 (가로로 합침, 가로가 긴 직사각형) -->
			<c:if test="${user_id != null}"> <!-- 로그인 안 하면 글쓰기 버튼이 안 보인다. -->
				<input type="submit" value="글쓰기">
			</c:if>	
			</td>
		</tr>
	</table>
</form>
</body>
</html>

결과) 세션이 만료되었을 때

코드) 로그아웃 버튼도 넣는다. viewLoginForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 화면</title>
</head>
<body>
<form action="LoginServer.jsp">
<table>
	<tr><td>아이디</td>
		<td><input type="text" name="id"></td></tr>	
	<tr><td>비밀번호</td>
		<td><input type="password" name="password"></td></tr>
	<tr><td colspan="2">
	<input type="submit" value="로그인" formaction="LoginServer.jsp">
	<input type="submit" value="로그아웃" formaction="LogOutServer.jsp">
	</td>
</tr>
</table>
</form>
</body>
</html>

코드) 로그아웃 서버 LogOutServer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그아웃 서버</title>
</head>
<body>

<%
	session.invalidate();
%>

</body>
</html>

번외 코드) 게시판 목록에 아이디도 뜨게 한다. insertBoard.jsp
input type="hidden"으로 input 형태는 숨긴다. 게시판 목록의 작성일과 시간은 MySQL의 값을 출력한다.

<%=session.getAttribute("user_id")%>
<input type="hidden" name="id" value="<%=session.getAttribute("user_id")%>">

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>     
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 글쓰기 테이블</title>
</head>
<body>
<form action = "insertBoardServer.jsp" method="post"> <!-- 글쓰기를 하기 위한 서버.jsp -->
	<table border="1">
		<tr>
			<td>아이디</td>
			<td>
				<%=session.getAttribute("user_id")%>
				<input type="hidden" name="id" value="<%=session.getAttribute("user_id")%>"></td>
		</tr>
		<tr>
			<td>제목</td>
			<td><input type="text" name="title"></td>
		</tr>
		<tr>	
			<td>내용</td>
			<td><textarea rows="10" cols="30" name="content"></textarea></td>
		</tr>
		<tr>
			<td colspan="2"><!-- 좌우의 셀들을 병합한다 (가로로 합침, 가로가 긴 직사각형) -->
			<c:if test="${user_id != null}"> <!-- 로그인 안 하면 글쓰기 버튼이 안 보인다. -->
				<input type="submit" value="글쓰기">
			</c:if>	
			</td>
		</tr>
	</table>
</form>
</body>
</html>

게시글 목록에 원래 작성자가 null로 떴었는데 게시글 22번을 보면 작성자의 id인 id1234이 나온다. (게시글 17번의 abcd1234는 MySQL에서 직접 넣은 데이터이다.)

728x90

저작자표시 비영리 동일조건

'🌳Bootcamp Revision 2023✨ > HTML5, CSS3, JSP' 카테고리의 다른 글

[61] 230327 JSP Ch. 18 MVC(Model-View-Controller) 패턴 구현 [K-디지털 트레이닝 61일] (0)	2023.03.27
[60] 230324 JSP: 카페 글쓰기 기능, 게시판 목록 구현하기 [K-디지털 트레이닝 60일] (0)	2023.03.24
*[59] 230323 JSP Ch. 14 데이터베이스 프로그래밍 기초: JSP에서 JDBC(Java DataBase Connectivity) 프로그래밍하기 [K-디지털 트레이닝 59일] SQL (0)	2023.03.23
[58] 230322 JSP Ch. 11 표현 언어(Expression Language), Ch. 12 표준 태그 라이브러리(JSTL), Ch. 13 이클립스를 이용한 웹 개발 [K-디지털 트레이닝 58일] (0)	2023.03.22

'🌳Bootcamp Revision 2023✨/HTML5, CSS3, JSP' Related Articles

Comments

A Joyful AI Research Journey🌳😊

[60] 230324 JSP: 회원가입, 로그인, 로그아웃 기능 구현하기 [K-디지털 트레이닝 60일] 본문

[60] 230324 JSP: 회원가입, 로그인, 로그아웃 기능 구현하기 [K-디지털 트레이닝 60일]

'🌳Bootcamp Revision 2023✨ > HTML5, CSS3, JSP' 카테고리의 다른 글

티스토리툴바