본문 바로가기
ICIA 수업일지

2021.10.19 수업일지(Spring Framework, Interceptor, Google API)

by 주성씨 2021. 10. 19.

- 오늘은 학사관리를 가지고 그래픽 차트를 만들어보겠다.

- DB부터 확인하도록 하겠다.

확인

- DB 설정

/ex10/src/main/webapp/WEB-INF/spring/root-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.1.xsd">
	<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		 <property name="driverClassName" value="net.sf.log4jdbc.sql.jdbcapi.DriverSpy"></property>
		 <property name="url" value="jdbc:log4jdbc:mysql://127.0.0.1:3306/haksadb"></property> 
		 <property name="username" value="haksa"></property>
		 <property name="password" value="pass"></property>
	</bean>
	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		 <property name="dataSource" ref="dataSource"/>
		 <property name="mapperLocations" value="classpath:/mapper/**/*.xml"/>
	</bean>
	<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate" destroy-method="clearCache">
		<constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"></constructor-arg>
	</bean>
	<context:component-scan base-package="com.example.mapper"/>
	<context:component-scan base-package="com.example.service"/>
	<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
 		<property name="dataSource" ref="dataSource"></property>
	</bean>
	<tx:annotation-driven/>		
</beans>

 

 

/ex10/src/main/webapp/WEB-INF/views/home.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<title>이주성의 학사관리</title>
<link rel="stylesheet" href="/resources/home.css" />
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>
</head>
<body>
	<div id="page">
		<div id="header">
			<a href="/" title="홈으로"><img src="/resources/back.png" width=960 /></a>
		</div>
		<div id="center">
			<div id="menu">
				<a href="/student/list">학생관리</a>
				<a href="/course/list">강좌관리</a>
				<span>
					<a href="/login">로그인</a>
				</span>
			</div>
			<div id="content">
			<jsp:include page="${pageName}"></jsp:include>
			</div>
		</div>
		<div id="footer">
			<h3>Copyright 학사관리 프로그램. All rights Reserved.</h3>
		</div>
	</div>
</body>
</html>

 

/ex10/src/main/java/com/example/controller/HomeController.java

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class HomeController {

	//Servlet - /면  home view로 간다.
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String home(Model model) {
		model.addAttribute("pageName","about.jsp");
		return "home";
	}
	
}

 

/ex10/src/main/webapp/WEB-INF/views/about.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>학사관리 소개</h1>

 

- 교수 테이블을 수정한다.

- go to mysql

alter table professors add pass nvarchar(200) default 'pass';

 

/ex10/src/main/java/com/example/domain/ProfessorVO.java

package com.example.domain;

public class ProfessorVO {
	private String pcode;
	private String pname;
	private String pass;
	public String getPcode() {
		return pcode;
	}
	public void setPcode(String pcode) {
		this.pcode = pcode;
	}
	public String getPname() {
		return pname;
	}
	public void setPname(String pname) {
		this.pname = pname;
	}
	public String getPass() {
		return pass;
	}
	public void setPass(String pass) {
		this.pass = pass;
	}
	@Override
	public String toString() {
		return "ProfessorVO [pcode=" + pcode + ", pname=" + pname + ", pass=" + pass + "]";
	}
	
	
}

 

/ex10/src/main/resources/mapper/ProfessorMapper.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.example.mapper.ProfessorMapper">
 	<select id="read" resultType="com.example.domain.ProfessorVO">
 		select * from professors where pcode=#{pcode}
 	</select>
</mapper>

 

/ex10/src/main/java/com/example/mapper/ProfessorDAO.java

package com.example.mapper;

import com.example.domain.ProfessorVO;

public interface ProfessorDAO {
	public ProfessorVO read(String pcode);
}

 

/ex10/src/main/java/com/example/mapper/ProfessorDAOImpl.java

package com.example.mapper;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import com.example.domain.ProfessorVO;

@Repository
public class ProfessorDAOImpl implements ProfessorDAO {
	@Autowired
	SqlSession session;

	String namespace = "com.example.mapper.ProfessorMapper";

	@Override
	public ProfessorVO read(String pcode) {
		return session.selectOne(namespace + ".read", pcode);
	}

}

 

- 데이터가 잘 불러오는지 테스트해보겠다.

/ex10/src/test/java/com/example/controller/MysqlTest.java

package com.example.controller;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import com.example.mapper.MysqlMapper;
import com.example.mapper.ProfessorDAO;

@RunWith(SpringJUnit4ClassRunner.class) //먼저 SpringJUnit4ClassRunner.class import한다. 
@ContextConfiguration(locations={"file:src/main/webapp/WEB-INF/spring/**/*.xml"})
public class MysqlTest {
	@Autowired
	private ProfessorDAO mapper;
	
	@Test
	public void getTime() { 
		mapper.read("221"); 
	}
}

 

테스트 확인

 

- 이제 교수 컨트롤러를 생성하겠다.

/ex10/src/main/java/com/example/controller/ProfessorController.java

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ProfessorController {
	@RequestMapping("/login")
	public String login(Model model){
		model.addAttribute("pageName", "login.jsp");
		return "home";
	}
}

 

- 로그인 페이지를 생성하겠다.

/ex10/src/main/webapp/WEB-INF/views/login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>[로그인]</h1>
<style>
	.loginBox{
		width:300px;
		margin: 0px auto;
		padding: 10px;
	}
	input[type=text], input[type=password]{
		width: 100%;
		margin-bottom: 10px;
		font-size: 15px;
	}
	input[type=submit]{
		padding: 10px 20px 10px 20px;
		background: rgb(57, 109, 192);
		color: white;
	}
	input[type=checkbox]{
		margin: 10px 0px 10px 0px;
	}
