JSP - eclipse/mysql

최성현·2023년 8월 23일
getServletContext().getRealPath()id nullid중복체크key 생성openerrequest.getParameters/javaBeans로 값을 못 받는 이유session keyupload file null값 체크window.open로그인한 사람만 수정 삭제 가능삭제 modal회원가입
0

JSP

목록 보기
12/13

회원가입

MemberDto.java 생략

MemberDao.java

package member.model;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Vector;

import mysql.db.DBConnect;

public class MemberDao {

	DBConnect db=new DBConnect();
	
	//아이디존재하면 true값 리턴
	public boolean isIdCheck(String id)
	{
		boolean flag=false;
		
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		
		String sql="select * from spmember where id=?";
		
		try {
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1, id);
			rs=pstmt.executeQuery();
			
			if(rs.next())
				flag=true;
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			db.dbClose(rs, pstmt, conn);
		}
		
		return flag;
	}
	
	//insert
	public void insertMember(MemberDto dto)
	{
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		
		String sql="insert into spmember values(null,?,?,?,?,?,now())";
		
		try {
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1, dto.getId());
			pstmt.setString(2, dto.getPass());
			pstmt.setString(3, dto.getName());
			pstmt.setString(4, dto.getHp());
			pstmt.setString(5, dto.getImage());
			pstmt.execute();
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			db.dbClose(pstmt, conn);
		}
	}
	
	public Vector<MemberDto> getAllDataes()
	{
		Vector<MemberDto> list=new Vector<MemberDto>();
		
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		
		String sql="select * from spmember order by num";
		
		try {
			pstmt=conn.prepareStatement(sql);
			rs=pstmt.executeQuery();
			
			while(rs.next())
			{
				MemberDto dto=new MemberDto();
				
				dto.setNum(rs.getString("num"));
				dto.setId(rs.getString("id"));
				dto.setPass(rs.getString("pass"));
				dto.setName(rs.getString("name"));
				dto.setHp(rs.getString("hp"));
				dto.setImage(rs.getString("photo"));
				dto.setGaip(rs.getTimestamp("gaip"));
				
				list.add(dto);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			db.dbClose(rs, pstmt, conn);
		}
		return list;
	}
	
	public String getName(String id)
	{
		String name="";
		
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		
		String sql="select * from spmember where id=?";
		
		try {
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1, id);
			rs=pstmt.executeQuery();
			
			if(rs.next())
			{
				name=rs.getString("name");
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			db.dbClose(rs, pstmt, conn);
		}
		return name;
	}
	
	public boolean isLogin(String id,String pass)
	{
		boolean flag=false;
		
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		
		String sql="select * from spmember where id=? and pass=?";
		
		try {
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1, id);
			pstmt.setString(2, pass);
			rs=pstmt.executeQuery();
			
			if(rs.next())
				flag=true;
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			db.dbClose(rs, pstmt, conn);
		}
		
		return flag;
	}
	
	//num의 dto
	public MemberDto getData(String num)
	{
		MemberDto dto=new MemberDto();
		
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		
		String sql="select * from spmember where num=?";
		
		try {
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1, num);
			rs=pstmt.executeQuery();
			
			if(rs.next())
			{
				dto.setNum(rs.getString("num"));
				dto.setId(rs.getString("id"));
				dto.setPass(rs.getString("pass"));
				dto.setName(rs.getString("name"));
				dto.setHp(rs.getString("hp"));
				dto.setImage(rs.getString("photo"));
				dto.setGaip(rs.getTimestamp("gaip"));
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			db.dbClose(rs, pstmt, conn);
		}
		
		return dto;
	}
	
	//update...pass,name,hp,photo 수정
	public void updateMember(MemberDto dto) 
	{
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		
		String sql="update spmember set pass=?,name=?,hp=?,photo=? where num=?";
		
		try {
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1, dto.getPass());
			pstmt.setString(2, dto.getName());
			pstmt.setString(3, dto.getHp());
			pstmt.setString(4, dto.getImage());
			pstmt.setString(5, dto.getNum());
			
			pstmt.execute();
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			db.dbClose(pstmt, conn);
		}
	}
	
	//delete
	public void deleteMember(String num)
	{
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		
		String sql="delete from spmember where num=?";
		
		try {
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1, num);
			pstmt.execute();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			db.dbClose(pstmt, conn);
		}
	}
}

