본문 바로가기
JSP 웹 프로그래밍/쇼핑몰 페이지 만들기

[웹 쇼핑몰] 상품 이미지 등록하기

앵쥬부 2024. 7. 10. 19:26

 

상품 클래스에 멤버 변수 추가하기 [product.jsp]

<%@page import="kr.or.ddit.dao.ProductRepository"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="kr.or.ddit.dao.ProductRepository"%>
<%@ page import="kr.or.ddit.vo.ProductVO"%>
<%@ page import="java.util.ArrayList"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script type="text/javascript" src="/js/jquery.min.js"></script>
<title>상품목록</title>
<script type="text/javascript">
$(function(){
	//셀렉터(선택자)
	$('#selLanguage').on('change',function(){
		let str = $(this).val();
		
		console.log(str)
		
		location.href="/product.jsp?productId=${param.productId}&language="+str;
	});
	
	
});

</script>
</head>
<body>
	<!-- ?productId=P1234&language=en -->
	<c:set var="language" value="${param.language}"/>
	<c:if test="${language==null}">
		<!-- 한국말로 기본 세팅 -->
		<c:set var="language" value="ko" />
	</c:if>
   <fmt:setLocale value="${language}"/>
   <!-- bundle패키지의 message.properties -->
   <fmt:bundle basename="bundle.message">
    <%@include file="menu.jsp" %>
   <!--   상품 목록시작       -->
   <div class="jumbotron">
      <div class="container">
         <h1 class="display-3"><fmt:message key="product_description"/></h1>
      </div>
   </div>
   	<div class="container">
   		<div class="row" style="jstify-content: space=between; display:flex;">
   			<div>
   				<select id="selLanguage">
   					<option value="ko" 
   						<c:if test="${param.language=='ko'}">selected</c:if>
   					>Korea</option>
   					<option value="en" 
   						<c:if test="${param.language=='en'}">selected</c:if>
   					>English</option>
   				</select>
   			</div>
	        <div class="text-right">
		         <a href="/product.jsp?productId=${param.productId}&language=ko">Korean</a>
		         <a href="/product.jsp?productId=${param.productId}&language=en">English</a>
	      	</div>
   		</div>
      <%
         // /product.jsp?productId=P1234 ->get방식으로 불러옴
         String productId = request.getParameter("productId");//P1234
         
      
         ProductRepository productDAO = ProductRepository.getInstance();
         ProductVO productVO = productDAO.getProductById(productId);
         out.print("productVO : " + productVO);
      %>
      <!-- java의 productVO 객체 -> JSTL productVO 변수 -->
      <c:set var="productVO" value="<%=productVO%>" />
      <div class="row">
         <div class="col-md-6" style="width:50%;"><!--  6 은 style="width:50%;"와 같다. -->
            <img alt="${productVO.pname}" title="${productVO.pname}"
                   src="/images/${productVO.filename}"
                    style="width:50%;"/>
            <h3>${productVO.pname}</h3>
            <p>${productVO.description}</p>
            <p>
               <b><fmt:message key="productId" /> : </b>
               <span class="badge badge-danger" 
                  style="font-color:red;">${productVO.productId}</span>
            </p>
            <p>
               <b><fmt:message key="manufacturer" /> : ${productVO.manufacturer}</b>
            </p>
            <p>
               <b><fmt:message key="category" /> : ${productVO.category}</b>
            </p>
            <p>
               <b><fmt:message key="unitsInStock" /> : ${productVO.unitsInStock}</b>
            </p>
            <h4>${productVO.unitPrice} <fmt:message key="won" /></h4>
            <p>
               <a href="/products.jsp" class="btn btn-secondary"><fmt:message key="product_list" />&raquo;</a>
            </p>
         </div>
      </div>
      <hr/>
   </div>
   <!--   상품 목록 끝        -->
   <%@include file="footer.jsp" %>
   </fmt:bundle>
</body>
</html>

 

상품 데이터 접근 클래스 수정하기[processAddProduct.jsp]

<%@page import="java.io.File"%>
<%@page import="java.util.UUID"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.DiskFileUpload"%>
<%@page import="kr.or.ddit.dao.ProductRepository"%>
<%@page import="kr.or.ddit.vo.ProductVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.util.Enumeration"%>
<!-- 
      요청URI : processAddProduct.jsp
      요청파라미터 : request{productId=P1237,pname=노트북 울트라,unitPrice=1200000,
               description=노트북 울트라는 좋다,manufacturer=Samsung,
               category=notebook,unitsInStock=1000,condition=New,
               productImage=파일객체}
      요청방식 : post
