2022_03_06 - oneso123456789/2022 GitHub Wiki
<div id='page-wrapper'>가 끝나는 태그부터 마지막까지는 footer.jsp의 내용으로 처리
739 라인 이하의 모든내용<div id='page-wrapper'> 이 태그 포함을 footer.jsp로 만들어줌
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
<%@include file="../includes/footer.jsp" %>
header.jsp와 마찬가지로 수정한 뒤에는 브라우저를 통해서 정상적으로 동작하는지 확인
JSP 페이지를 작성하다 보면 JavaScript로 브라우저 내에서 조작이 필요한 경우가 많음
예제는 jQuery를 이용할 것인데, 문제는 위의 방식대로 처리했을 때 jQuery라이브러리가
footer.jsp 내에 포함되어 있다는 점임.
성능을 조금 손해 보더라도 jQuery를 header.jsp에 선언해 두면 작성하는 JSP에서
자유롭게 사용할 수 있으므로 수정해야함
footer.jsp의 상단에 있는 jquery.min.js 파일의 <script>태그를 제거함
jQuery는 인터넷을 통해서 다운로드 받을 수 있게 jQuery의 링크를 검색해서
header.jsp 내에 추가해야 함
https://developers.google.com/speed/libraries/와 같은 페이지를 이용
<div id="page-wrapper">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
SB Admin2는 반응형으로 설계되어 있어서 브라우저의 크기에 맞게 모바일 용으로
자동으로 변경되지만 jQuery의 최신 버전을 사용한 상태에서는 모바일 크기에서
'새로고침'시 메뉴가 펼쳐지는 문제가 발생함
p235 그림 참고
이 문제를 해결하기 위해서 includes 폴더 내의 footer.jsp에 아래와 같은 코드를 추가
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
// 2022-03-06 모바일 새로고침시 메뉴가 펼쳐지는 문제 해결 위해서 넣음
$(".sidebar-nav")
.attr("class", "sidebar-nav navbar-collapse collapse")
.attr("aria-expanded",'false')
.attr("style","height:1px");
});
</script>
</body>
list.jsp 페이지의 일부를 include 하는 방식으로 처리했음에도 많은 HTML의 내용들이
존재하므로 최소한의 태그만 적용시킴
list.jsp에는 JSTL의 출력과 포맷을 적용할 수 있는 태그 라이브러리를 추가함
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ include file="../includes/header.jsp"%>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Tables</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">Board List Page</div>
<!-- /.panel-heading -->
<div class="panel-body">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>수정일</th>
</tr>
</thead>
</table>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
<%@include file="../includes/footer.jsp"%>
수정된 list.jsp를 저장하고 브라우저를 통해서 원하는 형태로 출력되는지 확인함
/board/list를 실행했을 때 이미 BoardController는 Model을 이용해서 게시물의 목록을 list라는 이름으로
담아서 전달했으므로 list.jsp에서는 이를 출력함
출력은 JSTL을 이용해서 처리함
list.jsp 내에
태그와 각 을 아래와 같이 작성함<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>수정일</th>
</tr>
</thead>
<c:forEach items="${list}" var="board">
<tr>
<td><c:out value="${board.bno}" /></td>
<td><c:out value="${board.title}" /></td>
<td><c:out value="${board.writer}" /></td>
<td><fmt:formatDate pattern="yyyy-MM-dd" value="${board.regdate}"/></td>
<td><fmt:formatDate pattern="yyyy-MM-dd" value="${board.updateDate}"/></td>
</tr>
</c:forEach>
</table>
코딩중
<td><fmt:formatDate pattern="yyyy-MM-dd" value="${board.updateDate}"/></td>
이 부분에서 오류 야기됨 발생된 이유는 내가 BoardVO클래스에서 private Date형으로 선언한
updateDate때문임 나는 처음에 updateDate를 updatedate로 앞뒤 모두 소문자로 선언함
하지만 코딩중엔 "${board.updateDate}"이런식으로 호출했기에 updatedate를 바꾸던지 호출을 "${board.updatedate}"`로 호출해줬어야 함 가독성을 높이기 위해서 BoardVO클래스 쪽을
updateDate로 바꿈 이후 여기 호출 부분에 문제가 생길시 updateDate로 통일하도록함