달란트(Talanton)

스프링 MV 프로젝트에서 Ajax와 다중 파일 첨부기능을 구현하기 위하여 sample 프로젝트를 만들었다. (긴적인 Hello Spring에 추가되는 사항을 위주로 기술)

1. 환경

- Oracle DBMS

- Eclipse Java EE + Spring plugin

- Tomcat 8.5

2. 기능목록

- 게시글 작성 : 2개의 첨부파일 가능

- 게시글 목록보기

- 게시글 수 가져오기

3. 파일목록

- pom.xml : 파일 업로드, Oracle DBMS driver, JSON 처리 하는 라이브러리를 가져오기 위한 Maven dependency를 추가

- web.xml : UTF-8 encoding filter 추가, 에러 페이지 처리 추가

- servlet-context.xml : 파일 업로드를 위해 multipartResolver 추가, Oracle jdbc driver 추가, SqlSessionFactory 추가, SqlSessionTemplate 추가

- home.jsp 수정사항 : 게시물 목록보기 화면으로 이동하도록 버튼 배치 -> /list 발생

- HomeController에서 /list를 받으면 데이터베이스에서 게시글을 가져와 listView.jsp에 보여 준다.

- listView.jsp : 게시글 목록을 보여주고, 게시글 쓰기 버튼과 게시글 갯수 가져오기 버튼을 둔다.

  + 게시글 추가 버튼을 누르면 /writeForm이 서버로 전달된다.

  + 게시글 가져오기 버튼이 눌려지면 javascript에서 Jquery Ajax를 사용하여 서버에서 게시글의 수를 알아온다.

- HomeController에서 /writeForm을 수신하면 writeForm.jsp을 보여준다.

- writeForm.jsp에서는 게시글을 작성하도록 입력을 받아 서버로 전달한다. (/write에 실림)

  + 제목, 본문, 첨부파일 정보를 실어준다.

- HomeController에서 /write를 수신하면 게시글을 게시글 테이블에 저장하고, 첨부파일을 서버의 특정 디렉토리에 저장하고, 첨부파일 정보를 파일정보 저장 테이블에 저장한다.

  + /list로 redirect 한다.

- HomeController에서 /getCount를 listView.jsp로부터 수신하면

  게시글 테이블에서 게시글의 수 정보를 얻어 listView.jsp의 javascript로 전달한다.

sample.zip

이클립스에서 Spring MVC 프로젝트를 만들어서 ojdbc6.jar 를 적용하는 방법을 기술한다.

보통 pom.xml에 maven dependency를 다음과 같이 적용해준다.

<!-- Oracle Driver -->

<dependency>

<groupId>com.oracle</groupId>

<artifactId>ojdbc6</artifactId>

<version>12.1.0.1</version>

</dependency>

그러면 maven repository에 ojdbc6.12.1.0.1.jar 파일이 생기기는 하지만, Eclipse에서 artifactId가 적용되지 않았다고 하면서 에러가 발생한다.

그러면 다음과 같이 처리를 해주어야 한다.

1. oracle 사이트에 가서 ojdbc6.jar 파일을 다운로드 받는다.

  - 아니면 오라클을 설치한 폴더에서 가져온다. 나는 아래와 같은 폴더에 설치

    (D:\database\app\User\product\11.2.0\dbhome_1\jdbc\lib)

  - 나는 C:\raspberry\driver 디렉토리에 저장하였다.

2. windows OS에서 수행되는 mvn을 다운로드 한다.

  - maven.apache.org/download.cgi 사이트에서 binary zip archive를 다운로드

    (apache-maven-3.3.9-bin.zip)

  - 적당한 디렉토리에 옮겨놓고 압축을 해제한다.

  - 환경설정에서 MAVEN_HOME을 등록한다.

    + File Explorer에서 시스템 우클릭>속성을 선택한다.

    + 고급 시스템 설정을 클릭한 후 환경변수 버튼을 클릭

    + 시스템 변수로 MAVEN_HOME을 mvn을 설치하여 압축을 푼 디렉토리 명을 써준다.

      변수 이름(N): MAVEN_HOME

      변수 값(V) : C:\raspberry\apache-maven-3.3.9

    + 시스템 변수 path에 %MAVEN_HOME\bin을 추가한 후 확인을 눌러 빠져 나온다.

3. command 창을 띄우고 다음을 수행한다.

  C:.> mvn install:install-file -Dfile=C:\raspberry\driver\ojdbc6.jar -DgroupId=com.oracle -DartifactId=ojdbc6 -Dversion=12.1.0.1 -Dpacking=jar

  - 빌드 success되고, 그러면 ojdbc6.jar 파일이 자신의 PC에 있는 maven repository에 적용이 된다.

4. 이클립스에서 Meven Clean을 하면 error가 사람짐을 알수 있다.

참고 : https://www.mkyong.com/maven/how-to-add-oracle-jdbc-driver-in-your-maven-local-repository/

