반응형

 

도서 쇼핑몰 search

 

 

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<title>도서 목록</title>
<script type="text/javascript">
$(function(){
	$("#btnSearch").on("click",function(){
		let keyword = $("input[name='keyword']").val();
		
		//json오브젝트
		let data = {
			"keyword":keyword
		};
		
		console.log("data : ", data);
		
		$(this).parent().submit();
	});
});
</script>
</head>
<body>
<h3>도서 목록</h3>
<p>
	<!-- action속성 및 값이 생략 시, 현재 URI(/list)를 재요청. 
		method는 GET(form 태그의 기본 HTTP 메소드는 GET임) 
	param : keyword=알탄
	요청URI : /list?keyword=알탄 or /list or /list?keyword=
	요청파라미터 : keyword=알탄
	요청방식 : get
	-->
	<form>
		<input type="text" name="keyword" value="" placeholder="검색어를 입력하세요"/>
		<!-- submit / button / reset -->
		<button type="button" id="btnSearch">검색</button>
	</form>
	<a href="/create">도서 등록</a>
</p>
<!-- mav.addObject("bookVOList", bookVOList) -->
<%-- <p>${bookVOList}</p> --%>
<table border="1">
	<thead>
		<tr>
			<th>번호</th><th>제목</th><th>카테고리</th><th>가격</th>
		</tr>
	</thead>
	<tbody>
		<!-- 
		forEach 태그? 배열(String[], int[][]), Collection(List, Set) 또는 
		Map(HashTable, HashMap, SortedMap)에 저장되어 있는 값들을 
		순차적으로 처리할 때 사용함. 자바의 for, do~while을 대신해서 사용함
		var : 변수
		items : 아이템(배열, Collection, Map)
		varStatus : 루프 정보를 담은 객체 활용
		   - index : 루프 실행 시 현재 인덱스(0부터 시작)
		   - count : 실행 회수(1부터 시작. 보통 행번호 출력)
		 -->
		<!-- data : mav.addObject("bookVOList", bookVOList); -->
		<!-- bookVOList => List<BookVO> -->
		<!-- row : bookVO 1행 -->
		<c:forEach var="bookVO" items="${bookVOList}" varStatus="stat">
			<tr>
				<td>${stat.count}</td>
				<td><a href="/detail?bookId=${bookVO.bookId}">${bookVO.title}</a></td>
				<td>${bookVO.category}</td>
				<td><fmt:formatNumber value="${bookVO.price}" pattern="#,###" />원</td>
			</tr>
		</c:forEach>
	</tbody>
</table>
</body>
</html>

 

 

@RequestParam(value="keyword",required=false)을 통해서 파라미터가 필수가 아님을 표현함.

defaultValue=""는 기본이 "" 

=> 파라미터가 없는 경우 대비

BookController.java

package kr.or.ddit.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;


import kr.or.ddit.service.BookService;
import kr.or.ddit.vo.BookVO;
import lombok.extern.slf4j.Slf4j;

/*
Controller 어노테이션
스프링 프레임워크에게 "이 클래스는 웹 브라우저의 요청(request)를
받아들이는 컨트롤러야" 라고 알려주는 것임.
스프링은 servlet-context.xml의 context:component-scan의 설정에 의해
이 클래스를 자바빈 객체로 등록(메모리에 바인딩).
*/
// Slf4j 사용 시 하단의 로깅 사용 가능
@Slf4j
@Controller
public class BookController {
	
	//서비스를 호출하기 위해 의존성 주입(Dependency Injection-DI)
	//IoC(Inversion of Control) - 제어의 역전.(개발자가 객체생성하지 않고 스프링이 객체를 미리 생성해놓은 것을 개발자가 요청)
	// DI - 의존성 주입(Dependency Injection) : 이미 만들어져 있는 BookServiceImpl.java를 @Service로 가져다씀
	@Autowired
	BookService bookService;
	
	// 요청URI : /create
	// 요청 파라미터 : 
	// 요청방식 : get
	@RequestMapping(value = "/create", method=RequestMethod.GET)
	public ModelAndView create() {
		/*
	       ModelAndView
	       1) Model : Controller가 반환할 데이터(String, int, List, Map, VO..)를 담당
	       2) View : 화면을 담당(뷰(View : JSP)의 경로)
       */
		ModelAndView mav = new ModelAndView();
		
		// name : title / value = "도서생성"
		mav.addObject("title", "도서생성");
		// jsp
//      <beans:property name="prefix" value="/WEB-INF/views/" />
//      <beans:property name="suffix" value=".jsp" />
		// prefix(접두어) : /WEB-INF/views/
		// suffix(접미어) : .jsp
		// /WEB-INF/views/ + book/create + .jsp
		// forwarding
		mav.setViewName("book/create");
		
		return mav;
	}
	
