[60일] jsp (35) - myweb 프로젝트(첨부 게시판)

네이버 카페나 다음 카페에 글을 쓰려고 보면 위와 같이 편집도 가능한 창이 나온다. 이것은 스마트 에디터로 편집이 가능한 게시판이다. 스마트 에디터 게시판 오픈소스는 CKEditor, Naver, Daum 등에서 제공한다. 이것을 활용하여 게시판이나 포토 갤러리에 사용해도 좋을 것이다.

 

myweb이 어느 정도 완성이 되면 호스팅을 해볼 것이다. 여러 서비스가 있고 각자 장단점이 있지만, 수업에서는 cafe24를 이용할 것이다.

https://hosting.cafe24.com/

카페24 호스팅 | 온라인 비즈니스의 시작

 

우선 포토 갤러리를 위한 테이블을 생성해야 한다.

 

--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)
);

--시퀀스 생성
create sequence pds_seq;

--행추가
pdsno : 시퀀스
wname, subject, passwd : 사용자 입력 <form></form>
regdate : 오늘날짜(sysdate)
filename, filesize : 첨부파일 관련 정보

insert into tb_pds(pdsno, wname, subject, passwd, filename, filesize, regdate)
values (pds_seq.nextval, ? ,? ,?, ?, ?, sysdate)

--전체목록
select pdsno, wname, subject, passwd, filename, filesize, regdate
from tb_pds
order by regdate desc;

--상세보기
select *
from tb_pds
where pdsno=?

--행삭제
--글번호와 비밀번호가 일치하면 테이블 행 삭제 + /storage 폴더에 저장된 첨부파일 삭제
DELETE FROM tb_pds
WHERE pdsno=? AND passwd=?

--행수정
UPDATE tb_pds
SET wname=?, subject=?, filename=?, filesize=?
WHERE passwd=? AND pdsno=?

테이블과 시퀀스를 생성하자

 

다음으로 template.jsp를 복사해서 pds 폴더에 pdsForm.jsp와 pdsList.jsp를 생성한다.

net.pds 패키지를 만들어 PdsDAO와 PdsDTO 클래스를 생성한다.

 

사진 올리기

 

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
				+ "]";
	}
	  
}

 

PdsDAO.java

package net.pds;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import net.utility.DBClose;
import net.utility.DBOpen;

public class PdsDAO {
	
	private DBOpen dbopen = null;
	private Connection con = null;
	private PreparedStatement pstmt = null;
	private ResultSet rs = null;
	private StringBuilder sql = null;
	
	public PdsDAO() {
		dbopen = new DBOpen();
	}
	
	public int create(PdsDTO dto) {
		int cnt = 0;
		try {
			con = dbopen.getConection();
			
			sql = new StringBuilder();
			sql.append(" insert into tb_pds(pdsno, wname, subject, passwd, filename, filesize, regdate) ");
			sql.append(" values (pds_seq.nextval, ? ,? ,?, ?, ?, sysdate) ");
			
			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());
			
			cnt = pstmt.executeUpdate();
			
		} catch (Exception e) {
			System.out.println("추가실패 : " + e);
		} finally {
			DBClose.close(con, pstmt);
		}//end
		return cnt;
	}//create() end
	
}//class end

 

다시 pds 폴더로 돌아와서 ssi.jsp를 추가해준다.

 

ssi.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%-- ssi.jsp 공통코드 --%>

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

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

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

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

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

 

pdsForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../header.jsp"%>
<!-- 본문 시작 pdsForm.jsp-->
<h3>* 사진 올리기 *</h3>
<p><a href="pdsList.jsp">[목록]</a></p>
<form method="post" action="pdsIns.jsp" enctype="multipart/form-data" onsubmit="return pdsCheck()"><!-- myscript.js -->
	<table class="table">
	<tr>
	    <th>이름</th>
	    <td style="text-align: left"><input type="text" name="wname" id="wname" size="20" maxlength="100" required autofocus></td>
	</tr>
	<tr>
	    <th>제목</th>
	    <td style="text-align: left">
	    	<textarea rows="5" cols="30" name="subject" id="subject"></textarea>
	    </td>
	</tr>
	<tr>
	    <th>비밀번호</th>
	    <td style="text-align: left"><input type="password" name="passwd" id="passwd"></td>
	</tr>
	<tr>
	    <th>첨부파일</th>
	    <td style="text-align: left"><input type="file" name="filename" id="filename"></td>
	</tr>
	<tr>
	    <td colspan="2">
	    	  <input type="submit" value="사진 올리기" class="btn btn-success">
	    	  <input type="reset"  value="취소"      class="btn btn-danger">
	    </td>
	</tr>
	</table>
</form>
<!-- 본문 끝 -->
<%@ include file="../footer.jsp"%>

이미지 형식의 파일만 첨부할 수 있도록 자바스크립트로 함수를 만들어 onsubmit 속성을 넣어준다.

 

myscript.js

function pdsCheck() { //포토갤러리 유효성 검사
	//1)이름
	
	//2)제목
	
	//3)비밀번호
	
	//4)첨부파일
	//->파일의 확장명이 이미지 파일(png, jpg, gif)인지 확인하시오
	let filename = document.getElementById("filename").value; //예) sky.png
	filename = filename.trim();
	if(filename.length==0) {
		alert("첨부 파일 선택하세요~");
		return false;
	} else {
		let dot = filename.lastIndexOf("."); //filename 변수값에서 마지막 .의 순서값
		let 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
	
}//pdsCheck() end

1), 2), 3)은 직접 작성해보자

 

 

pdsIns.jsp

<%@ 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, encoding, new DefaultFileRenamePolicy());
		
		//2) 1)단계에서 저장한 파일의 파일명, 파일크기 가져오기
		String fileName = ""; //파일명
		long fileSize = 0; //파일크기
		File file = null; //실제 파일 담기
		String item = ""; //name="filename"
		
		Enumeration files = mr.getFileNames(); //mr에서 <input type=file>을 전부 수거하기
		while(files.hasMoreElements()) { //여러 개의 파일을 첨부하는 경우에 한 개씩 처리하기
			item = (String)files.nextElement(); //name="filename"
			fileName = mr.getFilesystemName(item); //mr객체에서 item이 가지고 있는 실제 파일명(sky.png) 가져오기
			if(fileName != null) { //실제 파일명을 가져왔다면
				file = mr.getFile(item); //mr에서 실제 파일 가져오기
				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);
		
		int cnt = dao.create(dto);
		if(cnt==0){
			out.println("<p>사진 추가 실패했습니다</p>");
			out.println("<p><a href='javascript:history.back()'>[다시시도]</a></p>");
		} else {
			out.println("<script>");
			out.println("	alert('사진을 추가되었습니다');");
			out.println("	location.href='pdsList.jsp'"); //목록페이지 이동
			out.println("</script>");
		}//if end
		
	} catch(Exception e) {
		out.print(e);
		out.print("<p>사진 올리기 실패!!</p>");
		out.print("<a href='javascript:history.back();'>[다시시도]</a>");
	}//end

%>
<!-- 본문 끝 -->
<%@ include file="../footer.jsp"%>

 

파일 여러 개 첨부 시