DB에 있는 값 화면에 표시하기

오늘·2021년 7월 11일

일단 같은 사원이 같은 날에 출근버튼을 중복해서 누를 수 없게끔하고 싶었다. 그래서 DB에 오늘 날짜로 출근이 눌렸다면, 버튼이 비활성화 되게끔 하려 한다.

mySql 테이블

CREATE TABLE `working_atti` (
  `WORK_RID` varchar(45) NOT NULL,	-- 근태 id
  `WORK_DAY` date NOT NULL,		-- 출퇴근 날짜
  `WORK_IN` time DEFAULT NULL,		-- 출근 시간
  `WORK_OUT` time DEFAULT NULL,		-- 퇴근 시간
  `WORK_LATE` tinyint DEFAULT NULL,	-- 지각 여부(지각:1 정상출근:0)
  `HOLI_CODE` varchar(45) DEFAULT NULL,	-- 휴가 갔다면 그 코드가 들어가게끔
  `WORK_COMM` varchar(45) DEFAULT NULL,	-- 비고
  `EMP_ID` varchar(45) NOT NULL,	-- 직원 테이블과 연결할 직원 Id
  PRIMARY KEY (`WORK_RID`),
  KEY `EMP_ID` (`EMP_ID`),
  CONSTRAINT `working_atti_ibfk_1` FOREIGN KEY (`EMP_ID`) REFERENCES `employee` (`EMP_ID`) ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3;

먼저 mySql에 있는 테이블은 위와 같다.

Mapper

파일 위치는 아래와 같다.

출퇴근 정보를 Mapping하는 파일인 commuteDAOMapper.xml 파일에 필요한 값을 작성한다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.clockOn.web.dao.CommuteDAO">
  .....
  	<!-- 출근 처리 이후 재 출근 못하게 -->
	<select id="work_day" parameterType="String" resultType="String">
	 <![CDATA[   
		select work_day from working_atti where work_day = curdate() and emp_id=#{emp_id}
	]]>
	</select>
  .....
</mapper>

id

jsp에서 ${}의 형태로 불러줄 이름을 적어주면 된다

resultType

select문을 실행하여 생기는 결과를 담을 객체의 형태를 지정하면 된다. 패키지이름을 포함한 전체 클래스명을 지정해도 되고 객체의 alias를 지정해도 되고 String, int와 같이 지정해도 되고..

parameterType

이 속성에 지정한 객체의 프로퍼티값이 SQL의 입력 파라미터에 지정된다

CommuteService.java

	// 출근버튼 처리
	public String work_day(String emp_id);

CommuteServiceImpl.java

	@Override
	public String work_day(String emp_id) {
		return commuteDAO.work_day(emp_id);
	}

CommuteDAO.java

	// 출근버튼 처리
	public String work_day(String emp_id);

Controller.java

...
@Controller // 컨트롤러니까
@RequestMapping("/emp/") // 불러올때 사용할 이름
public class EmpController {

	@Setter(onMethod_ = { @Autowired })
	private MemberDAO memberMapper;

	@Autowired
	private MemberService memberService;

	@Autowired
	private LeaveService leaveService;

	@Autowired
	private CommuteService commuteService;

	@Autowired
	OrgService orgService;

	@Autowired
	private ServletContext ctx;
	
	@GetMapping("main") // 그럼 이 메소드를 불러올때의 모습은 /emp/main 의 형태가 되는것
	public String emp_main(Principal principal, HttpSession session, Model model) {
    		// 시큐리티에서 emp_id를 Name으로 받아놓음
		String username = principal.getName();
		
        	// 위에서 id = work_day로 지정해준 sql 값을 가져와 모델에 담아준다.
		model.addAttribute("work_day", commuteService.work_day(username));
        
        	// 제대로 emp_id가 넘어왔는지 보기 위해서 한번 찍어보기
		System.out.println(username);
        
		if (session.getAttribute("level") == null  || !session.getAttribute("level").equals("ROLE_MEMBER")) {
			Member member = memberMapper.read(username);
			session.setAttribute("level", member.getEmp_level());
			session.setAttribute("id", member.getEmp_id());
			session.setAttribute("name", member.getEmp_name());
		}

		// 타일즈에 적어준 모습대로 리턴해줘야한다.
        	// /emp/main <- 이모양으로 하면 노노
		return "emp.main";
	}
    
    .....

}

main.jsp

위에서 다 작성해줬기때문에 값을 그대로 불러와 사용해주면 된다.

	<main>
		<h2><%= sf.format(nowTime) %></h2>
        	${work_day}
		<div class="main-wrapper">
			<h3 class="commute-title">출·퇴근 요청</h3>
        ...

아직 들어간 값이 없어서 위와 같이 적어도 아래와 같이 화면상에 보이는 게 없다.
이 상태에서 출근을 찍어보면
alert로 메시지가 출력되고, DB 상에서는 아래와 같이 값이 들어간 것을 확인
그럼 이제 화면에도 ${work_day}가 찍힌다. 값이 있으니까

그럼 이 값을 이용해서 코드를 작성해준다.

<table>
	<tr>
		<td>
		<c:choose>
			<c:when	test="${work_day==null}">
				<form action="/emp/hiSuccess?emp_id=${id}" method="post" class="hiSuccess-form">
					<button class="hi-button" id="hi" type="submit">출&nbsp;근</button>
				</form>
			</c:when>
			<c:when test="${work_day!=null}">
				<button type="button" id="attendFail" class="hi-button">출&nbsp;근</button>
			</c:when>				
		</c:choose>
		</td>

		<td>
			<form action="/emp/byeSuccess?emp_id=${id}" method="post" class="byeSuccess-form">
				<button class="bye-button" id="bye" type="submit">퇴&nbsp;근</button>
			</form>
		</td>
	</tr>
</table>

이런 식으로!
1) 테이블로 감싼건 옆으로 나란히 있는 모습을 그대로 유지하고 싶은데, 폼으로 감싸면 그 모양이 이상하게 깨졌다. 그래서 테이블의 형태를 빌려 옆으로 나란히 위치하게끔 했다.
2) <c:choose> 와 <c:when>을 이용해 상황에 맞게끔 버튼이 보일 수 있도록 해주었다. 만약 현재 아이디로 현재 날짜로 입력된 값이 없다면 출근 처리가 동작되도록하고, 값이 있다면 js로 이미 처리된 요청입니다 가 뜰 수 있도록 해주었다.
3) 퇴근은 따로 뭐.. 처리 안해줬다.
그럼 지금은 값이 있으니까 이미 처리된 요청입니다로 출근 입력이 멈춰지는 지 보자
DB를 확인해봐도 추가로 들어간 컬럼은 보이지 않는다.