달란트(Talanton)

이전에 기술한 내용은 다음과 같다.

- 게시판 관리기능 : 여러 개의 게시판이 필요할 때 (1/) : http://talanton.tistory.com/51

  + 요구사항

  + 데이터베이스 테이블 고려사항

- 게시판 관리기능 : 여러 개의 게시판이 필요할 때 (2/) : http://talanton.tistory.com/53

  + 새로운 스프링 프로젝트 bdmanager의 생성

  + pom.xml 설정 변경 : java-version 및 spring version의 설정

  + 프로젝트 설정 변경 : java-version 및 tomcat 8.5 사용 설정

  + 프로젝트의 Encoding을 UTF-8로 설정

  + 데이터베이스 테이블의 설정 : Oracle 11g를 사용

여기서는 화면설계와 게시판 관리기능에 대한 구현을 기술한다.

1. 화면 설계

 위 그림과 같이 두 개의 메뉴가 있고, 지식창고 메뉴를 누르면 서브 메뉴가 보이는 구조를 가진다.

- header : gnb로 지식창고와 관리자 메뉴를 가지고, 지식창고 메뉴를 누르면 게시판에 대한 서브 메뉴가 나타난다.

- section : lnav와 content라는 두개의 section으로 구성된다.

- footer : 영역만 표시한다. (중요하지 않음)

2. 관리자 메뉴 처리

  - "관리자" 메뉴를 누르면, 게시판 관리 기능의 "게시판 목록보기" 창으로 이동한다. (url /board/manager/list)

2.1 새로운 BoardController.java를 생성

package com.example.board.controller;

import javax.inject.Inject;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import com.example.board.service.BoardService;

@Controller

@RequestMapping("/manager")

public class BoardController {

private static final Logger logger = LoggerFactory.getLogger(BoardController.class);

@Inject

private BoardService service;    // 게시판 관리기능을 처리하기 위해 BoardService를 주입한다.

@RequestMapping(value="/list", method=RequestMethod.GET)

public void list(Model model) throws Exception {    // View로는 기본적으로 list.jsp가 사용된다.

model.addAttribute("list", service.list());         // 게시판 목록 정보를 가져온다.

}

}

2.2 BoardService.java 생성

package com.example.board.service;

import java.util.List;

import com.example.board.domain.BoardVO;

public interface BoardService {

public List<BoardVO> list() throws Exception;

}

2.3 BoardServiceImpl.java 생성

package com.example.board.service;

import java.util.List;

import javax.inject.Inject;

import org.springframework.stereotype.Service;

import com.example.board.domain.BoardVO;

import com.example.board.persistence.BoardDAO;

@Service        // Spring에서 동작하기 위해 Service annotation 사용

public class BoardServiceImpl implements BoardService {

@Inject

private BoardDAO dao; // 데이터베이스 처리를 위한 DAO를 주입

@Override

public List<BoardVO> list() throws Exception {

return dao.list(); // 게시판 목록 정보를 데이터베이스로부터 가져 온다.

}

}

2.4 BoardDao.java 생성

package com.example.board.persistence;

import java.util.List;

import com.example.board.domain.BoardVO;

public interface BoardDAO {

public List<BoardVO> list() throws Exception;

}

2.5 BoardDAOImpl.java 생성

package com.example.board.persistence;

import java.util.List;

import javax.inject.Inject;

import org.apache.ibatis.session.SqlSession;

import org.springframework.stereotype.Repository;

import com.example.board.domain.BoardVO;

@Repository        // Spring에서 동작하기 위해 Repository annotation 사용

public class BoardDAOImpl implements BoardDAO {

@Inject

private SqlSession session; // MyBatis 처리를 위한 SqlSession을 주입

private static String namespace = "com.example.board.mappers.BoardMapper";

@Override

public List<BoardVO> list() throws Exception { // MyBatis에서 게시판 목록 정보를 가져온다.

return session.selectList(namespace + ".list");

}

}

