[JSP] servlet 활용 _ 갤러리만들기

JSP

[JSP] servlet 활용 _ 갤러리만들기

(งᐛ)ว 2023. 11. 2. 01:49

728x90

필요한 파일을 먼저 세팅하자

갤러리정보를 데이터베이스에 테이블 추가했다고 가정함 (테이블명 : PHOTO) 추가방법은 이전글 JDBC_1 참고

DBService.java파일은 그대로 사용가능 (캡쳐생략)

VO / DAO (앞으로는 DAO파일 호출이 서블렛에서 이루어짐)

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 : 0 auto;}

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

.photo_type img{
	display : block;
	margin: auto;
	width : 98%;
	height : 150px;	
}

photo_list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!-- 코어 라이브러리 -->
    
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!-- 외부 스타일시트 참조 -->
		<link rel = "stylesheet" href="css/photo.css">
		
		<script src="js/httpRequest.js"></script>
		<script type="text/javascript">
			function del(f){
				var idx = f.idx.value;
				var pwd = f.pwd.value; //원본비밀번호
				var pwd2 = f.pwd2.value; //우리가 입력한 비밀번호
				
				if(pwd != pwd2){
					alert("비밀번호가 일치하지 않습니다.");
					return;
				}
				
				if(!confirm("삭제하시겠습니까?")){
					return;
				}
				
				//ajax사용해보자 
				var url = "photo_del.do";
				var param = "idx="+idx+"&filename="+f.filename.value;
				
				sendRequest(url,param,finRes,"POST"); //finRes : 콜백함수
			}			
			
			function finRes(){
				if(xhr.readyState == 4 && xhr.status == 200){
					
					//서블릿으로부터 도착한 데이터 읽어오기
					var data = xhr.responseText;
					
					//넘겨받은 data는 ""로 묶인 문자열로 인식하기 때문에 실제 json데이터로 변환해야함
					var json = eval(data); //eval함수 : 문자열안에 수식이 있으면 실제로 실행시켜줌
					
					if(json[0].param=='yes'){
						alert("삭제성공");
					}else{
						alert("삭제실패");
					}
					
					location.href="list.do";
				}	
			}
			
			
		</script>
	</head>
	<body>
		<div id="main_box">
			<h1>:::PhotoGallery:::</h1>
			<div align="center" style="margin:10px;">
				<input type = "button" value = "사진등록" onclick="location.href='insert_form.jsp'">
			</div>
		
			<div id = "photo_box">
				<!-- 맨 처음엔 리스트에 아무것도 없으므로 실행해도 아무것도 뜨지 않음 -->
				<c:forEach var="vo" items="${list}">
					
					<div class = "photo_type">
						<img src="upload/${vo.filename}">
						<div class = "title">${vo.title}</div>
						
						<form>
							<!-- 원본 일련번호 -->
							<input type="hidden" name="idx" value="${vo.idx}">
							<input type="hidden" name="pwd" value="${vo.pwd}">
							<input type="hidden" name="filename" value="${vo.filename}">
							<div align = "center">
								<input type="password" name="pwd2" size="5">
								<input type = "button" value = "삭제" onclick="del(this.form)">
							</div>
						</form>
						
					</div>
					
				</c:forEach>
			</div>
		
		</div>
	</body>
</html>

PhotoListAction.java

URL mappings 수정명 : /list.do

package action;

import java.io.IOException;

/**
 * Servlet implementation class PhotoListAction
 */
@WebServlet("/list.do")
public class PhotoListAction extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//DAO 호출하기 
		List<PhotoVO> list = PhotoDAO.getInstance().selectList();
	
		//출력하려면 서블렛 객체 4가지 중 request영역에 바인딩을 해주자 
		request.setAttribute("list", list);
		
		//request영역에 바인딩된 데이터를 어떤 jsp에서 사용할 것인지 포워딩하자 
		RequestDispatcher disp = request.getRequestDispatcher("photo_list.jsp");
		disp.forward(request, response);
	
	}

}

