국비지원학원/JSP

100일차-JSP_MultipartRequest,Summernote,Diary

초코맛 2019. 4. 3. 02:54
반응형
*크롬vs익스
  • 인코딩/안해줌
  • =>영어,숫자,특수문자는 1byte라 (실제로는7bit사용) 이때 한글이 2|3byte로 가나다.doc이면 인코딩(%AA~~)을 해서 서버로 넘겨주는데, 익스는 해주지 않음..개발자가 해결해야 한다. 그때 사용하는게 URLEncoder.encoder("가나다",UTF-8);
////servlets.com/cos/>com.oreilly.servlet>Download-version-cos-26Dec2008.zip>압축해제후>lib안에cos.jar를 쓰는 prj-webContent-WebINF-lib에 붙여넣는다.
///servlets.com/cos/>Class Index가 Index로 사용하려는 MultipartReqest를 북마크에 추가한다
*MultipartRequest
  • Servlets.com에서 다운로드(cos.jar -외부 libary)
  • 장점 : 업로드가 편하다.(생성과 함께 업로드)
  • 장점 : 중복 파일명의 관리가 편리하다.(DefaultFileRenamePolicy) : 알아서 1,2,,붙여줌
  • 장점 : 파라메터 처리가 편하다.(request(라고 하는 내장객체)에서 제공하는 method명과 동일) //거부감 없이 쓸수 있다.
  • 단 : parameter처리가 불가하지만 request방식으로 사용가능
  • 사용법)
    • 1.생성-파일업로드 진행
    • MultipartRequest mr=new MultipartRequest(request,저장할 디렉토리, File크기(byte*kb*mb*gb//1024), 파일명 Encoding(UTF-8), 중복 파일명 처리 객체(DefaultFileRenamePolicy));
    • 2.파라메터 처리(전송형태가 바뀐것)
    • 이름유일 : String param=mr.getParameter("컨트롤명");
    • 이름중복 : String[] paramArr=mr.getParameterValue("컨트롤명");
    • 3.업로드 파일명(같은 이름이 존재한다면 변경된 이름)
    • mr.getFilesystemName("File Control명");=>String
    • 4.원본 파일명
    • mr.getOrignalFileName("File Control명");=>String
<%@page  import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="javax.swing.table.DefaultTableModel"%>
<%@page import="java.io.File"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    info="MultipartRequest사용 파일 업로드 처리"
    %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF  url(http://localhost:8080/jsp_prj/common/images/header_bg.png)  repeat-x;
           position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px;  font-weight:bold; text-align:center;
                /* padding-top: 35px */ position:absolute;  top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px;  padding-right:20px; }
</style>
</head>
<body>
<div id="wrap">
     <div id="header">
           <div id="headerTitle">SIST Class4</div>
     </div>
     <div id="container">
     <%
     //1.생성-파일 업로드 실행
     int maxSize=1024*1024*10;
     File repository=new  File("C:/dev/workspace/jsp_prj/WebContent/upload");
     
     MultipartRequest mr=new  MultipartRequest(request,repository.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 originalfileName=mr.getOriginalFileName("upfile");
     %>
     <div>
           <strong>파일 업로드 성공</strong>
           <ul>
                <li>업로더 : <%=name%></li>
                <li>연령대 : <%=age%></li>
                <li>업로드된 파일명 : <%=fileName%></li>
                <li>원본 파일명 : <%=originalfileName%></li>
                <li><a href="mr_upload_form.jsp">업로드  폼</a></li>
                <li><a  href="../day0319/file_list.jsp">파일리스트</a></li>
           </ul>
     </div>
     </div>
     <div id="footer">
           <div id="footerTitle">copyright&copy; all right  reserved. class 4.</div>
     </div>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    info="MultipartRequest사용 파일 업로드 폼"
    %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF  url(http://localhost:8080/jsp_prj/common/images/header_bg.png)  repeat-x;
           position: relative; }
#headerTitle{font-family: HY견고딕; font-size:35px;  font-weight:bold; text-align:center;
                /* padding-top: 35px */ position:absolute;  top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px;  padding-right:20px; }
</style>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
     $("#btn").click(function(){
           if($("#uploader").val()==""){
                $("#uploader").focus();
                return;
           }//end if
           if($("#upfile").val()==""){
                /* 값을 가지고 올수는 있으나 설정할수는 없다 =>  보안이슈! */
                alert("업로드할 파일을 선택해 주세요.");
                return;
           }//end if
           
           
           //확장자가 jsp,java,class,xml은 업로드 하지 못하도록  막는다.
           var ext=["jsp","java","class","xml"];
           var flag=false;
/*
           var fileName=$("#upfile").val();
           var  inputExt=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();
*/        
           var fileName=$("#upfile").val().split(".");
           var  inputExt=fileName[fileName.length-1].toLowerCase();
           
           for(var i=0; i<ext.length; i++){
                if(ext[i]==inputExt){
                     flag=true;
                     break;
                }//end if
           }//end for
           if(flag){
                alert("업로드 정책에 위배되는 파일확장자입니다.");
                return;
           }//end if
           /*
           //내가
          if($("#upfile").val().substring($("#upfile").val().lastIndexOf("."))==".jsp"||
                     $("#upfile").val().substring($("#upfile").val().lastIndexOf("."))==".java"||
                     $("#upfile").val().substring($("#upfile").val().lastIndexOf("."))==".class"||
                     $("#upfile").val().substring($("#upfile").val().lastIndexOf("."))==".xml"){
                alert("파일을 업로드하실 수 없습니다.");
                return;
           }//end if */
           
           $("#uploadFrm").submit();
     });//click
});//ready
</script>
</head>
<body>
<div id="wrap">
     <div id="header">
           <div id="headerTitle">SIST Class4</div>
     </div>
     <div id="container">
     
     <!-- HTML 폼 기반의 파일 업로드“œ
           1.enctype="multipart/form-data"
           2.method="post"
      -->
     <a href="../day0319/file_list.jsp">파일리스트</a><br/>
     
     <form action="mr_upload_process.jsp" id="uploadFrm"  method="post" enctype="multipart/form-data">
     <!-- getparameter를 사용할수 없게 된다. -->
           <label>업로더</label>
           <input type="text" name="uploader" class="inputBox"  id="uploader"/><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" class="inputBox"  style="width:200px;" id="upfile"/><br/>
           <input type="button" value="업로드" class="btn"  id="btn"/>
     </form>
     
     </div>
     <div id="footer">
           <div id="footerTitle">copyright&copy; all right  reserved. class 4.</div>
     </div>
