오픈프레임워크_Day50

OpenFrameWork 2015. 5. 26. 14:02
### : 목차 구분 기호
--- : 목차 내에 항목 구분 기호
@@@ : 태그 용도 
,,, : 같은 항목 내에 구분 기호

목차
1. 이론 및 정보
2. 설정 및 그 밖에
3. 소스코드 또는 실습
4. 과제

###################################
1. 이론 및 정보
-----------------------------------
* layoutit.com
----------------------------------- 
(4) 자료실 구현
          1) 파일 업로드 기능 추가
               - cos.jar(컴퍼넌트) : servlets.com -> com.oreilly.servlet -> cos-26Dec2008.zip
                 핵심 클래스 : MultipartRequest

----------------------------------- 
----------------------------------- 
###################################
2. 설정 및 그 밖에
-----------------------------------
* 프로젝트 생성
Workspace : ~\JSP\EclipseWork
/FileUploadApp


~\cos-26Dec2008\lib\cos.jar 파일 복사
/FileUploadApp/WebContent/WEB-INF/lib/cos.jar
/FileUploadApp/WebContent/WEB-INF/lib/servlet-api.jar


~/cos-26Dec2008/doc/index.html 
브라우저로 확인
----------------------------------- 
* Tomcat 7.0으로 테스트 해봐야함
File f = new File(realPath+"/"+new String(name.getBytes("8859_1"), "euc-kr"));
코드 동작을 확인 할 수 있음 
----------------------------------- 
###################################
3. 소스코드 또는 실습 
-----------------------------------
3-1
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/Javascript/TooltipAndPopover.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../bootstrap/js/jquery-2.1.4.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script>
     //window.onload = function(){} // 이거는 아래로 표현, jQuery
     $(function () {
          //document.getElementById("theTooltip")
          $("#theToolTip").tooltip();
          $("#thePopover").popover({html:true});
          
     });
</script>
<style>
     body{margin-top: 50px}
</style>
</head>
<body>
<div class="container">
     <div class="row">
          <div class="sapn12">
               <a href="#" title="툴팁 : 풍선도움말">툴팁</a><br/>
               <a href="#" title="툴팁 : 풍선도움말" data-toggle="tooltip" id="theToolTip">툴팁</a>
               <hr/>
               <a href="#" id="thePopover" data-toggle="popover" title="제목부분" data-content="내용<br/>부분....">팝오버</a>
          </div>
     </div>
</div>
</body>
</html>
-----------------------------------  
3-2
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/Javascript/Accordion.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../bootstrap/js/jquery-2.1.4.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
     <div class="row">
          <div class="sapn10">
               <h1>아코디언 메뉴</h1>
               <div id="theAccordion" class="accordion">
                    <div class="accordion-group">
                         <div class="accordion-heading">
                              <a href="#theOne" class="accordion-toggle" data-toggle="collapse" data-parent="#theAccordion">그룹 #1</a>
                         </div>
                         <div id="theOne" class="accordion-body collapse in">
                              <div class="accordion-inner">
                                   그룹 #1에 해당하는 내용 영역...
                              </div>
                         </div>
                    </div>
                    <div class="accordion-group">
                         <div class="accordion-heading">
                              <a href="#theTwo" class="accordion-toggle" data-toggle="collapse" data-parent="#theAccordion">그룹 #2</a>
                         </div>
                         <div id="theTwo" class="accordion-body collapse in">
                              <div class="accordion-inner">
                                   그룹 #2에 해당하는 내용 영역...
                              </div>
                         </div>
                    </div>
                    <div class="accordion-group">
                         <div class="accordion-heading">
                              <a href="#theThree" class="accordion-toggle" data-toggle="collapse" data-parent="#theAccordion">그룹 #3</a>
                         </div>
                         <div id="theThree" class="accordion-body collapse in">
                              <div class="accordion-inner">
                                   그룹 #3에 해당하는 내용 영역...
                              </div>
                         </div>
                    </div>
               </div>
          </div>
     </div>
