JSP 피피티 12강 서비스 프로그램 구현(학과관리 페이지-학과추가)

11강에서 배운 서비스레이어로 실제 페이지를 구현한다고 했을때.

이런식이다. 처음 봤을때 이게 뭔가 싶었다. 근데 선생님 말씀을 들으니 좀 알겠더라

일단 아래와 같이 내가 작성했던 블로그의 목록을 확인 할 수 있다. 이 목록에서 글쓰기, 수정, 삭제가 능하고 글 제목을 누르면 어떤 글을 썼는지 상세 보기도 가능하다. 이와 같은 기능을 수행하는데 Get방식으로 값을 전달한다. 

 

글쓰기를 눌르면 글을 입력할수 있는 공간이 나오는데 이게 form 구조이다. 이 form에 글을 쓰고 저장(완료)을 누르면 POST방식으로 값을 처리한다. 뭐 수정역시 이와 같은 방식이다. 

 

이 목록에서 바로 수정하기가 가능하고 또 상세페이지에서 역시 수정하기가 가능하다. 

삭제역시 목록에서 바로 삭제하기가 가능하고 상세페이지에서 삭제하기가 가능하다.

 

첫 그림은 이것을 설명하는 것이다.

---

필요한 컨트롤러!

/src/main/java.study.spring.simplespring.controllers/DepartmentController.java (더보기 클릭)

package study.spring.practicespring.controllers;

import java.io.IOException;
import java.util.List;

import javax.servlet.http.HttpServletResponse;


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

import study.spring.practicespring.helper.PageData;
import study.spring.practicespring.model.Department;
import study.spring.practicespring.service.DepartmentService;

/*학과 관리 컨트롤러*/
@Controller
public class DepartmentController {
	/* Service 패턴 구현체 주입 */
	@Autowired
	DepartmentService departmentService;
	
	/*"/프로젝트 이름"에 해당하는 ContextPath변수 주입*/
	// --> import org.springframework.beans.factory.annotation.Value;
	@Value("#{servletContext.contextPath}")
	String contextPath;
	
	/* 목록 페이지 */
	@RequestMapping(value = "/department/list.do", method = RequestMethod.GET)
	public String list(Model model, HttpServletResponse response,
		//검색어
		@RequestParam(value="keyword", required=false) String keyword,
		//페이지 구현에서 사용할 현재 페이지 번호
		@RequestParam(value="page", defaultValue="1") int nowPage){
		
		int totalCount = 0;	//전체 게시글 수
		int listCount = 10; //한 페이지당 표시할 목록 수
		int pageCount = 5; //한 그룹당 표시할 페이지 번호 수
			
		//조회에 필요한 조건값(검색어)를 beans에 담는다.
		Department input = new Department();
		input.setDname(keyword);
		input.setLoc(keyword);
		
		
		List<Department> output = null; //조회결과가 저장될 객체
		PageData pageData = null; 		//페이지 번호를 계산한 결과가 저장될 객체
		
		try {
			//전체 게시글 수 조회
			totalCount = departmentService.getDepartmentCount(input);
			//페이지 번호 계산 --> 계산결과를 로그로 출력될 것이다.
			pageData = new PageData(nowPage, totalCount, listCount, pageCount);
			
			//SQL의 LIMIT절에서 사용될 값을 Beans의 static변수에 저장
			Department.setOffset(pageData.getOffset());
			Department.setListCount(pageData.getListCount());
			//데이터 조회하기
			output = departmentService.getDepartmentList(input);
		}catch(Exception e) {e.printStackTrace();}
		
		//view 처리
		model.addAttribute("output", output);
		model.addAttribute("keyword", keyword);
		model.addAttribute("pageData", pageData);
		return "department/list";
	}
	
	/* 작성 폼 페이지 */
	@RequestMapping(value = "/department/add.do", method = RequestMethod.GET)
	public String add(Model model, HttpServletResponse response) {
		return "department/add";
	}
	
	/* 작성 폼에 대한 action 페이지 */
	@RequestMapping(value = "/department/add_ok.do", method = RequestMethod.POST)
	public void addOk(Model model, HttpServletResponse response,
			@RequestParam(value="dname") String dname,
			@RequestParam(value="loc") String loc) {
		
		//저장할 값들을 Beans에 담는다.
		Department input = new Department();
		
		
		input.setDname(dname);
		input.setLoc(loc);
		
		try {
			//데이터 저장 --> 데이터 저장에 성공하면 파라미터로 전달하는 input 객체에 PK값이 저장된다.
			departmentService.addDepartment(input);
		}catch(Exception e) {e.printStackTrace();}
		
		
		
		
		//저장 결과를 확인하기 위해서 데이터 저장시 생성된 PK값을 상세 페이지로 전달해야 한다.
		String redirectUrl = contextPath + "/department/detail.do?deptno=" + input.getDeptno();
		
		try {
			response.sendRedirect(redirectUrl);
		}catch(IOException e) {e.printStackTrace();}
	}
	
