728x90
jsp로 crud를 사용한 다이어리 만들기(6)
jsp로 crud를 사용한 다이어리 만들기(5) jsp로 crud를 사용한 다이어리 만들기(4) 20240322,20240325 jsp로 crud를 사용한 다이어리 만들기(3) 20240322 jsp로 crud를 사용한 다이어리 만들기(2) 필요하다고 생각한
broad-backend.tistory.com
이번에는 수정 기능을 구현했다.
수정하기를 눌러 페이지가 이동됐다.
수정하기 버튼을 누르면 diaryDate가 넘어오고 getParameter()를 통해 받는다.
[DB]diary.diary 테이블에서 diary_date, title, weather, content값을 select 쿼리로 가져온다.
수정 페이지는 addDiaryForm과 유사하지만
날짜는 수정할 필요가 없기때문에 readonly로 설정했다.
그리고 pw 확인을 추가해 pw가 맞아야 수정을 할 수 있도록 했다.
내용들을 수정하면 수정 완료 버튼을 눌러 modifyDiaryAction.jsp로 값을 보낸다
modifyDiaryForm.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");
System.out.println("diaryOne - diaryDate = " + diaryDate);
String errMsg = request.getParameter("errMsg");
if(diaryDate == null) {
response.sendRedirect("/diary/diaryListOfMonth.jsp");
}
// [DB]diary.diary에서 diaryDate에 해당하는 일기 내용 추출
String getDiarySql = "SELECT diary_date diaryDate, title, weather, content FROM diary WHERE diary_date = ?";
PreparedStatement getDiaryStmt = null;
ResultSet getDiaryRs = null;
getDiaryStmt = conn.prepareStatement(getDiarySql);
getDiaryStmt.setString(1, diaryDate);
getDiaryRs = getDiaryStmt.executeQuery();
%><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>diaryOne</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbit&display=swap" rel="stylesheet">
<style>
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: #003541;
text-decoration: none;
}
a:hover {
color: #3162C7;
text-decoration: none;
}
a:active {
text-decoration: none;
}
body {
background-image: url('/diary/img/img5.jpg');
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
font-family: "Orbit", sans-serif;
font-weight: 300;
font-style: normal;
min-height: 100vh;
}
table {
border-collapse: collapse;
width: 800px;
margin: 0rem auto;
box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.1);
background-color: white;
}
/* 테이블 행 */
th, td {
padding: 20px;
text-align: left;
border-bottom: 1px solid #ddd;
text-align: center;
color: #000000;
font-size: 18px;
}
th {
background-color: rgba(92, 138, 153, 0.5);
color: #000000;
}
/* 테이블 올렸을 때 */
tbody tr:hover {
background-color: #d3d3d3;
opacity: 0.9;
cursor: pointer;
color:
}
</style>
</head>
<body>
<div class="row" style="min-height: 100vh;">
<div class="col"></div>
<div class="col-6 mt-5 border border-light-subtle shadow p-2 rounded-2" style="background-color: rgba(248, 249, 250, 0.7); height: 800px;">
<div>
<%
if(errMsg != null) {
%>
<%=errMsg%>
<%
}
%>
</div>
<div class="row">
<div class="col-3" style="display: flex;">
<form action="/diary/diaryListOfMonth.jsp">
<button type="submit" class="btn btn-outline-secondary" style="color: black; margin-right: 10px;">
다이어리
</button>
</form>
<form action="/diary/diaryList.jsp">
<button type="submit" class="btn btn-outline-secondary" style="color: black;">
일기 목록
</button>
</form>
</div>
<div class="col-6">
<h1 style="text-align: center; font-size: 60px;">일기 수정</h1>
</div>
<div class="col-3" style="text-align: right;">
<form action="/diary/login/logoutAction.jsp" method="post">
<button class="btn btn-outline-secondary" type="submit">로그아웃</button>
</form>
</div>
</div>
<hr>
<form action="/diary/modify/modifyDiaryAction.jsp" method="post">
<%
if(getDiaryRs.next()) {
%>
<div style="display: flex; justify-content: center;">
<table style="background-color: rgba(255, 255, 255, 0);">
<tr>
<th>날짜</th>
<td>
<input type="text" name="diaryDate" value="<%=getDiaryRs.getString("diaryDate")%>" style="background-color: rgba(0,0,0,0);" readonly="readonly">
</td>
</tr>
<tr>
<th>제목</th>
<td>
<div>
<input type="text" name="title" value="<%=getDiaryRs.getString("title")%>" style="background-color: rgba(0,0,0,0);">
</div>
</td>
</tr>
<tr>
<th>pw 확인</th>
<td>
<div>
<input type="password" name="memberPw" style="background-color: rgba(0,0,0,0);">
</div>
</td>
<tr>
<th>날씨</th>
<td>
<div>
<select name="weather" style="background-color: rgba(0,0,0,0);">
<%
if(getDiaryRs.getString("weather").equals("맑음")) {
%>
<option value="맑음" selected="selected">맑음</option>
<option value="흐림">흐림</option>
<option value="비">비</option>
<option value="눈">눈</option>
<%
} else if(getDiaryRs.getString("weather").equals("흐림")) {
%>
<option value="맑음">맑음</option>
<option value="흐림" selected="selected">흐림</option>
<option value="비">비</option>
<option value="눈">눈</option>
<%
} else if(getDiaryRs.getString("weather").equals("비")) {
%>
<option value="맑음">맑음</option>
<option value="흐림">흐림</option>
<option value="비" selected="selected">비</option>
<option value="눈">눈</option>
<%
} else {
%>
<option value="맑음">맑음</option>
<option value="흐림">흐림</option>
<option value="비">비</option>
<option value="눈" selected="selected">눈</option>
<%
}
%>
</select>
</div>
</td>
</tr>
<tr>
<th>내용</th>
<td>
<div>
<textarea style="background-color: rgba(0,0,0,0);" rows="5" cols="50" name="content">
<%=getDiaryRs.getString("title") %>
</textarea>
</div>
</td>
</tr>
</table>
</div>
<%
}
%>
<div style="display: flex; margin-left:400px; margin-top: 50px; align-item : middle; text-align: center;">
<button type="submit" class="btn btn-outline-secondary" style="color: black; margin-right: 10px;">
일기 수정 완료
</button>
</div>
</form>
</div>
<div class="col"></div>
</div>
</body>
</html>
diaryDate, title, memberPw, weather, content 값을 getParameter()로 받았다.
삭제와 마찬가지로 [DB]diary.member 테이블의 member_pw와 요청 값인 memberPw를 sql쿼리를 사용해 비교한다.
pw가 일치할 경우 update쿼리를 통해 수정을 한다.
update쿼리를 할 때는 [DB]diary.diary테이블의 update_date를 now()로 함께 변경 시켰다.
수정이 완료되면 diaryDate와 함꼐 diaryOne.jsp로 redirect하여 수정된 일기를 보여주도록 했다.
만일 pw가 달라 update가 실패 했다면 errMsg와 함께 diaryOne.jsp로 redirect 했다.
modifyDiaryAction.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 memberPw = request.getParameter("memberPw");
String weather = request.getParameter("weather");
String content = request.getParameter("content");
// 요청 값 체크
System.out.println("modifyDiaryAction - diaryDate = " + diaryDate);
System.out.println("modifyDiaryAction - title = " + title);
System.out.println("modifyDiaryAction - memberPw = " + memberPw);
System.out.println("modifyDiaryAction - weather = " + weather);
System.out.println("modifyDiaryAction - content = " + content);
// pw가 맞는지 확인
String checkPwSql = "SELECT member_id memberId FROM MEMBER WHERE member_pw = ?";
PreparedStatement checkPwStmt = null;
ResultSet checkPwRs = null;
checkPwStmt = conn.prepareStatement(checkPwSql);
checkPwStmt.setString(1, memberPw);
checkPwRs = checkPwStmt.executeQuery();
// 일기 UPDATE 할지말지 분기
if(checkPwRs.next()) {
//pw가 맞다면
// [DB]diary.diary에 UPDATE 쿼리 실행
String modifyDiarySql = "UPDATE diary SET title = ?, weather = ?, content = ?, update_date = NOW() WHERE diary_date = ?";
PreparedStatement modifyDiaryStmt = null;
modifyDiaryStmt = conn.prepareStatement(modifyDiarySql);
modifyDiaryStmt.setString(1, title);
modifyDiaryStmt.setString(2, weather);
modifyDiaryStmt.setString(3, content);
modifyDiaryStmt.setString(4, diaryDate);
int row = modifyDiaryStmt.executeUpdate();
System.out.println("modifyDiaryAction - row = " + row);
response.sendRedirect("/diary/diaryOne.jsp?diaryDate=" + diaryDate);
} else {
String errMsg = URLEncoder.encode("수정 실패했습니다. 다시 수정해주세요", "UTF-8");
response.sendRedirect("/diary/diaryOne.jsp?diaryDate=" + diaryDate + "&errMsg=" + errMsg);
}
// DB 반납
conn.close();
%>
728x90
'웹 개발 > 다이어리 프로젝트(개인)' 카테고리의 다른 글
| jsp로 crud를 사용한 다이어리 만들기(9)-일기DB 테이블 추가 (1) | 2024.04.01 |
|---|---|
| jsp로 crud를 사용한 다이어리 만들기(8)-목록형 다이어리 구현 (0) | 2024.04.01 |
| jsp로 crud를 사용한 다이어리 만들기(6)-일기 삭제 (0) | 2024.03.27 |
| jsp로 crud를 사용한 다이어리 만들기(5)-일기 상세 보기 (0) | 2024.03.27 |
| jsp로 crud를 사용한 다이어리 만들기(4)-메인 달력 다이어리 (0) | 2024.03.27 |
