---
title: "Java EE 정리 16"
date: "2019-03-20"
tags: ["Java EE","JSP"]
status: archived
verified: false
---

---

## File Upload(2)

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

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

![01](/md/legacy-assets/javaEe/16/01.webp)

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

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

![02](/md/legacy-assets/javaEe/16/02.webp)

## FileUpload - Multipart Request 설치

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

![03](/md/legacy-assets/javaEe/16/03.webp)

## Multipart Request

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

![04](/md/legacy-assets/javaEe/16/04.webp)

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

![05](/md/legacy-assets/javaEe/16/05.webp)

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

![06](/md/legacy-assets/javaEe/16/06.webp)

* **사용법**

```java
// 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 사용 예**

```html
<!-- 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>
...
```

![07](/md/legacy-assets/javaEe/16/07.webp)

```html
<!-- 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>    
```

![08](/md/legacy-assets/javaEe/16/08.webp)

## Smart Editor - Summernote

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

![09](/md/legacy-assets/javaEe/16/09.webp)

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

![10](/md/legacy-assets/javaEe/16/10.webp)

* **summernote 사용 예**

```html
<!-- 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>
...
```

![11](/md/legacy-assets/javaEe/16/11.webp)

* **한글 설정**

```html
<!-- 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>
```

![12](/md/legacy-assets/javaEe/16/12.webp)

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

```html
<!-- 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/>
```

![13](/md/legacy-assets/javaEe/16/13.webp)

![14](/md/legacy-assets/javaEe/16/14.webp)

## Model 1

![15](/md/legacy-assets/javaEe/16/15.webp)


* **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**
                  * 이벤트 처리 결과를 보여줌
* 날짜에 존재하는 이벤트버튼을 클릭하면
      * d**iary.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 설계

```sql
-- 일정정보를 저장할 테이블
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
```

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

![16](/md/legacy-assets/javaEe/16/16.webp)