gu-upload는 HTML5 기반으로 파일을 업로드하는 JavaScript 라이브러리이다.

여기서는 gu-upload를 사용하는 예제 설치 방법을 설명한다.


먼저, Eclipse에서 다음 주소로 github 소스를 다운로드 받는다.

https://github.com/gujc71/guupload_sample.git

예제 소스는 JDK 1.7, Spring 4, Maven 환경에서 작성되었다.

gu-upload는 JavaScript 라이브러리이기 때문에

서버는 Struts, PHP, 닷넷(.NET) 등 무엇이든 관계 없지만 

개인적인 편의로 Java Spring 기반으로 예제를 작성하였다.


프로젝트를 Eclipse Tomcat에 추가 해서 실행한 후

다음과 같이 웹브라우저로 접속하면 데모 화면을 볼 수 있다.

http://localhost:8080/guupload/

예제는 게시판(자료실) 글 등록 화면처럼 구성하였다.

먼저, 예제 1은 IE 9 이하(호환성 모드)의 웹 브라우저에서 실행되는 것으로 예제는 IE8로 지정하였다.

<meta http-equiv="X-UA-Compatible" content="IE=8" />

내부적으로는 SWFUpload가 실행 된다.

예제 2는 IE 10 이상이나 Firefox, Chrome등(HTML 5)에서 실행되는 것으로

Gu-Upload의 List모드가 실행된 예제이다.

탐색기에서 파일을 끌어다 놓을 수 있다(Drag & Drop).

예제 3은 Gu-Upload의 Thumbnail모드가 실행된 예제이다.

이미지를 첨부한 경우 미리보기를 할 수 있다.


Submit 버튼을 눌러 서버로 파일을 전송해서 저장하려면

Upload.java 파일에 설정된 저장 경로를 수정해야 한다.

기본으로 D 드라이브가 지정되어 있으니 자신의 디렉터리에 맞추어 수정해야 한다.

   @RequestMapping(value = "/upload")
    public void upload(HttpServletResponse response, HttpServletRequest request, @RequestParam("Filedata") MultipartFile Filedata) {
           SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
           String newfilename = df.format(new Date()) + Integer.toString((int) (Math.random()*10));
          
           File f = new File("d:\\" + newfilename);
           try {
               Filedata.transferTo(f);
               response.getWriter().write(newfilename);
           } catch (IllegalStateException | IOException e) {
               e.printStackTrace();
           }
    }

guupload_sample\src\main\java\gu\Upload.java

업로드 컨트롤에서는 날자와 시간으로 파일을 저장한다.

파일 확장자가 없이 새로운 이름으로 저장되는데

보안을 위해 실제 파일명(realname), 파일명(filename)을 구분하여 처리하기 때문이다.

자세한 내용은 블로그의 자료실 관련 내용을 참고하면 된다.


Submit 버튼을 누르면 upload_save.jsp 가 실행되어

서버로 전송된 값을 확인할 수 있다.


서버로 전송된 값은

파일명(filename), 실제 서버에 저장한 파일명(realname), 파일 크기(filesize) 이다.


저작자표시

'JavaScript > 기타' 카테고리의 다른 글

3. 기초 - 테이블 컬럼 이동 (Drag and Drop Table Columns)  (2) 2017.06.29
1. 기초 - 테이블 정렬 (table sorting)  (1) 2017.06.07
2. 기초 - 테이블 정렬 (JQuery)  (0) 2017.06.07
CD9 - Chart Design Tool for C3  (0) 2017.03.26
2. gu-upload  (4) 2016.06.18

멀티 게시판은 말 그대로 게시판이 많다는 의미로,

비슷하게 생기고 비슷한 기능을 가진

공지사항, 일반 게시판, FAQ, 커뮤니티 등을 하나의 게시판으로 구현하는 것이다.

또는 토론 주제별로 게시판을 만들어 사용할 수도 있다.

멀티 게시판이 적용된 게시판은

화면은 리스트, 글읽기, 글쓰기/수정 등의 화면이 공통으로 사용되고,

기능도 유사하기 때문에 쉽게 구현할 수 있다.

게시물을 구별할 수 있는 구별자만 있으면 된다.

즉, 게시물을 구별할 수 있는 필드를 추가해주고

다음 그림과 같이 이 필드의 값을 항상 가지고 다니면 된다.

이러한 구분 필드를 여기에서는 게시판 그룹 번호(bgno)라고 명명했다.



- 글 리스트는 그룹 번호(bgno)에 해당하는 내용들만 조회해서 출력하고,
  읽기/쓰기로 넘어갈 때 그룹 번호(bgno)를 넘겨 준다.

- 글 읽기는 게시물 번호(brdno)에 해당하는 글을 조회해서 출력하고,
  그룹 번호는 전달(게시물 삭제/수정)을 위해서 가지고 있는다.

