💪(6-6) [Spring&mybatis] 게시판 만들기 - tiles를 이용한 웹페이지 레이아웃 설정 / 부트스트랩 디자인 추가

개발환경

언어 : JAVA (JDK 11)
서버 : Apache Tomcat 9.0
프레임워크 : Spring Framework 3.9.18, MyBatis 3.5.8, Bootstrap 5.2.3
DB : OracleXE 11gR2
IDE : sts-3.9.18.RELEASE, SQL Developler

구현내용

1. 메인페이지 / 게시판 목록 구현
2. CREATE : 게시글 작성
3. READ : 게시글 보기 + 조회수 증가
4. UPDATE : 게시글 수정
5. DELETE : 게시글 삭제
6. tiles를 이용해 웹페이지 레이아웃 설정

---

tiles를 이용해 웹페이지 레이아웃 설정

1. tiles dependency 설치 (4개)

• tiles-core / tiles-jsp / tiles-servlet / tiles-extras

2. tiles : 화면 layout 구현

0. WEB-INF에 views에 필요한 jsp파일 생성

1. WEB-INF - tiles폴더 - tiles.xml 생성

• dtd설치

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
       
<tiles-definitions>
  
</tiles-definitions>

2. tiles.xml에 baselayout설정하기

• baseLayout : 전체 홈페이지의 baselayout (반복되는 header와 footer의 디자인 지정)
• index : 메인페이지. baselayout에서 header, footer를 받아옴 / content는 index.jsp로 지정

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
       
<tiles-definitions>

	<definition name="baseLayout" template="/WEB-INF/tiles/layout/baselayout.jsp">
		<put-attribute name="title" value=""/>	
		<put-attribute name="heading" value=""/>	
		<put-attribute name="subheading" value=""/>	
		<put-attribute name="header" value="/WEB-INF/tiles/common/header.jsp"/>	
		<put-attribute name="content" value=""/>	
		<put-attribute name="footer" value="/WEB-INF/tiles/common/footer.jsp"/>	
	</definition>
	
	<definition name="home" extends="baseLayout">
		<put-attribute name="title" value="Main"/>	
		<put-attribute name="heading" value="WELCOME TO MY SPACE!"/>	
		<put-attribute name="subheading" value="로그인하여 다양한 정보를 얻어보세요!"/>	
		<put-attribute name="content" value="/WEB-INF/views/home.jsp"/>	
	</definition>	

</tiles-definitions>

3. 부트스트랩 설치 (👾)

4. baselayout.jsp

• core / tag-tiles 설치
• 부트스트랩 연결

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  

  <div class="b-example-divider"></div>

  <header class="p-3 text-bg-dark">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
          <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" fill="currentColor" class="bi bi-egg-fried" viewBox="0 0 16 16">
  <path d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
  <path d="M13.997 5.17a5 5 0 0 0-8.101-4.09A5 5 0 0 0 1.28 9.342a5 5 0 0 0 8.336 5.109 3.5 3.5 0 0 0 5.201-4.065 3.001 3.001 0 0 0-.822-5.216zm-1-.034a1 1 0 0 0 .668.977 2.001 2.001 0 0 1 .547 3.478 1 1 0 0 0-.341 1.113 2.5 2.5 0 0 1-3.715 2.905 1 1 0 0 0-1.262.152 4 4 0 0 1-6.67-4.087 1 1 0 0 0-.2-1 4 4 0 0 1 3.693-6.61 1 1 0 0 0 .8-.2 4 4 0 0 1 6.48 3.273z"/>
</svg>
        </a>

        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
          <li><a href="#" class="nav-link px-2 text-secondary"></a></li>
          <li><a href="#" class="nav-link px-2 text-white">Board</a></li>
        </ul>


        <div class="text-end">
          <p class="nav-link px-2 text-white"></p>
          <button type="button" class="btn btn-outline-light me-2">Login</button>
          <button type="button" class="btn btn-warning">Sign-up</button>
        </div>
      </div>
    </div>
  </header>

4. header.jsp

