본문 바로가기
코딩 해보자

220916 jsp와 DB서버를 연동하여 입력된 회원 삭제 하기

by friendlyboy 2022. 9. 16.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" autoFlush="true"%>

    
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>메인페이지</title>
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="/Dwp_QD06_JDBC_T/style/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/Dwp_QD06_JDBC_T/script/script.js"></script>
</head>
<body>
    <div id="wrap" class="indexWrap">
	<h1>메인페이지</h1>
	<hr>
	
	<button onclick="location.href='/Dwp_QD06_JDBC_T/member/memberList.jsp'">[회원 목록 출력]</button>
<button onclick="location.href='/Dwp_QD06_JDBC_T/member/delMember.jsp'">[회원 삭제]</button>
	
    </div>
    <!-- div#wrap  -->
</body>
</html>
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" autoFlush="true"%>
    
     <%
    
    Connection 				objConn 			= 				null;
    Statement                 objStmt            =              null;
    PreparedStatement 	objPstmt 			= 				null;
    ResultSet                  objRS               =              null;

    try {
    	Class.forName("com.mysql.cj.jdbc.Driver");
    	String url = "jdbc:mysql://localhost:3306/QD06_Member_T?";
    	url += "useSSL=false&";
    	url += "useUnicode=true&";
    	url += "characterEncoding=UTF8&";
    	url += "serverTimezone=UTC";
    	String user = "root";
    	String password = "1234";
    	
    	objConn = DriverManager.getConnection(url, user, password);	
    	//out.print("DB 접속 OK!!!");

    	/* select를 사용한 조회 시작 */
    	String sql = "select num,uid,upw,uAge,gender,joinTM from";
    	sql+= " member order by num desc";
    	objStmt = objConn.createStatement();
        objRS = objStmt.executeQuery(sql); 	
        
    	/* select를 사용한 조회 끝 */
    	%>
    	
    	
    	
    	
    	
    	
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="/Dwp_QD06_JDBC_T/style/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/Dwp_QD06_JDBC_T/script/script.js"></script>
</head>
<body>
    	 <!-- table>tbody>tr>th*5^td*5 --> 
    	    <div id="wrap" class=memberListWrap>
		<h1>회원 목록 출력 페이지</h1>
		<hr>
    	<table id="memListTBL">
    		<tbody>
    			<tr id="colTle">
    				<th>번호</th>
    				<th>아이디</th>
    				<th>나이</th>
    				<th>성별</th>
    				<th>가입시간</th>
    				<th></th>
    			</tr>
    			
    			<%
    	while(objRS.next()){ %>
    		<tr>
	    		<td><%=objRS.getInt("num")%></td>
				<td><%=objRS.getString("uid") %></td>
				<td><%=objRS.getInt("uAge") %></td>
				<td><%=objRS.getInt("gender") %></td>
				<td><%=objRS.getString("joinTM") %></td>
				<td>
					<button class="btnDel" >삭제하기</button>
				</td>
    		</tr>
    		<%
    		
    		
    		
    	}
    	
    	%>
    	
    		</tbody>
    		<tfoot>
    		<tr>
    		<td colspan="4">
    		<span>Print OK!</span>
    		</td>
    		<td colspan="1">		
    		<button onclick="location.href='/Dwp_QD06_JDBC_T/member/index.jsp'">메인으로</button>
    		</td>
    		</tr>
    		</tfoot>
    	</table>
    	
    </div>
    <!-- div#wrap  -->
   
        
        <%
    } catch (ClassNotFoundException cnfe) {
    	
    	out.print("cnfe" +cnfe.getMessage());
    	
    	
    	
    } catch (SQLException sqle){
    	out.print("sqle" + sqle.getMessage());
    }

    
    %>
    		
    
</body>
</html>

 

 

 

 

<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.PreparedStatement"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" autoFlush="true"%>
<% String idArg = request.getParameter("idArg");
/* ID argument , 삭제할 ID */
%>    

