Backend/Spring | Spring Boot
[예제] 상품번호 중복 체크 | 상품 검색 | 도서 관리 프로젝트
olli2
2022. 1. 12. 22:37
예제 1 : 상품 등록 시 상품번호 중복 체크
newProductForm.jsp : 상품등록 화면에 상품번호 입력란 옆에 [중복확인] 버튼 추가
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 등록 폼</title>
<script src="<c:url value='/js/jquery-3.6.0.min.js'/>"></script>
<script src="<c:url value='/js/prdNocheck.js'/>"></script>
</head>
<body>
<h3>상품 등록</h3>
<!-- <form method="post" action="/mybatis/product/insertProduct"> -->
<form method="post" action="/mybatis/product/insertProduct">
<table>
<tr><td>상품 번호</td><td><input type="text" name="prdNo" id="prdNo"><button id="prdNoCheckBtn">중복확인</button></td></tr>
<tr><td>상품명</td><td><input type="text" name="prdName"></td></tr>
<tr><td>가격 </td><td> <input type="text" name="prdPrice"></td></tr>
<tr><td>제조회사</td><td><input type="text" name="prdCompany"></td></tr>
<tr><td>재고 </td> <td><input type="text" name="prdStock"></td></tr>
<tr><td colspan="2"><input type="submit" value="등록"><input type="reset" value="취소"></td></tr>
</table>
</form>
</body>
</html>
prdNocheck.js : result 결과(no_use)에 따라 alert() 출력
/**
* prdNocheck.js
*/
$(document).ready(function(){
$('#prdNoCheckBtn').on('click', function(){
event.preventDefault();
$.ajax({
type:"post",
url:"prdNoCheck",
data:{"prdNo":$('#prdNo').val()},
success:function(result){
if(result=="no_use") {
alert("사용할 수 없는 번호입니다.");
} else {
alert("사용 가능한 번호입니다.");
}
},
error:function(data, textStatus){
alert("전송 실패");
}
});
});
});
IProductService
package com.spring_mvc.mybatis.service;
import java.util.ArrayList;
import java.util.HashMap;
import com.spring_mvc.mybatis.model.ProductVO;
public interface IProductService {
// 구현 클래스에서 오버라이딩할 추상 메소드 선언
// 규격 지정 : 반드시 구현해야 할 메소드 지정해 놓는 것
ArrayList<ProductVO> listAllProduct(); // 전체 상품 조회
void insertProduct(ProductVO prdVo); // 상품 정보 등록
void updateProduct(ProductVO prdVo); // 상품 정보 수정
void deleteProduct(String prdNo); // 상품 정보 삭제
ProductVO detailViewProduct(String prdNo);// 상세 상품 조회
String prdNoCheck(String prdNo); // 상품 번호 중복 확인
}
ProductService
package com.spring_mvc.mybatis.service;
import java.util.ArrayList;
import java.util.HashMap;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Service;
import com.spring_mvc.mybatis.dao.IProductDAO;
import com.spring_mvc.mybatis.model.ProductVO;
@Service
public class ProductService implements IProductService {
// MyBatis 사용하는 경우의 DI 설정
@Autowired
@Qualifier("IProductDAO")
IProductDAO dao;
@Override
public ArrayList<ProductVO> listAllProduct() {
return dao.listAllProduct();
}
@Override
public void insertProduct(ProductVO prdVo) {
dao.insertProduct(prdVo);
}
@Override
public void updateProduct(ProductVO prdVo) {
dao.updateProduct(prdVo);
}
@Override
public void deleteProduct(String prdNo) {
dao.deleteProduct(prdNo);
}
@Override
public ProductVO detailViewProduct(String prdNo) {
return dao.detailViewProduct(prdNo);
}
@Override
public String prdNoCheck(String prdNo) {
return dao.prdNoCheck(prdNo);
}
}
IProductDAO
package com.spring_mvc.mybatis.dao;
import java.util.ArrayList;
import java.util.HashMap;
import com.spring_mvc.mybatis.model.ProductVO;
public interface IProductDAO {
ArrayList<ProductVO> listAllProduct(); // 전체 상품 조회
void insertProduct(ProductVO prdVo); // 상품 정보 등록
void updateProduct(ProductVO prdVo); // 상품 정보 수정
void deleteProduct(String prdNo); // 상품 정보 삭제
ProductVO detailViewProduct(String prdNo);// 상세 상품 조회
String prdNoCheck(String prdNo); // 상품 번호 중복 확인
}
ProductMapper 추가
<!-- 상품번호 중복 확인 -->
<select id="prdNoCheck" resultType="string" parameterType="string">
SELECT prdNo FROM product WHERE prdNo=#{prdNo}
</select>
ProdcutController 추가 : prdNo 전달 받아서 서비스에게 전달
받은 결과 있으면 ( = null이 아니면 ) “no_use” / 아니면 “use” 반환
//상품번호 중복 확인
@ResponseBody
@RequestMapping("product/prdNoCheck")
public String prdNoCheck(@RequestParam("prdNo") String prdNo) {
// 서비스 호출 -> DAO -> Mapper -> prdNo가 존재하면 prdNo 반환
String prdNo_result = service.prdNoCheck(prdNo);
String result = "use";
if(prdNo_result != null) // prdNo_result가 받은 값이 있으면 (널이 아니면)
result = "no_use";
return result;
}예제 2 : 상품 검색 : 상품 검색 결과를 현재 페이지에 출력
index.jsp 추가
<a href="product/productSearchForm">상품 검색</a><br><br>
<a href="product/productSearchForm2">상품 검색2</a><br><br>
ProductMapper 추가
<!-- 상품 검색 -->
<select id="productSearch" resultMap="prdResult" parameterType="hashmap">
SELECT * FROM product WHERE
<!-- 상품명으로 검색 -->
<choose>
<when test="type != null and type.equals('prdName')">
prdName LIKE CONCAT('%', #{keyword}, '%')
</when>
<!-- 제조회사로 검색 -->
<when test="type != null and type.equals('prdCompany')">
prdCompany LIKE CONCAT('%', #{keyword}, '%')
</when>
</choose>
</select>
IProductDAO, IProductService 추가
ArrayList<ProductVO> productSearch(HashMap<String, Object> map); // 상품 검색ProductService 추가
@Override
public ArrayList<ProductVO> productSearch(HashMap<String, Object> map) {
return dao.productSearch(map);
}
방법1 : Ajax / @ResponseBody 사용
- 컨트롤러에서 Ajax로 ArrayList 반환 (jackson-databind - pom.xml에 추가)
- Ajax success:function(){에서 출력} : 자바스크립트로 출력
productSearchForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 검색</title>
<script src="<c:url value='/js/jquery-3.6.0.min.js'/>"></script>
<script src="<c:url value='/js/productSearch.js'/>"></script>
</head>
<body>
<h3>상품 검색</h3>
<form id="prdSearchFrm">
<select id="type" name="type">
<option value="">검색 조건 선택</option>
<option value="prdName">상품명</option>
<option value="prdCompany">제조회사</option>
</select>
<input type="text" name="keyword">
<input type="submit" value="검색">
</form>
<div id="searchResultbox"></div>
</body>
</html>
ProductController 추가
// 상품 검색폼으로 이동
@RequestMapping("/product/productSearchForm")
public String productSearchForm() {
return "product/productSearchForm";
}
// 상품 검색
@ResponseBody
@RequestMapping("/product/productSearch")
public ArrayList<ProductVO> productSearch(@RequestParam HashMap<String, Object> param,
Model model){
ArrayList<ProductVO> prdList = service.productSearch(param);
model.addAttribute("prdList", prdList);
return prdList;
}
productSearch.js
/**
* productSearch.js
상품 검색
*/
$(document).ready(function(){
$('#prdSearchFrm').on('submit', function(){
event.preventDefault();
var formData = $(this).serialize();
// serialize() : 폼에 입력한 값을 쿼리 스트링 방식의 데이터로 변환
//type=prdName&keyword=노트북...
$.ajax({
type:"post",
url:"productSearch",
data:formData,
success:function(result){ // 컨트롤러에서 반환한 prdList를 result가 받음
//alert(result.length);
// 반환된 결과(ArrayList<ProductVO>)를 searchResultbox에 테이블 형태로 출력
$('#searchResultbox').empty();
$('#searchResultbox').append('<table id="resultTable" border="1" width="600">' +
'<tr><th>상품번호</th><th>상품명</th><th>가격</th>' +
'<th>제조사</th><th>재고</th><th>사진</th></tr>');
if(result == ""){
$('#resultTable').append('<tr align="center"><td colspan="6">찾는 상품이 없습니다 </td></tr>');
}else{
for(var i=0; i <result.length; i++){
$('#resultTable').append('<tr><td>' + result[i].prdNo + '</td><td>' +
result[i].prdName + '</td><td>' +
result[i].prdPrice+ '</td><td>' +
result[i].prdCompany + '</td><td>' +
result[i].prdStock + '</td><td>' +
'<img src="/mybatis/images/' + result[i].prdNo + '.jpg" width="30" height="20"></td></tr>');
}
}
$('#searchResultbox').append('</table>');
},
error:function(data, textStatus){
alert("전송 실패");
}
});
});
});
productSearchResultView.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 검색 결과</title>
</head>
<body>
<h3>상품 검색 결과</h3>
<table border="1" width="600">
<tr><th>상품번호</th><th>상품명</th><th>가격</th>
<th>제조사</th><th>재고</th><th>사진</th></tr>
<c:forEach items="${prdList }" var="prd">
<tr><td><a href="<c:url value='/product/detailViewProduct/${prd.prdNo}'/>">${prd.prdNo }</a></td>
<td>${prd.prdName }</td>
<td>${prd.prdPrice }</td>
<td>${prd.prdCompany }</td>
<td>${prd.prdStock }</td>
<td><img src="<c:url value='/images/${prd.prdNo}.jpg'/>" width="30" height="20">
<!-- 또는 -->
<img src="/mybatis/images/${prd.prdNo}.jpg" width="30" height="20"></td>
</tr>
</c:forEach>
</table><br>
<a href="/mybatis/">메인 화면으로 이동</a><br>
<a href="<c:url value='/' />">메인 화면으로 이동</a> <!-- 같은 표현 -->
</body>
</html>방법2 : @ResponseBody 없이 뷰 페이지 리턴 & Ajax에서 현재 페이지에 결과 뷰 페이지를 삽입
- JSTL 사용해서 테이블 형태로 출력
ProductController 추가
// 상품 검색 폼2 이동
@RequestMapping("/product/productSearchForm2")
public String productSearchForm2() {
return "product/productSearchForm2";
}
// 상품 검색 폼2 검색
@RequestMapping("/product/productSearch2")
public String productSearch2(@RequestParam HashMap<String, Object> param,
Model model){
ArrayList<ProductVO> prdList = service.productSearch(param);
model.addAttribute("prdList", prdList);
return "product/productSearchResultView";
}
productSearchForm2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 검색2</title>
<script src="<c:url value='/js/jquery-3.6.0.min.js/' />"></script>
<script src="<c:url value='/js/productSearch2.js/' />"></script>
</head>
<body>
<h3>상품 검색</h3>
<form id="prdSearchFrm2">
<select id="type" name="type">
<option value="">검색 조건 선택</option>
<option value="prdName">상품명</option>
<option value="prdCompany">제조회사</option>
</select>
<input type="text" name="keyword">
<input type="submit" value="검색">
</form>
<div id="searchResultBox"></div>
</body>
</html>
productSearch2.js
/**
* productSearch2.js
상품 검색
*/
$(document).ready(function(){
$('#prdSearchFrm2').on('submit', function(){
event.preventDefault();
var formData = $(this).serialize();
// serialize() : 폼에 입력한 값을 쿼리 스트링 방식의 데이터로 변환
//type=prdName&keyword=노트북
$.ajax({
type:"post",
url:"productSearch2",
data:formData,
success:function(result){
$('#searchResultBox').html(result);
},
error:function(data, textStatus){
alert("전송 실패");
}
});
});
});
productSearchResultView.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 검색 결과</title>
</head>
<body>
<h3>상품 검색 결과2</h3>
<table border="1" width="600">
<tr><th>상품번호</th><th>상품명</th><th>가격</th><th>제조사</th><th>재고</th><th>사진</th></tr>
<c:choose>
<c:when test="${empty prdList}">
<tr align="center"><td colspan="6">찾는 상품이 없습니다.</td></tr>
</c:when>
<c:otherwise>
<c:forEach items="${prdList }" var="prd">
<tr><td><a href="<c:url value='/product/detailViewProduct/${prd.prdNo}'/>">${prd.prdNo }</a></td>
<td>${prd.prdName }</td>
<td>${prd.prdPrice }</td>
<td>${prd.prdCompany }</td>
<td>${prd.prdStock }</td>
<td><img src="c:url value='/images/${prd.prdNo}.jpg' />" width="30" height="20"/></td></tr>
</c:forEach>
</c:otherwise>
</c:choose>
</table>
<br>
<a href="<c:url value='/' />">메인 화면으로 이동</a>
</body>
</html>예제 3 : 도서 관리 프로그램 : 도서 등록 폼 - 도서 번호 중복확인 / 도서 검색 기능 추가