addForm(insert)

id 중복체크

<tr>
	<td style="background-color: #66cdaa" width="120">아이디</td>
	<td>
		<input type="text" class="form-control" name="id" style="width: 120px;"
		<%-- 읽기만 가능/지금은 openwindow로 해결 --%>
		readonly="readonly" required="required" id="mid">
		<button type="button" class="btn btn-danger btn-sm"
		onclick="openId()">아이디입력</button>
	</td>
</tr>

window.open

window.open("오픈할 파일이름","특정값은 아니지만 빈값으로 필수","창 크기, 위치 지정");

<script type="text/javascript">
	function openId() {
		window.open("idcheck.jsp","e","left=400px, top=100px, width=400px, height=250px");
	}
</script>

id null값 체크

부모창(opener)에서 다른 입력창을 띄웠을 때(ex. window.open) 뜨는 창이 자식창

빈값인데 required인데도 db에 들어가는 것들(null값으로 들어가는것)은 null값 체크 해야한다(회원가입태그 쪽에 id값주고 function 이벤트로 줘서)

<script>
	$(function(){
		$("#btnGaip").click(function(){
			
			//id의 id(태그에 준 id)
			if(mfrm.mid.value==0)
			{
				alert("아이디 입력버튼을 눌러주세요");
				//액션 호출 안되게 false return
				return false;
			}
		})
	})
</script>

addForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
<script>
	$(function(){
		$("#btnGaip").click(function(){
			
			//id의 id(태그에 준 id)
			if(mfrm.mid.value==0)
			{
				alert("아이디 입력버튼을 눌러주세요");
				//액션 호출 안되게 false return
				return false;
			}
		})
	})
</script>
</head>
<body>
<%-- 부모창(opener)에서 다른 입력창을 띄웠을 때(ex. window.open) 뜨는 창이 자식창

	 빈값인데 required인데도 db에 들어가는 것들(null값으로 들어가는것)은 null값 체크 해야한다(회원가입태그 쪽에 id값주고 function 이벤트로 줘서) --%>
	<div style="margin: 50px; 100px;" class="form-inline">
		<form action="addProc.jsp" method="post" enctype="multipart/form-data" class="form-inline" id="mfrm">
			<table class="table table-bordered" style="width: 500px;">
				<caption align="top"><b>회원가입</b></caption>
				<tr>
					<td style="background-color: #66cdaa" width="120">아이디</td>
					<td>
						<input type="text" class="form-control" name="id" style="width: 120px;"
						<%-- 읽기만 가능/지금은 openwindow로 해결 --%>
						readonly="readonly" required="required" id="mid">
						<button type="button" class="btn btn-danger btn-sm"
						onclick="openId()">아이디입력</button>
					</td>
				</tr>
				
				<tr>
					<td style="background-color: #66cdaa" width="120">비밀번호</td>
					<td>
						<input type="password" class="form-control" style="width: 120px;"
						name="pass" required="required">
					</td>
				</tr>
				
				<tr>
					<td style="background-color: #66cdaa" width="120">이름</td>
					<td>
						<input type="text" class="form-control" style="width: 120px;"
						name="name" required="required">
					</td>
				</tr>
				
				<tr>
					<td style="background-color: #66cdaa" width="120">사진</td>
					<td>
						<input type="file" class="form-control" style="width: 250px;"
						name="uploadImage">
					</td>
				</tr>
				
				<tr>
					<td style="background-color: #66cdaa" width="120">핸드폰</td>
					<td>
						<input type="text" class="form-control" style="width: 120px;"
						name="hp" required="required">
					</td>
				</tr>
				
				<tr>
					<td colspan="2" align="center">
						<button type="submit" class="btn btn-info"
						id="btnGaip">회원가입</button>
						<button type="button" class="btn btn-success" onclick="location.href='memberList.jsp'">회원목록</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
	
	<script type="text/javascript">
		function openId() {
			window.open("idcheck.jsp","e","left=400px, top=100px, width=400px, height=250px");
		}
	</script>
</body>
</html>

addAction

getServletContext().getRealPath("/upload")

/upload 디렉토리의 실제 파일 시스템 경로를 가져오기 위해 사용