</div>
</body>
</html>
-----------------------------------  
3-3
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/Javascript/Carousel.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../bootstrap/js/jquery-2.1.4.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
     <div class="row">
          <div class="sapn10">
               <div id="theCarousel" class="carousel slide span8">
                    <ol class="carousel-indicators">
                         <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
                         <li data-target="#theCarousel" data-slide-to="1" class="active"></li>
                         <li data-target="#theCarousel" data-slide-to="2" class="active"></li>
                         <li data-target="#theCarousel" data-slide-to="3" class="active"></li>
                         <li data-target="#theCarousel" data-slide-to="4" class="active"></li>
                         <li data-target="#theCarousel" data-slide-to="5" class="active"></li>
                    </ol>
                    <div class="carousel-inner">
                         <div class="item active"><img src="../images/Desert.jpg"/>
                              <div class="carousel-caption">
                                   <h4>제목</h4>
                                   <p>사막이다</p>
                              </div>
                         </div>
                         <div class="item"><img src="../images/Chrysanthemum.jpg"/>
                              <div class="carousel-caption">
                                   <h4>제목</h4>
                                   <p>?</p>
                              </div>
                         </div>
                         <div class="item"><img src="../images/Hydrangeas.jpg"/>
                              <div class="carousel-caption">
                                   <h4>제목</h4>
                                   <p>?</p>
                              </div>
                         </div>
                         <div class="item"><img src="../images/Lighthouse.jpg"/>
                              <div class="carousel-caption">
                                   <h4>제목</h4>
                                   <p>?</p>
                              </div>
                         </div>
                         <div class="item"><img src="../images/Penguins.jpg"/>
                              <div class="carousel-caption">
                                   <h4>제목</h4>
                                   <p>?</p>
                              </div>
                         </div>
                         <div class="item"><img src="../images/Tulips.jpg"/>
                              <div class="carousel-caption">
                                   <h4>제목</h4>
                                   <p>?</p>
                              </div>
                         </div>
                    </div>
                    <a href="#theCarousel" class="carousel-control left" data-slide="prev">&lsaquo;</a>
                    <a href="#theCarousel" class="carousel-control right" data-slide="next">&rsaquo;</a>
               </div>
          </div>
     </div>
</div>
</body>
</html>
----------------------------------- 
3-4
Workspace : ~\JSP\EclipseWork
/FileUploadApp/WebContent/basic1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>단순한 파일 업로드 테스트</h1>
<form method="post" action="basic1_proc.jsp" enctype="multipart/form-data">
     사용자 이름: <input type="text" name="userName" /><br/><br/>
     제목: <input type="text" name="title" /><br/><br/>
     파일 선택: <input type="file" name="file"/><br/><br/>
     파일 선택1: <input type="file" name="file1"/><br/><br/>
     파일 선택2: <input type="file" name="file2"/><br/><br/>
     파일 선택3: <input type="file" name="file3"/><br/><br/>
     <input type="submit" value="전송" />
</form>
</body>
</html>
----------------------------------- 
3-5
Workspace : ~\JSP\EclipseWork
/FileUploadApp/WebContent/basic1_proc.jsp

<%@page import="java.io.File"%>
<%@page import="java.util.Enumeration"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<%
     String path = getServletContext().getRealPath("/upload");
     //out.println(path);
     //F:\\study\\JSP\\EclipseWork\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp0\\wtpwebapps\\FileUploadApp\\upload\\
     int maxSize = 50 * 1024 * 1024; 
     DefaultFileRenamePolicy policy = new DefaultFileRenamePolicy();
     MultipartRequest multi = new MultipartRequest(request, path, maxSize, "euc-kr", policy); 
     //위 경로에 파일이 저장되는 것을 알 수 있음     

