본문 바로가기
☁︎KOSTA/☂︎KOSTA-WEB

[KOSTA] Spring 기반 Cloud 서비스 구현 개발자 양성 (Day 45) - forEach(begin,end), mini project(mvc product)

by 하_센세 2022. 10. 6.

2022.10.6 [THU]

- Day 45- 

 

수업 주요 목차

  • forEach(begin, end)
  • Mini Project - Product Managing System

🤖Review

 

 

🔎 JSTL forEach, choose 복습 예제

* table 생성 후 19세 이상이면 성인 아니면 미성년

순번 친구이름 연령대 나이
1 정재현 성인 26
2 이민형 미성년 15
3      

- Servlet

package org.kosta.webstudy16.controller;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.kosta.webstudy16.model.FriendVO;

@WebServlet("/Test10Servlet")
public class Test10Servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		ArrayList<FriendVO> list=new ArrayList<> ();
		list.add(new FriendVO("정재현",27));
		list.add(new FriendVO("이민형",15));
		list.add(new FriendVO("김도영",26));
		list.add(new FriendVO("김정우",25));
		request.setAttribute("friendList", list);
		request.getRequestDispatcher("step10-jstl-forEach-choose.jsp").forward(request, response);
	}
}

- 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>step10-jstl-forEach-choose.jsp</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<style type="text/css">
body {
	text-align: center;
	color: #3b3c45;
}

table {
	width: 100%;
	margin-top: 30px;
}

table, th, td {
	border: 2px solid rgba(255, 255, 255, 0.4);
}

td {
	width: 20%;
	height: 50px;
}

body {
	background: linear-gradient(to right, pink, lightyellow);
	font-family: IBM Plex Sans KR;
}

th {
	height: 50px;
	font-weight: 800;
	background-color: rgba(255, 255, 255, 0.5);
}

.class tr:nth-child(even) {
	backgroun-color: rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
	<div class="container pt-3">
		<h3>친구목록</h3>
		<table>
			<thead class="hello">
				<tr>
					<th>순번</th>
					<th>친구이름</th>
					<th>연령대</th>
					<th>나이</th>
				</tr>
			</thead>
			<tbody>
				<tr class="test">
					<c:forEach items="${requestScope.friendList}" var="friend"
						varStatus="count">
						<td>${count.count}</td>
						<td>${friend.name}</td>
						<c:choose>
							<c:when test="${friend.age>=20}">
								<td>성인</td>
							</c:when>
							<c:otherwise>
								<td>미성년</td>
							</c:otherwise>
						</c:choose>
						<td>${friend.age}</td>
						<tr>
					</c:forEach>
			</tbody>
		</table>
	</div>
</body>
</html>

↓

 

</c:forEach> 위치가 생각보다 중요한 것 같다. 맨처음에 한줄씩 출력이 안되고 쭉 이어져서 나와서 다시 찬찬히 살펴보니 forEach가 반복문이라 나이까지 보여주고 닫아줘야 한줄씩 출력이 되었다.

 

예제 2번 3번 include 

주의할 점은 공통으로 사용할 jsp파일에 선언부 없이 공통적으로 사용할 코드들만 작성되어 있어야 한다는 것! 왜냐하면 나중에 JavaScript나 후속 작업시에 에러가 날 수 있기때문이다.

 

🔎 Eclipse 실습 내용

 

1. forEach(begin, end)

  • 숫자 1부터 5까지 출력한다.
  • Test11Servlet에서 request 객체에 공유한 Pagination 객체의 정보를 이용해 페이지를 보여준다.
  • jstl set을 이용해서 코드를 간결하게 만들어 본다.

-Servlet

package org.kosta.webstudy16.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.kosta.webstudy16.model.Pagination;

@WebServlet("/Test11Servlet")
public class Test11Servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Pagination pagination=new Pagination();
		pagination.setStartPage(5);
		pagination.setEndPage(9);
		pagination.setPreviousPageGroup(true);
		pagination.setNextPageGroup(false);
		request.setAttribute("pagination", pagination);
		request.getRequestDispatcher("step11-jstl-forEach-begin-end.jsp").forward(request, response);
	}
}

