간단한 화면 구현

김태은·2022년 5월 25일
0

코멘토 실무 과제

목록 보기
4/4

타임리프(Thymeleaf)

  • 스프링 부트에서 공식적으로 지원하는 View 템플릿
  • JSP와 달리 Thymeleaf 문서는 html 확장자를 갖고 있어 JSP처럼 Servlet문서를 표현하는 것이 아니기 때문에 서버 없이도 동작 가능

타임리프를 사용하여 메인 화면 구현하기

  • html에 태그 추가
<html xmlns:th = "http://www.thymeleaf.org">
  • header.html을 생성하여 index.html에 추가
<th:block th:include="fragments/common/header"></th:block>
  • resource/static/img 경로에 필요한 이미지 추가
  • a태그와 img태그를 사용하여 이미지 클릭 시 화면이 바뀌도록 구현
 <a href="manager/select-all">
   <img class="img-fluid" src="img/manager.png"/></a>
  • BaseController를 생성하여 index.html이 반환되도록 함

-> 결과

담당자 관리 화면 구현하기

1. 전체 담당자 조회 화면

  • ManagerController 작성

    -> 조회된 모든 담당자 데이터를 manager_list에 넣음
    -> resource/templates/manager/ 경로에 all-manager.html 파일을 생성해 모든 담당자 조회 페이지를 반환하도록 함

  • all-manager.html

<table class="table table-striped table-hover text-center table-bordered">

        <thead>
        <tr>
            <th>아이디</th>
            <th>이름</th>
            <th>직급</th>
            <th>전화번호</th>
            <th>삭제</th>
            <th>수정</th>
        </tr>
        </thead>
        <tbody>
            <tr th:each = "manager : ${manager_list}">
                <th th:text = "${manager.id}"></th>
                <td th:text = "${manager.manager_name}"></td>
                <td th:text = "${manager.position_type}"></td>
                <td th:text = "${manager.phone_number}"></td>
                <td width="150"><a th:onclick="|javascript:deleteTask('${manager.id}')|" class="btn btn-primary" style="background-color:red; border-color: red">삭제</a> </td>
                <td width="150"><a th:onclick="|javascript:updateTask('${manager.id}')|" class="btn btn-primary">수정</a></td>

            </tr>
        </tbody>
    <a href = "/manager/insert" class="btn btn-primary btn-xl float-sm-end m-2">담당자 추가</a>

</table>
  • 타임 리프를 사용해 manager_list의 데이터를 테이블 형식으로 화면에 나타내도록 함.
  • a태그로 담당자 추가 버튼을 만들어 클릭 시 담당자 추가 페이지로 이동할 수 있도록 함.
  • th:onclick을 활용해 특정 담당자를 수정하거나 삭제할 수 있도록 함.
<script>
    function deleteTask(id){
        if (confirm("해당 담당자를 삭제하시겠습니까??") == true){    //확인
            location.href="http://localhost:8080/manager/delete/"+id;
        }else{   //취소
            return;
        }
    }

    function updateTask(id){
        if (confirm("해당 담당자를 수정하시겠습니까?") == true){    //확인
            location.href="http://localhost:8080/manager/update/"+id;
        }else{   //취소
            return;
        }
    }
</script>
  • 결과

2. 담당자 추가 화면

  • 전체 담당자 조회 화면의 담당자 추가 버튼 클릭시 이동
 <a href = "/manager/insert" class="btn btn-primary btn-xl 
 float-sm-end m-2">담당자 추가</a>
  • ManagerController에 @GetMapping 추가

  • resource/templates/manager에 insert-manager.html추가
 <!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org">