getServletContext() 로 따로 호출 안하는 이유

  • getServletContext().getRealPath("/upload") 대신에 getServletContext()를 직접 사용할 수 있습니다. 왜냐하면 getRealPath()는 ServletContext 객체에서 제공하는 메서드이기 때문입니다. 그러나 코드가 String realPath=getServletContext().getRealPath("/upload");로 작성된 이유는 단순히 명확성과 가독성 때문입니다. 이는 getServletContext() 메서드를 사용하여 ServletContext 객체에 액세스한 다음 "/upload" 디렉토리의 실제 경로를 가져온다는 것을 명시적으로 나타냅니다.

request.getParameters/javaBeans로 값을 못 받는 이유

request.getParameter() 및 자바 빈즈를 사용하여 데이터를 받아오는 것도 가능하지만, 멀티파트 요청과 파일 업로드와 같은 특별한 경우에는 한계가 있습니다. 아래에서 그 이유를 설명하겠습니다.

1.파일 업로드 및 바이너리 데이터 처리: request.getParameter()는 기본적으로 텍스트 데이터를 처리하는 메서드입니다. 파일 업로드와 같이 바이너리 데이터가 포함된 멀티파트 요청을 다루기에는 적합하지 않습니다. 파일 데이터는 바이너리 형식이므로, request.getParameter()로 파일 데이터를 추출하려고 하면 잘못된 결과나 데이터 손실이 발생할 수 있습니다.

2.자바 빈즈의 제한된 기능: 자바 빈즈는 객체 지향 설계 원칙에 따라 데이터를 캡슐화하고 다루는 데 사용되지만, 멀티파트 요청과 파일 업로드와 같은 복잡한 데이터 처리에는 제한적일 수 있습니다. 자바 빈즈는 주로 데이터의 상태를 저장하거나 가져오는 데 사용되며, 멀티파트 요청의 다양한 데이터 유형을 처리하기 위해 특별히 설계되지는 않았습니다.

3.Multipart 데이터 처리의 편의성과 안전성: 파일 업로드 및 멀티파트 데이터를 처리하기 위해 특화된 라이브러리나 클래스들이 존재합니다. 이러한 도구들은 멀티파트 요청의 내용을 쉽게 추출하고, 파일 및 텍스트 데이터를 안전하게 다룰 수 있도록 도와줍니다. MultipartRequest나 비슷한 라이브러리들은 멀티파트 데이터 처리를 더욱 편리하고 안전하게 만들어 줍니다.

따라서 멀티파트 요청과 파일 업로드와 같은 특별한 상황에서는 MultipartRequest나 유사한 라이브러리를 사용하여 데이터를 추출하고 처리하는 것이 바람직합니다. 이렇게 하면 데이터의 안전성과 무결성을 보장할 수 있으며, 파일 업로드와 텍스트 데이터 추출을 효과적으로 수행할 수 있습니다.

upload파일 null값 체크

db에 이미지가 null값 혹은 빈값으로 들어갈 경우

String photo=multi.getFilesystemName("uploadImage");
	
if(photo==null)
	dto.setImage("../image/noimg.gif"); //사진이 없는 경우
else
	dto.setImage("../upload/"+photo); //사진 선택한 경우

addAction.jsp

<%@page import="member.model.MemberDto"%>
<%@page import="member.model.MemberDao"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	String realPath=getServletContext().getRealPath("/upload");

	int uploadSize=1024*1024*10;
	
	MultipartRequest multi=null;
	
	multi= new MultipartRequest(request,realPath,uploadSize,"utf-8",new DefaultFileRenamePolicy());
	
	//dao선언
	MemberDao dao=new MemberDao();
	//dto
	MemberDto dto=new MemberDto();
	
	//addForm에서 가져온 값
	//fileupload에서는 multi에 값을 다 설정해줘서 multi.getParameter로 값을 가져와 넣어줘야한다
	dto.setId(multi.getParameter("id"));
	dto.setPass(multi.getParameter("pass"));
	dto.setName(multi.getParameter("name"));
	dto.setHp(multi.getParameter("hp"));
	
	//dto.setImage(multi.getFilesystemName("uploadImage"));
	
	
	//db에 이미지가 null값 혹은 빈값으로 들어갈 경우
	String photo=multi.getFilesystemName("uploadImage");
	
	if(photo==null)
		dto.setImage("../image/noimg.gif"); //사진이 없는 경우
	else
		dto.setImage("../upload/"+photo); //사진 선택한 경우
	
	
	
	
	//db에 insert
	dao.insertMember(dto);
	
	//성공 후 이동
	response.sendRedirect("memberList.jsp");
