초급의 끄적거림

[프로젝트] 포토갤러리 본문

실습

[프로젝트] 포토갤러리

codingD 2019. 9. 19. 18:10

<목표>

포토 갤러리 (이미지 게시판)

 : 쓰기, 목록, 상세보기

 

1. 테이블 생성

  pds.sql 

   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)

  );

 

2. 백엔드

  - 테이블을 생성했으니 DAO, DTO를 만들어야 함

  - PdsDAO.java → Data Access Object (꾸준히 추가됨)

  - PdsDTO.java → Data Transfer Object // Value Object

 

 2-1. PdsDTO.java

package net.pds;

public class PdsDTO {
	 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(){}

	public int getPdsno() {
		return pdsno;
	}

	public void setPdsno(int pdsno) {
		this.pdsno = pdsno;
	}

	public String getWname() {
		return wname;
	}

	public void setWname(String wname) {
		this.wname = wname;
	}

	public String getSubject() {
		return subject;
	}

	public void setSubject(String subject) {
		this.subject = subject;
	}

	public String getRegdate() {
		return regdate;
	}

	public void setRegdate(String regdate) {
		this.regdate = regdate;
	}

	public String getPasswd() {
		return passwd;
	}

	public void setPasswd(String passwd) {
		this.passwd = passwd;
	}

	public int getReadcnt() {
		return readcnt;
	}

	public void setReadcnt(int readcnt) {
		this.readcnt = readcnt;
	}

	public String getFilename() {
		return filename;
	}

	public void setFilename(String filename) {
		this.filename = filename;
	}

	public long getFilesize() {
		return filesize;
	}

	public void setFilesize(long filesize) {
		this.filesize = filesize;
	}

	@Override
	public String toString() {
		return "PdsDTO [pdsno=" + pdsno + ", wname=" + wname + ", subject="
				+ subject + ", regdate=" + regdate + ", passwd=" + passwd
				+ ", readcnt=" + readcnt + ", filename=" + filename
				+ ", filesize=" + filesize + "]";
	}
	
}//class end

 

3. 프론트엔드

 3-1. pdsForm.jsp

   - 변수명을 name으로 붙이기. id로 하면 getParameter를 사용해서 불러 올 수 없음

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../header.jsp"%>
<!-- 본문시작 pdsForm.jsp -->
	<h3> * 사진 올리기 * </h3>
    <form name="photoForm" method="post" enctype="multipart/form-data" action="pdsIns.jsp" onsubmit="return pdsCheck(this)">
    <table class="table table-condensed">
    	<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="filename"></td>
        </tr>
        <tr>
          <td colspan="2">
          	<input type="submit" value="전송">
            <input type="reset" value="취소">
          </td>
        </tr>
    </table>
	</form>
<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>

 

 3-2. 포토갤러리 유효성검사

function pdsCheck(f){
 	//포토갤러리 유효성 검사
    //1) 이름이 2자 이상인가
    var wname=f.wname.value;
    wname=wname.trim();
    if(wname.length<2){
    	alert("이름은 2자 이상 입력해주세요.");
        f.wname.focus();
        return false;
    }//if end
    
    //2) 제목 (굳이 안 만들어도 될 것 같음)
    
    //3) 비밀번호는 4~15자 이내
    var passwd=f.passwd.value;
    passwd=passwd.trim();
    if(passwd.length<4 || passwd.length>15){
  	    alert("비밀번호를 4~15자 이내인지 확인해주세요");
  	    f.passwd.focus(); //커서 가져다 두기
  	    return false;  
  	}// if end	
    
    //4) 첨부파일
    var filename=f.filename.value;
    filename=filename.trim();
    if(filename.length==0){
    	alert("첨부파일을 선택하세요.");
        return false;
    }else{
        //파일 타입 (확장자를 출력하시오)
        
        //마지막 . 의 순서
        var dot=filename.lastIndexOf(".");
        
        //마지막 . 이후 문자열만 자르기 ( . 의 순서 그 다음의 문자열부터 가져와야하기 때문에 +1)
  	var ext=filename.substr(dot+1);  
        
        //전부 소문자로 치환
        ext=ext.toLowerCase();
        
        //포토게시판이기 때문에 확장자를 잘라서 이미지 확장자 찾기
        if(ext=="png" || ext=="jpg" || ext=="gif"){
  				return true;
  		}else{
  				alert("이미지 파일만 가능합니다.");
  				return false;
  		}//if end
  				  				
  	}//if end
  		return true;
                
}//pdsCheck() end

 

  4) function pdsCheck(f) 의 첨부파일

      : 포토게시판이기 때문에 가능한 확장자만 첨부가 되도록 해야해서 확장명을 알기 위해서 뒤에서부터 첫 번째 있는 . 을 기준으로 잘라오기

 

     : . 의 순서를 찾아서 그 . 의 순서를 기준으로 확장자명 찾기

 

. 의 순서를 이용해 파일 타입 (확장명)을 출력

 

이미지 파일이 아닐 경우 알림창이 뜸

 

4. ssi.jsp

  - pds폴더에 ssi.jsp 붙여 놓고 그것에 맞게 수정하기

    : DAO, DTO 수정, oreilly~ 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@page import="java.io.*"%>
<%@page import="java.util.*"%>
<%@page import="java.sql.*"%>