• core / tag-tiles설치
• Board : list.jsp 와 연결

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  

  <div class="b-example-divider"></div>

  <header class="p-3 text-bg-dark">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
          <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" fill="currentColor" class="bi bi-egg-fried" viewBox="0 0 16 16">
  <path d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
  <path d="M13.997 5.17a5 5 0 0 0-8.101-4.09A5 5 0 0 0 1.28 9.342a5 5 0 0 0 8.336 5.109 3.5 3.5 0 0 0 5.201-4.065 3.001 3.001 0 0 0-.822-5.216zm-1-.034a1 1 0 0 0 .668.977 2.001 2.001 0 0 1 .547 3.478 1 1 0 0 0-.341 1.113 2.5 2.5 0 0 1-3.715 2.905 1 1 0 0 0-1.262.152 4 4 0 0 1-6.67-4.087 1 1 0 0 0-.2-1 4 4 0 0 1 3.693-6.61 1 1 0 0 0 .8-.2 4 4 0 0 1 6.48 3.273z"/>
</svg>
        </a>

        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
          <li><a href="#" class="nav-link px-2 text-secondary"></a></li>
          <li><a href="/list.do" class="nav-link px-2 text-white">Board</a></li>
        </ul>


        <div class="text-end">
          <p class="nav-link px-2 text-white"></p>
          <button type="button" class="btn btn-outline-light me-2">Login</button>
          <button type="button" class="btn btn-warning">Sign-up</button>
        </div>
      </div>
    </div>
  </header>

5. footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div class="b-example-divider"></div>

<div class="container">
  <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
    <div class="col-md-4 d-flex align-items-center">
      <a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
        <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
      </a>
      <span class="mb-3 mb-md-0 text-muted">&copy; 2023 Company, Inc</span>
    </div>

    <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
    </ul>
  </footer>
</div>

6. index.jsp

• core 설치
• 이미지 경로 : src="resources/images/mainphoto.png"
• 

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Home</title>
</head>
<body>
	<div align="center">
		<img src="resources/images/mainphoto.png" width="200" height="200"/>
	</div>
</body>
</html>

7. tiles 등록 : common-context.xml

• tiles.xml에서 설정한 definition name으로 페이지를 호출해주기 때문에 InternalResourceViewResolver 대신에 UrlBasedViewResolver로 변경해주기

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">

	<!-- controller -->
	<bean class="com.mycompany.myapp.HomeController" />

	<!-- tiles -->
	<bean class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<property name="definitions">
			<list>
				<value>/WEB-INF/tiles/tiles.xml</value>
			</list>
		</property>
	</bean>

	<!-- viewResolver -->
	<bean class="org.springframework.web.servlet.view.UrlBasedViewResolver">
		<property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView" />
	</bean>

</beans>

8. 실행

9. 게시판 페이지 tiles 연결 : tiles.xml

• name은 controller에서 jsp불러올 때 사용한 이름과 똑같이 적기
  

	<definition name="/board/list" extends="boardLayout">
		<put-attribute name="title" value="Board"/>	
		<put-attribute name="content" value="/WEB-INF/views/board/list.jsp"/>	
	</definition>	
	
	<definition name="/board/write" extends="baseLayout">
		<put-attribute name="title" value="Write"/>		
		<put-attribute name="content" value="/WEB-INF/views/board/write.jsp"/>	
	</definition>		
	
	<definition name="/board/read" extends="baseLayout">
		<put-attribute name="title" value="Write"/>		
		<put-attribute name="content" value="/WEB-INF/views/board/read.jsp"/>	
	</definition>

	<definition name="/board/update" extends="baseLayout">
		<put-attribute name="title" value="Write"/>		
		<put-attribute name="content" value="/WEB-INF/views/board/update.jsp"/>	
	</definition> 

10. 연결확인

3. 게시판 관련 jsp에 추가 작업

3-1. write.jsp -'취소'버튼 추가

1. 취소버튼 생성 : write.jsp

		<input type="submit" value="작성" id='btnWrite'/>
		<input type="submit" value="취소" id='btnCancle'/>
	</form>

2. 제이쿼리 작성 : write.jsp

• 제이쿼리 설치(🦩)
• 'btnCancle'버튼이 클릭되면 list.do가 실행

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		$('#btnCancle').click(function(){
			$('#frm').attr('action', 'list.do').submit();
		})
	});
</script>

3-1. 실행 -> '취소'를 누르면 비어있는 글이 작성됨

