JSP

JSP 웹 프로그래밍 - 웹 쇼핑몰 만들기 03 (상품 등록 데이터의 유효성 검사, 상품 등록 페이지의 다국어 처리)

록's 2023. 3. 3. 15:39
728x90
반응형

 

웹 쇼핑몰 만들기 01, 02 링크

 

웹 쇼핑몰 만들기 01 >> https://rogi221.tistory.com/93

웹 쇼핑몰 만들기 02 >> https://rogi221.tistory.com/101

 

8.[웹 쇼핑몰] 상품 등록 데이터의 유효성 검사하기

 

[웹 쇼핑몰] 상품 등록 데이터의 유효성 검사하기

 

 

 

 

상품 등록 페이지의 유효성 검사하기

 

  • 자바스크립트 관리 폴더 만들기

 

 

 

 

  • 유효성 검사를 위한 핸들러 함수 작성하기

 

// validation.js

function CheckAddProduct(){
	
	var productId = document.getElementById("productId");
	var name = document.getElementById("name");
	var unitPrice = document.getElementById("unitsInStock");
	var unitsInStock = document.getElementById("unitsInStock");
	
	// 상품 아이디 체크
	if(!check(/^P[0-9]{4,11}$/, productId,
		"[상품코드]\nP와 숫자를 조합하여 5~12자까지 입력하세요\n첫 글자는 반드시 P로 시작하세요"))
		return false;
		
	// 상품명 체크
	if(name.value.length < 4 || name.value.length > 12) {
		alert("[상품명]\n최소 4자에서 최대 12자까지 입력하세요");
		name.select();
		name.focus();
		return false;
	}
	
	// 상품 가격 체크
	if(unitPrice.value.length == 0 || isNaN(unitPrice.value)) {
		alert("[가격]\n숫자만 입력하세요");
		unitPrice.select();
		unitPrice.focus();
		return false;
	}
	
	if(unitPrice.value <0) {
		alert("[가격]\n음수는 입력할 수 없습니다.");
		unitPrice.select();
		unitPrice.focus();
		return false;
	} else if (!check(/^\d+(?:[.]?[\d]?$/, unitPrice, "[가격]\n소수점 둘째 자리까지만 입력하세요"))
		return false;
		
	// 재고 수 체크
	if(isNaN(unitsInStock.value)) {
		alert("[재고 수]\n숫자만 입력하세요");
		unitsInStock.select();
		unitsInStock.focus();
		return false;
	}
	
	function check(regExp, e, msg){
		
		if (regExp.test(e.value)) {
			return true;
		}
		alert(msg);
		e.select();
		e.focus();
		return false;
	}
	
	document.newProdut.submit()
}

 

 

 

 

 

 

 

  • 상품 등록 페이지 수정하기
// addProduct.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<html>
<head>
<link rel="stylesheet" href="./resources/css/bootstrap.min.css" />
<script type="text/javascript" src="./resources/js/validation.js"></script>	  << 추가
<title>상품 등록</title>
</head>
<body>
		... (생략) ...
        
				<label class="col-sm-2">상품 코드</label>
				<div class="col-sm-3">
	id 추가	>>		<input type="text" id="productId" name="productId" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">상품명</label>
				<div class="col-sm-3">
	id 추가	>>		<input type="text" id="name" name="name" class="form-control">
				</div>
			</div>
			<div class="form-group row">
			<label class="col-sm-2">가격</label>
				<div class="col-sm-3">
	id 추가	>>		<input type="text" id="unitPrice" name="unitPrice" class="form-control">
				</div>
			</div>
            
           ... (생략) ...
           
           <div class="form-group row">
               <label class="col-sm-2">재고 수</label>
                   <div class="col-sm-3">
	id 추가	>>		<input type="text" id="unitsInStock" name="unitsInStock" class="form-control">
                   </div>
               </div>          
               
            ... (생략) ...
 
 			<div class="form-group row">
				<div class="col-sm-offset-2 col-sm-10">
수정 및 추가 >>		<input type="button" class="btn btn-primary" value="등록" onclick="CheckAddProduct()">
				</div>
			</div>

 

 

 

 

9. 상품 등록 페이지의 다국어 처리하기

 

[웹 쇼핑몰] 상품 등록 페이지의 다국어 처리하기

 

 

 

 

 

JSTL fmt 태그를 이용하여 상품 등록 페이지의 다국어 처리하기

  • JSTL 라이브러리 jstl-1.2.jar 등록하기
  • 한글 리소스번들 만들기
// message.properties

title=\uC0C1\uD488 \uB4F1\uB85D
productId=\uC0C1\uD488 \uCF54\uB4DC
pname=\uC0C1\uD488\uBA85
unitPrice=\uAC00\uACA9
description=\uC0C1\uC138\uC124\uBA85
manufacturer=\uC81C\uC870\uC0AC
category=\uBD84\uB958
untsInStock=\uC7AC\uACE0 \uC218
condition=\uC0C1\uD0DC
productImage=\uC774\uBBF8\uC9C0
condition_New=\uC2E0\uADDC \uC81C\uD488
condition_Old=\uC911\uACE0 \uC81C\uD488
condition_Refurbished=\uC7AC\uC0DD \uC81C\uD488
button=\uB4F1\uB85D

 

 

  • 영문 리소스번들 만들기
// message_en.properties

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

 

 

 

 

  • 상품 등록 페이지의 다국어 처리하기
// addProduct.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>  << 추가
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>  << 추가
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./resources/css/bootstrap.min.css" />
<script type="text/javascript" src="./resources/js/validation.js"></script>
<title>상품 등록</title>
</head>
<body>
	<fmt:setLocale value='<%=request.getParameter("language") %>'/>  << 추가
	<fmt:bundle basename="bundle.message">  						<< 추가
	<jsp:include page="menu.jsp" />
	<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="?language=ko">Korean</a>|<a href="?language=en">English</a>  << 추가
		</div>
		<form name="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" id="productId" name="productId" class="form-control">
				</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" id="name" name="name" class="form-control">
				</div>
			</div>
			<div class="form-group row">
			<label class="col-sm-2"><fmt:message key="unitPrice"/></label>	  << 추가
				<div class="col-sm-3">
					<input type="text" id="unitPrice" name="unitPrice" class="form-control">
				</div>
			</div>
			<div class="form-group row">
			<label class="col-sm-2"><fmt:message key="description"/></label>  << 추가
				<div class="col-sm-5">
					<textarea name="description" cols="50" 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="text" name="category" class="form-control">
				</div>
			</div>
			<div class="form-group row">
			<label class="col-sm-2"><fmt:message key="unitsInStock"/></label>  << 추가
				<div class="col-sm-3">
					<input type="text" id="unitsInStock" 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-3">
					<input type="radio" name="condition" value="New"><fmt:message key="condition_New"/>
					<input type="radio" name="condition" value="Old"><fmt:message key="condition_Old"/>
					<input type="radio" name="condition" value="Refurbished"><fmt:message key="condition_Refurbished"/>
				</div>
			</div>
			<div class="form-group row">
            <label class="col-sm-2"><fmt:message key="productImage"/></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">
					<input type="button" class="btn btn-primary" value="<fmt:message key="button"/>" onclick="CheckAddProduct()">	<< 추가
				</div>
			</div>
		</form>
	</div>
	<jsp:include page="footer.jsp" />
	</fmt:bundle>		<< 추가
</body>
</html>

 

- 출력 - 

 

 

 

다음 웹 쇼핑몰 만들기 04 >> https://rogi221.tistory.com/109

 

728x90
반응형

'JSP' 카테고리의 다른 글

JSP 웹 프로그래밍 - 다국어 처리 01  (0) 2023.03.03
JSP 웹 프로그래밍 - 다국어 처리 02  (0) 2023.03.03
JSP 웹 프로그래밍 - 유효성 검사 02  (0) 2023.03.03
JSP 웹 프로그래밍 - 유효성 검사 01  (0) 2023.03.03
JSP 웹 프로그래밍 - 파일 업로드  (0) 2023.03.02

'JSP'의 다른글

  • 현재글JSP 웹 프로그래밍 - 웹 쇼핑몰 만들기 03 (상품 등록 데이터의 유효성 검사, 상품 등록 페이지의 다국어 처리)

관련글

댓글

티스토리툴바