%>
<!-- 더이상 request 객체를 못씀 MultipartRequest 가 흡수함 그래서 request 못씀 -->
사용자 이름 :<%=multi.getParameter("userName") %> <br/>
제목 :<%=multi.getParameter("title") %> <br/>
<%-- basic1.jsp에서 파일을 전부 넣지 않으면 에러가 남 --%> 
<%
     Enumeration names = multi.getFileNames();
     while(names.hasMoreElements()){
          String name = (String)names.nextElement();
%>
     저장될 파일명 : <%=multi.getFilesystemName(name) %><br/>
     실제 파일명 : <%=multi.getOriginalFileName(name) %><br/>
     파일 타입 : <%=multi.getContentType(name) %><br/> 
<%
          File f = multi.getFile(name);
%>
     파일 크기 : <%=f.length() %><br/>
     파일 경로 : <%=f.getPath() %>
<%
     }
%>
</body>
</html>
----------------------------------- 
3-6
Workspace : ~\JSP\EclipseWork
/FileUploadApp/WebContent/basic2.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<%
     int cnt = 0;
     if(request.getParameter("add") != null){
          cnt = Integer.parseInt(request.getParameter("add"));
     }
%>
<h1>멀티 파일 업로드 테스트</h1>
<form method="post" action="basic2.jsp" >
     사용자 이름: <input type="text" name="userName" /><br/><br/>
     제목: <input type="text" name="title" /><br/><br/>
     추가할 파일 수 입력 : <input type="text" name="add"/>
     <input type="submit" value="전송" /><br/><br/>
</form>
<hr/>
<form method="post" action="basic2_proc.jsp" enctype="multipart/form-data">
<%
     for(int i=0; i<cnt; i++){
%>
          <input type="file" name="file<%=i%>" /><br/><br/>
<%
     }
%>
     <input type="submit" value="업로드" />
</form>
</body>
</html>
----------------------------------- 
3-7 
Workspace : ~\JSP\EclipseWork
/FileUploadApp/WebContent/basic2_proc.jsp

<%@page import="java.util.Enumeration"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<script>
</script>
</head>
<body>
<%
     request.setCharacterEncoding("euc-kr");
     String path = getServletContext().getRealPath("/upload");
     int maxSize = 50 * 1024 * 1024;
     MultipartRequest multi = new MultipartRequest(
               request,
               path,
               maxSize,
               "euc-kr",
               new DefaultFileRenamePolicy());
     String userName = multi.getParameter("userName");
     String title = multi.getParameter("title");
     ArrayList saveFiles = new ArrayList();
     ArrayList originFiles = new ArrayList();
     
     Enumeration files = multi.getFileNames();
     while(files.hasMoreElements()){
          String name = (String)files.nextElement();
          saveFiles.add(multi.getFilesystemName(name));
          originFiles.add(multi.getOriginalFileName(name));
     }
%>
     <ul>
          <li>사용자 : <%=userName%></li>
          <li>제목 : <%=title%></li>
          <li>올린 파일 : <br/> 
               <%for(int i=0;i<saveFiles.size();i++){%>
                    <%-- <a href="upload/<%=saveFiles.get(i)%>"><%=originFiles.get(i)%></a><br/> --%>
                    <a href="download.jsp?name=<%=saveFiles.get(i)%>"><%=originFiles.get(i)%></a><br/>
               <%}%>
          </li>     
     </ul>
</body>
</html>
-----------------------------------  
3-8 
Workspace : ~\JSP\EclipseWork
/FileUploadApp/WebContent/download.jsp