</style>
<div class="loginBox">
	<form action="post" name="frm">
		<input type="text" name="uid" placeholder="ID"/>
		<input type="password" name="upass" placeholder="PW" />
		<div>
			<input type="checkbox" name="chkLogin"/> 로그인 상태 유지
			&nbsp;&nbsp;&nbsp;<a href="/user/insert">회원가입</a>
		</div>
		<input type="submit" value="LOGIN" />
	</form>
</div>

 

- 이제 로그인 유효성 검사 및 데이터를 서버에 넘겨줘서 아이디가 존재하는지 유무와 로그인 성공 여부를 체크하도록 확인하겠다.

/ex10/src/main/webapp/WEB-INF/views/login.jsp

<script>
	$(frm).on('submit',function(e){
		e.preventDefault();
		var pcode=$(frm.pcode).val();
		var pass=$(frm.pass).val();
		//var isLogin=$(frm.chkLogin).is(":checked")?true:false;
		//alert(isLogin);
		if(pcode==""||pass==""){
			alert("교수번호와 비밀번호를 입력하세요.");
			return;
		}
		if(!confirm("로그인 하시겠습니까?")) return;
		$.ajax({
			type:'post',
			url:'/login',
			data:{
				pcode:pcode,
				pass:pass
			},
			success:function(data){
				alert(data);
			}
		})
	})
</script>

 

/ex10/src/main/java/com/example/controller/ProfessorController.java

package com.example.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.example.domain.ProfessorVO;
import com.example.mapper.ProfessorDAO;

@Controller
public class ProfessorController {
	@Autowired
	ProfessorDAO pdao;
	
	@RequestMapping("/login")
	public String login(Model model){
		model.addAttribute("pageName", "login.jsp");
		return "home";
	}
	
	// 회원유무 확인 및 비밀번호 유효성 검사
	@RequestMapping(value="/login", method=RequestMethod.POST)
	@ResponseBody
	public int loginPost(String pcode, String pass){
		int result=0;
		ProfessorVO vo=pdao.read(pcode);
		if(vo!=null){
			if(pass.equals(vo.getPass())){
				result=1;
			}else{
				result=2;
			}
		}
		return result;
	}
}

 

/ex10/src/main/webapp/WEB-INF/views/login.jsp

<script>
	$(frm).on('submit',function(e){
		e.preventDefault();
		var pcode=$(frm.pcode).val();
		var pass=$(frm.pass).val();
		//var isLogin=$(frm.chkLogin).is(":checked")?true:false;
		//alert(isLogin);
		if(pcode==""||pass==""){
			alert("교수번호와 비밀번호를 입력하세요.");
			return;
		}
		if(!confirm("로그인 하시겠습니까?")) return;
		$.ajax({
			type:'post',
			url:'/login',
			data:{
				pcode:pcode,
				pass:pass
			},
			success:function(data){
				if(data==0){
					alert("해당 교수가 존재하지 않습니다.")
				}else if(data==2){
					alert("비밀번호를 확인하세요.")
				}else{
					alert("로그인합니다.")
					location.href="/"
				}
			}
		})
	})
</script>

 

- 로그인 후 로그인 정보를 세션에 담아서 로그인을 유지할 수 있도록 하겠다.

/ex10/src/main/java/com/example/controller/ProfessorController.java

...
	// 회원유무 확인 및 비밀번호 유효성 검사
	@RequestMapping(value="/login", method=RequestMethod.POST)
	@ResponseBody
	public int loginPost(String pcode, String pass, HttpSession session){
		int result=0;
		ProfessorVO vo=pdao.read(pcode);
		if(vo!=null){
			if(pass.equals(vo.getPass())){
				result=1;
				session.setAttribute("pcode", pcode);
				session.setAttribute("pname", vo.getPname());
			}else{
				result=2;
			}
		}
		return result;
	}
...

 

/ex10/src/main/webapp/WEB-INF/views/home.jsp

...
			<div id="menu">
				<a href="/stu/list" title="학생관리">학생관리</a>
				<a href="/cou/list" title="강좌관리">강좌관리</a>
				<span style="float: right">
				<c:if test="${pcode==null}">
					<a href="/login">로그인</a>
				</c:if>
				<c:if test="${pcode!=null }">
					<a href="">${pname}님</a>
					<a href="/logout">로그아웃</a>
				</c:if>
				</span>
			</div>
...

 

확인

 

- 이제 로그아웃 컨트롤러를 생성하겠다.

/ex10/src/main/java/com/example/controller/ProfessorController.java

...
	@RequestMapping("/logout")
	public String logout(HttpSession session){
		session.invalidate();
		return "redirect:/";
	}
...

 

로그인 로그아웃 확인

 

- 세션은 브라우저가 켜져 있는 동안에만 로그인이 유지된다. 쿠키를 이용하면 일정 시간동안 브라우저에 데이터를 저장할 수 있다.

- 로그인 체크 박스의 상태에 따라서 데이터를 boolean값으로 넘겨주고 이를 데이터에 저장해서 쿠키에 넣을 수 있도록 하겠다.

/ex10/src/main/webapp/WEB-INF/views/login.jsp

...
<script>
	$(frm).on('submit',function(e){
		e.preventDefault();
		var pcode=$(frm.pcode).val();
		var pass=$(frm.pass).val();
		var isLogin=$(frm.chkLogin).is(":checked")?true:false;
		if(pcode==""||pass==""){
			alert("교수번호와 비밀번호를 입력하세요.");
			return;
		}
		if(!confirm("로그인 하시겠습니까?")) return;
		$.ajax({
			type:'post',
			url:'/login',
			data:{
				pcode:pcode,
				pass:pass,
				isLogin:isLogin
			},
			success:function(data){
				if(data==0){
					alert("해당 교수가 존재하지 않습니다.")
				}else if(data==2){
					alert("비밀번호를 확인하세요.")
				}else{
					alert("로그인합니다.")
					var dest="${dest}";
					if(dest==null || dest==""){
						location.href="/"						
					}else{
						location.href=dest;
					}
				}
			}
		})
	})
