잡잡커뮤니티 관리자(Admin)페이지 만들기 회원관리(2) (데이터테이블, ajax, 서브쿼리)

이전에는 내가 만든 사이트에서 회원관리를 만드는걸 리뷰해보았다.

이번에 2번쨰 시간이다.

핀란드에서 부활절 휴일이 끼니.. 개발을 놓게 되었다. 

반성하며 시작합니다.

 

우선 게시글 수와 댓글수를 불러오려면

서브쿼리를 사용하여 불러온다 코드는 다음과 같다. 

   <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;

 

private int boardCnt;
private int commentCnt;

을 추가해 주었다. 

 

이렇게 완성되었으면 이제 게시글 수를 눌렀을때 

 

해당 아이디가 쓴 게시물을 쫙 보여주면 된다. 

 

그럼 뷰로 가보자 

 

    <!-- 게시글 모달로 가져오기-->
    <div class="modal_list">
      <div class="modal_boradlist">
        <div class="reply_listWrap">

          <div class="modal_wrap">
            <h3 id="ListName"></h3>
            <p class="modallist">작성한 게시글 수 : 총 01개</p>
            <table class="admin_boardM_wrap" id="comment-admin">
              <thead class="admin_boardMList">
                <th class="admin_boardM_title">글 번호</th>
                <th class="admin_boardM_title">글 제목</th>
                <th class="admin_boardM_title boardleng">작성일</th>
                <th class="admin_boardM_title">조회수</th>
                <th class="admin_boardM_title">좋아요</th>
              </thead>
              </tbody>
              <tbody id="getBoardList">
				<!-- 게시글이 들어갈 공간 -->
              </tbody>
            </table>

이렇게 클릭하면 모달이 뜨게 작성했다. 

이것도 데이터 테이블을 사용하여 

페이징 등을 진행 하였다.

 

이제 js를 보자

 

let str = '';
      // 모달 스크립트 
      $(function () {
    	  $("#user-admin").DataTable();
        // 게시판 모달
        $('.modal_boardList_admin').click(function () {
        	var board_id = $(this).data("userId");
        	console.log(board_id);

        	getList(true, board_id);
          $('.modal_list').fadeIn(500);
        }); // open modal end
        
        function getList(reset, board_id) {
        	
        	if(reset) {
        		str = '';
        	}
        	
        	$.ajax({
        		type : 'post',
        		url : '<c:url value ="/admin/getUserBoardList"/>',
                data : {
                	board_writer : board_id,
                	},
        		dataType : "json",
        		success : function(data) {
					for(var i = 1 in data){
						console.log(data[i].board_title);
						str += "<tr class='admin_boardM_content'>"
						str += "<td class='admin_boardM_nm'><a href='#'>"+data[i].board_no+"</a></td>"
						str += "<td class='admin_boardM_nm'><a href='#'>"+data[i].board_title+"</a></td>"
						str += "<td class='admin_boardM_nm'><a href='#'>"+timeStamp(data[i].board_regdate)+"</a></td>"
						str += "<td class='admin_boardM_nm'>"+data[i].board_hit+"</td>"
						str += "<td class='admin_boardM_nm'>"+data[i].board_like+"</td>"
						str += "</tr>"
					}
					$('#ListName').html(board_id + '님의 작성 게시물')
					$('#getBoardList').html(str); 
					$("#comment-admin").DataTable();
				},error : function(status, error) {
					console.log('에러발생!!');
					console.log(status, error);
				}

	          });//ajax 종료
		}

 

우선 json으로 던질 아이디 값을 가져오기 위해

 

 <td class="admin_board_content_nm"><a href="#" class="modal_boardList_admin" data-user-id ="${vo.userId}">${vo.boardCnt}</a></td>

var board_id = $(this).data("userId");로 아이디 값을 가져 온다. 

 

가져 온뒤 본격적으로 ajax를 작성한다.

<select id="getUserBoardList" resultType="com.community.shy.board.command.BoardVO">
         select * from job_board where board_writer = #{board_writer}
      </select>

 

해당 쿼리문을 보자 

 

 

 

json으로 해당 아이디를 컨트롤러로 전하고 

모든 해당 게시물을 조회하면 된다. 

 

url에 있는 getUserBoardList로 가보자 

 

컨트롤러 

	@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;
	}

 

어드민 컨트롤러는 일반 컨트롤러로 해서 rest다입인 responsebody를 붙혀준다. 

 

그냥 조회만 할껀데 왜 포스트를 썻지.. 

다음에 하면 아마 get으로 할꺼같다. 

 

그럼 이제 컨트롤러 -> 서비스 -> 매퍼 -> 컨트롤러 -> 뷰 순으로 돌아가서 

해당 아이디의 모든 데이터를 받아볼수 있을것이다. 

 

 

요론식으로 

 

그다음 뷰에서 json으로 받았으면 

화면에 뿌려주게 반복문을로 받아준다. 

 

str 이라는 빈 변수를 선언하여 

모달에 들어갈 내용들을 적어준다.

그러면 리스트에 담긴 수를 다 쏟아 낼 것이다. 

 

댓글도 똑같기 때문에 별 다르게 할 건 없을거같다.

 

다음에는 회원관리에 대해서 말해보려고 한다.

 

이제 그만쉬고 ㅋㅋ 다시 빡코딩 하자 

5월 15일 전까지 만들고 있는 사이트 다완성하자

 

파이팅 ㅋㅋ 

 

https://github.com/MoonSeokHyun