[Spring][쇼핑몰 프로젝트][33] 메인화면 네비 기능(<a>태그 동적 추가)

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

 

목표

카테고리 <a>태그 동적 추가

 

 저번 포스팅에서 상품 네비에서 화면 이동 <a> 태그가 담길 틀을 완성했습니다. 이번 포스팅에선 <a> 태그가 동적으로 추가되도록 하는 것이 목표입니다. 

 

 

 

 

순서

1. 구현 방향

2. BookMapper

3. BookService

4. BookController.java

5. main.jsp

4. 카테고리 input 태그 추가(search.jsp)[2021-09-28 추가]

 

 

 

1. 구현 방향

  아래의 태그 코드는 저번 포스팅에서 작성한 <a>태그는 입니다.

 

<a href="/search?type=C&cateCode=202001">교양</a>

 

 이러한 <a>태그를 카테고리 개수만큼 추가해주어야 하는데, 각 <a> 태그에서 달라져야 할부분은 '/search' url로 넘겨질 'cateCode'데이터와 사용자에게 보여줄 '카테고리 이름(cateName)' 두 가지입니다. 

 

그림 1-1

 

 위의 두 가지 정보를 서버에서 요청하고 반환 받아서 뷰에 출력되도록 만들 것입니다.

 

 전체 적인 방향을 대략적으로 설명을 하면 BookController.java 객체에서 Service로, Service에서 Mapper로 DB에 각 카테고리의 'cateCode'와 'cateName'에 대한 데이터를 요청을 하고, 카테고리 데이터가 담긴 List 객체로 반환받도록  할 것입니다. (요청한 데이터는 하나의 카테고리가 아니라 여러 개의 카테고리 데이터입니다. 따라서 각각의 카테고리 데이터 'cateCode'와 'cateName'을 이전에 작성해둔 CateVO객체에 담고 그렇게 담긴 CateVO들을 List 자료구조에 담아서 반환되도록 작성을 할 것입니다. )

 

 이렇게 전달받은 List 자료구조에 담긴 카테고리 데이터들을 뷰로 전달하여 JSTL의 <c:foreach>태그를 사용하여 <a> 태그들이 출력이 되도록 만들 것입니다. (목록 페이지에 상품 리스트 출력과 동일합니다.)

 

 작업 순서는 Mapper -> Service -> Controller -> View 순으로 진행하겠습니다. 

 

2. BookMapper

 

 하나의 메서드를 작성하여 모든 카테고리를 요청해도 됩니다. 하지만 그렇게 되면 View 혹은 Controller에서 처리해 주어야 할 것들이 많아집니다. 포스팅하는 것들은 성능 이런 걸 떠나서 비슷 한 기능을 구현하는 것이 목표이기 때문에 좀 더 간단하게 처리하기 위해서 '국내', '국외' 카테고리 별로 데이터를 요청하고 반환하도록 두 개의 메서드를 작성하겠습니다.

 

 "BookMapper.java" 인터페이스에 '국내', '국외' 범주의 카테고리 리스트를 반환해주는 두 개의 메서드 선언부를 추가해줍니다. 

 

	/* 국내 카테고리 리스트 */
	public List<CateVO> getCateCode1();
	
	/* 외국 카테고리 리스트 */
	public List<CateVO> getCateCode2();

 

그림 2-1

 

 

 "BookMapper.xml"에서 앞서 선언한 두 개의 메서드가 실행할 쿼리문을 추가해줍니다.

 

	<!-- 국내 카테고리 리스트 -->
	<select id="getCateCode1" resultType="com.vam.model.CateVO">
	
		<![CDATA[
			select * from vam_bcate where cateCode > 100000 and cateCode < 200000
		]]>
	</select>
	
	<!-- 외국 카테고리 리스트 -->
	<select id="getCateCode2" resultType="com.vam.model.CateVO">
	
		<![CDATA[
			select * from vam_bcate where cateCode > 200000 and cateCode < 300000
		]]>
	
	</select>

 

그림 2-2

 

 

 너무 단순한 쿼리문이어서 이번엔 Junit 테스트를 생략하였습니다. 

 

 3. BookService

 

  BookMapper에서 작성한 메서드를 호출하는 Service 메서드를 추가해주겠습니다. BookService.java 인터페이스에 아래의 두 개의 메서드 선언문을 추가해줍니다.

 

	/* 국내 카테고리 리스트 */
	public List<CateVO> getCateCode1();
	
	/* 외국 카테고리 리스트 */
	public List<CateVO> getCateCode2();

 

그림 3-1

 

 

  BookServiceImpl.java 클래스에 앞서 선언한 메서드를 오버라이딩 하여 구현부를 작성해줍니다.

 

	/* 국내 카테고리 리스트 */
	@Override
	public List<CateVO> getCateCode1() {
		
		log.info("getCateCode1().........");
		
		return bookMapper.getCateCode1();
	}

	/* 외국 카테고리 리스트 */
	@Override
	public List<CateVO> getCateCode2() {
		
		log.info("getCateCode2().........");
		
		return bookMapper.getCateCode2();
	}

 

그림 3-2

 

 

4. BookController

 Controller에선 앞서 작성한 메서드를 요청하고, 반환받은 결과를 Model 객체를 활용하여 main.jsp 에 전달하는 작업을 해 줄 것입니다.

 

 "/main" url 매핑 메서드에 파라미터 Model을 추가해줍니다. 

 

 

 

 카테고리 리스트를 요청하는 Service 메서드를 요청하고 반환받은 값을 model 객체를 통해 뷰(view)로 전달하도록 코드를 코드를 추가해줍니다.

 

		model.addAttribute("cate1", bookService.getCateCode1());
		model.addAttribute("cate2", bookService.getCateCode2());

 

그림 4-2

 

 

5. main.jsp

 <c:foreach> 태그를 활용해서 <a> 태그가 동적으로 추가될 수 있도록 '.dropdown-content' <div> 태그 내부에 추가해줍니다.

 

		    	<c:forEach items="${cate1}" var="cate"> 
		    		<a href="search?type=C&cateCode=${cate.cateCode}">${cate.cateName}</a>
		    	</c:forEach>
                
		    	<c:forEach items="${cate2}" var="cate"> 
		    		<a href="search?type=C&cateCode=${cate.cateCode}">${cate.cateName}</a>
		    	</c:forEach>

 

 

 

 서버를 실행시켜서 정상적으로 출력이 되는지 확인합니다.

 

그림 5-2

 

그림 5-3

 

 

 <a> 태그들을 클릭하여 '상품 목록' 페이지로 이동이 되는지 확인합니다.

 

그림 5-4

 

그림 5-5

 

4. 카테고리 input 태그 추가(search.jsp)[2021-09-28 추가]

 페이지 이동 인터페이스를 눌렀을 때 서버로 전송 되어질 '페이지 정보'가 담긴 id 속성이 "moveForm" <form>태그에는 카테고리 코드를 담는 <input>이 없습니다. 따라서 아래의 코드를 <form>태그에 추가 해줍니다.

 

<input type="hidden" name="cateCode" value="<c:out value="${pageMaker.cri.cateCode}"/>">

 

 

 

 

 

 

 

REFERENCE

• 코드로배우는 스프링 웹 프로젝트(남가람북스)

 

 

DATE

• 2020.09.28