[Spring] 게시판 프로젝트8 - JSTL을 이용한 게시물 목록 조회

실습 템플릿을 따라서 사용하는 경우라면 jQuery의 버전을 변경해주는 것이 좋다. (템플릿의 jQuery버전은 낮음)

아래의 링크를 타고 접속해서 웹 CDN으로 추가해준다.

실습에서는 jQuery 3.x 버전의 minified를 사용하였다.

 

jQuery CDN

저 부분 복사하고 아래 이미지의 노란형광펜부분 삭제

실습에서는 이 버전 사용할거임

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
	integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
	crossorigin="anonymous"></script>

 

---

실습에서는 게시판 만들기를 진행하기 때문에 저 리스트 부분을 제외한 나머지 코드들(아래쪽에 그래프같은 애들)은 지워주고, 리스트도 한 행 부분만 남긴 채로 모두 지워줌. 필요없는 애들은 다 지워준다고 생각하기

 

👇 싹싹 지워서 뼈대만 남은 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@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">DataTables Advanced Tables</div>
			<!-- /.panel-heading -->
			<div class="panel-body">
				<table width="100%"
					class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>Rendering engine</th>
							<th>Browser</th>
							<th>Platform(s)</th>
							<th>Engine version</th>
							<th>CSS grade</th>
						</tr>
					</thead>
					<tbody>
						<tr class="odd gradeX">
							<td>Trident</td>
							<td>Internet Explorer 4.0</td>
							<td>Win 95+</td>
							<td class="center">4</td>
							<td class="center">X</td>
						</tr>
					</tbody>
				</table>

			</div>
			<!-- /.panel-body -->
		</div>
		<!-- /.panel -->
	</div>
	<!-- /.col-lg-12 -->
</div>

<!-- /.row -->
<%@include file="../includes/footer.jsp"%>

 

다 깔끔하게 지웠으면 아래의 이미지와 같은 뼈대 페이지를 확인할 수 있댜

 

---

 

JSTL(JSP Standard Tag Library)

JSTL : JSP에서 자주 사용하는 기능을 미리 구현해 놓은 커스텀 태그 라이브러리 모음

JSTL을 이용하여 JSP파일에서 데이터처리, 조건문, 반복문 등을 처리할 수 있도록 한다.

 

JSTL을 사용하기 위한 태그를 list.jsp상단에 추가한다.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

👇 오류발생시에는 참고

경로 사이에 jsp를 추가하여 사용하도록 한다

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

 

JSTL을 사용하여 list의 코드를 수정하면 다음과 같다.

<table width="100%" class="table table-striped table-bordered table-hover">
      <thead>
            <tr>
                  <th>#번호</th>
                  <th>제목</th>
                  <th>작성자</th>
                  <th>작성일</th>
                  <th>수정일</th>
            </tr>
      </thead>
      <tbody>
            <c:forEach items="${list}" var="board">
                  <tr class="odd gradeX">
                      <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>
      </tbody>
</table>

<c:forEach>나 <fmt:formatDate>같이 html과 자바코드를 함께 사용할 수 있도록 하는 것이 JSTL임

JSTL태그를 이용하여 Model객체에 담긴 게시물 정보들을 읽어올 수 있다.

var="board" : var항목으로 루프 내에서 읽어온 하나의 데이터 항목을 사용할 때 사용할 이름을 지정

데이터베이스에 있는 데이터들이 모두 출력된 것을 확인할 수 있다.