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

웹개발 2017. 3. 9. 11:47

앞에서 기술했던 부분에 이어 특정 게시판에 대한 관리 기능(게시글 목록 보기, 게시글 추가)을 기술한다. 다른 기능(게시글 수정, 게시글 삭제, 게시글 읽기)은 기술하지 않았다.

1. 게시글 목록 보기

- 헤더의 메뉴 중 "지식창고"에 마우스를 갖다대면 서브 메뉴가 나타난다. 이는 추가된 게시판에 대한 게시글 관리 기능으로의 링크이다. 이 링크를 누르면 해당 게시판에 대한 게시글 관리창으로 이동하게 된다.

예를 들어, "Web"이라는 서브 메뉴를 누르면 "http://localhost:8080/board/article/list?board_id=1"로 이동하게 된다.

1.1 ArticleController에서 /article/list에 대한 처리

package com.example.board.controller;


import javax.inject.Inject;

import javax.servlet.http.HttpServletRequest;

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.domain.ArticleVO;

import com.example.board.domain.Criteria;

import com.example.board.domain.PageMaker;

import com.example.board.service.ArticleService;

import com.example.board.service.BoardService;


@Controller

@RequestMapping(value="/article")

public class ArticleController {

@Inject

public ArticleService service;    // 게시글 관리 기능을 처리하기 위한 Service

@Inject

public BoardService bService;    // 게시판 관리 기능을 처리하기 위한 Service

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

public void list(int board_id, Criteria cri, Model model) throws Exception {

model.addAttribute("board", bService.read(board_id));    // 해당 게시판에 대한 정보를 획득

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

PageMaker pm = new PageMaker();            // 페이징 처리를 위한 인스턴스를 만든다.

pm.setCri(cri);                                         // 페이징 처리를 위한 기준 정보를 저장

pm.setTotalCount(service.listCount());           // 해당 게시판의 전체 게시글의 수를 얻는다.

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

}


1.2 list.jsp : 게시글 목록 보기 화면


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

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

<!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>게시판 이름 : ${board.board_name}</h1>

    <table>

      <c:if test="${pageMaker.totalCount > 0}"><!-- 게시글이 있는지 검사 -->

      <tr>

<td colspan="5"><!-- 페이지에 대한 정보를 표시 -->

  ${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="5">

    게시글이 없습니다.

  </td>

</tr>

      </c:when>

      <c:otherwise>

<tr><!-- 게시글에 대한 표시 타이틀 부분 -->

  <td class="title_head" width="9%">번호</td>

  <td class="title_head" width="54%">제목</td>

  <td class="title_head" width="11%">작성자</td>

  <td class="title_head" width="17%">작성일</td>

  <td class="title_head" width="9%">조회수</td>

</tr>

<c:forEach var="article" items="${list}"><!-- 각 게시글에 대하여 -->

    <tr>

      <td>${article.article_id}</td>

      <td width="40%">

<c:if test="${article.depth > 0}"><!-- 댓글에 대한 depth 표시 -->

  <c:forEach begin="1" end="${article.depth}">-</c:forEach>&gt;

</c:if>

<c:if test="${article.secret == 'T'}"><!-- 제목 처리 (비밀글 여부에 따라 다르게 처리)-->

  <c:choose>

  <c:when test="${sessionScope.member.category == 'admin'}">

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

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

    <a href="<c:url value="/article/read?${query}"/>">${fn:substring(article.title, 0, 28)}</a>

  </c:when>

  <c:when test="${sessionScope.id == article.email}">

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

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

    <a href="<c:url value="/article/read?${query}"/>">${fn:substring(article.title, 0, 28)}</a>

  </c:when>

  <c:otherwise>

    ${fn:substring(article.title, 0, 28)}

  </c:otherwise>

  </c:choose>

  &nbsp;<img width="13px" height="13px" alt="*" src="<c:url

   value="/resources/images/secret_image.png"/>">

        </c:if>

        <c:if test="${article.secret != 'T'}">

  <c:choose>

  <c:when test="${board.read_allow == 'all'}">

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

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

    <a href="<c:url value="/article/read?${query}"/>">${fn:substring(article.title, 0, 28)}</a>

  </c:when>

  <c:when test="${board.read_allow == 'login' && sessionScope.id != null}">

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

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

    <a href="<c:url value="/board/read?${query}"/>">${fn:substring(article.title, 0, 28)}</a>

  </c:when>

  <c:when test="${board.read_allow == 'login' && sessionScope.id == null}">

    ${fn:substring(article.title, 0, 28)}

  </c:when>

  <c:when test="${sessionScope.id != null && sessionScope.member.category == 

    board.read_allow}">

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

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

    <a href="<c:url value="/article/read?${query}"/>">${fn:substring(article.title, 0, 28)}</a>

  </c:when>

  <c:otherwise>

    ${fn:substring(article.title, 0, 28)}

  </c:otherwise>

          </c:choose>

        </c:if>

      </td>

      <td>${article.writer_name}</td>

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

      <td>${article.read_count}</td>

    </tr>

    <c:choose>

    <c:when test="${board.display_format==2}"><!-- 본문의 표시 방법 처리 -->

      <tr>

        <td colspan="5">${fn:substring(article.content, 0, 200)}</td>

      </tr>

    </c:when>

    <c:when test="${board.display_format==3}">