</script>

 

- isLogin이 참인 경우에만 쿠키에 저장하도록 하겠다.

/ex10/src/main/java/com/example/controller/ProfessorController.java

...
	// 회원유무 확인 및 비밀번호 유효성 검사
	// 회원 데이터 세션 저장 또는 로그인 상태 유지 값에 따른 쿠키 저장
	@RequestMapping(value="/login", method=RequestMethod.POST)
	@ResponseBody
	public int loginPost(String pcode, String pass, boolean isLogin, HttpSession session, HttpServletResponse response){
		int result=0;
		ProfessorVO vo=pdao.read(pcode);
		if(vo!=null){
			if(pass.equals(vo.getPass())){
				result=1;
				session.setAttribute("pcode", pcode);
				session.setAttribute("pname", vo.getPname());
				if(isLogin){
					Cookie cookie = new Cookie("pname",vo.getPname());
					cookie.setPath("/");
					cookie.setMaxAge(60*60*24*7);
					response.addCookie(cookie);
				}
			}else{
				result=2;
			}
		}
		return result;
	}
}

 

- 브라우저의 쿠키 값 확인

/ex10/src/main/java/com/example/controller/HomeController.java

package com.example.controller;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.util.WebUtils;

import com.example.domain.ProfessorVO;
import com.example.mapper.ProfessorDAO;

@Controller
public class HomeController {
	@Autowired
	ProfessorDAO pdao;
	
	//Servlet - /면  home view로 간다.
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String home(Model model, HttpServletRequest request) {
		// 쿠키 값 확인
		Cookie cookie = WebUtils.getCookie(request, "pcode");
		String pcode=cookie.getValue();
		if(cookie!=null){
			request.getSession().setAttribute("pcode", pcode);
			ProfessorVO vo = pdao.read(pcode);
			request.getSession().setAttribute("pname", vo.getPname());
		}
		model.addAttribute("pageName","about.jsp");
		return "home";
	}
	
}

 

- 로그아웃시 쿠키값을 삭제하도록 하겠다.

/ex10/src/main/java/com/example/controller/ProfessorController.java

...
	@RequestMapping("/logout")
	public String logout(HttpSession session, HttpServletRequest request, HttpServletResponse response) {
		// 로그아웃시 쿠키값 삭제
		Cookie cookie = WebUtils.getCookie(request, "pcode");
		if(cookie!=null){
			cookie.setPath("/");
			cookie.setMaxAge(0);
			response.addCookie(cookie);
		}
		session.invalidate();
		return "redirect:/";
	}
...

 

로그인 로그아웃시 쿠키값 변동 확인

 

 

- 로그아웃 상태에서 학생관리 메뉴를 누르면 로그인 페이지로 이동하도록 interceptor하겠다.

- 우선 학생관리를 위한 컨트롤러부터 만들겠다.

/ex10/src/main/java/com/example/controller/StudentController.java

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class StudentController {
	@RequestMapping("/student/list")
	public String list(Model model){
		model.addAttribute("pageName", "slist.jsp");
		return "home";
	}
}

 

- 학생관리 페이지 생성

/ex10/src/main/webapp/WEB-INF/views/slist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>학생관리</h1>

 

/ex10/src/main/resources/mapper/StudentMapper.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.example.mapper.StudentMapper">
 	<select id="list" resultType="hashmap">
 		select s.*,pname from students s, professors p
		where advisor=pcode
 	</select>
</mapper>

 

/ex10/src/main/java/com/example/mapper/StudentDAO.java

package com.example.mapper;

import java.util.HashMap;
import java.util.List;

public interface StudentDAO {
	public List<HashMap<String,Object>> list();
}

 

/ex10/src/main/java/com/example/mapper/StudentDAOImpl.java

package com.example.mapper;

import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class StudentDAOImpl implements StudentDAO {
	@Autowired
	SqlSession session;
	
	String namespace="com.example.mapper.StudentMapper";
	
	@Override
	public List<HashMap<String, Object>> list() {
		return session.selectList(namespace+".list");
	}

}

 

- 해당 데이터를 json으로 받겠다.

/ex10/src/main/java/com/example/controller/StudentController.java

package com.example.controller;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.mapper.StudentDAO;

@Controller
public class StudentController {
	@Autowired
	StudentDAO sdao;
	
	@RequestMapping("/student/list")
	public String list(Model model){
		model.addAttribute("pageName", "slist.jsp");
		return "home";
	}
	
	@RequestMapping("/students.json")
	public List<HashMap<String, Object>> list(){
		return sdao.list();
	}
}

 

json 데이터 확인

 

 

- 이제 json 데이터를 slist.jsp에 handlebar를 이용해 출력하도록 하겠다.

/ex10/src/main/webapp/WEB-INF/views/slist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<h1>학생관리</h1>
<table id="items"></table>
<script id="temp" type="text/x-handlebars-template">
<tr>
	<td width=100>학생코드</td>
	<td width=100>학생명</td>
	<td width=100>학과</td>
	<td width=100>학년</td>
	<td width=200>생년월일</td>
	<td width=100>담당교수</td>
