728x90
jsp로 crud를 사용한 다이어리 만들기(4)
20240322,20240325 jsp로 crud를 사용한 다이어리 만들기(3) 20240322 jsp로 crud를 사용한 다이어리 만들기(2) 필요하다고 생각한 jsp파일들을 미리 폴더를 만들어 생성해놨다. logoutAction은 login과 같이 폴더를
broad-backend.tistory.com
이번에는 달력에서 일기 제목을 클릭하면
일기가 상세하게 보이게 만들었다.
위의 화면이 클릭했을 때 일기 상세 내용이다.
마찬가지로 로그인 없이 페이지 접근시 분기문을 사용해 로그인 폼으로 이동하도록 했다.
그리고 diaryListOfMonth.jsp에서 일기 제목클릭시 diaryDate값이 넘어온다.
getParameter()를 사용해 diaryDate값을 받아온다.
diaryDate값이 null일 경우는 diaryListOfMonth로 redirect하도록 했다.
[DB]diary.diary에서 diary_date, title, weather, content 만 select 쿼리로 가져온다.
일기내용은 table로 출력하고
달력모양 다이어리, 리스트 모양, 로그아웃, 일기수정, 일기 삭제 버튼을 만들고 각각 form이나 action할 수 있는 페이지로 이동하도록 했다.
diaryOne.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", "java1234");
// 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>
<%
if(getDiaryRs.next()) {
%>
<div style="display: flex; justify-content: center;">
<table style="background-color: rgba(255, 255, 255, 0);">
<tr>
<th>날짜</th>
<td><%=getDiaryRs.getString("diaryDate")%></td>
</tr>
<tr>
<th>제목</th>
<td><%=getDiaryRs.getString("title")%></td>
</tr>
<tr>
<th>날씨</th>
<td><%=getDiaryRs.getString("weather")%></td>
</tr>
<tr>
<th>내용</th>
<td style="padding: 20%;"><%=getDiaryRs.getString("content")%></td>
</tr>
</table>
</div>
<%
}
%>
<div style="display: flex; margin-left:350px; margin-top: 50px; align-item : middle; text-align: center;">
<form action="/diary/modify/modifyDiaryForm.jsp?diaryDate=<%=diaryDate%>" method="post">
<button type="submit" class="btn btn-outline-secondary" style="color: black; margin-right: 10px;">
일기 수정하기
</button>
</form>
<form action="/diary/remove/removeDiaryForm.jsp?diaryDate=<%=diaryDate%>" method="post">
<button type="submit" class="btn btn-outline-secondary" style="color: black;">
일기 삭제하기
</button>
</form>
</div>
</div>
<div class="col"></div>
</div>
</body>
</html>
다음에는 수정과 삭제를 구현해보겠다
728x90
'웹 개발 > 다이어리 프로젝트(개인)' 카테고리의 다른 글
| jsp로 crud를 사용한 다이어리 만들기(7)-일기 수정 (0) | 2024.03.27 |
|---|---|
| jsp로 crud를 사용한 다이어리 만들기(6)-일기 삭제 (0) | 2024.03.27 |
| jsp로 crud를 사용한 다이어리 만들기(4)-메인 달력 다이어리 (0) | 2024.03.27 |
| jsp로 crud를 사용한 다이어리 만들기(3)-로그아웃,일기쓰기 (0) | 2024.03.25 |
| jsp로 crud를 사용한 다이어리 만들기(2)-로그인 (0) | 2024.03.25 |