- 글 쓰기/수정은 그룹 번호 필드를 추가해서 저장하고, 그룹 번호를 가지고 글 리스트로 돌아간다.

- 글 삭제는 게시물 번호에 해당하는 글을 지우고, 그룹 번호를 가지고 글 리스트로 돌아간다.

이상의 내용을 통해 다시 강조하면

링크를 통해 움직일 때

항상 그룹 번호(bgno)를 넘겨주거나 넘겨주기 위해 가지고 있어야 한다.

따라서, 그룹 번호만 신경 쓰면 되기 때문에 매우 간단하게 개발할 수 있다.


프로그램을 작성하기 전에 다음 SQL문을 이용하여

그룹 번호(bgno)를 테이블(tbl_board)에 추가한 뒤 1로 채워준다.

기존 게시판 데이터는 모두 1로 저장하겠다는 의미이다.

             ALTER TABLE TBL_BOARD ADD BGNO INTEGER;

    UPDATE TBL_BOARD SET BGNO = 1;


BoardVO클래스에도 다음과 같이 그룹 번호(bgno) 변수를 추가한다.

public class BoardVO {

    private String bgno;
    private String brdno;
    private String brdtitle;

~~ 생략 ~~
    public String getBgno() {
        return bgno;
    }

    public void setBgno(String bgno) {
        this.bgno = bgno;
    }
~~ 생략 ~~

BoardVO.java



저작자표시

'Java > 게시판 8: 멀티게시판' 카테고리의 다른 글

2. 글 리스트  (0) 2016.06.04
3. 글 읽기 / 삭제  (0) 2016.06.04
4. 글 쓰기/수정  (0) 2016.06.04

기본적으로 글 리스트는 그룹 번호(bgno)에 해당하는 내용들만 조회하면 된다.

따라서 다음 코드와 같이 기존 SELECT문의 WHERE절에 조건 하나만 추가해 주면 된다.

<sql id=”includeBoard”>
     WHERE BGNO=#{bgno} AND BRDDELETEFLAG='N'
     <if test="searchKeyword!=null and searchKeyword!='' and searchType!=''">
          <foreach item="item" index="index" collection="searchTypeArr" separator=" OR " open="AND (" close=")">
             ${item} LIKE CONCAT('%', #{searchKeyword},'%' )
          </foreach>
    </if>              
</sql>

board8.xml

이렇게 수정한 후 웹 브라우저에서 다음과 같이 실행하면 결과를 확인할 수 있다.

http://localhost:8080/board/board8List?bgno=1

파라미터인 그룹 번호(bgno)를 1이 아닌 다른 값을 넣어서 실행해 보면

데이터가 유무에 따라 다른 결과를 얻는 것을 확인할 수 있다.


이 외에 그룹 번호(bgno) 값이 없을 때 처리와

글 읽기/쓰기 시 그룹 번호(bgno)값을 넘겨 주는 코드가 필요하다.

다음 코드와 같이 컨트롤에서

그룹 번호가 없는 경우(null) 1을 기본값으로 넣어줬다.

    @RequestMapping(value = "/board8List")
    public String boardList(SearchVO searchVO, ModelMap modelMap) {

       
        if (searchVO.getBgno() == null) {
            searchVO.setBgno("1");
        }
        searchVO.pageCalculate( boardSvc.selectBoardCount(searchVO) ); // startRow, endRow

        List<?> listview  = boardSvc.selectBoardList(searchVO);
       
        modelMap.addAttribute("listview", listview);
        modelMap.addAttribute("searchVO", searchVO);
       
        return "board8/BoardList";
    }

Board8Ctr.java

간단하게 처리하기 위해 이렇게 처리했을 뿐이고,

이 방식 외에도 없는 그룹 번호일 경우 오류 메시지를 출력할 수도 있다.

글쓰기 링크에 다음과 같이 그룹번호(bgno)를 파라미터로 넘겨주는 코드를 추가한다.

<a href="board8Form?bgno=<c:out value="${searchVO.bgno}"/>">글쓰기</a>

BoardList.jsp


개념상 글 리스트에서 글 읽기로 가는 링크에도

파라미터를 추가해 주는 것이 맞지만 구현하지 않았다.

모든 게시물은 그룹번호(bgno)를 가지고 저장되고

글 읽기용 SELECT문(selectBoard8One)에서

그룹번호를 가지고 오도록 처리했기 때문이다.


저작자표시

'Java > 게시판 8: 멀티게시판' 카테고리의 다른 글

1. 멀티 게시판 준비  (0) 2016.06.04
3. 글 읽기 / 삭제  (0) 2016.06.04
4. 글 쓰기/수정  (0) 2016.06.04

+ Recent posts

티스토리툴바