<%
        Connection 				objConn 			= 				null;
        PreparedStatement 	objPstmt 			= 				null;
       

        try {
        	Class.forName("com.mysql.cj.jdbc.Driver");
        	String url = "jdbc:mysql://localhost:3306/QD06_Member_T?";
        	url += "useSSL=false&";
        	url += "useUnicode=true&";
        	url += "characterEncoding=UTF8&";
        	url += "serverTimezone=UTC";
        	String user = "root";
        	String password = "1234";
        	
        	objConn = DriverManager.getConnection(url, user, password);	
        	//out.print("DB 접속 OK!!!");
        	
        
        	
      
        	/* 매개 변수가 없는 SQL 시작 (주로 Select) */	
        	
        	String sql = "delete from member where uid=?";
        	objPstmt = objConn.prepareStatement(sql);
        	objPstmt.setString(1, idArg);
        	objPstmt.executeUpdate();
           
            
            /* 매개 변수가 없는 SQL 끝 (주로 Select) */	
            
            /* 서버측에서 페이지 이동 시작 */
            response.sendRedirect("/Dwp_QD06_JDBC_T/member/index.jsp");
            /* 서버측에서 페이지 이동 끝 */
            
           
            //역순으로 생성된 객체의 소멸
          
            objPstmt.close();
            objConn.close();  //GC, Garbage Collector, 가비지 컬렉터,
            							// 메모리 자료 정리기 
            							//DBCP 에서 자동 생성됨.
            
            
        } catch (ClassNotFoundException cnfe) {
        	
        	out.print(cnfe.getMessage());
        	
        	
        	
        } 

        
        %>
$(function(){
	
	//회원 정보 삭제 페이지(/member/delMember.jsp)에서 데이터 전달 시작
	$("#btnDelMember").click(function(){
		let delMemberId= $("#delMemberId").val();
		//console.log("delMemberId : " + delMemberId);
		
		location.href="/Dwp_QD06_JDBC_T/member/delMemberProc.jsp?idArg="+delMemberId;
	});
	//회원 정보 삭제 페이지(/member/delMember.jsp)에서 데이터 전달 끝
	
	
	//회원 목록 출력 페이지 정보 삭제 페이지(/member/memberList.jsp)에서 데이터 전달 시작
	$(".btnDel").click(function(){
		
		let delId = $(this).parent().siblings().eq(1).text();
		
		location.href="/Dwp_QD06_JDBC_T/member/delMemberProc.jsp?idArg="+delId;
	
	});
	
	//회원 목록 출력 페이지 정보 삭제 페이지(/member/memberList.jsp)에서 데이터 전달 끝
});

 

강사님과 함께한 버튼으로 바로 삭제하기

 

<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" autoFlush="true"%>
    
     <%
    
    Connection 				objConn 			= 				null;
    Statement                 objStmt            =              null;
    PreparedStatement 	objPstmt 			= 				null;
    ResultSet                  objRS               =              null;

    try {
    	Class.forName("com.mysql.cj.jdbc.Driver");
    	String url = "jdbc:mysql://localhost:3306/QD06_Member_T?";
    	url += "useSSL=false&";
    	url += "useUnicode=true&";
    	url += "characterEncoding=UTF8&";
    	url += "serverTimezone=UTC";
    	String user = "root";
    	String password = "1234";
    	
    	objConn = DriverManager.getConnection(url, user, password);	
    	//out.print("DB 접속 OK!!!");

    	/* select를 사용한 조회 시작 */
    	String sql = "select num,uid,upw,uAge,gender,joinTM from";
    	sql+= " member order by num desc";
    	objStmt = objConn.createStatement();
        objRS = objStmt.executeQuery(sql); 	
        
    	/* select를 사용한 조회 끝 */
    	%>
    	
    	
    	
    	
    	
    	
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="/Dwp_QD06_JDBC_T/style/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/Dwp_QD06_JDBC_T/script/script.js"></script>
</head>
<body>
    	 <!-- table>tbody>tr>th*5^td*5 --> 
    	    <div id="wrap" class=memberListWrap>
		<h1>회원 목록 출력 페이지</h1>
		<hr>
    	<table id="memListTBL">
    		<tbody>
    			<tr id="colTle">
    				<th>번호</th>
    				<th>아이디</th>
    				<th>나이</th>
    				<th>성별</th>
    				<th>가입시간</th>
    				<th></th>
    			</tr>
    			
    			<%
    	while(objRS.next()){ %>
    		<tr>
	    		<td><%=objRS.getInt("num")%></td>
				<td><%=objRS.getString("uid") %></td>
				<td><%=objRS.getInt("uAge") %></td>
				<td><%=objRS.getInt("gender") %></td>
				<td><%=objRS.getString("joinTM") %></td>
				<td>
					<button class="btnDel" >&times;</button>
					<input type="hidden" value="<%=objRS.getString("uid") %>">
				</td>
    		</tr>
    		<%
    		
    		
    		
    	}
    	
    	%>
    	
    		</tbody>
    		<tfoot>
    		<tr>
    		<td colspan="4">
    		<span>Print OK!</span>
    		</td>
    		<td colspan="1">		
    		<button onclick="location.href='/Dwp_QD06_JDBC_T/member/index.jsp'">메인으로</button>
    		</td>
    		</tr>
    		</tfoot>
    	</table>
    	
    </div>
    <!-- div#wrap  -->
   
        
        <%
    } catch (ClassNotFoundException cnfe) {
    	
    	out.print("cnfe" +cnfe.getMessage());
    	
    	
    	
    } catch (SQLException sqle){
    	out.print("sqle" + sqle.getMessage());
    }

    
    %>
    		
    
