EmployeeList.jsp 수정

• 수정 버튼을 눌러 수정 폼 페이지로 이동하게 설정

<td>
<button type="button" class="btn btn-primary control" onclick="location.href='employeeupdateform.action?employeeId=${employee.employeeId}'">수정</button>
</td>
         

Dispatcher-Servlet 수정

• 업데이트폼 컨트롤러 추가
• 수정 폼에서 필요한건 InsertForm에서와 동일하게 지역,직위,부서 리스트가있고
  수정하기 이전 데이터들을 불러와야 한다.

<bean name="/employeeupdateform.action" class="com.test.mvc.EmployeeUpdateFormController">
		<property name="employeeDAO" ref="employeeDAO"></property>
		<property name="positionDAO" ref="positionDAO"></property>
		<property name="departmentDAO" ref="departmentDAO"></property>
		<property name="regionDAO" ref="regionDAO"></property>
	</bean>
<!-- 앞에 name 의 속성값이 의미하는 것은 EmployeeUpdateFormController의 속성 이름을 의미한다. -->
   			<!-- 그럼 걔에 해당하는 setter()를 호출하는 것 -->
			<!-- ref의 속성값은 dispatcher-servlet 에 등록해놓은 employeeDAO -->
			<!-- name 속성값은 해당 클래스에 속성값 이름과 setter 있으면 된다. -->
			<!-- → 이름 수정하면 setter 메소드까지 꼭 같이 수정해줘야 함 -->	

---

EmployeeUpdateFormController.java

• 수정 폼에서 필요한건 InsertForm에서와 동일하게 지역,직위,부서 리스트가있고
  수정하기 이전 데이터들을 불러와야 한다.

/*======================================================
	EmployeeUpdateFormController.java
	- 사용자 정의 컨트롤러 클래스
	- 직원 데이터 수정 폼 요청에 대한 액션 처리
	- DAO 객체에 대한 의존성 주입(DI)을 위한 준비 필요
	  → 인터페이스 형태의 자료형을 속성으로 구성
	  → setter 메소드 구성
=======================================================*/
/*
	insertformController에서는 employeeDAO 만 주입받아서 처리했었는데
	updateFormController에서는 그 방법으로 말고, 만약 employeeDAO에 지역,직위,부서 리스트가 없었을 때
	employeeDAO, regionDAO, positionDAO, departmentDAO 다 주입받아야 하는
	방식으로 처리해보자
*/
package com.test.mvc;

import java.util.ArrayList;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.Controller;

public class EmployeeUpdateFormController implements Controller
{
	// check~!!!
	// EmployeeInsertFormController 구성과는 다른 방식으로 처리~!!!
	// ----------------------------
	// → 필요한 모든 메소드를 EmployeeDAO 에 정의해 두었던 상태
	
	// insertformController에서는 
	// private IEmployeeDAO 만 썼어서 dao 라고 이름붙였지만,
	// 여기서는 4개 쓸거라 각각 이름 붙여줌
	// → 이 속성의 개수만큼 setter 필요함
	
	// 주요 속성 구성
	private IEmployeeDAO employeeDAO;
	private IRegionDAO regionDAO;
	private IDepartmentDAO departmentDAO;
	private IPositionDAO positionDAO;
	
	
	// setter 구성
	public void setEmployeeDAO(IEmployeeDAO employeeDAO)
	{
		this.employeeDAO = employeeDAO;
	}
	
	public void setRegionDAO(IRegionDAO regionDAO)
	{
		this.regionDAO = regionDAO;
	}
	
	public void setDepartmentDAO(IDepartmentDAO departmentDAO)
	{
		this.departmentDAO = departmentDAO;
	}
	
	public void setPositionDAO(IPositionDAO positionDAO)
	{
		this.positionDAO = positionDAO;
	}
	
	
	
	@Override
	public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception
	{
		// 액션 코드 
		
		ModelAndView mav = new ModelAndView();	
		
		// 뷰한테 전달해줄 내용들을 미리 구성해두어야 한다.
		ArrayList<Region> regionList = new ArrayList<Region>();
		ArrayList<Department> departmentList = new ArrayList<Department>();
		ArrayList<Position> positionList = new ArrayList<Position>();
		
		try
		{
			// 위의 list 값들을 각각의 dao 한테서 얻어내야 한다.
			// updateformController는 insertformController와는 달리
			// 일단 먼저 data를 일단 수신해야한다.
			
			// 데이터 수신 (EmployeeList.jsp 로 부터... employeeId 수신)
			// [수정] 버튼 눌렀을 때 넘어오는 employeeId를 Controller 가 수신
			String employeeId = request.getParameter("employeeId");
			
			Employee employee = new Employee();
			
			employee = employeeDAO.searchId(employeeId);
			
			// 주입받은 지역,부서,직위 dao로부터 list 들 얻어낸다.
			regionList = regionDAO.list();
			departmentList = departmentDAO.list();
			positionList = positionDAO.list();
			
			// 이렇게 얻어낸 거 뷰한테 전달해야 한다.
			mav.addObject("employee", employee);
			mav.addObject("regionList", regionList);
			mav.addObject("departmentList", departmentList);
			mav.addObject("positionList", positionList);
			
			// 이 때 지정하게 되는 뷰
			mav.setViewName("/WEB-INF/view/EmployeeUpdateForm.jsp");
			
			
		} catch (Exception e)
		{	
			System.out.println(e.toString());
		}
		
		
		return mav;
	}


}

