- 어제와 같이 어레이리스트로 호출해서 출력하는게 아닌 에이작으로 제이손 어레이로 바꿔서 에이작으로 처리하는것을 해보겠다.
- [new] ex04 - 새로운 프로젝트를 만들어준다.
- webcontent\ [new] main.jsp - 웹페이지의 기본틀을 만들어준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이주성의 도서관리 시스템</title>
<style>
#container {
width: 960px;
border: 1px solid black;
margin: 0 auto;
padding: 20px;
}
#header {
padding: 20px;
border: 1px solid black;
}
#center {
padding: 20px;
border: 1px solid black;
margin-top: 10px;
margin-bottom: 10px;
}
#footer {
padding: 20px;
border: 1px solid black;
}
#menu {
overflow: hidden;
border-bottom: 1px dotted black;
}
#menu h4 {
float: left;
width: 100px;
}
h1, h3 {
text-align: center;
}
#content {
border: 1px solid black;
padding: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>이주성의 도서관리 시스템</h1>
</div>
<div id="center">
<div id="menu">
<h4>도서관리</h4>
<h4>게시판관리</h4>
</div>
<div id="content">
<h1>[회사 소개]</h1>
</div>
</div>
<div id="footer">
<h3>Copyright. 2021 이주성 All rights reserved.</h3>
</div>
</div>
</body>
</html>
- 서블릿을 만들어보자.
1. controller, model package를 우선 만들자.
2. controller\MainSevlet.java 를 만들자.
3. main.jsp를 /로 진입할 수 있게 하겠다.
package controller;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/")
public class MainServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setAttribute("pageName", "/about.jsp");
RequestDispatcher dis = request.getRequestDispatcher("/main.jsp");
dis.forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
4. #content 에 넣을 수 있는 pageName으로 들어갈 about.jsp를 만들어보자.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h1>[회사 소개]</h1>
5. 헤더 메뉴 하위 메뉴들을 링크를 걸어서 서블릿으로 연결하는 작업의 밑작업을 미리 해놓겠다.
6. BookServlet.java를 만들자.
package controller;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(value={"/book/list","/book/insert","/book/read","/book/update","/book/delete"})
public class BookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
switch(request.getServletPath()){
case "/book/list":
request.setAttribute("pageName", "/book/list.jsp");
}
RequestDispatcher dispatcher = request.getRequestDispatcher("/main.jsp");
dispatcher.forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
7. 도서관리를 누르면 보이는 뷰를 만들어보자.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h1>[도서 관리]</h1>
- 어제 사용했던 VO와 Database.java를 가지고 오자.
- 어제 사용했던 라이브러리를 전부 가지고 오자.
- DAO는 직접 만들겠다.
package model;
import java.util.*;
import java.sql.*;
public class BookDAO {
// 1. 도서 목록을 출력하는 메서드를 만들겠다.
public ArrayList<BookVO> list() {
ArrayList<BookVO> array = new ArrayList<BookVO>();
try {
String sql = "select * from books order by code desc";
PreparedStatement ps = Database.CON.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
while (rs.next()) {
BookVO vo = new BookVO();
vo.setCode(rs.getString("code"));
vo.setTitle(rs.getString("title"));
vo.setWriter(rs.getString("writer"));
vo.setPrice(rs.getInt("price"));
vo.setImage(rs.getString("image"));
array.add(vo);
}
} catch (Exception e) {
System.out.println("list : " + e.toString());
}
return array;
}
}
- 자바 실행을 위한 메인메서드를 만든다. 테스트용이다.
- model\DAOTest.java
package model;
public class DAOTest {
public static void main(String[] args) {
BookDAO dao = new BookDAO();
dao.list();
}
}
- 어레이리스트를 제이손 타입으로 바꿔주는 작업을 하겠다.
-BookServlet.java
1. value에 /book/list.json 추가
@WebServlet(value = { "/book/list", "/book/list.json", "/book/insert", "/book/read", "/book/update", "/book/delete" })
public class BookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
2. ArrayList를 json 타입으로 바꿔준다.
package controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import model.*;
@WebServlet(value = { "/book/list", "/book/list.json", "/book/insert", "/book/read", "/book/update", "/book/delete" })
public class BookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
BookDAO dao = new BookDAO();
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
switch (request.getServletPath()) {
case "/book/list.json": // ArrayList를 json 타입으로 바꿔준다.
ArrayList<BookVO> array = dao.list(); // 타입지정후 변수에 넣음
JSONArray jArray = new JSONArray();
for (BookVO vo : array) { // array를 꺼내서 vo에 넣겠다.
JSONObject obj = new JSONObject();
obj.put("code", vo.getCode());
obj.put("title", vo.getTitle());
obj.put("writer", vo.getWriter());
obj.put("price", vo.getPrice());
obj.put("image", vo.getImage());
jArray.add(obj);
}
PrintWriter out = response.getWriter(); //
out.print(jArray);
break;
case "/book/list":
request.setAttribute("pageName", "/book/list.jsp");
RequestDispatcher dispatcher = request.getRequestDispatcher("/main.jsp");
dispatcher.forward(request, response);
break;
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
}
- 이제 json을 출력해보도록 하겠다.
- list.jsp
- 일단 제목만 출력해보도록 하겠다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h1>[도서 관리]</h1>
<div id="books"></div>
<script>
getList();
function getList() {
$.ajax({
type : "get",
url : "/book/list.json",
dataType : "json",
success : function(data) {
var str = "";
$(data).each(function() {
str += "<h4>" + this.title + "</h4>";
});
$("#books").html(str);
}
});
};
</script>
- main.jsp
- 핸들바를 추가해준다. - 찾아볼것 - 출력하고자하는 템플릿을 만들때 사용한다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>
- list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<style>
.item {
overflow: hidden;
border: 1px solid gray;
margin-bottom: 10px;
padding: 20px;
border-radius: 10px;
}
.item .info {
float: left;
margin-left: 10px;
}
.item img {
float: left;
margin: 10px;
}
</style>
<h1>[도서 관리]</h1>
<div id="books"></div>
<script id="temp" type="text/x-handlebars-template">
{{#each .}}
<div class="item">
<img src="/image/book/{{image}}" width=150/>
<div class="info">
<div class="code">도서 코드 : {{code}}</div>
<div class="title">도서 제목 : {{title}}</div>
<div class="writer">도서 저자 : {{writer}}</div>
<div class="price">도서 가격 : {{price}}</div>
</div>
</div>
{{/each}}
</script>
<script>
getList();
function getList() {
$.ajax({
type : "get",
url : "/book/list.json",
dataType : "json",
success : function(data) {
var temp = Handlebars.compile($('#temp').html());
$('#books').html(temp(data));
}
});
};
</script>
- 페이지 버튼을 만들어주고 page 값을 json에 넘겨준다.
</script>
<div style="text-align: center">
<button id="prev">이전</button>
<span id="page"></span>
<button id="next">다음</button>
</div>
<script>
// 2. next prev button
var page = 1;
$('#prev').on('click', function() {
page--;
getList();
});
$('#next').on('click', function() {
page++;
getList();
});
// 1. 목록 출력
getList();
function getList() {
$.ajax({
type : "get",
url : "/book/list.json",
dataType : "json",
data:{"page":page},
success : function(data) {
var temp = Handlebars.compile($('#temp').html());
$('#books').html(temp(data));
$("#page").html(page);
}
});
};
</script>
- BookServlet.java
- 넘겨받은 page 값을 매개변수로 설정하고
case "/book/list.json": // ArrayList를 json 타입으로 바꿔준다.
// page값을 json으로 부터 받아온다.
int page = Integer.parseInt(request.getParameter("page")); // new
ArrayList<BookVO> array = dao.list(page); // 타입지정후 변수에 넣음 // new
- BookDAO.java
- sql문으로 페이지 출력 갯수를 limit해주기 위해 사용한다.
public class BookDAO {
// 1. 도서 목록을 출력하는 메서드를 만들겠다.
public ArrayList<BookVO> list(int page) { // new
ArrayList<BookVO> array = new ArrayList<BookVO>();
try {
String sql = "select * from books order by code desc limit ?,3"; // new
PreparedStatement ps = Database.CON.prepareStatement(sql);
ps.setInt(1, (page-1)*3); // new
- page 값에 따라서 버튼의 사용 유무 조건값을 지정해준다.
function getList() {
$.ajax({
type : "get",
url : "/book/list.json",
dataType : "json",
data:{"page":page},
success : function(data) {
var temp = Handlebars.compile($('#temp').html());
$('#books').html(temp(data));
$("#page").html(page);
if(page==1){ // new
$('#prev').attr("disabled",true);
}else{
$('#prev').attr("disabled",false);
}
}
});
};
- 마지막 페이지를 지정해주기 위해서 데이터 총 갯수를 갖는 메서드를 만들어보자.
- BookDAO.java
// 2. 전체 도서 갯수 출력
public int total() {
int total = 0;
try {
String sql = "select count(*) from books";
PreparedStatement ps = Database.CON.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
if (rs.next()) {
total = rs.getInt("count(*)");
}
} catch (Exception e) {
System.out.println("total : " + e.toString());
}
return total;
}
- BookServlet.java
// 페이지 값을 지정해주는 삼항연산자.
int page = request.getParameter("page") == null ? 1 :
Integer.parseInt(request.getParameter("page"));
// int page = Integer.parseInt(request.getParameter("page")); int total = dao.total();
JSONObject jObject = new JSONObject();
jObject.put("array",jArray);
jObject.put("total",total);
PrintWriter out = response.getWriter(); //
out.print(jObject);
break;
- list.jsp
<h1>[도서 관리]</h1>
<div id="condition">
도서 갯수 : <span id="total"></span>건
</div>
<div id="books"></div>
<script id="temp" type="text/x-handlebars-template">
{{#each array}}
<div class="item">
<img src="/image/book/{{image}}" width=150/>
<div class="info">
<div class="code">도서 코드 : {{code}}</div>
<div class="title">도서 제목 : {{title}}</div>
<div class="writer">도서 저자 : {{writer}}</div>
<div class="price">도서 가격 : {{price}}</div>
</div>
</div>
{{/each}}
</script>
<div style="text-align: center">
<button id="prev">이전</button>
<span id="page"></span>
<button id="next">다음</button>
</div>
<script>
// 2. next prev button
var page = 1;
$('#prev').on('click', function() {
page--;
getList();
});
$('#next').on('click', function() {
page++;
getList();
});
// 1. 목록 출력
getList();
function getList() {
$.ajax({
type : "get",
url : "/book/list.json",
dataType : "json",
data : {
"page" : page
},
success : function(data) {
var temp = Handlebars.compile($('#temp').html());
$('#books').html(temp(data));
var total = data.total;
var lastPage = Math.ceil(total / 3);
$('#total').html(total);
$("#page").html(page + "/" + lastPage);
if (page == 1) {
$('#prev').attr("disabled", true);
} else {
$('#prev').attr("disabled", false);
}
if (page == lastPage) {
$('#next').attr("disabled", true);
} else {
$('#next').attr("disabled", false);
}
}
});
};
</script>
- 만약에 금액 포맷을 주고 싶다면?
- BookServlet.java
DecimalFormat df = new DecimalFormat("#,###원");
String strPrice = df.format(vo.getPrice());
obj.put("price", strPrice);
- 검색폼을 만들어보자.
- list.jsp
#search {
height: 20px;
margin-bottom: 10px;
}
</style>
<h1>[도서 관리]</h1>
<div id="condition">
<input type="text" id="search" placeholder="검색어입력"/>
<b>도서 갯수 : <span id="total"></span>건</b>
</div> // 3. search 상자에서 press할 경우 1 page로 돌아간다.
$('#search').on('keypress',function(e){
if(e.keyCode=13){
page=1;
getList();
};
});
// 1. 목록 출력
function getList() {
var search = $('#search').val();
$.ajax({
type : "get",
url : "/book/list.json",
dataType : "json",
data : {
"page" : page,
"search" : search
},
- BookServlet.java
// 서치값을 받아오자. 널이면 "" 아니면 값을 받아온다.
String search = request.getParameter("search") == null ? "":
request.getParameter("search");
ArrayList<BookVO> array = dao.list(page, search); // 타입지정후 변수에 넣음
JSONArray jArray = new JSONArray();
- BookDAO.java
// 1. 도서 목록을 출력하는 메서드를 만들겠다.
public ArrayList<BookVO> list(int page, String search) {
ArrayList<BookVO> array = new ArrayList<BookVO>();
try {
String sql = "select * from books where title like ? order by code desc limit ?,3";
PreparedStatement ps = Database.CON.prepareStatement(sql);
ps.setString(1, "%"+search+"%");
ps.setInt(2, (page - 1) * 3);
- 토탈도 변하게 해보자. 또한 특정 키워드를 입력하면 갯수가 바뀌는지도 확인해보자.
- BookServlet.java
int total = dao.total(search); // new
JSONObject jObject = new JSONObject();
jObject.put("array", jArray);
jObject.put("total", total);
PrintWriter out = response.getWriter(); //
out.print(jObject);
break;
- BookDAO.java
// 2. 전체 도서 갯수 출력
public int total(String search) { // new
int total = 0;
try {
String sql = "select count(*) from books where title like ?;";
PreparedStatement ps = Database.CON.prepareStatement(sql);
ps.setString(1, "%"+search+"%"); // new
ResultSet rs = ps.executeQuery();
if (rs.next()) {
total = rs.getInt("count(*)");
}
} catch (Exception e) {
System.out.println("total : " + e.toString());
}
return total;
}
- 카카오 API 를 가지고와서 도서검색을 만들어보자.
- main
<div id="menu">
<h4><a href="/book/list">도서관리</a></h4>
<h4><a href="/bbs/list">게시판관리</a></h4>
<h4><a href="/book/search">도서검색</a></h4>
</div>
- bookservlet
@WebServlet(value = { "/book/list","/book/search", "/book/list.json", "/book/insert", "/book/read", "/book/update", "/book/delete" })
public class BookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
BookDAO dao = new BookDAO(); case "/book/search":
request.setAttribute("pageName", "/book/search.jsp");
dispatcher = request.getRequestDispatcher("/main.jsp");
dispatcher.forward(request, response);
}
- new search.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h1>[도서 검색]</h1>
- 이제 카카오에서 제공하는 도서검색 API를 적용해보자.
- search.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<style>
.item {
overflow: hidden;
border: 1px solid gray;
margin-bottom: 10px;
padding: 20px;
border-radius: 10px;
margin-bottom: 10px;
}
.item .info {
float: left;
margin-left: 10px;
}
.item img {
float: left;
margin: 10px;
box-shadow: 5px 5px 5px gray;
}
#condition {
height: 20px;
margin-bottom: 10px;
}
#search {
height: 20px;
margin-bottom: 10px;
}
</style>
<h1>[도서 검색]</h1>
<div id="books"></div>
<script id="temp" type="text/x-handlebars-template">
{{#each documents}}
<div class="item">
<img src={{thumbnail}} width=150/>
<div class="info">
<div class="isbn">- 도서 코드 : {{isbn}}</div>
<div class="title">- 도서 제목 : {{title}}</div>
<div class="authors">- 도서 저자 : {{authors}}</div>
<div class="price">- 도서 가격 : {{price}}</div>
</div>
</div>
{{/each}}
</script>
<script>
getList();
function getList() {
$.ajax({
type : "get",
url : "https://dapi.kakao.com/v3/search/book?target=title",
data : {
"query" : "자바",
"size" : 5
},
dataType : "json",
headers : {
"Authorization" : "KakaoAK 31347cda85f0d6ed06e3025a531f2aca"
},
success : function(data) {
var temp = Handlebars.compile($('#temp').html());
$('#books').html(temp(data));
}
});
};
</script>
- 도서 검색 페이지에 도서 검색란을 만들어 직접 키워드로 검색해보자.
- search.jsp
<h1>[도서 검색]</h1>
<div id="condition">
<input type="text" id="search" value="안드로이드"/>
</div>
<div id="books"></div>
<script id="temp" type="text/x-handlebars-template">
{{#each documents}}
<div class="item">
<img src={{thumbnail}} width=150/>
<div class="info">
<div class="isbn">- 도서 코드 : {{isbn}}</div>
<div class="title">- 도서 제목 : {{title}}</div>
<div class="authors">- 도서 저자 : {{authors}}</div>
<div class="price">- 도서 가격 : {{price}}</div>
</div>
</div>
{{/each}}
</script>
<script>
// 젼역변수
var page=1;
getList();
// 검색란에 키프레스를 할경우
$('#search').on('keypress',function(e){
if(e.keyCode==13){
page=1;
getList();
}
});
function getList() {
var search = $('#search').val();
$.ajax({
type : "get",
url : "https://dapi.kakao.com/v3/search/book?target=title",
data : {
"query" : search,
"size" : 5
},
dataType : "json",
headers : {
"Authorization" : "KakaoAK 31347cda85f0d6ed06e3025a531f2aca"
},
success : function(data) {
var temp = Handlebars.compile($('#temp').html());
$('#books').html(temp(data));
}
});
};
</script>
- 더보기 버튼으로 밑으로 데이터가 추가되는 기능을 넣어보자.
- select tag을 적용해보자.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<style>
.item {
overflow: hidden;
border: 1px solid gray;
margin-bottom: 10px;
padding: 20px;
border-radius: 10px;
margin-bottom: 10px;
}
.item .info {
float: left;
margin-left: 10px;
width: 650px;
}
.item img {
float: left;
margin: 10px;
box-shadow: 5px 5px 5px gray;
}
#condition {
height: 20px;
margin-bottom: 10px;
}
#search {
height: 20px;
margin-bottom: 10px;
}
select, input[type=text] {
height: 20px;
}
</style>
<h1>[도서 검색]</h1>
<div id="condition">
<select id="target">
<option value="title">제목</option>
<option value="publisher">출판사</option>
<option value="person">저자</option>
</select>
<input type="text" id="search" placeholder="검색어를 입력하세요." />
<span id="total">검색건수 : 0건</span>
</div>
<div id="books"></div>
<script id="temp" type="text/x-handlebars-template">
{{#each documents}}
<div class="item">
<img src={{thumbnail}} width=150/>
<div class="info">
<div class="isbn">- 도서 코드 : {{isbn}}</div>
<div class="title">- 도서 제목 : {{title}}</div>
<div class="authors">- 도서 저자 : {{authors}}</div>
<div class="price">- 도서 가격 : {{price}}</div>
</div>
</div>
{{/each}}
</script>
<button id="more">더보기</button>
<script>
// 젼역변수
var page = 1;
getList();
// 더보기 버튼을 눌렀을 경우 페이지를 증가 시키도록 하자.
$('#more').on('click', function() {
page++;
getList();
});
// 검색란에 키프레스를 할경우
$('#search').on('keypress', function(e) {
if (e.keyCode == 13) {
$('#books').html("");
page = 1;
getList();
}
});
function getList() {
var search = $('#search').val();
var target = $('#target').val();
$.ajax({
type : "get",
url : "https://dapi.kakao.com/v3/search/book?target="+target,
data : {
"query" : search,
"size" : 5,
"page" : page
},
dataType : "json",
headers : {
"Authorization" : "KakaoAK 31347cda85f0d6ed06e3025a531f2aca"
},
success : function(data) {
var temp = Handlebars.compile($('#temp').html());
$('#books').append(temp(data));
$('#total').html("검색건수 : "+data.meta.total_count + "건");
}
});
};
</script>
- 라인박스를 적용해보자.
- search.jsp
- 예제 CSS
#darken-background {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
display: none;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
overflow-y: scroll;
}
#lightbox {
width: 700px;
margin: 20px auto;
padding: 15px;
border: 1px solid #333333;
border-radius: 5px;
background: white;
box-shadow: 0px 5px 5px rgba(34, 25, 25, 0.4);
text-align: center;
}
- 이미지를 클릭할 경우 라인박스가 보일 수 있게 하자.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<style>
.item {
overflow: hidden;
border: 1px solid gray;
margin-bottom: 10px;
padding: 20px;
border-radius: 10px;
margin-bottom: 10px;
}
.item .info {
float: left;
margin-left: 10px;
width: 650px;
}
.item img {
float: left;
margin: 10px;
box-shadow: 5px 5px 5px gray;
}
#condition {
height: 20px;
margin-bottom: 10px;
}
#search {
height: 20px;
margin-bottom: 10px;
}
select, input[type=text] {
height: 20px;
}
#darken-background {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
display: none;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
overflow-y: scroll;
}
#lightbox {
width: 700px;
margin: 20px auto;
padding: 15px;
border: 1px solid #333333;
border-radius: 5px;
background: white;
box-shadow: 0px 5px 5px rgba(34, 25, 25, 0.4);
text-align: center;
}
</style>
<h1>[도서 검색]</h1>
<div id="condition">
<select id="target">
<option value="title">제목</option>
<option value="publisher">출판사</option>
<option value="person">저자</option>
</select> <input type="text" id="search" placeholder="검색어를 입력하세요." /> <span
id="total">검색건수 : 0건</span>
</div>
<div id="books"></div>
<script id="temp" type="text/x-handlebars-template">
{{#each documents}}
<div class="item">
<img src={{thumbnail}} width=150 contents="{{contents}}"/>
<div class="info">
<div class="isbn">- 도서 코드 : {{isbn}}</div>
<div class="title">- 도서 제목 : {{title}}</div>
<div class="authors">- 도서 저자 : {{authors}}</div>
<div class="price">- 도서 가격 : {{price}}</div>
</div>
</div>
{{/each}}
</script>
<button id="more">더보기</button>
<!-- 라인박스 -->
<div id="darken-background">
<div id="lightbox">
<div class="item">
<img src="" id="image" width=50% height=50% />
<div id="info" style="width:100%; text-align: left;">
<div class="title"></div>
<div class="price"></div>
<div class="writer"></div>
</div>
</div>
<hr />
<div id="contents"></div>
<hr />
<button id="close">닫기</button>
</div>
</div>
<script>
// 젼역변수
var page = 1;
getList();
// 이미지를 클릭 했을때
$('#books').on('click', '.item img', function() {
var image = $(this).attr('src');
var contents = $(this).attr('contents');
var title = $(this).parent().find(".title").html();
var writer = $(this).parent().find(".authors").html();
var price = $(this).parent().find(".price").html();
$('#image').attr("src", image);
$('#contents').html(contents);
$('#lightbox .title').html(title);
$('#lightbox .writer').html(writer);
$('#lightbox .price').html(price);
$('#darken-background').show();
});
// 닫기 버튼을 클릭할 경우
$('#close').on('click', function() {
$('#darken-background').hide();
})
// 더보기 버튼을 눌렀을 경우 페이지를 증가 시키도록 하자.
$('#more').on('click', function() {
page++;
getList();
});
// 검색란에 키프레스를 할경우
$('#search').on('keypress', function(e) {
if (e.keyCode == 13) {
$('#books').html("");
page = 1;
getList();
}
});
function getList() {
var search = $('#search').val();
var target = $('#target').val();
$.ajax({
type : "get",
url : "https://dapi.kakao.com/v3/search/book?target=" + target,
data : {
"query" : search,
"size" : 5,
"page" : page
},
dataType : "json",
headers : {
"Authorization" : "KakaoAK 31347cda85f0d6ed06e3025a531f2aca"
},
success : function(data) {
var temp = Handlebars.compile($('#temp').html());
$('#books').append(temp(data));
$('#total').html("검색건수 : " + data.meta.total_count + "건");
}
});
};
</script>
- 오픈 데이터 검색한 도서 정보를 DB에 넣어보는 작업을 해보자.
- BookDAO
// 3. 도서입력
public void insert(BookVO vo) {
try {
String code = "";
String sql = "select max(code) from books";
PreparedStatement ps = Database.CON.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
if (rs.next()) {
code = rs.getString("max(code)");
}
int intCode = (Integer.parseInt(code) + 1);
code = Integer.toString(intCode);
sql = "insert into books(code, title, writer, price, image) values(?,?,?,?,?)";
ps = Database.CON.prepareStatement(sql);
ps.setString(1, code);
ps.setString(2, vo.getTitle());
ps.setString(3, vo.getWriter());
ps.setInt(4, vo.getPrice());
ps.setString(5, vo.getImage());
ps.execute();
} catch (Exception e) {
System.out.println("insert : " + e.toString());
}
}
- DAOTest
package model;
public class DAOTest {
public static void main(String[] args) {
BookDAO dao = new BookDAO();
BookVO vo = new BookVO();
// dao.list();
// System.out.println(dao.total());
vo.setTitle("이것이 자바다.");
vo.setWriter("신용권");
vo.setPrice(25000);
vo.setImage("img06.jpg");
dao.insert(vo);
}
}
- line-box에 저장 버튼 추가
- search.jsp
<!-- 라인박스 -->
<div id="darken-background">
<div id="lightbox">
<div class="item">
<img src="" id="image" width=50% height=50% />
<div id="info" style="width:100%; text-align: left;">
<div class="title"></div>
<div class="price"></div>
<div class="writer"></div>
</div>
</div>
<hr />
<div id="contents"></div>
<hr />
<button id="close">닫기</button>
<button id="save">도서등록</button>
</div>
</div> // 라인박스의 도서등록 버튼을 클릭했을때
$('#save').on('click', function(){
var title = $(this).parent().find(".title").html();
var writer = $(this).parent().find(".writer").html();
var price = $(this).parent().find(".price").html();
var image = $('#lightbox img').attr("src");
alert(title);
$.ajax({
type : 'post',
url : "/book/insert",
data : {"title":title, "writer":writer, "price":price, "image":image},
success:function(data){
alert("도서등록 성공");
location.href="/book/list";
}
});
if(!confirm("해당 상품을 등록하시겠습니까?")) return;
});
- BookServlet
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
BookVO vo = new BookVO();
vo.setTitle(request.getParameter("title"));
vo.setWriter(request.getParameter("writer"));
vo.setPrice(Integer.parseInt(request.getParameter("price")));
//vo.setImage(request.getParameter("image"));
dao.insert(vo);
}
'ICIA 수업일지' 카테고리의 다른 글
| 2021.08.24 수업일지(Servlet, Mysql, Spring) (0) | 2021.08.24 |
|---|---|
| 2021.08.23 수업일지(Servlet, Spring, Mysql) (0) | 2021.08.23 |
| 2021.08.19 수업일지(Spring, Servlet) (0) | 2021.08.19 |
| 2021.08.18 수업일지(Spring, Servlet) (0) | 2021.08.18 |
| 2021.08.17 수업일지(JAVA, Servlet, Spring) (0) | 2021.08.18 |