</body>
</html>

while 문 안에서 input[type=hidden value=" 가지고 있는 값 "]  

value 값 안에 objRS.getString("uid") 값이 들어가게 되었다.. 매우 놀라움

input type 을 hidden으로 가려버리고, 그 안에 값을 넣었다니!

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" autoFlush="true"%>
    
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="/Dwp_QD06_JDBC_T/style/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/Dwp_QD06_JDBC_T/script/script.js"></script>
</head>
<body>
    <div id="wrap" class="delMemberWrap">
<h1>회원정보삭제</h1>
<hr>

<div id="delInputArea">

<label>
<span>삭제할 아이디 입력</span>
<input type="text" id=delMemberId size="10">
<button type="button" id="btnDelMember">삭제하기</button>

</label>


</div>
<!-- div#delInputArea -->
<button onclick="location.href='/Dwp_QD06_JDBC_T/member/memberList.jsp'">메인으로</button>
    </div>
    <!-- div#wrap  -->
</body>
</html>

 

<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.PreparedStatement"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" autoFlush="true"%>
<% 
String idArg = request.getParameter("idArg");
/* ID argument , 삭제할 ID */

String urlFlag="";
if(request.getParameter("urlFlag")!=null){
	urlFlag=request.getParameter("urlFlag");
}
/* 페이지 이동을 결정하는 신호 */
%>    

<%
        Connection 				objConn 			= 				null;
        PreparedStatement 	objPstmt 			= 				null;
       

        try {
        	Class.forName("com.mysql.cj.jdbc.Driver");
        	String url = "jdbc:mysql://localhost:3306/QD06_Member_T?";
        	url += "useSSL=false&";
        	url += "useUnicode=true&";
        	url += "characterEncoding=UTF8&";
        	url += "serverTimezone=UTC";
        	String user = "root";
        	String password = "1234";
        	
        	objConn = DriverManager.getConnection(url, user, password);	
        	//out.print("DB 접속 OK!!!");
        	
        
        	
      
        	/* 매개 변수가 없는 SQL 시작 (주로 Select) */	
        	
        	String sql = "delete from member where uid=?";
        	objPstmt = objConn.prepareStatement(sql);
        	objPstmt.setString(1, idArg);
        	int rtnCnt= objPstmt.executeUpdate();
           
            
            /* 매개 변수가 없는 SQL 끝 (주로 Select) */	
            
            /* 서버측에서 페이지 이동 시작 */
            if(rtnCnt==1){
            	switch(urlFlag){
            	case "url1":
            		urlFlag="/Dwp_QD06_JDBC_T/member/index.jsp";
            		break;
            	
                
            	case "url2":
            		urlFlag="/Dwp_QD06_JDBC_T/member/memberList.jsp";
     				break;
            	
     			default:
     				urlFlag="/Dwp_QD06_JDBC_T/member/index.jsp";
     				break;
            	}
            	
            	response.sendRedirect(urlFlag);
            } else{
            	
            	response.sendRedirect("/Dwp_QD06_JDBC_T/member/delMember.jsp");
            	
            	}
            	
            
            
            
            //response.sendRedirect("/Dwp_QD06_JDBC_T/member/index.jsp");
            /* 서버측에서 페이지 이동 끝 */
            
           
            //역순으로 생성된 객체의 소멸
          
            objPstmt.close();
            objConn.close();  //GC, Garbage Collector, 가비지 컬렉터,
            							// 메모리 자료 정리기 
            							//DBCP 에서 자동 생성됨.
            
            
        } catch (ClassNotFoundException cnfe) {
        	
        	out.print(cnfe.getMessage());
        	
        	
        	
        } 

        
        %>

