프로그래밍 2017. 2. 21. 00:59


Request 정보 처리를 위한 설정


사용자가 공지사항 등록화면에서 입력한 정보와 첨부파일 정보를 저장할 테이블을 생성하고 DB연동을 위한 Datasource 설정, Mybatis연동 설정, Transaction설정, 파일처리를 위한 multipartResolver 설정을 차례대로 설명하겠습니다.


1. Database 테이블 생성


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
32
33
34
35
36
37
38
39
40
41
42
43
44
/*
    공지사항 정보 저장
*/
CREATE TABLE SCOTT.TB_NOTICE(
NOTICE_ID       NUMBER(10),
NOTICE_TITLE    VARCHAR2(200),
NOTICE_CONTENT  VARCHAR2(4000),
DEL_YN          CHAR(1)
)
TABLESPACE USERS
STORAGE
(
    INITIAL 64K
    NEXT 1M
)
NOCOMPRESS;
 
/*
    공지사항 첨부파일 정보 저장
*/
CREATE TABLE SCOTT.TB_ATT_FILE(
NOTICE_ID           NUMBER(10),
FILE_ID             NUMBER(3),
ATT_FILE_SAVE_NM    VARCHAR2(200),
ATT_FILE_NM         VARCHAR2(4000),
ATT_FILE_SIZE       NUMBER(10),
DEL_YN              CHAR(1)
)
TABLESPACE USERS
STORAGE
(
    INITIAL 64K
    NEXT 1M
)
NOCOMPRESS;
 
ALTER TABLE SCOTT.TB_NOTICE
ADD CONSTRAINT PK_TB_NOTICE PRIMARY KEY (NOTICE_ID);
 
ALTER TABLE SCOTT.TB_ATT_FILE
ADD CONSTRAINT PK_TB_ATT_FILE PRIMARY KEY (NOTICE_ID, FILE_ID);
 
ALTER TABLE SCOTT.TB_ATT_FILE
ADD CONSTRAINT FK_TB_ATT_FILE FOREIGN KEY (NOTICE_ID) REFERENCES SCOTT.TB_NOTICE (NOTICE_ID);
cs



2. Datasource 및 Transaction 설정

 - root-context.xml 파일을 참조하여 네임스페이스와 설정 정보를 추가합니다.

 - oracle Driver를 찾지 못하는 error가 발생하면, 오라클 설치 폴더에서 ojdbc를 찾아 JAVA를 설치한 곳으로 복사하면 error가 해결됩니다.

=> 오라클홈 -> jdbc -> lib -> ojdbc6.jar 파일을

=> 자바설치폴더 -> jre -> lib -> ext 폴더로 복사


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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<?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:tx="http://www.springframework.org/schema/tx"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
                        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.1.xsd
                        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.1.xsd
                        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd">
    
    <!--  
        @Service, @Repository 스트레오타입 어노테이션이 선언된 클래스를 빈으로 등록한다.
    -->
     <context:component-scan base-package="com.devdic.board">
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Service"/>
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Repository"/>
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>
    
    <context:annotation-config/>
    
    <!-- 
    datasource 설정에 필요한 라이브러리 추가를 위해 아래의 내용을 pom.xml에 추가필요
    <dependency>
        <groupId>commons-dbcp</groupId>
        <artifactId>commons-dbcp</artifactId>
        <version>1.3</version>
    </dependency>
    -->
    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
        <property name="driverClassName" value="oracle.jdbc.driver.OracleDriver"/>
        <property name="url" value="jdbc:oracle:thin@127.0.0.1:1521:orcl" />
        <property name="username" value="SCOTT"/>
        <property name="password" value="SCOTT"/>
    </bean>
    
    <!-- Transaction 설정 -->
    <!-- 
    Transaction 설정에 필요한 라이브러리 추가를 위해 아래의 내용을 pom.xml에 추가
    <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
    <version>${org.springframework-version}</version>
    </dependency>  
     -->
     <!-- dataSource를 활용하는 트랜잭션 매니저를 등록 -->
     <!-- dataSource 빈을 DataSourceTransactionManager 트랜잭션 매니저의 dataSource 속성에 지정  -->
    <bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>
    
    <!-- AOP advisor 를 활용하여 트랜잭션을 처리함
        아래의 dependency를 pom.xml에 추가 
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.8.9</version>
        </dependency>
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjrt</artifactId>
            <version>1.8.9</version>
        </dependency>
    -->
     <tx:advice id="txAdvice" transaction-manager="txManager">
       <tx:attributes>
       <!--
            모든 메소드에 대해서 트랜잭션을 REQUIRED 으로 지정하고
            Exception 발생 시 롤백 지정
        -->
       <tx:method name="*" propagation="REQUIRED" rollback-for="Exception"/>
       </tx:attributes>
    </tx:advice>
    <!-- 
    com.devdic.board 아래의 클래스 명이 ~~~ServiceImpl로 끝나는
    클래스 내의 모든 메소드는 트랜재션 처리가 된다.
     -->
    <aop:config><!-- execution(* *..service.impl.*ServiceImpl.*(..)) -->
        <aop:pointcut id="requiredTx" expression="execution(* com.devdic.board..*ServiceImpl.*(..))"/>
        <aop:advisor advice-ref="txAdvice" pointcut-ref="requiredTx" />
    </aop:config>
