lprod list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript">
function fn_submit(){
var frm = document.searchForm;
console.log("frm.size : " + frm.size.value);
console.log("frm.keyWord : " + frm.keyWord.value);
frm.submit();
}
</script>
<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800">상품분류 별 거래처 목록</h1>
<p class="mb-4">상품분류 별로 거래처의 목록을 화면에 보여줍니다.</p>
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">DataTables Example</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<div id="dataTable_wrapper" class="dataTables_wrapper dt-bootstrap4">
<!-- 검색 폼 영역 시작 -->
<form name="searchForm" id="searchForm" action="/lprod/list" method="get">
<div class="row"><div class="col-sm-12 col-md-6"><div class="dataTables_length" id="dataTable_length"><label>Show <select id="size" name="size" aria-controls="dataTable" class="custom-select custom-select-sm form-control form-control-sm"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> entries</label></div></div><div class="col-sm-12 col-md-6"><div id="dataTable_filter" class="dataTables_filter">
<label>Search:
<input type="search" name="keyWord" id="keyWord" class="form-control form-control-sm" placeholder="검색어를 입력해주세요" aria-controls="dataTable" value="${param.keyWord}"></label>
<a href="#" class="btn btn-success btn-icon-split" onclick="fn_submit()">
<span class="icon text-white-50">
<i class="fas fa-check"></i>
</span>
<span class="text">검색</span>
</a>
</div></div>
</div>
</form>
<!-- 검색 폼 영역 끝 -->
<div class="row"><div class="col-sm-12"><table class="table table-bordered dataTable" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="sorting sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 50px;">번호</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 200px;">상품분류코드</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending">상품분류명</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 200px;">거래처코드</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending">거래처명</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="1" colspan="1">번호</th>
<th rowspan="1" colspan="1">상품분류코드</th>
<th rowspan="1" colspan="1">상품분류명</th>
<th rowspan="1" colspan="1">거래처코드</th>
<th rowspan="1" colspan="1">거래처명</th>
</tr>
</tfoot>
<tbody>
<!-- 시작 번호 초기화(시작번호 -1로 초기화해줘야 함) -->
<c:set var="i" value="${list.currentPage*7-6-1}" />
<!-- param.currentPage가 null일때 보정.. -->
<%-- <c:if test="${param.currentPage==null}"> --%>
<%-- <c:set var="i" value="0" /> --%>
<%-- </c:if> --%>
<c:forEach var="lprodVO" items="${list.content}">
<c:forEach var="buyerVO" items="${lprodVO.buyerVO}">
<c:set var="cnt" value="${i=i+1}" />
<c:if test="${cnt%2==1}">
<tr class="odd">
</c:if>
<c:if test="${cnt%2==0}">
<tr class="even">
</c:if>
<td class="sorting_1">${cnt}</td>
<td>${lprodVO.lprodGu}</td>
<td><a href="/lprod/detail?buyerId=${buyerVO.buyerId}">${lprodVO.lprodNm}</a></td>
<td>${buyerVO.buyerId}</td>
<td>${buyerVO.buyerName}</td>
</tr>
</c:forEach>
</c:forEach>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-5">
<div class="dataTables_info" id="dataTable_info" role="status" aria-live="polite">
<!-- A*7-6 A*7 -->
Showing ${list.currentPage*7-6} to ${list.currentPage*7} of ${total} entries
</div>
</div>
<div class="col-sm-12 col-md-7">
<div class="dataTables_paginate paging_simple_numbers" id="dataTable_paginate">
<!-- 페이징 처리 시작 -->
<ul class="pagination">
<!-- Previous 시작 -->
<li class="paginate_button page-item previous <c:if test='${list.startPage<6}'>disabled</c:if>" id="dataTable_previous"><a href="/lprod/list?currentPage=${list.startPage-5}" aria-controls="dataTable" data-dt-idx="0" tabindex="0" class="page-link">Previous</a></li>
<!-- Previous 끝 -->
<!-- Page번호 시작 -->
<c:forEach var="pNo" begin="${list.startPage}" end="${list.endPage}" step="1">
<li class="paginate_button page-item <c:if test='${list.currentPage eq pNo}'>active</c:if>"><a href="/lprod/list?currentPage=${pNo}" aria-controls="dataTable" data-dt-idx="1" tabindex="0" class="page-link">${pNo}</a></li>
</c:forEach>
<!-- Page번호 끝 -->
<!-- Next 시작 -->
<li class="paginate_button page-item next <c:if test='${list.endPage>=list.totalPages}'>disabled</c:if>" id="dataTable_next"><a href="/lprod/list?currentPage=${list.startPage+5}" aria-controls="dataTable" data-dt-idx="7" tabindex="0" class="page-link">Next</a></li>
<!-- Next 끝 -->
</ul>
<!-- 페이징 처리 끝 -->
</div></div></div></div>
</div>
</div>
</div>
detail.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<script type="text/javascript">
var sel_file;
$(function() {
//------------- 이미지 미리보기 시작 ------------------
$("#input_img").on("change", handleImgFileSelect);
function handleImgFileSelect(e) {
//e.target : 파일객체
//e.target.files : 파일객체 안의 파일들
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
//f : 파일 객체
filesArr.forEach(function(f) {
//미리보기는 이미지만 가능함
if (!f.type.match("image.*")) {
alert("이미지만 가능합니다");
return;
}
//파일객체 복사
// sel_file.push(f);
//파일을 읽어주는 객체 생성
var reader = new FileReader();
reader.onload = function(e) {
//forEach 반복 하면서 img 객체 생성
// var img_html = "<img src=\"" + e.target.result + "\" />";
$(".b-image").css({
"background" : "url(" + e.target.result + ")",
"background-size" : "contain",
"background-repeat" : "no-repeat",
"background-position" : "center"
});
}
reader.readAsDataURL(f);
});
}
//------------- 이미지 미리보기 끝 ------------------
});
function fn_submit() {
var frm = document.searchForm;
console.log("frm.size : " + frm.size.value);
console.log("frm.keyWord : " + frm.keyWord.value);
frm.submit();
}
</script>
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<form:form modelAttribute="buyerVO" class="user" method="post"
action="/lprod/detail" enctype="multipart/form-data">
<div class="row">
<!-- 이미지 -->
<div class="col-lg-5 d-none d-lg-block b-image"
style="background-image:url('/resources${buyerVO.buyerImg}');>
background-size: contain;
background-repeat: no-repeat;
background-position:center;">
<input type="file" name="uploadFile" id="input_img" />
</div>
<iframe id="ifrm" name="ifrm" style="display:none;"></iframe>
<!-- 정보 출력 영역 -->
<div class="col-lg-7">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">${buyerVO.buyerName}</h1>
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<form:input path="buyerId"
class="form-control form-control-user" placeholder="" />
</div>
<div class="col-sm-6">
<form:input path="lprodNm"
class="form-control form-control-user" placeholder="" />
</div>
</div>
<div class="form-group">
<form:input path="buyerMail"
class="form-control form-control-user" placeholder="" />
<font color="red"><form:errors path="buyerMail" /></font>
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<form:input path="buyerComtel"
class="form-control form-control-user" placeholder="" />
<font color="red"><form:errors path="buyerComtel" /></font>
</div>
<div class="col-sm-6">
<form:input path="buyerCharger"
class="form-control form-control-user" placeholder="" />
<font color="red"><form:errors path="buyerCharger" /></font>
</div>
</div>
<a href="#" id="btnEdit"
class="btn btn-primary btn-user btn-block"> 수정 </a> <a href="#"
id="btnConfirm" style="display: none;"
class="btn btn-success btn-icon-split btn-block"> <span
class="icon text-white-50"> <i class="fas fa-check"></i>
</span> <span class="text">확인</span>
</a> <a href="#" id="btnCancel" style="display: none;"
class="btn btn-danger btn-icon-split btn-block"> <span
class="icon text-white-50"> <i class="fas fa-trash"></i>
</span> <span class="text">취소</span>
</a>
<hr>
<a href="/lprod/list" class="btn btn-google btn-user btn-block">
<i class="fab fa-google fa-fw"></i> 목록보기
</a>
<hr>
<div class="text-center">
<a class="small" href="forgot-password.html">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" href="login.html">Already have an account?
Login!</a>
</div>
</div>
</div>
</div>
</form:form>
</div>
</div>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">수정 요청</h5>
<button class="close" type="button" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready
to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">취소</button>
<a class="btn btn-primary" id="modalConfirm" href="#">확인</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$(".form-control-user").prop("readonly", true);
//수정버튼 클릭 시 수정버튼 사라지고, 확인/취소버튼 보임
$("#btnEdit").on("click", function() {
$(".form-control-user").prop("readonly", false);
//수정 대상이 아닌 요소 처리
//disabled -> true(비활성) (x) => form으로 안넘어감..
$("#buyerId").prop("readonly", true);
$("#lprodNm").prop("readonly", true);
//수정버튼 사라지고
$("#btnEdit").css("display", "none");
//확인/취소버튼 보임
$("#btnConfirm").css("display", "block");
$("#btnCancel").css("display", "block");
});
//취소버튼 클릭 시 새로고침 처리
$("#btnCancel").on("click", function() {
//참여수업 짱!!
location.reload();
});
//확인버튼 클릭 시 수정 요청
$("#btnConfirm").on("click", function() {
$(".modal-body").html("해당 글을 수정 하시겠습니까?");
$("#logoutModal").modal("show");
});
//모달 확인 버튼 클릭 시 수정 프로세스 진행
$("#modalConfirm").on("click", function() {
$("#buyerVO").submit();
});
$(".b-image").on("click", function(){
$("#ifrm").prop("src", "/download?fileName=${buyerVO.buyerImg}")
})
});
</script>
LprodController
@ResponseBody
@RequestMapping(value="/download"
,produces=MediaType.APPLICATION_OCTET_STREAM_VALUE)
public ResponseEntity<Resource> downloadFile(@RequestParam String fileName){
///resources/upload/ksh.jpg
//Java의 정규표현식에서 \와 $ 사용할 때, 오류 발생
logger.info("download file : " +
fileName.replaceAll("/", Matcher.quoteReplacement("\\")));
String downloadPath = "D:\\A_TeachingMaterial\\6.JspSpring\\workspace\\springProj2\\src\\main\\webapp\\resources"
+ fileName.replaceAll("/", Matcher.quoteReplacement("\\"));
logger.info("downloadPath : " + downloadPath);
Resource resource = new FileSystemResource(downloadPath);
logger.info("resource : " + resource);
String resourceName = resource.getFilename();
//Http 헤더 메시지 생성
HttpHeaders headers = new HttpHeaders();
try {
//Content-Disposition : 파일 이름에 한글인 경우 저장 시 깨지는 문제를 막기 위함
headers.add("Content-Disposition", "attachment;finename=" + new String
(resourceName.getBytes("UTF-8"), "ISO-8859-1"));
}catch(UnsupportedEncodingException e) {
e.printStackTrace();
}
return new ResponseEntity<Resource>(resource, headers, HttpStatus.OK);
}
//첨부파일을 보관하는 폴더를 연/월/일 계층 형태로 생성하기 위함
private String getFolder() {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Date date = new Date();
String str = sdf.format(date);
return str.replace("-", "/");
}
신입 개발자 입니다!!!