---

EmployeeUpdateForm.jsp

• 단 사원번호는 넘겨받았으나 여기서 다시 UpdateController에게 넘겨주지 않는다면 값을 알수 없다.

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
   request.setCharacterEncoding("UTF-8");
   String cp = request.getContextPath();
   
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EmployeeInsertForm.jsp</title>

<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/jquery-ui.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style type="text/css">
   
   #content
   {
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 500px;
      padding: 15px;
      margin: 30px;
   }
   
   .input-group
   {
      margin: 10px;
   }
      
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="<%=cp%>/js/jquery-ui.js">
<script>

   // 방법 2
   $(document).ready(function()
   {
      // Ajax 요청 및 응답 처리
      ajaxRequest();
      //-- 지금은 페이지 최초 요청되었을 때만 minBasicPay 뿌려주는 형태
      //   그게 아니라 selectbox 바뀔 때마다 뿌려줘야 한다. (Line 51에 작성)
      
      // 테스트
      //alert("확인");
      
      // jQuery-UI 캘린더를 불러오는 함수 처리(datepicker())
      //-- id가 birthday인 걸 클릭하면 달력 나오게 하고 싶은 거
      $("#birthday").datepicker(
      {
         //-- 여기까지하고 확인해보면 생년월일 클릭하면 달력나오고
         //   날짜 선택하면 달력 사라지고 텍스트박스에 해당 날짜 들어감
         //   날짜 05/01/2022 로 들어가고 있음
         //   jquery-ui.js 의 dateFormat: "mm/dd/yy" 에 구문에 의해서
         // 아래와 같이 해당 속성 이름 쓰고 변경해줄 수 있다~
         
         dateFormat: "yy-mm-dd"
         , changeMonth: true
         , changeYear: true
      });
      
      // 먼저, 아래에서 ajax요청과 관련된 함수 만들고 오자
      
      // 직위(select)의 선택된 내용이 변경되었을 경우 수행해야 할 코드 처리
      $("#positionId").change(function()
      {   
         // 테스트
         //alert("변경~!!!");
         
         // Ajax 요청 및 응답 처리
         ajaxRequest();
      });
      
      
      // 직원 추가 버튼이 클릭되었을 때 수행해야 할 코드 처리
      $("#submitBtn").click(function()
      {
         // 테스트
         //alert("버튼 클릭~!!!");
         
         // 테스트
         //alert($("#minBasicPay").val());      //--(Ⅹ)
         // └→ 아무것도 안나옴. 이렇게 얻어낼 수 없다.
         //alert($("#minBasicPay").text());      //--(○)
         
         // 1. 데이터 검사
         //-- 공란(입력항목 누락) 없이 모두 작성되었는지에 대한 여부 확인
         if ($("#name").val()=="" || $("#ssn1").val()=="" || $("#ssn2").val()==""
               || $("#birthday").val()=="" || $("#telephone").val()==""
               || $("#basicPay").val()=="")
         {
            $("#err").html("필수 입력 항목이 누락되었습니다.");
            $("#err").css("display", "inline");
            return;                        //-- submit 액션 처리 중단
         }
         
         // 2. 최소 기본급 유효성 검사
         //-- 입력한 기본급이 최소 기본급보다 작은지에 대한 여부 확인
         // if (사용자가입력한기본급 > 직급별최소기본급) {return;}
         // $("#basicPay").val() ) < $("#minBasicPay").text() 그냥 이대로 산술비교 불가
         // 정수형태로 변환 해줘야 한다.
         if ( parseInt($("#minBasicPay").text()) > parseInt($("#basicPay").val()) )
         {
            $("#err").html("입력하신 기본급이 최소 기본급보다 작습니다.");
            $("#err").css("display", "inline");
            return;                        //-- submit 액션 처리 중단
         }
         
       // 폼 submit 액션 처리 수행
         $("#employeeForm").submit();
         
      });
   
      // 직원 리스트 버튼이 클릭되었을 경우 수행할 코드 처리
      //onclick="location.href='employeeinsertform.action'"
      $("#listBtn").click(function()
      {
    	  
    	  $(location).attr("href", "employeelist.action");
         //alert("버튼클릭확인");     
      });
      
   });
   
   function ajaxRequest()
   {
      //alert("Ajax 요청 및 응답 처리");
      
      // 『jquery.post()』 / 『jquery.get()』
      // 『$.post()』 / 『$.get()』
      //-- jQuery 에서 AJAX 를 사용해야 할 경우 지원해 주는 함수
      //   (서버측에서 요청한 데이터를 받아오는 기능의 함수)
      
      // ※ 이 함수(『$.post()』) 의 사용 방법(방식)
      //-- 『$.post(요청주소, 전송데이터, 응답액션처리)』
      //    · 요청주소(url)
      //       → 데이터를 요청할 파일에 대한 정보
      //    · 전송데이터(data)
      //       → 서버 측에 요청하는 과정에서 내가 전달할 파라미터
      //    · 응답액션처리(function)
      //       → 응답을 받을 수 있는 함수
      //         여기서는 익명의 함수를 사용 → 단순 기능 구현 및 적용
      
      //   ※ 참고로 data 는 파라미터의 데이터타입을 그대로 취하게 되므로
      //     html 이든, 문자열 이든 상관이 없다
      $.post("ajax.action"
         , {
            positionId: $("#positionId").val()}
            , function(data)
              {
                  $("#minBasicPay").html(data);
      });
      //--① ~~.action 이라는 약속은 지켜서 구성해야 한다.
      //  ② 직위의 selectBox 에 선택된 Id를 넘겨주면 된다.
      //  ③ position 넘겨주고 받은거 파라미터로 받는 함수
      //     id가 minBasicPay인 거에 그 값 넣어서 출력되게 해주면 된다.
      
      // 그러면 ajax.action 에 응답하는 뭔가가 있어야 한다.
      // → dispatcher-servlet 건드려야 한다.
   }
   