%>
</body>
</html>

id 중복체크(회원가입)

중복체크용 폼과 액션을 한 페이지에 작성
->해당 폼에서 바로 결과창이 나오게 하려고 action을 동일한 곳에 넣어줌

null값 key 생성

처음 호출 시 null값

String key=request.getParameter("key"); //처음 호출 시 null이라고 생각하면 된다

null값인 key에 빈값(null이 아님) 부여

<input type="hidden" name="key" value="yes">

key값을 넘겨주기 위해서 만든 input / value는 의미없는 값이지만 yes로 넣어줌
key값은 window.open에서 흔하게 값 넘겨주는 값/무언가의 값을 보내기 위해서 사용
hidden을 준 이유는 안보이게 연결해주기 위해서

즉 처음 key값은 null인데 빈 혹은 아무 value값을 줘서 중복체크 버튼을 누르면
key!=null이 되어 if문에 안걸리고 else로 내려가서 db에 id가 있는지 없는지 비교가능하게 한 것 

if(key==null)
{ //null일 경우에는 폼을 나타낸다
%>
	<div style="margin: 10px 30px;">
		<%-- 해당 폼에서 바로 결과창이 나오게 하려고 action을 동일한 곳에 넣어줌 --%>
		<form action="idcheck.jsp" method="post" class="form-inline">
			<b>아이디를 입력 주세요</b><br><br>
			<input type="text" name="id" class="form-control"
			style="width: 120px; float: left;">
			<%-- key값을 넘겨주기 위해서 만든 input / value는 의미없는 값이지만 yes로 넣어줌
				 key값은 window.open에서 흔하게 값 넘겨주는 값/무언가의 값을 보내기 위해서 사용
				 hidden을 준 이유는 안보이게 연결해주기 위해서
					 
				 즉 처음 key값은 null인데 빈 혹은 아무 value값을 줘서 중복체크 버튼을 누르면
				 key!=null이 되어 if문에 안걸리고 else로 내려가서 db에 id가 있는지 없는지 비교가능하게 한 것 --%>
			<input type="hidden" name="key" value="yes">
			<button type="submit" class="btn btn-success" style="margin-left: 10px;">중복체크</button>
		</form>
	</div>
<%}

key에 빈값을 넣어주고 난 뒤

if 문에서 null 값인 key값을 빈값을 주어서 null이 아니게 되면 else로 다시 들어가서 action실행

else
{ 
	//action 처리
		
		
	String id=request.getParameter("id");
	
	//dao에서 id 존재유무에 관한 메서드 호출
	MemberDao dao=new MemberDao();
	boolean b=dao.isIdCheck(id);
		
	//id가 존재하는 경우
	if(b)
	{%>
		<div style="margin: 10px 30px;">
			<%-- 위에서 getparameter로 받아온 id --%>
			<h5><%=id %>는 이미 가입된 아이디입니다</h5>
			<img src="../image/b6.png" width="60" align="left">
			<button type="button" class="btn btn-danger btn-xs"
			onclick="location.href='idcheck.jsp'">다시입력</button>
		</div>
	<%}
	else 	//id가 존재하지 않는 경우/db에 존재하지 않아서 사용가능한 아이디
	{%>
			
			
		<div style="margin: 10px 30px;">
			<%-- 위에서 getparameter로 받아온 id --%>
			<h5><%=id %>는 사용 가능한 아이디입니다</h5>
			<img src="../image/b2.png" width="60" align="left">
			<button type="button" class="btn btn-info btn-xs"
			onclick="saveId('<%=id%>')">적용하기</button>
			<button type="button" class="btn btn-danger btn-xs"
			onclick="location.href='idcheck.jsp'">다시입력</button>
		</div>
	<%}
}

db안 id 유무 체크

dao에서 id 존재유무에 관한 메서드 호출

MemberDao dao=new MemberDao();
boolean b=dao.isIdCheck(id);

id 중복체크후 적용

alert(id); //id 제대로 넘어오는지 확인

