잡잡커뮤니티 관리자(Admin)페이지 만들기 회원관리(1)

2022. 4. 5. 22:21

다중게시판 및 댓글 및 CK에디터까지 블로그에 글을 썻다

이제 남은것은 거의 .. 관리자페이지인거 같다.

위와 같은 관리자 페이지 이며 오늘은 회원 관리 만드는 법에 대해서 알아보고자 한다.

회원관리는 위와 같은 페이지로 이루어 져있으며

데이터 테이블을 통해 검색 및 페이지네이션까지 구현하였다.

기능을 살펴보자면

이름을 클릭하면 해당하는 회원 정보를 볼 수있다.

게시글 수 및 댓글 수를 클릭하면 해당 아이디가 쓴 게시글 및 댓글을 볼 수 있다.

다 모달을 통해 볼 수 있다. 그렇다 모달은 참 귀찮다. ;;

1. 회원 정보

회원 정보를 볼 수 있음

2. 작성 게시물

3. 쓴 댓글

4. 회원 관리

가입 승인 , 가입 대기, 가입거절 , 회원 추방

이렇게 4개를 가지고 회원 을 가입한다.

회원이 처음 가입하면 대기 상태이며

관리자가 확인 후에 가입 승인을 해준다.

같은 화면에서 드롭시킬 수도있다.

자 이제 만들어 보자

관리자 같은경우는 따로 테이블을 제작 할 필요는 없다.

유저를 만들때 관리자는 1 일반유저는 0 이렇게 구분해 두었기 떄문에

일반 유저는 어드민페이지에 접근할 수없도록 세션값으로 조정해준다.

각 기능 별로 담기는 너무 길이가 길어지니 컨트롤러 리뷰 뷰 리뷰 이런식으로 해야겠다..

1. 컨트롤러

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

userVO에 서브쿼리에 선언문을 추가해준다.

그 뒤 서비스와 매퍼를 거쳐

리스트 타입으로 받아 주어 모델로 해당 뷰에 뿌려준다.

      <div class="member_list" >
        <table class="admin_board_wrap" id="user-admin">
          <thead class="admin_boardList">
            <th class="admin_board_head">이름</th>
            <th class="admin_board_head">아이디</th>
            <th class="admin_board_head">현재상태</th>
            <th class="admin_board_head">가입일</th>
            <th class="admin_board_head">게시글수</th>
            <th class="admin_board_head">댓글수</th>
            <th class="admin_board_head">가입승인</th>
          </thead>
          <tbody>
          <c:forEach var="vo" items="${userInfo}">
            <tr class="admin_board_content">
              <td class="admin_board_content_nm"><a class="mypageModal user_id" value="${vo.userId}">${vo.userId}</a> </td>
              <td class="admin_board_content_nm">${vo.userName}</td>
              <td class="admin_board_content_nm">
              			<c:choose>
              				<c:when test="${vo.userStatus== 0}">취업준비생</c:when>
              				<c:when test="${vo.userStatus== 1}">직장인</c:when>
              			</c:choose>	
              </td>
              <td class="admin_board_content_nm">${vo.userDate}</td>
              <td class="admin_board_content_nm"><a href="#" class="modal_boardList_admin" data-user-id ="${vo.userId}">${vo.boardCnt}</a></td>
              <td class="admin_board_content_nm"><a href="#" class="modal_reply_admin" data-user-id ="${vo.userId}">${vo.commentCnt}</a></td>
			  <c:choose>
			  	<c:when test="${vo.userPass == 0}">
			  	<td class="admin_board_content_nm">
	                <button data-user-id ="${vo.userId}" type="button" value="승인" class="appro">승인 </button>
	                <button data-user-id ="${vo.userId}" type="button" value="거부" class="deni">거부</button>
                </td>
			  	</c:when>
			  	<c:when test="${vo.userPass == 1}">
			  	<td class="admin_board_content_nm">
	                <button data-user-id ="${vo.userId}" type="button" value="승인" class="userDrop">회원 추방</button>
                </td>
			  	</c:when>
			  	<c:when test="${vo.userPass == 3}">
			  	 	<td>추방회원</td>
			  	</c:when>
			  	<c:when test="${vo.userPass == 2 }">
			  		<td>승인거절회원</td>
			  	</c:when>
			  </c:choose>
            </tr>
            </c:forEach>
          </tbody>
        </table>

우선 userInfo로 모델로 뿌려 주어 jstl로 반복문을 돌려주면

아래와 같이 쫙쫙 뿌려준다. 여기서 데이터테이블로 테이블을 구성하여

페이징 을 구현 하였다.

가입 승인 이쪽은

처음 가입할경우 0

가입승인 : 1

가입거절 : 2

회원추방 : 3

이렇게 코드가 작성되어있기 떄문에 C:IF로 처리 되어있다.

이제 이름을 선택하여 AJAX로 모달에 데이터를 뿌려주자.

