MVC 패턴을 사용한 간단 Todo List
ArrayList/Vector 활용으로 작성하였으며 추후 Vector로 통일하였기 때문에 ArrayList로 변경하면 동일 코드
구현 화면
입력 전 : 간단한 화면 구현
TODOLIST 입력
빈칸에 입력할 내용을 적고 입력 버튼을 클릭하면 입력한 내용이 순차적으로 추가됨
TODOLIST 삭제
삭제할 칸의 링크를 클릭하면 삭제됨
TODOLIST 수정
수정하고자 하는 내용을 변경한 후 수정 버튼을 누르면 수정이 적용됨
TODOLIST 전체 삭제
하단의 모두삭제를 클릭하면 전체 todolist가 삭제됨
View - list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<style>
table, th, td{
width: 500px;
border: 1px solid black;
border-collapse: collapse;
padding: 5px 10px;
}
input[type="text"]{
width: 100%;
}
button{
width: 100%;
}
input[name="todo"]{
border-width:0px;
}
</style>
</head>
<body>
<h3>TO DO LIST</h3>
<form action="add" method="post">
<table class="input">
<colgroup>
<col width="80%"/>
<col width="20%"/>
</colgroup>
<tr>
<td><input type="text" name="todo"/></td>
<td><button>입력</button></td>
</tr>
</table>
</form>
<c:if test="${list.size() == 0}">나만의 할 일을 입력 해 보세요!</c:if>
<c:if test="${list.size() > 0}">
<table>
<colgroup>
<col width="10%"/>
<col width="60%"/>
<col width="15%"/>
<col width="15%"/>
</colgroup>
<thead>
<tr>
<th>번호</th>
<th>할일</th>
<th>수정</th>
<th>삭제</th>
</tr>
</thead>
<tbody>
<!-- list에 담기 아이탬을 todo라는 변수에 담아 모두 꺼내겠다.
변수의 속성을 담고 있는 varStatus를 사용해 index번호를 꺼냄 -->
<c:forEach items="${list}" var="todo" varStatus="stat">
<tr>
<!-- remove라는 요청 주소로 idx 라는 파라메터 이름으로 값을 전송(GET) -->
<td>${stat.index+1}</td>
<td><input type="text" name="todo" value="${todo}"/></td>
<!-- 왜 접근은 index로 할까 -->
<td><button onclick="update(${stat.index},this)">수정</button></td>
<td><a href="remove?idx=${stat.index}">삭제</a></td>
</tr>
</c:forEach>
</tbody>
</table>
</c:if>
<a href="clear">모두삭제</a>
</body>
<script>
var msg = "${msg}";
if(msg!=""){
alert(msg);
}
// 버튼을 통해서 todo안에 담긴 내용을 가져오고 싶음
function update(idx,elem) {
console.log(idx,elem);
var val = $(elem).closest('tr').find('input[name="todo"]').val();
/*
$(elem).closest('tr').find('input[name="todo"]').val();
elem을 통해서 가져온 요소(이벤트 당사자)의 가장 가까운 tr요소의 (부모요소)
자식요소 중에서 이름이 todo인 input 태그를 찾아
value값을 가져옴
*/
// location.href : 현재 페이지가 존재하는 전체 경로설정
// uri 패턴이 "/update"로 지정 됐을 때
// 파라메터로 idx이름으로 매개변수로 받아온 ${stat.index} 즉, vector의 index값과
// todo 라는 이름으로 위에서 가져온 특정 index에 담긴 내용을 보냄
location.href='update?idx='+idx+'&todo='+val;
}
</script>
</html>Model - VectorModel
package kr.co.web.model;
import java.util.Vector;
public class VectorModel {
// private : VectorModel 안에 있는 메소드에서만 접급 할 수있음 (캡슐화)
// static 으로 지정하면 원본은 건들기 때문에 주로 Private을 붙여줌
private static Vector<String> vector = new Vector<String>();
public void addVector(String todo) {
vector.add(todo);
System.out.println(vector.get(0));
}
public Vector<String> getVector() {
return vector;
}
public void delVector(String idx) {
System.out.println("삭제완료");
vector.remove(Integer.parseInt(idx));
}
public void updateVector(String idx, String todo) {
vector.set(Integer.parseInt(idx), todo); //대상 인덱스, 바꿀 값 : 이전 값을 반환
}
public void clearVector() {
if(vector.isEmpty()==false) { // 비워져 있는지 꼭 확인하기
vector.clear();
}
}
}
Controller - VectorController
package kr.co.web.controller;
import java.io.IOException;
import java.util.Vector;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import kr.co.web.model.VectorModel;
@WebServlet(urlPatterns = {"/","/add","/remove","/update"})
public class VectorController extends HttpServlet {
// 항상 선언은 최상단에 하기
VectorModel model = new VectorModel();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
dual(req,resp); // get 방식으로 오면 받아서 dual로 보냄
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
dual(req,resp); // post 방식으로 오면 받아서 dual로 보냄
}
// get/post 방식으로 왔을 때 각각의 메서드에 dual(req, resp)을 실행해주어
// 어떤 방식으로 오던지 이 메서드에서 처리한다는 의미가 됨
private void dual(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
// 어떤 uri 패턴으로 들어왔는지 확인하는 과정
String uri = req.getRequestURI();
String cxt = req.getContextPath();
String addr = uri.substring(cxt.length());
//System.out.println(addr);
// uri 패턴마다 해야할 일을 지정해 줌
// "/" vector에 담긴 내용을 list.jsp로 출력
// "/add" vector에 내용을 순차적으로 추가 -> "/"로 변경 내용 출력
// "/remove" vector의 특정 인덱스를 삭제 -> "/"로 변경 내용 출력
// "/update" vector의 특정 인덱스를 수정 -> "/"로 변경 내용 출력
// "/clear" vector의 모든 인덱스를 삭제 -> "/"로 변경 내용 출력
// "/" vector에 담긴 내용을 list.jsp로 출력
if(addr.equals("/")) {
//System.out.println("Root Page Loading");
// vector에 model.getVector()를 통해 접근한 vector를 담아옴
Vector<String> vector = model.getVector();
// Vector에 담긴내용을 가져와 list.jsp로 list이름으로 내려보내기
// list.jsp에 list이름으로 forEach문이 있기 때문에 화면상에 출력된다.
req.setAttribute("list", vector);
RequestDispatcher dis = req.getRequestDispatcher("list.jsp");
dis.forward(req, resp);
}
// "/add" vector에 내용을 순차적으로 추가 -> "/"로 변경 내용 출력
if(addr.equals("/add")) {
// todo라는 이름으로 넘어온 파라메터의 값을 todo에 저장함
String todo = req.getParameter("todo");
//System.out.println(todo);
// todo를 매개변수로 하는 addVector() 메서드를 실행
//addVector(todo) : todo 내용을 model에 추가하기 위한 메서드
// .add(추가할 내용)
model.addVector(todo);
//System.out.println("Add Complete");
// 추가한 내용이 출력 될수 있도록 함
resp.sendRedirect(cxt);
// 위와 같은 의미
//RequestDispatcher dis = req.getRequestDispatcher("/");
//dis.forward(req, resp);
}
// "/remove" vector에 특정 인덱스를 삭제 -> "/"로 변경 내용 출력
if(addr.equals("/remove")) {
// list.jsp에서 idx라는 이름으로 인덱스정보를 담아 파라메터로 넘겼으므로 idx에 저장
String idx = req.getParameter("idx");
//저장한 인덱스의 값을 삭제할 수 있도록 model.delVector(idx)의 매개변수로 넘겨줌
//delVector(todo) : model 의 특정 인덱스를 지우기 위한 메서드
// .remove(대상index)
model.delVector(idx);
// list.jsp의 msg라는 이름으로 내려보냄 -> list.jsp에서 alert으로 활용
req.setAttribute("msg", "삭제완료");
RequestDispatcher dis = req.getRequestDispatcher("/");
dis.forward(req, resp);;
}
// "/update" vector의 특정 인덱스를 수정 -> "/"로 변경 내용 출력
if(addr.equals("/update")) {
String idx = req.getParameter("idx"); // 수정하려는 vector의 index
String todo = req.getParameter("todo"); // 수정하려는 index의 내용
//System.out.println("Update : "+idx+todo);
//특정 인덱스의 값을 수정할 수 있도록 model.listUpdate(idx,todo)의 매개변수로 넘겨줌
//updateVector(idx,todo); : model 의 특정 인덱스를 수정하기 위한 메서드
//.set(대상index, 변경할 내용)
model.updateVector(idx,todo);
// 추가한 내용이 출력 될수 있도록 함
resp.sendRedirect(cxt);
}
// "/clear" vector의 모든 인덱스를 삭제 -> "/"로 변경 내용 출력
if(addr.equals("/clear")) {
//clearVector(); : model 의 모든 인덱스를 삭제하기 위한 메서드
//.clear()
model.clearVector();
// 추가한 내용이 출력 될수 있도록 함
resp.sendRedirect(cxt);
}
}
}
