JSP 이미지 갤러리

실행결과를 보려면 PhotoListAction.jsp 서블릿 파일을 실행시킨다.

 

DB

 

SQL> show user

USER은 "SCOTT"입니다.

SQL> create sequence seq_photo_idx;

시퀀스가 생성되었습니다.

SQL> create table photo(
2	idx int,
3	title varchar2(100),
4	filename varchar2(100),
5	pwd varchar2(100),
6	ip varchar2(100),
	regidate date
);

테이블이 생성되었습니다.

alter table photo add constraint pk_photo_idx primary key(idx);
// primary key 생성

 

 

 

PhotoGallery 프로젝트 생성

 

context.xml

commons.. 파일 등 위치해있기

 

service 패키지 > DBService 클래스

 

package service;

import java.sql.Connection;
import java.sql.SQLException;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.sql.DataSource;

public class DBService {
	static DBService single = null;
	public static DBService getInstance() {
    	if(single == null) {single = new DBService();}
        return single;
    }
    DataSource ds;
    public DBService() {
    	try {
        	InitialContext ic = new InitialContext();
            ds = (DataSource)ic.lookup("java:comp/env/jdbc/oracle_test");
        }	catch (NamingException e) {
        	e.printStackTrace();
        }
    }
    public Connection getConnection() {
    	Connection conn = null;
        try {
        	conn = ds.getConnection();
        }	catch (SQLException e) {
        	e.printStackTrace();
        }
        return conn;
    }
}

 

vo 패키지 > PhotoVO 클래스

 

package vo;

public class PhotoVO {
	int idx;
    String title, filename, pwd, ip, regidate;
    
