'jQuery 설정'에 해당되는 글 1건

  1. 2017.02.17 :: 스프링 프로젝트-공지사항 등록 화면 구현
프로그래밍 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 생각퍼즐
:

티스토리툴바