유효성 검사
addProduct.jsp
스크립트와 해당 스크립트 안에 있는 함수 사용(onclick)
<%@page import="kr.or.ddit.vo.ProductVO"%>
<%@page import="java.util.List"%>
<%@page import="kr.or.ddit.dao.ProductRepository"%>
<%@ 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"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/validation2.js"></script>
<title>상품 목록</title>
<script>
$(function(){
$('input:file').on('input',handleImg);
})
// e 이벤트 객체
function handleImg(e){
let files = e.target.files; // 파일에 접근
let fileArr = Array.prototype.slice.call(files); // 붙어있는 파일을 배열로 정렬
$.each(fileArr, function(){
// 이미지 여부 체크
if(!this.type.match("image.*")){
console.log("이미지가 아닙니다")
return;
}
// 이미지
let reader = new FileReader();
// e : reader가 이미지 객체를 읽는 이벤트
reader.onload = function(e){
let img_html = "<img src='"+e.target.result+"' style='width:200px;' />";
// 요소.append : 누적, 요소.html : 새로고침,
// 요소.innerHTML : JavaScript에서 새로고침
$('#pImg').html(img_html);
}
reader.readAsDataURL(this);
});
}
</script>
</head>
<body>
<!-- header -->
<!--
디렉티브 태그 속성 속성의 값 -->
<%@ include file="menu.jsp"%>
<!-- 상품 목록 시작 -->
<div class="jumbotron">
<div class="container">
<h1 class="display-3">상품 등록</h1>
</div>
</div>
<div class="container">
<form action="processAddProduct.jsp" method="post" enctype="multipart/form-data" class="form-horizontal" name="newProduct">
<div class="form-group row">
<label class="col-sm-2">상품 코드</label>
<div class="col-sm-3">
<input type="text" name="productId" placeholder="P1234">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">상품명</label>
<div class="col-sm-3">
<input type="text" name="pname" placeholder="4~15글자">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">가격</label>
<div class="col-sm-3">
<input type="text" name="unitPrice">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">상세정보</label>
<div class="col-sm-5">
<textarea rows="2" cols="23" name="description">
</textarea>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">제조사</label>
<div class="col-sm-3">
<input type="text" name="manufacturer">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">카테고리</label>
<div class="col-sm-3">
<input type="text" name="category">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">재고수</label>
<div class="col-sm-3">
<input type="text" name="unitsInStock">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">상태</label>
<div class="col-sm-5">
<input type="radio" id="new" name="condition" value="New">
<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-3">
<input type="file" name="filename">
<span id="pImg"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<input class="btn btn-primary" type="button" onclick="CheckAddProduct()" value="등록" />
</div>
</div>
<hr />
</form>
</div>
<!-- 상품 목록 끝 -->
<!-- footer -->
<%@ include file="footer.jsp"%>
</body>
</html>validation2.js
/**
*
*/
function CheckAddProduct(){
let form = document.newProduct;
let id = form.productId.value;
let name = form.pname.value;
let price = form.unitPrice.value;
let stock = form.unitsInStock.value;
//JSON
let data = {
"productId" : id,
"pname" : name,
"unitPrice" : price,
"unitsInStock" : stock
}
//상품 아이디 체크.
//1) 첫글자는 P. 2) 숫자를 조합하여 5~12자까지 입력 가능
let regExpId = /^P\d{4,11}$/;
if(!regExpId.test(id)){
alert("[상품코드]\nP와 숫자를 조합하여 5~12까지 입력하세요");
form.productId.select();
return;
}
//상품명 체크
//4~12자까지 입력 가능
//ex)name.value : 삼성갤럭시S22
// \s : 스페이스(공백) 또한 포함
let regExpName = /^[a-zA-Z가-힣0-9ㄱ-ㅎㅏ-ㅣ\s]{4,12}$/;
if(!regExpName.test(name)){
alert("[상품명]\n 4~12자이내로 작성해주세요");
form.pname.select();
return;
}
//상품 가격 체크
//숫자만 입력 가능
//ex) unitPrice.value : 1200000
let regExpPrice = /^[0-9]+$/;
if(!regExpPrice.test(price)){
alert("[가격]\n숫자만 입력가능합니다");
form.unitPrice.select();
return;
}
//재고 수 체크
//숫자만 입력 가능
//isNaN : 이거숫자니?
let regExpStock = /^[0-9]+$/;
if(!regExpStock.test(stock)){
alert("[재고 수]\n숫자만 입력 가능합니다");
form.unitsInStock.select();
return;
}
form.submit();
}다국어
- <fmt:setLocale value="ko"/>
- <fmt:bundle basename="bundle.message"></fmt:bundle>
<!--
value="en" ==> bundle.message_en.propertes를 사용
value="ko" ==> bundle.message_ko.propertes를 사용
bundle.message.propertes
우리의 지역 locale은 ko
-->
message.properties
( 인코딩 ISO-8859-1 상태)
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
unitsInStock = \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
product_description = \uC0C1\uD488 \uC0C1\uC138
product_list = \uC0C1\uD488 \uBAA9\uB85D
won = \uC6D0message_en.properties
title = Product Addition
productId = Product ID
pname = Name
unitPrice =Unit Price
description = Description
manufacturer = Manufacturer
category = Category
unitsInStock = Units in Stock
condition = Condition
productImage = Image
condition_New = New
condition_Old = Old
condition_Refurbished = Refurbished
button = Insert
product_description = Product Description
product_list = Product List
won = wonaddProduct.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="kr.or.ddit.vo.ProductVO"%>
<%@ page import="java.util.List"%>
<%@ page import="kr.or.ddit.dao.ProductRepository"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/validation2.js"></script>
<title>상품 목록</title>
<script>
$(function(){
$('input:file').on('input',handleImg);
})
// e 이벤트 객체
function handleImg(e){
let files = e.target.files; // 파일에 접근
let fileArr = Array.prototype.slice.call(files); // 붙어있는 파일을 배열로 정렬
$.each(fileArr, function(){
// 이미지 여부 체크
if(!this.type.match("image.*")){
console.log("이미지가 아닙니다")
return;
}
// 이미지
let reader = new FileReader();
// e : reader가 이미지 객체를 읽는 이벤트
reader.onload = function(e){
let img_html = "<img src='"+e.target.result+"' style='width:200px;' />";
// 요소.append : 누적, 요소.html : 새로고침,
// 요소.innerHTML : JavaScript에서 새로고침
$('#pImg').html(img_html);
}
reader.readAsDataURL(this);
});
}
</script>
</head>
<body>
<fmt:setLocale value="ko"/> <!-- 영어 en -->
<fmt:bundle basename="bundle.message">
<!--
value="en" ==> bundle.message_en.propertes를 사용
value="ko" ==> bundle.message_ko.propertes를 사용
bundle.message.propertes
우리의 지역 locale은 ko
-->
<!-- header -->
<!--
디렉티브 태그 속성 속성의 값 -->
<%@ include file="menu.jsp"%>
<!-- 상품 목록 시작 -->
<div class="jumbotron">
<div class="container">
<h1 class="display-3"><fmt:message key="title" /></h1>
</div>
</div>
<div class="container">
<form action="processAddProduct.jsp" method="post" enctype="multipart/form-data" class="form-horizontal" name="newProduct">
<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" placeholder="P1234">
</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" placeholder="4~15글자">
</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" name="unitPrice">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2"><fmt:message key="description" /></label>
<div class="col-sm-5">
<textarea rows="2" cols="23" name="description">
</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">
</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">
</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" name="unitsInStock">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2"><fmt:message key="condition" /></label>
<div class="col-sm-5">
<input type="radio" id="new" name="condition" value="New">
<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"><fmt:message key="productImage" /></label>
<div class="col-sm-3">
<input type="file" name="filename">
<span id="pImg"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<input class="btn btn-primary" type="button" onclick="CheckAddProduct()" value="<fmt:message key="button" />" />
</div>
</div>
<hr />
</form>
</div>
<!-- 상품 목록 끝 -->
<!-- footer -->
<%@ include file="footer.jsp"%>
</fmt:bundle>
</body>
</html>product.jsp
<%@page import="kr.or.ddit.vo.ProductVO"%>
<%@page import="java.util.List"%>
<%@page import="kr.or.ddit.dao.ProductRepository"%>
<%@ 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" %>
<!DOCTYPE html>
<html>
<head>
<title>상품 목록</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<c:set var="lang" value="${param.language}"/>
<c:if test="${lang==null}">
<c:set var="lang" value="ko"/>
</c:if>
<fmt:setLocale value="${lang}"/> <!-- 영어 en -->
<fmt:bundle basename="bundle.message">
<!-- header -->
<!--
디렉티브 태그 속성 속성의 값 -->
<%@ include file="menu.jsp" %>
<%
String pid = request.getParameter("pid");
ProductRepository dao = ProductRepository.getInstance();
ProductVO vo = dao.getProductById(pid);
%>
<!-- 상품 목록 시작 -->
<div class="jumbotron">
<div class="container">
<h1 class="display-3"><fmt:message key="product_description" /></h1>
</div>
</div>
<div class="container">
<div class="text-right">
<a href="/product.jsp?pid=<%=pid %>&language=ko">Korean</a>
<a href="/product.jsp?pid=<%=pid %>&language=en">English</a>
</div>
<c:set var="vo" value="<%=vo %>"/>
<div class="row">
<div class="col-md-6"> <!-- style = " width : 50%; "-->
<span class="badge badge-danger">${vo.condition}</span>
<h3>
${vo.pname}</h3>
<img src="/images/${vo.filename}" style='width:200px;' />
<p>${vo.description}</p>
<p>
<b><fmt:message key="productId" /> : </b>
${vo.productId}
</p>
<p>
<b><fmt:message key="manufacturer" /> : </b>
${vo.manufacturer}
</p>
<p>
<b><fmt:message key="category" /> : </b>
${vo.category}
</p>
<p>
<b><fmt:message key="unitsInStock" /> : </b>
${vo.unitsInStock}
</p>
<h4>
<fmt:formatNumber value="${vo.unitPrice}" type="number" pattern="#,###" /><fmt:message key="won" />
</h4>
<p>
<a href="/products.jsp" class="btn btn-secondary" role="button"><fmt:message key="product_list" /> »</a>
</p>
</div>
</div>
</div>
<!-- 상품 목록 끝 -->
<!-- footer -->
<%@ include file="footer.jsp" %>
</fmt:bundle>
</body>
</html>
'JAVA > JSP' 카테고리의 다른 글
| [JSP] 시큐리티(security) (0) | 2024.07.10 |
|---|---|
| [Python] SPA 형태의 CRUD (0) | 2024.07.10 |
| [JSP] Validation(유효성 검사), 정규 표현식 (0) | 2024.07.08 |
| [JSP] 구현 4 - 이미지 추가 (0) | 2024.07.05 |
| [JSP] 파일 업로드 (0) | 2024.07.04 |
