LIFE CODING OF MINOKUMA

[C-2-1] 도서평 목록 기능

2020. 1. 21. 00:13ㆍProject C (SBMS)/Project C 파트2

도서 페이지에서 AJAX 호출로 데이터베이스의 데이터인 순수 데이터만 추출해와서 화면에 출력을 하도록 한다.

views/book

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Simple Book Manager System</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="/sbms/resources/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/sbms/resources/js/book-info.js"></script>
</head>
<body>
		<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
			<a class="navbar-brand" href="/sbms/book/list">SBMS</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
	
			<div class="collapse navbar-collapse" id="navbarColor01">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item active"><a class="nav-link" href="#">Home
							<span class="sr-only">(current)</span>
					</a></li>
					<li class="nav-item"><a class="nav-link" href="/sbms/book/list">BookManagement</a></li>
					
                        <li class="nav-item">
                        	<a class="nav-link" href="/sbms/customLogout">Logout</a>
                        </li>
                        
                        <li class="nav-item">
                        	<a class="nav-link" href="/sbms/customLogin">Login</a>
                        </li>
					
					<li class="nav-item"><a class="nav-link" href="#">About</a></li>
				</ul>
				<form class="form-inline my-2 my-lg-0">
					<input class="form-control mr-sm-2" type="text" placeholder="Search">
					<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
				</form>
			</div>
		</nav>
		
	<div style="width: 200px;border: 1px solid black; background:#D9E5FF; text-align:center; position: fixed;">
	<form>
		<input id="bookNum" type="hidden"> 
		<h4>개인독서노트</h4>
		
	    <div class="form-group" >
	      <label  class="col-form-label col-form-label-sm" for="exampleSelect1">책장 종류</label>
	      <select class="form-control form-control-sm" id="shelfName" required="required">
					<option value="">책장선택</option>
					<option value="IT">IT</option>
					<option value="외국어">외국어</option>
					<option value="소설">소설</option>
					<option value="교육">교육</option>
	      </select>
	    </div>
	
		<div class="form-group">
		  <label class="col-form-label col-form-label-sm" for="inputSmall">책 이름</label>
		  <input class="form-control form-control-sm" type="text"  placeholder="책 이름을 입력해주세요." id="bookTitle" required="required">
		</div>
		<div class="form-group">
		  <label class="col-form-label col-form-label-sm" for="inputSmall">책 저자</label>
		  <input class="form-control form-control-sm" type="text" placeholder="책 저자 입력해주세요." id="writer" required="required">
		</div>
		<div class="form-group">
		  <label class="col-form-label col-form-label-sm" for="inputSmall">출판사</label>
		  <input class="form-control form-control-sm" type="text" placeholder="출판사를 입력해주세요." id="publisher" required="required">
		</div>
		<div class="form-group">
			<label class="col-form-label col-form-label-sm" for="inputDefault">구매날짜</label> 
			<input type="date" class="form-control form-control-sm" placeholder="구매날짜를 선택해주세요." id="purchaseDate" required="required">
		</div>
		<div class="form-group">
		  <label class="col-form-label col-form-label-sm" for="inputSmall">책 가격</label>
		  <input class="form-control form-control-sm" type="number" placeholder="책 가격을 입력해주세요." id="price" required="required">
		</div>
		<div class="form-group">
			<label class="col-form-label col-form-label-sm" for="inputSmall">독서 평</label>
			<textarea class="form-control form-control-sm" id="bookReview" rows="3" required="required"></textarea>
		</div>
		<div class="form-group">
			<input type="submit" class="btn btn-primary" id="btnReg"  value="독서평 등록"/>
			<button type="button" class="btn btn-danger" id="btnCan" onClick="cancelBookInfo();">취소</button>
		</div>
		
		<br/>
		</form>
	</div>
	<div style="left:201px;  width:1318px; position: absolute; " > 

		<h4>내 독서 노트</h4>
		
		<div align="right">
			<select id="search-shelf" name="type" style="width: 100px;">
				<option value="" selected="selected">전체 책장</option>
				<option value="IT">IT</option>
				<option value="외국어">외국어</option>
				<option value="소설">소설</option>
				<option value="교육">교육</option>
			</select>
			<button type="button" class="btn btn-primary" id="btn-search">검색</button>
		</div>
		
		<table class="table table-hover myBookList" >
			<!-- 
			<thead>
			<tr>
		      <th scope="row">책장명</th>
		      <th scope="row">책이름</th>
		      <th scope="row">저자</th>
		      <th scope="row">출판사</th>
		      <th scope="row">구매날짜</th>
		      <th scope="row">책가격</th>
		      <th scope="row">독서평</th>
		      <th scope="row">삭제</th>
		    </tr> 
			</thead>
		  <tbody>
		   <tr>
		      <th scope="row">IT</th>
		      <td>자바 웹 프로그래밍</td>
		      <td>미노쿠마</td>
		      <td>미노북스</td>
		      <td>2020-01-11</td>
		      <td>35000</td>
		      <td>실습할 수 있어서 아주 좋다.</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr> 
		    
 		    <tr class="table-primary">
		      <th scope="row">Primary</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr>
		    <tr class="table-secondary">
		      <th scope="row">Secondary</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr>
		    <tr class="table-success">
		      <th scope="row">Success</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr>
		    <tr class="table-danger">
		      <th scope="row">Danger</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr>
		    <tr class="table-warning">
		      <th scope="row">Warning</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr>
		    <tr class="table-info">
		      <th scope="row">Info</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr>
		    <tr class="table-light">
		      <th scope="row">Light</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr>
		    <tr class="table-dark">
		      <th scope="row">Dark</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr> 
		     
		  </tbody>
		  -->
		</table>
		
		<script type="text/javascript">
		var bookinfoUL = $(".myBookList");
		bookInfoService.getList(function(list) {
			
			var str = "";
			str += "<thead>";
			str += "<tr>";
			str += "<th scope=\"col\" width=\"10px;\">책장명</th>";
			str += "<th scope=\"col\" width=\"10px;\">책 이름</th>";
			str += "<th scope=\"col\" width=\"10px;\">저자</th>";
			str += "<th scope=\"col\" width=\"10px;\">출판사</th>";
			str += "<th scope=\"col\" width=\"10px;\">구매날짜</th>";
			str += "<th scope=\"col\" width=\"20px\">책 가격</th>";
			str += "<th scope=\"col\" width=\"100px;\">독서평</th>";
			str += "<th scope=\"col\" width=\"50px;\">수정 및 삭제</th>";
			str += "</tr>";
			str += "</thead>";
			   
			for (var i = 0, len = list.length || 0; i < len; i++) {
	    		console.log(list[i]);
	    		str += "<tr>";
	      		str += "<th scope=\"row\">" + list[i].shelfName + "</th>";
	      		str += "<td>" + list[i].bookTitle + "</td>";
	      		str += "<td>" + list[i].writer + "</td>";
	      		str += "<td>" + list[i].publisher + "</td>";
	      		str += "<td>" + list[i].purchaseDate.substr(0,10) + "</td>";
	      		str += "<td>" + list[i].price + "</td>";
	      		str += "<td>" + list[i].bookReview + "</td>";
	      		
	      		str += "<td><button class=\"btn btn-warning\" type='button' onClick='removeBookInfo(" + list[i].bookNum + ")'>삭제</button><br/><button class=\"btn btn-success\" type='button' onClick='editBookInfo(" + list[i].bookNum + ")'>수정</button></td>";
	      		str += "</tr>";
	    	}
				bookinfoUL.html(str);
			});
		</script>
		
		
	</div>