-->
<%
   request.setCharacterEncoding("UTF-8");

   //윈도우 경로 : 역슬러시 두 개
   String path = "D:\\A_TeachingMaterial\\jsp\\workspace\\JSPBook\\WebContent\\images";
   //commons-fileupload.jar 안에 해당 클래스가 있음
   DiskFileUpload upload = new DiskFileUpload();
   //업로드 할 파일의 최대 크기
   upload.setSizeMax(5000000); //5Mbyte
   //메모리에 저장할 최대 크기
   upload.setSizeThreshold(5*4096);//5 * 1024 * 1024 => 5Mbyte
   //업로드할 파일을 임시로 저장할 경로(폴더가 없으면 자동으로 폴더생성)
   upload.setRepositoryPath(path);
   
   /*요청파라미터 : request{productId=P1237,pname=노트북 울트라,unitPrice=1200000,
               description=노트북 울트라는 좋다,manufacturer=Samsung,
               category=notebook,unitsInStock=1000,condition=New,
               productImage=파일객체}
   */
   //parse : 구문분석(오류체크), 의미분석, 변환
   List items = upload.parseRequest(request);
   //요청 파라미터들을 Iterator(열거) 클래스로 변환
   Iterator params = items.iterator();
   
   ProductVO productVO = new ProductVO();
   //요청 파라미터가 없어질때까지 반복(1회 반복)
   while(params.hasNext()){//돌다리도 두드려본 후 돌이 있으면
      //FileItem : 1) 일반 데이터(text, radio, checkbox..) (0)
      //           2) 파일(file) (1)
      FileItem item = (FileItem)params.next();   //그 돌을 밟고 건너자
      /*요청파라미터 : request{productId=P1237,pname=노트북 울트라,unitPrice=1200000,
               description=노트북 울트라는 좋다,manufacturer=Samsung,
               category=notebook,unitsInStock=1000,condition=New,
               productImage=파일객체}
      */
      //isFormField() -> true(일반데이터(text, radio, checkbox,..))
      if(item.isFormField()){
         //{memMail=test@test.com,password=java,remember-me=on}
         String name = item.getFieldName();      //memMail, password, remember-me
         String value = item.getString("UTF-8");   //test@test.com, java, on
         out.print(name + "=" + value + "<br />");
         if(name.equals("productId")){
            productVO.setProductId(value);
         }else if(name.equals("pname")){
            productVO.setPname(value);
         }else if(name.equals("unitPrice")){
            productVO.setUnitPrice(Long.valueOf(value));
         }else if(name.equals("description")){
            productVO.setDescription(value);
         }else if(name.equals("manufacturer")){
            productVO.setManufacturer(value);
         }else if(name.equals("category")){
            productVO.setCategory(value);
         }else if(name.equals("unitsInStock")){
            productVO.setUnitsInStock(Long.valueOf(value));
         }else if(name.equals("condition")){
            productVO.setCondition(value);
         }//end if
      }else{// false(파일(input type="file"))
         //요청파라미터 : {uploadFile=파일객체} => item
         String fileFieldName = item.getFieldName();//productImage
         String fileName = item.getName();//업로드 될 파일 명. 송찬중.jpg
         //이미지파일이라면 MIME TYPE : image/jpeg
         String contentType = item.getContentType();
         long fileSize = item.getSize();   //파일의 크기
         //만약 fileName => C:\\Users\\SEM\\Pictures\\scj.jpg
         //                  -> scj.jpg
         fileName = fileName.substring(fileName.lastIndexOf("\\")+1);
         
         //파일명 중복 방지 시작 /////
         //java.util.UUID => 랜덤값 생성
         UUID uuid = UUID.randomUUID();
         //원래의 파일 이름과 구분하기 위해 _를 붙임(asdfsdfa_송찬중.jpg)
         fileName = uuid.toString() + "_" + fileName;
         //파일명 중복 방지 끝 /////
         
         productVO.setFilename(fileName);
         
         //계획. c:\\upload\\faslsdafj_scj.jpg로 복사해야 함
         File file = new File(path + "\\" + fileName);
         //복사 실행
         //파일객체.write(계획)
         item.write(file);
         
         out.print("================<br />");
         out.print("요청 파라미터 이름 : " + fileFieldName + "<br />");
         out.print("저장 파일 이름 : " + fileName + "<br />");
         out.print("파일 콘텐츠 유형 : " + contentType + "<br />");
         out.print("파일 크기 : " + fileSize + "<br />");
      }
   }//end while
   
   out.print("productVO : " + productVO);
   
   //싱글톤 객체로 생성
   ProductRepository dao = ProductRepository.getInstance();
   //새로운 상품 등록
   dao.addProduct(productVO);
   
   //목록으로 이동(redirect : url)
   response.sendRedirect("/products.jsp");