2.6 boardMapper.xml 정의

실질적으로 데이터베이스에서 게시판 목록 정보를 가져 온다.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper

PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.example.board.mappers.BoardMapper">

<select id="list" resultType="com.example.board.domain.BoardVO">

<![CDATA[

select 

board_id, board_name, board_type, url, secret, read_allow, write_allow, reply_allow, modify_allow, remove, download, upload, nAttach, aSize, display_format, creating_date, board_desc

from 

board 

where board_id > 0 

order by board_id desc, creating_date desc

]]>  

</select>

</mapper>

2.7 BoardVO.java

  게시판 정보에 대한 VO를 정의한다.

package com.example.board.domain;

import java.util.Date;

public class BoardVO {

private Integer board_id;

private String board_name;

private String board_type;

private String url;

private String secret;

private String read_allow;

private String write_allow;

private String reply_allow;

private String modify_allow;

private String remove;

private String download;

private String upload;

private Integer nAttach;

private String aSize;

private Integer display_format;

private Date creating_date;

private String board_desc;

        /* getter와 setter 및 toString()을 설정해 준다. (생략) */

}

3. 설정

3.1 데이터베이스에 대한 접근을 위한 설정

- pom.xml

    /* 오라클 데이터베이스 기능을 이용하기 위한 Maven Repository를 추가 */

    </properties>

    <!-- oracleDB -->

    <repositories>

<repository>

<id>mesir-repo</id>

<url>http://maven.jahia.org/maven2</url>

</repository>

    </repositories>

    <dependencies>

    /* 데이터베이스 처리를 위한 MyBatis, Oracle dependency 추가 *

    <!-- DB  -->

    <dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-jdbc</artifactId>

<version>4.3.1.RELEASE</version>

    </dependency>

    <dependency>

<groupId>org.mybatis</groupId>

<artifactId>mybatis</artifactId>

<version>3.4.1</version>

    </dependency>

    <dependency>

<groupId>org.mybatis</groupId>

<artifactId>mybatis-spring</artifactId>

<version>1.3.1</version>

    </dependency>

    <dependency>

<groupId>oracle</groupId>

<artifactId>ojdbc14</artifactId>

<version>10.2.0.4</version>

    </dependency>

3.2 root-context.xml 변경

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"

  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

  xmlns:context="http://www.springframework.org/schema/context"

  xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"

  xsi:schemaLocation="http://mybatis.org/schema/mybatis-spring

    http://mybatis.org/schema/mybatis-spring-1.2.xsd

    http://www.springframework.org/schema/beans

    http://www.springframework.org/schema/beans/spring-beans.xsd

    http://www.springframework.org/schema/context

    http://www.springframework.org/schema/context/spring-context-4.1.xsd">

  <!-- Root Context: defines shared resources visible to all other web components -->

  <!-- DB연결 -->

  <!-- 오라클 JDBC driver -->

  <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">

    <property name="driverClassName" value="oracle.jdbc.OracleDriver"></property>

    <property name="url" value="jdbc:oracle:thin:@localhost:1521:orcl"></property>

    <property name="username" value="jspwork"></property>

    <property name="password" value="jspwork0"></property>

  </bean>

  <!-- 오라클과 마이바티스 연결 -->

  <bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">

    <property name="dataSource" ref="dataSource"/>

    <property name="configLocation" value="classpath:/mybatis-config.xml"></property>

    <property name="mapperLocations" value="classpath:mappers/**/*Mapper.xml"/>

  </bean>

  <!-- 마이바티스 -->

  <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate" destroy-method="clearCache">

    <constructor-arg name="sqlSessionFactory" ref="sqlSessionFactoryBean"/>

  </bean>

  <!-- Service와 DAO에 대한 주입을 위해, Service와 DAO가 있는 경로를 설정 -->

  <context:component-scan base-package="com.example.board.persistence"></context:component-scan>

  <context:component-scan base-package="com.example.board.service"></context:component-scan>

