JSP 상품페이지 만들기(2022.12.27)

1. ProductVO 생성

package kr.or.ddit.vo;


//자바빈 클래스 1.멤버변수 2.생성자 3.getter/setter 
//ProductVO <- PRODUCT테이블
public class ProductVO {
	//멤버변수 <- PRODUCT 테이블의 필드 (컬럼=열=어트리뷰트=속성)
	//String -> VARCHAR2(4000) : 순수한글 1333자
	//productId => PRODUCT_ID
	private String productId; //상품아이디(기본키 => NOT NULL, No Duplicate[중복이없음,유일함])
	//pname= PNAME
	private String pname;  //상품명
	//unitPrice => NUMBER UNIT_PRICE
	private double unitPrice;  //상품가격
	private String description; //상품설명
	private String manufacturer; //제조사
	private String category; //분류(휴대폰/태블릿/노트북)
	private long unitsInStock; //재고수
	private String condition; //신상품 or 중고품 or 재생품
	private String filename; //이미지파일명
	private int quantity; //상품을 장바구니에 담은 개수
	
	//기본생성자(생략가능)
	public ProductVO() {}

	//생성자 ==> 클래스를 인스턴스화하여 객체를 생성 시 멤버변수에 값을 초기화
	//상품 아이디, 상품명, 가격을 매개변수(파라미터로 받는 변수)로 하는 생성자를  추가작성함.
	public ProductVO(String productId, String pname, double unitPrice) {
		this.productId = productId;
		this.pname = pname;
		this.unitPrice = unitPrice;
	}
	
	
	//getter/setter 메서드
	public String getProductId() {
		return productId;
	}

	public void setProductId(String productId) {
		this.productId = productId;
	}

	public String getPname() {
		return pname;
	}

	public void setPname(String pname) {
		this.pname = pname;
	}

	public double getUnitPrice() {
		return unitPrice;
	}

	public void setUnitPrice(double unitPrice) {
		this.unitPrice = unitPrice;
	}

	public String getDescription() {
		return description;
	}

	public void setDescription(String description) {
		this.description = description;
	}

	public String getManufacturer() {
		return manufacturer;
	}

	public void setManufacturer(String manufacturer) {
		this.manufacturer = manufacturer;
	}

	public String getCategory() {
		return category;
	}

	public void setCategory(String category) {
		this.category = category;
	}

	public long getUnitsInStock() {
		return unitsInStock;
	}

	public void setUnitsInStock(long unitsInStock) {
		this.unitsInStock = unitsInStock;
	}

	public String getCondition() {
		return condition;
	}

	public void setCondition(String condition) {
		this.condition = condition;
	}

	public String getFilename() {
		return filename;
	}

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

	public int getQuantity() {
		return quantity;
	}

	public void setQuantity(int quantity) {
		this.quantity = quantity;
	}

	@Override
	public String toString() {
		return "ProductVO [productId=" + productId + ", pname=" + pname + ", unitPrice=" + unitPrice + ", description="
				+ description + ", manufacturer=" + manufacturer + ", category=" + category + ", unitsInStock="
				+ unitsInStock + ", condition=" + condition + ", filename=" + filename + ", quantity=" + quantity + "]";
	}
	
	
}

 

 

2. 이번에는 DB에 연결하지 않고, 저장소(ProductRepository)를 따로 만들어 상품에 들어갈 값들을 초기화해줌.

package kr.or.ddit.dao;

import java.util.ArrayList;
import java.util.List;

import kr.or.ddit.vo.ProductVO;

public class ProductRepository {
	//상품의 목록을 저장할 리스트 작성(전역변수)
	private List<ProductVO> listOfProducts = 
			new ArrayList<ProductVO>();
	
	//싱글톤 객체 : 메모리에 딱 한 번 생성(공유해서 사용하기 좋은)
	private static ProductRepository instance = new ProductRepository();
	public static ProductRepository getInstance() {
		return instance;
	}
	
