20211223 관리자 페이지 완성

·관리자 페이지

-관리자 페이지의 역할은 게시판이나 회원정보, 특히 계정을 정지하거나 삭제시키는 역할을 할 수 있어야 한다. 그래서 관리자쪽 list.jsp에서 유저 리스트를 불러오면 해당 아이디를 눌렀을 때 아이디를 변경할 수 있는 페이지가 뜨게 했다. 단, 좀 더 기능적으로나 디자인적으로 좋아보일 수 있도록 모달과 비슷한 컬러박스를 이용했다.

<th scope="row" class="table-thead-sub" style="border: 1px solid #c4c2c2;"><a href="/user/update?userId=${user.userId}" name="userUpdate">${user.userId}</a></th>

-아이디를 누르면 이동하는 페이지에 대한 정보다. 어차피 모달창으로 띄워줄 것이지만, 어떤 페이지를 띄워줄지 알 수 없으니 컨트롤러부터 작성해준다. get방식으로 /user/update를 호출하고 있으니 해당 url로 RequestMapping어노테이션을 걸어주면 된다.

//회원 조회/수정
	@RequestMapping(value="/user/update")
	public String update(Model model, HttpServletRequest request, HttpServletResponse response) 
	{
		String userId = HttpUtil.get(request, "userId");
		
		if(!StringUtil.isEmpty(userId)) 
		{
			//유저 정보 조회
			User user = userService.userSelect(userId);
			
			if(user != null) 
			{
				model.addAttribute("user", user);
			}
		}
		
		return "/user/update";
	}

-이때, 해당 유저 아이디로 등록되어 있는 db의 정보가 있는지 없는지도 확인해야 한다. url을 바로 치고 들어올 수 있기 때문이다. 이제 list.jsp에 다시 colorbox에 대한 정의를 해준다

	$(document).ready(function(){
		   $("a[name='userUpdate']").colorbox({
			      iframe:true, 
			      innerWidth:1235,
			      innerHeight:400,
			      scrolling:false,
			      onComplete:function()
			      {
			         $("#colorbox").css("width", "1235px");
			         $("#colorbox").css("height", "400px");
			         $("#colorbox").css("border-radius", "10px");
			      }      
			   });
	});

이렇게 하면 아이디를 눌렀을 때 컬러박스로 해당 창이 뜨게 된다. 모달과 비슷하다고 보면 된다.
이제 업데이트에 대한 부분을 작성하기 전에, 관리자가 직접 회원 정보를 변경하거나 해도, 회원가입 양식은 지켜져야 한다. 그래서 정규식에 맞춰 기입했는지 등에 대한 체크를 해준다.

$(document).ready(function(){
		$("#userName").focus();

	});

	//이메일 체크
	function fn_validateEmail(value)
	{
	   var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
	   
	   return emailReg.test(value);
	}
	//비밀번호 체크
	function fn_idPwdCheck(val)
	{
	   var regex = /^[a-zA-Z0-9]{4,12}$/;

	   return regex.test(val);
	}
	
	function fn_userUpdate()
	{
		if(icia.common.isEmpty($("#userPwd").val()))
		{
			alert("비밀번호를 입력하세요.");
			$("#userPwd").focus();
			return;
		}
		
		if(!fn_idPwdCheck($("#userPwd").val()))
		{
			alert("비밀번호는 영문 대소문자, 숫자 4~12자리 입니다.");
			$("#userPwd").focus();
			return;
		}
		
		if(icia.common.isEmpty($("#userName").val()))
		{
			alert("이름을 입력하세요");
			$("#userName").focus();
			return;
		}
		
		if(icia.common.isEmpty($("#userEmail").val()))
		{
			alert("이메일을 입력하세요.");
			$("#userEmail").focus();
			return;
		}
		
		if(!fn_validateEmail($("#userEmail").val()))
		{
			alert("이메일 형식이 맞지 않습니다.");
			$("#userEmail").focus();
			return;
		}
	...(생략)
	}

-기존의 아이디 체크 등에 대한 부분은 많이 해봤기 때문에 딱히 주의할 점은 없다.
-이제 ajax통신을 통해 회원정보 수정이 이뤄지는지 여부를 확인하도록 한다. 단, 전과 다르게 이번엔 직접 폼을 만들어서 ajax통신을 해주었다.

if(!confirm("회원정보를 수정하시겠습니까?"))
		{
			//no를 누름
			return;
		}
		
		//폼 자체를 만들 것임
		var formData = 
		{
				userId:$("#userId").val(),
				userPwd:$("#userPwd").val(),
				userName:$("#userName").val(),
				userEmail:$("#userEmail").val(),
				status:$("#status").val()
		};
		
		icia.ajax.post({
			url:"/user/updateProc",
			data:formData,
			success:function(res)
			{
				icia.common.log(res);
				
				if(res.code == 0)
				{
					alert("회원정보가 수정되었습니다.");
					fn_colorbox_close(parent.fn_pageInit);
				}
				else if(res.code == -1)
				{
					//update중에 뭔가 오류
					alert("회원정보 수정 중 오류가 발생했습니다.");
				}
				else if(res.code == 400)
				{
					//파라미터 오류
					alert("파라미터 값이 잘못되었습니다.");
				}
				else if(res.code == 404)
				{
					//유저 정보를 찾지 못함
					alert("회원정보가 존재하지 않습니다.");
					//애초에 없는 유저정보라면, 컬러박스로 뜬 정보도 애초에 잘못됨.
					fn_colorbox_close(parent.fn_pageInit);
				}
			},
			complete:function(data)
			{
				icia.common.log(data);
			},
			error:function(xhr, status, error)
			{
				icia.common.error(error);
			}
		});