</script>
</head>
<body>

<!--------------------------------------------------
   #25. EmployeeUpdateForm.jsp
   - 직원 데이터 수정 페이지
   - 관리자가 접근하는 직원 데이터 수정 폼 페이지
--------------------------------------------------->

<!-- 
	입력폼에 데이터 입력된 형태로 수정폼 구성할거임
	그 정보는 Controller 한테 받아오는 거 
	사용자가 [수정]버튼 누르면, 아래와 같은 폼 
	[수정] 됐을 때 url 요청 
	employeeupdateform.action
	employeeupdateformController → employeeupdateForm.jsp 출동
	employeeupdate.action
	employeeupdateController
-->

<!-- 메뉴 영역 -->
<div>
   <c:import url="EmployeeMenu.jsp"></c:import>
</div>

<label style="text-align: left;">직원 관리 > 직원 정보 입력</label>

<!-- 콘텐츠 영역 -->
<div align="center">
   
   <div id="content" align="left">
      
      <form action="employeeupdate.action" method="post" id="employeeForm">
         <div class="form-group">
           
            <div class="input-group">
               <div class="input-group-addon">사원번호</div>
               <input type="text" id="employeeId" name="employeeId" class="form-control" placeholder="사원번호" value="${employee.employeeId}" readonly="readonly"/>
            </div>
           
           
            <div class="input-group">
               <div class="input-group-addon">이름</div>
               <input type="text" id="name" name="name" class="form-control" placeholder="이름" value="${employee.name}"/>
            </div>
            
            <div class="input-group">
               <div class="input-group-addon">주민번호</div>
               <input type="text" id="ssn1" name="ssn1" class="form-control" value="${employee.ssn1}"/>
               <div class="input-group-addon"> - </div>
               <input type="password" id="ssn2" name="ssn2" class="form-control"/>
            </div>
               
               
            <div class="input-group">
               <div class="input-group-addon">생년월일</div>
               <input type="text" id="birthday" name="birthday" class="form-control" placeholder="생년월일" value="${employee.birthday}"/>
            </div>
            
            <div class="input-group">
               <div class="input-group-addon">양 / 음력</div>
               <div class="form-control">
                  <input type="radio" value="0" name="lunar" id="lunar0" ${employee.lunar==0 ? "checked=\"checked\"": "" }/>
                  <label for="lunar0">양력</label>
                  <input type="radio" value="1" name="lunar" id="lunar1" ${employee.lunar==1 ? "checked=\"checked\"": "" }/>
                  <label for="lunar1">음력</label>
               </div>
            </div>

            <div class="input-group">
               <div class="input-group-addon">전화번호</div>
               <input type="tel" id="telephone" name="telephone" class="form-control" placeholder="ex) 010-1234-1234" value="${employee.telephone}"/>
            </div>

            <div class="input-group">
               <div class="input-group-addon">지역</div>
               <select name="regionId" id="regionId" class="form-control">
                 
                  <c:forEach var="region" items="${regionList }">
                     <option value="${region.regionId }"
								${employee.regionId == region.regionId ? "selected=\"selected\"" : "" }>${region.regionName }</option>
                  
                   
                  </c:forEach>
               </select>
            </div>
            
            <div class="input-group">
               <div class="input-group-addon">부서</div>
               <select name="departmentId" id="departmentId" class="form-control"> 
                 
                   <c:forEach var="department" items="${departmentList }">
                      <option value="${department.departmentId }" ${employee.departmentId == department.departmentId ? "selected=\"selected\"" :""}>
                     ${department.departmentName }
                     </option>
                   </c:forEach>
               </select>
            </div>
                  
            <div class="input-group">
               <div class="input-group-addon">직위</div>
               <select name="positionId" id="positionId" class="form-control">
                  
                   <c:forEach var="position" items="${positionList }">
                      <option value="${position.positionId }" ${employee.positionId == position.positionId ? "selected=\"selected\"" : "" }>
                     ${position.positionName }
                     </option>
                   </c:forEach>
               </select>
            </div>
                  
            <div class="input-group">
               <div class="input-group-addon">기본급</div>
               <input type="text" id="basicPay" name="basicPay" class="form-control" value="${employee.basicPay}"/>
               <div class="input-group-addon">원</div>
               
               <div class="input-group-addon">수당</div>
               <input type="text" id="extraPay" name="extraPay" class="form-control" value="${employee.extraPay}" />
               <div class="input-group-addon">원</div>
            </div>
               
               
            <div class="input-group" style="text-align: left;">
               (최소 기본급
               <span id="minBasicPay" style="color: red; font-weight: bold;">0</span>
               원)
            </div>
            <br /><br />
            
            
            <div class="input-group">
               <div align="center">
               <br /><br />
               
                  <button type="button" class="btn btn-primary btn-lg" id="submitBtn"
                  style="width: 45%;">직원 수정</button>
                  <button type="button" class="btn btn-default btn-lg" id="listBtn"
                  style="width: 45%;"
                  onclick="location.href='employeelist.action'">직원 리스트</button>
                  <br /><br />
                  
                  <span id="err" style="color: red; font-weight: bold; display: none;">
                  </span>
               </div>
            </div>
            
         </div>
      </form>
   </div>   
