Java EE 정리 16

20 Mar 2019

Reading time ~4 minutes

Java EE 정리 16 - File Upload(2), Summernote, Model1, 일정관리 만들기(1)

File Upload(2)

Chrome과 IE의 차이
- Chrome은 param값을 자동으로 인코딩 처리를 해준다.
- 한글명 파일을 다운로드 시 Chrome은 잘 되지만 IE에서는 에러 발생
- IE는 자동으로 인코딩을 해주지 않음

<!-- 크롬의 경우 문제 없음, IE일 때 문제 발생 -->
<a href="download.jsp?file_name=<%=temp.getName()%>">파일명</a>

IE에서 한글파일 다운로드를 하기 위해선 직접 인코딩 처리를 해줘야 한다.

<a href="download.jsp?file_name=<%=URLEncoder.encode(temp.getName(),"UTF-8")%>">파일명</a>

FileUpload - Multipart Request 설치

외부 라이브러리로 간편히 파일업로드를 구현가능
servlets.com 사이트에서 cos.zip 다운로드
cos.jar파일을 WEB-INF/lib에 설치

Multipart Request

생성과 함께 업로드 처리
- Apache Commons Upload와 다르게 간편히 업로드 가능

파라미터 처리가 편하다 * request객체(내장객체)가 제공하는 getParameter, getParameterValues와 동일 * Apache Commons Upload에서는 사용할 수 없었다

중복파일명의 관리가 편하다(DefaultFileRenamePolicy) * 같은 이름의 파일이 들어왔을때 처리방식을 설정가능

사용법

// 1. 생성과 동시에 파일업로드 진행
MultipartRequest mr = new MultipartRequest(request, "저장할DIR", 파일크기, "파일명인코딩", 중복파일명처리객체); 

// 2. 파라미터 처리
String val = mr.getParameter("FormControl명"); // 이름이 유일한 경우
String[] vals = mr.getParameterValues("FormControl명"); // 이름이 중복인 경우

// 3. 업로드 파일명(같은 이름이 존재한다면 변경된 이름)
String fName = mr.getFilesystemName("FileControl명"); // input타입 file의 name

// 4. 원본 파일명
String originName = mr.getOriginalFileName("FileControl명");

Multipart Request 사용 예

<!-- mr_upload_form.jsp, 0319때 upload_form 그대로 사용 -->
...
<form id="uploadFrm" action="mr_upload_process.jsp" method="post"  enctype="multipart/form-data">
      <label>이름</label>
      <input type="text" name="uploader" id="uploader"  class="inputBox"/><br/>
      <label>나이</label>
      <select name="age" id="age">
            <c:forEach var="i" begin="10" end="80" step="10">
            <option value="${ i }"><c:out value="${ i }"/></option>
            </c:forEach>
      </select>
      <br/>
      <label>파일</label>
      <input type="file" name="upfile" id="upfile" class="inputBox"  style="width:200px;"/><br/>
      <input type="button" value="upload" class="btn" id="btnUpload"  style="width:200px;"/>
</form>
...

<!-- mr_upload_process.jsp -->
<%
      int maxSize = 1024*1024*10;
      File uploadDir = new  File("C:/Users/.../workspace/jsp_prj/WebContent/upload");
      
      // 1. 생성 - 파일 업로드 실행
      MultipartRequest mr = new MultipartRequest(request,
                  uploadDir.getAbsolutePath(), maxSize, "UTF-8", new  DefaultFileRenamePolicy());
      
      // 2. 파라미터 처리
      String name = mr.getParameter("uploader");
      String age = mr.getParameter("age");
      
      // 3. 업로드 파일명 받기
      // DefaultFileRenamePolicy에 의해 변경된 이름이 될수도 있다
      String fileName = mr.getFilesystemName("upfile");
      
      // 4. 원본 이름 받기
      String originFileName = mr.getOriginalFileName("upfile");
%>
      
<div>
      <strong>파일업로드 성공</strong>
      <ul>
            <li>업로더 : <%=name %></li>
            <li>연령대 : <%=age %></li>
            <li>업로드된 파일명 : <%=fileName %></li>
            <li>원본파일명 : <%=originFileName %></li>
            <li><a href="mr_upload_form.jsp">업로드 폼</a></li>
            <li><a href="../date0319/file_list.jsp">파일리스트</a></li>
      </ul>
</div>    

Smart Editor - Summernote

JavaScript로 만들어진 Smart Editor
textarea에 글 또는 이미지를 삽입할 수 있고 여러 효과(진하게, 사이즈 변경, 밑줄 등)를 사용할 수 있는 기능 제공
summernote 사이트에서 관련 JS 다운
전송방식은 POST만 지원
이미지는 text로 인코딩되어 전송된다.

