Spring) 할일 체크하기

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

할일 체크하기

 

todoList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<jsp:include page="/WEB-INF/views/common/header.jsp">
	<jsp:param value="할일" name="title"/>
</jsp:include>

<style>
div#todo-container{width:60%; margin:0 auto;text-align:center;}
</style>
<div id="todo-container">
    <form action="${pageContext.request.contextPath}/todo/insertTodo.do" class="form-inline" method="post">
        <input type="text" class="form-control col-sm-10 ml-1" name="todo" placeholder="할일" required/>&nbsp;
        <button class="btn btn-outline-success" type="submit" >저장</button>
    </form>

    <br />
    <!-- 할일목록 -->
	<table class="table">
	    <tr>
	      <th>번호</th>
	      <th>완료여부</th>
	      <th>할일</th>
	      <th>생성일</th>
	      <th>완료일</th>
	      <th>삭제</th>
	    </tr>
	    <c:if test="${empty list}">
	    	<tr>
	    		<td colspan="6" class="text-center">작성한 할일이 없습니다.</td>
	    	</tr>
	    </c:if>
	    <c:if test="${not empty list}">
	    	<c:forEach items="${list}" var="todo">
			    <tr>
			    	<td>${todo.no}</td>
			    	<td>
			    		<input type="checkbox" name="completed" value="${todo.no}" ${not empty todo.completedAt ? 'checked' : ''}/>
			    	</td>
			    	<td>${todo.todo}</td>
			    	<td>
			    		<fmt:parseDate value="${todo.createdAt}" var="createdAt" pattern="yyyy-MM-dd'T'HH:mm" />
			    		<fmt:formatDate value="${createdAt}" pattern="yy/MM/dd HH:mm"/>
			    	</td>
			    	<td>
			    		<c:if test="${not empty todo.completedAt}">			    		
				    		<fmt:parseDate value="${todo.completedAt}" var="completedAt" pattern="yyyy-MM-dd'T'HH:mm" />
				    		<fmt:formatDate value="${completedAt}" pattern="yy/MM/dd HH:mm"/>
			    		</c:if>
			    	</td>
			    	<td>
			    		<button class="btn btn-outline-danger" type="button" >삭제</button>
			    	</td>
			    </tr>
	    	</c:forEach>
	    </c:if>
	</table>
</div>
<form action="${pageContext.request.contextPath}/todo/updateTodo.do" name="todoUpdateFrm" method="POST">
	<input type="hidden" name="no" />
	<input type="hidden" name="isCompleted" />
</form>
<script>
document.querySelectorAll("[name=completed]").forEach((checkbox) => {
	checkbox.addEventListener('change', (e) => {
		const {value, checked} = e.target;
		console.log(value, checked);
		
		const frm = document.todoUpdateFrm;
		frm.no.value = value;
		frm.isCompleted.value = checked;
		frm.submit();
	});
});
</script>
<jsp:include page="/WEB-INF/views/common/footer.jsp"></jsp:include>

 

Controller

TodoController

@PostMapping("/updateTodo.do")
public String updateTodo(@RequestParam int no, @RequestParam boolean isCompleted) {
    try {
        Map<String, Object> param = new HashMap<>();
        param.put("no", no);
        param.put("isCompleted", isCompleted);

        int result = todoService.updateTodo(param);

        return "redirect:/todo/todoList.do";
    } catch(Exception e) {
        log.error(e.getMessage(), e);
        throw e;
    }
}

 

Service

TodoService interface 생략

TodoServiceImpl

@Override
public int updateTodo(Map<String, Object> param) {
    return todoDao.updateTodo(param);
}

 

Dao

TodoDao interface

int updateTodo(Map<String, Object> param);

 

if문 사용을 위해 mapper 생성!

todo-mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ce.spring2.todo.model.dao.TodoDao">
  <update id="updateTodo">
  	update 
  		todo
  	set
  		completed_at = 
  		<if test="isCompleted">
  			sysdate
  		</if>
  		<if test="!isCompleted">
  			null
  		</if>
  	where
  		no = #{no}
  </update>
</mapper>