Spring 개발자 수업 97일차(2) - 간단한 메모장 만들기

간단한 메모장 만들기

- 현재까지 배운 Spring 내용들로 실제 오라클 DB와 연동해서 간단한 메모장을 아래의 메모장 처럼 만들어 보자.

완성된 간단한 메모장기능을 하는 웹 페이지

- 파일 생성

com.test.spring > MemoController.java // 컨트롤러
                > MemoDAO.java        // DAO
                > MemoDTO.java        // DTO
                > DBUtil.java         // DB연결
               
views > list.jsp    // 시작(목록) 페이지
      > add.jsp     // 쓰기(폼) 페이지
      > addok.jsp   // 쓰기(처리) 페이지
      
SQL > db.sql

 

[ SQL > db.sql ]

- tblMemo 테이블 만들기

create table tblMemo (
    seq number primary key,                 -- 메모번호(PK)
    name varchar2(30) not null,             -- 작성자
    memo varchar2(1000) not null,           -- 메모
    regdate date default sysdate not null,  -- 날짜
    category varchar2(50) not null          -- 분류(자식 테이블 분리)
);

create sequence seqMemo;

 

[ Spring > MemoDTO.java ]

- 가져올 데이터인 tblMemo의 컬럼 getter & setter (Lombok 라이브러리 사용)

import lombok.Data;

@Data
public class MemoDTO {
	private String seq;
	private String name;
	private String memo;
	private String regdate;
	private String category;
}

 

[ Spring > MemoController.java ]

- 메모 목록, 쓰기, 쓰기(처리), 삭제(처리) 작업하기

@Controller
public class MemoController {

	@Autowired
	private MemoDAO dao; // 여러업무에서 공통으로 사용할 자원

	// 메모 목록
	@RequestMapping(value = "/list.memo", method = { RequestMethod.GET })
	public String list(HttpServletRequest req, HttpServletResponse resp, HttpSession session) {
		
		// 1. DB 작업 > DAO 위임 > select
		ArrayList<MemoDTO> list = dao.list();
		
		// 2. JSP 호출하기 + 결과 전달
		req.setAttribute("list", list);
		
		return "list";
	}

	// 메모 쓰기
	@RequestMapping(value = "/add.memo", method = { RequestMethod.GET })
	public String add(HttpServletRequest req, HttpServletResponse resp, HttpSession session) {

		return "add";
	}
    
	// 메모 쓰기(처리)
	@RequestMapping(value = "/addok.memo", method = { RequestMethod.POST })
	public String addok(HttpServletRequest req, HttpServletResponse resp, HttpSession session,
    						MemoDTO dto) {

		// 1. 데이터 가져오기 > 매개변수 추가(MemoDTO dto)
        
		// 2. DB 작업 > MemoDAO는 다른곳에서도 쓰이므로 멤버로 선언하기(MemoDAO dao)
		int result = dao.add(dto);
        
		// 3. JSP 호출하기 + 결과 처리
		req.setAttribute("result", result);
		
		return "addok";
	}    


	// 메모 삭제(처리) > 페이지 이동 없으니 void로 반환값 X (개발자 마음대로..)
	@RequestMapping(value = "/delok.memo", method = { RequestMethod.GET })
	public void delok(HttpServletRequest req, HttpServletResponse resp, HttpSession session, String seq) {
		
		// 1. 데이터 가져오기(seq) > 매개변수 추가(String seq)
        
		// 2. DB 작업 > DAO 위임 > delete
		dao.del(seq);

		// 3. 결과 처리
		try {
			resp.sendRedirect("/spring/list.memo");
		} catch (IOException e) {
			e.printStackTrace();
		}
		
	}

}

 

[ Spring > MemoDAO.java ]

- MemoDAO() 생성자 > DB 연결

- add(), list(), del() 메소드 만들기 > DB 작업

// 저장소
@Repository
public class MemoDAO {

	private Connection conn;
	private PreparedStatement pstat;
	private ResultSet rs;
	
	public MemoDAO() {
		conn = DBUtil.open();
	}

