<html xmlns:th = "http://www.thymeleaf.org">
<th:block th:include="fragments/common/header"></th:block>
<a href="manager/select-all">
<img class="img-fluid" src="img/manager.png"/></a>
-> 결과
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>
<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>
<a href = "/manager/insert" class="btn btn-primary btn-xl
float-sm-end m-2">담당자 추가</a>
<!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>
-> 버튼 클릭 시 DB에 담당자가 추가되도록 함.
<td width="150"><a th:onclick="|javascript:updateTask(
'${manager.id}')|" class="btn btn-primary">수정</a></td>
function updateTask(id){
if (confirm("해당 담당자를 수정하시겠습니까?") == true){ //확인
location.href="http://localhost:8080/manager/update/"+id;
}else{ //취소
return;
}
}
<!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 추가
결과