2019/09/19 myWeb 포토 갤러리

포토갤러리 > pds 

pdsList.jsp, pdsForm.jsp, pdsInt.jsp, ssi.jsp

---

1. pdsList 포토갤러리 목록 페이지

//첨부를 해서 받은 파일들의 이름은 테이블에 들어가고, 화면에 보여줄때 그 파일 이름에 맞는 이미지를 불러온다

 1) 포토갤러리 테이블 생성

-- 테이블 생성
CREATE TABLE tb_pds (
   pdsno        NUMBER           NOT NULL
  ,wname        VARCHAR2(100)    NOT NULL
  ,subject      VARCHAR2(250)    NOT NULL
  ,regdate      DATE             NOT NULL
  ,passwd       VARCHAR2(15)     NOT NULL
  ,readcnt      NUMBER           DEFAULT 0
  ,filename     VARCHAR2(250)    NOT NULL   --파일명
  ,filesize     NUMBER           DEFAULT 0  --파일크기
  ,PRIMARY KEY(pdsno)
);

 

※ 프라이머리 키(기본 키)를 지정할 때, primary key(pdsno, passwd) 이렇게 모아서 기본키를 지정하여 
2개를 지정할 수 있다.

2) pds 포토갤러기의 DAO , DTO 생성

  DTO

private int pdsno;        
private String wname;    
private String subject;     
private String regdate;  
private String passwd;     
private int readcnt;    
private String filename; 
private long filesize;

	public PdsDTO() {}

 

 ▲ 위에서 생성해준 테이블의 칼럼에 대한 변수를 설정 해준뒤,  생성자 함수 와 Setter, Getter 를 생성

 

2. 포토갤러리 폼 페이지

<h3>* 사진 올리기 *</h3>
	<form name="photoForm"
			  method="post"
			  enctype="multipart/form-data"
			  action="pdsIns.jsp"
			  onsubmit="return pdsCheck(this)">
	<div class="container">
	<table class="table">
	<tr>
		<th>성명</th>
		<td><input type="text"  name="wname"  size="20"  maxlength="100" required autofocus></td>
	</tr>
	<tr>
		<th>제목</th>
		<td><textarea rows="5" cols="30" name="subject"></textarea></td>
	</tr>
	<tr>
		<th>비밀번호</th>
		<td><input type="password"  name="passwd" ></td>
	</tr>
	<tr>
		<th>첨부파일</th>
		<td><input type="file"  name="filenm" ></td>
	</tr>
	<tr>
		<td colspan="2">
		 	<input type="submit" value="제출">
		 	<input type="reset" value="취소">
		</td>
	</tr>
	</table>		 
	</div> 
	</form>

1. 성명을 반드시 입력할 수 있게 required 속성과, autofocus 속성을 넣어 준다

2. input type="submit" 으로 폼을 제출을 하면, onsubmit pdsCheck() 자바스크립트를 거쳐 유효성 검사를 해준다

3. 유효성검사를 받아 true 값을 받아 오면 pdsIns 페이지로 이동

1) pdsCheck()

  pdsIns로 가기 전에 유효성 검사를 거치자

 

  파일명을 제대로 받아 왔는지 확인!!

function pdsCheck(f){
	//포토갤러리 유효성 검사
	//1) 이름
	//2) 제목
	//3) 비밀번호는 4~15글자 이내인지?
	
	//4) 첨부파일
		var filename=f.filename.value;
		
		filename= filename.trim();
		
    if(filename.length==0){//파일 선택을 하지 않았을 때
		alert("첨부파일 선택해라 어~!!?");
			}else{
	//문제) 파일 타입을 출력하시오
		
        //마지막 .의 순서
		var dot=filename.lastIndexOf(".");
		
        //마지막 . 이후 문자열만 자르기
		var ext=filename.substr(dot+1);
		
        //전부 소문자로 치환
		ext=ext.toLowerCase();// 전부소문자로
		
        //alert(ext);
		if(ext=="png"|| ext=="jpg" || ext=="gif"){
			return true;
		
        }else{
			alert("이미지 파일만 넣으라고!!");
			return false;
		
        }//if end
	}// if end 
}//pdsCheck end

1) filename 값을 매개변수로 받아와서,  변수 'filename' 에 할당해주고 좌우에 빈값을 장라준다.

2) filename.length값이 0이면  파일을 선택하라는 경고창을 띄어준다

3) filename.length가 0이 아니면  파일의 .jpg .png .gif 와 같은 이미지 파일 의 확장자 명을 잘라오기위해 
   lastIndexOf 로 마지막 .의 위치값을 dot에 담는다

4) '.' 이후의 문자열만 잘라오기 위해 substr을 사용해서 ext 에 담아 전수 toLowercase()를 이용해 소문자로 돌려준다

5) 잘라온 마지막 확장명 값이 .jpg .png .gif  가 되면 true값을 반환 아니면 false 값을 반환

 ▲ 위와같이  .jpg .png .gif 파일을 넣지 않으면, 경고창이 나온다.

 