3-2. 비어있는 값은 들어가지 않도록 쿼리문 수정 및 게시판테이블 재생성

• NOT NULL : null을 허용하지 않음

DROP TABLE boardBasic;

CREATE TABLE boardBasic(
    num number CONSTRAINT boardBasic_num PRIMARY KEY,
    writer varchar2(50) not null,
    title varchar2(50) not null,
    content varchar2(100) not null,
    regdate date,
    readcount number default 0
    );

DROP SEQUENCE boardBasic_num_seq;

CREATE SEQUENCE boardBasic_num_seq
START WITH 1
INCREMENT BY 1
NOCACHE
NOCYCLE;

INSERT INTO boardBasic (num, writer, title, content, regdate, readcount)
VALUES(boardBasic_num_seq.nextval, '박재언','첫번째 게시글','첫번째 게시글의 내용입니다',sysdate,0);

INSERT INTO boardBasic (num, writer, title, content, regdate, readcount)
VALUES(boardBasic_num_seq.nextval, '이지훈','두번째 게시글','두번째 게시글의 내용입니다',sysdate,0);

commit;

3-3. 버튼 타입 변경 : write.jsp

• form에 action속성 지우기
• id 추가

	<form name="frm" method="post">
		<input type="button" value="작성" id='btnWrite'/>
		<input type="button" value="취소" id='btnCancle'/>
	</form>

3-4. 제이쿼리 작성 : write.jsp

• btnWrite버튼을 누르면 frm에 action속성(write.do) 추가
• btnCancle버튼을 누르면 frm에 action속성(list.do) 추가

<script>
	$(document).ready(function(){
		$('#btnWrite').click(function() {
			$('#frm').attr('action', 'write.do').submit();
		});
		$('#btnCancle').click(function() {
			$('#frm').attr('action', 'list.do').submit();
		});	
	});
</script>

3-5. 실행

3-2. list.jsp 디자인 수정

1. 부트스트랩 디자인 추가

2. '글쓰기' 버튼으로 변경

	<table class="table table-border mt-1">
		<form name="frm" id="frm" method="post">
			<input type="button" href="write.do" value="글쓰기" id="btnWrite" class="btn btn-secondary btn-sm"/>
		</form>

3. 제이쿼리 추가

<script>
	$(document).ready(function(){
		$('#btnWrite').click(function() {
			$('#frm').attr('action', 'write.do').submit();
		});
	});
</script>

4-1. 실행 -> 오류

4-2. form의 method를 GET방식으로 변경

	<table class="table table-border mt-1">
		<form name="frm" id="frm" method="get">
			<input type="button" href="write.do" value="글쓰기" id="btnWrite" class="btn btn-secondary btn-sm"/>
		</form>

5. 실행

3-3. write.jsp 디자인 수정

1. 부트스트랩 디자인 추가

3-4. read.jsp 디자인 수정

1. 부트스트랩 디자인 추가

2. <a>요소를 <input> button으로 변경

• form의 method="get"로 변경

<form name="frm" id="frm" method="get">
		<input type="button" value="목록" id="btnList" class="btn btn-secondary btn-sm"/>
		<input type="button" value="수정" id="btnUpdate" class="btn btn-secondary btn-sm"/>
		<input type="button" value="삭제" id="btnDelete" class="btn btn-secondary btn-sm"/>
</form>

3. 제이쿼리 추가

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		$('#btnUpdate').click(function() {
			$('#frm').attr('action', 'update.do?num=${dto.num}').submit();
		});
		$('#btnDelete').click(function() {
			$('#frm').attr('action', 'delete.do?num=${dto.num}').submit();
		});
		$('#btnList').click(function() {
			$('#frm').attr('action', 'list.do').submit();
		});	
	});
</script> 

4-1. 오류 -> num값을 못 받아옴

4-2. read.jsp에 num값이 없었음 -> hidden으로 받아오도록 처리

<tr><input type="hidden" name="num" value="${dto.num}" />

5. 실행

3-5. update.jsp 디자인 수정

1. '취소'버튼 추가 및 부트스트랩 디자인 추가

• 버튼, 제이쿼리 추가
• form에 id=frm, action속성은 삭제
• num값 hidden으로 받아오기

2. 실행