ataTable.addColumn('number', '날짜');구글 차트를 이용한 데이터 시각화를 하려고 한다.
날자 to 날자를 선택하면
해당 기간에 쓴글을 표로 보여주고 표를 토대로
구글차트를 이용하여 데이터시각화를 보여주려고 한다.
우선 가장 기본이 되는 sql문 부터 보자 .
<select id="admin_findDate" resultType="hashmap">
select board_type,count(board_type)as count from job_board where board_regdate
BETWEEN TO_DATE(#{date1}, 'MM-DD-YY') and TO_DATE(#{date2}, 'MM-DD-YY')
GROUP by board_type
</select>
@Getter
@Setter
@ToString
public class LikeVO {
private int like_no;
private int board_no;
private String user_no;
private int freeboard_like;
먼저 해야 할 것은
해당 게시글에 좋아요를 눌렀는가? 안눌렀는가? 부터 알아야 한다.
그래서 매퍼에 쿼리문을 작성했다.
<!-- 좋아요 눌럿는지 안눌럿는지 -->
<select id="findLike" resultType="int">
select count(*) from vegan_like where board_no = #{board_no} and user_no = #{user_no}
</select>
이렇게 하면 1또는 0이 오는데 1이 오면 좋아요 취소를 보여주고 0이면 좋아요를 보여주면 된다.
// 상세보기
@GetMapping("/freeDetail")
public void freeDetail(int freeboard_no, String user_id,Model model) {
System.out.println("상세보기 페이지");
model.addAttribute("Detail", service.freeDetail(freeboard_no));
LikeVO like = new LikeVO();
like.setBoard_no(freeboard_no);
like.setUser_no(user_id);
model.addAttribute("like", service.findLike(freeboard_no, user_id));
model.addAttribute("getLike", service.getLike(freeboard_no));
service.hit(freeboard_no);
}
기존 상세보기에서 likevo 객체를 선언해주고
getlke로 메퍼에서 오는 값을 모델로 뷰로 던져준다.
이때 유저 아이디와 글 번호를 받게 된다.
var likeval = ${like};
let board_no = ${Detail.freeboard_no};
let user_no = '${login.user_id}';
if(likeval > 0){
console.log(likeval + "좋아요 누름");
$('.LikeBtn').html("좋아요 취소");
$('.LikeBtn').click(function() {
$.ajax({
type :'post',
url : '<c:url value ="/FreeBoard/likeDown"/>',
contentType: 'application/json',
data : JSON.stringify(
{
"board_no" : board_no,
"user_no" : user_no
}
),
success : function(data) {
alert('취소 성공');
}
})// 아작스 끝
})
}else{
console.log(likeval + "좋아요 안누름")
console.log(user_no);
$('.LikeBtn').click(function() {
$.ajax({
type :'post',
url : '<c:url value ="/FreeBoard/likeUp"/>',
contentType: 'application/json',
data : JSON.stringify(
{
"board_no" : board_no,
"user_no" : user_no
}
),
success : function(data) {
alert('성공염');
}
})// 아작스 끝
})
일단 모든 자바스크립트를 보여주었지만 위에 언급한대로
0이 오면 좋아요 버튼을
1이 오면 좋아요 취소 버튼을 보여주고
그에 따라 동작 하게 하면 된다.
이제 좋아요를 구현해보자
먼저 매퍼 부터 구현하자.
<insert id="likeUp">
insert into vegan_like (like_no ,board_no , user_no, freeboard_like)
values((select * from (select max(like_no)+1 from vegan_like) next), #{board_no},#{user_no},1)
</insert>
이렇게 인서트로 좋아요 버튼을 누르면 1을 눌러 좋아요를 카운트 업을 시켜준다.
반대로 취소는
<delete id="likeDown">
delete from vegan_like where board_no = #{board_no} and user_no = #{user_no}
</delete>
딜리트 이다.
컨트롤러를 보자
@ResponseBody
@PostMapping("/likeUp")
public void likeup(@RequestBody LikeVO vo) {
System.out.println("컨트롤러 연결 성공");
System.out.println(vo.getBoard_no());
System.out.println(vo.getUser_no());
service.likeUp(vo.getBoard_no(), vo.getUser_no());
}
@ResponseBody
@PostMapping("/likeDown")
public void likeDown(@RequestBody LikeVO vo) {
System.out.println("좋아요 싫어요!");
service.likeDown(vo.getBoard_no(), vo.getUser_no());
}
좋아요 싫어요 모두 같은 코드가서 딱히 설명한 것이 없다.
이렇게 코드를 짜면 대략 좋아요 기능이 완성 되었을 것이다.
좋아요 버튼을 누르면
이렇게 좋아요 카운트가 올라가고 좋아요 취소버튼으로 바뀐다.
그 후 좋아요 취소 버튼을 누르면
다시 기존대로 변경된다.
댓글 및 조아요 제목에 보이기
이제 메인에 좋아요를 뿌려보자
우선 매퍼를 수정해주자
기존 리스트 매퍼에서
스칼라 서브쿼리를 이용하여 좋아요 및 댓글 수를 카운트 해보자
<select id="getFreeBoard" resultType="com.vegan.recipe.freeBoard.freeboardVO">
select *,
(select count(*) from vegan_comment where bno = v.freeboard_no) as com_cnt,
(select count(*) from vegan_like where board_no = v.freeboard_no) as like_cnt
from Vegan_freeBoard v
<include refid="search" />
order by freeboard_no desc
limit #{pagecnt} , #{countPerPage}
</select>
서브 쿼리로 댓글 개수는 com_cnt
좋아요 개수는 like_cnt로 선언 했다.
그리고 boardVO객체에 위에 cnt들을 추가 해주자
private int freeboard_no;
private String freeboard_title;
private String freeboard_writer;
private String freeboard_content;
private int freeboard_hit;
private int freeboard_like;
private String uploadpath;
private String fileloca;
private String filename;
private String ilerealname; // 파일리얼네임
private Timestamp freeboard_regDate;
private int com_cnt;
private int like_cnt;
<select id="adminUserList2"
resultMap="UserInfo">
select u.*,
(select count(*) from job_board where board_writer = u.user_id) as board_cnt,
(select count(*) from job_comment where com_writer = u.user_id) as comment_cnt
from user_info u
order by u.user_no desc
</select>
유저의 모든것을 조회하면서
게시물수와 댓글 갯수를 as __cnt 라는것으로
끌고 온다.
이렇게 끌고오면 게시글과 댓글수가 끌고와지는데
꼭 VO에 추가해주어야한다.
그래야 자료를 활용할 수있다.
public class UserVO {
private int userNo;
private String userId;
private String userName;
private String userPw;
private String userPh;
private int userAdr1;
private String userAdr2;
private String userAdr3;
private String userAdr4;
private int userStatus;
private String userEmail;
private String userCompany;
private int adminType;
private int userPass;
private Timestamp userDate;
private int boardCnt;
private int commentCnt;
<beans:bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 최대 업로드 가능한 바이트 크기(바이트 단위), -1은 제한이 없음을 의미 -->
<beans:property name="maxUploadSize" value="10485760" />
<!-- 업로드 요청을 변환할 때 사용할 문자 인코딩 방식 -->
<beans:property name="defaultEncoding" value="utf-8" />
</beans:bean>
//사용자가 선택한 페이지 정보를 담을 변수.
private int pageNum;
private int countPerPage;
private int pagecnt;
public int getPageStart() {
return (pageNum-1)*countPerPage;
}
//검색에 필요한 데이터를 변수로 선언.
private String keyword;
private String condition;
public PageVO() {
this.pageNum = 1;
this.countPerPage = 10;
}
이제 위에 것으로 매퍼를 바꿔줄 것이다.
<select id="getFreeBoard" resultType="com.vegan.recipe.freeBoard.freeboardVO">
select * from Vegan_freeBoard
<include refid="search" />
order by freeboard_no desc
limit #{pagecnt} , #{countPerPage}
@Getter
@Setter
@ToString
public class PageVO {
//사용자가 선택한 페이지 정보를 담을 변수.
private int pageNum;
private int countPerPage;
//검색에 필요한 데이터를 변수로 선언.
private String keyword;
private String condition;
public PageVO() {
this.pageNum = 1;
this.countPerPage = 10;
}
}
앞서 설명한거와 같이 사용자가 선택한 페이지 정보를 담고
검색은 키워드와 컨디션으로 통일한다.
그리고 생성자를 하나 꺼내 맨 처음 페이지 1과 페이지에 보여줄 게시글 수 10개를 선택해준다.
<sql id="search">
<if test="condition == 'freeboard_title'">
WHERE freeboard_title LIKE CONCAT('%',#{keyword},'%')
</if>
<if test="condition == 'freeboard_content'">
WHERE freeboard_content LIKE CONCAT('%',#{keyword},'%')
</if>
<if test="condition == 'freeboard_writer'">
WHERE freeboard_writer LIKE CONCAT('%',#{keyword},'%')
</if>
</sql>
<!-- 토탈 -->
<select id="getTotal" resultType="int">
SELECT COUNT(*)
FROM Vegan_freeBoard
<include refid="search" />
</select>
<select id="getFreeBoard" resultType="com.vegan.recipe.freeBoard.freeboardVO">
select * from Vegan_freeBoard
<include refid="search" />
order by freeboard_no desc
limit #{pageNum} , #{countPerPage}
</select>
토탈을 구해주고 리밋으로 페이지넘과 페이지 수를 전달해준다.
컨트롤러 부분
@GetMapping("/freeList")
public String getFree(Model model, PageVO vo) {
PageCreate pc = new PageCreate();
pc.setPaging(vo);
pc.setArticleTotalCount(service.getTotal(vo));
System.out.println(pc);
model.addAttribute("freeList", service.getFreeBoard(vo));
model.addAttribute("pc", pc);
return "FreeBoard/freeList";
}
package com.community.shy.board.controller;
import java.sql.Timestamp;
import java.util.HashMap;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.community.shy.board.JobBoard.service.IBoardService;
import com.community.shy.board.JobComment.service.ICommentService;
import com.community.shy.board.command.BoardVO;
import com.community.shy.board.command.CommentVO;
import com.community.shy.user.UserVO;
import com.community.shy.user.service.IUserService;
@Controller
@RequestMapping("/admin")
public class AdminController {
@Autowired
private IBoardService service;
@Autowired
private IUserService UserService;
@Autowired ICommentService comService;
@GetMapping("/admin_main")
public void main(Model model) {
System.out.println("메인 페이지로 이동");
model.addAttribute("boardList", service.getAdminList());
model.addAttribute("userInfo",UserService.adminUserList());
}
@GetMapping("/admin_boardList")
public void mainList(Model model) {
System.out.println("어드민메인 게시판 리스트");
model.addAttribute("allBoard", service.getAllboard());
}
// 어드민 회원 관리
@GetMapping("/admin_userList")
public void user_list(Model model) {
//회원 기본정보 페이징(x)
System.out.println("/admin_userList 요청");
List<UserVO> list = UserService.adminUserList2();
model.addAttribute("userInfo",list);
};
@ResponseBody
@PostMapping("/getuserInfo")
public UserVO getuserInfo(String id) {
System.out.println("유저 인포 아작스");
UserVO user = UserService.getInfo(id);
return user;
}
@ResponseBody
@PostMapping("/getUserBoardList")
public List<BoardVO> getUserBoardList(String board_writer) {
System.out.println("open! user boardList ajax!");
System.out.println("조회할 회원 아이디 : " + board_writer);
List<BoardVO> list = service.getUserBoardList(board_writer);
return list;
}
@ResponseBody
@PostMapping("/getCommentList")
public List<CommentVO> getCommentList(String com_writer){
System.out.println("open! user Comment List ajax!");
System.out.println("조회할 회원 아이디 : " + com_writer);
List<CommentVO> list = comService.getComList(com_writer);
System.out.println(list);
return list;
}
@ResponseBody
@PostMapping("/successId")
public void successId(String id) {
System.out.println(id);
System.out.println("open! user sign success Id ajax!");
UserService.successId(id);
}
@ResponseBody
@PostMapping("/failId")
public void failId(String id) {
System.out.println(id);
System.out.println("open! user sign failId Id ajax!");
UserService.failed(id);
}
@ResponseBody
@PostMapping("/deleteBoard")
public void deleteBoard(int board_no) {
System.out.println("삭제할 게시물 : " + board_no);
service.JBoardDelete(board_no);
}
@GetMapping("/admin_dataTotal")
public void admin_dataTotal(Model model) {
model.addAttribute("allTotal", service.getAllTotal());
}
@ResponseBody
@PostMapping("/findDate")
public List<HashMap<String, Object>> admin_findDate(String date1 , String date2) {
System.out.println(date1);
System.out.println(date2);
List<HashMap<String, Object>> list = service.admin_findDate(date1, date2);
System.out.println(service.admin_findDate(date1, date2));
return list;
}
@ResponseBody
@PostMapping("/dropId")
public void dropID(String id) {
UserService.dropUser(id);
}
}
우선 main으로 이동시켜 주어 model 객체로
유저리스트와 게시판을 실시간으로 업데이트 해준다.
그 뒤 어드민 페이지로 이동해 모든 회원 정보를 불러온다.
<select id="adminUserList2"
resultMap="UserInfo">
select u.*,
(select count(*) from job_board where board_writer = u.user_id) as board_cnt,
(select count(*) from job_comment where com_writer = u.user_id) as comment_cnt
from user_info u
order by u.user_no desc
</select>
매퍼에서 이렇게 가져올 경우
VO도 수정해 주어야 한다 서브쿼리로 board_cnt와 comment_cnt가 추가 되어
불러오려면
private int userNo;
private String userId;
private String userName;
private String userPw;
private String userPh;
private int userAdr1;
private String userAdr2;
private String userAdr3;
private String userAdr4;
private int userStatus;
private String userEmail;
private String userCompany;
private int adminType;
private int userPass;
private Timestamp userDate;
private int boardCnt;
private int commentCnt