</tr>
{{#each .}}
	<tr class="row">
		<td>{{scode}}</td>
		<td>{{sname}}</td>
		<td>{{dept}}</td>
		<td>{{year}}</td>
		<td>{{birthday}}</td>
		<td>{{pname}}</td>
	</tr>
{{/each}}
</script>
<script>
	$.ajax({
		type : 'get',
		url : '/students.json',
		dataType : 'json',
		success : function(data) {
			var temp = Handlebars.compile($("#temp").html());
			$("#items").html(temp(data));
		}
	})
</script>

 

테이블 출력 확인

 

- 학생 row를 클릭하면 해당 학생의 정보를 볼 수 있도록 하겠다.

/ex10/src/main/webapp/WEB-INF/views/slist.jsp

..
{{#each .}}
	<tr class="row" onClick="location.href='/student/read?scode={{scode}}'">
		<td>{{scode}}</td>
		<td>{{sname}}</td>
		<td>{{dept}}</td>
		<td>{{year}}</td>
		<td>{{birthday}}</td>
		<td>{{pname}}</td>
	</tr>
{{/each}}
..

 

/ex10/src/main/java/com/example/controller/StudentController.java

...
	@RequestMapping("/student/read")
	public String read(Model model){
		model.addAttribute("pageName", "sread.jsp");
		return "home";
	}
...

 

/ex10/src/main/webapp/WEB-INF/views/sread.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>학생정보</h1>

 

- 학생 정보를 볼려고하면 로그인을 요구하는 인증 interceptor를 만들도록 하겠다.

/ex10/src/main/java/com/example/interceptor

/ex10/src/main/java/com/example/interceptor/AuthInterceptor.java

package com.example.interceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;

public class AuthInterceptor extends HandlerInterceptorAdapter {

	@Override
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
			throws Exception {
		if(request.getSession().getAttribute("pcode")==null){
			String path=request.getServletPath();
			String query=request.getQueryString()==null?"":"?"+request.getQueryString();
			request.getSession().setAttribute("dest", path+query);
			response.sendRedirect("/login");			
		}
		return super.preHandle(request, response, handler);
	}
	
}

 

- 이 인증 interceptor를 연결해주도록 하겠다.

/ex10/src/main/webapp/WEB-INF/spring/appServlet/servlet-context.xml

...

	<beans:bean id="AuthInterceptor" class="com.example.interceptor.AuthInterceptor"/>
		<interceptors>
			<interceptor>
				<mapping path="/student/read"/>
				<beans:ref bean="AuthInterceptor"/>
			</interceptor>
	</interceptors>
</beans:beans>

 

/ex10/src/main/java/com/example/domain/StudentVO.java

package com.example.domain;

public class StudentVO extends ProfessorVO {
	private String scode;
	private String dept;
	private String sname;
	public String getScode() {
		return scode;
	}
	public void setScode(String scode) {
		this.scode = scode;
	}
	public String getDept() {
		return dept;
	}
	public void setDept(String dept) {
		this.dept = dept;
	}
	public String getSname() {
		return sname;
	}
	public void setSname(String sname) {
		this.sname = sname;
	}
	@Override
	public String toString() {
		return "StudentVO [scode=" + scode + ", dept=" + dept + ", sname=" + sname + "]";
	}
	
	
}

 

/ex10/src/main/resources/mapper/StudentMapper.xml

 	<select id="read" resultType="com.example.domain.StudentVO">
 		select s.*,pname from students s, professors p
		where advisor=pcode and scode=#{scode}
 	</select>
</mapper>

 

/ex10/src/main/java/com/example/mapper/StudentDAO.java

...
	public StudentVO read(String scode);
}

 

/ex10/src/main/java/com/example/mapper/StudentDAOImpl.java

...
	@Override
	public StudentVO read(String scode) {
		return session.selectOne(namespace+".read", scode);
	}

}

 

/ex10/src/main/java/com/example/controller/StudentController.java

...
	@RequestMapping("/student/read")
	public String read(Model model, String scode){
		model.addAttribute("vo",sdao.read(scode));
		model.addAttribute("pageName", "sread.jsp");
		return "home";
	}
...

 

/ex10/src/main/webapp/WEB-INF/views/sread.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>학생정보</h1>
<div style="text-align: left;">
	<h3>학생코드 : ${vo.scode}</h3>
	<h3>학생이름 : ${vo.sname}</h3>
	<h3>소속학과 : ${vo.dept}</h3>
	<h3>담당교수 : ${vo.pname}</h3>
</div>

 

학생정보 출력 확인

 

- 이번에는 해당 학생의 수강신청 정보를 출력하도록 하겠다.

- 그리고 그 수강신청한 과목의 성적을 google graph로 출력해보도록 하겠다.

/ex10/src/main/resources/mapper/StudentMapper.xml

...
 	<!-- 특정 학생이 신청한 강좌 -->
 	<select id="enroll" resultType="hashmap">
 		select e.*,lname from enrollments e, courses c
		where scode=#{scode} and e.lcode=c.lcode
 	</select>
</mapper>

 

/ex10/src/main/java/com/example/mapper/StudentDAO.java

...
	public List<HashMap<String,Object>> enroll(String scode);
}

 

/ex10/src/main/java/com/example/mapper/StudentDAOImpl.java

...
	@Override
	public List<HashMap<String, Object>> enroll(String scode) {
		return session.selectList(namespace+".enroll",scode);
	}

}

 

/ex10/src/main/java/com/example/controller/StudentController.java

...
	@RequestMapping("/student/enroll.json")
	@ResponseBody
	public List<HashMap<String, Object>> enroll(String scode){
		return sdao.enroll(scode);
	}
...

 

json 데이터 출력 확인

 

 

- 이제 학생 정보 페이지에 해당 학생의 수강신청 과목의 점수까지 출력되도록 하겠다.

/ex10/src/main/webapp/WEB-INF/views/sread.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<h1>학생정보</h1>
<div style="text-align: left;">
	<h3>학생코드 : ${vo.scode}</h3>
	<h3>학생이름 : ${vo.sname}</h3>
	<h3>소속학과 : ${vo.dept}</h3>
	<h3>담당교수 : ${vo.pname}</h3>
	<hr />
	<h1>수강신청 정보</h1>
	<table id="items"></table>
	<script id="temp" type="text/x-handlebars-template">