%>

 

정적 리소스 관리 폴더 만들기

/WebContent/ 폴더에 여기에 이미지 파일을 관리하는 images 폴더와 부트스트랩 파일(bootstrap.css)을 관리하는 css 폴더를 생성, 생성된 image 폴더에 이미지 파일명을 상품 아이디로 하여 등록

 

상품 목록 페이지 수정하기 [products.jsp]

<%@ page import="kr.or.ddit.dao.ProductRepository"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="kr.or.ddit.dao.ProductRepository"%>
<%@ page import="kr.or.ddit.vo.ProductVO"%>
<%@ page import="java.util.ArrayList"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<title>상품목록</title>
</head>
<body>
   <%//스크립틀릿 
      //클래스             객체         클래스            메소드
      ProductRepository prodcutDAO = ProductRepository.getInstance();//호출 => 클래스의 메소드를 호출해서 객체를 가져오기
      // 객체 타입            변수            객체         메소드 
      ArrayList<ProductVO> listofProducts = prodcutDAO.getAllProducts();//호출 => 객체를 준비하고 객체로 부터 메소드를호출해서 변수레 대입 
      
      //out.print("listofProducts : " + listofProducts );
   %>
   
   <!--자바에 있는걸 JSP로 가져오기  -->
   <!-- JSPL      변수            값       변수       -->
   <c:set var="listofProducts" value="<%=listofProducts%>" />
<%--    <p>${listofProducts}</p> 상단에 보이는  글씨--%>
   
 <!--디렉티브 태그    속성     속성의 값 -->
    <%@include file="menu.jsp" %>
   <!--   상품 목록시작       -->
   <div class="jumbotron">
      <div class="container">
         <h1 class="display-3">상품 목록</h1>
      </div>
   </div>
   <div clas="container">
      <div class="row" align="center">
         <!-- 상품 반복부분 시작
            listofProducts : ArrayList<ProductVO> listofProducts
          -->
          <!-- 객체 타입의 변수 listofProducts에 저장된 상품 목록 개수만큼 실행하는 JSTL 반복문 -->
         <c:forEach var="productVO" items="${listofProducts}" varStatus="stat" >
            <div class="col-md-4">
                  <!-- EL 표현문 변수를가져와서 출력하는 부분  -->
               <img alt="${productVO.pname}" title="${productVO.pname}" 
                  src="/images/${productVO.filename}"
                  style="width:100%;"/>   
               <h3>${productVO.pname}</h3>
               <p>${productVO.description}</p>
               <p>${productVO.unitPrice} </p>
               <p>
                  <a href="/product.jsp?productId=${productVO.productId}"
                     class="btn btn-secondary" role="button">상세 정보 &raquo;</a>
               </p>
            </div>
         </c:forEach>
         <!-- 상품 반복부분  끝 -->
      </div>
      <hr />
      <div class="form-group row">
         <div class="col-sm-offset-2 col-sm-10">
            <a href="/addProduct.jsp" class="btn btn-primary">등록</a> 
         </div>
      </div>
   </div>
   <!--   상품 목록 끝        -->
   <%@include file="footer.jsp" %>
</body>
</html>

 

 

'JSP 웹 프로그래밍 > 쇼핑몰 페이지 만들기' 카테고리의 다른 글

[웹 쇼핑몰] 예외 처리 페이지 만들기  (0) 2024.07.12
[웹 쇼핑몰] 보안처리하기  (0) 2024.07.11
[웹 쇼핑몰] 상품 등록 페이지의 다국어 처리하기  (0) 2024.07.10
[웹 쇼핑몰] 상품 등록 데이터의 유효성 검사하기  (0) 2024.07.09
[웹 쇼핑몰] 상품 이미지 등록하기  (0) 2024.07.08

'JSP 웹 프로그래밍/쇼핑몰 페이지 만들기' Related Articles

티스토리툴바