게시판 관리기능 - 여러 개의 게시판이 필요할 때 (4/5)

웹개발 2017. 3. 8. 23:09

글을 작성하면서 구현을 하다가 (1/), (2/), (3/)까지는 이어졌는데, 갑자기 구현에  신경을 쓰느라 이번 글에서는 어느 정도 완성된 버전에서 다시 기술한다.

맥은 어느 정도 유지가 되지만, 이전 글에서 스무드하게 이어지지 못해  이해에 어려움이 있을 수도 있을 것 같다.

1. 게시판 관리 기능 중 "게시판 목록 보기"

Header의 메뉴 창에서 "관리자" 메뉴를 선택하면 "게시판 목록 보기" 창으로 이동하게 된다.  url은 "localhost:8080/board/manager/list" 이다. 즉, 게시판 목록 보기 기능을 구현한 것이다.

1.1 BoardController에서 url /manager/list를 처리

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

  public void list(Criteria cri, Model model) throws Exception {    // View로는 기본적으로 list.jsp가 사용됨

    List<BoardVO> list = service.list(cri);    // 게시판 목록정보를 가져 온다.

    for(int i = 0;i < list.size();i++) {           // 게시판의 게시글 수를 가져와 저장한다.

     BoardVO board = list.get(i);

board.setNofArticle(aService.listCount());    //

    }

    model.addAttribute("list", list);         // 게시판 목록 정보를 model에 저장한다.

    PageMaker pm = new PageMaker();     // 페이징 처리를 위해 필요한 정보를 담을 클래스를 인스턴스화

    pm.setCri(cri);                                  // 페이징 처리를 위한 기준을 저장 (cri는 기본값이 있지만, 사용

    pm.setTotalCount(service.listCount());    // 자가 파라미터로 제공 가능. 전체 게시판의 수를 얻는다.

    model.addAttribute("pageMaker", pm); // 페이징 정보를 model에 저장

  }                                                     // view는 기본적으로 list.jsp

1.2 list.jsp : "게시판 목록 보기" view

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

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

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

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>게시판 목록 보기</title>

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

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/boardlist.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"> <!-- 내용 영역 정의 -->

    <h1>게시판 목록 보기</h1>

    <table border="1">

      <c:if test="${pageMaker.totalCount > 0}">

<tr>

  <td colspan="6">

    ${pageMaker.cri.pageStart}-${pageMaker.cri.pageEnd}

    [${pageMaker.cri.page}/${pageMaker.totalPageCount}]

  </td>

</tr>

      </c:if>


      <c:choose>

<c:when test="${list.size() == 0}">

  <tr>

    <td colspan="6">

      게시판이 없습니다.

    </td>

  </tr>

</c:when>

<c:otherwise>

  <tr>

    <td style="text-align: center" width="6%">번호</td>

    <td style="text-align: center" width="21%">게시판 이름</td>

    <td style="text-align: center" width="13%">게시판 유형</td>

    <td style="text-align: center" width="32%">URL</td>

    <td style="text-align: center" width="17%">생성일</td>

    <td style="text-align: center" width="11%">게시글 수</td>

  </tr>

  <c:forEach var="board" items="${list}">

    <tr>

      <td>${board.board_id}</td>

      <td>

<c:set var="query" value="board_id=${board.board_id}&page=${pageMaker.cri.page}

 &perPageNum=${pageMaker.cri.perPageNum}"/>

<a href="<c:url value="manager/read?${query}"/>">${board.board_name}</a>

      </td>

      <td>${board.board_type}</td>

      <td>${board.url}</td>

      <td><fmt:formatDate value="${board.creating_date}" pattern="yyyy-MM-dd" /></td>

      <td>${board.nofArticle}</td>

    </tr>

  </c:forEach>

  <tr>

    <td colspan="6">

      <c:if test="${pageMaker.prev == true}">

<a href="<c:url value="/manager/list?page=${pageMaker.startPage-1}&perPageNum=

${pageMaker.cri.perPageNum}"/>">이전</a>

      </c:if>

      <c:forEach var="pno" begin="${pageMaker.startPage}" end="${pageMaker.endPage}">

