JSP, Servlet, MySQL/JSP - webmarket
폼 태그 : 상품 등록 페이지 만들기 2
샤리미
2023. 9. 4. 08:40
728x90
반응형
05. textarea 태그의 기능과 사용법
textarea 태그는 여러 줄의 텍스트를 입력할 수 있는 태그로 형식은 다음과 같다. 기본적으로 textarea태그의 너비와 높이를 지정하기 위해 cols 와 rows 속성을 설정한다. 기본 값은 <textarea>와 </textarea> 태그 사이에 설정하면 된다. textarea 태그의 가장 큰 특징은 입력 폼 안에 사용된 태그와 띄어쓰기가 그대로 출력된다는 것이다.
<textarea cols="너비 값" rows="높이 값">
...(생략)...
</textarea>
textarea 태그의 속성
속성 속성 값 설명
| 속성 | 속성값 | 설명 |
| name | 텍스트 | 이름을 설정한다 |
| cols | 숫자 | 입력할 텍스트 영역의 너비(열 크기)를 설정 |
| rows | 숫자 | 입력할 텍스트 영역의 높이 (행 크기)를 설정 |
| wrap | off | 줄바꿈을 설정한다. wrap=”off”: 줄바꿈을 하지 않고 문장을 입력할 때 수평 스크롤바가 생기고 옆으로 계속 문장이 입력 된다. |
| soft | wrap=”soft”: <enter>를 누르지 않아도 텍스트라인 끝에서 자동으로 행이 바뀐다 | |
| hard | wrap=”hard” : soft 상태와 비슷하며 실제 내용을 서버에 전송할 때 캐리지 리턴 문자를 전달한다. |
다음은 textarea 태그를 사용하여 여러 줄을 입력 받는 예이다. cols 와 rows 속성을 각각 30,3로 설정했다
[textarea 태그 사용 예]
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<form atcion="#" method="get">
<textarea name="comment" cols="30" rows="3"></textarea>
<p><input type="submit" value="전송" />
<input type="reset" value="취소"/>
</body>
</html>
textarea 태그로 회원 가입 양식에 가입 인사 추가하기
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<h3>회원 가입</h3>
<form action="#" name="member" method="post">
<p> 아이디 : <input type="text" name="id"> <input type="button" value="아이디 중복 검사">
<p> 비밀번호 : <input type="password" name="passwd">
<p> 이름 : <input type="text" name="name">
<p> 연락처 : <select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select> - <input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone3">
<p> 성별 : <input type="radio" name="sex" value="남성" checked>남성
<input type="radio" name="sex" value="여성" >여성
<p> 취미 : 독서<input type="checkbox" name="hobby1" checked>
운동<input type="checkbox" name="hobby2" >
영화<input type="checkbox" name="hobby3" >
<p> <textarea name="comment" rows="3" cols="30" placeholder="가입 인사를 입력해주세요"></textarea>
<p> <input type="submit" value="가입하기">
<input type="reset" value="다시 쓰기">
</form>
</body>
</html>
06. 폼 데이터 처리하기
jsp 에서 가장 많이 사용하는 기능 중 하나는 사용자가 웹 브라우저의 폼 페이지에 입력한 데이터를 서버로 전달하여 서버가 이를 처리하는 것이다. 이렇게 폼 데이터를 처리함으로써 표현문이나 스크립틀릿 태그에 request 내장 객체를 이용하여 폼 페이지에서 전달된 값을 얻을 수 있다.
6.1 요청 파라미터의 값 받기
requesst 내장 객체는 웹 브라우저가 서버로 보낸 요청에 대한 다양한 정보를 담고 있어 getParameter()메소드를 이용하여 요청 파라미터의 값을 얻을 수 있다.
String 변수 = request.getParameter(요청 파라미터 이름);
다음은 폼 페이지에서 선택된 체크박스를 전송받는 예이다. 폼 페이지에서 ‘독서’와 ‘영화’를 선택하고 <전송>을 클릭하면 체크박스를 선택한 경우 on이, 선택하지 않은 경우 null 이 전송된다. 이떄 폼 페이지에 설정된 체크박스의 수만큼 request 내장 객체의 getParameter()메소드를 호출하여 전송하는 데이터를 받는다.
[체크박스 데이터를 전달 받는 예]
//index.jsp
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<form action="process.jsp" method="POST">
<p> 독서<input type="checkbox" name="reading" >
운동<input type="checkbox" name="exercise" >
영화<input type="checkbox" name="movie" >
<p> <input type="submit" value="전송">
</form>
</body>
</html>
//process.jsp
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<p> 독서 : <%= request.getParameter("reading")%>
<p> 운동 : <%= request.getParameter("excercise")%>
<p> 영화 : <%= request.getParameter("movie")%>
</body>
</html>
회원가입 양식에서 폼 데이터 전송받기
/ch06/form04.jsp
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<h3>회원 가입</h3>
<form action="form04_process.jsp" name="member" method="post">// 입력 양식에 입력된 데이터를 서버로 전송하여 폼 데이터를 처리할 수 있도록 action 속성 값, method 방식을 작성
<p> 아이디 : <input type="text" name="id"> <input type="button" value="아이디 중복 검사">
<p> 비밀번호 : <input type="password" name="passwd">
<p> 이름 : <input type="text" name="name">
<p> 연락처 : <select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select> - <input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone3">
<p> 성별 : <input type="radio" name="sex" value="남성" checked>남성
<input type="radio" name="sex" value="여성" >여성
<p> 취미 : 독서<input type="checkbox" name="hobby1" checked>
운동<input type="checkbox" name="hobby2" >
영화<input type="checkbox" name="hobby3" >
<p> <textarea name="comment" rows="3" cols="30" placeholder="가입 인사를 입력해주세요"></textarea>
<p> <input type="submit" value="가입하기">
<input type="reset" value="다시 쓰기">
</form>
</body>
</html>
/ch06/form04_process.jsp
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String passwd = request.getParameter("passwd");
String name = request.getParameter("name");
String phone1 = request.getParameter("phone1");
String phone2 = request.getParameter("phone2");
String phone3 = request.getParameter("phone3");
String sex = request.getParameter("sex");
String hobby1 = request.getParameter("hobby1");
String hobby2 = request.getParameter("hobby2");
String hobby3 = request.getParameter("hobby3");
String comment = request.getParameter("comment");
%>
<p> 아이디 : <%=id %>
<p> 비밀번호 : <%=passwd %>
<p> 이름 : <%=name %>
<p> 연락처 : <%=phone1 %> - <%=phone2 %> - <%=phone3 %>
<p> 성별 : <%=sex %>
<p> 취미 : <%=hobby1 %><%=hobby2 %><%=hobby3 %>
<p> 가입 인사 : <%=comment %>
</body>
</html>
회원가입 양식에서 폼 데이터 전송받기
/ch06/form05.jsp
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<h3>회원 가입</h3>
<form action="form05_process.jsp" name="member" method="post">
<p> 아이디 : <input type="text" name="id"> <input type="button" value="아이디 중복 검사">
<p> 비밀번호 : <input type="password" name="passwd">
<p> 이름 : <input type="text" name="name">
<p> 연락처 : <select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select> - <input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone3">
<p> 성별 : <input type="radio" name="sex" value="남성" checked>남성
<input type="radio" name="sex" value="여성" >여성
<p> 취미 : 독서<input type="checkbox" name="hobby" value="독서" checked>
운동<input type="checkbox" name="hobby" value="운동" >
영화<input type="checkbox" name="hobby" value="영화">
<p> <textarea name="comment" rows="3" cols="30" placeholder="가입 인사를 입력해주세요"></textarea>
<p> <input type="submit" value="가입하기">
<input type="reset" value="다시 쓰기">
</form>
</body>
</html>
/ch06/form05_process.jsp
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String passwd = request.getParameter("passwd");
String name = request.getParameter("name");
String phone1 = request.getParameter("phone1");
String phone2 = request.getParameter("phone2");
String phone3 = request.getParameter("phone3");
String sex = request.getParameter("sex");
String[] hobby = request.getParameterValues("hobby"); // 폼페이지에서 입력된 취값을 배열로 얻어오도록 요청 파라미터이름 hobby로 request 내장 객체의 getParameterValues()메소드를 작성한다.
String comment = request.getParameter("comment");
%>
<p> 아이디 : <%=id %>
<p> 비밀번호 : <%=passwd %>
<p> 이름 : <%=name %>
<p> 연락처 : <%=phone1 %> - <%=phone2 %> - <%=phone3 %>
<p> 성별 : <%=sex %>
<p> 취미 : <% //배열에 저장된 취미 값을 출력하도록 표현문 태그를 작성
if(hobby != null){
for (int i=0; i<hobby.length; i++){
out.println(" " + hobby[i]);
}
}
%>
<p> 가입 인사 : <%=comment %>
</body>
</html>
6.2 요청 파라미터의 전체 값 받기
getParameter()메소드를 이용하면 폼 페이지가 서버로 보낸 요청 파라미터 값을 얻을 수 있다. 그런데 입력 데이터가 다수이거나 입력 양식이 다양하면 이를 전송받기 위해 최악의 경우 입력 양식에 맞춰 전달받는 데이터의 수만큼 request내장객체의 getParameter()메소드를 설정해야 한다. 이때 다음과 같은 일괄 처리 메소드를 이용하면 웹 브라우저에서 서버로 전송되는 요청 파라미터를 설정하지 않아도 모든 값을 전달받을 수 있다. 또한 텍스트 박스, 라디오 버튼, 드롭다운 박스와 같은 다양한 유형에 대해 한번에 폼 데이터를 전달받을 수 있다.
폼 데이터의 일괄 처리 메소드
- 메소드 형식 설명
| getParameterNames() | java.util.Enumeration | 모든 입력 양식의 요청 파라미터 이름을 순서에 상관없이 Enumeration(열거형)형태로 전달받는다 |
| hasMoreElements() | Enumeration(열거형)요소가 있으면 true를 반환하고 , 그렇지않으면 false를 반환한다 | |
| nextElement() | Enumeration(열거형)요소를 반환한다 |
다음은 index.jsp 페이지의 체크박스를 처리하는 process.jsp 페이지를 수정하는 예이다. 수정된 process.jsp 페이지는 체크 박스의 수와 상관없이 한번에 모든 데이터를 전달받을 수 있다.
[체크박스 전체 데이터를 전달 받는 예]
//process.jsp
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page import="java.io.*,java.util.*" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<table border="1">
<tr>
<th>요청 파라미터 이름</th>
<th>요청 파라미터 값</th>
</tr>
<%
Enumeration paramNames = request.getParameterNames();
while(paramNames.hasMoreElements()){
String name = (String) paramNames.nextElement();
out.print("<tr><td>" + name + "</td>\\n");
String paramValue = request.getParameter(name);
out.println("<td>" + paramValue + "</td></tr>\\n");
}
%>
</table>
</body>
</html>
회원가입 양식에서 폼 데이터를 한번에 전송받기
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<h3>회원 가입</h3>
<form action="form06_process.jsp" name="member" method="post">
<p> 아이디 : <input type="text" name="id"> <input type="button" value="아이디 중복 검사">
<p> 비밀번호 : <input type="password" name="passwd">
<p> 이름 : <input type="text" name="name">
<p> 연락처 : <select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select> - <input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone3">
<p> 성별 : <input type="radio" name="sex" value="남성" checked>남성
<input type="radio" name="sex" value="여성" >여성
<p> 취미 : 독서<input type="checkbox" name="hobby" value="독서" checked>
운동<input type="checkbox" name="hobby" value="운동" >
영화<input type="checkbox" name="hobby" value="영화">
<p> <textarea name="comment" rows="3" cols="30" placeholder="가입 인사를 입력해주세요"></textarea>
<p> <input type="submit" value="가입하기">
<input type="reset" value="다시 쓰기">
</form>
</body>
</html>
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page import="java.io.*,java.util.*" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<table border="1">
<tr>
<th>요청 파라미터 이름</th>
<th>요청 파라미터 값</th>
</tr>
<%
request.setCharacterEncoding("UTF-8");
Enumeration paramNames = request.getParameterNames();//폼 페이지에서 전송된 요청 파라미터를 받도록 request 내장 객체의 getParamenterNames()메소드를 작성한다
while(paramNames.hasMoreElements()){ //폼 페이지에서 전송된 요청 파라미터가 없을 때까지 반복하도록hasMoreElements()메소드를 작성한다.
String name = (String) paramNames.nextElement();//폼 페이지에서 전송된 요청 파라미터의 이름을 가져오 도록 nextElement()메소드를 작성한다.
out.print("<tr><td>" + name + "</td>\\n"); //폼페이지에서 전송된 요청 파라미터의 이름을 출력하도록 out내장객체의 print()메소드를 작성한다.
String paramValue = request.getParameter(name);//폼 페이지에서 전송된 요청파라미터의 값을 얻어오도록 18행에서 얻어온 요청 파라미터 이름으로 request 내장 객체의 getParameter()메소드를 작성.
out.println("<td>" + paramValue + "</td></tr>\\n");//폼페이지에서 전송된 요청 파라미터의 값을 출력하도록 out 내장 객체의 println()메소드를 작성.
}
%>
</table>
</body>
</html>
07. 상품 등록 페이지 만들기
폼 태그를 적용하여 웹 쇼핑몰의 상품 정보를 등록하는 폼 페이지를 만들고, 사용자로부터 새로운 상품 정보 데이터를 입력받아 상품 정보를 등록하여 출력한다.
상품 정보 등록 페이지 만들기
-웹 쇼핑몰의 상품 정보를 등록하는 페이지를 만들어 보자. addProduct.jsp 파일을 생성하고 다음과 같이 작성한다.
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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"><!-- 입력 양식에 입력된 데이터를 서버로 전송하여 폼 데이터를 처리하도록 form 태그의 action 속성 값, method 방식을 작성 -->
<div class="form-group row">
<label class="col-sm-2">상품 코드</label>
<div class="col-sm-3">
<input type="text" name="productId" 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="name" 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="unitPrice" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">상세 정보</label>
<div class="col-sm-3">
<textarea name="description" cols="50" rows="2" class="form-control"></textarea><!-- 상품 설명값을 여러줄로 입력받도록 textarea 태그를 작성한다 -->
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">제조사</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">분류</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" name="unitInStock" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">상태</label> <!-- 상품 상태값중 하나만 선택 입력받도록 radio로 작성 -->
<div class="col-sm-5">
<input type="radio" name="condition" value="New"> 신규 제품
<input type="radio" name="condition" value="Ole"> 중고 제품
<input type="radio" name="condition" value="Refurbished"> 재생 제품
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-primary" value="등록"> <!-- 입력된 데이터를 서버로 전송하도록 input 태그의 type 속성값을 submit로 작성 -->
</div>
</div>
</form>
</div>
</body>
</html>상품 정보 등록 데이터 처리하기
-웹 쇼핑몰의 상품 정보 등록 페이지에서 입력된 데이터를 저장하는 메소드를 만들고, 새로 등록한 상품 정보를 출력해보자.
[상품 데이터 접근 클래스 만들기]
1.신규 상품 데이터를 저장하는 메소드 만들기 : ProductRepository 클래스에 다음과 같이 추가 작성
package dto;
import java.util.ArrayList;
import dto.Product;
public class ProductRepository {
private ArrayList<Product> listOfProducts = new ArrayList<Product>();
private static ProductRepository instance = new ProductRepository(); //ProductRepository 클래스의 기본 생성자에 대한 객체 변수 instance를 작성한다.
public static ProductRepository getInstance() { //객체 변수 instance 에 대한 Getter()메소드를 작성한다.
return instance;
}
public ProductRepository() {
Product phone = new Product("P1234","iPhone 6s", 800000);
phone.setDescription("4.7-inch, 1334X750 Renina HD display, 8-megapixel iSight Camera");
phone.setCategory("Smart Phone");
phone.setManufacturer("Apple");
phone.setUnitsInStock(1000);
phone.setCondition("New");
Product notebook = new Product("P1235","LG PC 그램",150000);
notebook.setDescription("13.3-inch, IPS LED display , 5rd Generation Intel Core processors");
notebook.setCategory("Notebook");
notebook.setManufacturer("LG");
notebook.setUnitsInStock(1000);
notebook.setCondition("Refurbishe");
Product tablet = new Product("P1236", "Galaxy Tab S", 900000);
tablet.setDescription("212.8*125.6*6.6mm, Super AMOLED display, Octa-Core processor");
tablet.setCategory("Tablet");
tablet.setManufacturer("Samsung");
tablet.setUnitsInStock(1000);
tablet.setCondition("Old");
listOfProducts.add(phone);
listOfProducts.add(notebook);
listOfProducts.add(tablet);
}
public ArrayList<Product>getAllProducts(){
return listOfProducts;
}
//상품 상세 정보 표시하기 chapter05
public Product getProductById(String productId) {
Product productById = null;
for(int i=0; i<listOfProducts.size(); i++) {
Product product = listOfProducts.get(i);
if(product != null && product.getProductId() != null && product.getProductId().equals(productId)){
productById = product;
break;
}
} //객체 변수 listOfProducts 에 저장된 모든 상품 목록에서 상품 아이디와 일치하는 상품을 가져오는 getProductById()메소드를 작성
return productById;
}
public void addProduct(Product product) { //객체변수 listOfProducts 에 새로운 상품 정보를 등록하는 addProduct()메소드를 작성 한다.
listOfProducts.add(product);
}
}2. 신규 상품 등록 처리 페이지 만들기:processAddProduct.jsp 파일을 생성하고 다음과 같이 작성한다.
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page import="dto.Product" %>
<%@ page import="dao.ProductRepository" %>
<%
request.setCharacterEncoding("utf-8"); //한글 깨지지 않기 위해서 인코딩유형을 설정한다.
//폼페이지에서 입력된 상품 아이디~상품 상태 등의 값을 얻어오도록 요청 파라미터 이름 ........으로 request 내장 객체의 getParaneter()메소드를 작성한다.
String productId = request.getParameter("productId");
String name = request.getParameter("name");
String unitPrice = request.getParameter("unitPrice");
String description = request.getParameter("description");
String manufacturer = request.getParameter("manufacturer");
String category = request.getParameter("category");
String unitsInStock = request.getParameter("unitInStock");
String condition = request.getParameter("condition");
//폼 페이지에서 상품 가격이 입력 되지 않은 경우 0 으로, 입력된 경우 정수형으로 변경하도록 작성한다.
Integer price;
if(unitPrice.isEmpty())
price = 0;
else
price = Integer.valueOf(unitPrice);
//폼 페이지에서 상품 재고 수가 입력되지 않은 경우 0 으로, 입력된 경우 정수형으로 변경하도록 작성한다.
long stock = 0;
if(unitsInStock.isEmpty())
stock = 0;
else
stock = Long.valueOf(unitsInStock);
ProductRepository dao = ProductRepository.getInstance();
Product newProduct = new Product();
newProduct.setProductId(productId);
newProduct.setPname(name);
newProduct.setUnitPrice(price);
newProduct.setDescription(description);
newProduct.setManufacturer(manufacturer);
newProduct.setCategory(category);
newProduct.setUnitsInStock(stock);
newProduct.setCondition(condition);
dao.addProduct(newProduct); //폼 페이지에서 입력된 데이터를 저장하도록 ProductRepository 클래스의 addProduct()메소드를 호출한다.
response.sendRedirect("products.jsp"); //products.jsp ㅍ이지로 강제 이동하도록 response 내장 객체의 sendRedirect()메소드를 작성.
%>
3.상품 목록 페이지 수정하기: products.jsp 파일에 신규 등록된 상품을 출력하기 위해 다음과 같이 수정한다.
<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="dto.Product" %>
<%@ page import="dao.ProductRepository" %>
<jsp:useBean id="productDAO" class="dao.ProductRepository" scope="session" />
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>상품목록</title>
</head>
<body>
<jsp:include page="menu.jsp"/>
<div class="jumbotron">
<div class="container">
<h1 class="display-3">상품 목록</h1>
</div>
</div>
<%
//ProductRepository 클래스의 객체변수 instance를 호출하는 getInstance()메소드를 작성한다.
//이를통해 getAllProducts()메소드를 호출하여 반환 결과 값을 ArrayList<Product>객체타입의 변수 listOfProducts에 저장한다.
ProductRepository dao = ProductRepository.getInstance();
ArrayList<Product> listOfProducts = dao.getAllProducts();
//ArrayList<Product> listOfProducts = productDAO.getAllProducts();
%>
<div class="container">
<div class="row" align="center">
<%
for(int i = 0; i<listOfProducts.size();i++){
Product product = listOfProducts.get(i);
%>
<div class="col-md-4">
<h3><%= product.getPname() %></h3>
<p><%= product.getDescription() %></p>
<p><%= product.getUnitPrice() %>원</p>
<p><a href="./product.jsp?id=<%=product.getProductId() %>"class = "btn btn-secondary" role="button"> 상세 정보 »</a>
<!-- 상품 아이디에 대한 상세 정보 페이지가 연결되도록 <상세정보>버튼을 작성 -->
</div>
<%
}
%>
</div>
<hr>
</div>
<jsp:include page="footer.jsp"/>
</body>
</html>4.상품 상세 정보 페이지 수정하기:product.jsp 파일에 신규 등록된 상품 상세 정보를 출력하기 위해 다음과 같이 수정한다.
<%@ page contentType="text/html; charset=utf-8"%>
<!-- 생성한 상품 클래스 dto.Product 패키기를 사용하기 위해 page 디렉티브 태그 import -->
<%@ page import="dto.Product" %>
<!-- 기존에 작성된 useBean액션태그를 없애고 상품접근 클래스 dao.ProductRepository 패키지를 사용하기위해 page디렉티브 태그의 import속성을 작성 -->
<%@ page import="dao.ProductRepository" %>
<!-- 자바빈즈로 생성한 ProductRepository 클래스를 사용하도록 useBean 액션 태그를 작성한다 -->
<//jsp:useBean id="productDAO" class="dao.ProductRepository" scope="session" />
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>상품 상세 정보</title>
</head>
<body>
<jsp:include page="menu.jsp"/>
<div class="jumbotron">
<div class="container">
<h1 class="display-3">상품 정보</h1>
</div>
</div>
<%
String id = request.getParameter("id"); //상품 목록 페이지로부터 전달되는 상품 아이디를 전송받도록 request내장 객체의 getParameter()메소드를 작성
//ProductRepository클래스의 객체 변수 instance를 호출하는 getInstance()메소드를 작성한다.
//이를통해getProductById()메소드를 호출하여 반환 결과 값을 Product 객체 타입의 변수 product에 저장한다.
ProductRepository dao = ProductRepository.getInstance();
Product product = dao.getProductById(id);
//useBean를 사용했을시에 예제
//Product product = productDAO.getProductById(id);
//useBean 액션 태그에 id 속성 값을 통해 ProductRepository클래스의
//getProductById()메소드를 호출하여 반환된 결과 값을 Product 객체 타입의 변수 Product 에 저장하도록 작성한다.
%>
<div class="container">
<div class="row">
<div class="col=md-6"> <!-- Product 객체 타입의 변수 product 에 저장된 상품명, 상품 상세 정보, 상품 코드, 제조사, 분류, 재고 수 , 상품 가격 등을
출력하도록 표현문 태그를 작성 -->
<h3><%=product.getPname() %></h3>
<p><%=product.getDescription()%>
<p> <b>상품 코드 : </b><span class="badge badge-danger">
<%=product.getProductId() %></span>
<p> <b>제조사</b> :<%=product.getManufacturer() %>
<p> <b>분류</b> :<%=product.getCategory() %>
<p> <b>재고 수</b> : <%=product.getUnitsInStock() %>
<h4><%=product.getUnitPrice() %></h4>
<!-- <상품주문>,<상품 목록> 버튼을 작성한다 -->
<p> <a href="#" class="btn btn-info">상품 주문 »</a>
<a href="./products.jsp" class="btn btn-secondary"> 상품 목록 »</a>
</div>
</div>
</div>
<jsp:include page="footer.jsp"/>
</body>
</html>[상품등록페이지 addProduct.jsp]
[상품 목록]
728x90
반응형