romworld

JSP 13 - 쇼핑몰 사이트 만들기(4) [상품등록 (파일업로드)] 본문

WEB/JSP

JSP 13 - 쇼핑몰 사이트 만들기(4) [상품등록 (파일업로드)]

inderrom 2023. 1. 3. 13:54
1. 초기 설정

 

 

CKEDitor 5 -download

 

https://ckeditor.com/ckeditor-5/download/?null-addons= 

 

CKEditor 5 - Download Latest Version

Download a ready-to-use CKEditor 5 Build. Install, download or serve a ready-to-use rich text editor of your choice.

ckeditor.com

 

zip file 다운!

 

압축을 푼 후

ckeditor5로 이름을 바꾼 후 WenContent 안에 셋팅해준다.

 

 


<addProduct.jsp>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!--  웹 쇼핑몰의 상품 정보를 등록하는 페이지 -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<title>상품 등록</title>
</head>
<body>

<!--  액션 스크립트 -->
<jsp:include page="menu.jsp"></jsp:include>

<div class="jumbotron">
   <!--  이 안에 내용 있다 -->
   <div class="container">
      <h1 class="display-3">상품 등록</h1>
   </div>
</div>
<!--  이 안에 내용 있다 -->
<div class="container">
   <!-- 폼 페이지 시작 -->
   <form name="newProduct" id="newProduct" action="processAddProduct.jsp" 
          class="form-horizontal" method="post">
         <!-- 가로방향(행=로우=튜플=레코드) -->
         <div class="form-group row">
               <label class="col-sm-2">상품 코드</label>
               <div class="col-sm-3">
                  <!--  name나왔네?? 무조건 VO를 봐야함 ctrl+shift+R -->
                  <input type="text" name="productId" class="form-control" required/>
               </div>
         </div>
         <div class="form-group row">
               <label class="col-sm-2">상품명</label>
               <div class="col-sm-3">
                  <input type="text" name="pname" class="form-control" required/>
               </div>
         </div>
         <div class="form-group row">
               <label class="col-sm-2">가격</label>
               <div class="col-sm-3">
                  <input type="number" name="unitPrice" class="form-control" required/>
               </div>
         </div>
         <div class="form-group row">
               <label class="col-sm-2">상세정보</label>
                 <div id="editor">
              </div>
               <div >
                  <!--  가로 : cols, 세로 : rows -->
                  <textarea name="description" cols="50" rows="2" class="form-control"></textarea>
               </div>
         </div>
           <div class="form-group row">
               <label class="col-sm-2">제조사</label>
               <div class="col-sm-3">
                  <input type="text" name="manufacturer" class="form-control"/>
               </div>
          </div>
           <div class="form-group row">
               <label class="col-sm-2">분류</label>
               <div class="col-sm-3">
                  <input type="text" name="category" class="form-control"/>
               </div>
          </div>
           <div class="form-group row">
               <label class="col-sm-2">재고 수</label>
               <div class="col-sm-3">
                  <input type="number" name="unitsInStock" class="form-control"/>
               </div>
          </div>
           <div class="form-group row">
               <label class="col-sm-2">상태</label>
               <div class="col-sm-5">
               	  <!-- input 시리즈의 미리체크? checked -->
               	  <!-- select 시리즈의 미리체크? selected -->
                  <input type="radio" id="New" name="condition" value="New" checked/>
                  <label for="New">신규 제품</label>
                  
                  <input type="radio" id="Old" name="condition" value="Old"/>
                  <label for="NeOldw">중고 제품</label>
                  
                  <input type="radio" id="Refurbished" name="condition" value="Refurbished"/>
                  <label for="Refurbished">재생 제품</label>
               </div>
          </div>
          <div class="form-group row">
          	<div class="col-sm-offset-2 col-sm-10">
          		<!--  <button type="submit> 등록</button> -->
          		<input type="submit" class="btn btn-primary" value="등록">
          		<input type="reset" class="btn btn-warning" value="초기화">
          		<input type="button" class="btn btn-success" value="목록" 
          			onclick="javascript:location.href='products.jsp'" style="float:right;">
          	</div>
          </div>	
   </form>
   <!-- 폼 페이지 끝 -->
</div>

<jsp:include page="footer.jsp"></jsp:include>

<script type="text/javascript">
CKEDITOR.replace("description")
</script>

</body>
</html>

전에 작성해두었던

 

<ProductRepository.java>

 

메소드를 추가해준다.

 


폼이 전송이 되면

<processAddProduct.jsp>

<%@page import="java.io.File"%>
<%@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.vo.ProductVO"%>
<%@page import="kr.or.ddit.dao.ProductRepository"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% //스크립틀릿

   request.setCharacterEncoding("UTF-8");
   String productId    = "";    //상품아이디(기본키=>Not Null, No Duplicate)
   String pname        = "";  //상품 명
   String unitPrice    = "";    //상품 가격
   String description  = "";  //상품 설명
   String manufacturer = "";   //제조사
   String category     = "";    //분류(휴대폰 / 태블릿 / 노트북)
   String unitsInStock = "";   //재고 수
   String condition    = "";  //신상품 or 중고품 or 재생품
   
	double price = 0d;
 	long stock = 0L;
 	
 	String fileName = ""; //이미지 파일명  
   
                      