<a href="<c:url value="/manager/list?page=${pno}&perPageNum=

${pageMaker.cri.perPageNum}" />">[${pno}]</a>

      </c:forEach>

      <c:if test="${pageMaker.next == true}">

<a href="<c:url value="/manager/list?page=${pageMaker.endPage+1}

&perPageNum=${pageMaker.cri.perPageNum}"/>">다음</a>

      </c:if>

    </td>

  </tr>

</c:otherwise>

      </c:choose>

      <tr>

        <td colspan="6">

  <a href="write">게시판 만들기</a>

        </td>

      </tr>

    </table>

  </section>

</section>

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

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

</footer>

</body>

</html>


아래의 그림과 같은 내용이 보여진다. (물론 처음에는 아무것도 없겠지만... 지금은 게시판 1개를 추가한 것)


1.3 boardlist.css : 위 그림과 같은 테이블 형태의 게시판 목록을 보여주도록 꾸며주는 파일

@CHARSET "UTF-8";

#content table {

width: 100%;

border: 1px solid black;

border-collapse: collapse;

border-spacing: 0px;

margin-top: 20px;

}

#content td {

border: 1px solid black;

border-collapse: collapse;

border-spacing: 0px;

padding: 5px;

}


2. 게시판 생성 : "게시판 만들기" 메뉴 동작

2.1 BoardController /manager/write 동작

  위 list.jsp 파일에서 "게시판 만들기" 버튼을 누르면 BoardController로 /manager/list가 전달된다.

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

  public String write() {

    return "/manager/writeForm";    // writeForm.jsp를 보여준다.

  }


2.2 writeForm.jsp : 게시판 추가를 위한 Form 입력

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

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

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>게시판 만들기</title>

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

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/boardwrite.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"> <!-- 내용 영역 정의 -->

    <h2>게시판 만들기</h2>

    <form action="<c:url value='write' />" method="post">

      게시판 이름: <input type="text" name="board_name" size="20"/> <br/>

      게시판 유형: <select name="board_type">

<option value="기본">기본</option>

<option value="Q&A">Q&#38A</option>

<option value="이미지">이미지</option>

<option value="공지사항">공지사항</option>

<option value="자료실">자료실</option>

<option value="방명록">방명록</option>

      </select><br>

      url : <input type="text" name="url" size="40"><br>

      비밀글 허용여부 : <input type="radio" name="secret" value="T">&nbsp;감추기&nbsp;&nbsp;&nbsp;

        <input type="radio" name="secret" value="F" checked="checked">&nbsp;보여주기<br>

      읽기 권한 : <select name="read_allow">

<option value="all">모두 허용</option>

<option value="login">로그인 후</option>

<option value="customer">고객</option>

<option value="business">상인</option>

<option value="admin">관리자</option>

      </select><br>

      쓰기 권한 : <select name="write_allow">

<option value="all">모두 허용</option>

<option value="login">로그인 후</option>

<option value="customer">고객</option>

<option value="business">상인</option>

<option value="admin">관리자</option>

      </select><br>

      댓글 쓰기 권한 : <select name="reply_allow">

<option value="all">모두</option>

<option value="login">로그인 후</option>

<option value="customer">고객</option>

<option value="business">상인</option>

<option value="admin">관리자</option>

      </select><br>

      수정 권한 : <select name="modify_allow">

<option value="all">모두</option>

<option value="login">로그인 후</option>

<option value="customer">고객</option>

<option value="business">상인</option>

<option value="writer">작성자</option>

<option value="admin">관리자</option>

      </select><br>

      삭제 권한 : <select name="remove">

<option value="writer">작성자</option>

<option value="admin">관리자</option>

      </select><br>

      다운로드 권한 : <select name="download">

<option value="all">모두</option>

<option value="login">로그인 후</option>

<option value="customer">고객</option>

<option value="business">상인</option>

<option value="admin">관리자</option>

      </select><br>

      업로드 권한 : <select name="upload">

<option value="all">모두</option>

<option value="login">로그인 후</option>

<option value="customer">고객</option>

<option value="business">상인</option>

