본문 바로가기

Project/Todo-List(Servelt, JSP)

2. Main 화면 구현

1. MainServlet.java 구현

- DB에 있는 데이터를 가져오는 작업이 선행되야 하므로 MainServlet에서 TodoDao를 이용하여 데이터를 불러온 후,

  그 데이터를 main.jsp로 전송한다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	TodoDao dao = new TodoDao();
	List<TodoDto> dtoList = new ArrayList<TodoDto>();
	dtoList = dao.getTodos();
	
	// DB에서 얻은 TodoList를 request scope에 저장한다.
	request.setAttribute("dtoList", dtoList);
	
	// MainServlet에서 생성한 정보를 main.jsp로 forwarding한다.
	RequestDispatcher rd = request.getRequestDispatcher("/main.jsp");
	rd.forward(request, response);
}

- 코드 : https://github.com/kook1932/TodoList/blob/master/MainServlet.java

 

kook1932/TodoList

Servlet, JSP, HTML, CSS, Javascript. Contribute to kook1932/TodoList development by creating an account on GitHub.

github.com

 

2. main.jsp 구현

- main.jsp : https://github.com/kook1932/TodoList/blob/master/main.jsp

 

kook1932/TodoList

Servlet, JSP, HTML, CSS, Javascript. Contribute to kook1932/TodoList development by creating an account on GitHub.

github.com

  - Java Code를 최대한 작성하지 않고, JSTL을 최대한 사용한다.

  - header에 할 일 추가 버튼을 작성하고, body에 type에 따른 할 일 목록을 보여준다.

  - body를 4개의 section으로 나누고 첫 번째는 여백으로 사용한다.

  - 2,3,4번째 section에 type에 따른 목록을 출력한다.

 

- main.css : https://github.com/kook1932/TodoList/blob/master/main.css

 

kook1932/TodoList

Servlet, JSP, HTML, CSS, Javascript. Contribute to kook1932/TodoList development by creating an account on GitHub.

github.com

 

3. 결과

- 할 일 등록 버튼이나 화살표, X 버튼을 눌러도 작동되진 않지만 DB에 저장된 할 일 목록을 잘 나타내고 있다.