	//기본생성자. 3개의 상품정보를 설정
	//그런후 ProductVO 객체 타입의 List인 listOfProducts 변수에 저장
	public  ProductRepository() {
		//휴대폰 등록시작 ----------
		ProductVO phone = new ProductVO("P1234", "iPhone 6s", 800000);
		
		//상품설명
		phone.setDescription("4.7-inch,1334x750 Retina HD display"
							+"8-megapixel iSight Camera");
		//분류
		phone.setCategory("Smart Phone");
		//제조사
		phone.setManufacturer("Apple");
		//재고 수
		phone.setUnitsInStock(1000);
		//신상품 OR 중고품 OR 재생품
		phone.setCondition("New");
		//이미지 파일명
		phone.setFilename("p1234.jpg");
		//휴대폰 등록 끝------------
		
		//노트북 등록시작 ----------
		ProductVO notebook = new ProductVO("P1235", "LG PC 그램", 1500000);
		//상품 설명
        notebook.setDescription("13.3-inch, IPS LED display, 5rd Generation"
            + "Intel Core processors");
        //분류
        notebook.setCategory("Notebook");
       //제조사
        notebook.setManufacturer("LG");
        //재고 수
        notebook.setUnitsInStock(1000);
      //신상품 or 중고품 or 재생품
        notebook.setCondition("Refurbished");
         //이미지 파일명
        notebook.setFilename("p1235.jpg");
	   //노트북 등록 끝------------
		
		//태블릿 등록시작 ----------
		ProductVO tablet = new ProductVO("P1236", "Galaxy Tab S", 900000);
		//상품 설명
	    tablet.setDescription("212.8*125.6*6.6m, Super AMOLED display "
	            + "Octa-Core processor");
	    //분류
	    tablet.setCategory("Tablet");
	    //제조사
	    phone.setManufacturer("Samsung");
	    //재고 수
	    tablet.setUnitsInStock(1000);
	    //신상품 or 중고품 or 재생품
	    tablet.setCondition("Old");
	    //이미지 파일명
	    tablet.setFilename("p1236.jpg");
		//태블릿 등록 끝------------
	    //ProductVO 객체 타입의 List 인 listOfProduct에 저장하자 
	    
	    listOfProducts.add(phone);
	    listOfProducts.add(notebook);
	    listOfProducts.add(tablet);
	}
	
	//ProductVO 객체 타입의 변수 listOfProduct에 저장된 모든 상품 목록을 가져오자
	//상품목록
	public List<ProductVO> getAllProducts(){
		return listOfProducts;
	}
}

 

 

3.Product.jsp 페이지 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page import="kr.or.ddit.dao.ProductRepository"%>
<%@page import="kr.or.ddit.vo.ProductVO"%>
<%@page import="java.util.List"%>
<% //스크립틀릿
   //ProductRepository() 생성자
   //기본생성자. 3개의 상품정보를 가져옴
   //그런 후 ProductVO객체 타입의 List인 listOfProducts 변수에 저장
   ProductRepository productDAO = ProductRepository.getInstance();
%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<title>상품목록</title>
</head>
<body>
	
	<!--  include 액션 태그 -->
	<jsp:include page="menu.jsp"></jsp:include>
	
	<!--  상품 목록 시작 -->
	<div class="jumbotron">
		<!--  conainer : 이안에 내용있다. -->
		<div class="container">
			<h1 class="display-3">상품목록</h1>
		
		</div>
	</div>
	<!--  상품 목록 끝 -->
	
	<% //스크립틀릿
		List<ProductVO> listOfProducts = productDAO.getAllProducts();
	%>
	
	<!-- 표현문 -->
	<c:set var="listOfProducts" value="<%= listOfProducts %>"/>
	<!--  container : 내안에 내용있다.-->
	<div class="container">
		<!-- 행 별 처리 -->
		<div class="row" align="center">
		<c:forEach var="ProductVO" items="${listOfProducts}">
			<div class="col-md-4">
				<img src="/images/${ProductVO.filename}" style="width:100%;" alt="${ProductVO.pname}" title="${ProductVO.pname}"/>
				<h3>${ProductVO.pname}</h3>
				<p>${ProductVO.description}</p>
				<p>${ProductVO.unitPrice}</p>
				<p><a href="product.jsp?id=${ProductVO.productId} "
					class="btn btn-secondary" role="button">상세정보&raquo;</a></p>
			</div>
		</c:forEach>
		</div>
	</div>
	
	<!-- footer -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>

!! 주의

	<% //스크립틀릿
		List<ProductVO> listOfProducts = productDAO.getAllProducts();
	%>
	
	<!-- 표현문 -->
	<c:set var="listOfProducts" value="<%= listOfProducts %>"/>
	<!--  container : 내안에 내용있다.-->
	<div class="container">
		<!-- 행 별 처리 -->
		<div class="row" align="center">
		<c:forEach var="ProductVO" items="${listOfProducts}">
			<div class="col-md-4">
				<img src="/images/${ProductVO.filename}" style="width:100%;" alt="${ProductVO.pname}" title="${ProductVO.pname}"/>
				<h3>${ProductVO.pname}</h3>
				<p>${ProductVO.description}</p>
				<p>${ProductVO.unitPrice}</p>
				<p><a href="product.jsp?id=${ProductVO.productId} "
					class="btn btn-secondary" role="button">상세정보&raquo;</a></p>
			</div>
		</c:forEach>
		</div>
	</div>

 

자바-> jsp로 올때에는 c:set (jstl셋팅)을 해줘야하고  

jsp에서 jstl을 사용할때에는 ${ } 을 사용해줘야함 (괄호안 띄어쓰기 주의)

 

 

 

 

결과물