본문 바로가기
웹 개발/다이어리 프로젝트(개인)

jsp로 crud를 사용한 다이어리 만들기(3)-로그아웃,일기쓰기

osy9907 2024. 3. 25. 12:48
728x90

 

 

20240322 jsp로 crud를 사용한 다이어리 만들기(2)

필요하다고 생각한 jsp파일들을 미리 폴더를 만들어 생성해놨다. logoutAction은 login과 같이 폴더를 묶어놨다. checkDateAction은 일기를 작성하고자 하는 날을 체크하기 위해 만든 것이다. 처음으로 logi

broad-backend.tistory.com

 

이전글에 이어 로그인을 성공하면 diaryListOfMonth로 이동하게 만들었다.

그리고 loginForm, loginAction는 my_session을 ON일때 분기하였지만

그 외의 페이지부터는 my_session이 OFF일때는 loginForm.jsp로 먼저 이동하도록 구현했다.

 

로그인 안하고 페이지 접근할 떄

 

 

다시 본론으로 돌아와서

현재는 로그아웃 버튼과 글쓰기 버튼만 구현해놓은 상태이다.

diaryListOfMonth

로그아웃을 누르게되면 logoutAction.jsp로 이동하며 logoutAction.jsp에서는 my_session이 OFF로, off_date(로그아웃한 날짜)를 NOW()로 변경시키는 쿼리를 실행했다.

 

logoutAction도 마찬가지로 my_session이 ON일 경우 diaryListOfMonth(이하 달력)으로 이동시킨다

로그아웃에 성공하게 되면 loginForm.jsp로 redirect하게 된다.

 

로그아웃 클릭 후

logoutAction.jsp

<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
	/*
		로그아웃 -> [DB]diary.login.my_session -> 'OFF'으로 변경 해야한다. & loginForm으로 redirect해줘야 함.
	*/

	// 로그인(인증) 분기
	// [DB] diary.login.my_session -> 'OFF'[로그아웃이 되어있을 경우] -> redirect("loginForm.jsp")
	
	// DB 연결 및 초기화
	Class.forName("org.mariadb.jdbc.Driver");
	Connection conn = null;
	conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3307/diary", "root", "****");
	
	// mySession 값을 가져오는 SQL 쿼리 실행
	String getMySessionSql = "SELECT my_session AS mySession FROM login";
	PreparedStatement getMySessionStmt = null;
	ResultSet getMySessionRs = null;
	getMySessionStmt = conn.prepareStatement(getMySessionSql);
	getMySessionRs = getMySessionStmt.executeQuery();
	
	// mySession 값
	String mySession = null;
	if(getMySessionRs.next()) {
		mySession = getMySessionRs.getString("mySession");
	}
	System.out.println("diaryListOfMonth - mySession = " + mySession);	// mySession 값 확인
	
	// mySession이 OFF일 경우(로그아웃 상태)
	if(mySession.equals("OFF")) {
		String errMsg = URLEncoder.encode("잘못된 접근입니다. 로그인 먼저 해주세요.", "UTF-8");
		response.sendRedirect("/diary/login/loginForm.jsp?errMsg=" + errMsg);
		
		// DB 반납
		getMySessionRs.close();
		getMySessionStmt.close();
		conn.close();
		
		return ;	// 코드의 진행을 끝 낼때 사용
	}
	
	// my_session 값을 OFF로 바꾸는 SQL 쿼리	
	String logoutMySessionSql = "UPDATE login SET my_session = 'OFF', off_date = NOW() WHERE my_session = 'ON'";
	PreparedStatement logoutMySessionStmt = null;
	logoutMySessionStmt = conn.prepareStatement(logoutMySessionSql);
	
	int row = logoutMySessionStmt.executeUpdate();
	System.out.println("logoutMySessionStmt - row = " + row);
	
	response.sendRedirect("/diary/login/loginForm.jsp");
%>

 

일기를 저장하는 [DB]를 diary.diary이고

diary_date(일기 작성하는 날짜), title(제목), weather(그 날의 날씨), content(일기 내용), update_date(수정 시간), create_date(작성 날짜)가 테이블의 data이다. 

 

diary.diary[DB]

 

글쓰기 버튼을 누르면 addDiaryForm.jsp로 이동하며 일기를 쓸 수 있는데

상단에는 달력으로 돌아갈 수 있게 달력버튼을 구현해놨다.

 

달력버튼의 아래에는

작성이 가능한 날짜인지 확인할 수 있는 날짜확인과 버튼이있고

아래에 날짜, 제목, 날씨, 일기내용을 작성할 수 있도록 form을 구현했다.

 

