[헤이버디] 상세일정에서 POST방식으로 수정 시키기

---

 

---

planList.jsp

 

 

		<!-- 트리거 시키는 모달 버튼! 여기로 아작스 id를 갖게해야지 모달창이 뜸 신기하네 히든으로 됨, data-bas-toggle="modal" 이게 중요한듯 -->
			<form id="planEdit" name="planEdit" method="POST" enctype="multipart/form-data">
			<input id="btnForm2" type="hidden" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2"/>
			
			<!-- <form id="modal2" name="modal2" method="POST" enctype="multipart/form-data"> -->
			<div class="row planinst container">
				<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
					<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
						<!-- 이 위치에 넣어줘야 적용됨  -->
						<div class="modal-content">
							<div class="modal-header">
								<h4 class="modal-title" id="exampleModalLabel" style="text-align: center; float: center;">📝일정상세</h4>
								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							</div>
							<div class="modal-body">
								<input type="hidden" id="hyplSeq1" name="hyplSeq">
								<h5>제목</h5>
								<input class="form-control mb-3" type="text" id="hyplName1" name="hyplName" autocomplete="off"> <br>
								<h5>일정내용</h5>
								<input class="form-control mb-3" type="text" id="hyplDesc1" name="hyplDesc" style="height: 100px;" autocomplete="off">
								<br>
								<h5>📅날짜</h5>
								<div class="form-control" style="border-radius: 10px;">
								<h6>시작일</h6>
								<input class="form-control mb-3" type="text" id="hyplDate1" name="hyplDate" <fmt:formatDate value="${hyplDate1}" pattern="yyyy-MM-dd HH:mm:ss"/> autocomplete="off">
								<h6>종료일</h6>
								<input class="form-control mb-3" type="text" id="hyplEndDate1" name="hyplEndDate" <fmt:formatDate value="${hyplEndDate1}" pattern="yyyy-MM-dd HH:mm:ss"/>  autocomplete="off">
								</div>
								<h5>👨‍👧‍👧공유된 멤버</h5>
								<input class="form-control mb-3" type="text" id="hyplMemberName1" name="hyplMemberName" disabled>
								<div class="form-control mb-3">
								<br>
								<h5>공유자 추가</h5>
									<div class="card card-body">
										<select multiple class="form-control" id="hyplMemberName" name="hyplMemberName" data-choices='{"silent": true,"removeItems": "true","removeItemButton": "true"}'>
												<c:forEach items="${selectListMember}" var="item" varStatus="status">
												<option><c:out value="${item.hymmName}" />
											</c:forEach>
										</select>
									</div>
								</div>
							</div>
							<div class="modal-footer planinst container">
								<a class="btn btn-light me-2" style="width: 60px; font-size: 1em; text-align: center; float: right;" data-bs-dismiss="modal">취소</a> 
								<a href="javascript:goUpdt(<c:out value="${rt.hyplSeq}"/>)" type="submit" class="btn btn-primary me-2">수정하기</a>
<!-- 								<input type="submit" class="btn btn-primary me-2" id="" name="" value="수정하기"> -->
								<a href="javascript:goNele(<c:out value="${rt.hyplSeq}"/>)" class="btn btn-danger" style="float: left">삭제하기</a>
<%-- 								<a href="javascript:goNele(<c:out value="${rt.hyplSeq}"/>)" class="btn btn-danger" style="float: left" data-bs-toggle="modal" data-bs-target="#staticBackdrop">삭제하기</a> --%>
							<%-- <a class="btn btn-primary"  href="javascript:goUpdt(<c:out value="${rt.hyplSeq}"/>)" type="submit">수정하기</a>  --%>
							</div>
						</div>
					</div>
				</div>
			</div>
			</form>
			<!--  모

 

 

 

 

다음코드는 사실상, 상세뷰를 위한 코드라서 크게 의미 수정과 관련은

 

없지만 id와 name이 다른이유는 id로 ajax를 통해 DB의 데이터를 받고

 

Name은 통해서 다시 db를 업데이트 할 것이기 때문이다.

 

 

 

form 의 id와 name을 자바스크립의 id와 일치시켜줘야

 

POST방식으로 데이터를 넘길 수 있다.

 

 

 

 

 

 

goUpdt에 seq를 받고

 

hyplSeq의 데이터를 받아오면 그 시퀀스를 받은 상태로

 

id=planEdit인 form으로 이동하여, 버튼을 눌렀을 경우 action="/plan/planUpdt" 로 이동시킨다

 

 

 

 

 

버튼에 href="javascript=goUpdt(c:out value="${rt.hyplSeq})" 의 데이터를 submit하여 action으로 넘긴다는 것이다

 

그리하여  planController.java로 이동하게 되고 

 

planController.java

 

 

 

 

 

 

이 부분이 시작되면서 데이터가 수정이 진행되는 것이다.

 

service.update(dto); 가 진행되면서

 

 

 

 

planServiceImpl.java

 

	@Override
	public int update(Plan dto) throws Exception {
		
		dao.update(dto);

		return 1;
	}

 

 

이것이 실행이되고

 

 

 

planDao.java

 

 

 

 

 

planDao.java로 오게되어 update가 실행되게 되는것이다.

 

그영역은 mpp에서 우리가 이미 정해놓았다.

 

 

 

 

planMpp.java

 

 

<update id="update">
		UPDATE
			hybdPlan  <!-- 진짜 중요한게 테이블 이름틀리면 505 Error 불변임 -->
		SET
		hyplName = #{hyplName}
		,hyplDate = #{hyplDate}
		,hyplEndDate = #{hyplEndDate}
		,hyplDesc = #{hyplDesc} 
		,hyplMemberName = #{hyplMemberName} 
		WHERE
			1 = 1
		AND hyspSeq = #{hyspSeq}
		AND hyplSeq = #{hyplSeq}
	</update>

 

 

 

 

다음 영억과 조건에 맞는 부분이 업데이트 되는 것이고,

 

SET 부분에 #{hyplSeq} 이런식으로 한것은

 

시퀀스마다 다 제각각의 값이 들어가기 때문이다.

 

 

 

 

---

 

 

 

 

To be continue..