      <tr>

        <td colspan="5">${article.content}</td>

      </tr>

    </c:when>

            </c:choose>

          </c:forEach>

          <tr>

            <td colspan="5"><!-- 페이징 처리(링크 표시) -->

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

  <a href="<c:url value="/article/list?board_id=${board.board_id}&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="/article/list?board_id=${board.board_id}&page=${pno}

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

        </c:forEach>

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

  <a href="<c:url value="/article/list?board_id=${board.board_id}&page=

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

              </c:if>

            </td>

          </tr>

        </c:otherwise>

</c:choose>

      <c:choose><!-- 글쓰기 권한에 따른 글쓰기 허용여부 처리 -->

<c:when test="${board.write_allow == 'all'}">

  <tr>

    <td colspan="5"><a href="write?board_id=${board.board_id}">글쓰기</a></td>

  </tr>

</c:when>

<c:when test="${board.write_allow == 'login' && sessionScope.id != null}">

  <tr>

    <td colspan="5"><a href="write?board_id=${board.board_id}">글쓰기</a></td>

  </tr>

</c:when>

<c:when test="${sessionScope.id != null && sessionScope.member.category == 

board.write_allow}">

  <tr>

    <td colspan="5"><a href="write?board_id=${board.board_id}">글쓰기</a></td>

  </tr>

</c:when>

      </c:choose>

    </table>

  </section>

</section>

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

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

</footer>

</body>

</html>


게시글 쓰기 링크를 누르면 게시글 쓰기로 이동한다. (/article/write)


1.3 ArticleController /article/write 처리

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

  public String write(int board_id, Model model) {

model.addAttribute("board", bService.read(board_id)); // 해당 게시판에 대한 정보를 획득

return "/article/writeForm"; // 게시글 입력 창으로 이동

  }


1.4 writeForm.jsp : 게시글 입력 폼 화면


위 그림과 같이 게시글 쓰기 입력 창을 보여준다.

<%@ 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/articlewrite.css"/>

<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.11.3.min.js"/>"></script>

<script type="text/javascript" charset="utf-8" src="<c:url value="/resources/js/articlewrite.js"/>"></script>

</head>

<body>

<c:choose>

<c:when test="${param.article_id != null}">

<c:set var="num" value="${param.article_id}"/>

<c:set var="ref" value="${param.ref}"/>

<c:set var="step" value="${param.step}"/>

<c:set var="depth" value="${param.depth}"/>

</c:when>

<c:otherwise>

<c:set var="num" value="0"/>

<c:set var="ref" value="1"/>

<c:set var="step" value="0"/>

<c:set var="depth" value="0"/>

</c:otherwise>

</c:choose>

<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"> <!-- 내용 영역 정의 -->

    <c:if test="${num == 0}">

      <h2>게시글 작성</h2>

    </c:if>

    <c:if test="${num != 0}">

      <h2>댓글 작성</h2>

    </c:if>

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

      <input type="hidden" name="board_id" value="${param.board_id}">

      <input type="hidden" name="num" value="${num}">

      <input type="hidden" name="ref" value="${ref}">

      <input type="hidden" name="step" value="${step}">

      <input type="hidden" name="depth" value="${depth}">

      <input type="hidden" name="author" value="">

      <table>

<tr>

  <td>제목: </td>

  <td>

    <c:if test="${num == 0}">

      <input type="text" name="title" size="90" maxlength="60" placeholder="제목을 입력 하십시

요." required/>

    </c:if>

    <c:if test="${num != 0}">

      <input type="text" name="title" size="90" maxlength="60" value="[답변]"/>

    </c:if>

  </td>

</tr>

<c:if test="${sessionScope.id != null}">

  <tr>

    <td>작성자: </td>

    <td><label>${sessionScope.member.nickname}</label></td>

  </tr>

  <input type="hidden" name="writer_name" value="${sessionScope.member.nickname}"/>

  <input type="hidden" name="email" value="${sessionScope.member.id}">

  <input type="hidden" name="password" value="${sessionScope.member.password}"/>

</c:if>

<c:if test="${sessionScope.id == null}">

  <tr>

    <td>작성자: </td>

    <td><input type="text" name="writer_name" /></td>

  </tr>

  <input type="hidden" name="email" value="이메일">

  <tr>

    <td>글암호: </td>

    <td><input type="password" name="password" /></td>

  </tr>

</c:if>

<tr>

  <td style="margin:0; padding:0;" colspan="2"><textarea name="content" rows="5" cols="80" 

  style="width:100%; height:212px;"></textarea></td>

</tr>

      </table>

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

    </form>

  </section>

</section>

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

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

</footer>

</body>

</html>


1.5 articlewrite.js : 첨부 파일을 5개 까지 추가할 수 있도록 dynamic하게 파일 첨부 버튼을 조작

  생략


[마치며] 처음에는 잘 정리해야 겠다고 생각을 했는데, 내용이 방대하여 마음의 여유가 없어지고, 조급해져 일부 내용을 빠트리고 정리가 된 것 같다. 글쎄 다른 사람이 이글을 보고 이해할 수 있을지 염려도 되지만 source code를 추가로 첨부해 본다.

bdmanager.zip


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

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

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

게시판 관리기능 - 여러 개의 게시판이 필요할 때 (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 세상을 살아가는 사람
,

티스토리툴바