728x90
20240322,20240325 jsp로 crud를 사용한 다이어리 만들기(3)
20240322 jsp로 crud를 사용한 다이어리 만들기(2) 필요하다고 생각한 jsp파일들을 미리 폴더를 만들어 생성해놨다. logoutAction은 login과 같이 폴더를 묶어놨다. checkDateAction은 일기를 작성하고자 하는
broad-backend.tistory.com
이전 글에서 addDiaryAction까지 만들었다.
그리고 css도 추가해서 나름 꾸몄다. css는 힘든거같다..
작성한 일기는 두가지 형태로 볼 수 있다.
- 달력모양의 다이어리
- 리스트(목록)모양
나는 달력모양의 일기장을 메인으로 해놨다. 왼쪽 상단에 버튼이 있으며 누를 시 해당 모양의 일기장으로 이동가능하다!
달력모양의 다이어리 jsp이다
마찬가지로 로그인 안하고 페이지 접근 시 loginForm으로 이동하게 했다.
페이지에 표시할 년도와 달을 getParameter()로 받아온다.
Calendar API를 이용해 인스턴스를 불러온다.
getParameter()로 받아온 년도(targetYear)와 달(targetMonth)가 null이 아닐경우 int로 변환하고 Calendar.set()로 불러온 값으로 변경한다.
그리고 페이지에 표시하기위해 년도와 달을 따로 변수(titleYear, titleMonth)로 만들었다.
달력의 최대칸은 총 42개이고, 해당 월의 1일 앞과 마지막날 뒤에 공백 칸이 필요하다.
그렇기 때문에 해당 월의 1일의 요일(firstDateNum)을 구한다.(요일 별로 일 :1 / 월 : 2 / 화 : 3 / ... / 토 : 6)
이므로 해당 값에 -1 하여 시작 공백(startBlank)를 구했다.
그리고 해당 월의 마지막 날(lastDate)은 getActualMaximum()으로 구했다.
또한 해당월의 1일 앞에는 이전 달의 마지막 날짜들을 표시해주기 위해
이전달을 Calendar API를 사용해 인스턴스로 받아와 이전달의 마지막 날(beforeMonthLastDay)을 구한다.
달력의 날짜마다 일기가 있다면 일기의 제목 앞 부분을 보이게 하기 위해 sql쿼리를 작성했다..
[DB]diary.diary테이블에서 값을 가져와야한다.
year와 month로 where 조건을 걸고, diary_date(일기 작성 요일), title(일기 제목)을 select한다.
제목은 LEFT를 사용해 앞에서 5글자만 나타내도록 한다.
달력은 for문을 사용해 출력한다. int i 가 diaryDiv(42)와 같을 때 까지 반복한다.
내부에 if문으로 42개의 달력 칸 중 실제 날짜 시작 칸(i - startBlank)이 0보다 크고 마지막 날보단 작을 떄 까지 조건을 준다.
그리고 if문으로 i%7이 1이냐 0이냐 에 따라 일요일, 토요일은 색깔이 다르게 하도록 한다.
while문으로 해당 날짜에 일기가 존재하면 출력 할 수 있도록 한다.
처음 if문( 실제 날짜 시작 칸(i - startBlank)이 0보다 크고 마지막 날)을 벗어나면 -> 달력에 해당월의 1일 앞에 공백칸과, 마지막날 뒤의 공백칸도 마찬가지로 출력 할 수 있도록 하면 완료이다!
그리고 달력의 하단에는 글쓰기 버튼을 만들고 전에 만들었던 addDiaryForm으로 이동하게 했다!
diaryListOfMonth.jsp
<%@page import="java.util.Calendar"%>
<%@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 ; // 코드의 진행을 끝 낼때 사용
}
// errMsg출력
String errMsg = request.getParameter("errMsg");
%>
<%
// 달력
// 1. 요청 분석
// 출력할 달력의 년도와 월을 넘겨 받기
String targetYear = request.getParameter("targetYear");
String targetMonth = request.getParameter("targetMonth");
System.out.println("targetYear = " + targetYear);
System.out.println("targetMonth = " + targetMonth);
Calendar target = Calendar.getInstance();
if(targetYear != null && targetMonth != null) {
target.set(Calendar.YEAR, Integer.parseInt(targetYear));
target.set(Calendar.MONTH, Integer.parseInt(targetMonth));
}
// 타이틀에 출력할 달력 년 월 변수
int titleYear = target.get(Calendar.YEAR);
int titleMonth = target.get(Calendar.MONTH);
// 달력 1일 시작 전 공백 개수 -> 1일의 요일이 필요 -> target의 날짜를 1일로 변경
target.set(Calendar.DATE, 1);
int firstDateNum = target.get(Calendar.DAY_OF_WEEK); //1일의 요일 (일 : 1 / 월 : 2 / ... / 토 : 7)
System.out.println("firstDateNum = " + firstDateNum);
int startBlank = firstDateNum - 1; // 1일 시작 전 공백 개수 Ex) 1일이 일요일 -> 0개 / 1일이 월요일 -> 1개 / .... / 1일이 토요일 -> 6개
System.out.println("startBlank = " + startBlank);
int lastDate = target.getActualMaximum(Calendar.DATE); // target달의 마지막 날짜 반환
System.out.println("lastDate = "+lastDate);
int countDiv = startBlank + lastDate; // 필요한 달력 칸의 개수
// 이전달 공백 칸의 날짜
Calendar beforeTarget = Calendar.getInstance();
beforeTarget.set(titleYear, titleMonth - 1, 1);
int beforeMonthLastDay = beforeTarget.getActualMaximum(Calendar.DATE);
System.out.println("beforeMonthLastDay = " + beforeMonthLastDay);
// [DB]에서 targetYear와 targetMonth에 해당하는 diary 목록 추출하기
String getDiaryListSql = "SELECT diary_date diaryDate, day(diary_date) day, LEFT(title,5) title FROM diary WHERE YEAR(diary_date) = ? AND MONTH(diary_date) = ?";
PreparedStatement getDiaryListStmt = null;
ResultSet getDiaryListRs = null;
getDiaryListStmt = conn.prepareStatement(getDiaryListSql);
getDiaryListStmt.setInt(1, titleYear);
getDiaryListStmt.setInt(2, titleMonth + 1);
System.out.println(getDiaryListStmt);
getDiaryListRs = getDiaryListStmt.executeQuery();
%><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>diaryListOfMonth</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 {
display: block; text-decoration: none;
}
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 {
font-family: "Orbit", sans-serif;
font-weight: 300;
font-style: normal;
}
.week {
border:1px solid #000000;
width: 100px; height: 80px;
float: left;
background-color: rgba(90, 113, 127, 0.5)
}
.cell {
float: left;
border:1px solid #000000;
width: 100px; height: 80px;
background-color: rgba(147, 164, 171, 0.5);
}
.sat {
clear: right;
color: #0000FF;
}
.sun {
clear: both;
color: #FF0000;
}
.button {
color: black;
}
</style>
</head>
<body style="background-image: url('/diary/img/img5.jpg'); background-size: 100%; background-repeat: no-repeat; background-position: center;">
<div>
<%
if(errMsg != null) {
%>
<%=errMsg%>
<%
}
%>
</div>
<div class="row ">
<div class="col"></div>
<div class="col-6 mt-5 border border-light-subtle shadow p-3 rounded-2" style="text-align: center; background-color: rgba(248, 249, 250, 0.5);">
<div class="row">
<div class="col-3">
<div 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>
<div class="col-6"><h1 style="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>
<div class="row">
<div class="col">
<a href="/diary/diaryListOfMonth.jsp?targetYear=<%=titleYear%>&targetMonth=<%=titleMonth - 1%>" style="margin-top: 15px;">
이전 달
</a>
</div>
<div class="col">
<h2><%=titleYear%>년 <%=titleMonth + 1%>월 달력</h2>
</div>
<div class="col">
<a href="/diary/diaryListOfMonth.jsp?targetYear=<%=titleYear%>&targetMonth=<%=titleMonth + 1%>" style="margin-top: 15px;">
다음 달
</a>
</div>
</div>
<hr>
<!-- 달력 시작 -->
<div class="rounded-3" style="margin-left: 120px; opacity: 0.8; ">
<!-- 요일 -->
<div class="week rounded-1" style="color: red;">일</div>
<div class="week rounded-1">월</div>
<div class="week rounded-1">화</div>
<div class="week rounded-1">수</div>
<div class="week rounded-1">목</div>
<div class="week rounded-1">금</div>
<div class="week rounded-1" style="color: blue;">토</div>
<div style="clear: both;"></div>
<%
for(int i = 1; i <= 42; i++) {
if(i - startBlank > 0 && i - startBlank <= lastDate) {
if(i % 7 == 1) {
%>
<div class="cell sun rounded-1">
<%=i - startBlank%><br>
<%
// 현재날짜(i-startBlank)의 일기가 getDiaryListRs 목록에 있는지 비교
while(getDiaryListRs.next()) {
// 날짜에 일기가 존재한다면
if(getDiaryListRs.getInt("day") == (i-startBlank)) {
%>
<div>
<a href='/diary/diaryOne.jsp?diaryDate=<%=getDiaryListRs.getString("diaryDate")%>'>
<%=getDiaryListRs.getString("title")%>...
</a>
</div>
<%
}
}
getDiaryListRs.beforeFirst();
%>
</div>
<%
} else if(i % 7 == 0){
%>
<div class="cell sat rounded-1">
<%=i - startBlank%>
<%
// 현재날짜(i-startBlank)의 일기가 getDiaryListRs 목록에 있는지 비교
while(getDiaryListRs.next()) {
// 날짜에 일기가 존재한다면
if(getDiaryListRs.getInt("day") == (i-startBlank)) {
%>
<div>
<a href='/diary/diaryOne.jsp?diaryDate=<%=getDiaryListRs.getString("diaryDate")%>'>
<%=getDiaryListRs.getString("title")%>...
</a>
</div>
<%
}
}
getDiaryListRs.beforeFirst();
%>
</div>
<%
} else {
%>
<div class="cell rounded-1">
<%=i - startBlank%>
<%
// 현재날짜(i-startBlank)의 일기가 getDiaryListRs 목록에 있는지 비교
while(getDiaryListRs.next()) {
// 날짜에 일기가 존재한다면
if(getDiaryListRs.getInt("day") == (i - startBlank)) {
%>
<div>
<a href='/diary/diaryOne.jsp?diaryDate=<%=getDiaryListRs.getString("diaryDate")%>'>
<%=getDiaryListRs.getString("title")%>...
</a>
</div>
<%
}
}
getDiaryListRs.beforeFirst();
%>
</div>
<%
}
} else if(i - startBlank <= 0) {
%>
<div class="cell rounded-1" style="color: gray;">
<%=i - startBlank + beforeMonthLastDay%>
</div>
<%
} else {
if(i % 7 == 1) {
%>
<div class="cell rounded-1" style="clear: both;">
<%=i - startBlank - lastDate%>
</div>
<%
} else {
%>
<div class="cell rounded-1" style="color: gray;">
<%=i - startBlank - lastDate%>
</div>
<%
}
}
}
%>
</div>
<div style="clear: both; text-align: center;">
<form action="/diary/add/addDiaryForm.jsp">
<button class="btn btn-outline-secondary" style="width: 50%; height: 40px; margin-top: 10px;" type="submit">글쓰기</button>
</form>
</div>
</div>
<div class="col"></div>
</div>
</body>
</html>728x90
'웹 개발 > 다이어리 프로젝트(개인)' 카테고리의 다른 글
| jsp로 crud를 사용한 다이어리 만들기(6)-일기 삭제 (0) | 2024.03.27 |
|---|---|
| jsp로 crud를 사용한 다이어리 만들기(5)-일기 상세 보기 (0) | 2024.03.27 |
| jsp로 crud를 사용한 다이어리 만들기(3)-로그아웃,일기쓰기 (0) | 2024.03.25 |
| jsp로 crud를 사용한 다이어리 만들기(2)-로그인 (0) | 2024.03.25 |
| jsp로 crud를 사용한 다이어리 만들기(1) (0) | 2024.03.25 |
