[쇼핑몰 홈페이지 제작] 상품과 회원 관리 6 - 상품 상세보기 페이지 만들기

다음으로 상품 상세 페이지를 만들어보겠다.

---

 

 

 

 

상품 상세보기 페이지 만들기

특정 상품을 클릭하면 상품 상세보기 화면으로 이동한다. 상품을 클릭하면 "NonageServlet?command=product_ detail&pseq=${productVO.pseq}"가 요청되어 상품 상세 보기 페이지로 이동해야 하기 때문에 액션 클래스를 만들고 이 요청을 처리할 코드를 ActionFactory에 추가한다. 액션 클래스에서는 상품 번호로 상품 정보 하나를 얻어오기 위한 메서드를 호출해야 한다.

---

 

 

 

[직접 해보기] 상품 상세 보기 페이지로 이동하도록 하는 액션 클래스

 

 

화면 상단의 주 메뉴에 따라 화면 좌측의 서브 메뉴는 달라진다. 하지만 동일한 주 메뉴 내에서는 공통된 서브 페이지가 제공된다. 다음은 상품 관련 페이지에서만 공통적으로 사용되는 서브 이미지와 서브 페이지이다.

 

 

서브 페이지에서만 공통적으로 사용되는 파일은 다음과 같다.

---

 

 

우선 상품 상세 보기를 작성하기에 앞서 상품 정보를 위한 페이지에서 공통적으로 사용되는 페이지부터 만들어 보자. 상품과 관련된 작업을 위해서 사용하는 모든 페이지는 product 폴더에서 관리되기 때문에 product 폴더를 생성하고 여기에 sub_img.html과 sub_menu.html 파일을 추가한다.

 

 

 

 

 

폴더를 만들고 html 파일을 이처럼 추가했다.

---

 

 

 

 

[직접 해보기] 서브 페이지에서 이미지를 출력하는 파일

---

 

 

 

 

[직접 해보기] 서브 페이지에서 좌측 메뉴를 구성하는 파일

---

 

 

 

 

 

[직접 해보기] 상품 상세 보기를 위한 JSP 페이지

 

1. 코드 작성하기

 

여기서 h2 태그에 노란줄이 뜨는 문제를 수정해 보겠다. <h2> 태그에서 노란 줄이 뜨는 이유는 주로 HTML 구조나 IDE 설정, 또는 해당 태그 안의 EL(Expression Language) 표현식(${productVO.name})과 관련이 있을 가능성이 크다.

---

 

 

2. 문제점 파악하기

 

1. 태그 중첩 문제

<h2> 태그가 HTML5 문법 상 허용되지 않는 구조나 중첩된 태그 안에 있을 경우 경고가 발생할 수 있다. 예를 들어, a 태그 안에 h2 태그를 넣는 것은 HTML5에서 허용되지 않는다.

해결 방법

<h2>를 a 태그 밖으로 이동

<a href="NonageServlet?command=product_detail&pseq=${productVO.pseq}">         
  <span style="float: left;">
    <img  src="product_images/${productVO.image}"  />
  </span>              
</a>
<h2> ${productVO.name} </h2>

 

 

2. EL 표현식 관련 문제

${productVO.name}는 JSP의 EL(Expression Language) 구문으로, productVO 객체 또는 name 속성이 null일 경우 경고가 발생할 수 있다.

해결 방법

1. productVO와 name 값 확인

• EL에서 productVO와 name이 null이 아닌지 확인

request.setAttribute("productVO", productVO);

 

2. 기본값 설정

• EL에서 null일 경우 기본값을 출력하도록 설정

<h2> ${productVO.name != null ? productVO.name : '상품 이름 없음'} </h2>

 

이 내용을 반영하여 수정해보았다.

---

 

 

 

3. 코드 수정하기

 

이제 경고 표시가 뜨지 않는다.

---

 

 

 

index.jsp 수정하기

여기도 노란 줄이 뜨는 부분을 보기가 좋지 않아 수정했다. 소스 코드는 완성본에도 이런 표시가 떠서 그냥 이참에 수정해 보았다. 앞선 코드를 수정해 보니 여기서도 이 문제를 적용하면 해결될 것 같았다.

 

이제 깨끗하니 보기가 좋다.

---

 

 

 

 

학습을 마치고

이렇게 상품 상세 페이지의 코드를 작성하며 JPS 파일을 만들어보았다. 코드를 수정하는 건 좀 어려웠지만 깨끗한 코드를 볼 때 기분이 정말 좋다. 난 조금이라도 이런 노란 줄을 허용하지 않는다. 눈에 보기에 좋은 것이 먹기에도 좋다는 말처럼 난 가독성과 미적 기능을 중요하게 생각하는 것 같다.

오늘 아침까지는 홈페이지 제작 공부를 이어가 볼 것이다.