</div>
</body>
</html>



*Model1 방식의 개발
  • ///자바로 개발하는건 모델1과 모델2방식이 있다..
  • ///주로쓰는건 모델2-어렵 (모델1이 상대적으로 매우 쉽다)
  • 하나의 JSP에  생명주기가 다른 모든 작업을 정의하는 개발방식

  • (단)코드의 복잡도 상승(유지보수가 어렵다)
  • 파일관리가 편하다.
  • 값 사용이 편하다.        ==>개발기간의 단축/프로젝트 비용 감소
  • 에러잡기가 편하다.
  • ///(->결과가 빨리나와->개발속도가 빠르다->개발기간 단축)
  • ///디자이너가 젤 파일을 많이 건드려(생명주기가 짧아) 말아먹을수 있음
  • ///누가짜도 에러가 나니까 에러를 빨리잡는사람이 빠른것.
  • ///개발기간보다 사용기간이 더 긴데, 그 동안 패치를 제공(제로데이 취약점-취약점을 알고 그걸 보완하기까지의 사이기간(?))하는데 수정이 어렵.->하다하다 못하면 이때 프로그램의 생명이 끝남.(수정보다 새 개발이 나을때)  
  • ///SDLC : 몇배의 비용단축이 있다..
  • ///1:27:300 하임리히 법칙으로 1명이 죽을때 같은 이유로 27명이 경상 300번의 사건이 발생해 사소한 사건도 회피해야 한다는~그런 것.
  • (하지만 3가지로 분리하면 그건 모델2)

=>모델1으로 다이어리 만든다!
-개인 : 로그인
-그룹 : 로그인x, 글쓸때 비번중요
-최대 5개의 스케줄
-CRUD(create read update delete)

*CRUD(create read update delete)
  • 그룹에서 사용하는 일정관리 프로그램
  • 하루에 작성가능한 일정은 5건으로 제한
  • 글 작성시 식별가능하도록 이름,비번을 받는다.(수정/삭제가능하도록)
  • 일정은 달력에 기록하고 보여주는 일을 한다.
  • 모든 일정을 모아서 보는일 (게시판 List)
  • =>모델1으로! 금요일 까징 +첨부파일x->서머노트?스마트에디터(textarea->스마트에디터)Smart Editer-summer(FCK EDITER는 문제가 많아pass)
  • 페이지 레이어(include사용)vs페이지변경
  • 이미지
*Summer note
  • JavaScript로 만든 smart editer
  • textarea에 글 또는 이미지를 삽입할 수 있고 여러효과(진하게, 일정부분 사이즈변경, 밑줄 긋기 등등)을 사용할 수 있는 기능.
  • summernote.org에서 관련 js를 다운받는다.
  • 전송방식은 post전송방식만 가능하다.
  • 이미지는 encoding(text로)되어 전송된다.
  • JavaScrip+jQuery알면 된당...플러그인처럼 사용...