</html>

<table class="table table-hover myBookList">

...

</table>

데이터베이스로부터 데이터를 받아서 처리할 것이기 때문에, 내 독서노트 영역인 부분의 정적인 내용들을 코멘트 처리한다.

테이블 태그의 클래스는 myBookList 로 한다.

그리고 테이블 종료태그 하단에 자바스크립트 영역을 추가한다.

위에서 myBookList 클래스를 컨트롤하기 위해 변수 bookinfoUL로 선언한다.

이후에 Ajax를 사용해서 순수 데이터만 추출할 준비를 하는데,

Ajax 기능을 따로 별도로 빼낸 resources/js/book-info.js 파일을 포함시킨다.

Jquery Ajax 별도관리 파일

resources/js

book-info.js

console.log("bookInfo Module........");
 
var bookInfoService = (function() {

	function getList(callback, error) {
	     $.getJSON("/sbms/bookinfo/getList.json",
	        function(data) {
	          if (callback) {
	            callback(data);
	          }
	        }).fail(function(xhr, status, err) {
		      if (error) {
		        error();
		      }
	        });
	}
	
	return {
		getList : getList
	};
})();

RestController로의 호출을 위해 getJSON()를 json 데이터를 받아올 준비한다.

TBL_BOOK 테이블의 도서 목록을 추출할 기능을 getList 으로 함수 선언.