-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>step11-jstl-forEach-begin-end.jsp</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container pt-3">
		<h5>step11-jstl-forEach-begin-end</h5>
		<c:forEach begin="1" end="5" var="page">
	${page}
</c:forEach>
	<hr>
		<ul class="pagination">
			<c:if test="${requestScope.pagination.previousPageGroup}">
				<li class="page-item"><a class="page-link" href="#">Previous</a></li>
			</c:if>
			<c:forEach  begin="${requestScope.pagination.startPage}" end="${requestScope.pagination.endPage}" var="pagination"> <%-- items는 리스트나 배열로 받아올 때 사용 --%>
				<li class="page-item"><a class="page-link" href="#">${pagination}</a></li>
			</c:forEach>
			<c:if test="${requestScope.pagination.nextPageGroup}">
				<li class="page-item"><a class="page-link" href="#">Next</a></li>
			</c:if>
		</ul>
	<hr>
		<c:set var="p" value="${requestScope.pagination}" />
		<ul class="pagination">
			<c:if test="${p.previousPageGroup}">
				<li class="page-item"><a class="page-link" href="#">Previous</a></li>
			</c:if>
			<c:forEach  begin="${p.startPage}" end="${p.endPage}" var="pagination"> <%-- items는 리스트나 배열로 받아올 때 사용 --%>
				<li class="page-item"><a class="page-link" href="#">${pagination}</a></li>
			</c:forEach>
			<c:if test="${p.nextPageGroup}">
				<li class="page-item"><a class="page-link" href="#">Next</a></li>
			</c:if>
		</ul>
		
	</div>
</body>
</html>

 

↓

 

2. JSTL import(or jsp include) 적용하지 않은 사례

-Sevlet

package org.kosta.webstudy16.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Test12Servlet")
public class Test12Servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.getRequestDispatcher("step12-jstl-import-test.jsp").forward(request, response);
	}
}

-JSP test 1

<%@ 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>Insert title here</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container pt-3">
		<ul class="nav">
			<li class="nav-item"><a class="nav-link" href="#">상품</a></li>
			<li class="nav-item"><a class="nav-link" href="#">고객정보</a></li>
			<li class="nav-item"><a class="nav-link" href="#">QnA</a></li>
			<!-- 
  			<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
			-->
		</ul>
		<br>
		<br> step12 main 1 화면입니다. <a href="step12-jstl-import-test2.jsp">main 2</a>
	</div>
</body>
</html>

-JSP test 2

<%@ 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>Insert title here</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container pt-3">
		<ul class="nav">
			<li class="nav-item"><a class="nav-link" href="#">상품</a></li>
			<li class="nav-item"><a class="nav-link" href="#">고객정보</a></li>
			<li class="nav-item"><a class="nav-link" href="#">QnA</a></li>
<!-- 
 		    <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
-->
		</ul>
		<br>
		<br> <font color="blue">step12 main2 화면입니다.</font> <a
			href="step12-jstl-import-test.jsp">main 1</a>
	</div>
</body>
</html>

↓

3. JSTL import(or jsp include) 적용한 사례

- Servlet

package org.kosta.webstudy16.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Test13Servlet")
public class Test13Servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.getRequestDispatcher("step13-jstl-import-test.jsp").forward(request, response);
	}
}

- JSP Header

  • header 영역 jstl import 대상이 되므로 header에서 필요한 컨텐트만 정의한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<ul class="nav">
	<li class="nav-item"><a class="nav-link" href="#">상품</a></li>
	<li class="nav-item"><a class="nav-link" href="#">고객정보</a></li>
	<li class="nav-item"><a class="nav-link" href="#">QnA</a></li>
	<!--
	<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a> 
	</li>
	  -->
</ul>
<br>
<br>

-JSP test 1

<%@ 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>step13 import test1</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container pt-3">
		<c:import url="step13-header.jsp"></c:import>
		step13 main 1 화면입니다. <a href="step13-jstl-import-test2.jsp">main 2</a>
	</div>
</body>
</html>

-JSP test 2

<%@ 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>step13 import test2</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container pt-3">
		<c:import url="step13-header.jsp"></c:import>
		<font color="blue">step13 main 2 화면입니다.</font> <a
			href="step13-jstl-import-test.jsp">main 1</a>
	</div>
