전체코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import = "java.util.*" %>
<%
int size = 0;
List<Map<String,Object>> nList = (List)request.getAttribute("nList");
if(nList != null)
{
size = nList.size();
out.print(size);
}
%>
<!-- 챙겨야 되는 부분
테스트 링크를 따져ㅓ야 한다.
http://localhost:8000/notice/noticeList.gd
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>공지사항{webapp}</title>
<%@include file = "/common/bootstrap_common.jsp" %>
<link rel ="stylesheet" href = "/css/notice.css"/>
<script type = "text/javascript">
/*
Include를 사용하면 한개의 파일로 렌더링한다.
noticeList_jsp.java -> noticeList_jsp.class 로간다.
지금 방법은 하나가 되는 방법이다. 관련되서 찾아보고 싶으면 jsp include로 검색하면된다.
*/
function searchEnter(){
console.log("searchEnter");
}
function noticeSearch(){
console.log("noticeSearch");
}
</script>
</head>
<body>
<!-- 공지사항 목록 처리할 코드 작성해 보기 -->
<div class="container">
<div class="page-header">
<h2>공지사항 <small>공지목록</small></h2>
<hr />
</div>
<!-- 검색기 시작 -->
<div class="row">
<div class="col-3">
<select id="gubun" class="form-select" aria-label="분류선택">
<option value="none">분류선택</option>
<option value="n_title">제목</option>
<option value="n_writer">작성자</option>
<option value="n_content">내용</option>
</select>
</div>
<div class="col-6">
<input type="text" id="keyword" class="form-control" placeholder="검색어를 입력하세요"
aria-label="검색어를 입력하세요" aria-describedby="btn_search" onkeyup="searchEnter()"/>
</div>
<div class="col-3">
<button id="btn_search" class="btn btn-danger" onClick="noticeSearch()">검색</button>
</div>
</div>
<!-- 검색기 끝 -->
<!-- 회원목록 시작 -->
<div class='notice-list'>
<table class="table table-hover">
<thead>
<tr>
<th width="10%">#</th>
<th width="50%">제목</th>
<th width="20%">작성자</th>
<th width="20%">날짜</th>
</tr>
</thead>
<tbody>
<%
for(int i = 0; i < size; i++){
Map<String,Object> rmap = nList.get(i);
%>
<tr>
<td><%=rmap.get("N_NO")%></td>
<td><%=rmap.get("N_TITLE")%></td>
<td><%=rmap.get("N_WRITER") %></td>
</tr>
<%
}
%>
</tbody>
</table>
<!-- [[ 페이징 처리 구간 ]] -->
<!-- [[ 페이징 처리 구간 ]] -->
<div class='notice-footer'>
<button class="btn btn-warning" onclick="noticeList()">
전체조회
</button>
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#noticeForm">
글쓰기
</button>
</div>
</div>
<!-- 회원목록 끝 -->
</div>
<!-- body end -->
<!-- footer start -->
<!-- footer end -->
<!-- ========================== [[ 공지사항 Modal ]] ========================== -->
<div class="modal" id="noticeForm">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">공지사항</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form id="f_notice" method="get" action="./noticeInsert.pj1">
<input type="hidden" name="method" value="memberInsert">
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" id="n_title" name="n_title" placeholder="Enter 제목" />
<label for="n_title">제목</label>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" id="n_writer" name="n_writer" placeholder="Enter 작성자" />
<label for="n_writer">작성자</label>
</div>
<div class="form-floating mb-3 mt-3">
<textarea rows="5" class="form-control h-25" aria-label="With textarea" id="n_content" name="n_content"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-warning" data-bs-dismiss="modal" onclick="noticeInsert()" value="저장">
<input type="button" class="btn btn-danger" data-bs-dismiss="modal" value="닫기">
</div>
</div>
</div>
</div>
<!-- ========================== [[ 공지사항 Modal ]] ========================== -->
</body>
</html>
<!--
M : margin(외부 여백)
P : padding(안쪽 여백)
t : top
b : bottom
l : left
r : right
x : x축 (left,right)
y : y축 (top, bottom)
- 0,1,2,3,4,5,auto
: 1.25(rem) font-size가 16px 이면 4px이다.
-->
-
size를 구한 이유는 페이징 처리를 하기 위해서
List<Map<String,Object>> nlist = (List)request.getAttribute("nList");이 부분은 즉 사용자에 대한 디비정보를 가져오는것이다. -
그 말은 size()를 구하게된다면 하나의 맵 객체가 리스트에선 하나의 방이기 때문에, 1번 게시물, 2번 게시물, 3번 게시물이 된다.
-
Include를 사용하면 한개의 파일로 렌더링한다.
include 디렉티브
-
include 디렉티브는 다른 파일의 내용을 현재 위치에 삽입한 후에 JSP 파일을 자바 파일로 변환하고 컴파일하는 방식이다.
-
jsp 파일은 2개인데, 서블릿은 한개다.
<%@ include file="포함할파일" %><%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%
int number = 10;
%>
<%@ include file="./includee.jspf" %>
공통변수 DATAFORDER = "<%= dataFolder %>"
</body>
</html><%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
includer.jsp에서 지정한 번호: <%= number %>
<p>
<%
String dataFolder ="c:data";
%>
액션태그 <jsp:include>
-
이미 있는 JSP 페이지를 현재 JSP 페이지에 포함하는 태그이다.
-
화면의 유지보수 및 재사용성을 높일 수 있다.
-
다른 JSP의 실행 결과나 코드를 포함할 때 사용한다.
-
이 기능을 사용하면 중복된 코드 없이 여러 JSP코드에 공통된 구성 요소를 만들 수 있다.
-
2개의 다른 JSP페이지의 논리적 결합
-
a_jsp.java + b_jsp.java
-
파일이 두개로 생성된다. + 처리 결과가 a.jsp에 반영된다.
-
제어권은 a.jsp에 있다. / 주소가 바뀌지 않는다.
-
요청이 계속 유지되는 것으로 판단한다.(WAS)
-
정리
아는만큼보인다.