bookInfoService.getList(function(list) {

...

});

이 파일을 포함시킨 book/list.jsp 파일에서 bookInfoService.getList 함수를 호출함을 알 수 있다.

호출 후 받은 json 데이터를 받으면, function(list) 가 실행되어, list에 받은 json 데이터가 들어가게 된다.

따라서, 화면에 표시할 텍스트들을 html태그와 json 데이터의 조합을 구성한다.

str 변수에 테이블 태그의 내부에 들어갈 테이블 내부 태그들을 완성시킨다.

bookinfoUL.html(str);

완성된 str 변수를 bookinfoUL 변수인 myBookList 클래스 내부에 위치시킨다.

book-info.js 파일의 getList() 함수를 호출하면, /sbms/bookinfo/getList.json 를 호출하게 되는데,

이것은 REST Controller인 BookInfoController.java 의 /bookinfo/getList.json 를 호출하게 되는 것이다.

src/main/java

com.sbms.config

BookInfoController.java

package com.sbms.controller;

import java.util.List;

import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.sbms.domain.BookVO;
import com.sbms.service.BookInfoService;

import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;

@RequestMapping("/bookinfo/")
@RestController
@Log4j
@AllArgsConstructor
public class BookInfoController {
	
	private BookInfoService bookInfoService;
	
	@GetMapping(value = "/getList", produces = { MediaType.APPLICATION_XML_VALUE, MediaType.APPLICATION_JSON_UTF8_VALUE })
	public ResponseEntity<List<BookVO>> getList() {
		log.info("[http://localhost/sbms/bookinfo/getList.json]");
		return new ResponseEntity<>(bookInfoService.getList(), HttpStatus.OK);
	}
}

일반적인 Controller 는 @Controller 어노테이션을 지정해주지만,

이처럼 순수 데이터만을 요청하는 REST Controller 에서는 @RestController 어노테이션을 지정한다.

return new ResponseEntity<>(bookInfoService.getList(), HttpStatus.OK);

return 값은 ResponseEntity로 인해 json 데이터로 변환해준다.

bookInfoService.getList() 호출해서 데이터베이스쪽으로 접근한다.

src/main/java

com.sbms.service

BookInfoService.java 인터페이스

package com.sbms.service;

import java.util.List;

import com.sbms.domain.BookVO;

public interface BookInfoService {
	public List<BookVO> getList();
}

src/main/java

com.sbms.service

BookInfoServiceImpl.java

package com.sbms.service;

import java.util.List;

import org.springframework.stereotype.Service;

import com.sbms.domain.BookVO;
import com.sbms.mapper.BookInfoMapper;

import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;

@Service
@Log4j
@AllArgsConstructor
public class BookInfoServiceImpl implements BookInfoService {

	private BookInfoMapper bookInfoMapper;
	
	@Override
	public List<BookVO> getList() {
		return bookInfoMapper.getList();
	}
}

src/main/java

com.sbms.mapper

BookInfoMapper.java 인터페이스

package com.sbms.mapper;

import java.util.List;

import com.sbms.domain.BookVO;

public interface BookInfoMapper {
	public List<BookVO> getList();
}

src/main/resources

com

sbms

mapper

BookInfoMapper.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="com.sbms.mapper.BookInfoMapper">

	<select id="getList" resultType="com.sbms.domain.BookVO">
	<![CDATA[
		select * 
		from TBL_BOOK
		where BOOKNUM > 0 
	]]>
	</select>

</mapper>

테스트 결과

[XML]

http://localhost/sbms/bookinfo/getList

리턴받은 데이터 XML화

RESTController에서 받은 리턴값이 XML형태로 표시된 것을 확인할 수 있다.

[JSON]

http://localhost/sbms/bookinfo/getList.json

리턴받은 데이터 JSON화

RESTController에서 받은 리턴값이 JSON형태로 표시된 것을 확인할 수 있다.

도서 목록 페이지 테스트 결과

http://localhost/sbms/book/list

도서 목록 페이지

데이터베이스로부터 받은 값을 확인할 수 있다.

'Project C (SBMS) > Project C 파트2' 카테고리의 다른 글

[C-2-5] 도서 책장 검색 (0)	2020.01.21
[C-2-4] 도서평 삭제 기능 (0)	2020.01.21
[C-2-3] 도서평 수정 기능 (0)	2020.01.21
[C-2-2] 도서평 작성 기능 (0)	2020.01.21

관련글

댓글 0

티스토리툴바