String urlFlag="";              도착하는 곳의 url을 변수로 만들었다.


if(request.getParameter("urlFlag")!=null){
urlFlag=request.getParameter("urlFlag");
}

 


/* 페이지 이동을 결정하는 신호 */

$(function(){
	
	//회원 정보 삭제 페이지(/member/delMember.jsp)에서 데이터 전달 시작
	$("#btnDelMember").click(function(){
		let delMemberId= $("#delMemberId").val();
		//console.log("delMemberId : " + delMemberId);
		
		location.href="/Dwp_QD06_JDBC_T/member/delMemberProc.jsp?idArg="+delMemberId;
	});
	//회원 정보 삭제 페이지(/member/delMember.jsp)에서 데이터 전달 끝
	
	
	//회원 목록 출력 페이지 정보 삭제 페이지(/member/memberList.jsp)에서 데이터 전달 시작
	$(".btnDel").click(function(){
		
		let delId = $(this).next("input[type=hidden]").val();
		//console.log("delId : " + delId);
		let url="idArg="+delId+"&urlFalg=url2";
		location.href="/Dwp_QD06_JDBC_T/member/delMemberProc.jsp?"+url;
	
	});
	
	//회원 목록 출력 페이지 정보 삭제 페이지(/member/memberList.jsp)에서 데이터 전달 끝
});

 

회원 확인 목록에서 즉시 삭제 하는 버튼 만들기

 

<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" autoFlush="true"%>
    
     <%
    
    Connection 				objConn 			= 				null;
    Statement                 objStmt            =              null;
    PreparedStatement 	objPstmt 			= 				null;
    ResultSet                  objRS               =              null;

    try {
    	Class.forName("com.mysql.cj.jdbc.Driver");
    	String url = "jdbc:mysql://localhost:3306/QD06_Member_T?";
    	url += "useSSL=false&";
    	url += "useUnicode=true&";
    	url += "characterEncoding=UTF8&";
    	url += "serverTimezone=UTC";
    	String user = "root";
    	String password = "1234";
    	
    	objConn = DriverManager.getConnection(url, user, password);	
    	//out.print("DB 접속 OK!!!");

    	/* select를 사용한 조회 시작 */
    	String sql = "select num,uid,upw,uAge,gender,joinTM from";
    	sql+= " member order by num desc";
    	objStmt = objConn.createStatement();
        objRS = objStmt.executeQuery(sql); 	
        
    	/* select를 사용한 조회 끝 */
    	%>
    	
    	
    	
    	
    	
    	
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="/Dwp_QD06_JDBC_T/style/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/Dwp_QD06_JDBC_T/script/script.js"></script>
</head>
<body>
    	 <!-- table>tbody>tr>th*5^td*5 --> 
    	    <div id="wrap" class=memberListWrap>
		<h1>회원 목록 출력 페이지(수정1번)</h1>
		<hr>
    	<table id="memListTBL">
    		<tbody>
    			<tr id="colTle">
    				<th>선택</th>
    				<th>번호</th>
    				<th>아이디</th>
    				<th>나이</th>
    				<th>성별</th>
    				<th>가입시간</th>
    				<th></th>
    			</tr>
    			
    			<%
    	while(objRS.next()){ %>
    		<tr>
    			<td>
    				<input type="checkbox" class="chkDel" value="<%=objRS.getString("uid")%>">
    			</td>
	    		<td><%=objRS.getInt("num")%></td>
				<td><%=objRS.getString("uid") %></td>
				<td><%=objRS.getInt("uAge") %></td>
				<td><%=objRS.getInt("gender") %></td>
				<td><%=objRS.getString("joinTM") %></td>
				<td>
					<button class="btnDel" value="<%=objRS.getString("uid")%>">&times;</button>
					
				</td>
    		</tr>
    		<%
    		
    		
    		
    	}
    	
    	%>
    	
    		</tbody>
    		<tfoot>
    		<tr>
    		<td colspan="3">
    		<span>Print OK!</span>
    		</td>
    		<td colspan="4">		
    		<button class="chkDelbtn"> 선택항목 삭제 </button>
    		<button onclick="location.href='/Dwp_QD06_JDBC_T/member/index.jsp'">메인으로</button>
    		</td>
    		</tr>
    		</tfoot>
    	</table>
    	
    </div>
    <!-- div#wrap  -->
   
        
        <%
    } catch (ClassNotFoundException cnfe) {
    	
    	out.print("cnfe" +cnfe.getMessage());
    	
    	
    	
    } catch (SQLException sqle){
    	out.print("sqle" + sqle.getMessage());
    }

    
    %>
    		
    