///summernote.org/getting-started/ > Getting started > include js/csss 의 boostrap파일 두개를 따로 저장
///common폴더에 summernote를 만들고 받은 summernote파일과 위의 boostrap파일을 같이 넣어준다.
///넣어준 경로들이 맞는지 확인해주고 사용한다.

 
<<작성자/제목/내용 추가하고 이동링크 추가(이때 MultipartRequest로 이동)
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF  url(http://localhost:8080/jsp_prj/common/images/header_bg.png)  repeat-x;
           position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px;  font-weight:bold; text-align:center;
                /* padding-top: 35px */ position:absolute;  top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px;  padding-right:20px; }
</style>
<!-- summernote 관련 library 시작 -->
<!-- include libraries(jQuery, bootstrap) -->
<link href="../common/summernote/bootstrap.css"  rel="stylesheet">
<!-- bootstrap.css고침! -->
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="../common/summernote/bootstrap.js"></script>
<!-- include summernote css/js -->
<link href="../common/summernote/summernote-lite.css"  rel="stylesheet">
<script  src="../common/summernote/summernote-lite.min.js"></script>
<script  src="../common/summernote/lang/summernote-ko-KR.js"></script>
<script type="text/javascript">
/* $(document).ready(function() { */
$(function() {
     $('#summernote').summernote({
       placeholder: '서머노트 우왕굳',
       tabsize: 2,
       height: 150,
       width: 700,
       lang: 'ko-KR'
    });
});//ready
</script>
<!-- summernote 관련 library 끝 -->
<script type="text/javascript">
$(function(){
     $("#btn").click(function(){
           $("form").submit();
     });
});//ready
</script>
</head>
<body>
<div id="wrap">
     <div id="header">
           <div id="headerTitle">SIST Class4</div>
     </div>
     <div id="container">
     <form method="post" action="summernote_process.jsp"><!--  get방식으로 255까지 넘길 수 있기 때문에 getㄴㄴ(이미지가 첨부되면  -->
     <label>작성자</label>
     <input type="text" name="name" class="inputBox"/><br/>
     <label>제목</label>
     <input type="text" name="subject" class="inputBox"/><br/>
     <label>내용</label>
     <textarea id="summernote" name="contents"></textarea><br/>
     <input type="button" value="글쓰기" class="btn" id="btn"/>
     </form>
     </div>
     <div id="footer">
           <div id="footerTitle">copyright&copy; all right  reserved. class 4.</div>
     </div>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    info="summernote 전송 처리"
    %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF  url(http://localhost:8080/jsp_prj/common/images/header_bg.png)  repeat-x;
           position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px;  font-weight:bold; text-align:center;
                /* padding-top: 35px */ position:absolute;  top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px;  padding-right:20px; }
</style>
</head>
<body>
<div id="wrap">
     <div id="header">
           <div id="headerTitle">SIST Class4</div>
     </div>
     <div id="container">
     <%
           request.setCharacterEncoding("UTF-8");
           String name=request.getParameter("name");
           String subject=request.getParameter("subject");
           String content=request.getParameter("contents");
     
     %>
     이름 :<%=name %><br/>
     제목 :<%=subject %><br/>
     내용 :<%=content %>
     
     </div>
     <div id="footer">
           <div id="footerTitle">copyright&copy; all right  reserved. class 4.</div>
     </div>
</div>
</body>
</html>

<<<<db만들고+클래스 다이어그램 만들고+

 create table diary(
num number ,
writer varchar2(60) not null,
subject varchar2(1000) not null,
contents clob not null,
e_year char(4) not null,
e_month varchar2(2) not null,
e_day varchar2(2) not null,
w_date date default sysdate,
pass varchar2(300) not null,
ip varchar2(15) not null,
constraint pk_diary primary key(num)
);
--clob 따로 돌려...얻어와야....

create sequence seq_diary
increment by 1
start with 1
maxvalue 999999999999999;

 



 



 
반응형
저작자표시 비영리 변경금지

'국비지원학원 > JSP' 카테고리의 다른 글

101~103일차-JSP_Diary만들기  (0) 2019.04.04
99일차-JSP_JSTL+다이어리  (0) 2019.04.03
98일차-JSP_JSTL_forTokens  (0) 2019.04.03
97일차-JSP_JSTL(Jsp Standard Tag Library)  (0) 2019.04.03
96일차-JSP_액션태그  (0) 2019.03.31

'국비지원학원/JSP'의 다른글

  • 현재글100일차-JSP_MultipartRequest,Summernote,Diary

관련글

티스토리툴바