'공지사항' 태그의 글 목록

'공지사항'에 해당되는 글 2건

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

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

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

<id>mesir-repo</id>

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

</repository>

</repositories>

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

<groupId>org.springframework</groupId>

<artifactId>spring-jdbc</artifactId>

<version>4.3.1.RELEASE</version>

</dependency>

<groupId>org.mybatis</groupId>

<artifactId>mybatis</artifactId>

</dependency>

<groupId>org.mybatis</groupId>

<artifactId>mybatis-spring</artifactId>

</dependency>

<groupId>oracle</groupId>

<artifactId>ojdbc14</artifactId>

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

</bean>

</bean>

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

</bean>

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

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

</head>

<body>

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

</header>

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

</section>

</section>

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

<nav>

<!--

-->

</ul>

</div>

</li>

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

이전 1 다음

달란트(Talanton)

'공지사항'에 해당되는 글 2건

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

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

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

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

카테고리

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크

티스토리툴바


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

« 2024/12 »
일	월	화	수	목	금	토
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