JSP 강의 Day04

주세환·2023년 3월 17일

JSP

목록 보기

4/16

Seller

이미지 1장 등록페이지

webapp 안에 resources 폴더를 만들고 그 안에 css, images, js 폴더를 만든다. 파일탐색기에서 images 폴더에 사진을 넣는다.

	<body>	
		
		<img src="{pageContext.request.contextPath}/resources/images/pepe.png"
		 style="width:80px; height:60px" />

itemselectlist1.jsp 에 위 코드를 입력한다 /images까지는 폴더 위치, 뒤에 pepe.jpg는 사진파일명이다.

사진넣은 결과 맨 위에 업로드한 사진이 업로드된다.

@WebServlet(urlPatterns = "/item/image")

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		long no = Long.parseLong(request.getParameter("no"));
		//no를 전달하여 mapper에서 ItemImage정보 1개 가져옴.
		
	}

ItemImageServlet을 생성한다. (doPost는 사용불가)

	@Select({
		" SELECT i.* FROM itemimage i WHERE NO = #{no} "
	})
	public ItemImage selectItemImageOne(@Param("no") long no); //이미지번호

ItemImageMapper에 코드를 추가한다.

// jsp에서 scr에 리소스의 이미지의 위치를 설정하는 용도로 사용
// <img src="/item/image?no=4" stu;e="width:60px; height:60px" />
//			화면에 출력하기 위한 용도

@WebServlet(urlPatterns = "/item/image")

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		ItemImageMapper mapper = MybatisContext.getSqlSession().getMapper(ItemImageMapper.class);
		
		long no = Long.parseLong(request.getParameter("no"));
		//no를 전달하여 mapper에서 ItemImage정보 1개 가져옴.
		ItemImage obj = mapper.selectItemImageOne(no);
		
		response.setContentType(obj.getFiletype()); // 이건 이미지다. html 아니다.
		response.setStatus(200); // 200은 정상적인 처리결과다.
		response.getOutputStream().write(obj.getFiledata()); // 이게 실제 정보다.
		
	}
}

ItemImageServlet 의 goGet에 조금 더 추가한다.

http://localhost:8080/web01/item/image?no='n' 에 접속하면 itemimage 테이블의 번호 n번의 사진이 뜨게 된다.
n자리에 1을 넣으니 1번에 들어간 사진이 보인다.

이미지 1개 조회

<c:forEach var="obj" items="${list}">
			${obj.no},${obj.name}, ${obj.content},
			${obj.price}, ${obj.quantity}, ${obj.regdate}
			<button>물품1개수정</button>
			<button>물품1개삭제</button>			
			<a href="insertimageone.do?itemno=${obj.no}"><button>이미지1개등록</button></a>
			<a href="selectimagelist.do?itemno=${obj.no}"><button>등록한이미지보기</button></a>
			<br />
		</c:forEach>

itemselectlist.jsp에서 위 코드처럼 수정하게 되면

등록한 이미지 보기 버튼이 추가된다.
이 버튼을 누르면,

이렇게 404 에러가 뜬다. selectimagelist.do가 없기 때문이다.

@WebServlet(urlPatterns = "/seller/selectimagelist.do")

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		ItemImageMapper mapper = MybatisContext.getSqlSession().getMapper(ItemImageMapper.class);
		long itemno = Long.parseLong( request.getParameter("itemno"));
				
		List<Long> no = mapper.selectItemImageNo(itemno);
		
		request.setAttribute("no", no); // no는 배열
		request.getRequestDispatcher("/WEB-INF/itemimage/select1.jsp").forward(request, response);
		
	}
	}

selectimagelist.do 를 연결할 ItemImageSelectServlet을 만들고 위처럼 수정하자

	@Select({
		" SELECT i.NO FROM itemimage i WHERE ITEMNO = #{itemno}  "
	})
	public List<Long> selectItemImageNo (@Param("itemno") long itemno);

Mapper도 추가하자

<%@ 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>물품의 이미지</title>
</head>
<body>
	<c:forEach var="tmp" items="${no}">
		<img src="${pageContext.request.contextPath}/item/image?no=${tmp}"
			 style="width:100px; height:100px">
		<hr />
	</c:forEach>