<tr>
	<td width=100>강좌번호</td>
	<td width=200>강좌이름</td>
	<td width=200>수강신청일</td>
	<td width=100>점수</td>
</tr>
{{#each .}}
	<tr class="row">
		<td>{{lcode}}</td>
		<td>{{lname}}</td>
		<td>{{edate}}</td>
		<td>{{grade}}</td>
	</tr>
{{/each}}
	</script>
</div>
<script>
	var scode = "${vo.scode}";
	getList();
	function getList() {
		$.ajax({
			type : 'get',
			url : '/student/enroll.json',
			dataType : 'json',
			data : {
				scode : scode
			},
			success : function(data) {
				var temp = Handlebars.compile($("#temp").html());
				$("#items").html(temp(data));
			}
		})
	}
</script>

 

확인

 

- 구글 그래프 차트를 이용하겠다.

https://developers.google.com/chart

 

Charts  |  Google Developers

Interactive charts for browsers and mobile devices.

developers.google.com

 

https://developers.google.com/chart/interactive/docs/gallery/combochart?hl=ko 

 

Visualization: Combo Chart  |  Charts  |  Google Developers

Send feedback Visualization: Combo Chart Overview A chart that lets you render each series as a different marker type from the following list: line, area, bars, candlesticks, and stepped area. To assign a default marker type for series, specify the seriesT

developers.google.com

 

/ex10/src/main/webapp/WEB-INF/views/chart.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 type="text/javascript"
	src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
	google.charts.load('current', {
		'packages' : [ 'corechart' ]
	});
	google.charts.setOnLoadCallback(drawVisualization);

	function drawVisualization() {
		// Some raw data (not necessarily accurate)
		var data = google.visualization.arrayToDataTable(chartData); <<<---

		var options = {
			title : '강좌 점수 그래프',
			vAxis : {
				title : '점수'
			},
			hAxis : {
				title : '강좌명'
			},
			seriesType : 'bars'
		};

		var chart = new google.visualization.ComboChart(document
				.getElementById('chart_div'));
		chart.draw(data, options);
	}
</script>
</head>
<body>
	<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

 

/ex10/src/main/webapp/WEB-INF/views/sread.jsp

...
	var chartData=[
			[ '과목명', '점수' ],
			[ '한국의건축문화', 70],
			[ '자바웹앱개발이론', 70],
			[ '파일처리론', 90],
			[ '자료구조', 70],
			[ '알고리즘', 0],
			[ '논리회로', 75]
	];
</script>
<jsp:include page="chart.jsp"></jsp:include>

출력 확인

 

- 어레이를 만들어서 데이터를 불러올때마다(each) 넣어주도록 하겠다.

/ex10/src/main/webapp/WEB-INF/views/sread.jsp

...
<script>
	var scode = "${vo.scode}";
	getList();
	var chartData = new Array();
	function getList() {
		$.ajax({
			type : 'get',
			url : '/student/enroll.json',
			dataType : 'json',
			data : {
				scode : scode
			},
			success : function(data) {
				var temp = Handlebars.compile($("#temp").html());
				$("#items").html(temp(data));
				// 차트 데이터를 가지고 와서 배열에 넣는 작업을 each로 돌림
				var arr = new Array();
				arr.push("과목명");
				arr.push("점수");
				chartData.push(arr);
				$(data).each(function(){
					var arr = new Array();
					arr.push(this.lname);
					arr.push(this.grade);
					chartData.push(arr);
				})
			}
		})
	}
</script>
<jsp:include page="chart.jsp"></jsp:include>

 

데이터를 array에 넣어서 출력 확인

 

 

- 이제 강좌관리를 만들어보도록 하겠다.

/ex10/src/main/resources/mapper/CourseMapper.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.example.mapper.CourseMapper">
 	<select id="list" resultType="hashmap">
 		select c.*,pname,dept from courses c, professors p
		where instructor=pcode
 	</select>
</mapper>

 

/ex10/src/main/java/com/example/mapper/CourseDAO.java

package com.example.mapper;

import java.util.HashMap;
import java.util.List;

public interface CourseDAO {
	public List<HashMap<String, Object>> list();
}

 

/ex10/src/main/java/com/example/mapper/CourseDAOImpl.java

package com.example.mapper;

import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class CourseDAOImpl implements CourseDAO {

	@Autowired
	SqlSession session;

	String namespace = "com.example.mapper.CourseMapper";

	@Override
	public List<HashMap<String, Object>> list() {
		return session.selectList(namespace + ".list");
	}

}

 

/ex10/src/main/java/com/example/controller/CourseController.java

package com.example.controller;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.example.mapper.CourseDAO;

@Controller
public class CourseController {
	@Autowired
	CourseDAO cdao;
	
	@RequestMapping("/courses.json")
	@ResponseBody
	public List<HashMap<String, Object>> list(){
		return cdao.list();
	}
	
	@RequestMapping("/course/list")
	public String list(Model model){
		model.addAttribute("pageName", "clist.jsp");
		return "home";
	}
}

 

/ex10/src/main/webapp/WEB-INF/views/clist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<h1>강좌관리</h1>
<table id="items"></table>
<script id="temp" type="text/x-handlebars-template">
<tr>
	<td width=100>강좌코드</td>
	<td width=200>강좌명</td>
	<td width=100>수강시간</td>
	<td width=100>강의실</td>
	<td width=100>담당교수</td>
	<td width=100>수강인원</td>
	<td width=100>수강정원</td>
</tr>
{{#each .}}
	<tr class="row" onClick="location.href=''">
		<td>{{lcode}}</td>
		<td>{{lname}}</td>
		<td>{{hours}}</td>
		<td>{{room}}</td>
		<td>{{pname}}</td>
		<td>{{capacity}}</td>
		<td>{{persons}}</td>
	</tr>
{{/each}}
</script>
<script>
	$.ajax({
		type : 'get',
		url : '/courses.json',
		dataType : 'json',
		success : function(data) {
			var temp = Handlebars.compile($("#temp").html());
			$("#items").html(temp(data));
		}
	})
</script>

 

강좌목록 출력 확인

 

- 이제 강좌관리의 목록을 출력할 경우 로그인해야하는 경로로 진입하도록 하겠다.

- 그리고 진입하면 강좌정보를 보여주도록 하겠다.

/ex10/src/main/webapp/WEB-INF/spring/appServlet/servlet-context.xml

...
	<beans:bean id="AuthInterceptor" class="com.example.interceptor.AuthInterceptor"/>
		<interceptors>
			<interceptor>
				<mapping path="/student/read"/>
				<mapping path="/course/read"/>
				<beans:ref bean="AuthInterceptor"/>
			</interceptor>
	</interceptors>
</beans:beans>

 

/ex10/src/main/java/com/example/domain/CourseVO.java

package com.example.domain;

public class CourseVO extends ProfessorVO {
	private String lcode;
	private String lname;
	private String room;
    ... getter, setter, tostring

 

/ex10/src/main/resources/mapper/CourseMapper.xml

...
 	<select id="read" resultType="com.example.domain.CourseVO">
 		select c.*,pname,dept from courses c, professors p
		where instructor=pcode and lcode=#{lcode}
 	</select>
</mapper>

 

/ex10/src/main/java/com/example/mapper/CourseDAO.java

...
	public CourseVO read(String lcode);
}

 

/ex10/src/main/java/com/example/mapper/CourseDAOImpl.java

...
	@Override
	public CourseVO read(String lcode) {
		return session.selectOne(namespace+".read",lcode);
	}

}

 

/ex10/src/main/java/com/example/controller/CourseController.java

...
	@RequestMapping("/course/read")
	public String read(Model model, String lcode){
		model.addAttribute("vo",cdao.read(lcode));
		model.addAttribute("pageName", "cread.jsp");
		return "home";
	}
}

 

/ex10/src/main/webapp/WEB-INF/views/cread.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<h1>강좌정보</h1>
<div style="text-align: left;">
	<h3>강좌코드 : ${vo.lcode}</h3>
	<h3>강좌이름 : ${vo.lname}</h3>
	<h3>강의실 : ${vo.room}</h3>
	<h3>담당교수 : ${vo.pname}</h3>
</div>

 

강좌정보 확인

 

- 강좌정보 확인후 해당 페이지 아래 해당 강좌를 수강하는 학생을 출력해주도록 하겠다.

/ex10/src/main/resources/mapper/CourseMapper.xml

...
 	<!-- 특정 학생이 신청한 강좌 -->
 	<select id="enroll" resultType="hashmap">
 		select e.*,sname from enrollments e, students s
		where lcode=#{lcode} and e.scode=s.scode
 	</select>
</mapper>

 

/ex10/src/main/java/com/example/mapper/CourseDAO.java

...
	public List<HashMap<String, Object>> enroll(String lcode);
}

 

/ex10/src/main/java/com/example/mapper/CourseDAOImpl.java

...
	@Override
	public List<HashMap<String, Object>> enroll(String lcode) {
		return session.selectList(namespace+".enroll", lcode);
	}

}

 

