23.07.05 81일차
OpenApi
어제에 이어서 오늘은 OpenApi로 불러온 게시판의 메모 input과 리스트를 만들기로 했다.
- 게시판 메모 만들기
게시판 SNO에 링크를 걸어 edit 화면을 구현했다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/include/top.jsp" %>
<section>
<br>
<div align="center">
<h2>경상남도 고용우수기업</h2>
<table border=1 width="900">
<tr height=40 >
<td align=center width=100><b>순번</b></td>
<td align=center width=150><b>sno</b></td>
<td align=center width=450><b>회사명</b></td>
<td align=center width=210><b>회사대표</b></td>
<td align=center width=450><b>주력상품</b></td>
<td align=center width=450><b>주소</b></td>
<td align=center width=200><b>위도</b></td>
<td align=center width=200><b>경도</b></td>
</tr>
<c:forEach items="${li}" var="m" varStatus="status">
<tr align="center">
<td>${status.count}</td>
<td>
<c:url value="/company/companyEdit.do" var="url">
<c:param name="sno" value="${m.sno}"/>
</c:url>
<a href="${url}">${m.sno}</a>
<input type=hidden name=latitude value="${m1.latitude}">
<input type=hidden name=logitude value="${m2.logitude}">
</td>
<td>${m.entrprsNm}</td>
<td>${m.rprsntvNm}</td>
<td>${m.mainGoods}</td>
<td>${m.rdnmadr}</td>
<td>${m.latitude}</td>
<td>${m.logitude}</td>
</tr>
</c:forEach>
</table>
</div>
</section>
<%@ include file="/include/footer.jsp"%>C태그를 이용해 url과 sno의 값을 이용해 해당한 목록의 상세화면을 구현했다.
- 게시판 상세보기(메모와 리스트)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import ="java.util.*" %>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<% request.setCharacterEncoding("UTF-8"); %>
<%@ page import="java.util.*" %>
<%@ include file = "/include/top.jsp" %>
<section>
<div align="center">
<br>
<br>
<div><font size=5> <b>학생 신상 수정하기</b></font></div>
<hr>
<form action="<%=path %>/memoInsert.do">
<table border="1" width="700" height="250" align="center">
<tr>
<td width="40%">
<table border="1" width="100%" height="250" align="center">
<tr>
<td align="center"><b>SNO</b></td>
<td>
<input type="text" name="sno" value="${m.sno}">
</td>
</tr>
<tr>
<td align="center"><b>회사명</b></td>
<td><input type="text" name="entrprsNm" value="${m.entrprsNm}"></td>
</tr>
<tr>
<td align="center"><b>회사대표</b></td>
<td><input type="text" name="rprsntvNm" value="${m.rprsntvNm}"></td>
</tr>
<tr>
<td align="center"><b>주력상품</b></td>
<td><input type="text" name="mainGoods" value="${m.mainGoods}"></td>
</tr>
<tr>
<td align="center"><b>주소</b></td>
<td><input type="text" name="rdnmadr" value="${m.rdnmadr}"></td>
</tr>
<tr>
<td align="center"><b>위도</b></td>
<td><input type="text" name="latitude" value="${m.latitude}"></td>
</tr>
<tr>
<td align="center"><b>경도</b></td>
<td><input type="text" name="logitude" value="${m.logitude}"></td>
</tr>
</table>
</td>
<td width="600">
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%; height:250px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=acbf7cf09baefca054efcea77a16114d"></script>
<script>
var mapContainer = document.getElementById('map'); // 지도를 표시할 div
var mapOption = {
center: new kakao.maps.LatLng(${m.latitude}, ${m.logitude}), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(${m.latitude}, ${m.logitude});
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);
</script>
</td>
</tr>
</div>
<tr>
<td colspan=2>
<input type=text name="memo" size="70">
<input type=submit id = "saveK" value="메모저장">
</td>
</tr>
</table>
</form>
<br><hr><br>
<form action="<%=path %>/memodelete.do">
<table border=1 width="700">
<tr height=40 >
<td align=center><b>IDX</b></td>
<td align=center><b>메모</b></td>
<td align=center><b>날짜</b></td>
<td align=center><b>제거</b></td>
</tr>
<c:forEach items="${ls}" var="l">
<tr align="center">
<td>${l.idx}</td>
<td>${l.memo}</td>
<td>${l.today}</td>
<td><input type=button value="삭제" onClick="delK('${l.idx}',${m.sno})"></td>
</tr>
</c:forEach>
</table>
</div>
</div>
</section>
<%@ include file = "/include/footer.jsp" %>먼저 지도와 테이블의 위치를 좌우로 바꾸고
하단에 메모를 입력할 text상자를 만들고 submit동작으로 DB에 저장되도록 연동했다.
그런 뒤 하단엔 DB에 저장한 메모 리스트를 불러와 목록으로 만들었다.
삭제 버튼을 동작하면 sno의 idx값을 비교해서 하나의 레코드만 삭제하도록 했다.
- ajax를 이용한 화면 깜박임 없애기
<script src="http://code.jquery.com/jquery-1.10.2.js" ></script>
<script>
var path='${pageContext.request.contextPath}';
// alert("경로확인:" +path);
jQuery.ajaxSetup({cache:false});
$(document).ready( function(){
$('#saveK').click( function(){
//alert("확인2:" + $('#sno').val());
var dataStr={
sno : $('#sno').val(),
memo : $('#memo').val()
};
$.ajax({
type: "POST",
url : path + "/memoInsert.do",
data : dataStr,
success: function (response){
// alert("저장성공!!" + $('#sno').val() + ":" + data);
var updatedContent = $(response).find('#div1').html();
$('#div1').html(updatedContent)
// location.replace(path+"/company/companyEdit.do?sno=" + $('#sno').val()) ;
}
})
} ) // $('#saveK').click 끝
})
function delK(k1, k2){
//alert(k1 +":"+ k2)
var dataStr={
idx : k1,
sno : k2
};
$.ajax({
type: "POST",
url : path + "/memoDelete.do",
data : dataStr,
success: function (response){
var updatedContent = $(response).find('#div1').html();
$('#div1').html(updatedContent)
// location.replace(path+"/company/companyEdit.do?sno=" + k2) ;
}
})
}
</script>ajax를 통해 delete와 insert 버튼을 동작할때 화면의 깜박임을 제어했다.
form으로 묶어둔 부분을 div로 변경하여 id를 부여한 뒤,
해당 id를 검색하여 이동하는 방식으로 사용했다.
정확하게 이해되지 않지만 ,,
많은 분석과 사용으로 공부를 더 하도록 해야겠다.
Back-end Developer Preparation Students