きょう習った

ToDoの作成

アドレスを「/」に設定してwebを表します。xmlのwelcome設定やswitch文のdefalutと競合してエラーが発生し、動作の値を「/new」のようなアドレス形式に設定してもエラーが発生するため、パラメータに変更して受信できます。

ToDoリストをクリックして、データベースに登録されているすべての保留中の

を印刷します.

JSTLを使用した反復文foreach出力

各行

を変更し、削除ボタン

を追加する.

 <header>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">TODO APP</a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link" href="<%=request.getContextPath()%>/todos?action=list">ToDo 리스트</a>
              </li>
            </ul>
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link" href="<%=request.getContextPath()%>/logout">로그아웃</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <!-- navbar 끝 -->
    <!-- 본문 -->
    <div class="container">
      <h3 class="text-center">DO IT list's</h3>
      <hr />
      <div class="container text-left">
        <a href="<%=request.getContextPath()%>/todos?action=new" class="btn btn-success">할일 추가</a>
      </div>
      <br />
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>제목</th>
            <th>마감 일자</th>
            <th>현재 상태</th>
            <th>액션</th>
          </tr>
        </thead>
        <tbody>
          <!-- 할 일 데이터를 table로 -->
          <c:forEach var="todo" items="${listTodo}">
            <tr>
              <td><c:out value="${todo.title}" /></td>
              <td><c:out value="${todo.targetDate}" /></td>
              <td><c:out value="${todo.status}" /></td>
              <td>
              <a href="<%=request.getContextPath()%>/todos?action=edit&id=${todo.id}" class="btn btn-info btn-sm">수정</a>
              <a href="<%=request.getContextPath()%>/todos?action=delete&id=${todo.id}" class="btn btn-danger btn-sm">삭제</a>
              </td>
            </tr>
          </c:forEach>
        </tbody>
      </table>
    </div>
    <!-- 본문 끝 -->
    <jsp:include page="../common/footer.jsp" />
    <script src="<%=request.getContextPath()%>/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

listの上部に「保留中」ボタンをクリックすると、

が表示されます.

	private void showNewForm(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		RequestDispatcher dispatcher = request.getRequestDispatcher("todo/todo-form.jsp");
		dispatcher.forward(request, response);
		
	}

前回作成した挿入方法を使用してデータベースにデータを追加

	public void insertTodo(Todo todo) {
		String INSERT_USER_SQL = "insert into todos(title, username, description, target_date,is_done) "
				+ "value (?,?,?,?,?)";

		try {
			Connection conn = JDBCUtils.getConnection();
			PreparedStatement pstmt = conn.prepareStatement(INSERT_USER_SQL);
			pstmt.setString(1, todo.getTitle());
			pstmt.setString(2, todo.getUsername());
			pstmt.setString(3, todo.getDescription());
			pstmt.setDate(4, JDBCUtils.getSQLDate(todo.getTargetDate())); // ToDo에 입력된 날짜를 SQL문에 입력될 날짜타입으로 변경
			pstmt.setBoolean(5, todo.isStatus()); // pstmt 완성

			pstmt.executeUpdate(); // pstmt 실행, 결과가 없는 Update, Delete, Drop, Insert 등은 executeUpdate() 사용
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

各行の修正ボタンをクリックすると、クリックした行のid値が一緒に送信され、選択するオブジェクト

が修正する.

		// 수정할 todo객체를 같이 보냄
		Long id = Long.parseLong(request.getParameter("id"));
		Todo theTodo = todoDAO.selectTodo(id);
		
		request.setAttribute("todo", theTodo);
		
		RequestDispatcher dispatcher = request.getRequestDispatcher("todo/todo-form.jsp");
		dispatcher.forward(request, response);
		
	}

最後に作成した更新方法を使用して、データベースデータ

を変更

	public boolean updateTodo(Todo todo) {
		String UPDATE_SQL = "update todos set description = ?, title = ?, username = ?, target_date = ?, is_done = ? where id = ? ";
		boolean status = false;	
		try {
			Connection conn = JDBCUtils.getConnection();
			PreparedStatement pstmt = conn.prepareStatement(UPDATE_SQL);
			pstmt.setString(1, todo.getDescription());
			pstmt.setString(2, todo.getTitle());
			pstmt.setString(3, todo.getUsername());
			pstmt.setDate(4, JDBCUtils.getSQLDate(todo.getTargetDate()));		
			pstmt.setBoolean(5, todo.isStatus());
			pstmt.setLong(6, todo.getId());

			status = pstmt.executeUpdate() > 0; // 한 줄 이상 Update가 되면 true			
			
		} catch (SQLException e) {
			System.out.println("SQL UPDATE TODO ERROR");
			return false;
		}
		System.out.println("UPDATE 완료");
		return status;
	}

説明を変更して「保存」(Save)をクリックすると、データベースも変更されます.