오늘 배운 것

• ToDo 만들기 完
  
  

list페이지에서 수정버튼 클릭 시 이동하는 페이지에서 입력한 데이터를 DB에 존재하는 데이터를 수정하는 메소드

	private void updateTodo(HttpServletRequest request, HttpServletResponse response) throws IOException {
		request.setCharacterEncoding("UTF-8");
		
		String title = request.getParameter("title");
		Long id = Long.parseLong(request.getParameter("id"));
		String username = todoDAO.selectTodo(id).getUsername();
		String description = request.getParameter("description");
		LocalDate targetDate = LocalDate.parse(request.getParameter("targetDate")); 
		boolean isDone = Boolean.valueOf(request.getParameter("isDone"));
		
		Todo oldTodo = new Todo(id, title, username, description, targetDate, isDone);
		
		todoDAO.updateTodo(oldTodo);
		
		response.sendRedirect("todos?action=list"); // 할 일을 수정 후에 list페이지로 이동
		
	}

list페이지에서 삭제 버튼 클릭 시 확인 후 삭제

	private void deleteTodo(HttpServletRequest request, HttpServletResponse response) throws IOException {
		Long id = Long.parseLong(request.getParameter("id"));
		
		todoDAO.deleteTodo(id);
		
		response.sendRedirect("todos?action=list"); // 할 일을 삭제 후에 list페이지로 이동
		
	}

confirm 함수와 if 함수를 통해 팝업창의 확인버튼 클릭 시 삭제, 취소 버튼 클릭 시 삭제취소(delete메소드 보다 onclick 속성이 먼저 동작하며 확인은 true, 취소는 false 값을 return함)

<a href="<%=request.getContextPath()%>/todos?action=delete&id=${todo.id}"
   onclick="if(!confirm('정말로 삭제하시겠습니까?')) return false"
   class="btn btn-danger btn-sm">삭제</a

현재 상태에서 false, true로 출력되던 것을 진행중, 완료됨으로 변경

chart.js를 이용하여 현재상태데이터를 기반으로한 차트 생성

const 상태들 = document.querySelectorAll('.status');
let 진행 = 0;
let 완료 = 0;

상태들.forEach((td) => {
  if (td.textContent == 'false') {
    진행++;
    td.textContent = '진행중';
  } else {
    완료++;
    td.textContent = '완료됨';
  }
});

const data = {
  labels: ['진행중', '완료됨'],
  datasets: [
    {
      label: 'My First Dataset',
      data: [진행, 완료],
      backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)'],
      hoverOffset: 4,
    },
  ],
};

const config = {
  type: 'pie',
  data: data,
};

const myChart = new Chart(document.getElementById('myChart'), config);