JSP

JSP 웹 프로그래밍 - 웹 쇼핑몰 만들기 02 (상품 등록, 상품 이미지 등록)

록's 2023. 3. 2. 10:30
728x90
반응형

 

웹 쇼핑몰 만들기 01 >> 밑에 링크 참

https://rogi221.tistory.com/93

 

JSP 웹 프로그래밍 - 웹 쇼핑몰 만들기 01

웹 쇼핑몰 만들기 [웹 쇼핑몰] 시작 페이지 만들기 1. 시작 페이지 작성하기 2. 부트스트랩 CSS 적용하기 Home © WebMarket 3. 한글 출력 및 페이지 모듈화 하기 한글 및 현재 접속 시각 출력

rogi221.tistory.com

 

 

6. 상품등록 페이지

상품 등록 페이지

 

 

 

 

 

 

상품 정보 등록 페이지 만들기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet"
	href = "https:maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>상품 등록</title>
</head>
<body>
	<jsp:include page="menu.jsp" />
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">상품 등록</h1>
		</div>
	</div>
	<div class="container">
		<form name="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">
					<input type="text" name="productId" 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="name" 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="unitPrice" class="form-control">
				</div>
			</div>
			<div class="form-group row">
			<label class="col-sm=2">상세 정보</label>
				<div class="col-sm-5">
					<textarea name="description" col="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="text" name="unitsInStock" class="form-control">
				</div>
			</div>
			<div class="form-group row">
			<label class="col-sm=2">상태</label>
				<div class="col-sm-5">
					<input type="radio" name="condition" value="New">신규 제품
					<input type="radio" name="condition" value="Old">중고 제품
					<input type="radio" name="condition" value="Refurbished">재생 제품
				</div>
			</div>
			<div class="form-group row">
				<div class="col-sm-offset-2 col-sm-10">
					<input type="submit" class="btn btn-primary" value="등록">
				</div>
			</div>
		</form>
	</div>
	
	<jsp:include page="footer.jsp" />
</body>
</html>

- 출력 -

 

 

 

 

상품 정보 등록 데이터 처리하기

 

[상품 데이터 접근 클래스 만들기]

  • 신규 상품 데이터를 저장하는 메소드 만들기:

 

// ProductRepository.java

package dao;

import java.util.ArrayList;

import dto.Product;

public class ProductRepository {
	
	private ArrayList<Product> listOfProducts = new ArrayList<Product>();
	private static ProductRepository instance = new ProductRepository();
	
	public static ProductRepository getInstance() {
		return instance;
	}
	
	 ... (생략) ...
     
	public void addProduct(Product product) {
		listOfProducts.add(product);
	}
	
}

 

 

 

  • 신규 상품 등록 처리 페이지 만들기
// processAddProduct.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="dto.Product" %>
<%@ page import="dao.ProductRepository" %>

<%
	request.setCharacterEncoding("UTF-8");

	String productId = request.getParameter("productId");
	String name = request.getParameter("name");
	String unitPrice = request.getParameter("unitPrice");
	String description = request.getParameter("description");
	String manufacturer = request.getParameter("manufacturer");
	String category = request.getParameter("category");
	String unitsInStock = request.getParameter("unitsInStock");
	String condition = request.getParameter("condition");
	
	Integer price;
	
	if(unitPrice.isEmpty())
		price = 0;
	else
		price = Integer.valueOf(unitPrice);
	
	long stock;
	
	if(unitsInStock.isEmpty())
		stock = 0;
	else
		stock = Long.valueOf(unitsInStock);
	
	ProductRepository dao = ProductRepository.getInstance();
	
	Product newProduct = new Product();
	newProduct.setProductId(productId);
	newProduct.setPname(name);
	newProduct.setUnitPrice(price);
	newProduct.setDescription(description);
	newProduct.setManufacturer(manufacturer);
	newProduct.setCategory(category);
	newProduct.setUnitsInStock(stock);
	newProduct.setCondition(condition);
	
	dao.addProduct(newProduct);
	
	response.sendRedirect("products.jsp");
%>

 

 

  • 상품 목록 페이지 수정하기