	/*
	요청URI : /crate
	요청파라미터 : {title=개똥이의 모험, category=소설, price=12000}
	요청방식 : post
	*/
	@RequestMapping(value="/create", method=RequestMethod.POST)
	public ModelAndView createPost(BookVO bookVO) {
		log.info("bookVO : " + bookVO);
		
		// 도서 등록
		int result = this.bookService.createPost(bookVO);
		log.info("createPost->result : " + result);
		
		ModelAndView mav = new ModelAndView();
		
		// 데이터
		mav.addObject("bookVO", bookVO);
		
		// redirect : 새로운 URL 요청
		mav.setViewName("redirect:/list");
		
		return mav;
	}
	
	/*
	요청URI : /list?keyword=알탄 or /list or /list?keyword=
	요청파라미터 : keyword=알탄 or 없음
	요청방식 : get
	
	required=false : 선택사항. 파라미터가 없어도 무관
	*/
	@RequestMapping(value="/list", method=RequestMethod.GET)
	public ModelAndView list(ModelAndView mav, 
			@RequestParam(value="keyword",required=false,defaultValue="") String keyword) {
		log.info("list에 왔다");
		log.info("list->keyword : " + keyword);
		
		//map{"keyword":"알탄"}
		Map<String,Object> map = new HashMap<String,Object>();
		map.put("keyword", keyword);
		
		//도서 목록 map{"keyword":"알탄"}
		List<BookVO> bookVOList = this.bookService.list(map);
		log.info("list->bookVOList : " + bookVOList);
		
		//Model : 데이터
		mav.addObject("bookVOList", bookVOList);
		
		//View : jsp
		//forwarding : 데이터가 넘어감
		mav.setViewName("book/list");
		
		return mav;
	}
	
	//책 상세보기
	//요청된 URI 주소 : http://localhost/detail?bookId=3
	//요청파라미터(HTTP 파라미터), 쿼리 스트링(Query String) : bookId=3 
	//요청방식 : get
	//매개변수 : bookVO => {"bookId":"3","title":null,"category":null,"price":0,"insertDate":null}
	@RequestMapping("/detail")
	public ModelAndView detail(BookVO bookVO, ModelAndView mav) {
		log.info("detail->bookVO : " + bookVO);
		
		//호출 전 : {"bookId":"3","title":null,"category":null,"price":0,"insertDate":null}
		//도서 상세
		bookVO = this.bookService.detail(bookVO);
		//호출 후 : {"bookId":"3","title":"개똥이의 모험","category":"소설","price":12000,"insertDate":2024-04-24}
		
		//Model : 데이터
		mav.addObject("title","도서 상세");
		mav.addObject("bookVO",bookVO);
		
		//View : jsp
		mav.setViewName("book/detail");
		
		return mav;
	}
	
	/*
	 요청URI : /updatePost 
	 요청파라미터 : {bookId=127, title=개똥이의 모험2, category=소설2, price=12002} 요청방식 : post
	 */
	@RequestMapping(value="/updatePost", method=RequestMethod.POST)
	public ModelAndView updatePost(BookVO bookVO, ModelAndView mav) {
		log.info("updatePost->bookVO : " + bookVO);
		
		//insert, update, delete의 return 타입 : int
		int result = this.bookService.updatePost(bookVO);
		log.info("updatePost->result : " + result);
		
		// redirect -> 새로운 URI를 재요청 /detail?bookId=127
		mav.setViewName("redirect:detail?bookId=" + bookVO.getBookId());
		
		return mav;
	}
	/*
	 요청URI : /deletePost 
	 요청파라미터 : {bookId=127, title=개똥이의 모험2, category=소설2, price=12002}
	 요청방식 : post
	 */
	@RequestMapping(value="/deletePost", method=RequestMethod.POST)
	public ModelAndView deletePost(BookVO bookVO, ModelAndView mav) {
		
		log.info("deletePost->bookVO : " + bookVO);
		
		//도서 삭제
		int result = this.bookService.deletePost(bookVO);
		log.info("deletePost->result : " + result);
		
		//redirect -> /list를 재요청
		mav.setViewName("redirect:/list");
		
		return mav;
	}
	
}

 

 

BookService.java

package kr.or.ddit.service;

import java.util.List;
import java.util.Map;

import kr.or.ddit.vo.BookVO;

public interface BookService {
	
	// 도서 등록
	public int createPost(BookVO bookVO);

	// 도서 목록
	public List<BookVO> list(Map<String, Object> map);

	// 도서 상세
	public BookVO detail(BookVO bookVO);

	// 도서 수정
	public int updatePost(BookVO bookVO);

	// 도서 삭제
	public int deletePost(BookVO bookVO);
}

 

 

BookServiceImpl.java

package kr.or.ddit.service.impl;