cs


3. myBatis 연동

 3.1  root-context.xml에 아래의 myBatis 연동 설정 정보 추가


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
<!--  Mybatis 연동
    pom.xml 추가
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>3.4.1</version>
    </dependency>
    
    마이바티스 스프링 연동 모듈
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>1.3.0</version>
    </dependency>
    -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource" />
        <!-- mybatis config파일 경로 지정 -->
        <property name="configLocation" value="/WEB-INF/config/mybatis-config.xml"/>
        
        <!-- SQL(mapper) 경로 지정 -->
        <property name="mapperLocations" value="classpath:sqlMap/**/*.xml"/>
    </bean>
    
    <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
          <constructor-arg ref="sqlSessionFactory" />
    </bean>
cs


3.2 WEB-INF -> config(폴더생성) -> mybatis-config.xml(파일 추가)

 - mybatis-config.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.2//EN" "HTTP://mybatis.org/dtd/mybatis-3-config.dtd">
 
<configuration>
    <settings>
        <setting name="cacheEnabled" value="false" />
        <setting name="useGeneratedKeys" value="true" />
        <setting name="defaultExecutorType" value="BATCH" />
        <setting name="jdbcTypeForNull" value="NULL" />
        <setting name="callSettersOnNulls" value="true" />
    </settings>
 
    <typeAliases>
        <typeAlias type="java.util.Map" alias="map"/>
    </typeAliases>
 
    <mappers>
    </mappers>
</configuration>
cs



4. 첨부파일 처리를 위한 multipartResolver 설정
  - root-context.xml 파일에 아래와 같이 추가합니다.
  - dependency 추가를 위한 정보는 주석부분을 참조하세요!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <!-- MultipartResolver -->
    <!-- 
        <dependency>
            <groupId>commons-fileupload</groupId>
                <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
     -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">   
<property name="maxUploadSize" value="50000000"></property>
    </bean>
 
cs


posted by 생각퍼즐
:
프로그래밍 2017. 2. 17. 02:30

공지사항 등록 화면 구현


1. 패키지 구성

1.1 jQuery 사용을 위한 디렉토리 생성

- webapp --> resources --> js(디렉토리 생성) --> common(디렉토리 생성)

- jQuery 사이트로 이동

- 아래 그럼의 다운로드 버튼 클릭



 - 아래 그림에서 처럼 동일한 버전에 여러가 타입의 jQuery를 제공하고 있습니다.

 - 소스 용량을 줄이기 위해서 저는 압축된 타입으로 다운로드 할게요~

"Download the compressed, production jQuery 3.1.1"

 - 다운로드된 파일을 webapp --> resources --> js --> common 아래로 이동합니다.


1.2 화면 디렉토리 생성

 - WEB-INF --> views --> notice 디렉토리 생성


1.3 소스 패키지 생성

 - 아래의 그럼처럼 Top-Level package 아래에 4개의 패키지를 추가합니다.



2. 공지사항 등록화면 구현

 - 화면 디렉토리로 생성된 "notice" 디렉토리 아래에 regNotice.jsp 파일을 생성

 - 아래의 소스코드를 참조하여 공지사항 등록화면을 구현하세요!

 - 첨부파일을 서버로 전송하기 위해서는 form 속성 중 "enctype"은 아래와 같이 반드시 "multipart/form-data"로 설정해야 합니다.


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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 
<!-- jstl을 사용하기 위한 CDN 추가 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 
<!-- jQuery 사용을 위한 설정 -->
<script type="text/javascript" src='<c:url value="/resources/js/common/jquery-3.1.1.min.js"/>'></script>
 