사용법은 메뉴얼 Doc 참고
- 플러그인처럼 필요로하는 bootstrap, jQuery를 포함시켜 사용

summernote 사용 예

<!-- summernote_form.jsp --> 
...
<!-- summernote 관련 library 시작 -->
<!-- jQuery 순서 중요 -->
<link href="./common/summernote/bootstrap.css" rel="stylesheet">
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
<script src="./common/summernote/bootstrap.js"></script>
</script>
<link href="./common/summernote/summernote.css" rel="stylesheet">
<script src="./common/summernote/summernote.js"></script>
<script type="text/javascript">
      $(document).ready(function() {
        $('#summernote').summernote({
          placeholder: '서머노트 우왕굳',
          tabsize: 2,
          height: 100
        });
      });
</script>
<!-- summernote 관련 library 끝 -->3
</head>
...
<form method="post">
      <textarea id="summernote" name="editordata"></textarea>
</form>
...

한글 설정

<!-- include summernote-ko-KR -->
<script src="../common/summernote/lang/summernote-ko-KR.js"></script>
<script type="text/javascript">
      $(document).ready(function() {
        // JSON으로 설정을 바꿀 수 있다
        $('#summernote').summernote({
          placeholder: '서머노트 우왕굳',
          tabsize: 2,
          height: 150,
          width: 300,
          lang: 'ko-KR'
        });
      });
</script>

이미지는 인코딩되어 전달됨
- GET방식일 경우 url로 보내기엔 인코딩된 이미지의 길이가 너무 길다
- 때문에 POST방식만 지원

<!-- summernote_process.jsp -->
<%
      request.setCharacterEncoding("UTF-8"); // POST방식 한글처리
      String name = request.getParameter("name");
      String subject = request.getParameter("subject");
      String content = request.getParameter("content");
%>
글쓴이 : <%= name %><br/>
제목 : <%=subject %><br/>
내용 : <%=content %><br/>

Model 1

Model 1은 하나의 JSP에 생명주기가 다른 모든 작업을 정의하는 개발방식 * 코드의 복잡도 상승 * 유지보수가 어려워진다 * 개발기간의 단축 * 파일관리가 편하다 * 값 사용이 편하다 * 에러잡기가 편하다

Model1으로 일정관리 만들기

CRUD(Create, Read, Update, Delete) 구현
Model1은 한개의 jsp파일이 진입점(요청을 받는 곳)을 갖는다.
그룹에서 사용하는 일정관리 프로그램
- 하루에 작성 가능한 일정은 5건으로 제한
- 글작성 시 식별가능하도록 이름과 비밀번호를 받는다
- 일정은 달력에 기록하고 보여주는 일
- 모든 일정을 모아서 보는 일(게시판 List)

일정관리 - 흐름

유저가 diary.jsp를 요청하면 해당 년,월의 모든 일정을 달력형태로 조회
유저가 달력 날짜를 클릭하면 글쓰기 * diary.jsp?pageFlag=write 요청 * pageFlag 값이 write, write_from.jsp를 include * 작성자, 제목, 내용, 비번을 입력 후 작성클릭 * diary.jsp?pageFlag=write_process 요청 * paramFlag 값이 write_process, write_process.jsp를 include * 이벤트 처리 결과를 보여줌
날짜에 존재하는 이벤트버튼을 클릭하면 * diary.jsp?pageFlag=read&글번호=O 요청 * pageFlag 값이 read, read.jsp를 include * 글정보 수정, 삭제,닫기 보여줌 * 비번 입력 후 내용 바꾸고 수정누르면 diary.jsp?pageFlag=update 요청 * pageFlag 값이 update, update.jsp를 include * 글변경 성공/실패를 alert으로 응답 * 삭제 시 diary.jsp?pageFlag=delete, 비번과 글 번호를 가지고 삭제하는 delete.jsp를 include * 글 삭제 성공/실패 alert으로 응답
리스트 보기 클릭 시 list.jsp로 요청

일정관리 - DB 설계

-- 일정정보를 저장할 테이블
CREATE TABLE diary (
  num NUMBER,
  writer VARCHAR2(60) NOT NULL,
  subject VARCHAR2(1000) NOT NULL,
  content CLOB NOT NULL,
  e_year CHAR(4) NOT NULL, /* 이벤트 날짜 */
  e_month VARCHAR(2) NOT NULL,
  e_date VARCHAR(2) NOT NULL,
  w_date DATE DEFAULT SYSDATE, /* 작성 날짜 */
  pass VARCHAR2(300) NOT NULL,
  ip VARCHAR2(15) NOT NULL, /* 부인방지용 ip */
  CONSTRAINT pk_diary PRIMARY KEY(num)
);

-- num용 시퀀스
CREATE SEQUENCE seq_diary
INCREMENT BY 1
START WITH 1

일정관리 - 클래스다이어그램