</body>
</html>

↓

 

 

MINI MINI PROJECT

- 요구분석 : 상품을 등록한다.
상품번호로 상품정보를 조회한다.
상품 리스트(최근등록 순서대로)
 
- 환경설정 : library - jstl
- 설계 : ERD를 이용한 DB설계
UML을 이용한 application 설계
UI 설계


- 구현 : 1차 개발 -> 2차 개발

org.kosta.product.model

Model : ProductVO, ProductDAO

View : index.jsp, 
findbyno-form.jsp, findbyno-ok.jsp, findbyno-fail.jsp 
register-form.jsp, register-result.jsp
product-list.jsp

org.kosta.product.controller

Controller :  FindProductByNoServlet
RegisterServlet
ProductListServlet

 

 

-Header

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<ul class="nav">
	<li class="nav-item"><a class="nav-link" href=" findbyno-form.jsp">조회</a></li>
	<li class="nav-item"><a class="nav-link" href="register-form.jsp">등록</a></li>
	<li class="nav-item"><a class="nav-link" href="ProductListServlet">상품목록</a></li>
	<!--
	<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a> 
	</li>
	  -->
</ul>
<br>
<br>

- VO

package org.kosta.product.model;

public class ProductVO {
	private long productNo;
	private String name;
	private String maker;
	private int price;
	public ProductVO() {
		super();
	}
	public ProductVO(long productNo, String name, String maker, int price) {
		super();
		this.productNo = productNo;
		this.name = name;
		this.maker = maker;
		this.price = price;
	}
	public long getProductNo() {
		return productNo;
	}
	public void setProductNo(long productNo) {
		this.productNo = productNo;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getMaker() {
		return maker;
	}
	public void setMaker(String maker) {
		this.maker = maker;
	}
	public int getPrice() {
		return price;
	}
	public void setPrice(int price) {
		this.price = price;
	}
	@Override
	public String toString() {
		return "상품정보 [productNo=" + productNo + ", name=" + name + ", maker=" + maker + ", price=" + price + "]";
	}
}

 

 

- DAO

package org.kosta.product.model;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

public class ProductDAO {
	private static ProductDAO instance=new ProductDAO();
	private ProductDAO() {}
	public static ProductDAO getInstance() {
		return instance;
	}
	
	public Connection getConnection() throws SQLException {
		return DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:xe","scott","tiger");
	}
	
