[spring] 화면 처리 복습
업데이트:
목록 페이지 작업
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>List Page</h1>
</body>
</html>
서버로 프로젝트를 실행해서 List Page가 잘 응답하는지 확인한다.
복붙하기
다운받은 SB Admin2 page의 tables.html 내 코드를 복사해서 list.jsp에 붙여넣는다. 이때 맨 위에 지시자는 삭제하면 안 된다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<!-- Bootstrap Core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- 생략 -->
list.jsp 페이지를 다시 보면 CSS가 깨진 이상한 페이지를 만날 수 있다. CSS를 되살리기 위해 SB Admin2 내 모든 폴더를 복사해서 webapp 밑 resouces 폴더에 붙여 넣는다.
그리고 list.jsp 파일 내 CSS나 JS 파일 경로를 /resources/로 변경한다.
변경 후 저장하면 놀랍게도 CSS가 소생되어 예쁜 list.jsp를 만날 수 있다.
헤더, 푸터 나누기
list.jsp 에서 헤더 부분을 삭제하고 header.jsp 부분에 붙여넣는다. 그리고 list.jsp 지시자 아래 코드를 작성한다.
<%@include file="../includes/header.jsp"%>
푸터도 마찬가지로 나눠 준 뒤 include한다.
JQuery 위치 변경
지금 JQuery는 footer.jsp에 포함되어있다. 얘를 header.jsp에서 선언해 JSP에서 자유롭게 사용할 수 있도록 하자.
footer.jsp 상단에 있는 JQuery를 삭제하고 header.jsp에 JQuery 링크를 제일 하단에 추가한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
목록 화면 처리
지금 페이지에는 쓸데없는게 너무 많다. 그래서 list.jsp에서 가지치기를 좀 많이 해야한다.
일단 얘네들은 싹 다 필요 없으니 개발자 도구로 태그를 확인해서 다 지워버린다.
얘도 지운다.
여기에도 너무 불필요한 태그들이 많다. 싹 정리해서 다음과 같은 가지들만 남아야한다.
<%@ 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">
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>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<%@include file="../includes/footer.jsp" %>
Model 데이터 출력
깔끔하게 페이지가 정리되었다. 이제 컨트롤러에서 Model로 받아온 데이터를 출력하기 위해 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"%>
그리고 C 태그를 이용해서 다음과 같이 작성한다.
<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 var="board" items="${list}">
<tr>
<td><c:out value="${board.bno}"/></td>
<td><c:out value="${board.title }" /></td>
<td><c:out value="${board.content}"/></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>
그럼 이렇게 데이터베이스에 있는 게시글들이 출력된다.
공유하기
Twitter Google+ LinkedIn
댓글남기기