<이공계기술전문연수> 14. Servlet / JSP MVC2 실습(6) 사진등록(ajax)

Eclipse package

 

(1) org.kh.photo.model.vo

package org.kh.photo.model.vo;

import java.sql.Date;

public class Photo {

	private int photoNo;
	private String photoWriter;
	private String photoContent;
	private String filename;
	private String filepath;
	private Date photoDate;
	public Photo() {
		super();
		// TODO Auto-generated constructor stub
	}
	public Photo(int photoNo, String photoWriter, String photoContent, String filename, String filepath,
			Date photoDate) {
		super();
		this.photoNo = photoNo;
		this.photoWriter = photoWriter;
		this.photoContent = photoContent;
		this.filename = filename;
		this.filepath = filepath;
		this.photoDate = photoDate;
	}
	public int getPhotoNo() {
		return photoNo;
	}
	public void setPhotoNo(int photoNo) {
		this.photoNo = photoNo;
	}
	public String getPhotoWriter() {
		return photoWriter;
	}
	public void setPhotoWriter(String photoWriter) {
		this.photoWriter = photoWriter;
	}
	public String getPhotoContent() {
		return photoContent;
	}
	public void setPhotoContent(String photoContent) {
		this.photoContent = photoContent;
	}
	public String getFilename() {
		return filename;
	}
	public void setFilename(String filename) {
		this.filename = filename;
	}
	public String getFilepath() {
		return filepath;
	}
	public void setFilepath(String filepath) {
		this.filepath = filepath;
	}
	public Date getPhotoDate() {
		return photoDate;
	}
	public void setPhotoDate(Date photoDate) {
		this.photoDate = photoDate;
	}
	
}

 

(2) org.kh.photo.model.controller

 

Servlet : PhotoListServlet (사진 전체 출력)

package org.kh.photo.controller;

import java.io.IOException;

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 org.kh.photo.model.service.PhotoService;

/**
 * Servlet implementation class PhotoListServlet
 */
@WebServlet(name = "PhotoList", urlPatterns = { "/photoList" })
public class PhotoListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public PhotoListServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		PhotoService service = new PhotoService();
		int totalCount = service.photoTotalCount(); 	// 총 사진의 갯수라 int로 리턴
		request.setAttribute("totalCount", totalCount);
		RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/views/photo/photoList.jsp");
		rd.forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

Servlet : InsertPhotoServlet (사진 등록)

package org.kh.photo.controller;

import java.io.IOException;

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 org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;
import org.kh.photo.model.service.PhotoService;
import org.kh.photo.model.vo.Photo;

import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;

/**
 * Servlet implementation class InsertPhotoservlet
 */
@WebServlet(name = "InsertPhoto", urlPatterns = { "/insertPhoto" })
public class InsertPhotoservlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public InsertPhotoservlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//1.인코딩
		request.setCharacterEncoding("utf-8");
		
		//enctype check!
		if(!ServletFileUpload.isMultipartContent(request)) {
			request.setAttribute("msg", "[enctype] 확인하세요!");
			request.setAttribute("loc", "/");
			RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/views/common/msg.jsp");
			rd.forward(request, response);
			return;
	}
	String root = getServletContext().getRealPath("/");
	String saveDirectory = root + "upload/photo";
	
	//2) 파일 최대 크기 지정
	//cos라이브러리 무료 최대 사이즈는 10MB
	int maxSize = 10*1024*1024;	
	
	MultipartRequest mRequest
	= new MultipartRequest(request, saveDirectory, maxSize, "UTF-8", new DefaultFileRenamePolicy());
	//DefaultFileRenamePolicy 파일을 등록 할 때 중복을 방지해 주는것 뒤에 숫자를 1,2,3 붙임
	
	String photoWriter = mRequest.getParameter("photoWriter");
	String photoContent = mRequest.getParameter("photoContent");
	String filename = mRequest.getOriginalFileName("filename");
	String filepath = mRequest.getFilesystemName("filename");
	
	Photo p = new Photo(0, photoWriter, photoContent, filename, filepath, null);
	PhotoService service = new PhotoService();
	int result = service.insertNotice(p);
	
	if(result > 0){
		request.setAttribute("msg", "등록 성공!");
	}else {
		request.setAttribute("msg", "등록 실패!");
	}
	request.setAttribute("loc", "/views/photo/writePhoto.jsp");
	RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/views/common/msg.jsp");
	rd.forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

Servlet : PhotoMoreServlet(사진 더보기 ajax)

package org.kh.photo.controller;

