본문 바로가기
스프링(Spring)/게시판 만들기

[Spring 게시판] 대시보드 화면(탭메뉴, TOP5, 주간접속통계)

by una⭐ 2020. 3. 12.

1. Controller(흐름제어)

 

DashBoardController

 

@Controller
public class DashBoardController {

	@Qualifier("DashBoardService")
	@Autowired
	DashBoardService dashBoardService;
	
	@RequestMapping(value = "/showDashBoard", method = RequestMethod.GET)
	public String showDashBoard(HttpServletRequest request, Model model) throws Exception {

		HttpSession session = request.getSession(true);
		if(session.getAttribute("sessionSeq") != null) {
			int sessionSeq = (Integer) session.getAttribute("sessionSeq");
			//많이 본 순 가져오는 리스트
			List<BoardVO> viewTopList = dashBoardService.selectViewTop(sessionSeq);
			model.addAttribute("viewTopList", viewTopList);
			//댓글 많은 순 가져오는 리스트
			List<BoardVO> commentTopList = dashBoardService.selectCommentTop(sessionSeq);
			model.addAttribute("commentTopList", commentTopList);
			return "dashBoard";
		} else {
			return "redirect:login";
		}
	}
	
	@RequestMapping(value = "/showChart", method = RequestMethod.GET)
	@ResponseBody
	public Map<String, Object> showChart(HttpServletRequest request) throws Exception {

		HttpSession session = request.getSession(true);
		if(session.getAttribute("sessionSeq") != null) {
			int sessionSeq = (Integer) session.getAttribute("sessionSeq");	
			WeekStatsVO weekStatsVO = dashBoardService.selectWeekStats(sessionSeq);
			Map<String, Object> map = new LinkedHashMap<String, Object>();
	        map.put("일", weekStatsVO.getSun());
	        map.put("월", weekStatsVO.getMon());
	        map.put("화", weekStatsVO.getTue());
	        map.put("수", weekStatsVO.getWed());
	        map.put("목", weekStatsVO.getThu());
	        map.put("금", weekStatsVO.getFri());
	        map.put("토", weekStatsVO.getSat());
	        return map;
		} else {
			return null;
		}
		
	}
	
}

 

2. Service(비즈니스 로직, DB 연동 이외의 작업)

 

DashBoardService

 

@Service("DashBoardService")
public class DashBoardService {

	@Autowired
	DashBoardDao dashBoardDao;
	
	//많이본 순
	public List<BoardVO> selectViewTop(int sessionSeq) throws Exception{
    
		return dashBoardDao.selectViewTop(sessionSeq);
        
	}
	
	//댓글 많은 순
	public List<BoardVO> selectCommentTop(int sessionSeq) throws Exception{
    
		return dashBoardDao.selectCommentTop(sessionSeq);
        
	}
	
	public WeekStatsVO selectWeekStats(int sessionSeq) throws Exception{

		return dashBoardDao.selectWeekStats(sessionSeq);
        
	}
	
}

 

3. Model(비즈니스 로직, DB 연동 작업)

 

WeekStatsVO(주간접속통계 데이터 저장 클래스)

 

package com.ncomz.sample.dto;

public class WeekStatsVO {
	int sun;
	int mon;
	int tue;
	int wed;
	int thu;
	int fri;
	int sat;
	
	public int getSun() {
		return sun;
	}
	public void setSun(int sun) {
		this.sun = sun;
	}
	public int getMon() {
		return mon;
	}
	public void setMon(int mon) {
		this.mon = mon;
	}
	public int getTue() {
		return tue;
	}
	public void setTue(int tue) {
		this.tue = tue;
	}
	public int getWed() {
		return wed;
	}
	public void setWed(int wed) {
		this.wed = wed;
	}
	public int getThu() {
		return thu;
	}
	public void setThu(int thu) {
		this.thu = thu;
	}
	public int getFri() {
		return fri;
	}
	public void setFri(int fri) {
		this.fri = fri;
	}
	public int getSat() {
		return sat;
	}
	public void setSat(int sat) {
		this.sat = sat;
	}
}

 

DashBoardDao

 

@Repository
public class DashBoardDao {

	@Autowired
	SqlSession sqlSession;
	
