main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="../js/board.js"></script>
<style>
.p1{
width: 80%;
padding: 5px;
margin: 3px;
float: left;
}
.p2{
width: 17%;
padding: 5px;
margin: 2px;
float: right;
}
.p3{
clear: both;
}
input[name=reply]{
height: 40px;
vertical-align: top;
}
</style>
<script type="text/javascript">
currentPage = 3;
$(function(){
listPage(currentPage);
$('#list').on('click', '.action', function(){
//또는 $(document).on('click', '.action', function(){})
idx = $(this).attr('idx');
name = $(this).attr('name');
if(name=="modify"){
alert(idx + "번째 글을 수정합니다");
}else if(name=="delete"){
alert(idx + "번째 글을 삭제합니다");
}else if(name=="reply"){
alert(idx + "번째 글에 댓글을 답니다");
}
});
});
</script>
</head>
<body>
<h2>게시판</h2>
<br>
<div id="list"></div>
<div id="pagelist"></div>
</body>
</html>board.js
/**
*
*/
function listPage(cpage){
$.ajax({
url:"/board/List.do",
data: { "page" : cpage},
type: 'get',
success: function(res){
code = '<div class="panel-group" id="accordion">';
$.each(res.datas ,function(i,v){
code +='<div class="panel panel-default">';
code +='<div class="panel-heading">';
code +='<h4 class="panel-title"> ';
code +='<a data-toggle="collapse" data-parent="#accordion" href="#collapse'+ v.num +'">'+ v.subject +'</a> ';
code +='</h4> ';
code +='</div> ';
code +='<div id="collapse'+ v.num +'" class="panel-collapse collapse"> ';
code +='<div class="panel-body"> ';
code +='<p class="p1"> ';
code +='작성자 :<span class="wr">'+ v.writer +'</span> ';
code +='이메일 :<span class="em">'+ v.mail +'</span> ';
code +='조회수 :<span class="hit">'+ v.hit +'</span> ';
code +='날짜 :<span class="wd">' + v.wdate + '</span> ';
code +='</p> ';
code +=' ';
code +='<p class="p2"> ';
code +='<input idx="'+ v.num +'" type="button" name="modify" class="action" value="수정"> ';
code +='<input idx="'+ v.num +'" type="button" name="delete" class="action" value="삭제"> ';
code +='</p> ';
code +='<p class="p3"> ';
code +='내용출력 내용출력<br> ';
code += v.content;
code +='</p> ';
code +='<p class="p4"> ';
code +=' <textarea rows="" cols="100"></textarea> ';
code +=' <input idx="'+ v.num +'" type="button" value="등록" name="reply" class="action"> ';
code +=' ';
code +=' </p> ';
code +=' </div> ';
code +=' </div> ';
code +='</div> ';
});
code += '</div>';
$('#list').html(code);
$('#pagelist').empty();
//이전버튼만들기
if(res.sp > 1){
pager = '<ul class="pager">';
pager += '<li><a href="#">Previous</a></li>';
pager += '</ul>';
$('#pagelist').append(pager);
}
/*<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
*/
//페이지번호 만들기
pager = '<ul class="pagination">';
for(i=res.sp; i <=res.ep; i++){
if(cpage == i){
pager += '<li class="active"><a href="#">2</a></li>'
}else{
pager += '<li><a href="#">1</a></li>';
}
}
pager += '</ul>';
$('#pagelist').append(pager);
//다음버튼 만들기
if(res.ep < res.tp){
pager = '<ul class="pager">';
pager += '<li><a href="#">Next</a></li>';
pager += '</ul>';
$('#pagelist').append(pager);
}
},
error: function(xhr){
alert("상태 : " + xhr.status);
},
dataType: 'json'
});
} //listPage
BoardServiceImpl
package kr.or.ddit.board.service;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import kr.or.ddit.board.dao.BoardDaoImpl;
import kr.or.ddit.board.dao.IBoardDao;
import kr.or.ddit.board.vo.BoardVO;
public class BoardServiceImpl implements IBoardService{
private IBoardDao dao;
private static IBoardService service;
private BoardServiceImpl(){
dao = BoardDaoImpl.getInstance();
}
public static IBoardService getInstance(){
if(service == null) service = new BoardServiceImpl();
return service;
}
@Override
public List<BoardVO> selectByPage(Map<String, Integer> map) {
List<BoardVO> list = null;
try {
list = dao.selectByPage(map);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return list;
}
@Override
public int totalCount() {
int count = 0;
try {
count = dao.totalCount();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return count;
}
@Override
public Map<String, Integer> PageInfo(int page) {
//전체 글 갯수 가져오기
int count = this.totalCount();
//한 페이지당 출력할 글 갯수
int perList = 3;
//한 화면에 출력할 페이지 수
int perPage = 2;
//전체 페이지 수 - 전체 글 갯수 / perList
int totalPage = (int) Math.ceil((double)count / perList); //나누면 실수형 -> 그걸 올림하고 다시 정수형으로 형변환
//list의 시작번호와 끝번호1~5, 6~10, 11~15
int start = (page-1) * perList + 1;
int end = start + perList - 1;
if(end > count) end = count;
//시작페이지와 끝페이지 1~2 3~4 5~6
int startPage = ((page-1) / perPage * perPage) + 1;
int endPage = startPage + perPage - 1;
if(endPage > totalPage) endPage = totalPage;
Map<String, Integer> map = new HashMap<String, Integer>();
map.put("start", start);
map.put("end", end);
map.put("startPage", startPage);
map.put("endPage", endPage);
map.put("totalPage", totalPage);
return map;
}
}
List.do
package kr.or.ddit.board.controller;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
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 kr.or.ddit.board.service.BoardServiceImpl;
import kr.or.ddit.board.service.IBoardService;
import kr.or.ddit.board.vo.BoardVO;
/**
* Servlet implementation class List
*/
@WebServlet("/List.do")
public class List extends HttpServlet {
private static final long serialVersionUID = 1L;
public List() {
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 0. 클라이언트 요청시 전송되는 값 - page
String page = request.getParameter("page");
int spage = Integer.parseInt(page);
// 1. service 객체
IBoardService service = BoardServiceImpl.getInstance();
// 2. service 메소드 호출 - pageInfo(spage)
//spage에 따라 start, end, startPage, endPage, totalPage값 구하기
Map<String, Integer> map = service.PageInfo(spage);
java.util.List<BoardVO> list = service.selectByPage(map);
// 3. 결과값 저장 - list, startPage, endPage, totalPage
request.setAttribute("list", list);
request.setAttribute("start", map.get("start"));
request.setAttribute("end", map.get("end"));
request.setAttribute("startPage", map.get("startPage"));
request.setAttribute("endPage", map.get("endPage"));
request.setAttribute("totalPage", map.get("totalPage"));
// 4. 응답결과 생성 - json - jsp로 위임 - forward
request.getRequestDispatcher("board/list.jsp").forward(request, response);
}
}
list.jsp
<%@page import="kr.or.ddit.board.vo.BoardVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//서블릿에서 request의 자료 공유
List<BoardVO> list = (List<BoardVO>)request.getAttribute("list");
int spage = (Integer)request.getAttribute("startPage");
int tpage = (Integer)request.getAttribute("totalPage");
int epage = (Integer)request.getAttribute("endPage");
%>
{
"tp" : "<%=tpage %>",
"sp" : "<%=spage %>",
"ep" : "<%=epage %>",
"datas" : [
<%
for(int i=0; i< list.size(); i++){
BoardVO vo = list.get(i);
if(i > 0) out.print(",");
%>
{
"num" : "<%=vo.getNum() %>",
"writer" : "<%=vo.getWriter() %>",
"subject" : "<%=vo.getSubject() %>",
"mail" : "<%=vo.getMail() %>",
"hit" : "<%=vo.getHit() %>",
"content" : "<%=vo.getContent().replaceAll("\r", "").replaceAll("\n", "<br>") %>",
"wdate" : "<%=vo.getWdate() %>"
}
<%
}
%>
]
}
JSP : 서블릿의 일종,
서블릿에서 out.println을 생략하기 위해 만든 페이지
HTML을 동적으로 사용하기 위함, HTML안에서 JAVA언어를 구현.
정적인 HTML에 동적으로 데이터 값을 부여하기 위해 만든 페이지.
외부 JS페이지에서는 JAVA언어 사용 불가능 => 브라우저로 파일이름(src를 그대로 넘겨주기 때문에)
바닐라 스크립트(쌩자바스크립트) / Ajax의 범위가 점점 늘어나고 있음.
=> 이걸 위주로 공부하자.