날짜 확인은 form을 따로 만들어 원하는 날짜를 선택하고 작성가능확인 버튼을 누르면 checkDateAction.jsp로 이동해 해당 jsp에서 [DB]diary.diary와 연결해 작성이 가능한지 확인할 수 있게 만들었다.

 

 

날짜확인에서 날짜를 선택하고 작성가능확인 버튼을 누르면

작성가능한 날짜면 아래의 날짜: 칸에 해당 날짜가 들어올 것이고, 그렇지 않다면 아무것도 들어오지 않는다.

 

선택한 날짜가 들어갈 checkDate 변수와 일기를 작성가능한지 알려주는 write변수를 선언한다.

 

checkDate값은 이후 날짜가능확인을 눌렀을 때 checkDateAction.jsp에 갔다가 다시 올 값이다.

if문으로 checkDate가 null일때 공백으로 바꿔준다(일기쓰기 폼에서 날짜: 부분에 checkDate값을 넣을건데 null이면 null이라고 보이기때문)

 

그리고 checkDate가 이미 DB에 있는 날짜이거나 아무것도 선택하지 않았다면 write값을 N으로, 작성가능하다면 Y로 요청값을 받아 날짜: 옆에 메시지를 보여줄 수 있도록 했다.

 

날짜를 확인하고 해당 일기의 형식에 맞게 글을 쓰고 작성완료를 누르면 addDiaryAction.jsp로 넘어가게 된다.

addDiaryForm.jsp

<%@page import="java.sql.*"%>
<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
	//로그인(인증) 분기
	// [DB] diary.login.my_session -> 'OFF'[로그아웃이 되어있을 경우] -> redirect("loginForm.jsp")
	
	// DB 연결 및 초기화
	Class.forName("org.mariadb.jdbc.Driver");
	Connection conn = null;
	conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3307/diary", "root", "****");
	
	// mySession 값을 가져오는 SQL 쿼리 실행
	String getMySessionSql = "SELECT my_session AS mySession FROM login";
	PreparedStatement getMySessionStmt = null;
	ResultSet getMySessionRs = null;
	getMySessionStmt = conn.prepareStatement(getMySessionSql);
	getMySessionRs = getMySessionStmt.executeQuery();
	
	// mySession 값
	String mySession = null;
	if(getMySessionRs.next()) {
		mySession = getMySessionRs.getString("mySession");
	}
	System.out.println("diaryListOfMonth - mySession = " + mySession);	// mySession 값 확인
	
	// mySession이 OFF일 경우(로그아웃 상태)
	if(mySession.equals("OFF")) {
		String errMsg = URLEncoder.encode("잘못된 접근입니다. 로그인 먼저 해주세요.", "UTF-8");
		response.sendRedirect("/diary/login/loginForm.jsp?errMsg=" + errMsg);
		
		// DB 반납
		getMySessionRs.close();
		getMySessionStmt.close();
		conn.close();
		
		return ;	// 코드의 진행을 끝 낼때 사용
	}
%>

<%
	// 요청 값 확인
	
	// 어떤 날짜가 선택 됐는지
	String checkDate = request.getParameter("checkDate");
	if(checkDate == null) {
		checkDate = "";
	}
	// 선택된 날짜에 일기를 작성 가능한지
	String write = request.getParameter("write");
	if(write == null) {
		write = "";
	}
	
	// 작성이 가능한지 불가능한 날짜인지 알려주는 메시지를 출력
	String writeMsg = "";
	if(write.equals("Y")) {
		writeMsg = "작성 가능한 날짜 입니다.";
	} else if(write.equals("N")){
		writeMsg = "작성 불가능한 날짜 입니다.";
	}
	
	String errMsg = request.getParameter("errMsg");
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>addDiaryForm</title>
</head>
<body>
	<div>
	<%
		if(errMsg != null) {
	%>
			<%=errMsg%>
	<%
		}
	%>
	</div>

	<div>
		<form action="/diary/diaryListOfMonth.jsp">
			<button type="submit">달력</button>
		</form>
	</div>

	<h1>일기 쓰기</h1>
	
	<form action="/diary/checkDateAction.jsp" method="post">
	
		<div>
			날짜확인 : <input type="date" name="checkDate">
			<span><%=writeMsg%></span>
		</div>
		
		<div>
			<button type="submit">작성 가능 확인</button>
		</div>
		
	</form>
	
	<form action="/diary/add/addDiaryAction.jsp" method="post">
	
		<div>
			날짜 : 
			<%
				if(write.equals("Y")) {
			%>
					<input value="<%=checkDate%>" type="text" name="diaryDate" readonly="readonly">
			<%
				} else {
			%>
					<input type="text" name="diaryDate" readonly="readonly">
			<%
				}
			%>
			
		</div>
		
		<div>
			제목 : <input type="text" name="title">
		</div>
		
		<div>
			<select name="weather">
				<option value="맑음">맑음</option>
				<option value="흐림">흐림</option>
				<option value="비">비</option>
				<option value="눈">눈</option>
			</select>
		</div>
		
		<div>
			<textarea rows="5" cols="50" name="content"></textarea>	
		</div>
		
		<button type="submit">작성완료</button>
		
	</form>
	
