Java / Twitter clone / task management system ④ Display task list

Introduction

I would like to write an article for those who are writing applications for the first time using Java. We would appreciate it if you could use it as a reference for creating training assignments for your portfolio and company. This time, we will create a task manager. By applying this, you can also use it to create Twitter clones.

I will post articles for each function of the application.

  1. Database creation
  2. Login function
  3. Task registration function
  4. List display -Sort function -Search function
  5. Editing function
  6. Delete function
  7. Exclusive control

Execution environment

eclipse4.16.0 Tomcat9 Java11

Purpose

  1. Create view
  2. Create DAO (list display / sort)
  3. Create Servlet (list display / sort)
  4. Create DAO (search function)
  5. Create Servlet (search function)
  6. Next notice

Create view

Create a search form and task list table

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.List, model.entity.TaskBean, model.entity.UserBean, model.dao.UserDAO, model.dao.CategoryDAO, model.dao.StatusDAO"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Task list</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/task-list.css">
</head>
<body>
<%
List<TaskBean> tasklist = (List<TaskBean>) request.getAttribute("tasklist");
UserDAO userdao = new UserDAO();
CategoryDAO categorydao = new CategoryDAO();
StatusDAO statusdao = new StatusDAO();
String error = (String)request.getAttribute("error");
%>
<!-- *****************Search form**********************-->
<jsp:include page="header.jsp"/>
	<div class="contain">
		<h3>Squeeze search</h3>
		<form action="task-search-servlet" method="post">
		<table class="form-table search-table">
    		<tbody>
	    		<tr>
				    <th>Narrow down by task name</th>
				        <td>
				        <div class="search-key">
							<input type="text" class="form-control" name="task_name">
						</div>
				    </td>
			   	</tr>
		       	<tr>
		        	<th>Narrow down by category</th>
		        	<td>
				        <div class="search-key">
				      		<select class="form-control" name="category_id">
				        		<option selected>Choose...</option>
				        		<option value="1">New product A: Development project</option>
				        		<option value="2">Existing product B:Improvement project</option>
				      		</select>
					    </div>
				    </td>
			    </tr>
		        <tr>
				        <th>Narrow down by status</th>
				        <td>
				        <div class="search-key">
			      			<select class="form-control" name="status_code">
			        			<option selected>Choose...</option>
			        			<option value="00">not started yet</option>
			        			<option value="50">Start</option>
			        			<option value="99">Done</option>
			     		 	</select>
			    		</div>
			        </td>
		        </tr>
			    <tr>
			        <th><input type="submit" value="Search" class="search-button"></th>
			        <td>
			        </td>
		        </tr>
		    </tbody>
		</table>
	  	</form>
<!-- *****************Task list table (sort with ▼ button without table)*********-->  
		<h3>Task list</h3>
<%if(error != null){ %>
		<p class="error"><%=error %></p>
<%} %>
		<div class="table-wrapper">
			<table class="list-table" border="1">
		  		<thead>
					<tr class="table-header">
						<th class="fixed01">
							<div class="title">Task ID</div>
							<div class="sort-box" >
								<form action="task-list-servlet" method="post" class="sort-form">
									<input type="submit" value="▲" class="sort">
								</form>
								<form action="task-order-by-id-desc" method="post" class="sort-form">
									<input type="submit" value="▼" class="sort">
								</form>
							</div>
						</th>
						<th class="fixed01"><div class="title">Task name</div></th>
						<th class="fixed01">
							<div class="title">Category</div>
							<form action="task-order-by-category-servlet" method="post" class="sort-form">
								<input type="submit" value="▲" class="sort">
							</form>
							<form action="task-order-by-category-desc" method="post" class="sort-form">
								<input type="submit" value="▼" class="sort">
							</form>
						</th>
						<th class="fixed01">
							<div class="title">Deadline</div>
							<form action="task-order-by-limit-servlet" method="post" class="sort-form">
								<input type="submit" value="▲" class="sort">
							</form>
							<form action="task-order-by-limit-desc" method="post" class="sort-form">
								<input type="submit" value="▼" class="sort">
							</form>
						</th>
						<th class="fixed01">
							<div class="title">User</div>
							<form action="task-order-by-user-servlet" method="post" class="sort-form">
								<input type="submit" value="▲" class="sort">
							</form>
							<form action="task-order-by-user-desc" method="post" class="sort-form">
								<input type="submit" value="▼" class="sort">
							</form>
						</th>
						<th class="fixed01">
							<div class="title">status</div>
							<form action="task-order-by-status-servlet" method="post" class="sort-form">
								<input type="submit" value="▲" class="sort">
							</form>
							<form action="task-order-by-status-desc" method="post" class="sort-form">
								<input type="submit" value="▼" class="sort">
							</form>
						</th>
						<th class="title fixed01">Note</th>
						<th class="title fixed01">Registered Date</th>
						<th class="title fixed01">Update date and time</th>
						<th colspan="3" class="title fixed01">Task management</th>
					</tr>
				</thead>
				<tbody>
	<%
	for(TaskBean task : tasklist){
		String user_name = userdao.getUserName(task.getUser_id());
		String category_name = categorydao.getCategoryName(task.getCategory_id());
		String status_name = statusdao.getStatusName(task.getStatus_code());
	%>
					<tr >
						<td class="parameter"><%=task.getTask_id() %></td>
						<td class="parameter"><%=task.getTask_name() %></td>
						<td class="parameter"><%=task.getCategory_id() %>:<%=category_name %></td>
						<td class="parameter"><%=task.getLimit_date() %></td>
						<td class="parameter"><%=user_name %></td>
						<td class="parameter"><%=task.getStatus_code() %>:<%=status_name %></td>
						<td class="parameter"><%=task.getMemo() %></td>
						<td class="parameter"><%=task.getCreate_datetime() %></td>
						<td class="parameter"><%=task.getUpdate_datetime() %></td>
						<td class="parameter">
							<form action="task-update-detail-servlet" method="post">
								<input type="hidden" name="task_id" value="<%=task.getTask_id() %>">
								<button type="submit" class="task-button">update</button>
							</form>
						</td>
						<td class="parameter">
							<form action="task-delete-detail-servlet" method="post">
								<input type="hidden" name="task_id" value="<%=task.getTask_id() %>">
								<button type="submit" class="task-button">Delete</button>
							</form>
						</td>
						<td class="parameter">
							<form action="comment-detail-servlet" method="post">
								<input type="hidden" name="task_id" value="<%=task.getTask_id() %>">
								<button type="submit" class="task-button">comment</button>
							</form>
						</td>
					</tr>
	<%
	}
	%>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>