	public void closeAll(PreparedStatement pstmt, Connection con) throws SQLException {
		if (pstmt != null) {
			pstmt.close();
		}
		if (con != null) {
			con.close();
		}
	}
	public void closeAll(ResultSet rs, PreparedStatement pstmt, Connection con) throws SQLException {
		if (rs != null) {
			rs.close();
		}
		closeAll(pstmt, con);
	}
	public ProductVO findProductByNo(Long productNo) throws SQLException {
		Connection con=null;
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		ProductVO productVO=null;
		try {
			con=getConnection();
			String sql="SELECT product_no,name,maker,price  FROM MVC_PRODUCT WHERE product_no=?";
			pstmt=con.prepareStatement(sql);
			pstmt.setLong(1, productNo);
			rs=pstmt.executeQuery();
			if(rs.next()) {
				productVO=new ProductVO(productNo,rs.getString("name"),rs.getString("maker"),rs.getInt("price"));
			}
			return productVO;
		} finally {
			closeAll(rs,pstmt,con);
		}
	}
	public ArrayList<ProductVO> productList() {
		ArrayList<ProductVO> list=new ArrayList<>();
		Connection con=null;
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		try {
			con=getConnection();
			String sql="SELECT product_no,name,maker,price  FROM MVC_PRODUCT ORDER BY product_no DESC";
			pstmt=con.prepareStatement(sql);
			rs=pstmt.executeQuery();
			while(rs.next()) {
				list.add(new ProductVO(rs.getLong("product_no"),rs.getString("name"),rs.getString("maker"),rs.getInt("price")));
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return list;
	}
	
	public void register(ProductVO productVO) {
		Connection con=null;
		PreparedStatement pstmt=null;
		try {
			con=getConnection();
			String sql="INSERT INTO mvc_product(product_no,name,maker,price) VALUES (mvc_product_seq.nextval,?,?,?)";
			pstmt=con.prepareStatement(sql);
			pstmt.setString(1, productVO.getName());
			pstmt.setString(2, productVO.getMaker());
			pstmt.setInt(3, productVO.getPrice());
			pstmt.executeUpdate();
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}	
}
  • 싱글톤패턴 ProductDAO에 적용해서 메모리를 아낀다.
  • getConnection, closeAll 메소드 만들어준다.

 

1. 상품 조회

- JSP (form)

<%@ 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>findbyno-form.jsp</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container pt-3">
		<c:import url="header.jsp"></c:import>
		<form action="FindProductByNoServlet" method="get">
			<input type="number" name="productNo" placeholder="상품 넘버"
				required="required">
			<button type="submit">검색</button>
		</form>
	</div>
</body>
</html>

↓

- Servlet

package org.kosta.product.controller;

import java.io.IOException;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.kosta.product.model.ProductDAO;
import org.kosta.product.model.ProductVO;

@WebServlet("/FindProductByNoServlet")
public class FindProductByNoServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		ProductDAO dao=ProductDAO.getInstance();
		Long productNo=Long.parseLong(request.getParameter("productNo"));
		try {
			ProductVO pvo = dao.findProductByNo(productNo);
			if(pvo!=null) {
				request.setAttribute("productNo",pvo);
				request.getRequestDispatcher("findbyno-ok.jsp").forward(request, response);				
			} else {
				request.getRequestDispatcher("findbyno-fail.jsp").forward(request, response);		
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}	
	}
}
  • DAO객체 새로 생성하지 않고 클래스 로딩시에 이미 메모리에 적재된 DAO객체를 가져다가 쓴다.
  • form에서 받아온 productNo의 타입이 String이기 때문에 Long 타입으로 캐스팅해준다.
  • ProductVO 객체 생성해서 findProductByNo(productNo) 메소드를 참조해준다.
  • pvo 가 null이 아니면(즉, productNo에 해당하는 상품이 있으면) setAttribute에 담아서 ok jsp로 forward 시켜준다.
  • 만약 null이면 fail jsp로 forward해준다.

 

- JSP (OK)

<%@ 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>findbyno-ok.jsp</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container pt-3">
		<c:import url="header.jsp"></c:import>
		<table class="table table-hover">
			<thead>
				<tr>
					<th>상품번호</th>
					<th>상품명</th>
					<th>제조사</th>
					<th>가격</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>${requestScope.productNo.productNo}</td>
					<td>${requestScope.productNo.name}</td>
					<td>${requestScope.productNo.maker}</td>
					<td>${requestScope.productNo.price}</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>
  • 반복되는 header는 import해준다.
  • 어차피 결과는 하나의 상품이기때문에 바로 servlet에서 set해준 이름과 value를 가져온다.

↓

 

 

- JSP (Fail)

<%@ 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>findbyno-fail.jsp</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container pt-3">
		<c:import url="header.jsp"></c:import>
		<script type="text/javascript">
			alert("상품이 존재하지 않습니다.");
			location.href = "findbyno-form.jsp";
		</script>
	</div>
</body>
</html>
  • 자바스크립트를 이용해 alert를 띄워준 뒤 다시 조회 페이지로 이동시킨다.

↓

 

 

2. 상품 등록

- JSP (form)

<%@ 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>register-form.jsp</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container pt-3">
		<c:import url="header.jsp"></c:import>
		<form action="RegisterServlet" method="post">
			<input type="text" name="productName" placeholder="상품명"
				required="required"> <input type="text" name="makerName"
				placeholder="제조사" required="required"> <input type="number"
				name="price" placeholder="가격" required="required">
			<button type="submit">등록</button>
		</form>
	</div>
</body>
</html>

 

  • 상품 넘버는 시퀀스를 통해 자동 부여될 예정이기 때문에 상품명, 제조사, 가격만 입력을 받는다.

↓

 

- Servlet

package org.kosta.product.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.kosta.product.model.ProductDAO;
import org.kosta.product.model.ProductVO;

@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		ProductDAO dao = ProductDAO.getInstance();
		Long productNo = 0L;
		String productName = request.getParameter("productName");
		String makerName = request.getParameter("makerName");
		int price = Integer.parseInt(request.getParameter("price"));
		dao.register(new ProductVO(productNo, productName, makerName, price));
		response.sendRedirect("register-result.jsp");
	}
}
  • 상품등록의 경우 새로고침을 했을 때 데이터에 영향을 줄 수 있으므로 redirect 방식으로 제어를 이동시켰다.(정보가 url에 표시되지 않도록 get방식이 아닌 post방식을 택했다.)
  • 원래는 productNo가 빠진 생성자를 VO에 오버로딩 하려고 했으나 강사님께 여쭤본 결과 0L(또는 아무 long형 숫자)로 지정해줘도 된다고 하셔서 (& 귀찮아서) 0L로 참조해줬다.
  • 나머지 정보들은 getParameter을 통해서 가지고 와서 변수로 선언해주었다.
  • dao.register()의 변수 안에 새로운 VO객체를 만들어 넣어준 뒤 실행시키고 result jsp로 redirect시켜줬다. 

- JSP (result)

<%@ 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>Insert title here</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container pt-3">
		<script type="text/javascript">
			alert("상품등록이 완료되었습니다!");
			location.href="register-form.jsp";
		</script>
	</div>
</body>
</html>

↓

 

3. 전체 상품 목록

- Servlet

package org.kosta.product.controller;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.kosta.product.model.ProductDAO;
import org.kosta.product.model.ProductVO;

@WebServlet("/ProductListServlet")
public class ProductListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		ProductDAO dao = ProductDAO.getInstance();
		ArrayList<ProductVO> list = dao.productList();
		request.setAttribute("productList", list);
		request.getRequestDispatcher("product-list.jsp").forward(request, response);
	}
}
  • ArrayList 객체를 만들어 dao.productList()를 실행하면 얻게 되는 list를 참조시킨다.
  • 그리고 그 list를 setAttribute해준 뒤 jsp로 forward 시켜준다.

 