</beans>

3.3 resources/mybatis-config.xml

  mapper에서 VO에 대한 경로를 알 수 있도록 mybatis-config에서 설정해 준다.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE configuration

  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"

  "http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>

  <typeAliases>

    <package name="com.example.board.domain"/>    

  </typeAliases>

</configuration>

4. view 관련 파일

4.1 home.jsp

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

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

<%@ page session="false" %>

<html>

<head>

<title>Home</title>

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/common.css"/>

</head>

<body>

<header>  <!-- 헤더 영영 정의 -->

<jsp:include page="common/header.jsp" flush="false"/>

</header>

<section id="wrap">    <!-- 본문 영역 정의 -->

<section id="lnav">    <!-- 사이드 메뉴 영영 정의 -->

<jsp:include page="common/lnav.jsp" flush="false"/>

</section>

<section id="content">    <!-- 내용 영역 정의 -->

</section>

</section>

<footer>    <!-- 풋터 영역 정의 -->

<jsp:include page="common/footer.jsp" flush="false"/>

</footer>

</body>

</html>

4.2 common.css

@CHARSET "UTF-8";

* {

margin: 0px;

padding: 0px;

border: 0;

}

html[lang^="ko"] {

font-family: "Nanum Gothic", "나눔 고딕", "NanumGothic", sans-serif;

}

header {

width: 980px;

height: 90px;

background-color: black;

margin: 0 auto;

}

/* content */

#wrap {

width: 980px;

margin: 0 auto;

margin-top: 5px;

min-height: 770px;

}

#lnav {

width: 178px;

float:left;

border: 1px solid black;

min-height: 768px;

}

#content {

width: 758px;

float:right;

border: 1px solid black;

padding: 20px;

min-height: 728px;

}

footer {

clear: both;

width: 980px;

height: 50px;

background-color: black;

margin: 0 auto;

margin-top: 5px;

}

4.3 header.jsp

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

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

<!-- 게시판 관리 기능에 의하여 게시판의 추가, 삭제, 변경 등에 대한 처리를 하는 javascript 파일 -->

<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/resources/js/header.js"></script>

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/header.css"/>

<nav>

  <div id="gnbMenu">

    <ul id="gnb">

      <li class="item" id="item1">

<a href="" class="menu">지식창고</a>

<div class="sub" id="sub1">

  <ul class="subGnb" id="subGnb1">

    <!-- 새로운 게시판 추가 시, 추가될 li 영역 -->

<!-- 

    <li><a href="${pageContext.request.contextPath}/article/list?board_id=1&p=1">시 모음</a></li>

     -->

  </ul>

</div>

      </li>

      <li class="item" id="item2">

<a href="manager/list" class="menu">관리자</a>

      </li>

    </ul>

  </div>

</nav>

4.4 header.css

@CHARSET "UTF-8";

ul {list-style:none;}

a {vertical-align:top; text-decoration:none;}

a:hover {color:orange;}

#gnb {position:relative; width:870px; height: 70px; padding-top: 20px;}

#gnb:after {content:" "; display:block; clear:both;}

#gnb .item {width: 260px; text-align: center; float: left; margin-right:10px; height:20px;}

#gnb .item .menu {float:left; position:relative; width:160px; height:20px;}

#gnb .item .menu span {position:absolute; width:100%; height:20px;}

#gnb .item .sub {display:none; float:left; position:relative; padding:10px 0; font-size:12px;}

#gnb .item .sub li {float: left; margin:0 10px; text-align: center; }

#gnb .item.on .sub {display:block;}

#gnb .item #sub1 {width: 680px; margin-left: 0px;}

#gnb .item li { float: left; margin: 0 10px; }

4.5 footer.css

@CHARSET "UTF-8";

#foot {

margin: 0 auto;

text-align: center;

color: white;

padding-top: 15px;

}