<!--타임리프 설정-->
<th:block th:include="fragments/common/header"></th:block>
<div class="row justify-content-center">
    <div class="col-lg-8 col-xl-7">

        <form id="contactForm" action="insert" method="post">
            <!-- Name input-->
            <div class="form-floating mb-3">
                <input class="form-control" id="manager_name" name="manager_name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
                <label for="manager_name">Full name</label>
                <div class="invalid-feedback" data-sb-feedback="manager_name:required">A name is required.</div>
            </div>

            <!-- Phone number input-->
            <div class="form-floating mb-3">
                <input class="form-control" id="phone_number" name="phone_number" type="tel" placeholder="(123) 456-7890" data-sb-validations="required" />
                <label for="phone_number">Phone number</label>
                <div class="invalid-feedback" data-sb-feedback="phone_number:required">A phone number is required.</div>
            </div>

            <br>

            <select class="form-select form-select-lg mb-3" style="font-size: 1.5rem;color: #6c757d;" name = "position_type">
                <option selected>Rank Type</option>
                <option value="선임">선임</option>
                <option value="책임">책임</option>
                <option value="수석">수석</option>
            </select>


            <!-- Submit Button-->
            <button class="btn btn-primary btn-xl" id="submitButton" type="submit">추가</button>
        </form>
    </div>
</div>
</div>
</section>
</html>
  • input태그를 사용해 담당자 이름과 전화번호를 입력할 수 있도록 함.
  • input태그의 name을 담당자 DB의 속성 이름으로 함.
  • 담당자의 직급은 select 태그를 사용해 선택할 수 있도록 함.
  • form 태그 안에 input태그, select태그를 작성하고, button을 추가해 클릭 시 form 태그의 action이 동작하도록 함.
  • ManagerController에 @PostMapping 추가

-> 버튼 클릭 시 DB에 담당자가 추가되도록 함.

  • 결과

3. 담당자 수정 화면

  • 전체 담당자 조회 화면에서 수정 버튼 클릭 시 이동
<td width="150"><a th:onclick="|javascript:updateTask(
  '${manager.id}')|" class="btn btn-primary">수정</a></td>
  • script 작성
function updateTask(id){
        if (confirm("해당 담당자를 수정하시겠습니까?") == true){    //확인
            location.href="http://localhost:8080/manager/update/"+id;
        }else{   //취소
            return;
        }
    }
  • ManagerController에 @GetMapping 추가
  • resource/templates/manager에 update-manager.html 추가
<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org">
<!--타임리프 설정-->
<th:block th:include="fragments/common/header"></th:block>
<div class="row justify-content-center">
    <div class="col-lg-8 col-xl-7">

        <form id="contactForm" action="/manager/update" method="post">
            <!-- Name input-->
            <div class="form-floating mb-3">
                <input type="text" th:value="${manager.manager_name}"class="form-control" name="manager_name" disabled/>
            </div>

            <!-- Phone number input-->
            <div class="form-floating mb-3">
                <input type="text" th:value="${manager.phone_number}"class="form-control" name="phone_number"/>
            </div>

            <br>

            <select class="form-select form-select-lg mb-3" style="font-size: 1.5rem;color: #6c757d;" name = "position_type" th:value="${manager.position_type}">
                <option th:selected="${manager.position_type}=='선임'">선임</option>
                <option th:selected="${manager.position_type}=='책임'">책임</option>
                <option th:selected="${manager.position_type}=='수석'">수석</option>
            </select>

            <input hidden th:value="${manager.id}" name="id"/>
            <!-- Submit Button-->
            <button class="btn btn-primary btn-xl" id="submitButton" type="submit">수정</button>
        </form>
    </div>
</div>
</div>
</section>
</html>
  • th:value를 이용해 해당 매니저의 정보를 input태그에 넣어줌

  • 이름은 수정이 불가능하도록 disable을 추가

  • submit 버튼 클릭 시 /manager/update에 post방식으로 데이터 보냄

  • ManagerContoroller에 @PostMapping 추가

  • 결과

R&R 화면 구현하기

1. 전체 R&R 정보 조회 화면

2. R&R 추가 화면

  • 추가한 담당자 중 한 명을 선택하고, 업무 중 하나를 선택하여 R&R 생성함.

3. R&R 상세보기 화면

  • 상세보기 클릭 시 회사와 업무 종류가 보이도록 하고, 회사와 업무 종류를 추가할 수 있도록 한다.
  • 중복된 회사나 업무 종류 선택 시에는 Exception이 발생한다.

0개의 댓글