부모창 : opener
현재창의 id를 부모창의 id에 나타내준다

opener.$("#mid").val(id);
==opener.mid.value=id; //id에 id줄시에는 폼아이디 없어도 가능
==opener.mfrm.mid.value=id; form id가 있을시 id는 name도 가능
<script type="text/javascript">
	function saveId(id) {
		//alert(id); //id 제대로 넘어오는지 확인
		
		//부모창 : opener
		//현재창의 id를 부모창의 id에 나타내준다
		//==opener.mid.value=id; //id에 id줄시에는 폼아이디 없어도 가능
		//==opener.mfrm.mid.value=id; form id가 있을시 id는 name도 가능
		opener.$("#mid").val(id);
		//현재창 닫기
		window.close();
	}
</script>

idcheck.jsp

<%@page import="member.model.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	String key=request.getParameter("key"); //처음 호출 시 null이라고 생각하면 된다
	
	if(key==null)
	{ //null일 경우에는 폼을 나타낸다
	%>
		<div style="margin: 10px 30px;">
			<%-- 해당 폼에서 바로 결과창이 나오게 하려고 action을 동일한 곳에 넣어줌 --%>
			<form action="idcheck.jsp" method="post" class="form-inline">
				<b>아이디를 입력 주세요</b><br><br>
				<input type="text" name="id" class="form-control"
				style="width: 120px; float: left;">
				<%-- key값을 넘겨주기 위해서 만든 input / value는 의미없는 값이지만 yes로 넣어줌
					 key값은 window.open에서 흔하게 값 넘겨주는 값/무언가의 값을 보내기 위해서 사용
					 hidden을 준 이유는 안보이게 연결해주기 위해서
					 
					 즉 처음 key값은 null인데 빈 혹은 아무 value값을 줘서 중복체크 버튼을 누르면
					 key!=null이 되어 if문에 안걸리고 else로 내려가서 db에 id가 있는지 없는지 비교가능하게 한 것 --%>
				<input type="hidden" name="key" value="yes">
				<button type="submit" class="btn btn-success" style="margin-left: 10px;">중복체크</button>
			</form>
		</div>
	<%}
	else
	{ 
		//action 처리
		
		
		String id=request.getParameter("id");
	
		//dao에서 id 존재유무에 관한 메서드 호출
		MemberDao dao=new MemberDao();
		boolean b=dao.isIdCheck(id);
		
		//id가 존재하는 경우
		if(b)
		{%>
			<div style="margin: 10px 30px;">
				<%-- 위에서 getparameter로 받아온 id --%>
				<h5><%=id %>는 이미 가입된 아이디입니다</h5>
				<img src="../image/b6.png" width="60" align="left">
				<button type="button" class="btn btn-danger btn-xs"
				onclick="location.href='idcheck.jsp'">다시입력</button>
			</div>
		<%}
		else 	//id가 존재하지 않는 경우/db에 존재하지 않아서 사용가능한 아이디
		{%>
			
			
			<div style="margin: 10px 30px;">
				<%-- 위에서 getparameter로 받아온 id --%>
				<h5><%=id %>는 사용 가능한 아이디입니다</h5>
				<img src="../image/b2.png" width="60" align="left">
				<button type="button" class="btn btn-info btn-xs"
				onclick="saveId('<%=id%>')">적용하기</button>
				<button type="button" class="btn btn-danger btn-xs"
				onclick="location.href='idcheck.jsp'">다시입력</button>
			</div>
		<%}
	}
%>

<script type="text/javascript">
	function saveId(id) {
		//alert(id); //id 제대로 넘어오는지 확인
		
		//부모창 : opener
		//현재창의 id를 부모창의 id에 나타내준다
		//==opener.mid.value=id; //id에 id줄시에는 폼아이디 없어도 가능
		//==opener.mfrm.mid.value=id; form id가 있을시 id는 name도 가능
		opener.$("#mid").val(id);
		//현재창 닫기
		window.close();
	}
</script>
</body>
</html>

loginform.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
<style type="text/css">
	.loginfrm{
		margin-left: 500px;
		margin-top: 200px;
	}
</style>
</head>
<%
	String id=(String)session.getAttribute("id");
	String savechk=(String)session.getAttribute("savechk");
	
	boolean save=true;
	
	if(savechk==null)
	{
		id="";
		save=false;
	}
