0. 목표
/usr/article/detail?id=...에서 글 상세 정보 표시- 수정/삭제 기능 추가
- 수정 후 저장 → 상세보기로 이동
- 삭제 후 → 리스트로 이동
1. ArticleController 수정
package com.example.demo.controller;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import com.example.demo.repository.ArticleRepository;
import com.example.demo.vo.Article;
import lombok.RequiredArgsConstructor;
@Controller
@RequiredArgsConstructor
public class ArticleController {
private final ArticleRepository articleRepository;
@RequestMapping("/usr/article/list")
public String showList(Model model) {
List<Article> articles = articleRepository.getArticles();
model.addAttribute("articles", articles);
return "article/list";
}
@RequestMapping("/usr/article/detail")
public String showDetail(Model model, @RequestParam int id) {
Article article = articleRepository.getArticleById(id);
model.addAttribute("article", article);
return "article/detail";
}
@RequestMapping(value = "/usr/article/modify", method = RequestMethod.GET)
public String showModifyForm(Model model, @RequestParam int id) {
Article article = articleRepository.getArticleById(id);
model.addAttribute("article", article);
return "article/modify";
}
@RequestMapping(value = "/usr/article/modify", method = RequestMethod.POST)
public String doModify(@RequestParam int id, @RequestParam String title) {
articleRepository.modifyArticle(id, title);
return "redirect:/usr/article/detail?id=" + id;
}
@RequestMapping("/usr/article/delete")
public String doDelete(@RequestParam int id) {
articleRepository.deleteArticle(id);
return "redirect:/usr/article/list";
}
}
아직 articleRespository에 메서드를 만들지 않았다.
2. ArticleRepository 수정
package com.example.demo.repository;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import com.example.demo.vo.Article;
@Mapper
public interface ArticleRepository {
List<Article> getArticles();
Article getArticleById(@Param("id") int id);
void writeArticle(@Param("title") String title, @Param("memberId") int memberId);
void modifyArticle(@Param("id") int id, @Param("title") String title);
void deleteArticle(@Param("id") int id);
}
3. Mapper XML 수정
- 경로:
src/main/resources/mappers/ArticleMapper.xml
<mapper namespace="com.example.demo.repository.ArticleRepository">
<select id="getArticles" resultType="com.example.demo.vo.Article">
SELECT id, regDate, title, memberId
FROM article
ORDER BY id DESC
</select>
<select id="getArticleById" resultType="com.example.demo.vo.Article">
SELECT id, regDate, title, memberId
FROM article
WHERE id = #{id}
</select>
<insert id="writeArticle">
INSERT INTO article
SET regDate = NOW(),
title = #{title},
memberId = #{memberId}
</insert>
<update id="modifyArticle">
UPDATE article
SET title = #{title}
WHERE id = #{id}
</update>
<delete id="deleteArticle">
DELETE FROM article
WHERE id = #{id}
</delete>
</mapper>
4. 상세보기 JSP
- 경로:
src/main/webapp/WEB-INF/jsp/article/detail.jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>글 상세보기</title>
</head>
<body>
<h1>글 상세보기</h1>
<p>ID: ${article.id}</p>
<p>등록일: ${article.regDate}</p>
<p>제목: ${article.title}</p>
<p>작성자 ID: ${article.memberId}</p>
<div>
<a href="/usr/article/modify?id=${article.id}">수정</a>
<a href="/usr/article/delete?id=${article.id}">삭제</a>
<a href="/usr/article/list">목록</a>
</div>
</body>
</html>
5. 수정 폼 JSP
- 경로: src/main/webapp/WEB-INF/jsp/article/modify.jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>글 수정</title>
</head>
<body>
<h1>글 수정</h1>
<form action="/usr/article/modify" method="post">
<input type="hidden" name="id" value="${article.id}">
<div>
제목: <input type="text" name="title" value="${article.title}" required>
</div>
<div>
<button type="submit">저장</button>
</div>
</form>
</body>
</html>
- 수정 폼에서 article.id를 안 보이게 미리 적어둬야 그 게시물을 수정할 때 같은 id의 게시물을 수정한다. 이걸 입력할 수 있게하면 다른게시물을 수정하게 되는 꼴이고, id를 form에 넣지 않으면 어느 게시글인지 몰라서 에러가 남.
6. 리스트.jsp(한 줄 수정)
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<!DOCTYPE html>
<html>
<head>
<title>Article List</title>
</head>
<body>
<h1>Article List</h1>
<table border="1" cellpadding="6">
<tr>
<th>ID</th>
<th>Registration Date</th>
<th>Title</th>
<th>Member ID</th>
</tr>
<c:forEach var="article" items="${articles}">
<tr>
<td>${article.id}</td>
<td>${article.regDate}</td>
<td><a href="detail?id=${article.id }">${article.title}</a></td>
<td>${article.memberId}</td>
</tr>
</c:forEach>
</table>
</body>
</html>이 한줄을 수정했는데,
<td><a href="detail?id=${article.id }">${article.title}</a></td>제목을 클릭하면 상세보기로 이동.
6. 동작 흐름
-
리스트에서 제목 클릭 → 상세보기 이동
-
수정 클릭 → 수정 폼 표시
-
제목 변경 후 저장 → 상세보기로 돌아옴
-
삭제 클릭 → 리스트로 이동
수정하기 클릭.
이렇게 수정되어 저장.
그리고 삭제를 누르면 바로 게시글 삭제.
7. 다음 (6편)
-
파일 업로드(썸네일)
-
저장 시 파일 경로 DB 저장
-
리스트와 상세보기에서 썸네일 표시