DAO creation (list display / sorting)

You can easily create a SQL statement for sorting by changing the t_task part of this SQL statement to category_id or limit_date. This time, we made it possible to sort in the order of task_id, limit_date, category_id, status_code, user_id.

model.dao.TaskDAO.java


	/**
	 *List of tasks
	 * @return tasklist
	 * @throws SQLException
	 * @throws ClassNotFoundException
	 */
	//By task ID
	public List<TaskBean> getTaskList() throws SQLException, ClassNotFoundException{
		String sql = "select * from t_task";
		List<TaskBean> tasklist = new ArrayList<TaskBean>();

		try(Connection con = ConnectionManager.getConnection();
				Statement stmt = con.createStatement();
				ResultSet res = stmt.executeQuery(sql)){
				//The acquired SQL columns are stored in the task object in order. Finally add to tasklist
				while(res.next()) {
					TaskBean task = new TaskBean();
					task.setTask_id(res.getInt("task_id"));
					task.setTask_name(res.getString("task_name"));
					task.setCategory_id(res.getInt("category_id"));
					task.setLimit_date(res.getDate("limit_date"));
					task.setUser_id(res.getString("user_id"));
					task.setStatus_code(res.getString("status_code"));
					task.setMemo(res.getString("memo"));
					task.setCreate_datetime(res.getTimestamp("create_datetime"));
					task.setUpdate_datetime(res.getTimestamp("update_datetime"));

					tasklist.add(task);
				}
		}
		return tasklist;
	}
	//Reverse
		public List<TaskBean> getTaskListOrderByIdDesc() throws SQLException, ClassNotFoundException{
			String sql = "select * from t_task order by task_id desc";
			List<TaskBean> tasklist = new ArrayList<TaskBean>();
			try(Connection con = ConnectionManager.getConnection();
					Statement stmt = con.createStatement();
					ResultSet res = stmt.executeQuery(sql)){
					//The acquired SQL columns are stored in the task object in order. Finally add to tasklist
					while(res.next()) {
						TaskBean task = new TaskBean();
						task.setTask_id(res.getInt("task_id"));
						task.setTask_name(res.getString("task_name"));
						task.setCategory_id(res.getInt("category_id"));
						task.setLimit_date(res.getDate("limit_date"));
						task.setUser_id(res.getString("user_id"));
						task.setStatus_code(res.getString("status_code"));
						task.setMemo(res.getString("memo"));
						task.setCreate_datetime(res.getTimestamp("create_datetime"));
						task.setUpdate_datetime(res.getTimestamp("update_datetime"));

						tasklist.add(task);
					}
			}
			return tasklist;
		}

Creating a Servlet (listing / sorting)

First, it is displayed when transitioning from the menu screen. If you are not logged in, the list will not be displayed.

servlet.TaskListServlet.java


protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		TaskDAO dao = new TaskDAO();

		try {
			HttpSession session = request.getSession();
			boolean logincheck = (Boolean)session.getAttribute("login");
			if(logincheck) {
				//Save all acquired tasks to request scope
				List<TaskBean> tasklist = dao.getTaskList();
				request.setAttribute("tasklist", tasklist);

				//Forward
				RequestDispatcher rd = request.getRequestDispatcher("task-list.jsp");
				rd.forward(request, response);
			}

		} catch(SQLException | ClassNotFoundException | NullPointerException e) {
			e.printStackTrace();
			RequestDispatcher rd = request.getRequestDispatcher("login.html");
			rd.forward(request, response);
		}

