본문 바로가기
교육/Server

JDBC 개발자 수업 82일차 - 기본 게시판 만들기(1) - OpenAPI를 이용하여 차트 추가하기

by yhyuk 2021. 7. 25.
728x90
반응형

기본 게시판 만들기

  - OpenAPI를 이용하여 차트 추가하기

OpenAPI를 이용하여 차트 추가하기

[ 구현 목표 및 준비 작업 ]

- 유저별 게시글 수, 댓글 수를 차트 형식으로 알 수 있다.

- OpenAPI 차트도움: https://www.highcharts.com

 

Homepage | Highcharts

 

www.highcharts.com

[ Servlet ]
com.test.myapp.chart 패키지 생성
	-> Chart.java
    -> ChartDAO.java
    -> ChartDTO.java

[ JSP ]
WEBINF > views > chart 폴더 생성
	-> chart.jsp
    
[ JS ]
asset > js 
	-> highcharts.js

 

[ DB 작업 ]

1) com.test.myapp.chart > ChartDTO.java

- 이름(name), 갯수(cnt) getter & setter 만들기

public class ChartDTO {
	
	private String name;
	private String cnt;
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getCnt() {
		return cnt;
	}
	public void setCnt(String cnt) {
		this.cnt = cnt;
	}
	
}

 

2) com.test.myapp.chart > ChartDAO.java

- 게시글 수 쿼리문 만들기 > ChartDTO에 값 전달하기

- 댓글 수 쿼리문 만들기 > ChartDTO에 값 전달하기

public class ChartDAO {
	
	private Connection conn;
	private Statement stat;
	private ResultSet rs;
	
	public ChartDAO() {
		
		try {
			conn = DBUtil.open();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	// 게시글 수
	public ArrayList<ChartDTO> list1() {
		
		try {
			
			String sql = "select name, (select count(*) from tblBoards where id = tblUsers.id) as cnt from tblUsers";
			
			stat = conn.createStatement();
			rs = stat.executeQuery(sql);
			
			ArrayList<ChartDTO> list = new ArrayList<ChartDTO>();
			
			while ( rs.next() ) {
				
				ChartDTO dto = new ChartDTO();
				
				dto.setName(rs.getString("name"));
				dto.setCnt(rs.getString("cnt"));
				
				list.add(dto);
				
			}
			
			return list;
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return null;
	}
	
	// 댓글 수
	public ArrayList<ChartDTO> list2() {
		
		try {
			
			String sql = "select name, (select count(*) from tblComment where id = tblUsers.id) as cnt from tblUsers";
			
			stat = conn.createStatement();
			rs = stat.executeQuery(sql);
			
			ArrayList<ChartDTO> list = new ArrayList<ChartDTO>();
			
			while ( rs.next() ) {
				
				ChartDTO dto = new ChartDTO();
				
				dto.setName(rs.getString("name"));
				dto.setCnt(rs.getString("cnt"));
				
				list.add(dto);
				
			}
			
			return list;
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return null;
	}

}

 

[ Servlet + JSP 작업 ]

1) com.test.myapp.chart > Chart.java

- DB 작업

- ArrayList<ChartDTO> 반환 + JSP 호출하기

@WebServlet("/chart/chart.do")
public class Chart extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		ChartDAO dao = new ChartDAO();
		
		ArrayList<ChartDTO> list1 = dao.list1(); // 게시물 목록
		ArrayList<ChartDTO> list2 = dao.list2(); // 댓글 목록
		
		req.setAttribute("list1", list1);
		req.setAttribute("list2", list2);
		
		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/chart/chart.jsp");
		dispatcher.forward(req, resp);
	}
}

 

2) WEB-INF > views > chart > chart.jsp

- 서블릿에서 넘어온 ArrayList<ChartDTO>를 JSP에서 c:forEach를 사용해 name, cnt 불러오기

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myapp</title>

<%@ include file="/inc/asset.jsp" %>
<script src="/myapp/asset/js/highcharts.js"></script>

<style>

	.chart {
		border: 1px solid black;
		border-radius: 10px;
		width: 600px;
		margin: 40px auto;
		padding: 20px;
	}
	
</style>

</head>
<body>
	<!-- chart.jsp -->
	<%@ include file="/inc/header.jsp" %>
	
	<section class="main-section">
		
		<h1>차트</h1>
		
		<div class="chart" id="chart1"></div>
		<div class="chart" id="chart2"></div>
		
	</section>	
	
	
	<%@ include file="/inc/init.jsp" %>
	<script>
	
		Highcharts.chart('chart1', {
		    chart: {
		        plotBackgroundColor: null,
		        plotBorderWidth: null,
		        plotShadow: false,
		        type: 'pie'
		    },
		    title: {
		        text: '유저별 게시물 수'
		    },
		    tooltip: {
		        pointFormat: '{series.name}: <b>{point.y}개</b>'
		    },
		    accessibility: {
		        point: {
		            valueSuffix: '개'
		        }
		    },
		    plotOptions: {
		        pie: {
		            allowPointSelect: true,
		            cursor: 'pointer',
		            dataLabels: {
		                enabled: true,
		                format: '<b>{point.name}</b>: {point.y}개'
		            }
		        }
		    },
		    series: [
		    	{
		        name: '게시물수',
		        colorByPoint: true,
		        data: [
			        
		        	<c:forEach items="${ list1 }" var="dto">
		        	{
			            name: '${ dto.name }',
			            y: ${ dto.cnt }
			        },
			        </c:forEach>
			        
		        ]
		    }]
		});
		
		Highcharts.chart('chart2', {
		    chart: {
		        plotBackgroundColor: null,
		        plotBorderWidth: null,
		        plotShadow: false,
		        type: 'pie'
		    },
		    title: {
		        text: '유저별 댓글수'
		    },
		    tooltip: {
		        pointFormat: '{series.name}: <b>{point.y}개</b>'
		    },
		    accessibility: {
		        point: {
		            valueSuffix: '개'
		        }
		    },
		    plotOptions: {
		        pie: {
		            allowPointSelect: true,
		            cursor: 'pointer',
		            dataLabels: {
		                enabled: true,
		                format: '<b>{point.name}</b>: {point.y}개'
		            }
		        }
		    },
		    series: [
		    	{
		        name: '댓글수',
		        colorByPoint: true,
		        data: [
		        	
		        	<c:forEach items="${ list2 }" var="dto">
		        	{
			            name: '${ dto.name }',
			            y: ${ dto.cnt }
			        },
			        </c:forEach>
		        ]
		    }]
		});
		
	</script>
</body>
</html>

 

- 반영된 차트 페이지 ( 마우스를 올리면 말풍선과 hover효과를 볼수 있다. )

hover 효과와 클릭 시 애니메이션 효과를 확인할 수 있다. (highCharts에서 제공하는 기능)

 

728x90
반응형
저작자표시

'교육 > Server' 카테고리의 다른 글

JDBC 개발자 수업 83일차 - 기본 게시판 만들기 - OpenAPI를 이용하여 지도 만들기  (0) 2021.07.25
JDBC 개발자 수업 82일차 - 기본 게시판 만들기(2) - OpenAPI를 이용하여 책 검색하기  (0) 2021.07.25
JDBC 개발자 수업 81일차 - 기본 게시판 만들기(2) - 답변 기능 추가하기  (0) 2021.07.22
JDBC 개발자 수업 81일차 - 기본 게시판 만들기(1) - 페이징 기능 추가하기  (0) 2021.07.22
JDBC 개발자 수업 80일차 - 기본 게시판 만들기(3) - 게시판 보안 정책  (0) 2021.07.21

관련글

댓글

티스토리툴바