import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import kr.or.ddit.dao.BookDao;
import kr.or.ddit.service.BookService;
import kr.or.ddit.vo.BookVO;

//서비스 클래스 : 비즈니스 로직
//스프링 MVC 구조에서 Controller와 DAO를 연결하는 역할
/*
스프링 프레임워크는 개발자가 직접 클래스를 생성하는 것을 지양하고,
* 프링은 인터페이스를 좋아해. 자꾸자꾸 좋아지면 Impl은 어떡해
인터페이스를 통해 접근하는 것을 권장하고 있기 때문.(확장성)
그래서 서비스 레이어(계층)는 인터페이스(BookService)와 클래스(BookServiceImpl)를 함께 사용함

Impl : implement의 약자
*/
//"프링아 이 클래스 서비스 클래야"라고 알려주자. 프링이가 자바빈으로 등록해줌.

@Service
public class BookServiceImpl implements BookService{

	//데이터베이스 접근을 위해 BookDao 인스턴스를 주입받자
	//DI(Dependency Injection):의존성 주입
	//IoC(Inversion of Control):제어의 역전
	@Autowired
	BookDao bookDao;
	
	// 메서드 재정의
	@Override
	public int createPost(BookVO bookVO) {
		return this.bookDao.createPost(bookVO);
	}

	// 도서 목록
	@Override
	public List<BookVO> list(Map<String, Object> map) {
		return this.bookDao.list(map);
	}

	// 도서 상세
	@Override
	public BookVO detail(BookVO bookVO) {
		return this.bookDao.detail(bookVO);
	}

	// 도서 수정
	@Override
	public int updatePost(BookVO bookVO) {
		return this.bookDao.updatePost(bookVO);
	}

	// 도서 삭제
	@Override
	public int deletePost(BookVO bookVO) {
		return this.bookDao.deletePost(bookVO);
	}

}

 

 

BookDao.java

package kr.or.ddit.dao;

import java.util.List;
import java.util.Map;

import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import kr.or.ddit.vo.BookVO;

//매퍼xml(book_SQL.xml)을 실행시키는 
//DAO(Data Access Object) 클래스
//Repository 어노테이션 : 데이터에 접근하는 클래스
//스프링이 데이터를 관리하는 클래스라고 인지하여 자바빈으로 등록하여 관리함
@Repository
public class BookDao {

	//DI(Dependency Injection) : 의존성 주입
	//개발자가 new 키워드를 통해 직접 객체를 생성하지 않고!!!
	//스프링이 미리 만들어 놓은(서버 실행 시 스프링이 미리 xml을 읽어
	//객체를 인스턴스화 해놓음)
	//sqlSessionTemplate 타입 객체를 BookDao 객체에 주입함
	@Autowired
	SqlSessionTemplate sqlSessionTemplate;
	
	public int createPost(BookVO bookVO) {
		//book_SQL.xml 파일의 namespace가 book이고, id가 insert인
		//태그를 찾아 그 안에 들어있는 sql을 실행함
		//bookVO=>{"bookId":"","title":"총알탄 개똥이","category":"소설","price":10000,"insertDate":""}
		//insert,update,delete는 반영된 건수가 return됨
		//insert성공 : 1이상, 실패면 0
		// book_SQL.xml의 book 안의 createPost를 찾아감
		return this.sqlSessionTemplate.insert("book.createPost", bookVO);
	}

	//도서 목록
	public List<BookVO> list(Map<String, Object> map) {
		//.selectList("namespace.id",파라미터)
		return this.sqlSessionTemplate.selectList("book.list",map);
	}

	//도서 상세
	public BookVO detail(BookVO bookVO) {
		return this.sqlSessionTemplate.selectOne("book.detail",bookVO);
	}

	//도서 수정
	public int updatePost(BookVO bookVO) {
		return this.sqlSessionTemplate.update("book.updatePost",bookVO);
	}

	//도서 삭제
	public int deletePost(BookVO bookVO) {
		return this.sqlSessionTemplate.delete("book.deletePost",bookVO);
	}

}

 

 

1=1는 true=true 라는 뜻 => 아무런 의미가 없지만 where 조건 사용 시 에러 발생을 방지하기 위해 사용함

