(코드 학습용 Spring 웹 프로젝트) Java Spring Book 상세 화면 생성

by

1. 도서 상세 화면 개요 : 브라우저에서 /detail?bookId=1 주소로 접속하면 도서 정보 확인 화면이 표시됩니다.

2. 도서 상세 조회 작성

◎ book_SQL.xml에 내용 추가(insert에 추가)

	<!
-- 책 상세 쿼리 작성 --> 
	<select id="select_detail" parameterType="hashMap" resultType="hashMap">
		<!
(CDATA(
			select 
				title,
				category,
				price,
				insert_date
			from
				book
			where
				book_id = #{bookId}		
		))>
	</select>​

MySQL에서 사용하는 다음 코드와 동일합니다.

'추천 관련글, 
select title, category, price, insert_date from book where book_id = 1;​

3. 책 상세 DAO 방식 작성(BookDao 클래스)

@Repository
public class BookDao {
   ...(생략)...
	//책 상세 DAO 메소드 작성
	public Map<String, Object> selectDetail(Map<String, Object> map){
		return this.sqlSessionTemplate.selectOne("book.select_detail", map);
	}
}

BokDao 클래스의 Insert 메서드 아래에 추가합니다.

4. 도서 상세 서비스를 위한 클래스 메서드 생성(BookService 클래스)

public class BookServiceImpl implements BookService {
	...(생략)...	
	@Override
	public Map<String, Object> detail(Map<String, Object> map){
		return this.bookDao.selectDetail(map);
	}
}

◎ 도서 상세 서비스 인터페이스를 위한 메소드 시그니처 생성
▷ 인터페이스에 디테일 부분을 추가해야 합니다.

Map<String, Object> detail(Map<String, Object> map);

5. 쿼리 문자열

▷ 도서상세화면의 URI는 /detail?bookId=1 형식이며, 주소창을 통해 서버로 파라메터가 전달되는 형식은 쿼리스트링

▷ HTTP 사양에서 쿼리 문자열은 ?로 시작합니다.
UR의 끝에서. 각 요소 뒤에는 &가 오고 각 요소의 키와 값은 =로 구분됩니다.

◎ 샘플 쿼리 문자열

/sample/test?a=1&b=2 웹 주소는 아래와 같습니다.

1. URL: /샘플/테스트
2. 쿼리 문자열: ?a=1&b=2
3. 쿼리 문자열 시작: ?
4. 쿼리 문자열에서 요소 분리: &
5. 쿼리 문자열의 요소: a=1, b=2
6. URI: /sample/test?a=1&b=2

6. 책 세부 컨트롤러 메서드 추가(BookController.java 클래스)

...(생략)...
	@RequestMapping(value = "/detail", method= RequestMethod.GET)
	public ModelAndView detail(@RequestParam Map<String, Object> map) {
		Map<String, Object> detailMap = this.bookService.detail(map);
		
		ModelAndView mav = new ModelAndView();
		mav.addObject("data", detailMap);
		String bookId = map.get("bookId").toString();
		mav.addObject("bookId", bookId);
		mav.setViewName("/book/detail");
		return mav;
	}
}

7. 도서 상세보기 생성

▷ src/main/webapp/WEB-INF/views/book/detail.jsp 생성

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

<html>
<head>
<title>책 상세</title>
</head>
<body>
	<h1>책 상세</h1>
	<p>제목 : ${ data.title }</p>
	<p>카테고리 : ${ data.category }</p>
	<p>가격 : <fmt:formatNumber type="number" maxFractionDigits="3" value="${ data.price }" /></p>
	<p>입력일 : 
	<fmt:parseDate value="${data.insert_date}" var="dateFmt" pattern="yyyymmdd"/>
	<fmt:formatDate value="${dateFmt}" pattern="yyyy-MM-dd"/></p>
	
	<p> <a href="http://bobo12.update?bookId=${bookId}"> 수정 </a> </p>
	<form method="POST" action="/delete">
		<input type="hidden" name="bookId" value="${bookId}" />
		<input type="submit" value="삭제" />		
	</form>
	<p>
		<a href="http://bobo12.list">목록으로</a>
	</p>
</body>
</html>

위와 같이 코드를 작성합니다.

원래 입력 날짜의 부분 코드는 다음과 같습니다.

입장 날짜:

하지만 formatDate 값을 바로 가져올 수 없어서 위와 같이 날짜를 가져온 후 변수로 변경했습니다.

8. 도서 상세 화면 확인

Server를 클릭하고 Ctrl+Alt+D를 눌러 디버깅 모드에서 시작하고 Ctrl+Alt+s를 눌러 서버 모드에서 시작

브라우저에서 http://localhost:8080/detail?bookId=1 주소로 접속하여 화면 확인


db에 저장된 데이터를 출력할 수 있습니다.

생성에 저장하면 도서 상세페이지로 바로 연결이 가능합니다.

http://localhost:8080/만들기

detail.jsp 파일을 생성하여 create에 넣고 저장하면 detail에 값이 전달되고 내용이 출력됩니다.

데이터베이스도 잘 작동합니다!
!

다음은 책 편집 화면을 만들겠습니다!
!

많은 분들의 피드백은 언제나 환영합니다!
댓글 많이 달아주세요~~