// products.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="dto.Product" %>
<%@ page import="dao.ProductRepository" %>	<< 추가

	... (생략) ...
	<%
		ProductRepository dao = ProductRepository.getInstance();	<< 추가
		ArrayList<Product> listOfProducts = productDAO.getAllProducts();
	%>
	<div class="container">
		<div class="row" align="center">
	
    ... (생략) ...

 

 

 

  • 상품 상세 정보 페이지 수정하기
// product.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="dto.Product" %>
<%@ page import="dao.ProductRepository" %>		<< 추가
<jsp:useBean id="productDAO" class="dao.ProductRepository" scope="session" />

	... (생략) ...
	<%
		String id = request.getParameter("id");
		ProductRepository dao = ProductRepository.getInstance();  << 추가
		Product product = dao.getProductById(id);		<< 추가 및 수정
	%>
	<div class="container">
		<div class="row">
			
	... (생략) ...

 

상품 추가해보기

 

 

 

7. 상품 이미지 등록하기

 

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

 

 

 

 

 

정적 리소스(상품 이미지 및 부트스트랩 CSS) 관리하기

 

  • 상품 클래스에 멤버 변수 추가하기
// Product.java

package dto;

import java.io.Serializable;

public class Product implements Serializable {

	... (생략)...	

	private long unitsInStock;		// 재고 수
	private String condition;		// 신상품 or 중고품 or 재생품
	private String filename;		// 이미지 파일명	<<< 추가

	...(생략)...

 

 

  • 추가된 멤버 변수의 Setter/Getter( ) 메소드 작성하기
// Product.java

package dto;

import java.io.Serializable;

public class Product implements Serializable {
	
    ... (생략) ...
    
	public Product() {
		super();
	}
	
	public String getFilename() {
		return filename;
	}

	public void setFilename(String filename) {
		this.filename = filename;
	}

 

 

  • 상품 데이터 접근 클래스 수정하기
// ProductRepository.java

package dao;

import java.util.ArrayList;

import dto.Product;

public class ProductRepository {
	... (생략) ...
	
