![[JSP][도서쇼핑몰 프로젝트]#4.상품등록페이지 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbNmdAh%2FbtrVPF78Mij%2F1HIOpW56jqexekAXIWSK21%2Fimg.png)
안녕하세요! 오늘은 도서상품을 등록하는 페이지를 만들어 보려고 합니다. 새로운 도서를 등록해주기 위해서 도서를 등록할 수 있는 페이지와 등록을 처리해주는 페이지를 새로 만들려고 합니다. 진행 순서는 다음과 같습니다. 그럼 시작해 볼까요?
📋 순서
1. 상품정보 등록 페이지 만들기
2. 신규데이터를 저장하는 메소드 만들기
3. 신규 상품 등록 처리페이지
4. 상품 목록, 상세페이지 수정
5. 결과
#01. 상품정보 등록페이지 만들기
addProduct.jsp를 새로 만들어주고 다음과 같이 작성해 줍니다. 입력된 데이터를 서버로 전송하여 폼 데이터를 처리하도록 form태그의 action과 method를 지정해 주었습니다.
▶ addProduct.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="./resources/js/validation.js"></script>
<title>상품등록페이지</title>
</head>
<body>
<jsp:include page="menu.jsp" />
<div class="jumbotron">
<div class="container">
<h1 class="display-3">도서등록</h1>
</div>
</div>
<div class="container">
<form name="newProduct" action="./processAddProduct.jsp" class="form-horizontal"
method="post">
<div class="form-group row">
<label class="col-sm-2">도서코드</label>
<div class="col-sm-3">
<input type="text" id="bookID" name="bookID" class="form-control" >
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">도서명</label>
<div class="col-sm-3">
<input type="text" id="bookName" name="bookName" class="form-control" >
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">가격</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">상세정보</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">저자</label>
<div class="col-sm-3">
<input type="text" name="author" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">출판사</label>
<div class="col-sm-3">
<input type="text" name="publisher" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">분류</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">재고 수</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">상태</label>
<div class="col-sm-5">
<input type="radio" name="condition" value="New " >신규
<input type="radio" name="condition" value="Old" >중고
<input type="radio" name="condition" value="E-Book" >E-Book
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-primary" value="등록하기">
</div>
</div>
</form>
</div>
</body>
</html>#02. 신규데이터를 저장하는 메소드 만들기
ProductRepository클래스에 다음과 같이 작성을 해줍니다.
먼저, ProductRepository클래스의 기본생성자에 대한 객체 변수 instance를 작성하여 줍니다. 그리고 객체변수 instance에 대한 Getter()메소드를 작성해 줍니다.
객체 변수 listOfProducts에 새로운 상품정보를 등록하는 addProduct()메소드를 작성합니다.
#03. 신규도서 등록 처리페이지 만들기
등록된 데이터를 처리해 주기 위해 processAddProducts.jsp라는 페이지를 새로 생성해 줍니다. 이때, 폼페이지에서 입력된 데이터를 서버로 전송할 때 한글이 깨지는 것을 방지하기 위해 인코딩 유형을 utf-8로 하여 request내장 객체의 setCharacterEncoding()메소드를 작성하여 줍니다. 그리고 폼페이지에서 입력된 값을 얻어오도록 다음과 같이 작성합니다.
위와 같이 입력이 끝났으면 다음은 숫자데이터에 관하여 작성을 해주는데요! 폼 페이지에서 상품가격, 재고 수가 입력되지 않은 경우 0으로, 입력이 된 경우에는 정수형으로 변경되도록 작성합니다.
Product객체타입의 변수 product에 저장된 도서명, 도서정보, 가격 등을 출력하도록 다음과 같이 작성하여 줍니다.
▶ processAddProduct.jsp
<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="dto.Product" %>
<%@ page import="dao.ProductRepository" %>
<%
request.setCharacterEncoding("UTF-8");
String bookID = request.getParameter("bookID");
String bookName = request.getParameter("bookName");
String unitPrice = request.getParameter("unitPrice");
String description = request.getParameter("description");
String author = request.getParameter("author");
String publisher = request.getParameter("publisher");
String category = request.getParameter("category");
String unitsInStock = request.getParameter("unitsInStock");
String condition = request.getParameter("condition");
Integer price;
if (unitPrice.isEmpty())
price = 0;
else
//문자로 들어오는 것을 숫자로 바꾸어라.
price = Integer.valueOf(unitPrice);
long stock;
if (unitsInStock.isEmpty())
stock = 0;
else
stock = Long.valueOf(unitsInStock);
ProductRepository dao = ProductRepository.getInstance();
Product newProduct = new Product();
newProduct.setBookID(bookID);
newProduct.setBookName(bookName);
newProduct.setUnitPrice(price);
newProduct.setDescription(description);
newProduct.setAuthor(author);
newProduct.setPublisher(publisher);
newProduct.setCategory(category);
newProduct.setUnitsInStock(stock);
newProduct.setCondition(condition);
dao.addProduct(newProduct);
//페이지 이동
response.sendRedirect("products.jsp");
%>#04. 상품 목록페이지 & 상세 페이지 수정
페이지에 신규데이터를 출력해 주기 위해 다음코드를 추가해 줍니다. 기존에 작성해 두었던 useBean을 제거하고 <%@ page import = "dao.ProductRepository" %> 다음과 같이 dao.ProductRepository패키지를 사용해 줍니다. 그리고 아래 줄에 다음과 같이 수정해 줍니다.
ProductRepository클래스의 객체 변수 instance를 호출하는 getInstance()메소드를 작성하였는데요. 이를 통해 getAllProducts()메소드를 호출하여 반환한 결과 값을 ArrayList <Product> 객체 타입 변수 listOfProducts에 저장합니다.
위는 상품 목록페이지 수정이었고 상세페이지도 똑같이 useBean을 제거한 뒤 dao.ProductRepository패키지를 사용할 수 있게 추가해 줍니다. 그리고 아래 그림과 같이 변경하여 주면 됩니다.
#05. 결과
그럼 다음과 같이 도서추가 페이지가 뜨는 것을 확인할 수 있습니다.
'📒 개발기록 > JSP 프로젝트' 카테고리의 다른 글
| [JSP][도서쇼핑몰 프로젝트]#6.상품등록데이터 유효성 검사&다국어 처리하기 (1) | 2023.01.27 |
|---|---|
| [JSP][도서쇼핑몰 프로젝트]#5.상품이미지 등록하기 (3) | 2023.01.22 |
| [JSP][도서쇼핑몰 프로젝트]#3.상품상세 페이지 만들기 (0) | 2023.01.10 |
| [JSP][도서쇼핑몰 프로젝트]#2.상품목록 만들기 (2) | 2022.12.01 |
| [JSP][도서쇼핑몰 프로젝트]#1.시작페이지 (0) | 2022.11.21 |