</body>
</html>

addDiaryForm에서 checkDate를 받아와 [DB]diary.diary 테이블의 diary_date값을 비교한다.

아무것도 입력하지 않았을 경우와 해당 날짜가 있을경우 checkDate와 write값을 N으로 addDiaryForm.jsp로 redirect하고

작성 가능하다면 checkDate와 write값을 Y으로 addDiaryForm.jsp로 redirect한다.

 

checkDateAction.jsp

<%@page import="java.sql.*"%>
<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
//로그인(인증) 분기
	// [DB] diary.login.my_session -> 'OFF'[로그아웃이 되어있을 경우] -> redirect("loginForm.jsp")
	
	// DB 연결 및 초기화
	Class.forName("org.mariadb.jdbc.Driver");
	Connection conn = null;
	conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3307/diary", "root", "****");
	
	// mySession 값을 가져오는 SQL 쿼리 실행
	String getMySessionSql = "SELECT my_session AS mySession FROM login";
	PreparedStatement getMySessionStmt = null;
	ResultSet getMySessionRs = null;
	getMySessionStmt = conn.prepareStatement(getMySessionSql);
	getMySessionRs = getMySessionStmt.executeQuery();
	
	// mySession 값
	String mySession = null;
	if(getMySessionRs.next()) {
		mySession = getMySessionRs.getString("mySession");
	}
	System.out.println("diaryListOfMonth - mySession = " + mySession);	// mySession 값 확인
	
	// mySession이 OFF일 경우(로그아웃 상태)
	if(mySession.equals("OFF")) {
		String errMsg = URLEncoder.encode("잘못된 접근입니다. 로그인 먼저 해주세요.", "UTF-8");
		response.sendRedirect("/diary/login/loginForm.jsp?errMsg=" + errMsg);
		
		// DB 반납
		getMySessionRs.close();
		getMySessionStmt.close();
		conn.close();
		
		return ;	// 코드의 진행을 끝 낼때 사용
	}
%>

<%

	// diary테이블에 날짜가 이미 존재하는지 확인하기 -> 존재하지 않아야 글쓰기 가능
	// 요청 값 분석
	String checkDate = request.getParameter("checkDate");
	if(checkDate == null) {
		checkDate = "";
	}
	
	System.out.println("checkDateAction - checkDate = " + checkDate);	// checkDate 값 확인
	
	String checkDateSql = "SELECT diary_date diaryDate from diary where diary_date = ?";
	PreparedStatement checkDateStmt = conn.prepareStatement(checkDateSql);
	checkDateStmt.setString(1, checkDate);
	ResultSet checkDateRs = checkDateStmt.executeQuery();
		
	if(checkDateRs.next()) {
		// 해당 날짜는 일기 작성 불가능(이미 해당 날짜의 일기 존재함)
		response.sendRedirect("/diary/add/addDiaryForm.jsp?checkDate=" + checkDate + "&write=N");
	} else {
		// 아무 날짜도 선택하지 않고 날짜 가능 확인 버튼을 눌렀을 때 작성 불가능
		if(checkDate.equals("")) {
			response.sendRedirect("/diary/add/addDiaryForm.jsp?checkDate=" + checkDate + "&write=N");
		} else {
			// 해당 날짜는 일기 기록 가능
			response.sendRedirect("/diary/add/addDiaryForm.jsp?checkDate=" + checkDate + "&write=Y");
		}
	}
%>

 

작성가능한 날짜
이미 해당날짜에 일기가 있을 경우

 

 

 

 

작성완료를 누르면 addDiaryAction.jsp로 이동한다.

 

diaryDate, title, weather, content를 요청값으로 받아오고 [DB]diary.diary에 INSERT쿼리문을 실행한다.

입력이 성공하면 diaryListOfMonth로 이동하고, 실패하면 다시 일기를 작성하는 페이지로 갈 수 있도록 했다.