    public int getIdx() {
		return idx;
	}
	public void setIdx(int idx) {
		this.idx = idx;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getFilename() {
		return filename;
	}
	public void setFilename(String filename) {
		this.filename = filename;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public String getIp() {
		return ip;
	}
	public void setIp(String ip) {
		this.ip = ip;
	}
	public String getRegidate() {
		return regidate;
	}
	public void setRegidate(String regidate) {
		this.regidate = regidate;
	}
}

 

PhotoDAO 클래스 생성

 

package dao;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.*;

import service.DBService;
import vo.PhotoVO;

public class PhotoDAO {
	// single-ton pattern:
    // 객체 1개만 생성하여 지속석으로 서비스하자
    static PhotoDAO single = null;
    
    public static PhotoDAO getInstance() {
    	if(single == null) {single = new PhotoDAO();}
        return single;
    }
    
    // _select 템플릿
    public List<PhotoVO> selectList() {
    	List<PhotoVO> list = new ArrayList<PhotoVO>();
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        
        // 최근 게시물 순으로 select
        String sql = "select * from photo order by idx desc";
        
        try {
        	conn = DBService.getInstance().getConnection();
            pstmt = conn.prepareStatement(sql);
            rs = pstmt.executeQuery();
            while(rs.next()) {
            	PhotoVO vo = new PhotoVO();
                vo.setIdx(rs.getInt("idx"));
                vo.setTitle(rs.getString("title"));
                vo.setFilename(rs.getString("filename"));
                vo.setPwd(rs.getInt("pwd"));
                vo.setIp(rs.getInt("ip"));
                vo.setRegidate(rs.getInt("idx"));
                
                list.add(vo);
            }
        }	catch (Exception e) {
        	e.pritnStackTrace();
        }	finally {
        	try {
            	if (rs != null) {rs.close();}
            	if (pstmt != null) {pstmt.close();}
            	if (conn != null) {conn.close();}
            }	catch (SQLException e) {
            	e.printStackTrace();
            }
        }
        return list;
    }
}

 

action 패키지 > PhotoListAction.jsp 서블릿 생성

 

package action;

import java.io.IOException;
import java.util.List;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpservletResponse;
import dao.PhotoDAO;
import vo.PhotoVO;

@WebServlet("/photo/list.do")
public class PhotoListAction extends HttpServlet {
	private static final long serialVersionUID = 1L;
    protected void service(HttpServletRequest request, HttpServletResponse response)
    	throws ServletException, IOException {
    	request.setCharacterEncoding("utf-8");
        
        // photo 목록 가져오기
        List<PhotoVO> list = PhotoDAO.getInstance().selectList();
        // request에 바인딩
        request.setAttribute("list", list);
        // forwarding 형태 - result.jsp 로 결과 값을 전송
        RequestDispatcher disp = request.getQuestDispatcher("photo_list.jsp");
        dis.forward(request, response);
	}
}

 

 

WebContent > Photo 폴더 생성 > photo_list.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/photo.css">
</head>
<body>
	<div id="main_box">
    	<h1> :: PhotoGallery :: </h1>
        <div align="center" style="margin:10px">
        	<input type="button" value="사진올리기" onclick="location.href='insert_form.do'">
        </div>
        <div id="photo_box">
        	<c:if test="${empty list}">
            	<!-- 만약 list가 비어있다면 -->
                <div align="center">등록된 사진이 없습니다.</div>
            </c:if>
            <c:forEach begin="1" end="20"> <!-- 임시로 20바퀴 돌려본 것 -->
            	<div class="photo_type">
                	<img src="">
                    <div class="title">제목</div>
                    <div align="center">
                    	<input type="button" value="삭제">
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</body>
</html>

 

 

 

WebContent > css 폴더 생성 > photo.css 파일 생성

 

@CHARSET "UTF-8";

* {margin : 0; padding : 0;}

#main_box h1 {text-align : center; text-shadow : 3px 3px 5px gray; color : white;}
#main_box {width : 800px; margin : auto;}

#photo_box {width : 710px; height : 665px; border : 1px solid blue; overflow : auto;
			box-shadow : 5px 5px 10px gray; padding 10px; margin : auto;}
.photo_type {width : 150px; height : 200px; border : 1px solid green; float : left; margin : 10x;}

/* 범위를 넘어가는 텍스트에 ... 처리 */

.title {white-space : nowrap; overflow : hidden; text-overflow : ellipsis;}
.photo_type img {display : block; margin : auto; width : 98%; height : 150px; border : 1px solid red;}

 

 

action > PhotoInsertFormAction.jsp 서블릿 파일

 

package action;

import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.HttpServlet;
import javax.servlet.HttpServletRequest;
import javax.servlet.HttpServletResponse;

@WebServlet("/photo/insert_form.do")
public class PhotoInsertFormAction extends HttpServlet {
	private static final long serialVersionUID = 1L;
    protected void service(HttpServletRequest request, HttpServletResponse response)
    	throws ServletException, IOException {
    	request.setCharacterEncoding("utf-8");
        RequestDispatcher disp = request.getRequestDispatcher("photo_insert_form.jsp");
        
        disp.forward(request, response);
	}
}

 

 

photo 파일 > photo_insert_form.jsp 파일 생성

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
	function send(f) {
    	var title = f.title.value.trim();
        var pwd = f.pwd.value.trim();
        var photo = f.photo.value;
        
        if(title == '') {
			alert("제목을 입력하세요");
            f.title.focus();
            return;
		}
        if(pwd == '') {
        	alert("비밀번호를 입력하세요");
            f.pwd.focus();
            return;
        }
        if(photo == '') {
        	alert("등록할 사진을 선택해야 합니다.");
            return;
        }
        //지정된 액션으로 전송
        f.submit();
    }
</script>
</head>
<body>
<form action="insert.do" method="POST" enctype="multipart/form-data">
	<table border="1" align="center">
		<caption> :: 사진등록 :: </caption>
        <tr>
        	<th>제목</th>
            <td><input name="title"></td>
        </tr>
        <tr>
        	<th>비밀번호</th>
            <td><input type="password" name="pwd"></td>
        </tr>
        <tr>
        	<th>업로드할 사진</th>
            <td><input type="file" name="photo"></td>
        </tr>
        <tr>
        	<td colspan="2" align="center">
            	<input type="button" value="등록하기" onclick="send(this.form);">
                <input type="button" value="목록으로 돌아가기" onclick="location.href='list.do'">
            </td>
        </tr>
    </table>
</form>
</body>
</html>