%>
<body>
<div class="loginfrm">
	<form action="loginAction.jsp" method="post">
		<input type="text" name="id" style="width: 200px;"
		class="form-control" placeholder="identify" required="required"
		value="<%=id%>"><br>
		
		<input type="password" name="pass" style="width: 200px;"
		class="form-control" placeholder="password" required="required"><br>
		
		<button type="submit" class="btn btn-outline-info"
		style="width: 200px;">로그인</button>
		<br>
		
		<input type="checkbox" name="savechk"
		<%=save?"checked":"" %>>아이디저장
	</form>
</div>
</body>
</html>

loginAction.jsp

<%@page import="member.model.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	request.setCharacterEncoding("utf-8");

	String id=request.getParameter("id");
	String pass=request.getParameter("pass");
	String savechk=request.getParameter("savechk");
	
	MemberDao dao=new MemberDao();
	boolean flag=dao.isLogin(id, pass);
	
	if(flag)
	{
		session.setAttribute("loginok", "yes");
		
		session.setAttribute("id", id);
		session.setAttribute("savechk", savechk);
		
		session.setMaxInactiveInterval(60*60*8);
		
		response.sendRedirect("loginMain.jsp");
	}
	else
	{%>
		<script type="text/javascript">
			alert("로그인 혹은 비밀번호가 틀렸습니다");
			history.back();
		</script>
	<%}
%>
</body>
</html>

logoutForm.jsp

<%@page import="member.model.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	String id=(String)session.getAttribute("id");
	MemberDao dao=new MemberDao();
	String name=dao.getName(id);
%>

<br><br>
<h4><b><%=name %>님이 로그인 하셨습니다 다들 박수~~~~~</b></h4>

<input type="button" value="로그아웃" class="btn btn-outline-danger"
onclick="location.href='logoutAction.jsp'">
<input type="button" value="회원목록" class="btn btn-outline-success"
onclick="location.href='memberList.jsp'"> <%-- 다른 폴더일 경우 상위폴더 갔다가 해당 파일이름 경로로 작성 --%>

<br><br>
<img alt="" src="../image/b9.png">
</body>
</html>

logoutAction.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	session.removeAttribute("loginok");

	response.sendRedirect("loginMain.jsp");
%>
</body>
</html>

loginMain.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	String loginok=(String)session.getAttribute("loginok");

	if(loginok==null || loginok.equals(""))
	{%>
		<jsp:include page="loginForm.jsp"/>
	<%}
	else
	{%>
		<jsp:include page="memberList.jsp"/>
	<%}
%>
</body>
</html>

memberList - modal창 사용

로그인한 사람의 정보만 수정삭제 가능

로그인한 본인꺼만 수정/삭제 보이도록

String loginok=(String)session.getAttribute("loginok");
String id=(String)session.getAttribute("id");

로그인한 본인꺼만 나오도록

loginok가 널값이 아니고 세션에 저장한(db에 저장한)id와 값이 같다면

if(loginok!=null && dto.getId().equals(id))
<td>
				
<%-- 로그인한 본인만 수정 삭제 가능 하도록 수정 --%>
<%
	/* 로그인한 본인꺼만 수정/삭제 보이도록... */
	String loginok=(String)session.getAttribute("loginok");
	String id=(String)session.getAttribute("id");
					
	//로그인한 본인꺼만 나오도록
	//loginok가 널값이 아니고 세션에 저장한(db에 저장한)id와 값이 같다면
	if(loginok!=null && dto.getId().equals(id))
	{%>
		<button type="button" class="btn btn-warning btn-sm"
		onclick="location.href='updateForm.jsp?num=<%=dto.getNum() %>'">수정</button>
		<button type="button" class="btn btn-danger btn-sm"
		onclick="funcdel(<%=dto.getNum()%>)" >삭제</button>
	<%}
	else
	{%>
		<h6>권한없음</h6>
	<%}
%>
</td>

삭제 modal

탈퇴확인버튼에 num값을 넘겨주면 나중에 다른 이벤트로 num값 넘겨줄 수 있기 때문

$("#btnmdel").attr("num",num);

modal 오픈

$("#myModal").modal();

버튼 클릭시 deleteMember로 이동 + num 값 넘기기

