'방명록' 태그의 글 목록

'방명록'에 해당되는 글 1건

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

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

</head>

<body>

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

</header>

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

</section>

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

<tr>

${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>

</tr>

</c:when>

<c:otherwise>

<tr>

</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>${board.nofArticle}</td>

</tr>

</c:forEach>

<tr>

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

</tr>

</table>

</section>

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

</head>

<body>

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

</header>

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

</section>

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

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

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

</select><br>

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

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

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

</select><br>

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

</select><br>

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

</select><br>

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

</select><br>

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

</select><br>

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

</select><br>

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

</select><br>

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

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

</select><br>

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

</select><br>

게시판 설명: <br/>

<br/>

</form>

</section>

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

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

</script>

<nav>

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

-->

</ul>

</div>

</li>

</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 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 세상을 살아가는 사람

이전 1 다음

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

달란트(Talanton)

'방명록'에 해당되는 글 1건

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

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

카테고리

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크

티스토리툴바


	주님이 나에게 맡기신 달란트(헬라어로는 Talanton)를 남기고자 합니다. 주님에게 칭찬받는 종이 되기 위하여 주님이 주신 달란트를 땅에 묻어 두지 아니하고, 2배, 5배, 아니 10배를 남기고자 합니다. 나는 부족하지만, 주님께서 함께 하신다면 가능합니다. 하루를 기도로 by 세상을 살아가는 사람