-사용된 공통모듈이 조금 달라서 전과 조금 다르긴 하지만 크게 어려울 것은 없다. data:formData 부분의 formData를 직접 위쪽에서 키:값의 형태로 만들었다는 것이 조금 다른 점이라면 다른 점이다.

		{
				userId:$("#userId").val(),
				userPwd:$("#userPwd").val(),
				userName:$("#userName").val(),
				userEmail:$("#userEmail").val(),
				status:$("#status").val()
		};

-이제 먼저 쿼리문부터 진행해보았다. 사실 내게 제일 좋은 순서는 컨트롤러까지 만들고 xml로 가는 것이긴 한데, 순서가 뭐가 제일 먼저 해야된다는 없는 것 같다.

<update id="userUpdate" parameterType="com.icia.manager.model.User">
UPDATE 
	TBL_USER
SET
    USER_PWD = #{userPwd},
    USER_NAME = #{userName},
    USER_EMAIL = #{userEmail},
    STATUS = #{status}
WHERE
        USER_ID = #{userId}
</update>

-쿼리문은 굉장히 쉽다. 아이디는 당연히 바꿀 수 없으니까, 해당 아이디가 조건으로 들어가고 나머지 값들을 넣어주면 된다.
-이제 서비스에서 호출할 추상 메소드를 정의해준다.

public int userUpdate(User user);

-이제 서비스에서 해당 다오를 호출한다.

//사용자 정보 변경:관리자가
	public int userUpdate(User user) 
	{
		int count = 0;
		
		try 
		{
			count = userDao.userUpdate(user);
		}
		catch(Exception e) 
		{
			logger.error("[UserService] userUpdate Exception", e);
		}
		
		return count;
	}

-이제 컨트롤러에서 여러가지 체크를 해주면서 값을 넣어주면 된다.

	//회원정보 수정
	@RequestMapping(value="/user/updateProc", method=RequestMethod.POST)
	@ResponseBody
	public Response<Object> updateProc(HttpServletRequest request, HttpServletResponse response)
	{
		Response<Object> res = new Response<Object>();
	
		String userId = HttpUtil.get(request, "userId");
		String userPwd = HttpUtil.get(request, "userPwd");
		String userName = HttpUtil.get(request, "userName");
		String userEmail = HttpUtil.get(request, "userEmail");
		String status = HttpUtil.get(request, "status");
		
		if(!StringUtil.isEmpty(userId) && !StringUtil.isEmpty(userPwd) && !StringUtil.isEmpty(userName) && !StringUtil.isEmpty(userEmail) && !StringUtil.isEmpty(status)) 
		{
			//값이 있음
			//500번 오류 피하기 위해서
			User user =  userService.userSelect(userId);
			
			if(user != null) 
			{
				user.setUserPwd(userPwd);
				user.setUserName(userName);
				user.setUserEmail(userEmail);
				user.setStatus(status);
				
				//이제 업데이트 해줌
				if(userService.userUpdate(user) > 0) 
				{
					res.setResponse(0, "Success");
				}
				else 
				{
					res.setResponse(-1, "Internal Server Error");
				}
			}
			else 
			{
				res.setResponse(404, "Not Found");
			}
		}
		else 
		{
			res.setResponse(400, "Bad Request");
		}
		
		return res;
	}

-사실 이 부분까지 전부 교수님과 함께 진행을 했어야 맞다. 그런데 오늘 수업중에 오류가 난 학생이 있어서 수업이 거의 몇십분씩 지연되었다. 그래서 모달창이 뜬 것을 보고, 이건 분명 회원정보 수정이 되는 쿼리와 컨트롤러를 만드는 것이다 싶어서 컨트롤러까지 다 혼자서 만들어봤다. 그리고 결과는, 교수님과 메소드 명까지 완전히 똑같고, 구현에 있어서도 교수님이 빼먹으신 부분까지 전부 생각해서 구현하였고 정상작동했다. 그래서 정말 뿌듯함이 이루말할 수 없을 정도였다.

·금요일까지 db완성, 주말동안 index.jsp완성

-우리에겐 db완성과 index.jsp를 완성하라는 엄청난 과제가 주어졌다. 그것도 다음주 월요일까지... 물론 무슨 템플릿을 쓸 것이고, 어느정도는 고쳐서 만들어보기까지 했지만, 이걸 확실하게 픽스 시키는 것은 또 다른 문제이기 때문에 굉장히 부담스럽기는 했다. 오늘 db를 거의 확정했고, 굉장히 생각하기 난해한 부분도 최대한 쉬운 방향으로 가져가기로 합의를 보았다. 그래서 일단은 어느정도 완성이 되었지만, 그래도 시간이 촉박한 것은 사실이다. 잠을 줄여야 하는 것이 맞는 것 같다...오늘은 여기서 작성을 그만두고 빨리 뭔가를 더 해야겠다.