	public List<BoardVO> selectViewTop(int sessionSeq) throws Exception {
		return sqlSession.selectList("com.ncomz.sample.dao.DashBoardDao.selectViewTop", sessionSeq);
	}

	public List<BoardVO> selectCommentTop(int sessionSeq) throws Exception {
		return sqlSession.selectList("com.ncomz.sample.dao.DashBoardDao.selectCommentTop", sessionSeq);
	}
	
	public WeekStatsVO selectWeekStats(int sessionSeq) throws Exception{
		return sqlSession.selectOne("com.ncomz.sample.dao.DashBoardDao.selectWeekStats", sessionSeq);
	}
}

 

DashBoardDao.xml(SQL문)

 

<?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.ncomz.sample.dao.DashBoardDao">

	<select id="selectViewTop" resultType="com.ncomz.sample.dto.BoardVO">
		SELECT title
		FROM 
		(
			SELECT title
			FROM TB_JMJ_BOARD as b
			JOIN TB_JMJ_USER as u
			ON u.userSeq = b.userSeq
			WHERE delete_yn='n' AND
			(b.category = IF((SELECT dance_yn FROM TB_JMJ_USER WHERE userSeq = #{sessionSeq}) = 'y', 'dance', 'n') OR
			b.category = IF((SELECT movie_yn FROM TB_JMJ_USER WHERE userSeq = #{sessionSeq}) = 'y', 'movie', 'n'))
			ORDER BY b.hit DESC
		) top
		LIMIT 5
	</select>
	
	<select id="selectCommentTop" resultType="com.ncomz.sample.dto.BoardVO">
		SELECT title
		FROM 
		(
			SELECT count(*) cnt, title
			FROM TB_JMJ_BOARD as b
			INNER JOIN TB_JMJ_USER as u
			ON u.userSeq = b.userSeq
			INNER JOIN TB_JMJ_COMMENT as c
			ON b.boardSeq = c.boardSeq
			WHERE delete_yn='n' AND
			(b.category = IF((SELECT dance_yn FROM TB_JMJ_USER WHERE userSeq = #{sessionSeq}) = 'y', 'dance', 'n') OR
			b.category = IF((SELECT movie_yn FROM TB_JMJ_USER WHERE userSeq = #{sessionSeq}) = 'y', 'movie', 'n'))
			GROUP BY b.boardSeq
			ORDER BY cnt DESC
		) top
		LIMIT 5
	</select>
	
	<select id="selectWeekStats" resultType="com.ncomz.sample.dto.WeekStatsVO">
		SELECT 
			COUNT(CASE WHEN WEEKDAY(register_date)='0' THEN 0 END) AS 'mon',
			COUNT(CASE WHEN WEEKDAY(register_date)='1' THEN 1 END) AS 'tue',
			COUNT(CASE WHEN WEEKDAY(register_date)='2' THEN 2 END) AS 'wed',
			COUNT(CASE WHEN WEEKDAY(register_date)='3' THEN 3 END) AS 'thu',
			COUNT(CASE WHEN WEEKDAY(register_date)='4' THEN 4 END) AS 'fri',
			COUNT(CASE WHEN WEEKDAY(register_date)='5' THEN 5 END) AS 'sat',
			COUNT(CASE WHEN WEEKDAY(register_date)='6' THEN 6 END) AS 'sun'
		FROM TB_JMJ_BOARD
		WHERE
			(category = IF((SELECT dance_yn FROM TB_JMJ_USER WHERE userSeq = #{sessionSeq}) = 'y', 'dance', 'n') OR
			category = IF((SELECT movie_yn FROM TB_JMJ_USER WHERE userSeq = #{sessionSeq}) = 'y', 'movie', 'n')) AND
			register_date BETWEEN (NOW()-INTERVAL 7 DAY) AND NOW()
	</select>

</mapper>

 

4. View(화면)

 

dashBoard.jsp

 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
	//구글 시각화 API를 로딩하는 메소드
	google.charts.load('current', {packages: ['corechart']});

	// 구글 시각화 API가 로딩이 완료되면,
	// 인자로 전달된 콜백함수를 내부적으로 호출하여 차트를 그리는 메소드
	// 화면이 실행될때 함께 실행된다.
	google.charts.setOnLoadCallback(columnChart1);
	
	// 묶은 세로 막대형 차트 1
	function columnChart1() {

		$.ajax({
		    url:'/showChart', //request 보낼 서버의 경로
		    type:'GET', // 메소드(get, post, put 등)
		    contentType:'application/json;charset=utf-8',
		    dataType:'json',
		    success: function(data) {
		        //서버로부터 정상적으로 응답이 왔을 때 실행
		    	var arr =
		    		[['요일', '글수'],
		    		['일', data.일],
		    		['월', data.월],
		    		['화', data.화],
		    		['수', data.수],
		    		['목', data.목],
		    		['금', data.금],
		    		['토', data.토]];
		    	// 실 데이터를 가진 데이터테이블 객체를 반환하는 메소드
		    	var dataTable = google.visualization.arrayToDataTable(arr);
		    	
		    	// 옵션객체 준비
		    	var options = {
		    		title: '주간 게시글 통계',
		    		hAxis: {title: '요일'},
		    		legend: {position: 'none'}
		    	};

		    	// 차트를 그릴 영역인 div 객체를 가져옴
		    	var objDiv = document.getElementById('column_chart_div1');
		    	// 인자로 전달한 div 객체의 영역에 컬럼차트를 그릴수 있는 차트객체를 반환
		    	var chart = new google.visualization.ColumnChart(objDiv);
		    	// 차트객체에 데이터테이블과 옵션 객체를 인자로 전달하여 차트 그리는 메소드
		    	chart.draw(dataTable, options);
		    },
		    error: function(err) {
		        //서버로부터 응답이 정상적으로 처리되지 못햇을 때 실행
		        alert("세션이 만료되어 로그인 페이지로 이동합니다.");
		    	location.href="login";
		    }
		});
	} // drawColumnChart1()의 끝

</script>
	
	
<style>
	.container{
		width: 500px;
		margin: 0 auto;
	}
	ul.tabs{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	ul.tabs li{
		background: none;
		color: #222;
		display: inline-block;
		padding: 10px 77.9px;
		cursor: pointer;
	}
	
	ul.tabs li.current1{
		background: #ededed;
		color: #222;
	}
	
	.tab-content1{
		display: none;
		background: #ededed;
		padding: 15px;
	}
	
	.tab-content1.current1{
		display: inherit;
	}
</style>
</head>
<body>
	<jsp:include page="/WEB-INF/views/header.jsp" flush ="false"/>
	
	<div class="container" style="padding-top: 15px;">

		<ul class="tabs">
			<li class="tab-link current1" data-tab="tab-1">많이 본 글</li>
			<li class="tab-link" data-tab="tab-2">댓글이 많은 글</li>
		</ul>
	
		<div id="tab-1" class="tab-content1 current1">
			<c:choose>
				<c:when test="${fn:length(viewTopList) == 0}">
					많이 본 게시글이 없습니다.
				</c:when>
				<c:otherwise>
					<c:forEach var="viewTopList" items="${viewTopList}" varStatus="status">
						${status.count}. ${viewTopList.title}<br>
					</c:forEach>
				</c:otherwise> 
			</c:choose>
		</div>
		<div id="tab-2" class="tab-content1">
			<c:choose>
				<c:when test="${fn:length(commentTopList) == 0}">
					댓글이 많은 게시글이 없습니다.
				</c:when>
				<c:otherwise>
					<c:forEach var="commentTopList" items="${commentTopList}" varStatus="status">
						${status.count}. ${commentTopList.title}<br>
					</c:forEach>
				</c:otherwise> 
			</c:choose>
		</div>
	
	</div>
	
	<br/>
	
	<div  id="column_chart_div1" class="container" style="border: 1px solid #000; height: 300px;">
	
	</div>
		
	<script>
		
		$(document).ready(function(){
			
			$('ul.tabs li').click(function(){
				var tab_id = $(this).attr('data-tab');
		
				$('ul.tabs li').removeClass('current1');
				$('.tab-content1').removeClass('current1');
		
				$(this).addClass('current1');
				$("#"+tab_id).addClass('current1');
			})
		
		})
		
	</script>

</body>
</html>

 

header.jsp(탭메뉴)

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%    
   String pageName= request.getParameter("pageName");

   //세션처리
   String sessionName = (String)session.getAttribute("sessionName");
   String sessionDance_yn = (String)session.getAttribute("sessionDance_yn");
   String sessionMovie_yn = (String)session.getAttribute("sessionMovie_yn");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	#container {
	   width: 60%;
	   margin:0 auto;
	   text-align:center;
	   padding: 7px 0px;
	}
	.logout{
	   float:left; 
	   text-align:left;
	   font-size: 15px;
	   padding: 12px 0px;
	}
	.logout a{
	   text-decoration: none;
	   color: #000;
	}
	.tab {
	   list-style: none;
	   margin: 0;
	   padding: 0;
	   overflow: hidden;
	}
	/* Float the list items side by side */
	.tab li {
	   float: right;
	}
	/* Style the links inside the list items */
	.tab li a {
	   display: inline-block;
	   color: #000;
	   text-align: center;
	   text-decoration: none;
	   padding: 14px 16px;
	   font-size: 17px;
	   transition:0.3s;
	}
	/* Style the tab content */
	/* .tabcontent {
	   display: none;
	   padding: 20px 12px;
	   color:#000;
	} */
	ul.tab li.current{
	   background-color: #2baae1;
	   color: #222;
	}
	.tabcontent.current {
	   display: block;
	}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
   <div id="container">
      
      <!-- 로그아웃 -->
      <div class="logout">
         <b>${sessionName}</b> <input type="button" value="로그아웃" onclick="location.href='logout'"/>
      </div>
      
      <ul class="tab">
         <!-- data-tab : 표준이 아닌 속성이나 HTML 요소에 추가 정보를 저장할 수 있도록 해준다.  -->
         <c:if test="${sessionMovie_yn eq 'y'}">
            <li data-tab="tab3" id="currentMovie"><a href="#" onclick="switchContent('/list?current=movie');">영화동아리</a></li>
         </c:if>
         <c:if test="${sessionDance_yn eq 'y'}">
            <li data-tab="tab2" id="currentDance"><a href="#" onclick="switchContent('/list?current=dance');">댄스동아리</a></li>
         </c:if>
         <li data-tab="tab1" class="current" id="currentDashboard"><a href="#" onclick="switchContent('/showDashBoard');">Dashboard</a></li>
      </ul>
      
   </div>
   
   <script>
   
      /* $(function() {
         
         $('ul.tab li').click(function() {
            var activeTab = $(this).attr('data-tab');
            $('ul.tab li').removeClass('current');
            $(this).addClass('current');
            
            console.log(activeTab);
            
            $('#' + activeTab).addClass('current');
            
         })
         
      }); */
      
      function switchContent(bodyName){
         
         location.href=bodyName;
      }
      
   </script>
   
   <%-- <!-- Dashboard 탭 -->
   <div id="tab1" class="tabcontent current">
      <%@include file="dashBoard.jsp" %>
   </div>
   
   <!-- 댄스동아리 탭 -->
   <div id="tab2" class="tabcontent">
      <%@include file="list.jsp" %>
   </div>
   
   <!-- 영화동아리 탭 -->
   <div id="tab3" class="tabcontent">
      <%@include file="list.jsp" %>
   </div> --%>
</body>
</html>

 

5. 환경설정

 

pom.xml

 

<!-- dashBoard Chart -->
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-core</artifactId>
	<version>2.9.2</version>
</dependency>
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.9.2</version>
</dependency>

 

root-context.xml

 

<!-- dashBoard Chart -->
<mvc:annotation-driven />
<mvc:default-servlet-handler />

'스프링(Spring) > 게시판 만들기' 카테고리의 다른 글

[Spring 게시판] 등록(첨부파일, Validation)  (0) 2020.03.12
[Spring 게시판] 목록(검색, 페이징, 정렬, 게시글 수, 말줄임표, 마우스오버 시 전체 제목, 등록자 표시)  (0) 2020.03.12
[Spring 게시판] 로그인(Session, Validation)  (0) 2020.03.12
[Spring 게시판] 환경설정  (0) 2020.03.12
[Spring 게시판] 데이터베이스(MySQL)  (0) 2020.03.12

관련글

댓글

티스토리툴바