</div>

</body>
</html>

---

Dispatcher-servlet.xml 수정

• DB에 접근해 데이터를 수정할 컨트롤러 등록

<bean name="/employeeupdate.action" class="com.test.mvc.EmployeeUpdateController">
		<property name="dao" ref="employeeDAO"></property>
	</bean>

---

⛏️ EmployeeUpdateController.java

package com.test.mvc;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.Controller;

public class EmployeeUpdateController implements Controller
{
private IEmployeeDAO dao;
	
	
	
	//Controller 인페이스의 handleRequest()메소드 재정의
	
	public void setDao(IEmployeeDAO dao)
	{
		this.dao = dao;
	}



	@Override
	public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception
	{
		
		//하는 일은 doGet , doPost 와 같다.
		
		//컨트롤러 내부 액션 처리 코드
		
		
		ModelAndView mav = new ModelAndView();
		
		Employee employee = new Employee();
		
		employee.setEmployeeId(request.getParameter("employeeId"));
		employee.setName(request.getParameter("name"));
		employee.setSsn1(request.getParameter("ssn1"));
		employee.setSsn2(request.getParameter("ssn2"));
		employee.setBirthday(request.getParameter("birthday"));
		employee.setLunar(Integer.parseInt(request.getParameter("lunar")));
		employee.setTelephone(request.getParameter("telephone"));
		employee.setRegionId(request.getParameter("regionId"));
		employee.setDepartmentId(request.getParameter("departmentId"));
		employee.setPositionId(request.getParameter("positionId"));
        employee.setBasicPay(Integer.parseInt(request.getParameter("basicPay")));
        employee.setExtraPay(Integer.parseInt(request.getParameter("extraPay")));
		
		try
		{
			int result = dao.modify(employee);
			
		} catch (Exception e)
		{
			System.out.println(e.toString());
			// TODO: handle exception
		}
        
		
		
		mav.setViewName("employeelist.action");
		
		
		
		return mav;
	}

	

}