</body>
</html>

select1.jsp도 생성하여 위처럼 만들자.

5. 우는 페페의 등록한이미지보기 버튼을 누르면

등록한 이미지가 나오게 된다.

<body>
	<c:forEach var="tmp" items="${no}">
		이미지번호 : ${tmp}
		<img src="${pageContext.request.contextPath}/item/image?no=${tmp}"
			 style="width:100px; height:100px">
			 <button>삭제</button>
			 <button>수정</button>
		<hr />
	</c:forEach>
	
	<form action="insertimageone.do" method="post" enctype="multipart/form-data">
			물품번호 : <input type="text" value="${param.itemno}" name="itemno" readonly /><br />
			이미지 : <input type="file" name="file"/><br />
			<input type="submit" value="이미지등록"/>
		</form>
</body>

select1.jsp 에 위 코드를 추가하게 되면

위 화면처럼 기능이 추가된다. 삭제와 수정 버튼은 미리 만들어뒀다.
여기서 이미지 등록을 하면 selectlist.do로 가게 된다

<body>
	<c:forEach var="tmp" items="${no}">
		이미지번호 : ${tmp}
		<img src="${pageContext.request.contextPath}/item/image?no=${tmp}"
			 style="width:100px; height:100px">
			 <button>삭제</button>
			 <button>수정</button>
		<hr />
	</c:forEach>
	
	<form action="insertimageone.do" method="post" enctype="multipart/form-data">
		<input type="text" name="backurl"
		 value="${pageContext.request.contextPath}/seller/selectimagelist.do?itemno=${param.itemno}">
			물품번호 : <input type="text" value="${param.itemno}" name="itemno" readonly /><br />
			이미지 : <input type="file" name="file"/><br />
			<input type="submit" value="이미지등록"/>
		</form>
</body>

select1.jsp를 위처럼 수정하고

	<body>
		<h3>${title}</h3>										
		<!-- 주소창을 바꾸고 정보는 숨겨서, 정보의 내용중에는 파일도 있음.		 파일 첨부할 때 필요함 -->
		<form action="insertimageone.do" method="post" enctype="multipart/form-data">
		<input type="text" name="backurl"
		 value="${pageContext.request.contextPath}/seller/selectimagelist.do?itemno=${param.itemno}">
			물품번호(주소창의 값을 바로 읽기) : <input type="text" value="${param.itemno}" readonly /><br />
			물품번호(2번 단계) : <input type="text" value="${itemno}" name="itemno" readonly /><br />
			이미지 : <input type="file" name="file"/><br />
			<input type="submit" value="이미지등록"/>
		</form>
	</body>

itemimageinsert1.jsp도 위처럼 수정한다.
위에 적은 backurl을 적용하기 위해

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		ItemImageMapper mapper = MybatisContext.getSqlSession().getMapper(ItemImageMapper.class);
		
		long itemno = Long.parseLong( request.getParameter("itemno") );
		Part part = request.getPart("file");
				
		ItemImage obj = new ItemImage();
		obj.setItemno(itemno); //물품번호
		obj.setFilename( part.getSubmittedFileName() ); //첨부한 파일명
		obj.setFilesize( part.getSize() ); //첨부한 파일크기
		obj.setFiletype( part.getContentType() ); //첨부한 파일의 종류, gif, jpg, png ...
		obj.setFiledata( part.getInputStream().readAllBytes() ); // 첨부한 파일 실제 데이터
		
		//mapper를 만들어서 insert를 수행하면 DB에 추가됨.
		int ret = mapper.insertItemImageOne(obj);
		
		if(ret == 1) {
			// 완료되면 이동할 페이지 정보 꺼내기
			String backurl = request.getParameter("backurl");
			// 상황에 따라서 이동하는 페이지가 달라져야 함.
			response.sendRedirect(backurl); // 성공시 물품목록으로
			
		}
		else {
			response.sendRedirect("insertimageone.do?itemno="+itemno); // 실패시 현재 페이지로
		}
	}