	public int add(MemoDTO dto) {
		
		try {
			
			String sql = "insert into tblMemo (seq, name, memo, regdate, category) "
					+ "values(seqMemo.nextVal, ?, ?, default, ?)";
			pstat = conn.prepareStatement(sql);
			
			pstat.setString(1, dto.getName());
			pstat.setString(2, dto.getMemo());
			pstat.setString(3, dto.getCategory());
			
			return pstat.executeUpdate();
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return 0;
	}

	public ArrayList<MemoDTO> list(String category) {
		
		try {
			
			String where = "";
			
			if (category != null) {
				where = " where category = '" + category + "' ";
			}
			
			String sql = "select * from tblMemo " + where + " order by seq desc";
			
			pstat = conn.prepareStatement(sql);
			
			rs = pstat.executeQuery();
			
			ArrayList<MemoDTO> list = new ArrayList<MemoDTO>();
			
			while ( rs.next() ) {
				MemoDTO dto = new MemoDTO();
				dto.setSeq(rs.getString("seq"));
				dto.setName(rs.getString("name"));
				dto.setMemo(rs.getString("memo"));
				dto.setRegdate(rs.getString("regdate"));
				dto.setCategory(rs.getString("category"));
				
				list.add(dto);
			}
			
			return list;
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return null;
	}

	public int del(String seq) {
		
		try {
			
			String sql = "delete from tblMemo where seq = ?";
			pstat = conn.prepareStatement(sql);
			
			pstat.setString(1, seq);
			
			return pstat.executeUpdate();
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return 0;
		
	}

}

 

[ JSP > list.jsp ]

- 컨트롤러에서 넘겨받은 MemoDTO에 있는 번호, 이름, 메모내용, 작성일자를 list.jsp에서 출력해준다.

- 메모쓰기 / 삭제하기 버튼도 따로 추가한다.

<h1 class="page-header">Memo</h1>
<table class="table table-bordered">
	<tr>
		<th>번호</th>
		<th>메모</th>
		<th>이름</th>
		<th>날짜</th>
		<th>분류</th>
		<th>삭제</th>
	</tr>
	<c:forEach items="${ list }" var="dto">
	<tr>
		<td>${ dto.seq }</td>
		<td>${ dto.memo }</td>
		<td>${ dto.name }</td>
		<td>${ dto.regdate }</td>
		<td>${ dto.category }</td>
		<td><button type="button" class="btn btn-default btn-sm"
				onclick="location.href='/spring/delok.memo?seq=${ dto.seq}';">삭제하기</button>
		</td>
	</tr>
	</c:forEach>
</table>

<div>
	<button type="button" class="btn btn-default" 
		onclick="location.href='/spring/add.memo';">메모쓰기</button>
</div>

 

[ JSP > add.jsp ]

- 메모 작성을 위한 form을 만들어서 POST로 addok.memo에 넘긴다.

<form method="POST" action="/spring/addok.memo">

	<table class="table table-bordered">
		<tr>
			<th>이름</th>
			<td><input type="text" name="name" class="form-control" required></td>
		</tr>
		<tr>
			<th>메모</th>
			<td><input type="text" name="memo" class="form-control" required></td>
		</tr>
		<tr>
			<th>분류</th>
			<td><input type="text" name="category" class="form-control" required></td>
		</tr>
	</table>
	
	<div>
		<button type="submit" class="btn btn-default">메모쓰기</button>
		<button type="button" class="btn btn-default"
			onclick="location.href='/spring/list.memo';">돌아가기</button>
	</div>
   
</form>

 

[ JSP > addok.jsp ]

- 따로 페이지 body 단에서 구현할 건 없으며 script에서 결과를 확인할 수 있게 alert() 처리만 해주기

<script>
	<c:if test="${ result == 1 }">
		alert('성공!!');
		location.href = '/spring/list.memo';
	</c:if>	
		
	<c:if test="${ result == 0 }">
		alert('실패!!');
		location.href = '/spring/list.memo';
	</c:if>
</script>

 

- 결과 페이지 (메모 작성하기 > add.memo > addok.memo)

add.memo에서 작성한 form을 addok,memo로 전송한 결과를 팝업창을 통해 확인 하며 list.memo 페이지로 이동한다.

 

- 결과 페이지(리스트 및 삭제하기 > list.memo > delok.memo )

오른쪽 페이지에서 6번, 5번 글을 삭제하기 버튼 눌러서 삭제된 모습이다. 삭제 버튼을 누른 뒤 별다른 작업을 안해놨으므로, 바로 list.memo 페이지로 돌아온다.