[JSP] servlet 활용 _ 사용자목록만들기

JSP

[JSP] servlet 활용 _ 사용자목록만들기

(งᐛ)ว 2023. 11. 3. 01:09

728x90

필요한 파일을 먼저 세팅하자

사용자정보를 데이터베이스에 테이블 추가했다고 가정함 (테이블명 : MYUSER) 추가방법은 이전글 JDBC_1 참고

DBService.java파일은 그대로 사용가능 (캡쳐생략)

VO / DAO (앞으로는 DAO파일 호출이 서블렛에서 이루어짐)

UserListAction.java

URL mappings 수정명 : /user_list.do

package action;

import java.io.IOException;

/**
 * Servlet implementation class UserListAction
 */
@WebServlet("/user_list.do")
public class UserListAction extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//dao에서 회원목록 얻어오기 
		List<UserVO> list = UserDAO.getInstance().selectList();
	
		//바인딩
		request.setAttribute("list", list);
        
		//포워딩
		RequestDispatcher disp = request.getRequestDispatcher("user_list.jsp");
		disp.forward(request, response);
		
	}

}

user_list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!-- 코어라이브러리 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script src = "js/httpRequest.js"></script>
		<script type="text/javascript">
			function del(idx){
				if(confirm("삭제하시겠습니까?") == false){
					return; //아니오 클릭시 빠져나감 
				}
				
				//삭제를 원하는 사용자의 idx를 ajax를 이용해 서버로 전송 
				var url = "user_del.do";
				var param = "idx="+idx;
				
				sendRequest(url,param,resultFn,"POST");
			}
			
			function resultFn(){
				if(xhr.readyState == 4 && xhr.status == 200){
					//도착한 데이터 읽어오기
					var data = xhr.responseText;
					var json = eval(data);
					
					if(json[0].param == "yes"){
						alert("삭제완료");
					}else{
						alert("삭제실패");
					}
					
					location.href="user_list.do";
				}
			}
			
		</script>
	</head>
	<body>
		<table border = "1">
			<tr>
				<td colspan="5" align="center">
					<input type= "button" value="회원가입" onclick="location.href='user_insert_form.jsp'">
				</td>
			</tr>
			<tr>
				<th>회원번호</th>
				<th>이름</th>
				<th>아이디</th>
				<th>비밀번호</th>
				<th>비고</th>
			</tr>
			<c:forEach var="vo" items="${list}">
				<tr>
					<td>${vo.idx}</td>
					<td>${vo.name}</td>
					<td>${vo.id}</td>
					<td>${vo.pwd}</td>
					<td>
						<input type = "button" value="삭제" onclick="del('${vo.idx}')">
					</td>
				</tr>
			</c:forEach>	
		</table>
	</body>
</html>

user_insert_form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script src = "js/httpRequest.js"></script> <!-- 아이디중복체크에 필요 -->
		<script type="text/javascript">
        
			var b_idCheck = false;
			
			function send(f){
				var id = f.id.value.trim();
				var pwd = f.pwd.value.trim();
				var name = f.name.value.trim();
				
				if(id==""){
					alert("아이디를 입력하세요");
					return;
				}
				
				if(pwd==""){
					alert("비밀번호를 입력하세요");
					return;
				}
				
				if(name==""){
					alert("이름을 입력하세요");
					return;
				}
				
				if(!b_idCheck){
					alert("아이디 중복체크 필요");
					return;
				}
				
				f.method="POST";
				f.action="insert.do";
				f.submit();
				
			}
			
			//아이디중복체크를 위한 메서드
			function check_id(){
				
				//아이디중복체크
				var id = document.getElementById("id").value.trim();
				
				if(id==""){
					alert("아이디를 입력하세요");
					return;
				}
				
				//완전히 새로고침하게 되면 텍스트필드에 적힌 내용이 다 날아가고 무한대로 중복체크만 하게됨 
				
				//id를 ajax를 통해 서버로 전송 
				var url = "check_id.do"//UserCheckIdAction
				var param = "id="+id
				
				sendRequest(url,param,resultFn,"POST");
			}
			
			//콜백함수 
			function resultFn(){
				if(xhr.readyState  == 4 && xhr.status == 200){
					var data = xhr.responseText;
					var json = eval(data);
					
					
					if(json[0].res=="no"){
						alert("이미 사용중인 아이디입니다.");
						return;
					}else{
						alert("사용가능한 아이디입니다.");
						b_idCheck = true;
					}
				}
			}
			
			function che(){
				b_idCheck = false;
			}
			
		</script>
	</head>
	<body>
		<form>
			<table border = "1">
				<caption>:::회원가입:::</caption>
				<tr>
					<th>아이디</th>
					<td>
						<!-- onchange :  input태그의 값이 변경된 후 포커스를 벗어났을 때 발생하는 이벤트-->
						<input name="id" id="id" onchange="che()">
						<input type="button" value="중복체크" onclick="check_id()">	
					</td>
				</tr>
				<tr>
					<th>이름</th>
					<td>
					<input name= "name">
					</td>
				</tr>
				<tr>
					<th>비밀번호</th>
					<td>
					<input name= "pwd" type="password">
					</td>
				</tr>		
				<tr>
					<td colspan = "2" align="center">
					<input type="button" value="가입" onclick="send(this.form)">
					<input type="button" value="취소" onclick="location.href='user_list.do'">
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