$('.mypageModal').click(function () {
          $('.mypage_modal').fadeIn(500);
          var Id = $(this).attr('value');
          console.log(Id);
          // 아이디 값 불러옴 
          
          $.ajax({
        	type : 'post',
        	url: '<c:url value="/admin/getuserInfo" />',
        	data : {
        		id : Id,
        	},
        	dataType:"json",
        	success : function(data){
        		console.log(data.userName);
        		console.log(data.userId);
        		$("input[name='name']").val(data.userName);
        		$("input[name='id']").val(data.userId);
        		$("input[name='phone']").val(data.userPh);
        		$("input[name='addr1']").val(data.userAdr3);
        		$("input[name='addr2']").val(data.userAdr2);
        		$("input[name='addr3']").val(data.userAdr4);
        		$("input[name='addr_num']").val(data.userAdr1);
        		$(".memInfo").html(data.userName+"님의 회원 정보");
        	},error : function(status, error) {
				console.log('에러발생!!');

				console.log(status, error);
			}
        	
        	
          })//ajax 종료

우선

var Id = $(this).attr('value');로 해당 아이디를 찍으면

Value값을 불러오게 하자 그 뒤 ajax를 실행 시킨다.

컨트롤러 getuserInfo를 작성해보자.

	@ResponseBody
	@PostMapping("/getuserInfo")
	public UserVO getuserInfo(String id) {
		System.out.println("유저 인포 아작스");
		UserVO user = UserService.getInfo(id);
		return user;
	}

user 타입으로 받아야 하기 떄문에 userVO 타입으로 선언해주고

아까 찍은 파라미터를 넘겨준다.

이제 매퍼를 보자

<select id="getInfo" resultMap="UserInfo">SELECT *FROM user_info WHERE user_id = #{id} </select>

로 불러왔으면 컨트롤러에서 이제 user이름으로 리턴을 해준다.

ajax라 따로 모델로 넘겨주거나 하지않는다.

다시 ajax를 보면

success : function(data){
        		console.log(data.userName);
        		console.log(data.userId);
        		$("input[name='name']").val(data.userName);
        		$("input[name='id']").val(data.userId);
        		$("input[name='phone']").val(data.userPh);
        		$("input[name='addr1']").val(data.userAdr3);
        		$("input[name='addr2']").val(data.userAdr2);
        		$("input[name='addr3']").val(data.userAdr4);
        		$("input[name='addr_num']").val(data.userAdr1);
        		$(".memInfo").html(data.userName+"님의 회원 정보");

data로 user의 정보를 받기 떄문에

모달 input에 넣어 주면된다.

이렇게 하면 우선 ajax로 마이페이지 끗 :)

다음은 게시판을 해보자 게시판이나 댓글이나 똑같으니

게시판만 하는법을 정리해보자

게시판을 불러오는 ajax이다.

$('.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 종료
		}

우선 var board_id = $(this).data("userId");

제이쿼리로 아이디 값을 지목을 해주고

이대로 바로 ajax를 실행할 경우

아이디를 누를 경우 계속 중첩해서 나오기 떄문에 닫기버튼을 누르거나 아이디를 클릭

할때 한번 초기화 해주는 것이 중요하다.

이것을 getList(true, board_id);로 부르자

우선 reset이 true라면 str을 초기화 해주자

그럼 중첩되지 않고 기존 데이터를 날리고 새롭게 추가 될 것이다.

그 후 ajax를 해주면 된다.

좀 노가다 긴한데 댓글이랑 비슷하다.

리스트 타입으로 전달받은 data를data가 끝날때 까지 반복한다.

그럼 이제

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

조회할 아이디를 ajax로 보내주고

매퍼를 보자

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

매퍼를 보면 참 간단하다. 이 아이디로 조회된 것들을 모두 다 가져온다.

그럼 실행 되면서 해당 아이디로 조회된 모든 값을 전달 해주고

모달에 제이쿼리 함수인 html()로 추가해주면 된다.

실행 순서는 다음과 같다.

1) 아이디를 누른다.

이때 getList에 reset이 초기화 되면서 빈 문자열로 만들어준다.

2) 아이디값을 ajax로 받아온다.

3) ajax로 받아온 값을 컨트롤러로 전달한다.

4) 서비스와 매퍼를 거쳐 매퍼에서 조회된 값을 다시 컨트롤러로 전달한다.

5) 컨트롤러에서 다시 ajax로 리턴한다.

6) 리턴된 값은 success에 값인 data로 받는다.

7) data에는 해당 아이디의 조회된 값을 가지고 있으니 반복문을 돌려 다 털어준다.

8) html()로 추가해 주면 끝난다.

이렇게 하면 종료된다.

너무 길어서 2부로 제작해야 겟다. .

https://github.com/MoonSeokHyun/JobJob_community

'Spring > 잡잡커뮤니티' 카테고리의 다른 글

스프링 관리자페이지 만들기(3) 회원 관리 (0)	2022.04.23
잡잡커뮤니티 관리자(Admin)페이지 만들기 회원관리(2) (데이터테이블, ajax, 서브쿼리) (0)	2022.04.21
스프링 댓글 구현하기 feat ajax (1)	2022.04.04
스프링 프로젝트 잡잡커뮤니티 만들기 다중게시판 (1)	2022.03.21
스프링 프로젝트 잡잡커뮤니티 만들기(1) (0)	2022.03.21

Dev of road

잡잡커뮤니티 관리자(Admin)페이지 만들기 회원관리(1)

'Spring > 잡잡커뮤니티' 카테고리의 다른 글

+ Recent posts

티스토리툴바