[Spring] Store - Product Detail

Product의 info 아이콘을 를 누르면 Product Detail 페이지 (상세 페이지)로 이동할 수 있도록 구현한다.

 

 

뷰 수정

 

<td> <img src="<c:url value="/resources/images/${product.imageFilename}"/>"
alt="image" style="width:50%"/></td>

width:100% -> 50%

style의 width를 줄여 이미지 크기를 줄여주었다.

 

 

fontawesome 페이지에서 아이콘 가져오기(잘 작동되지 않으니 참고만 하기)

 

https://fontawesome.com/

Font Awesome

 

 

해당 코드를 카피하여 아이콘을 넣고 싶은 곳에 복사해준다.

 

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<div class="container-wrapper">
	<div class="container">
		<h2>All Products</h2>
		<p>착한 가격으로 상품을 살펴보세요 :)</p>
		<table class="table table-striped">
			<thead>
				<tr class="bg-success">
					<th>Photo Thumb</th>
					<th>Name</th>
					<th>Category</th>
					<th>Price</th>
					<th>Manufacturer</th>
					<th>UnitInStock</th>
					<th>Description</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="product" items="${products}">
					<tr>
						<td> <img src="<c:url value="/resources/images/${product.imageFilename}"/>"
									alt="image" style="width:60%"/></td>
						<td>${product.name}</td>
						<td>${product.category}</td>
						<td>${product.price}</td>
						<td>${product.manufacturer}</td>
						<td>${product.unitInStock}</td> 
						<td>${product.description}</td>
						<td> <i class="fa fa-info-circle"></i> </td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
</div>

 

-실행화면

 

 

info 아이콘을 버튼으로 만들어주기

 

아이콘에 <a> 태그의 href 속성을 사용하여 링크 걸어주기

<td><a href="<c:url value = "/viewProduct/${product.id}"/>" ><i class="fa fa-info-circle"></i></a></td>

 

-실행화면

info 아이콘에 마우스를 놓을 시 url 뒤에 Product id가 뜨는 것을 확인할 수 있다. 

 

 

Controller 구현

 

Datail view page로 가기위한 Controller를 구현한다.

- ProductController.java

	@RequestMapping("/viewProduct/{productId}")
	public String viewProduct(@PathVariable int productId, Model model) {
		
		Product product = productService.getProductById(productId);
		
		model.addAttribute("product", product);
		
		return "viewProduct";
	}

@PathVariable으로 path의 값을 id에 넣는다.

 

@PathVariable

• restful 서비스의 url 형태이다. 
• 클라이언트에서 URL에 파라미터를 전달하는 url에서 각 구분자에 들어오는 값을 처리해야 할 때 사용한다.
• http://0.0.0.1/index/1 (restful 서비스의 url 형태 ) 와 같이 Rest api에서 값을 호출할 때 사용한다.

@PathVariable 사용법 

@RequsetMapping의 URL 정의 & Method내의 파라미터 부분에 정의

• @RequestMapping 어노테이션 값으로 {템플릿 변수} 설정
• @PathVariable 어노테이션으로 {템플릿변수}와 동일한 이름을 가지는 파라미터를 추가.
  -> RequestMapping에 있는 변수는 PathVariable 의 동일한 이름의 파라미터에 매핑된다.

 

템플릿(template)

• 템플릿이란 매개변수의 타입에 따라 함수나 클래스를 생성하는 메커니즘을 의미한다.
• 템플릿은 타입이 매개변수에 의해 표현되므로, 템플릿을 사용하면 타입마다 별도의 함수나 클래스를 만들지 않고, 여러 타입에서 동작할 수 있는 단 하나의 함수나 클래스를 작성하는 것이 가능하다.

 

 

Datail view page를 위한 viewProduct 뷰 생성

 

tiles 에 viewProduct 뷰를 정의한다.

-tiles.xml

  <definition name="viewProduct" extends="base">
    <put-attribute name="title" value="Detail view page" />
    <put-attribute name="body" value="/WEB-INF/views/viewProduct.jsp" />
  </definition>

 

 

Grid Option

 

 

https://getbootstrap.com/docs/4.0/layout/grid/

Grid system

위의 링크를 참고하여 row를 정한다.

2개의 열을 사용할 예정이기 때문에 <div class="col-md-6"> 를 사용해준다.

 

- viewProduct.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

	<div class="container-wrapper">
		<div class="container">
			
			<h2>All Detail</h2>
			<p class = "lead"> Here is the detail information of the product</p>
			
			<div class="row">
				<div class="col-md-6">
					<img src="<c:url value="/resources/images/${product.imageFilename}"/>" alt ="image" style="width:80%"/>
				</div>
				
				<div class="col-md-6">
					<h3>${product.name}</h3>
					<p><strong> Description : </strong> ${product.description}</p>
					<p><strong> Manufacturer : </strong> ${product.manufacturer}</p>
					<p><strong> Category : </strong> ${product.category}</p>
					<p><strong> Price : </strong> ${product.price} 원</p>
				</div>
			</div>
			
		</div>
	</div>

 

-실행화면

 

 

 

---

https://elfinlas.github.io/2018/02/18/spring-parameter/

Spring에서 @RequestParam과 @PathVariable

http://www.tcpschool.com/cpp/cpp_template_function

코딩교육 티씨피스쿨

https://kkangdda.tistory.com/36