<option value="admin">관리자</option>

      </select><br>

      첨부 파일 수 : <input type="number" name="nAttach" min="0" max="5"><br>

      첨부 파일 크기제한(한 개) : <select name="aSize">

<option value="0">0</option>

<option value="50KB">50KB</option>

<option value="200KB">200KB</option>

<option value="1MB">1MB</option>

<option value="10MB">10MB</option>

<option value="100MB">100MB</option>

      </select><br>

      내용 표시 형식 : <select name="display_format">

<option value="1">제목만 표시</option>

<option value="2">내용 일부 표시</option>

<option value="3">내용 전부 표시</option>

      </select><br>

      게시판 설명: <br/>

       <textarea name="board_desc" cols="80" rows="3"></textarea>

      <br/>

      <input id="addBtn" type="submit" value="전송" />

    </form>

  </section>

</section>

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

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

</footer>

</body>

</html>



2.3 boardwrite.css : 위 그림과 같은 "게시판 만들기" view의 디자인 제공

@CHARSET "UTF-8";

#content form {

margin-top: 20px;

line-height: 1.5;

}

#content textarea {

line-height: 1.5;

}

#content #addBtn {

width: 200px;

font-size: 14px;

padding: 10px;

background-color: blue;

color: white;

border-radius: 5px 5px 5px 5px;

}


2.4 BoardController /manager/write (Post) 동작

  @RequestMapping(value="/write", method=RequestMethod.POST)

  public String writePro(BoardVO board) {    // 게시판 정보를 입력 받아

service.add(board);                         // 데이터베이스에 저장하고

return "redirect:/manager/list";          // 게시판 목록 보기로 이동

  }


2.5 게시판 추가 시 메뉴 변경

- 게시판을 추가하면 그에 따라 메뉴도 추가해 주어야 한다. 메뉴는 header.jsp에서 javascript로 처리를 한다.

<%@ 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" src="${pageContext.request.contextPath}/resources/js/jquery-1.11.3.min.js"></script>

<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"/>

<script type="text/javascript" charset="utf-8">

  sessionStorage.setItem("contextpath", "${pageContext.request.contextPath}");

</script>

<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">

    <!-- 게시판 추가로 인해 게시판 보기 메뉴가 추가될 영역 (javascript로 처리 : header.js)

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

    -->

  </ul>

</div>

      </li>

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

<a class="menu" href="<c:url value="/manager/list"/>">관리자</a>

      </li>

    </ul>

  </div>

</nav>


2.6 header.js

$(function() {

  var ctx = getContextPath();    // 프로젝트의 contextPath를 가져오는 부분

  getMenuInfo();                    // 서버로부터 메뉴처리를 위한 게시판 정보를 가져 온다.


  var gnbArea = document.getElementById("gnb");

  var menuItemAll = gnbArea.getElementsByTagName("li");

  var menuItem = new Array();

  var currentItem, prevItem;

  for(i=0;i<menuItemAll.length;i++){

    if((menuItemAll[i].className).indexOf("item") > -1){

      menuItem.push(menuItemAll[i]);

    }

  }


  for(i=0;i<menuItem.length;i++){

    var link = menuItem[i].getElementsByTagName("a")[0];

    var layer = menuItem[i].getElementsByTagName("div")[0];

    var subLinks = menuItem[i].getElementsByTagName("div")[0].getElementsByTagName("a");


    link.onmouseover = layer.onmouseover = link.onfocus = function(e){

      currentItem = this.parentNode;

      if(prevItem){

removeClass(prevItem,"on");

      }

      addClass(currentItem,"on");

      prevItem = currentItem;

    }

    link.onmouseout = layer.onmouseout = function(e){

      removeClass(this.parentNode,"on");

    }

    link.onkeydown = function(e){

      if (event.shiftKey && event.keyCode == 9){

  removeClass(this.parentNode,"on");

      }

    }

    for(j=0;j<subLinks.length;j++){

      subLinks[subLinks.length-1].onblur = function(e){

        removeClass(this.parentNode.parentNode.parentNode.parentNode,"on");

      }

    }

  }


  // 서버로부터 게시판에 대한 메뉴 처리를 위해 게시판 정보를 가져오는 부분

  function getMenuInfo() {        // 서버로 /manager/getMenuInfo 요청

    $.get(ctx + "/manager/getMenuInfo", function(data, status) {

      var str = "";

      $(data).each(function() {

        str += "<li><a href='" + ctx + "/article/list?board_id=" + this.board_id + "'>" + this.board_name + "</a></li>";

      });

      $('#subGnb1').html(str);

    });

  }


  // 프로젝트의 contextPath를 구하는 함수 : sessionStorage를 사용 (보통 header.jsp에서 script를 사용하여

  // sessionStorage에 contextPath를 저장하고, 이 파일에서 그것을 이용한다.

  function getContextPath() {

    return sessionStorage.getItem("contextpath");

  }

  // 액션 : 해당 클래스를 보여주기 위하여 on 클래스를 추가하는 루틴

  function addClass(ele, cls){

    var eleCln = ele.className;

    if(eleCln.indexOf(cls) == -1){

      ele.className = eleCln + " " + cls;

    }

  }


  // 해당 클래스를 안보이게 처리하기 위해 on class를 삭제하는 루틴

  function removeClass(ele, cls){

    var eleCln = ele.className;

    ele.className = eleCln.split(" " + cls)[0];

  }

});