book_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="book">
	<!-- MyBatis에서 제공해주는 데이터 입력을 나타내는 태그
	1) 드루와 : Dao 객체가 던진 데이터타입.parameterType만 씀
	2) 가즈아 : Dao 객체의 메소드 쪽으로 리턴할 타입.
	  - resultType : vo, hashMap, String, int
	  - resultMap  : MyBatis의 resultMap 태그를 사용
	-->
	<!-- bookVO(전)=>{"bookId":0,"title":"총알탄 개똥이","category":"소설","price":10000,"insertDate":""} -->
	<!-- bookVO(후)=>{"bookId":1,"title":"총알탄 개똥이","category":"소설","price":10000,"insertDate":""} -->
	<!-- 마이바티스 쿼리 XML에 전달되면 샵{title}을 "총알탄 개똥이"로 자동 변환함 -->
	<insert id="createPost" parameterType="bookVO">
	<!-- 니키? 내키? 아니! 우리키!! -->
	<!-- 키를 높이면 락(rok)커가 될 수 있을까? 
	order : BEFORE(쿼리를 실행하기 전에 먼저 selectKey를 실행)
	resultType : selectKey 쿼리를 실행 한 결과 타입
	keyProperty : bookVO의 멤버변수(결과를 담을)
	-->
	
		<!-- insert문을 실행하기 전에 실행됨 -->
		<selectKey resultType="int" order="BEFORE" keyProperty="bookId">
			SELECT NVL(MAX(BOOK_ID),0)+1 FROM BOOK
		</selectKey>
	
		insert into book(BOOK_ID, TITLE, CATEGORY, PRICE, INSERT_DATE)
		values(#{bookId}, #{title}, #{category}, #{price}, SYSDATE)
	</insert>
	
	<!-- 도서 목록
	where 1 = 1은 늘 참임. 
	조건이 2개 이상일 때 WHERE + AND
	조건이 1개일 때 WHERE이어야 함. 
		WHERE(생략) 
		AND   => 오류 발생
		==>
		WHERE 1 = 1
		AND(생략)
		AND => 정상
		
		True and True  = True
		True and False = False
		
		keyword : "알탄" (/list?keyword=알탄)
		keyword : ""  (/list?keyword=)
	-->
	<!-- bookVO의 값으로 매핑되게 작업해놓음 -->
	<select id="list" resultType="bookVO" parameterType="hashMap">
		SELECT BOOK_ID, TITLE, CATEGORY, PRICE, INSERT_DATE
		FROM BOOK
		WHERE 1=1
		<if test="keyword!=null and keyword!=''">
			AND (TITLE 		LIKE '%' || #{keyword} || '%' 
				OR CATEGORY LIKE '%' || #{keyword} || '%'
				OR PRICE 	LIKE '%' || #{keyword} || '%')
		</if>
		ORDER BY BOOK_ID DESC
	</select>
	
	<!--
	parameterMap은 사용 안함
	resultMap은 JOIN 또는 CLOB 자료형에서 주로 사용됨
	-->
	<!-- mybatisAlias.xml로 카멜표기법 변경했음 -->
	<select id="detail" parameterType="bookVO" resultType="bookVO">
		SELECT BOOK_ID, TITLE, CATEGORY, PRICE, INSERT_DATE
		FROM BOOK
		WHERE BOOK_ID = #{bookId}
	</select>
	
	<update id="updatePost" parameterType="bookVO">
		UPDATE BOOK
		SET TITLE=#{title}, CATEGORY=#{category}, PRICE=#{price}
		WHERE BOOK_ID = #{bookId}
	</update>
	
	<delete id="deletePost" parameterType="bookVO">
		DELETE FROM BOOK
		WHERE BOOK_ID=#{bookId}
	</delete>
</mapper>

 

결과 화면1 : 알탄 검색 시 화면

 

 

 

변경

 

 

=> ModelAndView와 RequestMapping을 아래와 같은 식으로 변경함

 

변경 전

@RequestMapping(value="/detail", method=RequestMethod.GET)
public ModelAndView detail(BookVO bookVO, ModelAndView mav) {
	log.info("detail->bookVO : " + bookVO);
	
	//호출 전 : {"bookId":"3","title":null,"category":null,"price":0,"insertDate":null}
	//도서 상세
	bookVO = this.bookService.detail(bookVO);
	//호출 후 : {"bookId":"3","title":"개똥이의 모험","category":"소설","price":12000,"insertDate":2024-04-24}
	
	//Model : 데이터
	mav.addObject("title","도서 상세");
	mav.addObject("bookVO",bookVO);
	
	//View : jsp
	mav.setViewName("book/detail");
	
	return mav;
}

 

 

변경 후

//@RequestMapping(value="/detail", method=RequestMethod.GET)
//				  value라는 속성이 하나임 -> 생략 가능
@GetMapping("/detail2")
public String detail2(BookVO bookVO, Model model) {
	log.info("detail->bookVO : " + bookVO);
	
	//호출 전 : {"bookId":"3","title":null,"category":null,"price":0,"insertDate":null}
	//도서 상세
	bookVO = this.bookService.detail(bookVO);
	//호출 후 : {"bookId":"3","title":"개똥이의 모험","category":"소설","price":12000,"insertDate":2024-04-24}
	
	//Model : 데이터
	model.addAttribute("title","도서 상세");
	model.addAttribute("bookVO",bookVO);
	
	//View : jsp
	//mav.setViewName("book/detail");
	
	return "book/detail";
}

 

 

반응형