UserInsertAction.java

URL mappings 수정명 : /insert.do

package action;

import java.io.IOException;

/**
 * Servlet implementation class UserInsertAction
 */
@WebServlet("/insert.do")
public class UserInsertAction extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("UTF-8");
		
		String id=request.getParameter("id");
		String pwd=request.getParameter("pwd");
		String name=request.getParameter("name");
		
		UserVO vo = new UserVO();
		vo.setId(id);
		vo.setPwd(pwd);
		vo.setName(name);
		
		int res = UserDAO.getInstance().insert(vo);
		
		if(res>=1) {
			response.sendRedirect("user_list.do");
		}		
	}
}

UserCheckIdAction.java

URL mappings 수정명 : /check_id.do

package action;

import java.io.IOException;

/**
 * Servlet implementation class UserCheckIdAction
 */
@WebServlet("/check_id.do")
public class UserCheckIdAction extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//check_id.do?id=aaaa
		String id = request.getParameter("id");
		UserVO vo = UserDAO.getInstance().selectOne(id);
		
		String res = "no";
		if(vo == null) { //중복조회해서 회원가입이 가능한 경우 
			res = "yes";
		}
		
		String result = String.format("[{'res':'%s'}]",res);
		//result를 가지고 콜백메서드로 복귀 
		response.getWriter().print(result);			
		
	}

}

DAO

UserDelAction.java

URL mappings 수정명 : /user_del.do

package action;

import java.io.IOException;

/**
 * Servlet implementation class UserDelAction
 */
@WebServlet("/user_del.do")
public class UserDelAction extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		int idx = Integer.parseInt(request.getParameter("idx"));
		
		//DB에 접근해서 idx에 해당하는 행 삭제하기 
		int res = UserDAO.getInstance().delete(idx);
		
		System.out.println("res : "+res);
		
		String param = "no";
		if(res>0) {
			param = "yes";
		}
		
		String result = String.format("[{'param':'%s'}]",param);
		
		response.getWriter().println(result); 
        	//getWriter.println : request를 한곳으로 데이터를 전달함
		
		
	}

}

DAO

확인은 UserListAction서블릿파일에서 실행

결과

728x90

'JSP' 카테고리의 다른 글

[JSP] servlet 활용 _ 로그인, 로그아웃 기능만들기 (0)	2023.11.04
[JSP] 쿠키와 세션 (0)	2023.11.04
[JSP] servlet 활용 _ 갤러리만들기 (0)	2023.11.02
[JSP] servlet 활용 _ 파일업로드 (0)	2023.11.02
[JSP] JSON (0)	2023.11.01

현재글[JSP] servlet 활용 _ 사용자목록만들기

⋆⁺₊⋆ ☾ ⋆⁺₊⋆

[JSP] servlet 활용 _ 사용자목록만들기

'JSP' 카테고리의 다른 글

'JSP'의 다른글

티스토리툴바

[JSP] servlet 활용 _ 사용자목록만들기

'JSP' 카테고리의 다른 글

'JSP'의 다른글

관련글

티스토리툴바