그리고 아무것도 입력하지 않고 작성완료를 눌렀다면 errMsg와 함께 일기작성 페이지로 이동하도록 했다.

addDiaryAction.jsp

<%@page import="java.net.URLEncoder"%>
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
	//로그인(인증) 분기
	// [DB] diary.login.my_session -> 'OFF'[로그아웃이 되어있을 경우] -> redirect("loginForm.jsp")
	
	// DB 연결 및 초기화
	Class.forName("org.mariadb.jdbc.Driver");
	Connection conn = null;
	conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3307/diary", "root", "****");
	
	// mySession 값을 가져오는 SQL 쿼리 실행
	String getMySessionSql = "SELECT my_session AS mySession FROM login";
	PreparedStatement getMySessionStmt = null;
	ResultSet getMySessionRs = null;
	getMySessionStmt = conn.prepareStatement(getMySessionSql);
	getMySessionRs = getMySessionStmt.executeQuery();
	
	// mySession 값
	String mySession = null;
	if(getMySessionRs.next()) {
		mySession = getMySessionRs.getString("mySession");
	}
	System.out.println("diaryListOfMonth - mySession = " + mySession);	// mySession 값 확인
	
	// mySession이 OFF일 경우(로그아웃 상태)
	if(mySession.equals("OFF")) {
		String errMsg = URLEncoder.encode("잘못된 접근입니다. 로그인 먼저 해주세요.", "UTF-8");
		response.sendRedirect("/diary/login/loginForm.jsp?errMsg=" + errMsg);
		
		// DB 반납
		getMySessionRs.close();
		getMySessionStmt.close();
		conn.close();
		
		return ;	// 코드의 진행을 끝 낼때 사용
	}
%>

<%
	// 요청값 분석
	String diaryDate = request.getParameter("diaryDate");
	String title = request.getParameter("title");
	String weather = request.getParameter("weather");
	String content = request.getParameter("content");
	
	// 아무것도 입력하지않고 작성완료를 눌렀을 경우
	if(diaryDate.equals("") && title.equals("") && content.equals("")) {
		String errMsg = URLEncoder.encode("일기의 형식에 맞게 작성해주세요", "UTF-8");
		response.sendRedirect("/diary/add/addDiaryForm.jsp?errMsg=" + errMsg);
		
		return ;
	}
	
	System.out.println("addDiaryAction - diaryDate = " + diaryDate);	// diaryDate 값 확인
	System.out.println("addDiaryAction - title = " + title);	// title 값 확인
	System.out.println("addDiaryAction - weather = " + weather);	// weather 값 확인
	System.out.println("addDiaryAction - content = " + content);	// content 값 확인
	
	// [DB] diary.diary에 추가하는 쿼리
	String addDiarySql = "INSERT INTO diary(diary_date, title, weather, content, update_date, create_date) VALUES (?, ?, ?, ?, NOW(), NOW())";
	PreparedStatement addDiaryStmt = null;
	
	addDiaryStmt = conn.prepareStatement(addDiarySql);
	addDiaryStmt.setString(1, diaryDate);	// ? 값 교체
	addDiaryStmt.setString(2, title);	// ? 값 교체
	addDiaryStmt.setString(3, weather);	// ? 값 교체
	addDiaryStmt.setString(4, content);	// ? 값 교체
	System.out.println("addDiaryAction - addDiaryStmt = " + addDiaryStmt);
	
	int row = addDiaryStmt.executeUpdate();
	
	if(row == 1) {
		// 일기 입력 성공
		response.sendRedirect("/diary/diaryListOfMonth.jsp");
	} else {
		// 일기 입력 실패
		response.sendRedirect("/diary/addDiaryForm.jsp");
	}
	
	// DB 자원 반납
	addDiaryStmt.close();
	conn.close();
%>

 

 

아무것도 입력하지않고 작성완료 눌렀을 경우

 

728x90

'웹 개발 > 다이어리 프로젝트(개인)' 카테고리의 다른 글

jsp로 crud를 사용한 다이어리 만들기(6)-일기 삭제  (0) 2024.03.27
jsp로 crud를 사용한 다이어리 만들기(5)-일기 상세 보기  (0) 2024.03.27
jsp로 crud를 사용한 다이어리 만들기(4)-메인 달력 다이어리  (0) 2024.03.27
jsp로 crud를 사용한 다이어리 만들기(2)-로그인  (0) 2024.03.25
jsp로 crud를 사용한 다이어리 만들기(1)  (0) 2024.03.25

'웹 개발/다이어리 프로젝트(개인)' Related Articles

티스토리툴바