$("#btnmdel").click(function(){
	location.href='deleteMember.jsp?num='+num;
});
<button type="button" class="btn btn-danger btn-sm"
onclick="funcdel(<%=dto.getNum()%>)" >삭제</button>

<script type="text/javascript">
	function funcdel(num)
	{
		//alert(num); 시퀀스 번호 불러오는지 확인
		
		$("#btnmdel").attr("num",num); //탈퇴확인버튼에 num값을 넘겨주면 나중에 다른 이벤트로 num값 넘겨줄 수 있기 때문
		$("#myModal").modal();
		
		$("#btnmdel").click(function(){
			location.href='deleteMember.jsp?num='+num;
		});
	}
</script>

memberList.jsp

<%@page import="java.text.SimpleDateFormat"%>
<%@page import="member.model.MemberDto"%>
<%@page import="java.util.Vector"%>
<%@page import="member.model.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%-- modal 하위 위해서 2번째 script도 가져오고 부트스트랩3의 stylesheet css 가져와야한다 --%>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
	function funcdel(num)
	{
		//alert(num); 시퀀스 번호 불러오는지 확인
		
		$("#btnmdel").attr("num",num); //탈퇴확인버튼에 num값을 넘겨주면 나중에 다른 이벤트로 num값 넘겨줄 수 있기 때문
		$("#myModal").modal();
		
		$("#btnmdel").click(function(){
			location.href='deleteMember.jsp?num='+num;
		});
	}
</script>
</head>
<%
	MemberDao dao=new MemberDao();
	Vector<MemberDto> list=dao.getAllDataes();
	
	SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
%>
<body>
<button type="button" class="btn btn-info" onclick="location.href='addForm.jsp'">회원가입</button>
<button type="button" class="btn btn-outline-info" onclick="location.href='loginForm.jsp'">로그인</button>
<br><br>


<button type="button" class="btn btn-danger" 
onclick="location.href='logoutAction.jsp'">logout</button>

<br>
<table class="table table-bordered" style="width: 600px;">
	<tr align="center">
		<caption align="top"><b>총 <%=list.size() %>명의 회원이 있습니다</b></caption>
		<th style="width: 50px;">번호</th>
		<th style="width: 90px;">아이디</th>
		<th style="width: 70px;">회원명</th>
		<th style="width: 140px;">핸드폰</th>
		<th style="width: 100px;">가입일</th>
		<th style="width: 100px;">편집</th>
	</tr>
	
	<%
		for(int i=0;i<list.size();i++)
		{	
			MemberDto dto=list.get(i);
			
		%>
			<tr>
				<td><%=i+1 %></td>
				<td><%=dto.getId() %></td>
				<td><%=dto.getName() %>
				<img src="<%=dto.getImage() %>" style="width:50px; height: 50px; border-radius: 50px;"></td>
				<td><%=dto.getHp() %></td>
				<td><%=sdf.format(dto.getGaip()) %></td>
				<td>
				
				<%-- 로그인한 본인만 수정 삭제 가능 하도록 수정 --%>
				<%
					/* 로그인한 본인꺼만 수정/삭제 보이도록... */
					String loginok=(String)session.getAttribute("loginok");
					String id=(String)session.getAttribute("id");
					
					//로그인한 본인꺼만 나오도록
					//loginok가 널값이 아니고 세션에 저장한(db에 저장한)id와 값이 같다면
					if(loginok!=null && dto.getId().equals(id))
					{%>
						<button type="button" class="btn btn-warning btn-sm"
						onclick="location.href='updateForm.jsp?num=<%=dto.getNum() %>'">수정</button>
						<button type="button" class="btn btn-danger btn-sm"
						onclick="funcdel(<%=dto.getNum()%>)" >삭제</button>
					<%}
					else
					{%>
						<h6>권한없음</h6>
					<%}
					
				%>
				</td>
			</tr>
		<%}
	%>
</table>


  <%-- Modal --%>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <%-- Modal content--%>
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">회원탈퇴</h4>
        </div>
        <div class="modal-body">
          <p>회원탈퇴를 원하시면 [탈퇴확인]을 눌러주세요</p>
          <button type="button" class="btn btn-danger"
          id="btnmdel" num="">탈퇴확인</button>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
</body>
</html>

updateForm.jsp