import java.io.IOException;
import java.util.ArrayList;

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 org.kh.photo.model.service.PhotoService;
import org.kh.photo.model.vo.Photo;

import com.google.gson.Gson;

/**
 * Servlet implementation class PhotoMoreServlet
 */
@WebServlet(name = "PhotoMore", urlPatterns = { "/photoMore" })
public class PhotoMoreServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public PhotoMoreServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		int start = Integer.parseInt(request.getParameter("start"));
		PhotoService service = new PhotoService();
		ArrayList<Photo> list = service.morePhoto(start);
		response.setContentType("application/json; charset=utf-8");
		new Gson().toJson(list, response.getWriter());
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

 

(3) org.kh.photo.model.service

package org.kh.photo.model.service;

import java.sql.Connection;
import java.util.ArrayList;

import org.kh.common.JDBCTemplate;

import org.kh.photo.model.dao.PhotoDao;
import org.kh.photo.model.vo.Photo;

public class PhotoService {

	public int photoTotalCount() {
		Connection conn = JDBCTemplate.getConnection();
		PhotoDao dao = new PhotoDao();
		int totalCount = dao.photoTotalCount(conn);
		
		JDBCTemplate.close(conn);
		return totalCount;

	}

	public int insertNotice(Photo p) {
		Connection conn = JDBCTemplate.getConnection();
		PhotoDao dao = new PhotoDao();
		int result = dao.insertNotice(conn,p);
		
		if(result > 0) {
			JDBCTemplate.commit(conn);
		}else {
			JDBCTemplate.rollback(conn);
		}
		JDBCTemplate.close(conn);
		return result;
	}

	public ArrayList<Photo> morePhoto(int start) {
		Connection conn = JDBCTemplate.getConnection();
		int length = 5; //한번에 가져 올 갯수!
		
		PhotoDao dao = new PhotoDao();
		ArrayList<Photo> list = dao.morePhoto(conn, start, start+length-1); //마지막 변수 5개 하려고 -1
		JDBCTemplate.close(conn);
		
		return list;
	}
}

 

(4) org.kh.photo.model.dao

package org.kh.photo.model.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;

import org.kh.common.JDBCTemplate;
import org.kh.photo.model.vo.Photo;


public class PhotoDao {