ItemImageInsertServlet doPost도 손을 봐준다.

파일을 선택하고 이미지등록을 누르면

리스트로 이동하지 않고 그 화면에서 사진만 추가된다.

이미지 1개 삭제 페이지

삭제는 doGet이 아닌 doPost

<body>
	<a href="selectlist.do"><button>물품목록</button></a>
	<hr />
	
	<c:forEach var="tmp" items="${no}">
		이미지번호 : ${tmp}
		<img src="${pageContext.request.contextPath}/item/image?no=${tmp}"
			 style="width:100px; height:100px">
			 <form action="deleteimageone.do" method="post" style="display:inline-block">
			 	<input type="text" name="no" value="${tmp}"/>
                <input type="text" name="itemno" value="${param.itemno}"/>
			 	<input type="submit" value="삭제"/>
			 </form>
			 
			 <button>수정</button>
		<hr />
	</c:forEach>

select1.jsp 를 위처럼 수정하고

@WebServlet(urlPatterns = {"/seller/deleteimageone.do"})
public class ItemImageDeleteServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	ItemImageMapper mapper = MybatisContext.getSqlSession().getMapper(ItemImageMapper.class);
	
    public ItemImageDeleteServlet() {
        super();       
    	}
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {		
		}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		long no = Long.parseLong( request.getParameter("no"));
		MybatisContext.getSqlSession().getMapper(ItemImageMapper.class).deleteItemImageOne(no);
		
		int ret = mapper.deleteItemImageOne(no);		
		request.setAttribute("no", ret);
		
		//ret과 관계없이 같은 위치로
		response.sendRedirect("selectimagelist.do?itemno=" + request.getParameter("itemno"));		
	}
}

ItemImageDeleteServlet을 만들고 위처럼 입력한다.

	@Delete({
		" DELETE FROM itemimage i WHERE NO = #{no} "
	})
	public int deleteItemImageOne(@Param("no") long no);

Mapper에도 추가한 뒤 실행해보자.

중간에 있는 14번 이미지 삭제 버튼을 누르면

14번 이미지가 삭제된 모습을 볼 수 있다.

물품 1개 변경 페이지

<c:forEach var="tmp" items="${no}">
		이미지번호 : ${tmp}
		<img src="${pageContext.request.contextPath}/item/image?no=${tmp}"
			 style="width:100px; height:100px">
			 <form action="deleteimageone.do" method="post" style="display:inline-block">
			 	<input type="text" name="no" value="${tmp}"/>
			 	<input type="text" name="itemno" value="${param.itemno}"/>
			 	<input type="submit" value="삭제"/>
			 </form>
			 
			 <a href="updateimageone.do?no=${tmp}&itemno=${param.itemno}"><button>수정</button></a>
		<hr />
	</c:forEach>

select1.jsp 를 위처럼 수정한다.

잘 작동한다. 이제 updateimageone.do를 만들러 가자

@WebServlet(urlPatterns = { "/seller/updateimageone.do" })
public class ItemImageInsertServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	ItemMapper mapper = MybatisContext.getSqlSession().getMapper(ItemMapper.class);

	public ItemImageInsertServlet() {
		super();
	}
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		long itemno = Long.parseLong(request.getParameter("itemno"));
		long no = Long.parseLong(request.getParameter("no"));
		
		request.setAttribute("itemno", itemno);
		request.setAttribute("no", no);
		request.getRequestDispatcher("/WEB-INF/itemimage/update1.jsp").forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	}
}

ItemImageUpdateServlet 생성

<body>
		현재이미지 :	<img src="${pageContext.request.contextPath}/item/image?no=${no}"
			 style="width:200px; height:200px"><br />
		
		<form action="updateimageone.do" method="post" enctype="multipart/form-data">
		변경이미지첨부 : 
		<input type="text" name="no" value="${no}" />
		<input type="text" name="itemno" value="${itemno}" />
		<input type="file" name="file" />
		<input type="submit" value="이미지변경" />
		</form>
		
	</body>

update1.jsp 생성