<%@page import="member.model.MemberDto"%>
<%@page import="member.model.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<%
	String num=request.getParameter("num");
	MemberDao dao=new MemberDao();
	MemberDto dto=dao.getData(num);
%>
<body>
	<div style="margin: 50px; 100px;" class="form-inline">
		<form action="updateProc.jsp" method="post" enctype="multipart/form-data" class="form-inline" id="mfrm">
		<input type="hidden" name="num" value="<%=num%>">
			<table class="table table-bordered" style="width: 500px;">
				<caption align="top"><b>회원수정</b></caption>
				<tr>
					<td style="background-color: #66cdaa" width="120">아이디</td>
					<td>
						<b><%=dto.getId() %></b>
					</td>
				</tr>
				
				<tr>
					<td style="background-color: #66cdaa" width="120">비밀번호</td>
					<td>
						<input type="password" class="form-control" style="width: 120px;"
						name="pass" required="required" value="<%=dto.getPass()%>">
					</td>
				</tr>
				
				<tr>
					<td style="background-color: #66cdaa" width="120">이름</td>
					<td>
						<input type="text" class="form-control" style="width: 120px;"
						name="name" required="required" value="<%=dto.getName()%>">
					</td>
				</tr>
				
				<tr>
					<td style="background-color: #66cdaa" width="120">사진</td>
					<td>
						<input type="file" class="form-control" style="width: 250px;"
						name="uploadImage">
						<img alt="" src="<%=dto.getImage()%>" width="50" height="50" style="border-radius: 50px;">
					</td>
				</tr>
				
				<tr>
					<td style="background-color: #66cdaa" width="120">핸드폰</td>
					<td>
						<input type="text" class="form-control" style="width: 120px;"
						name="hp" required="required" value="<%=dto.getHp()%>">
					</td>
				</tr>
				
				<tr>
					<td colspan="2" align="center">
						<button type="submit" class="btn btn-warning"
						id="btnGaip">회원정보 수정</button>
						<button type="button" class="btn btn-success" onclick="location.href='memberList.jsp'">회원목록</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>

updateProc.jsp

<%@page import="member.model.MemberDto"%>
<%@page import="member.model.MemberDao"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	String realPath=getServletContext().getRealPath("/upload");

	int uploadSize=1024*1024*10;
	
	MultipartRequest multi=null;
	
	multi= new MultipartRequest(request,realPath,uploadSize,"utf-8",new DefaultFileRenamePolicy());
	
	//dao선언
	MemberDao dao=new MemberDao();
	//dto
	MemberDto dto=new MemberDto();
	
	//updateForm에서 가져온 값
	//fileupload에서는 multi에 값을 다 설정해줘서 multi.getParameter로 값을 가져와 넣어줘야한다
	dto.setNum(multi.getParameter("num"));
	dto.setId(multi.getParameter("id"));
	dto.setPass(multi.getParameter("pass"));
	dto.setName(multi.getParameter("name"));
	dto.setHp(multi.getParameter("hp"));
	
	String photo=multi.getFilesystemName("uploadImage");
	
	if(photo==null)//사진이 없는 경우
	{
		//list에서 가져온 사진 값을 그대로 가져오기 위해 getData로 해당 num의 image경로를 가져와야함
		String p=dao.getData(dto.getNum()).getImage();
		dto.setImage(p);
	}
	else
		dto.setImage("../upload/"+photo); //사진 선택한 경우
	
	
	
	
	//db에 update
	dao.updateMember(dto);
	
	//성공 후 이동
	response.sendRedirect("memberList.jsp");
%>
</body>
</html>

deleteMember

num값 넘겨주기
session값 지우기
마지막으로 memberList로 이동

deleteMember.jsp

<%@page import="com.mysql.cj.jdbc.ha.BestResponseTimeBalanceStrategy"%>
<%@page import="member.model.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	//db삭제
	String num=request.getParameter("num");
	MemberDao dao=new MemberDao();
	dao.deleteMember(num);
	
	session.removeAttribute("loginok");
	session.removeAttribute("savechk");
	
	response.sendRedirect("memberList.jsp");
%>
</body>
</html>
profile
최성현
백엔드 개발자로서 성장해 나가는 성현이의 블로그~
이전 포스트

JSP - eclipse

다음 포스트

JSP - eclipse/mysql

0개의 댓글