The following is an example of a Servlet sent when each sort button is pressed. Create a Servlet for each sorting method defined in TaskDAO.java. For example, this is a Servlet that gets tasks in descending order of task_id.

TaskOrderByIdDesc.java


protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		TaskDAO dao = new TaskDAO();
		List<TaskBean> tasklist = null;
		try {
//Just change the method used here.
			tasklist = dao.getTaskListOrderByIdDesc();
		} catch(SQLException | ClassNotFoundException e) {
			e.printStackTrace();
		}

		request.setAttribute("tasklist", tasklist);
		RequestDispatcher rd = request.getRequestDispatcher("task-list.jsp");
		rd.forward(request, response);
	}

This completes the task list display and sort function.

Next, we will implement the search function.

DAO creation (search function)

The search function will be able to narrow down by task_name, category_id, status_code.

	/**
	 *Search method
	 * @param task_name
	 * @param category_id
	 * @param status_code
	 * @return
	 * @throws SQLException
	 * @throws ClassNotFoundException
	 */
	public List<TaskBean> searchTask(String task_name, int category_id, String status_code) throws SQLException, ClassNotFoundException{
		//SQL statement (used when all search forms are filled)
		String sql = "select * from t_task where task_name like ? and category_id = ? and status_code = ?";
		//Create a SQL statement that uses only the selected items for each search item
		if(category_id == 0 && status_code == "0") {
			sql = "select * from t_task where task_name like ?";
		}else if(category_id ==0) {
			sql = "select * from t_task where task_name like ? and status_code = ?";
		}else if(status_code == "0") {
			sql = "select * from t_task where task_name like ? and category_id = ?";
		}

		List<TaskBean> tasklist = new ArrayList<TaskBean>();
		try(Connection con = ConnectionManager.getConnection();
				PreparedStatement pstmt = con.prepareStatement(sql)){
      //As before, for each search item, assign and specify arguments in a form that matches the SQL statement that uses only the selected ones.
			if(category_id == 0 && status_code == "0") {
				pstmt.setString(1, task_name);
			}else if(category_id ==0) {
				pstmt.setString(1, task_name);
				pstmt.setString(2, status_code);
			}else if(status_code == "0") {
				pstmt.setString(1, task_name);
				pstmt.setInt(2, category_id);
			}else {
				pstmt.setString(1, task_name);
				pstmt.setInt(2, category_id);
				pstmt.setString(3, status_code);
			}

			ResultSet res = pstmt.executeQuery();
			//The acquired SQL columns are stored in the task object in order. Finally add to tasklist
			while(res.next()) {
				TaskBean task = new TaskBean();
				task.setTask_id(res.getInt("task_id"));
				task.setTask_name(res.getString("task_name"));
				task.setCategory_id(res.getInt("category_id"));
				task.setLimit_date(res.getDate("limit_date"));
				task.setUser_id(res.getString("user_id"));
				task.setStatus_code(res.getString("status_code"));
				task.setMemo(res.getString("memo"));
				task.setCreate_datetime(res.getTimestamp("create_datetime"));
				task.setUpdate_datetime(res.getTimestamp("update_datetime"));

				tasklist.add(task);
			}
		}
		return tasklist;
	}

Servlet creation (search function)

Please try while looking at the comments.

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		TaskDAO taskdao = new TaskDAO();
		List<TaskBean> tasklist = new ArrayList<TaskBean>();

		//Get request parameters
		request.setCharacterEncoding("UTF-8");
		String task_name = request.getParameter("task_name");
		String category_id_str = request.getParameter("category_id");
		String status_code = request.getParameter("status_code");

		//Check for input omissions
		if(category_id_str.equals("Choose...")) {
			category_id_str = "0";
		}
		if(status_code.equals("Choose...")) {
			status_code = "0";
		}

		task_name = "%" + task_name + "%";

		//category_Return id to int type
		int category_id = Integer.parseInt(category_id_str);

		try {
			//Search by refined content
			tasklist = taskdao.searchTask(task_name, category_id, status_code);

			//If there are 0 tasklists, an error screen will be displayed.
			if(tasklist.size() == 0) {
				String error = "There is no result";
				request.setAttribute("error", error);
			}

		}catch(SQLException | ClassNotFoundException e) {
			e.printStackTrace();
			RequestDispatcher rd = request.getRequestDispatcher("task-list-servlet");
			rd.forward(request, response);
		}
		request.setAttribute("tasklist", tasklist);
		RequestDispatcher rd = request.getRequestDispatcher("task-list.jsp");
		rd.forward(request, response);
	}
  1. Next notice This time, we have been working on displaying the task list and processing it. Next time, I will summarize the task editing functions that can be transitioned from the task list.

Recommended Posts

Java / Twitter clone / task management system ④ Display task list
Java / Twitter clone / task management system ⑥ Add deletion function
Java / Twitter clone / task management system (1) Create a database
Java / Twitter clone / task management system (2) Add login function
Java / Twitter clone / task management system ⑤ Add editing function
Java / Twitter clone / task management system ③ Add task registration function
Clone Java List.
Java memorandum (list)
About List [Java]