<%@ page import="com.oreilly.servlet.*" %>
<%@ page import="com.oreilly.servlet.multipart.*" %>

<%@page import="net.utility.*"%>
<%@page import="net.pds.*"%>

<jsp:useBean id="dao" class="net.pds.PdsDAO"></jsp:useBean>
<jsp:useBean id="dto" class="net.pds.PdsDTO"></jsp:useBean>

<% request.setCharacterEncoding("UTF-8");%>

 

5. pdsIns.jsp (사진 올리기 결과)

  - pdsTestProc2.jsp 에서 복사해오기 : 파일 크기 변수 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../header.jsp"%>
<%@ include file="ssi.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, encoding, new DefaultFileRenamePolicy());
 		
	//2) 저장된 파일명, 파일크기 가져오기
        String item="";
        String fileName=""; //파일명
        long filesize=0;    //파일크기
        File file =null;
        
        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.insert(dto);
        if(flag){
            out.println("<script>");
            out.println("	alert('사진을 추가했습니다.')");
            out.println("	location.href='pdsList.jsp';");
            out.println("</script>");
        }else{
            out.println("<p>사진 추가 실패 T.T</p>");
            out.println("<p><a href='javascript:history.back();'>[다시시도]</a></p>");
        }//if end        
    }catch(Exception e){
      out.println(e);
        out.println("<p>사진 올리기 실패 T.T</p>");
        out.println("<a href='javascript:history.back()'>");
    }//try end
%>
<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>

 

6. PdsDAO.jsp  - insert() : 사진 올리기 / list() : 사진 목록

public boolean insert(PdsDTO dto){
	boolean flag=false;
    
    try{
     	Connection con=DBOpen.getConneciton();
        StringBuilder sql=new StringBuilder();
        
		sql.append(" INSERT INTO tb_pds(pdsno, wname, subject, passwd, filename, filesize, regdate) ");
        sql.append(" VALUES ( (SELECT NVL(MAX(pdsno), 0)+1 from tb_pds) , ?, ?, ?, ?, ?, sysdate) ");
    
    	PreparedStatement pstmt=con.prepareStatement(sql.toString());
       			pstmt.setString(1, dto.getWname());
			pstmt.setString(2, dto.getSubject());
			pstmt.setString(3, dto.getPasswd());
			pstmt.setString(4, dto.getFilename());
			pstmt.setLong(5, dto.getFilesize());
			
			int cnt=pstmt.executeUpdate();
			if(cnt==1){
				flag=true;
			}//if end
    }catch(Exception e){
    	System.out.println("사진 추가 실패 : " + e):
    }//try end
    return flag;
}//insert end

public synchronized ArrayList<PdsDTO> list(){
	ArrayList<PdsDTO> list=null;
    try{
    	Connection con=DBOpen.getConnection();
        StringBuilder sql=new StringBuilder();
        
        sql.append(" SELECT pdsno, wname, subject, readcnt, regdate, filename ");
        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<>();
            do{
            	PdsDTO dto=new PdsDTO();
                dto.setPdsno(rs.getInt("pdsno"));
		dto.setWname(rs.getString("wname"));
		dto.setSubject(rs.getString("subject"));
		dto.setReadcnt(rs.getInt("readcnt"));
		dto.setFilename(rs.getString("filename"));
		dto.setRegdate(rs.getString("regdate"));
		list.add(dto);
            }while(rs.next());
        }else{
        	list=null;
        }//if end
    }catch(Exception e){
    	System.out.println("목록 불러오기 실패 : "+e);
    }//try end
    return list;
}//list() end

사진이 정상적으로 들어가면 알림과 함께 자료가 들어간 것을 확인할 수 있음

 

 

6. pdsList.jsp (전체 글 목록)

%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<%@ include file="../header.jsp"%>
<!-- 본문시작 pdsList.jsp-->
	<h3>* 포토갤러리 *</h3>
	<p><a href="pdsForm.jsp">[사진올리기]</a></p>
<%
	ArrayList<PdsDTO> list=dao.list();
    if(list=null){
    	out.println("관련 자료 없음 T.T");
    }else{
%>
	전체 글 개수 : <%= list.size() %> <br>
    <table class="table table-condensed">
	<tr>
    	<th>제목</th>
        <th>사진</th>
        <th>작성자</th>
        <th>조회수</th>
        <th>작성일</th>
    </tr>
<%
	for(int idx=0; idx<list.size(); idx++){
    	dto=list.get(idx);
%>
	<tr>
    	<td><%=dto.getSubject()%></td>
        <td><img src="../storage/<%=dto.getFilename()%>" width="50"></td>
        <td><%=dto.getWname()%></td>
        <td><%=dto.getReadcnt()%></td>
        <td><%=dto.getRegdate().substring(0, 10)%></td>
    </tr>
<%
	}//for end
    out.println("</table>");
  }//if end
%>    
<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>

 

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

'실습' 카테고리의 다른 글

[에러] ajax활용하여 중복체크시 에러  (0) 2019.10.31
[프로젝트] cos.jar / MultipartRequest () / 첨부파일  (0) 2019.09.18
[프로젝트] 쿠키 (아이디저장)  (0) 2019.09.17
[프로젝트] id, email 중복확인 / 회원가입  (1) 2019.09.16
[프로젝트] 글 개수 / 한 페이지에 글 개수 / 페이징  (0) 2019.09.10
'실습' Related Articles more
Comments