코딩항해기

[JSP] DB에서 이미지 파일 경로 받아서 화면에 띄우기 본문

JSP

[JSP] DB에서 이미지 파일 경로 받아서 화면에 띄우기

miniBcake 2024. 8. 27. 14:37

 

 

 

예를 들어 마이페이지에서 특정 member의 프로필 이미지를 출력하는 기능을 구현하려고 한다.

하지만 DB에 바로 이미지 파일을 저장할 수 없다는 점에서 해당 기능을 기존 id, 이름 출력처럼 진행하기 어려울 것으로 보인다. 그럼 어떻게 해야할지 MVC 대로 정리해보자.

 

M

먼저 Model 파트다.

Model파트(이하 M)에서는 DB에 이미지 파일을 저장할 수 없기 때문에 서버에 저장된 이미지 파일의 경로를 DB에 저장한다. 지금은 이미지 저장이 아니라 출력이므로, 이 저장되어있는 경로를 원하는 조건에 맞춰 Controller(이하 C)에게 반환한다.

 

C

Controller는 마이페이지로 이동하는 요청이 오면, 페이지를 로드할 때 프로필 이미지가 뜰 수 있도록  마이페이지 Action class를 만든다. M로부터 반환받은 데이터를 요청에 담아 포워드 방식으로 mypage.jsp파일로 이동할 수 있도록 한다.

(요청에 담는 데이터가 있으므로 리다이렉트가 아니라 포워드 방식으로 해야한다.)

 

V

View(이하 V) 파트에서는 C로부터 전달받은 데이터를 이미지 태그의 경로에 작성한다. 이 때 DB에는 고정되지 않은 경로만 있으므로, 포함되어있지 않은 경로는 하드코딩으로 작성해야한다.

예를 들어 DB에 파일명과 확장자만 있다면, 하드코딩으로 해당 폴더까지 가는 경로를 작성해야한다.

 

실제 작업에서는 MVC 작업이 병렬적으로 이루어지므로 데이터가 올 것이라고 감안하여 코드 작업을 진행해야한다.

 

 

M예시

	public MemberDTO selectOne(MemberDTO memberDTO){
		MemberDTO data=null;
		System.out.println("selectOne 시작");
		Connection conn=JDBCUtil.connect();//DB연결
		PreparedStatement pstmt=null;
		try {
			if(memberDTO.getCondition().equals("CHECKMID")) {
				System.out.println("selectOne condition : CHECKMID");
				//condition값이 CHECKMID로 넘어왔을 때
				pstmt=conn.prepareStatement(SELECTONE_CHECKMID);//작성한 쿼리 세팅
				pstmt.setString(1, memberDTO.getMid());//id값 전달
				ResultSet rs=pstmt.executeQuery();
				if(rs.next()) {
					data=new MemberDTO();
					data.setMid(rs.getString("MID"));			//id값
					data.setName(rs.getString("NAME"));			//이름
					data.setImagepath(rs.getString("IMAGEPATH"));//이미지 경로
					System.out.println("selectOne condition : CHECKMID 데이터 있음");
				}
				System.out.println("end");
			}
			else {
				System.out.println("condition error");
				//일치하는 컨디션 값이 없을 경우, 컨디션 값 확인
			}
		} catch (SQLException e) {
			System.out.println("SQL문 실패");
		}
		JDBCUtil.disconnect(pstmt,conn);//연결해제
		
		return data;
	}

 

 

C Action 예시

	@Override
	public ActionForward execute(HttpServletRequest request, HttpServletResponse response) {
		MemberDAO memberDAO=new MemberDAO();
		MemberDTO memberDTO=new MemberDTO();
		memberDTO.setCondition("CHECKMID"); //condition값 설정
		memberDTO.setMid("teemo"); // 테스트용하드코딩
		memberDTO = memberDAO.selectOne(memberDTO);//M으로부터 데이터 받아옴
		request.setAttribute("data", memberDTO); //반환된 데이터 data K로 전달
		
		ActionForward forward = new ActionForward();
		forward.setPath("mypage.jsp");//이동페이지
		forward.setRedirect(false);//forward
		return forward;
	}

 

 

V 예시

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마이페이지</title>
</head>
<body>

<img alt="${data.name}님의 프로필 이미지" src="images/${data.imagepath}">
<ul>
	<li>아이디 >> ${data.mid}</li>
	<li>이름 >> ${data.name}</li>
</ul>

<hr>

<a href="main.do">메인으로 이동</a>

</body>
</html>