2. 포토갤러리 Ins 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>   
<%@ include file="ssi.jsp" %>    
<%@ include file="../header.jsp"%>
<!-- 본문시작  pdsIns.jsp -->
	<h3>* 사진 올리기 결과 *</h3>
	<%
try{
	//1) 첨부된 파일 저장하기----------------------------------
	String saveDirectory=application.getRealPath("/storage");
	int maxPostsize=1024*1024*10;
	String encoding="UTF-8";
	MultipartRequest mr=new MultipartRequest(request,saveDirectory,maxPostsize,new DefaultFileRenamePolicy());
	//2) 저장된 파일명, 파일크기 가져오기---------------------
	String item 		= "";
	String fileName="";
	File 	file 		= null;
	long 	filesize	=0;
	
	Enumeration files= mr.getFileNames();

	//이름-> 파일-> 파일 크기
	while(files.hasMoreElements()){
		item=(String)files.nextElement();
		fileName=mr.getFilesystemName(item);
		if(fileName!=null){
			file=mr.getFile(item);		//파일담기
				if(file.exists()){			//파일 존재하는지?
					filesize=file.length();
				}//if end
		}// if end
	}//while end
	
	//3) tb_pds 테이블에 행 추가하기--------------------------
	String wname=mr.getParameter("wname").trim();
	String subject=mr.getParameter("subject").trim();
	String passwd=mr.getParameter("passwd").trim();
	
	dto.setWname(wname);
	dto.setSubject(subject);
	dto.setPasswd(passwd);
	dto.setFilename(fileName);
	dto.setFilesize(filesize);
	
	 boolean flag=dao.pdsIns(dto);
	 if(flag){
		 out.println(" <script>");
		 out.println(" 	alert('사진을 추가했습니다');");
		 out.println(" 	location.href='pdsList.jsp'");
		 out.println(" </script>");
	 }else{
		 out.println(" <p>사진 추가 실패!!</p>");
		 out.println(" <p><a href='javascript:history.back();'>[다시시도]</p>");	 
	 }
}catch(Exception e){
	out.println(e);
	out.println("<p>사진올리기 실패!!</p>");
	out.println("<a href='javascript:history.back()'>");
}	
	%>
<!-- 본문 끝  -->
<%@ include file="../footer.jsp"%>

1 변수설정에 변수 값 담기

1) MultipartRequest mr=new MultipartRequest() 로 파일 저장 장소와, 보낼 수 있는 파일 크기, 인코딩 , 저장형식을 
mr 에 저장

2) item, fileName, file, filesize 변수 할당

3) Enumeration 클래스를 이용해서 mr에 저장해둔 파일의 이름을 files에 저장

4) 불러온 파일들이 더 있는지 files.hasMoreElements() 로 확인

5) 파일들을 하나씩 String값으로 item에 저장한다

6) fileName 에 불러온 파일들의  시스템적 이름들을 fileName에 저장한후

7) fileName 이 null 이 아니면, mr에 저장되어있는 file들을 이름이 저장되어 있는 item 을 매개 변수로 불러옴

8) file 에 담아 존재하는 파일들의 크기를 filesize에 담는다

※ item: mr에 저장되어 있는 file 이름들 ,(각각)파일명: fileName,  파일크기: filesize file
, file : mr저장되어있던 하나하나의 파일  

 2 테이블 행추가 하기

> pdsForm에서 보내온 wname, subject, passwd 값을 변수에 담고, dto에 그 값들을 매개변수로 
dao.pdsIns() 에 보내줘 값을 받아온다

public synchronized ArrayList<PdsDTO> list(){
	ArrayList<PdsDTO> list=null;
		try{
        Connection con=DBOpen.getConnection();
        StringBuilder sql=new StringBuilder();
        sql.append(" SELECT pdsno,subject,wname,passwd,regdate,readcnt,filename,filesize");
        sql.append(" FROM tb_pds ");
        sql.append(" ORDER BY regdate DESC");
        PreparedStatement pstmt=con.prepareStatement(sql.toString());
        ResultSet rs=pstmt.executeQuery();
        if(rs.next()){
        list=new ArrayList<PdsDTO>();
        do{
        PdsDTO dto= new PdsDTO();
        dto.setPdsno(rs.getInt("pdsno"));
        dto.setSubject(rs.getString("subject"));
        dto.setWname(rs.getString("wname"));
        dto.setPasswd(rs.getString("passwd"));
        dto.setRegdate(rs.getString("regdate"));
        dto.setReadcnt(rs.getInt("readcnt"));
        dto.setFilename(rs.getString("filename"));
        dto.setFilesize(rs.getLong("filesize"));
        list.add(dto);
        }while(rs.next());
        }else{
        list=null;
        }
 }catch(Exception e){System.out.println("목록 조회 실패"+e);}
        return list;
	}

1) pdsIns 에서 보내온 매개변수 값들을 SQL 문으로 조회를 한후 rs에 담아 그 값들 하나하나 찾아감

2) list객체를 생성후 rs에 담긴것들을 dto 객체에 담아 마지막에 list에 다시한번 담은후 

3) return값으로 list를 보내준다