@WebServlet(urlPatterns = { "/seller/updateimageone.do" })
@MultipartConfig(
		fileSizeThreshold = 1024*1024*1, //1M
		maxFileSize = 1024*1024*10,	//10M
		maxRequestSize = 1024*1024*100 //100M
)

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		long itemno = Long.parseLong(request.getParameter("itemno"));
		long no = Long.parseLong(request.getParameter("no"));
		
		request.setAttribute("itemno", itemno);
		request.setAttribute("no", no);
		request.getRequestDispatcher("/WEB-INF/itemimage/update1.jsp").forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
			long itemno = Long.parseLong(request.getParameter("itemno"));
			long no = Long.parseLong(request.getParameter("no"));
			
			Part part = request.getPart("file");
			if(part.getSize() > 0) { // 파일이 첨부되었을때
			ItemImage obj = new ItemImage();
			obj.setNo(no);
			obj.setItemno(itemno); //물품번호
			obj.setFilename( part.getSubmittedFileName() ); //첨부한 파일명
			obj.setFilesize( part.getSize() ); //첨부한 파일크기
			obj.setFiletype( part.getContentType() ); //첨부한 파일의 종류, gif, jpg, png ...
			obj.setFiledata( part.getInputStream().readAllBytes() ); // 첨부한 파일 실제 데이터
			
			MybatisContext.getSqlSession().getMapper(ItemImageMapper.class).updateItemImageOne(obj);
			response.sendRedirect("updateimageone.do?no=" + no + "&itemno=" + itemno);
			}
	}

ItemImageUpdateServlet 생성하여 작성하고

	@Update({
		" UPDATE itemimage SET filename = #{obj.filename}, filesize = #{obj.filesize}, filetype = #{obj.filetype},", 
		" filedata = #{obj.filedata} WHERE ITEMNO = #{obj.itemno} AND NO = #{obj.no} "
	})
	public int updateItemImageOne(@Param("obj") ItemImage obj);

Mapper에도 추가하고 이제 확인해보자.

우는 페페 23번에서 다른 파일을 선택했다. 이미지 변경을 눌러보자

이렇게 엉엉 울고있다면 성공.

게시글조회 - 이미지관리

다음글 옆에 이미지관리 버튼을 만들 것이다.

<a href="boardimage.do?no=${brd.no}"><button>이미지관리</button></a>

boardselectone1.jsp 에 추가하고

시퀀스, 테이블 생성

	<head>
		<meta charset="UTF-8">
		<title>게시판이미지</title>
	</head>
	
	<body>
		<a href="selectone.do?no=${no}"><button>이전페이지</button></a>
		<hr />
		
		<form action="boardimageinsert.do" method="post" enctype="multipart/form-data">
			게시글번호 : <input type="text" name="boardno" value="${no}" /><br />
			이미지파일 : <input type="file" name="file"/><br />
			<input type="submit" value="이미지등록" />
		</form>
		<hr />
		
		<form action="boardimageinsertbatch.do" method="post" enctype="multipart/form-data">
			게시글번호 : <input type="text" name="boardno" value="${no}" /><br />
			<c:forEach  begin="1" end="3" step="1">
			이미지파일 : <input type="file" name="file"/><br />	
		</c:forEach>
		<input type="submit" value="이미지 일괄등록"/>		
		</form>
		<hr />		
			
	</body>

WEB-INF에 boardimage 폴더를 만들고 그 안에 select1.jsp를 만들어 위 코드를 추가
(아래에 있는 건 일괄등록이다.)

@WebServlet(urlPatterns = {"/board/boardimage.do"})
public class BoardImageServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	         
    public BoardImageServlet() {        
    }

	 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	long no = Long.parseLong( request.getParameter("no") );
    	request.setAttribute("no", no);
    	request.getRequestDispatcher("/WEB-INF/boardimage/select1.jsp").forward(request, response);
    }

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {			
	}
}

BoardImageServlet을 생성하여 작성한다.

여기서 이미지관리를 눌렀을 때

이렇게 이미지 등록 창이 나온다면 성공.

이미지등록을 눌러보았다.
다음 시간에 boardimageinsert.do를 만들자.