2.7 서버에서 /manager/getMenuInfo 처리하는 부분

header.js에서 메뉴 처리를 위해 서버로 게시판 정보를 요청하는 /manager/getMenuInfo 부분이 있는데, 이에 대한 서버의 처리 부분이다.

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

  public @ResponseBody List<MenuVO> getMenuInfo() {

List<MenuVO> list = service.getMenuInfo();

return list;

  }


- MenuVO 정의 : 메뉴 처리를 위해 필요한 정보를 나타낸다. (board_id, url, board_name)

package com.example.board.domain;


public class MenuVO {

private int board_id;             // 게시판 아이디 (게시판을 고유하게 식별)

private String url;                 // 게시글을 관리하기 위한 페이지로 이동을 위한 URL 정보

private String board_name;    // 메뉴에 표시되는 글

// getter, setter, toString() 등은 생략...

}


2.8 boardMapper.xml : 데이터베이스에서 MenuInfo를 추출하는 부분

  <!-- 게시판에 따른 메뉴 정보를 얻어내는 부분 -->

  <select id="getMenuInfo" resultType="com.example.board.domain.MenuVO">

    select board_id, url, board_name from board where board_id > 0 order by board_id desc

  </select>


저작자표시 비영리 변경금지

'웹개발' 카테고리의 다른 글

정규 표현식에 대한 공부  (0) 2017.03.09
게시판 관리기능 : 여러 개의 게시판이 필요할 때 (5/5)  (1) 2017.03.09
Oracle 11g에서 sequence 초기값 1 고려사항  (0) 2017.03.08
게시판 관리기능 : 여러 개의 게시판이 필요할 때 (3/5)  (0) 2017.03.07
게시판 관리기능 : 여러 개의 게시판이 필요할 때 (2/5)  (0) 2017.03.07
Posted by 세상을 살아가는 사람
,

게시판 관리기능 : 여러 개의 게시판이 필요할 때 (3/5)

웹개발 2017. 3. 7. 11:56

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

- 게시판 관리기능 : 여러 개의 게시판이 필요할 때 (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;

}

저작자표시 비영리 변경금지

'웹개발' 카테고리의 다른 글

게시판 관리기능 - 여러 개의 게시판이 필요할 때 (4/5)  (0) 2017.03.08
Oracle 11g에서 sequence 초기값 1 고려사항  (0) 2017.03.08
게시판 관리기능 : 여러 개의 게시판이 필요할 때 (2/5)  (0) 2017.03.07
홈 페이지를 개발할 때 고려해야 할 사항 목록 (기능적인 측면)  (0) 2017.03.06
게시판 관리기능 : 여러 개의 게시판이 필요할 때 (1/5)  (0) 2017.03.04
Posted by 세상을 살아가는 사람
,

티스토리툴바