romworld

JSP 18 - 쇼핑몰 사이트 만들기(6) [상품 등록 - (Bundle 사용)] 본문

WEB/JSP

JSP 18 - 쇼핑몰 사이트 만들기(6) [상품 등록 - (Bundle 사용)]

inderrom 2023. 1. 11. 12:13

만들었던 상품 등록 페이지에 번들 추가하기

 

 

1. bundle 파일 생성

 

<message_en.properties>

title = Product Addition
productId = Product ID
pname =  Name
unitPrice =Unit Price
description = Description
manufacturer = Manufacturer
category =   Category   
categoryselect = Select Category   
unitsInStock = Units in Stock
condition = Condition   
productImage = Image
condition_New = New
condition_Old = Old
condition_Refurbished = Refurbished
button = Insert
init = Reset
list= List

<message.properties>

title = 상품 등록
productId = 상품 코드
pname = 상품명
unitPrice = 가격
description = 상세 설명
manufacturer = 제조사
category =  분류 
categoryselect = 분류를 선택하세요     
unitsInStock = 재 고수   
condition = 상태
productImage = 이미지
condition_New = 신규 제품
condition_Old = 중고 제품 
condition_Refurbished = 재생 제품 
button = 등록 
init = 초기화
list= 목록

 

<addProduct.jsp>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

추가한다.

 

 

body태그 안에&nbsp; 설정해주고
fmt:message로 .properties에 설정한 값을 꺼내준다.

<addproduct.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ 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>
<!--  URI : /addProduct.jsp?language=en
	요청 파라미터(Param) : language=en
 -->
 <fmt:setLocale value="${param.language}"/>
<fmt:bundle basename="bundle.message">
<!-- 액션 스크립트 -->
<jsp:include page="menu.jsp"></jsp:include>

<div class="jumbotron">
	<!-- 이 안에 내용 있다 -->
	<div class="container">
		<h1 class="display-3"><fmt:message key="title"/></h1>
	</div>
</div>
<!-- 이 안에 내용 있다 -->
<div class="container">
	<!-- 한/영 전환 -->
	<div class="text-right">
		<a href="addProduct.jsp?language=ko">Korea</a>
		<a href="addProduct.jsp?language=en">English</a>
	</div>
	<!-- 폼 페이지 시작 -->
	<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"><fmt:message key="productId"/></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"><fmt:message key="pname"/></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"><fmt:message key="unitPrice"/></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"><fmt:message key="description"/></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"><fmt:message key="manufacturer"/></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"><fmt:message key="category"/></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><fmt:message key="categoryselect"/></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"><fmt:message key="unitInStock"/></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"><fmt:message key="condition"/></label>
			<div class="col-sm-5">
				<!-- input 시리즈의 미리체크? checked -->
				<!-- select 시리즈의 미리체크? selected -->
				<input type="radio" id="New" name="condition" value="New" checked />
				<label for="New"><fmt:message key="condition_New"/></label>
				<input type="radio" id="Old" name="condition" value="Old" />
				<label for="Old"><fmt:message key="condition_Old"/></label>
				<input type="radio" id="Refurbished" name="condition" value="Refurbished" />
				<label for="Refurbished"><fmt:message key="condition_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="<fmt:message key="button"/>" onclick="checkAddProduct()" />
				<input type="reset" class="btn btn-warning" 
					value="<fmt:message key="init"/>"  />
				<input type="button" class="btn btn-success" 
					value=<fmt:message key="list"/> onclick="javascript:location.href='products.jsp'"
					style="float:right;" />
			</div>
		</div>
	</form>
	<!-- 폼 페이지 끝 -->
</div>

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

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

 

korea를 눌렀을 때 한글 출력

 

English를 눌렀을 때 영문 출력

 

'WEB > JSP' 카테고리의 다른 글

JSP 20 - 쇼핑몰 만들기(7) [상품 등록 - (security 권한 설정 -admin)]  (0) 2023.01.12
JSP 19 - 시큐리티(security)  (0) 2023.01.11
JSP 17 - Properties File Editor (다국어 처리) ,JSTL fmt 활용  (0) 2023.01.11
JSP 16 - 쇼핑몰 사이트 만들기(5) [상품등록 - 정규식]  (0) 2023.01.10
JSP 15 - 정규표현식 (REGULAR EXPRESSION)  (0) 2023.01.09
'WEB/JSP' Related Articles more
Comments