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); } }
◎ 책 상세 서비스 인터페이스 메소드 시그니쳐 생성
▷ detail 부분을 interface에 추가해야합니다.Map<String, Object> detail(Map<String, Object> map);
5. 쿼리 스트링
▷ 책 상세 화면의 URI는 /detail?bookId=1 형식, 주소창을 통해 파라미터가 서버로 전달되는 형태를 쿼리 스트링
▷ HTTP 규격에서 쿼리 스트링은 UR끝에 ?로 시작. 각 항목은 &로 이어지며, 개별 항목의 키와 값은 =로 구분
◎ 쿼리 스트링 예시
/sample/test?a=1&b=2 웹 주소는 아래와 같습니다.
1. URL : /sample/test
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="/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="/list">목록으로</a> </p> </body> </html>
위와 같이 코드를 작성해줍니다.
원래 입력일 부분 코드는 아래와 같습니다.
<p>입력일 : <fmt:formatDate value="${ data.insert_date }" pattern="yyyy.MM.dd HH:mm:ss" /></p>
하지만 formatDate 값을 바로 받아오지 못해서 위와 같이 날짜를 받아온 후 변수로 바뀌게 만들었습니다.
8. 책 상세 화면 확인하기
서버를 클릭하고 ctrl + alt + d를 눌러 디버깅 모드로 시작, ctrl + alt + s를 눌러 서버 모드로 시작
브라우저에 http://localhost:8080/detail?bookId=1 주소로 접속해서 화면 확인
db에 저장된 데이터를 출력할 수 있습니다.
create에서 저장하면 바로 책 상세 페이지로 연동할 수 있습니다.
http://localhost:8080/create
detail.jsp파일 생성해 create에서 입력해서 저장하면 detail로 값이 전달되면서 상세 내용이 출력됩니다.
데이터 베이스도 연동이 잘되네요!!
다음은 책 수정 화면을 만들어 볼게요!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
'BackEnd > Spring' 카테고리의 다른 글
| [코드로 배우는 스프링 웹 프로젝트] java spring 책 수정 기능 만들기 (0) | 2023.03.17 |
|---|---|
| [코드로 배우는 스프링 웹 프로젝트] java spring 책 수정 화면 만들기 (0) | 2023.03.17 |
| [코드로 배우는 스프링 웹 프로젝트] java spring 책 입력 기능 만들기 (0) | 2023.03.16 |
| [코드로 배우는 스프링 웹 프로젝트] java spring MySQL 연동 방법 (0) | 2023.03.16 |
| [코드로 배우는 스프링 웹 프로젝트] java spring 설치 방법 (0) | 2023.03.15 |
