Java EE 정리 42

25 Apr 2019

Reading time ~3 minutes

Java EE 정리 42 - Spring JDBC(2)

Spring JDBC(2)

JdbcTemplate - 핵심 객체, DAO에 의존성 주입해서 사용
JdbcTemplate에서 제공하는 method를 사용할 때에는 thorws DataAccessException을 날려야 한다
- DataAccessException은 Runtime Exception
insert, update, delete
- 변수에 들어갈 값은 Variable Arguments

JdbcTemplate.update(sql문, bind변수에 들어갈 값 ... );

과거에 만들었던 “test_like”테이블을 이용한 CRUD작업을 할 것
- MultipartRequest를 이용한 이미지 업로드 CRUD 예제를 만들기 위한 준비

alter table test_like add img varchar2(255);

update test_like
set img='default.png'
where img is NULL;

commit;

한글화를 위해 filter를 적용

<!-- web.xml -->
...
      <filter>
            <filter-name>cef</filter-name>
            <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
      </filter>
      <filter-mapping>
            <filter-name>cef</filter-name>
            <url-pattern>/*</url-pattern>
      </filter-mapping>
</web-app>

이미지를 업로드하는 기능을 사용하기 위해 Maven pom.xml에 cos 의존성 추가, 빌드

<!-- https://mvnrepository.com/artifact/servlets.com/cos -->
<dependency>
    <groupId>servlets.com</groupId>
    <artifactId>cos</artifactId>
    <version>05Nov2002</version>
</dependency>

어제 만들었던 spring_jdbc 프로젝트 사용

<!-- index.jsp -->
...
<a href="add_form.do">정보추가</a>
...

// JdbcController
...
      @RequestMapping(value="/index.do", method= { GET,POST })
      public String main() {
            return "index";
      }
      
      @RequestMapping(value="/add_form.do", method=GET)
      public String memberUploadForm() {
            return "member/add_form";
      }
...

<!-- member/add_form.jsp -->
...
<script type="text/javascript">
      $(function() {
            
            $("#upfile").change(function() {
                  var upfile = $("#upfile").val();
                  if (upfile == "") {
                        alert("이미지 선택해주세요.");
                        return;
                  }

                  // 이미지 선택 후 img의 src를 바꿔 preview를 보이기 위한 시도
                  var img = $("#img");
                  img.src = upfile;
                  alert(img.src); 
            });
            
      }); // ready
</script>
...
      <form action="add_member_process.do" method="post"  enctype="multipart/form-data">
      <table border="1" style="text-align:center;">
            <tr>
                  <th colspan="3"><h2>회원정보 추가</h2></th>
            </tr>
            <tr>
                  <td width="100">이미지</td>
                  <td width="100">이름</td>
                  <td width="100">
                        <input type="text" name="name"  class="inputBox"/>
                  </td>
            </tr>
            <tr>
                  <td rowspan="4">
                        <img id="img"  src="/spring_jdbc/common/images/default.png" style="width:100px;  height:100px;"/>
                        <input type="file" name="upfile"/>
                  </td>
            </tr>
            <tr>
                  <td>지역</td>
                  <td><input type="text" name="loc"  class="inputBox"/></td>
            </tr>
            <tr>
                  <td>출신고</td>
                  <td>
                        <select type="text" name="highschool"  class="inputBox">
                              <option value="오지고">오지고</option>
                              <option value="지리고">지리고</option>
                              <option value="레리고">레리고</option>
                        </select>
                  </td>
            </tr>
            <tr>
                  <td colspan="2" align="center">
                        <input type="submit" value="입력" class="btn"/>
                  </td>
            </tr>
      </table>
      </form>
...

클라이언트의 파일은 보안 이슈 때문에 직접 접근하여 미리보기를 할 수 없다
- 일반적으로는 서버에 올린 후 이미지를 볼 수 있다

이미지 미리보기를 위한 JS함수

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#img').attr('src', e.target.result);
        }//function
        reader.readAsDataURL(input.files[0]);
    }//end if
}//readURL

<!-- member/add_form.jsp -->
...
<script type="text/javascript">
      $(function() {
            
            $("#upfile").change(function() {
                  var upfile = $("#upfile").val();
                  if (upfile == "") {
                        alert("이미지 선택해주세요.");
                        return;
                  }
                  readURL(this);
            });
            
      }); // ready
  function readURL(input) {
      if (input.files && input.files[0]) {
          var reader = new FileReader();
          reader.onload = function (e) {
              $('#img').attr('src', e.target.result);
          }//function
          reader.readAsDataURL(input.files[0]);
      }//end if
   }//readURL
</script>
...

파일 업로드 추가
- MultipartRequest를 사용하면 VO로 바로 값을 받을 수 없다
- MultipartRequest의 객체를 통해 Parameter값을 얻을 수 있음

// MemberVO
package kr.co.sist.vo;
public class MemberVO {
      private String name, img, loc, highschool;
      // 인자있는,없는 생성자, getter, setter 생성
...

// JdbcService
...
      public boolean fileUploadProcess(HttpServletRequest request, Model model)  throws IOException {
            boolean flag = false;

            // 파일 업로드
            MultipartRequest mr = new MultipartRequest(request,
                  "C:/Users/owner/youngRepositories/SSangYoung/dev/workspace/spring_jdbc/WebContent/upload/",
                  1024*1024*10, "UTF-8", new DefaultFileRenamePolicy());
            
            // 바뀌어진 이름으로 추가되어야 하므로  DefaultFileNamePolicy로 만들어진
            // 새로운 이름을 getFilesystemName을 통해 얻어 img명에 넣는다
            MemberVO mv = new MemberVO(mr.getParameter("name"),
                        mr.getFilesystemName("upfile"),  mr.getParameter("loc"),
                        mr.getParameter("hightschool"));      
            
            try {
                  jdao.insertMember(mv);
                  model.addAttribute("inputData",mv);
                  flag = true;
            } catch (DataAccessException dae) {
                  dae.printStackTrace();
            }
            
            return flag;
      }
}

// JdbcDAO
...
      @RequestMapping()
      public void insertMember(MemberVO mv) throws DataAccessException {
            
            StringBuffer insertMember = new StringBuffer();
            insertMember
            .append(" insert into test_like(num, name, loc, highschool,  img) ")
            .append(" values(seq_reply.nextval, ?, ?, ?, ?) ");

            // 주입받은 JdbcTemplate객체를 이용해서 insert를 수행
            int cnt = jt.update(insertMember.toString(),
                        mv.getName(), mv.getLoc(), mv.getHighschool(),  mv.getImg());
      }
}

// JdbcController
...
      @RequestMapping(value="/add_member_process.do", method=POST)
      public String uploadProcess(HttpServletRequest request, Model  model) {
            String moveURL = "redirect:err/err.html";
            try {
                  if(js.fileUploadProcess(request,model)) {
                        moveURL = "member/upload_success";
                  }
            } catch (IOException e) {
                  e.printStackTrace();
            }
            
            return moveURL;
      }
}

<!-- upload_success.jsp -->
...
      <a href="add_form.do">정보추가</a><br/>
      파일 업로드 성공<br/>
      ${ requestScope.inputData.name }(${ inputData.name })님 파일이  업로드 되었습니다.
...