프로그래밍
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> </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 |