</body>
</html>
$(function(){
	
	//회원 정보 삭제 페이지(/member/delMember.jsp)에서 데이터 전달 시작
	$("#btnDelMember").click(function(){
		let delMemberId= $("#delMemberId").val();
		//console.log("delMemberId : " + delMemberId);
		
		location.href="/Dwp_QD06_JDBC_T/member/delMemberProc.jsp?idArg="+delMemberId;
	});
	//회원 정보 삭제 페이지(/member/delMember.jsp)에서 데이터 전달 끝
	
	
	//회원 목록 출력 페이지 정보 삭제 페이지(/member/memberList.jsp)에서 데이터 전달 시작
	$(".btnDel").click(function(){
		
		let delId = $(this).val();
		//console.log("delId : " + delId);
		let url="idArg="+delId+"&urlFalg=url2";
		location.href="/Dwp_QD06_JDBC_T/member/delMemberProc.jsp?"+url;
	
	});
	
	//회원 목록 출력 페이지 정보 삭제 페이지(/member/memberList.jsp)에서 데이터 전달 끝
	
	//회원 목록 선택 정보 삭제 시작
	
	$(".chkDel").click(function(){
	let chk= $(".chkDel").prop("checked");
	
	let val = $(this).val();
	//alert(val);
		
		
	let ID = $(".chkDel").parent().siblings().eq(1).text();
	
	
			
	});
		
		$(".chkDelbtn").click(function(){
			$(".chkDel").each(function(){
			let chk= $(this).prop("checked");
			let chkID = "";
				if(chk){
					//alert(chkID+=$(this).parent().siblings().eq(1).text());
				location.href="/Dwp_QD06_JDBC_T/member/delMemberProc.jsp?idArg="+chkID;
				}
			})

		/* if(chk){
			location.href="/Dwp_QD06_JDBC_T/member/delMemberProc.jsp?idArg="+delMemberId;
		}*/

		})
	
	
	
	
	
	
	
	//회원 목록 선택 정보 삭제 끝
	
	
	
	
	
	
});
저작자표시 비영리 변경금지 (새창열림)

'코딩 해보자' 카테고리의 다른 글

220920 회원 목록 페이지에서 삭제(선택,전체)와 수정을 해보자  (0) 2022.09.20
220919 JDBC+Bean 연동하기 복습  (1) 2022.09.19
220914 JSP - Java - SQL(DB) 연결  (0) 2022.09.14
220913 JSP 액션태그 <useBean> 사용하기  (0) 2022.09.13
220907 DB 와 JSP 연동으로 간단한 회원가입/로그인 구현  (0) 2022.09.11

관련글

댓글

티스토리툴바