프로그래밍 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 설정도 성공~~~




 

'프로그래밍' 카테고리의 다른 글

스프링 프로젝트 - 첨부파일 처리  (0) 2017.03.10
스프링 프로젝트 - 공지사항 Request 처리를 위한 환경설정  (0) 2017.02.21
스프링 프로젝트-스프링 환경설정  (0) 2017.02.15
스프링 프로젝트-프로젝트 생성  (0) 2017.02.08
스프링 프로젝트-개발환경 구성(Eclipse 환결설정 및 플러그인)  (0) 2017.02.07
posted by 생각퍼즐
:
물음표 & 느낌표/aphorism 2017. 2. 15. 23:29

여유




쫓는자가 여유로울까?

쫓기는자가 여유로울까?


누굴 쫓고 누구에게 쫓기는걸까?

무엇을 쫓고 무엇에게 쫓기고 있나?

posted by 생각퍼즐
:
프로그래밍 2017. 2. 15. 00:07

스프링 프로젝트-스프링 환경설정

스프링 환경설정


바로 코딩을 시작할 줄 알았는데...

또 환경설정을 해야되냐구요?

지금까지는 개발을 위한 환경구성에 초점이 맞춰졌다면, 이제는 웹과 스프링 프레임워크 사용을 위한 기본 설정파일에 대한 설정과 설명을 하고 개발로 넘어가야 할 것 같아서... 몇 가지 준비했습니다.


web.xml [배포 서술자 : (DD, Deployment Descriptor)]

웹 애플리케이션의 기본적인 설정을 기술하는 파일입니다.

기본적인 설정이라 함은 filter, listener, servlet, session 등을 설정하는 것입니다.


web.xml 설정과 설명


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
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 
 
    <!-- 웹 애플리케이션 이름 정의 -->
    <display-name>myapp</display-name>
    
    <!-- filter 설정 추가 -->
    <!-- filter : Client와 Servlet Containder 사이에서 HTTP 요청/응답을 변경할 수 있는 재사용 코드 -->
    <filter>
        <filter-name>encodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    
    <!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
    <!-- ContextLoaderListener가 사용할 설정파일 위치 변경 -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/spring/root-context.xml</param-value>
    </context-param>
    
    <!-- Creates the Spring Container shared by all Servlets and Filters -->
    <!-- listener 설정 -->
    <!-- listener : 루트 웹 애플리케이션 컨텍스트를 등록할 때 사용
                    웹 애플리케이션의 시작과 종료 시 발생하는 이벤트를 처리하는 listener인
                    ServletContextListener를 구현한 ContextLoaderListener가 웹 애플리케이션이
                    시작될 때 root application context를 생성 및 초기화하고,
                    웹 애플리케이션이 종료될 때 context를 종료하는 기능을 담당한다.  -->
                    
    <!-- 별다른 설정을 하지 않고 아래처럼 listener를 정의하면 /WEB-INF/applicationContext.xml 파일을
         디폴트 설정파일로 사용한다.
         설정파일의 위치는 <context-param> 항목을 이용해 변경할 수 있다.
         위의 <context-param> 항목을 참조!  -->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
 
    <!-- Processes application requests -->
    <!-- 서블릿 설정과 서블릿 애플리케이션 컨텍스트 등록 -->
    <!-- DispatcherServlet이 초기화될 때 자신만의 컨텍스트를 생성 및 초기화한다.
         그리고 웹 애플리케이션 레벨에 등록된 루트 웹 애플리케이션 컨텍스트를 찾아서
         자신의 부모 컨텍스트로 사용한다. -->
    <servlet>
        <servlet-name>appServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- DispatcherServlet의 컨텍스트에 대한 디폴트 설정을 변경하고 싶다면
             아래와 같이 contextConfigLocation을 정의하여 경로를 설정하면 된다. -->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
        
    <servlet-mapping>
        <servlet-name>appServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
 
</web-app>
 
cs



servelt-context.xml 설정과 설명(child context)


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
<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:beans="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc 
        http://www.springframework.org/schema/mvc/spring-mvc.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.xsd">
 
    <!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
    
    <!-- Enables the Spring MVC @Controller programming model -->
     
     <!-- 
     1. RequestMappingHandlerMapping bean등록(기존 DefaultAnnotationHandlerMapping)
     2. RequestMappingHandlerAdapter bean등록(기존 AnnotationMethodHandlerAdapter) : customArgumentResolvers, customReturnValueHandlers 추가 가능
     3. JSR-303의 검증용 어노테이션(@Valid)를 사용할 수 있도록 LocalValidatorFactoryBean bean설정 (JSR-303지원 라이브러리 존재 시)
     4. RequestMappingHandlerAdapter의 messageConverters프로퍼티로 메시지 컨버터들 등록
     주의사항
     <mvc:annotation-driven>을 사용할 때는 직접 RequestMappingHandlerAdapter를 등록해주어서는 안되며 직접 등록이 필요한 경우에는 
     <mvc:annotation-driven>을 설정하지 않고 각각의 필요한 설정을 수동으로 해주어야 한다.
     -->
     <annotation-driven />
    
    <!-- @Controller, @Repository, @Service, @Component 스트레오타입 어노테이션이 선언된 클래스를 빈으로 등록한다. -->
     <context:component-scan base-package="com.devdic.board"/>
 
 
    <!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
    <resources mapping="/resources/**" location="/resources/" />
 
    <!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
    <!-- 
    InternalResourceViewResolver는 웹 어플리케이션 컨텍스트에 존재하는 템플릿에게 랜더링에 대한 책임을 위임하는
    View 객체를 논리적인 View 이름을 사용하여 결정한다.
    View 객체는 기본적으로 InternalResourceViewResolver이며, 이 객체는 실제 랜더링을 수행할 JSP에 단순히 요청을 전달하는 일을 한다.
    만약 JSTL 태그를 사용한다면 viewClass 특성을 설정함으로써 InternalResourceView를 JstlView로 대체하여 JstlView 요청을 JSP에 전달한다.
     -->
    <beans:bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <beans:property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
    
    <!-- JSP파일 경로와 접미어 설정 -->
    <beans:property name="prefix" value="/WEB-INF/views/"/>
    <beans:property name="suffix" value=".jsp" />
    </beans:bean>
    
</beans:beans>
 
cs


root-context.xml 설정과 설명(parent context)

<context~> 항목을 사용하기 위해 네임스페이스를 추가하셔야 합니다.

아래코드에서 굵은 글씨로 된 부분을 추가하시면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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"
    xsi:schemaLocation="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.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/>
    
</beans>
cs


기본적인 설정은 어느정도 된것 같습니다.

DB연결을 위한 datasource, JDBC를 좀 더 쉽게 사용하기 위한 Mybatis연동, 논리적 작업단위의 Transaction 설정 등 몇가지가 남았지만...

잠시 뒤로 미루어두고 공지사항 등록 화면을 만들어보죠~~~

 

'프로그래밍' 카테고리의 다른 글

스프링 프로젝트 - 공지사항 Request 처리를 위한 환경설정  (0) 2017.02.21
스프링 프로젝트-공지사항 등록 화면 구현  (0) 2017.02.17
스프링 프로젝트-프로젝트 생성  (0) 2017.02.08
스프링 프로젝트-개발환경 구성(Eclipse 환결설정 및 플러그인)  (0) 2017.02.07
스프링 프로젝트-개발환경 구성(Eclipse + JDK + Tomcat)  (0) 2017.02.01
posted by 생각퍼즐
:

티스토리툴바