	/* 상세페이지 */
	@RequestMapping(value = "/department/detail.do", method = RequestMethod.GET)
	public String detail(Model model, HttpServletResponse response,
			@RequestParam(value="deptno") int deptno) {
		
		//데이터 조회에 필요한 조건값을 Beans에 저장하기
		Department input = new Department();
		input.setDeptno(deptno);
		
		//조회 결과를 저장할 객체 선언
		Department output = null;
		
		try {
			//데이터 조회
			output=departmentService.getDepartmentItem(input);
		}catch(Exception e) {
			e.printStackTrace();
		}
		
		//View처리
		model.addAttribute("output",output);
		return "department/detail";
	}
	
	/* 삭제 처리 구현 */
	@RequestMapping(value = "/department/delete_ok.do", method = RequestMethod.GET)
	public void deleteOk(Model model, HttpServletResponse response,
			@RequestParam(value="deptno") int deptno) {
		//데이터 삭제에 필요한 조건값을 Beans에 저장하기
		Department input = new Department();
		input.setDeptno(deptno);
		
		try {
			//데이터 삭제
			departmentService.deleteDepartment(input);
		}catch(Exception e) {e.printStackTrace();}
		
		//확인할 대상이 삭제된 상태이므로 목록 페이지로 이동
		try {
			response.sendRedirect(contextPath + "/department/list.do");
		}catch(IOException e) {e.printStackTrace();}
		
	}
	
	/* 수정 폼 페이지 */
	@RequestMapping(value ="/department/edit.do", method = RequestMethod.GET)
	public String edit(Model model, HttpServletResponse response,
			@RequestParam(value="deptno") int deptno) {
		
		//데이터 조회에 필요한 조건값을 Beans에 저장하기
		Department input = new Department();
		input.setDeptno(deptno);
		
		//수정할 데이터의 원본 조회하기
		Department output = null;
		
		try {
			output = departmentService.getDepartmentItem(input);
		}catch(Exception e){e.printStackTrace();}
		
		//View처리
		model.addAttribute("output",output);
		
		return "department/edit";
	}
	
	/* 수정폼에 대한 action 페이지 */
	@RequestMapping(value="/department/edit_ok.do", method = RequestMethod.POST)
	public void editOk(Model model, HttpServletResponse response,
			@RequestParam(value="deptno") int deptno,
			@RequestParam(value="dname") String dname,
			@RequestParam(value="loc") String loc) {
		
		//수정할 값들을 Beans에 담는다.
		Department input = new Department();
		input.setDeptno(deptno);
		input.setDname(dname);
		input.setLoc(loc);
		
		try {
			//데이터 수정
			departmentService.editDepartment(input);
		}catch(Exception e) {e.printStackTrace();}
		
		//수정한 대상을 상세페이지에 알려주기 위해서 PK값을 전달해야 한다.
		String redirectUrl = contextPath + "/department/detail.do?deptno=" + input.getDeptno();
		try {
			response.sendRedirect(redirectUrl);
		}catch(IOException e) {e.printStackTrace();}
	}
}

------------------------------------------컨트롤러 끝---------------------------------------

학과관리 시작

스프링 프로젝트 home.jsp 페이지에 '학과 관리 웹 페이지' 메뉴를 추가한다.

<!-- 데이터베이스 연동 -->
	<h2>Database</h2>
	<ul>
		<li><a href="${pageContext.request.contextPath}/department/list.do">학과 관리 웹 페이지</a></li>
	</ul>

프로젝트를 실행 했을때 다음과 같은 메뉴가 추가 된 것을 확인 할 수 있다.

구현하고자 하는 View 파일들을 미리 생성해 놓는다.

일단 위에서 '학과 관리 웹 페이지' 메뉴를 누르면 (controller를 거쳐) views/department/list.jsp페이지로 이동한다.

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello JSP</title>
</head>
<body>
    <h1>학과관리</h1>
    <a href="${pageContext.request.contextPath}/department/add.do">[학과추가]</a>
    
    <!-- 검색폼 -->
    <form method="get" action=${pageContext.request.contextPath}/department/list.do>
    	<label for="keyword">검색어:</label>
    	<input type="search" name="keyword" id="keyword" placeholder="학과명 or 위치 검색" value="${keyword}"/>
    	<button type="submit">검색</button>
    </form>
    
    <hr/>
    
  

</body>
</html>

결과 화면

저 위의 페이지에서 학과 추가를 누르면 (controller를 거쳐)

add.jsp페이지로 이동

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello JSP</title>
</head>
<body>
    <h1>학과추가</h1>
    <form method="post" action="${pageContext.request.contextPath}/department/add_ok.do">
    	<div>
    		<label for="dname">학과명:</label>
    		<input type="text" name="dname" id="dname"/>
    	</div>
    	<div>
    		<label for="loc">위치:</label>
    		<input type="text" name="loc" id="loc"/>
    	</div>
    	<hr/>
    	<button type="submit">저장하기</button>
    	<button type="reset">다시작성</button>
    </form>
</body>
</html>

결과 화면

이같은 입력 폼에 값을 입력 하고 저장하기를 누르면 DepartmentController의 addOk함수가 실행된다.

/* 작성 폼에 대한 action 페이지 */
	@RequestMapping(value = "/department/add_ok.do", method = RequestMethod.POST)
	public void addOk(Model model, HttpServletResponse response,
		//"dname"이라는 이름의 파라미터를 String형 dname변수에 저장하도록 정의
           	 @RequestParam(value="dname") String dname, 
		@RequestParam(value="loc") String loc) {
		
		//저장할 값들을 Beans에 담는다.
		Department input = new Department();
		
		
		input.setDname(dname);
		input.setLoc(loc);
		
		try {
			//데이터 저장 --> 데이터 저장에 성공하면 파라미터로 전달하는 input 객체에 PK값이 저장된다.
			departmentService.addDepartment(input);
		}catch(Exception e) {e.printStackTrace();}
		
		
		
		
		//저장 결과를 확인하기 위해서 데이터 저장시 생성된 PK값을 상세 페이지로 전달해야 한다.
		String redirectUrl = contextPath + "/department/detail.do?deptno=" + input.getDeptno();
		
		try {
			response.sendRedirect(redirectUrl);
		}catch(IOException e) {e.printStackTrace();}
	}
	

 

학과명과 위치에 값으로 '자바학과' ,'6호관'을 입력하고 저장하기 버튼을 누르면 '자바학과'는 "dname"이라는 이름으로 dname에 저장되고 '6호관'은 "loc"라는 이름으로 loc에 저장된다. 이들은 Department 빈즈의 객체 input에 저장되고 departmentService.addDepartment에 파라미터로 전달된다. departmentService.addDepartment에서 입력된 값으로 학과 데이터베이스에 저장을 하고 새로생긴 Primary key인 deptno를 가져와 response.sendRedirect(redirectUrl)을 실행해 페이지를 이동한다.

 

이렇게 해서 이동되는 페이지는 

http://localhost:8080/simplespring/department/detail.do?deptno=338

 

여기인데 이 페이지가 실행되기 전 DepartmentController의  detail 함수를 통해 가야 한다.

/* 상세페이지 */
	@RequestMapping(value = "/department/detail.do", method = RequestMethod.GET)
	public String detail(Model model, HttpServletResponse response,
			@RequestParam(value="deptno") int deptno) {
		
		//데이터 조회에 필요한 조건값을 Beans에 저장하기
		Department input = new Department();
		input.setDeptno(deptno);
		
		//조회 결과를 저장할 객체 선언
		Department output = null;
		
		try {
			//데이터 조회
			output=departmentService.getDepartmentItem(input);
		}catch(Exception e) {
			e.printStackTrace();
		}
		
		//View처리
		model.addAttribute("output",output);
		return "department/detail";
	}
	

Url로 전달된 338이란 값을 "deptno"라는 이름으로 deptno에 저장한다. 저장된 값으로 데이터베이스에 있는 값을 조회하고 조회된 값을 view페이지에 전달하고 detail.jsp페이지가 실행된다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello JSP</title>
</head>
<body>
    <h1>학과정보</h1>
    <p>학과번호: ${output.deptno}</p>  //컨트롤러에서 전달받은 정보를 화면에 표시
    <p>학과이름: ${output.dname}</p>
    <p>학과위치: ${output.loc}</p>
    <hr/>
    <a href="${pageContext.request.contextPath}/department/list.do">[목록보기]</a>
    <a href="${pageContext.request.contextPath}/department/add.do">[학과추가]</a>
    <a href="${pageContext.request.contextPath}/department/edit.do?deptno=${output.deptno}">[학과수정]</a>
    <a href="${pageContext.request.contextPath}/department/delete_ok.do?deptno=${output.deptno}">[학과삭제]</a>
</body>
</html>

다음과 같은 화면이 출력된다.

[학과수정]과, [학과삭제]에서 수정할, 삭제할 대상을 지정하기 위해 데이터를 고유하게 지정할수 있는 PK(deptno)값을 상태유지 한다.

*'[i]'는 신경쓰지 말도록 하자.