학원에서 스프링 MVC를 적용하여 프로젝트를 학생들이 하고 있는데 Ajax와 첨부파일을 적용하는 것이 어렵다고 하여 정리해 본다.

나의 작업환경은 다음과 같다.

1. 멀티 게시판 : 하나의 Article 데이터베이스 테이블에 여러 개의 게시판의 게시물을 한꺼번에 저장

  - 게시판 테이블 운영

  - ref, step, depth 체계를 가진 게시판

  - 네이버에서 공개한 스마트에디터 사용

  - 본문에 사진 추가 기능 사용

  - 첨부 파일은 5개 까지 적용 가능

  - 오라클 11g DBMS 사용 : Board, Article, PdsItem 테이블 및 각각의 sequence 운영

2. 스마트에디터에 대한 스프링 MVC 적용

  - 소스코드 위치 : src/main/webapp/resources/smarteditor

  - photo_uploader/popup/attach_photo.js 수정

    + html5Upload() function

      * 본문에 삽입되는 사진을 서버에 저장하기 위한 URL : /contextPath/board/file_uploader_html5 (내부적으로 Ajax 처리)

    + callFileUploader() function

      * sUrl : 'contextPath/board/file_uploader'

      * sCallback : 'resources/smarteditor/photo_uploader/popup/callback.html'

  - writeForm.js 수정 : 게시판 쓰기를 위한 jsp 파일의 javascript 파일

    + nhn.husky.EZCreator.createInIframe 수정

      nhn.husky.EZCreator.createInIFrame({

        oAppRef: editor_object,

        elPlaceHolder: "smarteditor",

        sSkinURI: ctx + "/resources/smarteditor/SmartEditor2Skin.html", 

        htParams : {

            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)

            bUseToolbar : true,             

            // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)

            bUseVerticalResizer : true,     

            // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)

            bUseModeChanger : true,

            fOnBeforeUnload : function(){

            }

         }

       });

    + 전송 버튼을 눌렀을 때 처리 : 가비지 컬렉션 처리를 위해 먼저 사진 파일에 대한 관리를 먼저하고, 이후 첨부파일에 대한 저장을 처리

      $("#addBtn").click(function(){

        //id가 smarteditor인 textarea에 에디터에서 대입

        editor_object.getById["smarteditor"].exec("UPDATE_CONTENTS_FIELD", []);

        // 이부분에 에디터 validation 검증

        var el = document.createElement('html');

        el.innerHTML = editor_object.getById["smarteditor"].elPlaceHolder.value;

        var imageF = el.getElementsByTagName('img');

        var url = ctx + "/board/file_uploader_real";

        var params = "";

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

          if(i == 0)

            params += ("src=" + imageF[i].src + "&title=" + imageF[i].title);

          else

            params += ("&src=" + imageF[i].src + "&title=" + imageF[i].title);

        }

        sendRequest(url, params, callbackFunction, "POST");

        callTimerProcessing();

      })

      function callTimerProcessing() {    // 사진에 대한 처리를 보장하기 위해 loop를 돌다, 응답이 오면 처리

    if(loop) {

      setTimeout(function() {

           callTimerProcessing();

          }, 100);

    }

    else {

          //폼 submit

          $("#frm").submit();

    }

      }

서버에서 처리는 다음에 ...

PC의 HDD를 교체하여 새롭게 오라클 데이터베이스 11g를 설치하여 본다.

1. http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html에 접속하여

  Oracle Database 11g Release 2 Microsoft Windows (x64) See All (2개로 구성)을 다운로드 받는다.

2. 압축을 풀고, 하나의 디렉토리로 합쳐 준다.

3. setup.exe를 클릭하여 설치를 시작

4. My Oracle Suuport를 통해 보안 갱신 수신(W) 항의 체크를 해제하고 다음 버튼 클릭

5. 설치 옵션으로 데이터베이스 생성 및 구성을 선택하고 다음 버튼 클릭

6. 데스크톱 클래스(D)를 선택하고 다음 버튼 클릭

7. 디렉토리 및 비밀번호 설정

  - 적당한 경로를 입력

  - 문자집합을 유니코드(AL32UTF8)로 수정

  - 관리 비밀번호를 입력

8. 설정을 확인하고 응답파일을 설치 디렉토리에 저장 후 완료 버튼을 누름

9. 설치가 다 되면 확인을 해 본다.

  - 시작메뉴>Oracle - OraDb11g_home1>응용 프로그램 개발>SQL Plus를 선택

  - 로그인 창에서 로그인 : user name은 system

  - SQL> 프롬프트가 나온다.

10. 사용자와 권한 부여

  - SQL> create user username identified by password;

  - SQL> grant connect, resource, dba to username;

11. DBMS 관리포트 변경

  - 오라클 설치 시, 8080 포트로 되어 있어 Tomcat과 같은 포트를 사용하므로 수정한다.

  - SQL> exec DBMS_XDB.SETHTTPPORT(9000);