- JSP (result)

<%@ 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>product-list.jsp</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container pt-3">
		<c:import url="header.jsp"></c:import>
		<h3>상품목록</h3>
		<table class="table table-hover">
			<thead>
				<tr>
					<th>목차</th>
					<th>상품번호</th>
					<th>상품명</th>
					<th>제조사</th>
					<th>가격</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${requestScope.productList}" var="list"
					varStatus="count">
					<tr>
						<td>${count.count}</td>
						<td>${list.productNo}</td>
						<td>${list.name}</td>
						<td>${list.maker}</td>
						<td>${list.price}</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
</body>
</html>
  • forEach items에 servlet이 보내준 list를 불러온 뒤 list라고 이름을 붙여준다.
  • 목차를 만들기 위해 varStatus도 이름을 붙여준다.
  • 그 이후 목차, 상품 넘버, 이름, 제조사, 가격을 순서대로 테이블에 넣어준다.

↓

어려운데 짱재밌....짜릿하다🤡

하지만 안예뻐서 아직 완전 짜릿하지는 않아서 시간 날 때 또 꾸며야지 ㅎ

 

 

//오늘의 숙제

복습

'☁︎KOSTA > ☂︎KOSTA-WEB' 카테고리의 다른 글

[KOSTA] Spring 기반 Cloud 서비스 구현 개발자 양성 (Day 47) - Front Controller Design Pattern(실습위주), Git  (0) 2022.10.12
[KOSTA] Spring 기반 Cloud 서비스 구현 개발자 양성 (Day 46) - git basic, login/out 실습  (0) 2022.10.09
[KOSTA] Spring 기반 Cloud 서비스 구현 개발자 양성 (Day 44) - JSP(EL, JSTL)  (1) 2022.10.05
[KOSTA] Spring 기반 Cloud 서비스 구현 개발자 양성 (Day 43) - Forward&Redirect, Singleton Design Pattern  (0) 2022.10.04
[KOSTA] Spring 기반 Cloud 서비스 구현 개발자 양성 (Day 42) - Model 2 MVC  (0) 2022.09.30

관련글

티스토리툴바