/ex10/src/main/java/com/example/controller/CourseController.java

...
	@RequestMapping("/course/enroll.json")
	@ResponseBody
	public List<HashMap<String, Object>> enroll(String lcode){
		return cdao.enroll(lcode);
	}
...

 

json 데이터 확인

 

- json 데이터를 페이지에 출력하도록 하겠다.

/ex10/src/main/webapp/WEB-INF/views/cread.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<h1>강좌정보</h1>
<div style="text-align: left;">
	<h3>강좌코드 : ${vo.lcode}</h3>
	<h3>강좌이름 : ${vo.lname}</h3>
	<h3>강의실 : ${vo.room}</h3>
	<h3>담당교수 : ${vo.pname}</h3>
	<hr/>
	<h1>수강신청 정보</h1>
	<table id="items"></table>
	<script id="temp" type="text/x-handlebars-template">
<tr>
	<td width=100>학생번호</td>
	<td width=100>학생이름</td>
	<td width=100>점수</td>
	<td width=150>수강신청일</td>
</tr>
{{#each .}}
	<tr class="row">
		<td>{{scode}}</td>
		<td>{{sname}}</td>
		<td>{{grade}}</td>
		<td>{{edate}}</td>
	</tr>
{{/each}}
	</script>
</div>
<script>
	var lcode = "${vo.lcode}";
	getList();
	var chartData = new Array();
	var headTitle = '학생 점수 그래프'
	var yTitle = '점수'
	var xTitle = '학생명'
	function getList() {
		$.ajax({
			type : 'get',
			url : '/course/enroll.json',
			dataType : 'json',
			data : {
				lcode : lcode
			},
			success : function(data) {
				var temp = Handlebars.compile($("#temp").html());
				$("#items").html(temp(data));
				// 차트 데이터를 가지고 와서 배열에 넣는 작업을 each로 돌림
				var arr = new Array();
				arr.push("학생명");
				arr.push("점수");
				chartData.push(arr);
				$(data).each(function(){
					var arr = new Array();
					arr.push(this.sname);
					arr.push(this.grade);
					chartData.push(arr);
				})
			}
		})
	}
</script>
<jsp:include page="chart.jsp"></jsp:include>

 

- 차트의 y축, x축, title을 변경하기 위해서 변수명을 설정해줬다. 그에 따라서 chart.jsp에도 맞춰준다.

/ex10/src/main/webapp/WEB-INF/views/chart.jsp

...
		var options = {
			title : headTitle,
			vAxis : {
				title : yTitle
			},
			hAxis : {
				title : xTitle
			},
			seriesType : 'bars'
		};
...

 

/ex10/src/main/webapp/WEB-INF/views/sread.jsp

...
<script>
	var scode = "${vo.scode}";
	getList();
	var chartData = new Array();
	var headTitle = '강좌 점수 그래프'
	var yTitle = '점수'
	var xTitle = '강좌명'
...

 

확인

 

- 아래의 데이터들을 sql문으로 출력해보도로 하겠다.

- 강좌별 평균점수

- 강좌별 수강신청 인원수

select e.lcode, lname, avg(grade),count(scode) 
from enrollments e, courses c
where e.lcode=c.lcode
group by e.lcode, lname;

 

- 홈에 해당 데이터를 출력할 메뉴를 만들겠다.

/ex10/src/main/webapp/WEB-INF/views/home.jsp

...
		<div id="center">
			<div id="menu">
				<a href="/student/list" title="학생관리">학생관리</a>
				<a href="/course/list" title="강좌관리">강좌관리</a>
				<a href="/statistics/list" title="통계">통계</a>
...

 

/ex10/src/main/resources/mapper/StatisticsMapper.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.example.mapper.StatisticsMapper">
 	<select id="groupLcode" resultType="hashmap">
 		select e.lcode, lname, avg(grade) average ,count(scode) cnt
		from enrollments e, courses c
		where e.lcode=c.lcode
		group by e.lcode, lname
 	</select>
</mapper>

 

/ex10/src/main/java/com/example/mapper/StatisticsDAO.java

package com.example.mapper;

import java.util.HashMap;
import java.util.List;

public interface StatisticsDAO {
	public List<HashMap<String, Object>> groupLcode();
}

 

/ex10/src/main/java/com/example/mapper/StatisticsDAOImpl.java

package com.example.mapper;

import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class StatisticsDAOImpl implements StatisticsDAO {

	@Autowired
	SqlSession session;
	
	String namespace="com.example.mapper.StatisticsMapper";
	
	@Override
	public List<HashMap<String, Object>> groupLcode() {
		return session.selectList(namespace+".groupLcode");
	}

}

 

/ex10/src/main/java/com/example/controller/StatisticsController.java

package com.example.controller;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.example.mapper.StatisticsDAO;

@Controller
public class StatisticsController {
	@Autowired
	StatisticsDAO stdao;
	
	@RequestMapping("/groupLcode.json")
	@ResponseBody
	public List<HashMap<String, Object>> groupLcode(){
		return stdao.groupLcode();
	}
	
	@RequestMapping("/statistics/list")
	public String list(Model model){
		model.addAttribute("pageName", "statistics.jsp");
		return "home";
	}
}

 

/ex10/src/main/webapp/WEB-INF/views/statistics.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div>
	<select id="selChart">
		<option value="chart1">강좌별 평균점수 및 수강신청 인원수</option>
	</select>
	<table id="items"></table>
	<script id="temp" type="text/x-handlebars-template">
<tr>
	<td width=200>강좌명</td>
	<td width=100>강좌번호</td>
	<td width=100>강좌평균</td>
	<td width=100>수강인원</td>
</tr>
{{#each .}}
	<tr class="row" onClick="location.href='/student/read?scode={{scode}}'">
		<td>{{lname}}</td>
		<td>{{lcode}}</td>
		<td>{{average}}</td>
		<td>{{cnt}}</td>
	</tr>
{{/each}}
</script>
</div>
<script>
	getList();
	var chartData = new Array();
	var headTitle = '강좌별 평균점수 그래프'
	var yTitle = '점수'
	var xTitle = '강좌명'
	function getList() {
		$.ajax({
			type : 'get',
			url : '/groupLcode.json',
			dataType : 'json',
			success : function(data) {
				var temp = Handlebars.compile($("#temp").html());
				$("#items").html(temp(data));
				var arr = new Array();
				arr.push("과목명");
				arr.push("평균점수");
				arr.push("수강인원");
				chartData.push(arr);
				
				$(data).each(function(){
					var arr = new Array();
					arr.push(this.lname);
					arr.push(this.average);
					arr.push(this.cnt);
					chartData.push(arr);
				})
			}
		})

	}
</script>
<jsp:include page="chart.jsp"></jsp:include>

 

확인

 

- 학생별 평균점수 및 수강과목수

/ex10/src/main/resources/mapper/StatisticsMapper.xml

	<select resultType="hashmap" id="groupScode">
		select e.scode,s.sname,avg(grade) average, count(lcode) cnt
		from enrollments e, students s
		where e.scode=s.scode
		group by scode, s.sname
	</select>

 

/ex10/src/main/java/com/example/mapper/StatisticsDAO.java

	public List<HashMap<String, Object>> groupScode();

 

/ex10/src/main/java/com/example/mapper/StatisticsDAOImpl.java

	@Override
	public List<HashMap<String, Object>> groupScode() {
		return session.selectList(namespace+".groupScode");
	}

 

/ex10/src/main/java/com/example/controller/StatisticsController.java

	@RequestMapping("/groupScode.json")
	@ResponseBody
	public List<HashMap<String, Object>> groupScode(){
		return stdao.groupScode();
	}

 

/ex10/src/main/webapp/WEB-INF/views/statistics.jsp

...

	<script id="temp2" type="text/x-handlebars-template">
<tr>
	<td width=150>학생번호</td>
	<td width=100>학생이름</td>
	<td width=150>성적평균</td>
	<td width=100>수강인원</td>
</tr>
{{#each .}}
	<tr class="row">
		<td>{{scode}}</td>
		<td>{{sname}}</td>
		<td>{{average}}</td>
		<td>{{cnt}}</td>
	</tr>
{{/each}}
</script>

...

<script>
	getList();
	var chartData = new Array();
	var headTitle = '';
	var yTitle = '';
	var xTitle = '';
	$("#selChart").on('change', function() {
		getList();
	})
	function getList() {
		var selChart = $('#selChart').val();
		$.ajax({
			type : 'get',
			url : selChart,
			dataType : 'json',
			success : function(data) {
				if (selChart == '/groupLcode.json') {
					var temp = Handlebars.compile($("#temp1").html());
					$("#items").html(temp(data));

					chartData = new Array();
					headTitle = '강좌별 평균점수 그래프'
					yTitle = '점수'
					xTitle = '강좌명'
					var arr = new Array();
					arr.push("과목명");
					arr.push("평균점수");
					arr.push("수강인원");
					chartData.push(arr);

					$(data).each(function() {
						arr = new Array();
						arr.push(this.lname);
						arr.push(this.average);
						arr.push(this.cnt);
						chartData.push(arr);
					})
					drawVisualization();
				}
				
				if (selChart == '/groupScode.json') {
					var temp = Handlebars.compile($("#temp2").html());
					$("#items").html(temp(data));

					chartData = new Array();
					headTitle = '학생별 평균점수 그래프'
					yTitle = '점수'
					xTitle = '강좌명'
					var arr = new Array();
					arr.push("학생명");
					arr.push("평균점수");
					arr.push("수강과목갯수");
					chartData.push(arr);

					$(data).each(function() {
						arr = new Array();
						arr.push(this.sname);
						arr.push(this.average);
						arr.push(this.cnt);
						chartData.push(arr);
					})
					drawVisualization();
				}
				
			}
		})

	}
</script>
<jsp:include page="chart.jsp"></jsp:include>

 

확인

 

- 학과별 인원수

- 날짜별 수강신청인원수

/ex10/src/main/resources/mapper/StatisticsMapper.xml

	<select id="groupDept" resultType="hashmap">
		select dept,count(scode) cnt
		from students
		group by dept;
	</select>
	<select id="groupEdate" resultType="hashmap">
		select edate,count(scode) cnt
		from enrollments
		group by edate;
	</select>
</mapper>

 

/ex10/src/main/java/com/example/mapper/StatisticsDAO.java

	public List<HashMap<String, Object>> groupDept();
	public List<HashMap<String, Object>> groupEdate();
}

 

/ex10/src/main/java/com/example/mapper/StatisticsDAOImpl.java

	@Override
	public List<HashMap<String, Object>> groupDept() {
		return session.selectList(namespace+".groupDept");
	}

	@Override
	public List<HashMap<String, Object>> groupEdate() {
		return session.selectList(namespace+".groupEdate");
	}

}

 

/ex10/src/main/java/com/example/controller/StatisticsController.java

	@RequestMapping("/groupDept.json")
	@ResponseBody
	public List<HashMap<String, Object>> groupDept(){
		return stdao.groupDept();
	}
	
	@RequestMapping("/groupEdate.json")
	@ResponseBody
	public List<HashMap<String, Object>> groupEdate(){
		return stdao.groupEdate();
	}

 

/ex10/src/main/webapp/WEB-INF/views/statistics.jsp

	<script id="temp3" type="text/x-handlebars-template">
<tr>
	<td width=200>학과명</td>
	<td width=200>학과인원</td>
</tr>
{{#each .}}
	<tr class="row">
		<td>{{dept}}</td>
		<td>{{cnt}}</td>
	</tr>
{{/each}}
</script>
	<script id="temp4" type="text/x-handlebars-template">
<tr>
	<td width=200>날짜별</td>
	<td width=200>신청인원</td>
</tr>
{{#each .}}
	<tr class="row">
		<td>{{edate}}</td>
		<td>{{cnt}}</td>
	</tr>
{{/each}}
</script>
...
				if (selChart == '/groupDept.json') {
					var temp = Handlebars.compile($("#temp3").html());
					$("#items").html(temp(data));

					chartData = new Array();
					headTitle = '학과별 인원수'
					yTitle = '인원수'
					xTitle = '학과명'
					var arr = new Array();
					arr.push("학과명");
					arr.push("인원수");
					chartData.push(arr);

					$(data).each(function() {
						arr = new Array();
						arr.push(this.dept);
						arr.push(this.cnt);
						chartData.push(arr);
					})
					drawVisualization();
				}
				
				if (selChart == '/groupEdate.json') {
					var temp = Handlebars.compile($("#temp4").html());
					$("#items").html(temp(data));

					chartData = new Array();
					headTitle = '날짜별 수강신청수'
					yTitle = '인원수'
					xTitle = '날짜별'
					var arr = new Array();
					arr.push("날짜별");
					arr.push("인원수");
					chartData.push(arr);

					$(data).each(function() {
						arr = new Array();
						arr.push(this.edate);
						arr.push(this.cnt);
						chartData.push(arr);
					})
					drawVisualization();
				}
...

 

확인

저작자표시

'ICIA 수업일지' 카테고리의 다른 글

2021.10.21 수업일지(Spring Framework, KAKAO, NAVER API, Git 연습)  (0) 2021.10.21
2021.10.20 수업일지(Spring Framework, Github, Git, Jsoup, Selenium)  (0) 2021.10.20
2021.10.18 수업일지(Spring Framework, Interceptor)  (0) 2021.10.18
2021.10.15 수업일지(Spring Framework, Fileupload, interceptor)  (0) 2021.10.15
2021.10.14 수업일지(Spring Framework, Fileupload)  (0) 2021.10.14

관련글

티스토리툴바