📅2024. 02.01 39일차
🎬2024_01_Spring_AM
오늘의 개념
Spring Model?
header 태그
눈누 폰트 사이트
defer
JSP로 Article List 구현
💡띵킹 타임💡
-
주소창에 /usr/article/list 입력했을 때 list가 나와야 한다. 그럼 @RequestMapping("/usr/article/list")로 바꾸면 될 듯
-
Model 사용해서 articles을 담아서 list.jsp로 넘기면 될 듯??
-
list.jsp 파일에서 표를 만들어 <c:forEach> 사용하여 articles를 표에 담아서 보여주면 될 것 같다.
@RequestMapping("/usr/article/list")
public String showList(Model model) {
List<Article> articles = articleService.getArticles();
model.addAttribute("articles", articles);
return "usr/article/list";
}<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ARTICLE LIST</title>
</head>
<body>
<h1>LIST</h1>
<hr />
<table border="1">
<thead>
<tr>
<th>번호</th>
<th>날짜</th>
<th>제목</th>
<th>작성자</th>
</tr>
</thead>
<tbody>
<c:forEach var="article" items="${articles }">
<tr>
<td>${article.id }</td>
<td>${article.regDate.substring(0,10) }</td>
<td><a href="detail?id=${article.id }">${article.title }</a></td>
<td>${article.memberId }</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>
</html>JSP로 Article List 구현
💡띵킹 타임💡
-
주소창에 /usr/article/detail?id= 번호 입력했을 때 번호에 해당하는 상세보기가 나와야 한다.
그럼 @RequestMapping("/usr/article/detail")로 바꾸면 될 것 같고 parameter로 id를 받아야 하니까
public String showdetail(int id) 그대로 유지 -
근데 여기서 id값 받은 걸 가지고 article 1행을 가져온 것을 detail.jsp 파일로 넘겨야 하는데?? 그럼 저장하려면 Model 또 써야겠네??? public String showdetail(Model model, int id) 이러면 쓸 수 있을 것 같고 그럼 일단 jsp파일로 넘겨보자
@RequestMapping("/usr/article/detail")
public String showdetail(Model model, int id) {
Article article = articleService.getArticle(id);
model.addAttribute("article", article);
return "usr/article/detail";
}-
jsp 파일로 넘겼어? 그럼 detail.jsp 파일이 필요하겠지?? 이거 list꺼 가져와서 활용하자
-
detail도 표를 만들어서 보여주면 좋을 듯?? aritlce 받아왔으니 그냥 바로 쓰면 될 듯
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ARTICLE DETAIL</title>
</head>
<body>
<h1>DETAIL</h1>
<hr />
<table border="1">
<thead>
<tr>
<th>번호</th>
<th>날짜</th>
<th>수정날짜</th>
<th>제목</th>
<th>내용</th>
<th>작성자</th>
</tr>
</thead>
<tbody>
<tr>
<td>${article.id }</td>
<td>${article.regDate }</td>
<td>${article.updateDate }</td>
<td>${article.title }</td>
<td>${article.body }</td>
<td>${article.memberId }</td>
</tr>
</tbody>
</table>
</body>
</html>작성자를 memberId가 아닌 nickname으로 나오게 하기
💡띵킹 타임💡
- select 할 때 linner join 해서 가져오면 되지 않을까??? 일단 해보자
- article 생성자에 nickname추가해야 할 듯?
- jsp.file에서 memberId를 가져오는게 아니라 select한 nickname을 넣으면 끝
<select id="getArticles" resultType="Article">
SELECT *
FROM article AS a
INNER JOIN `member` AS m
ON a.memberId = m.id
ORDER BY a.id DESC
</select><select id="getArticle" resultType="Article">
SELECT *
FROM article AS a
INNER JOIN `member` AS m
ON a.memberId = m.id
WHERE a.id = 1;
</select>해결완료
수정, 삭제 버튼 추가 (권한이 있을 때만 버튼 표시)
💡띵킹 타임💡
-
list하고 detail 둘 다 수정, 삭제 버튼이 있어야 될 것 같음 근데 detail에서는 권한이 있을 때만 수정, 삭제 버튼 보이게 끔 해야 할듯
-
일단 list하고 detail에 수정, 삭제 버튼 넣어주자~~
<th>수정</th> // 기존에 있던 list table에 추가적으로 수정 넣음
<th>삭제</th> // 기존에 있던 list table에 추가적으로 삭제 넣음<td><a href="#">수정</a></td> //기존에 있던 list table에 추가적으로 수정 버튼 넣음
<td><a href="#">삭제</a></td> //기존에 있던 list table에 추가적으로 삭제 버튼 넣음- 근데 detail 부분에서는 권한이 있을 때만 나오게 끔 해야하는데? 어떻게 해야할까??
- 로그인 할 때 저장된 session을 이용하면 될 듯
- 만약 loginedMemberId != null이면 이미 로그인 상태 따라서 session에 loginedMemberId 저장
@RequestMapping("/usr/article/detail")
public String showDetail(HttpSession httpSession, Model model, int id) {
boolean isLogined = false;
int loginedMemberId = 0;
if (httpSession.getAttribute("loginedMemberId") != null) {
isLogined = true;
loginedMemberId = (int) httpSession.getAttribute("loginedMemberId");
}
Article article = articleService.getForPrintArticle(loginedMemberId, id);
model.addAttribute("article", article);
return "usr/article/detail";
}- id 기반으로 select해서 1행 가져오기 innerjoin 해야 함 member table이랑 가져 온 것을 article에 담고 model 이용해서 jsp 로 넘긴다.
@Select("""
SELECT A.*, M.nickname AS extra__writer
FROM article AS A
INNER JOIN `member` AS M
ON A.memberId = M.id
WHERE A.id = #{id}
""")
public Article getForPrintArticle(int id);- 조건문 사용해서 userCanModify 값이 있을 때만 수정 삭제 버튼 나오게 구현
<div class="btns">
<button class="hover:underline" type="button" onclick="history.back();">뒤로가기</button>
<c:if test="${article.userCanModify }">
<a href="../article/modify?id=${article.id }">수정</a>
</c:if >
<c:if test="${article.userCanDelete }">
<a href="../article/doDelete?id=${article.id }">삭제</a>
</c:if>
</div>문제 발생
-
실수로 삭제 누르면 바로 삭제되는데?? 어떻게 해야함??
문제해결
-
onlick 사용해서 해결???
onclick="if(confirm('정말 삭제하시겠습니까?') == false) return false;"문제 발생
-
권한이 없다면서 글은 삭제됨....
문제해결
-
loginedMemberCanModifyRd, 와 loginedMemberCanDeleteRd가 issusses 일 때 만 수정, 삭제 가능하게 하면 될 듯
if (loginedMemberCanDeleteRd.isSuccess()) {
articleService.deleteArticle(id);
}TODO
- 주제 고민
- 로그인 중복 제거 고민하기