	public ProductRepository() {
			... (생략) ...
		phone.setCondition("New");
		phone.setFilename("P1234.png");	<< 추가
		
			... (생략) ...
		notebook.setCondition("Refurbished");
		notebook.setFilename("P1235.png");	<< 추가
		
			... (생략) ...
		tablet.setCondition("Old");
		tablet.setFilename("P1236.png"); << 추가
        
        	... (생략) ...

 

 

 

  • 정적 리소스 관리 폴더 만들기
  • /WebContent/ 폴더에 resources 폴더를 생성하고, 여기에 이미지
  • 파일을 관리하는 images 폴더와 부트스트랩 파일(bootstrap.css)을 관리하는 css 폴더를 생성
  • 생성된 image 폴더에 이미지 파일명을 상품 아이디로 하여 등록
  • css 폴더에 부트스트랩 CSS 파일(bootstrap.min.css)을 다운로드하여 등록

 

 

  • 상품 목록 페이지 수정하기
// products.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
	... (생략)...
<link rel="stylesheet" href="./resources/css/bootstrap.min.css" /> << 수정 후 추가

	... 생략 ...
    
    				
    %>
    <div class="col-md-4">
        <img src="./resources/images/<%=product.getFilename() %>" style="width:100%"> << 추가
        
        ... 생략 ...

 

  • 상품 상세 정보 페이지 수정하기
// product.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
	... 생략 ...
    
<title>상품 상세 정보</title>
	
    ... 생략 ...
    
	<div class="container">
		<div class="row">
			<div class="col-md-5">
				<img src="./resources/images/<%=product.getFilename()%>" style="width:100%">
			</div>
			<div class="col-md-6">
            
            ... 생략 ...

 

  • 상품 이미지 파일의 저장 위치 만들기
    • C 드라이브에 upload 폴더를 생성하고 이 폴더에 상품 이미지 파일명을 상품 아이디로 하여 등록

 

  • 오픈 라이브러리 cos.jar 등록하기

 

 

  • 상품 목록 페이지 수정하기
// products.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

	... 생략 ...

        <div class="col-md-4">
            <img src="./resources/images/<%=product.getFilename() %>" style="width:100%"> << 수정, 추가
            <h3><%=product.getPname() %></h3>
            <p><%=product.getDescription() %>
            
	... 생략 ...

 

 

  • 상품 상세 정보 페이지 수정하기
// product.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

	... 생략 ...

	<div class="container">
		<div class="row">
			<div class="col-md-5">
				<img src="./resources/images/<%=product.getFilename()%>" style="width:100%">		<< 수정,추가
			</div>
			<div class="col-md-6">
				<h3><%=product.getPname()%></h3>
				<p><%=product.getDescription()%>
         
         ... 생략 ...

 

 

  • 상품 정보 등록 페이지 수정하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./resources/css/bootstrap.min.css" />		<< 추가
<title>상품 등록</title>
</head>
<body>
	<jsp:include page="menu.jsp" />
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">상품 등록</h1>
		</div>
	</div>
	<div class="container">
		<form name="newProduct" action="./processAddProduct.jsp" class="form-horizontal" method="post" enctype="multipart/form-data">  << 추가
			... 생략 ...
            
			<label class="col-sm-2">상태</label>
				<div class="col-sm-5">
					<input type="radio" name="condition" value="New">신규 제품
					<input type="radio" name="condition" value="Old">중고 제품
					<input type="radio" name="condition" value="Refurbished">재생 제품
				</div>
			</div>
			<div class="form-group row">
            <label class="col-sm-2">이미지</label>
	            <div class="col-sm-5">
	               <input type="file" name="productImage" class="form-control">
	            </div>
         	</div>
	
    ... 생략 ...

 

 

 

  • 상품 등록 처리 페이지 수정하기
// processAddProduct.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.oreilly.servlet.*"%>				<< 추가
<%@ page import="com.oreilly.servlet.multipart.*"%>		<< 추가
<%@ page import="java.util.*" %>
<%@ page import="dto.Product" %>
<%@ page import="dao.ProductRepository" %>

<%
	request.setCharacterEncoding("UTF-8");

------ 추가
	String filename = "";
	String realFolder = "C:\\Users\\codepc\\JSP-workspace\\WebMarket\\src\\main\\webapp\\resources\\images";
	int maxSize = 5 * 1024 * 1024;
	String encType = "utf-8";
	
	MultipartRequest multi = new MultipartRequest(request, realFolder, maxSize, encType, new DefaultFileRenamePolicy());
	

	String productId = request.getParameter("productId");
	String name = request.getParameter("name");
	String unitPrice = request.getParameter("unitPrice");
	String description = request.getParameter("description");
	String manufacturer = request.getParameter("manufacturer");
	String category = request.getParameter("category");
	String unitsInStock = request.getParameter("unitsInStock");
	String condition = request.getParameter("condition");
	----- 추가
    
	Integer price;
	
	if(unitPrice.isEmpty())
		price = 0;
        
	 ... 생략 ...
     
	else
		stock = Long.valueOf(unitsInStock);
	
	Enumeration files = multi.getFileNames();				<< 추가
	String fname = (String) files.nextElement();			<< 추가
	String fileName = multi.getFilesystemName(fname);		<< 추가
	
	ProductRepository dao = ProductRepository.getInstance();
	


	newProduct.setUnitsInStock(stock);
	newProduct.setCondition(condition);
	newProduct.setFilename(fileName);		<< 추가
	
	dao.addProduct(newProduct);
	
	response.sendRedirect("products.jsp");
%>

 

 

 

다음 

웹 쇼핑몰 만들기 03 >> https://rogi221.tistory.com/105

728x90
반응형

'JSP' 카테고리의 다른 글

JSP 웹 프로그래밍 - 유효성 검사 01  (0) 2023.03.03
JSP 웹 프로그래밍 - 파일 업로드  (0) 2023.03.02
JSP 웹 프로그래밍 - 폼 태그 02  (0) 2023.02.28
JSP 웹 프로그래밍 - 폼 태그 01  (0) 2023.02.28
JSP 웹 프로그래밍 - 내장 객체 02  (0) 2023.02.28

'JSP'의 다른글

  • 현재글JSP 웹 프로그래밍 - 웹 쇼핑몰 만들기 02 (상품 등록, 상품 이미지 등록)

관련글

댓글

티스토리툴바