<script type="text/javascript">
$(document).ready(function(){
 
    /*
        공지사항 목록화면으로 이동
    */
    $('#btn_list').click(function(){
        $("#frm").attr("action","<c:url value='/notice/noticeList.do'/>").submit();
    });
 
    /*
        첨부파일 추가를 위한 기능
    */
    $("#btn_file").click(function(){
        fn_openFileWindow();
        
    });
    
    /*
        첨부파일 제거를 위한 기능
    */
    $("#btn_del_file").click(function(){
        
        $("#attachFile").val("");
        $("#fileInfo").text("");
        $("#attFileNm").val("");
    });
    
    /*
        첨부된 파일정보 화면에 보여주기
    */
    $("#attachFile").change(function(){
        var fileList=this.files;
        var fileListSize=fileList.length;
        var strOption='';
        var fileNm = '';
     
        for(var i=0; i<fileListSize; i++){
            var file=fileList[i];
            var attFileNm=file.name;
            var fileSize=file.size;
     
            strOption+='<option>'+attFileNm+' ('+fileSize+' byte)'+'</option>';
            fileNm = attFileNm;
        }
     
        document.getElementById("fileInfo").innerHTML=strOption;
        document.getElementById("attFileNm").value=fileNm;
    });
    
    //전송버튼 클릭이벤트
    $("#btn_reg").click(function(){
        
       var noticeTitle = $("#noticeTitle").val();
       var bbsContent = $("#noticeContent").val();
 
       /*
               공지사항 필수 등록정보 유효성 확인
       */
       if(noticeTitle === ""){
           alert("공지사항 제목을 입력하세요!");
           $("#noticeTitle").focus();
           return false;
       }
       if(bbsContent === "<p>&nbsp;</p>"){
           alert("공지사항 내용을 입력하세요!");
           return false;
       }
       /*
               submit 수행
       */
       $("#frm").attr("action","<c:url value='/regNotice.do'/>").submit();
   });
    
});
 
function fn_openFileWindow(){
     frm.attachFile.click();
}
</script>
</head>
<body>
<h1>공지사항 등록</h1>
<form id="frm" name="frm" enctype="multipart/form-data" method="post" >
 
    <div>
        <table style="width:100%;">
             <colgroup>
                <col width="15%">
                <col width="*%"/>
            </colgroup
            <tbody>
                <tr>
                    <th scope="row"><span></span>제목</th>
                    <td style="padding-left:10px;"><input type="text" id="noticeTitle" name="noticeTitle" style="width:790px;"></td>
                </tr>
                <tr>
                        <th scope="row"><span></span>내용</th>
                        <td style="padding-left:10px;">
                        <textarea rows="5" cols="100" title="내용" id="noticeContent" name="noticeContent"  style="width:790px; height:200px;"></textarea>
                        </td>
                </tr>
                <tr>
                        <th scope="row">파일첨부</th>
                        <td style="padding-left:10px;">
                            
                            <div id="fileInfo" ></div>
                            <input type="file" id="attachFile" name="attachFile" style="display:none">
                            <input type="hidden" id="attFileNm" name="attFileNm" >
                            <!-- <input type="text" id="fileListLength" name="fileListLength"> -->
                            <div align="left">
                            <input type="button" id="btn_file"  style="text-align: center; width:120px;" value="파일찾기"/>
                            <input type="button" id="btn_del_file"  style="text-align: center; width:120px;" value="파일삭제"/>
                            </div>
                        </td>
                        
                </tr>
            </tbody>
        </table>
        </div>
        <div style="text-align: center; padding: 20px;">
            <input type="button" id="btn_reg"  style="text-align: center; width:100px;" value="저  장"  />
            <input type="button" id="btn_list" style="text-align: center; width:100px;" value="목  록"  />
       </div>
    </form>
 
</body>
</html>
cs


3. Controller 구현


 - 스프링 프로젝트를 만들 때 default로 생성된 HomeController 파일을 삭제하고 아래의 NoticeController 클래스를 하나 생성합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package com.devdic.board.controller;
 
import javax.servlet.http.HttpServletRequest;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class NoticeController {
    
    private static final Logger logger = LoggerFactory.getLogger(NoticeController.class);
    
    @RequestMapping(value="/regNoticeView")
    public String regNoticeView(HttpServletRequest request) throws Throwable {
        
        return "/notice/regNotice";
    }
}
cs


http://localhost:8080/board/regNoticeView 요청 URL을 호출하면 아래와 같이 퍼브리싱이 되지않은 기본화면이 나타나면... NoticeController가 빈으로 성공적으로 등록되었으며, RequestMapping 설정도 성공~~~




 

posted by 생각퍼즐
: