잡담
이번에는 메모리상에 추가되어 있는 값들을 수정 삭제 출력 하는 방법에 대해서 알아보려고 합니다. Read.jsp안에 수정/삭제 기능을 구현할 생각이고 Read.jsp는 메인에서 해당 데이터를 클릭 시 해당 tno에 맞게 데이터를 불러와 출력하게 되고 불러온 데이터를 가지고 수정 /삭제가 진행되게 됩니다.
1. TodoReadController
새 페이지를 열 때에는 주로 GET 방식을 사용하는 것이 일반적입니다. 이번에는 /todo/read라는 경로를 입력받으면 request에 담겨있는 tno값을 getParameter를 이용해 변수에 담고 해당 값을 TodoService에 있는 get 메서드를 통해 tno에 맞는 데이터를 출력할 수 있게 합니다. TodoDto로 만들어진 객체는 read.jsp에서 출력하게 됩니다.
package org.zerock.demo3.todo;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.zerock.demo3.todo.dto.TodoDto;
import org.zerock.demo3.todo.service.TodoService;
import java.io.IOException;
@WebServlet(name = "todoReadController", urlPatterns = "/todo/read")
public class TodoReadController extends HttpServlet {
// GET 요청을 처리하는 메서드
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 요청에서 tno 파라미터를 가져와서 long으로 변환
long tno = Long.parseLong(request.getParameter("tno"));
// ToDoService를 사용하여 해당 tno에 해당하는 ToDoDto를 가져옴
TodoDto dto = TodoService.INSTANCE.get(tno);
// 가져온 ToDoDto를 request의 속성에 설정하여 JSP에서 사용할 수 있도록 함
request.setAttribute("dto", dto);
// JSP로 포워딩하여 ToDo의 내용을 보여줌
request.getRequestDispatcher("/WEB-INF/todo/read.jsp").forward(request, response);
}
}값을 받아오거나 보내줄 때는 항상 타입이 맞는지 확인해야 합니다. 특히나 나중에 DB연결을 하게 될 때는 mapping이라는 기능을 통해서 db에 맞는 타입으로 formatting 하여 전달될 것입니다. 여기서도 tno가 값을 받아와 String형태임으로 long타입으로 parse를 진행해 줍니다.
2. TodoService.get()
package org.zerock.demo3.todo.service;
import org.zerock.demo3.todo.dto.TodoDto;
import java.time.LocalDate;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;
import java.util.stream.IntStream;
public enum TodoService {
INSTANCE;
private List<TodoDto> todoList = new ArrayList<>();
private int count = 0;
public TodoDto get(long tno) {
for (TodoDto dto : getList()) {
if (dto.getTno() == tno) {
return dto;
}
}
return null;
}
}get 메서드는 특정 tno에 해당하는 ToDo를 가져옵니다. 이 메서드는 ToDo 목록을 반복하면서 주어진 tno와 일치하는 ToDo를 찾습니다. 일치하는 ToDo가 발견되면 해당 ToDo를 반환하고, 찾지 못하면 null을 반환합니다.
위에서는 람다식을 사용해서 for문을 많이 생략했는데 실제로는 아래의 코드가 진행되고 있는 것과 같습니다.
public TodoDto get(long tno) {
List<TodoDto> todoList = getList(); // Todo 목록 가져오기
for (int i = 0; i < todoList.size(); i++) { // 목록 순회
TodoDto dto = todoList.get(i); // 현재 ToDo 가져오기
if (dto.getTno() == tno) { // tno와 ToDo 번호가 일치하는지 확인
return dto; // 일치하면 해당 ToDo 반환
}
}
return null; // 일치하는 ToDo가 없으면 null 반환
}
3. read.jsp
해당 JSP에는 tno에 맞는 값을 dto 데이터값을 먼저 출력하고 해당 내용을 수정/삭제합니다. 수정과 삭제 버튼 2가지를 만들고 각각은 다른 action을 가지게 되는데 수정은 /todo/modify url을 post방식으로 호출하여 수정하는 Controller로 이동하는데 이동할 때 사용자가 수정한 데이터들을 담아서 submit 합니다. 또 하나는 todo/remove url을 post방식으로 호출하여 삭제하는 Controller로 이동합니다. 삭제를 위해서는 삭제하고자 하는 tno값이 필요한데 해당 값만 submit 하여 보내면 됩니다.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<script>
function func(){
var chk = document.getElementById("#check")
if(chk.checked == true){
document.getElementById("#check").value(true)
}
else{
document.getElementById("#check").value(false)
}
}
</script>
<body>
<div class="list-box">
<h1>Todo 수정/삭제</h1>
<form action="/todo/modify" method="post">
<fieldset id="btn_fieldset" disabled>
<legend>todoList</legend>
<input type="text" name="tno" value="${dto.tno}" hidden>
<input type="text" name="title" value="${dto.title}" >
<br>
<input type="date" name="dueDate" value="${dto.dueDate}" >
<br>
<input type="checkbox" id="check" name="finished" value="true" ${dto.finished ? 'checked':''}>
</fieldset>
<input type="button" onclick="fieldsetDisable()" value="수정">
<button type="submit">완료</button>
</form>
<form action="/todo/remove" method="post">
<input type="text" name="tno" value="${dto.tno}" hidden>
<button type="submit" class="btn-delete">삭제</button>
</form>
</div>
<script>
function fieldsetDisable() {
const fieldset = document.getElementById('btn_fieldset');
fieldset.disabled = false;
}
</script>
</body>
</html>수정은 권한이 있는 사람만 수정하게 만드는 작업을 할 수 있는데 그건 뒤에 가서 로그인을 만들게 되면 DB연결을 하여 회원을 받고 그 회원이 작성한 글만 수정할 수 있도록 만들 수 있습니다. 수정을 할 때 DB에 저장되어 있는 값과 Session에 담겨있는 회원정보가 일치할 때 수정할 수 있도록 만들 예정입니다. 지금은 그냥 JavaScript를 이용해서 필드채로 수정할 수 없는 영역을 만들어서 기분만 냈습니다. 사실 readonly 속성을 이용해서 만들어도 관계없다고 생각합니다.
4. 출력(수정)
메인에서 수정 삭제하고 싶은 데이터를 클릭합니다.
? tno=0를 통해 tno 값이 0인 데이터를 호출하고 input에 데이터를 추가합니다.
글을 마치며
오늘은 수정/삭제 기능이 있는 Read.jsp을 구현하기 위해해서 TodoReadController를 만들어주었습니다. 해당 컨트롤러는 페이지를 앞에서 tno를 통해 받아온 데이터를 JSP에 뿌려주기만 하고 다음 동작들은 다른 Controller로 이동하게 됩니다. 이는 URL 호출에서 자주 사용되는 방식입니다. TodoReadController에서 get방식으로 페이지를 열었다고 해서 POST방식으로 다시 호출할 필요 없이 다른 Controller로 이동이 가능합니다. 이는 일반적인 웹 애플리케이션의 구조입니다. 감사합니다.
'미니 프로젝트 > To Do List' 카테고리의 다른 글
| [Java] TodoList ③ TodoRegisterController(DB 연결 전) (0) | 2024.05.14 |
|---|---|
| [Java] TodoList ② TodoListController(DB 연결 전) (0) | 2024.05.14 |
| [Java] TodoList ① 설계 (0) | 2024.05.03 |