<%@page import="java.io.BufferedOutputStream"%>
<%@page import="java.io.File"%>
<%@page import="java.io.FileInputStream"%>
<%@page import="java.io.BufferedInputStream"%>
<%@page import="java.io.BufferedReader"%>
<%@ page contentType="text/html; charset=EUC-KR"%>
<%
     request.setCharacterEncoding("euc-kr");
     String name = request.getParameter("name");
     String realPath = getServletContext().getRealPath("/upload");
     /*
          byte 단위로 사용자에게 파일을 전달하기
     */
     response.setContentType("Application/octet-stream");
     //파일의 이름을 미리 전달
     response.setHeader("content-Disposition", "attachment;filename=" + name);
     File f = new File(realPath+"/"+new String(name.getBytes("8859_1"), "euc-kr"));
     byte[] data = new byte[1024];
     try{
          BufferedInputStream input = 
                    new BufferedInputStream(
                              new FileInputStream(f));
          BufferedOutputStream output =
                    new BufferedOutputStream(
                              response.getOutputStream());
          
          int read = input.read(data);
          while(read != -1){
               output.write(data,0,read);
               read = input.read(data);
          }
          output.flush();
          output.close();
          input.close();
     }catch(Exception e){e.getStackTrace();}
%>
-----------------------------------  
3-9 
Workspace : ~\JSP\EclipseWork
/BoardApp/board.sql

drop SEQUENCE seq_num;
drop table tblboard;
CREATE TABLE tblboard(
     num                    number,
     name               varchar2(20),
     email               varchar2(50),
     homepage          varchar2(50),
     subject               varchar2(50),
     content               varchar2(4000),
     pass               varchar2(10),
     count               number,
     ip                    varchar2(50),
     regdate               date,
     pos                    number,
     depth               number,
     constraint pk_num primary key(num)
);

CREATE SEQUENCE seq_num;

select * from tblboard;

insert into tblboard values(seq_num.nextVal, 'aaa','aaa','aaa','aaa','aaa','aaa',0,'aaa',sysdate,0,0);
insert into tblboard values(seq_num.nextVal, 'bbb','bbb','bbb','bbb','bbb','bbb',0,'bbb',sysdate,0,0);

drop table tblboard;
delete from tblboard;

-- 자료실

CREATE TABLE tblboard(
     num                    number,
     name               varchar2(20),
     email               varchar2(50),
     homepage          varchar2(50),
     subject               varchar2(50),
     content               varchar2(4000),
     pass               varchar2(10),
     count               number,
     ip                    varchar2(50),
     regdate               date,
     pos                    number,
     depth               number,
     -- 파일 갯수가 정해져 있을 경우
     file1               varchar2(50), -- 파일 경로 저장
     file2               varchar2(50), -- 파일 경로 저장
     file3               varchar2(50), -- 파일 경로 저장
     constraint pk_num primary key(num)
);

-- 파일 갯수가 정해져 있을 않을때, 따로 테이블 둔다
CREATE TABLE tblAttachFile(
     fieldId               number;
     num                    number;-- 게시판의 글번호
     filePath          varchar2(50), -- 파일 경로 저장
     constraint pk_fieldId primary key(fieldId)
);
-----------------------------------  
###################################
4. 과제
-----------------------------------
4-1
자료실 
/BoardApp/board.sql 
를 가지고 만들기
v2 
----------------------------------- 
4-2
게시판 기능 추가
체크 박스를 테이블 앞에 만들어서 삭제 가능하게 하기
전체 선택도 가능하도록 
v2
----------------------------------- 
###################################
5. 과제 해결
-----------------------------------
5-1
-----------------------------------
5-2
----------------------------------- 
5-3
-----------------------------------
5-4
-----------------------------------
###################################
6. 기타
----------------------------------- 
----------------------------------- 


저작자표시 비영리 변경금지 (새창열림)

'OpenFrameWork' 카테고리의 다른 글

오픈프레임워크_Day52  (0) 2015.05.28
오픈프레임워크_Day51  (0) 2015.05.27
오픈프레임워크_Day49  (0) 2015.05.22
오픈프레임워크_Day48  (0) 2015.05.21
오픈프레임워크_Day47  (0) 2015.05.20
,

티스토리툴바