insert_form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			function send(f){
				var title = f.title.value;
				var pwd = f.pwd.value;
				var photo = f.photo.value;
				
				if(title==""){
					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 name = "pwd" type="password"></td>
				</tr>
				<tr>
					<th>등록할사진</th>
					<td><input name = "photo" type="file"></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'"> <!-- db에서 조회한내용을 보여줘야하므로 list.do로 돌아간다 -->
				</tr>
			</table>
		</form>
	</body>
</html>

PhotoInsertAction.java

URL mappings 수정명 : /insert.do

package action;

import java.io.File;

/**
 * Servlet implementation class PhotoInsertAction
 */
@WebServlet("/insert.do")
public class PhotoInsertAction extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//insert.do?title=aaa&pwd=1111&photo=%^%^%^
		
		String web_path = "/upload";
		ServletContext application = request.getServletContext();
		String path = application.getRealPath(web_path);
		System.out.println(path);
		
		int max_size = 1024*1024*100;
		MultipartRequest mr = new MultipartRequest(request, path, max_size, "utf-8", new DefaultFileRenamePolicy()); //절대경로에 파일 업로드까지 됨 
		
		
		String filename = "";
		File f = mr.getFile("photo");
		if(f!=null) {
			filename=f.getName();
		}
		
		String title= mr.getParameter("title");
		String pwd = mr.getParameter("pwd");
		String id = request.getRemoteAddr();
		
		PhotoVO vo = new PhotoVO();
		vo.setTitle(title);
		vo.setPwd(pwd);
		vo.setFilename(filename);
		vo.setIp(id);
		
		int res = PhotoDAO.getInstance().insert(vo);
		
		if(res>=1) {
			response.sendRedirect("list.do");
		}
	}


}

DAO

PhotoDelAction.java

URL mappings 수정명 : /photo_del.do

package action;

import java.io.File;

/**
 * Servlet implementation class PhotoDelAction
 */
@WebServlet("/photo_del.do")
public class PhotoDelAction extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// Photo_del.do?idx=3&filename=aaaa
		
		request.setCharacterEncoding("UTF-8"); //POST 방식으로 넘길때 데이터깨짐방지 
		
		int idx= Integer.parseInt(request.getParameter("idx"));
		String filename= request.getParameter("filename"); //절대경로의 파일도 삭제해야하므로 필요
		
		String web_path = "/upload";
		ServletContext app = request.getServletContext();
		String path = app.getRealPath(web_path);
		
		System.out.println(path);
		
		int res = PhotoDAO.getInstance().delete(idx);
	
		
		if(res>0) {
			File f= new File(path,filename); //파일클래스 객체가 경로로 접근하여 파일이름을 찾는다
			if(f.exists()){
				f.delete(); //path경로에 파일 제거 
			}
		}
		
		String param="no";
		if(res>0) {
			param="yes";
		}
		
		//결과값은 param을 json구조로 포장 
		String resultStr = String.format("[{'param':'%s'}]",param); //yes or no
		
		//resultStr값을 가지고 콜백 메서드로 복귀
		response.getWriter().print(resultStr);
	}

}

DAO

결과

728x90

'JSP' 카테고리의 다른 글

[JSP] 쿠키와 세션 (0)	2023.11.04
[JSP] servlet 활용 _ 사용자목록만들기 (0)	2023.11.03
[JSP] servlet 활용 _ 파일업로드 (0)	2023.11.02
[JSP] JSON (0)	2023.11.01
[JSP] Ajax (0)	2023.11.01

현재글[JSP] servlet 활용 _ 갤러리만들기

⋆⁺₊⋆ ☾ ⋆⁺₊⋆

[JSP] servlet 활용 _ 갤러리만들기

'JSP' 카테고리의 다른 글

'JSP'의 다른글

티스토리툴바

[JSP] servlet 활용 _ 갤러리만들기

'JSP' 카테고리의 다른 글

'JSP'의 다른글

관련글

티스토리툴바