	public int photoTotalCount(Connection conn) {
		
		Statement stmt = null;
		ResultSet rset = null;
		int result = 0;
		String query = "select count(*) cnt from photo";
		try {
			stmt = conn.createStatement();
			rset = stmt.executeQuery(query);
			if(rset.next()) {
				result = rset.getInt("cnt");
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			JDBCTemplate.close(rset);
			JDBCTemplate.close(stmt);
		}
		return result;
	}

	public int insertNotice(Connection conn, Photo p) {
		PreparedStatement pstmt = null;
		int result = 0;
		String query = "insert into photo values(photo_no_seq.nextval,?,?,?,?,sysdate)";
		
		try {
			pstmt = conn.prepareStatement(query);
			pstmt.setString(1, p.getPhotoWriter());
			pstmt.setString(2, p.getPhotoContent());
			pstmt.setString(3, p.getFilename());
			pstmt.setString(4, p.getFilepath());
			result = pstmt.executeUpdate();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			JDBCTemplate.close(pstmt);
		}
		return result;
	}

	public ArrayList<Photo> morePhoto(Connection conn, int start, int end) {
		PreparedStatement pstmt = null;
		ResultSet rset = null;
		String query = "select * from (select ROWNUM as rnum, p.* from (select * from photo order by photo_no desc) p) where rnum between ? and ?";
		
		ArrayList<Photo> list = new ArrayList<Photo>();
		
		try {
			pstmt = conn.prepareStatement(query);
			pstmt.setInt(1, start);
			pstmt.setInt(2, end);
			rset = pstmt.executeQuery();
			while(rset.next()) {
				Photo p = new Photo();
				p.setFilename(rset.getString("filename"));
				p.setFilepath(rset.getString("filepath"));
				p.setPhotoContent(rset.getString("photo_Content"));
				p.setPhotoDate(rset.getDate("photo_date"));
				p.setPhotoNo(rset.getInt("photo_no"));
				p.setPhotoWriter(rset.getString("photo_writer"));
				list.add(p);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			JDBCTemplate.close(rset);
			JDBCTemplate.close(pstmt);
		}
		return list;
	}
	
	

}

 

(5)View

 

<writePhoto.jsp> 사진 등록

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%@ include file="/WEB-INF/views/common/header.jsp"%>
	<section>
	<div class="table-wrapper"
		style="text-align: center; width: 80%; margin: 0 auto;">
		<form action="/insertPhoto" method="post"
			enctype="multipart/form-data">
			<!-- 파일 올릴때 꼭 enctype! method 같이!! -->
			<table class="table table-bordered" style="text-align: center">
				<tr>
					<th colspan="2" style="font-size: 20px; font-weight: bold">사진
						게시판 완성</th>
				</tr>
				<tr>
					<th>작성자</th>
					<td><%=m.getMemberId()%> <input type="hidden"
						name="photoWriter" value="<%=m.getMemberId()%>"></td>
				</tr>
				<tr>
					<th>첨부파일</th>
					<td>
						<input type="file" name="filename" onchange="loadImg(this)">
					</td>
				</tr>
				<tr>
					<th>이미지 보기</th>
					<td>
						<div id="img-viewer">
							<img id="img-view" width="350">
						</div>
					</td>
				</tr>
				 <tr>
					<th>내용</th>
					<td><textarea name="photoContent" rows="3" cols="40"
							class="form-control"></textarea></td>
				</tr>
				<tr style="text-align: center">
					<th colspan="2">
						<button type="summit" class="btn btn-primary">등록하기</button>
					</th>
				</tr>
			</table>
		</form>
	</section>
	<script>
		function loadImg(f) {
			console.log(f.files); //인풋태그에 선택된 파일을 배열로 가져옴!
			if (f.files.length != 0 && f.files[0] != 0) {
				var reader = new FileReader();	//pc와 브라우저 연결?
				reader.readAsDataURL(f.files[0]); //매개변수로 지정한 파일의 경로		
				reader.onload=function(e){
					$("#img-view").attr('src',e.target.result);
				}
			}else{
				$("#img-view").attr('src','')
			}
		}
	</script>

</body>
</html>

 

<photoList.jsp> 사진 전체 출력

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
    	int totalCount = (Integer)request.getAttribute("totalCount"); 
    %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%@ include file="/WEB-INF/views/common/header.jsp" %>
	<section>
		<div class="photo-container" style="width:80%; margin:0 auto; text-align: center;">
			<h1>사진게시판</h1>
			<div id = "photo-wrapper" style= "padding:100px;"></div>
			<div id = "photo-btn-container">
				<button class="btn btn-outline-info" currentCount="0" totalCount="<%=totalCount %>" value="" id="more-btn">더보기</button>
				<%if(m!=null){ %>
					<button class="btn btn-outline-info" id="write-btn">글쓰기</button>
				<%}%>
			</div>	
		</div>
	
	</section>
	<script>
		$("#write-btn").click(function(){
			location.href = "/views/photo/writePhoto.jsp";
		});
		$(document).ready(function(){ //window.onload 와같은역할
			fn_more(1);	//자동실행시키고		
			$("#more-btn").click(function(){
				fn_more($(this).val()); //자기 val값 가져가라
			});
		});
		
		function fn_more(start){
			var param = {start:start};
			$.ajax({
				url:"/photoMore",
				data : param,
				type : "post",
				dataType : "json", //리턴되는 데이터 타입 명시!!!
				success : function(data){
					var html = "";
					for(var i in data){
						var p = data[i];
						html += "<div class = 'photo border border-dark' ";
						html += "style='width:800px; margin:0 auto; margin-bottom:10px;'>";
						html += "<img src='/upload/photo/"+p.filepath+"' width='100%'>";
						html += "<p class='caption'>"+p.photoContent+"</p></div>";
					}
					$("#photo-wrapper").append(html); // 만들어둔 # 에 추가
					var totalCount = $("#more-btn").attr("totalCount");
					var currentCount = $("#more-btn").attr("currentCount");
					//value, currentCount 
					$("#more-btn").val(Number(start)+5);	//Number 형변환  /기존val 값에 + 를 하겠다
					$("#more-btn").attr("currentCount",Number(currentCount)+data.length); //data.length의이유는 마지막 페이지의 변수가 5일수도있고 아닐수도있기때문에
					currentCount = $("#more-btn").attr("currentCount"); //위 전 후로 달라짐
					if(totalCount == currentCount){	//더이상 불러올 데이터가 없다
						$("#more-btn").attr("disabled",true);
						$("#more-btn").css("cursor","not-allowed");
					}
				},
				error : function(){
					console.log("ajax 처리 실패");
				}
			});
		}
	</script>











</body>
</html>