//---------------- 파일 업로드 처리하기 시작 ----------------------
   	//1) 업로드 될 위치 설정
	String path ="D:\\A_TeachingMaterial\\03_HighJava\\workspace\\JSPBook\\WebContent\\images";
   	
   	DiskFileUpload upload = new DiskFileUpload();
   	// 최대크기
   	upload.setSizeMax(1000000);
   	// 메모리최대
   	upload.setSizeThreshold(4096);
   	// 임시저장
   	upload.setRepositoryPath(path);
   	// request 내장 객체에 들어있는 폼데이터의 구문/의미분석함
   	List items = upload.parseRequest(request);
   	// 열거형
   	Iterator params = items.iterator();
   	
   	while(params.hasNext()){
   		//object(중국집) => FileItem(짜장면)
   		FileItem item = (FileItem)params.next();
  		
   		if(item.isFormField()){ // 일반요소
   			//productId=P1238&pname=삼성폴더블폰&unitPrice=10000&description=상세내용&...
   			String name = item.getFieldName(); // productId,pname...
   			if(name.equals("productId")){
   			 	productId = item.getString("UTF-8");   //P1238 
   			}else if(name.equals("pname")){
   			 	pname = item.getString("UTF-8"); // 삼성폴더블폰
   			}else if(name.equals("unitPrice")){
   				unitPrice = item.getString("UTF-8");   //10000
	   			
   				// 1) unitPrice는 문자형 데이터 -> double(실수형) 변환
	   			   // double : 실수형(소수자리)
	   			   if(unitPrice.isEmpty()){
	   				   price = 0d;
	   			   }else{
	   				   price = Double.parseDouble(unitPrice);
	   			   }
   			   
   			}else if(name.equals("description")){
   		     	description  = item.getString("UTF-8"); // 상세내용
   			}else if(name.equals("manufacturer")){
   		    	 manufacturer = item.getString("UTF-8"); // samsung
   			}else if(name.equals("category")){
            	 category = item.getString("UTF-8");  // SmartPhone
   			}else if(name.equals("unitsInStock")){
   	        	 unitsInStock = item.getString("UTF-8"); // 1000
   	          
   	        	 // 2) unitsInStock는 문자형 데이터 -> long(정수형) 변환
		  	         if(unitsInStock.isEmpty()){
		  	      	   stock = 0L;
		  	         }else{
		  	      	   stock = Long.valueOf(unitsInStock);
		  	         }
   	         
   			}else if(name.equals("condition")){
            	 condition = item.getString("UTF-8");  // New 
   			}
             
   		}else{ // 파일객체
   			//<input type="file" name="productImage" class="form-control"/>
   			String fileFieldName = item.getFieldName();
   			//D:_Users_PC21_Pictures_P1238.jpg
   			fileName = item.getName();
   			// images.jpeg(MIME타입)
   			String contentType = item.getContentType();
   			
   			// before : D:_Users_PC21_Pictures_P1238.jpg
   			// after : P1238.jpg
   			// 롬롬이.substring(1) => 시작지점이 index 1부터 끝까지..
   			// 롬[0]롬[1]이[2]
   			fileName = fileName.substring(fileName.lastIndexOf("\\") +1);
   			long fileSize = item.getSize(); //34
   			// 설계 : 서버에 복사할 위치 및 파일명 결합연산
   			File file = new File(path +"/" + fileName);
   			// 복사 처리
   			// 원본파일. 복사(대상)
   			item.write(file);
   		}
   	}
             
//---------------- 파일 업로드 처리하기 끝 ----------------------
   

%>
<p>productId   : <%=productId%>   </p>
<p>pname       : <%=pname%></p>
<p>unitPrice   : <%=price%></p>
<p>description : <%=description%>   </p>
<p>manufacturer: <%=manufacturer%>   </p>
<p>category    : <%=category%>   </p>
<p>unitsInStock: <%=stock%>   </p>
<p>condition   : <%=condition%>   </p>

<%
	// getter메소드에 의해서 instance를 얻을 수 있음
	// 싱클톤이므로 객체가 메모리에 최초 1회 생성되고 공유되어 사용됨
	ProductRepository dao = ProductRepository.getInstance();
	
	ProductVO productVO = new ProductVO();
	productVO.setProductId(productId);
	productVO.setPname(pname);
	productVO.setUnitPrice(price);	//double
	productVO.setDescription(description);
	productVO.setManufacturer(manufacturer);
	productVO.setCategory(category);
	productVO.setUnitsInStock(stock);	//long
	productVO.setCondition(condition);
	// 상품 이미지 처리 -> P1237.jpg -> images폴더에 넣어주면 됨
	productVO.setFilename(fileName);

	dao.addProduct(productVO);
	// response내장객체의 sendRedirect메소드를 사용하여 상품 목록 페이지로 이동
	response.sendRedirect("products.jsp");
%>
<p>productVO : <%=productVO.toString() %></p>

 

Comments