romworld

JSP 16 - 쇼핑몰 사이트 만들기(5) [상품등록 - 정규식] 본문

WEB/JSP

JSP 16 - 쇼핑몰 사이트 만들기(5) [상품등록 - 정규식]

inderrom 2023. 1. 10. 12:47

메소드를 추가 한다.

<productRepository.java>

	// 상품 목록 중 가장 마지막에 등록된 상품의 상품코드를 구하여 1 증가시키면
	// 신규 상품의 상품코드로써 생성 됨
	// P1236 -> 다음? -> P1237
	public String getNextProductId() {
		// List<ProductVO> listOfProducts
		// list는 0부터 셈. 리스트의 size가 3이면 0,1,2..
		// 즉, index의 마지막 번호는(리스트의 크기 -1)
		ProductVO productVO = listOfProducts.get(listOfProducts.size()-1);
		System.out.println("productVO : " + productVO);
		// 마지막 상품의 상품코드를 가져옴
		String productId = productVO.getProductId();
		System.out.println("productId : " + productId);
		// 상품코드 +1 P1236+1 => P1237
		int id = Integer.parseInt(productId.substring(1,5));
		// 1236 + 1 = 1237
		id++;
		//P1237
		productId = "P"+id;
		
		return productId;
		
	}

 


 

정규식

<addProduct.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"%>
<!-- 
웹 쇼핑몰의 상품 정보를 등록하는 페이지
-->
<% //스크립틀릿
	ProductRepository productRepository = ProductRepository.getInstance();
	String productId = productRepository.getNextProductId();
%>
<!-- scope(영역) : page(pageContext)-기본, request, session, application -->
<c:set var="productId" value="<%=productId%>" scope="page" />
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/jquery-3.6.3.min.js"></script>  
<title>상품 등록</title>
<script type="text/javascript">
$(function(){
	
});
//핸들러 함수
function checkAddProduct(){
	let productId = $("input[name='productId']").val();
	let pname = $("input[name='pname']").val();
	let unitPrice = $("input[name='unitPrice']").val();
	let unitsInStock = $("input[name='unitsInStock']").val();
	//input type="file"
	let productImage = $("input[name='productImage']").val();
	
	//[0-9]대신 \d
	let regExpProductId = /^P[0-9]{4,11}$/;
	//+ : 1이상
	//? : 있을 수도 있고, 없을 수도 있음
	let regExpUnitPrice = /^\d+(?:[.]?[\d]?[\d]?)$/; //소수점 둘째 자리
	
	console.log("productId : " + productId);
	console.log("pname : " + pname);
	console.log("unitPrice : " + unitPrice);
	console.log("unitsInStock : " + unitsInStock);
	
	//상품아이디 체크
	//1) 첫 글자는 반드시 P로 시작하고 숫자를 조합하여 5~12자리까지 입력하세요.
	//정규표현식.test(대상문자열)
	if(!regExpProductId.test(productId)){
		alert("[상품 코드]\n첫 글자는 반드시 P로 시작하고 숫자를 조합하여 5~12자리까지 입력하세요.");
		$("input[name='productId']").focus();
		return false;
	}
	
	//상품명 체크
	//2) 최소 4자에서 최대 12자까지 입력하세요.
	if(pname.length<4 || pname.length>12){
		alert("[상품명]\n최소 4자에서 최대 12자까지 입력하세요.");
		$("input[name='pname']").focus();
		return false;
	}
	
	//상품 가격 체크
	//3) 숫자만 입력하세요. 음수는 입력할 수 없습니다. 소수점 둘째 자리까지만 입력하세요.
	//isNaN : is Not a Number
	if(unitPrice.length==0 || isNaN(unitPrice)){
		alert("[가격]\n숫자만 입력하세요.");
		$("input[name='unitPrice']").focus();
		return false;
	}
	
	if(unitPrice < 0){//음수
		alert("[가격]\n음수는 입력할 수 없습니다.");
		$("input[name='unitPrice']").focus();
		return false;
	}else{//양수
		if(!regExpUnitPrice.test(unitPrice)){
			alert("[가격]\n소수점 둘째 자리까지만 입력하세요.");
			$("input[name='unitPrice']").focus();
			return false;
		}
	}
	
	//재고 수 체크
	//4) 숫자만 입력하세요
	if(isNaN(unitsInStock)){
		alert("[재고 수]\n숫자만 입력하세요");
		$("input[name='unitsInStock']").focus();
		return false;
	}
	
	// 파일 체크
	// 5) 파일을 선택하세요
	console.log("productImage : " + $("input[name='productImage']").val());
	if(productImage==""){
		alert("[상품이미지]\n파일을 선택하세요");
		return false;
	}
	
	$("#newProduct").submit();
	
}
</script>
</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" enctype="multipart/form-data" >
		<!-- 가로방향 (행=로우=튜플=레코드) -->
		<div class="form-group row">
			<label class="col-sm-2">상품 코드</label>
			<div class="col-sm-3">
				<input type="text" name="productId" class="form-control"
				 value="${productId}"	readonly />
			</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>
				<!-- 세로크기 : cols, 가로크기 : rows -->
				<textarea id="description" name="description" cols="100"
				 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="checkbox" / "radio" => checked
				 -->
				<select id="category" name="category" class="form-control" 
					aria-label="Default select example">
				  <option selected>분류를 선택하세요</option>
				  <option value="Smart Phone" selected>Smart Phone</option>
				  <option value="Notebook">Notebook</option>
				  <option value="Tablet">Tablet</option>
				</select>
			</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="Old">중고 제품</label>
				<input type="radio" id="Refurbished" name="condition" value="Refurbished" />
				<label for="Refurbished">재생 제품</label>
			</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>
		<div class="form-group row">
			<div class="col-sm-offset-2 col-sm-10">
				<!-- <button type="submit" ..>등록</button> -->
				<!-- checkAddProduct() : 핸들러 함수 -->
				<input type="button" class="btn btn-primary" 
					value="등록" onclick="checkAddProduct()" />
				<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>
Comments