Servlet&JSP
Step04_Final (users/private, 가입정보 관리)
bono.html
2022. 8. 23. 15:34
info.jsp
<%@page import="test.users.dao.UsersDao"%>
<%@page import="test.users.dto.UsersDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. session scope 에서 로그인된 아이디 불러오기
String id=(String)session.getAttribute("id");
//2. DB 에서 가입 정보를 불러온다.
UsersDto dto=UsersDao.getInstance().getData(id);
//3. 응답한다.
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/private/info.jsp</title>
<style>
#profileImage{
width: 100px;
height: 100px;
border: 1px solid #cecece;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container">
<h1>가입 정보 입니다.</h1>
<table>
<tr>
<th>아이디</th>
<td><%=id %></td>
</tr>
<tr>
<th>프로필 이미지</th>
<td>
<%if(dto.getProfile()==null){ %>
<svg id="profileImage" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</svg>
<%}else{ %>
<img id="profileImage"
src="${pageContext.request.contextPath }<%=dto.getProfile()%>">
<%} %>
</td>
</tr>
<tr>
<th>비밀번호</th>
<td><a href="pwd_updateform.jsp">수정하기</a></td>
</tr>
<tr>
<th>이메일</th>
<td><%=dto.getEmail() %></td>
</tr>
<tr>
<th>가입일</th>
<td><%=dto.getRegdate() %></td>
</tr>
</table>
<a href="updateform.jsp">개인정보 수정</a>
<a href="javascript:deleteConfirm()">탈퇴</a>
</div>
<script>
function deleteConfirm(){
let isDelete=confirm("확인을 누르면 회원 탈퇴가 됩니다. 탈퇴 하시겠습니까?");
if(isDelete){
location.href="delete.jsp";
}
}
</script>
</body>
</html>
updateform.jsp
<%@page import="test.users.dao.UsersDao"%>
<%@page import="test.users.dto.UsersDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//session scope 에 저장된 아이디를 이용해서
String id=(String)session.getAttribute("id");
//수정할 회원의 정보를 얻어온다.
UsersDto dto=UsersDao.getInstance().getData(id);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/private/updateform.jsp</title>
<style>
/* 이미지 업로드 폼을 숨긴다 */
#imageForm{
display: none;
}
#profileImage{
width: 100px;
height: 100px;
border: 1px solid #cecece;
border-radius: 50%;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>가입정보 수정 폼 입니다.</h1>
<a id="profileLink" href="javascript:">
<%if(dto.getProfile() == null){%>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</svg>
<%}else{ %>
<img id="profileImage" src="${pageContext.request.contextPath }<%=dto.getProfile()%>">
<%} %>
</a>
<form action="update.jsp" method="post">
<input type="hidden" name="profile"
value="<%=dto.getProfile()==null ? "empty" : dto.getProfile()%>"/>
<div>
<label for="id">아이디</label>
<input type="text" id="id" value="<%=dto.getId() %>" disabled/>
</div>
<div>
<label for="email">이메일</label>
<input type="text" id="email" name="email" value="<%=dto.getEmail()%>"/>
</div>
<button type="submit">수정확인</button>
<button type="reset">취소</button>
</form>
<form id="imageForm" action="profile_upload.jsp" method="post" enctype="multipart/form-data">
프로필 사진
<input type="file" id="image" name="image" accept=".jpg, .png, .gif"/>
<button type="submit">업로드</button>
</form>
</div>
<!-- gura_util.js 로딩 -->
<script src="${pageContext.request.contextPath }/js/gura_util.js"></script>
<script>
//프로필 이미지 링크를 클릭하면
document.querySelector("#profileLink").addEventListener("click", function(){
// input type="file" 을 강제 클릭 시킨다.
document.querySelector("#image").click();
});
//프로필 이미지를 선택하면(바뀌면) 실행할 함수 등록
document.querySelector("#image").addEventListener("change", function(){
//ajax 전송할 폼의 참조값 얻어오기
const form=document.querySelector("#imageForm");
//gura_util.js 에 있는 함수를 이용해서 ajax 전송하기
ajaxFormPromise(form)
.then(function(response){
return response.json();
})
.then(function(data){
console.log(data);
// input name="profile" 요소의 value 값으로 이미지 경로 넣어주기
document.querySelector("input[name=profile]").value=data.imagePath;
let img=`<img id="profileImage"
src="${pageContext.request.contextPath }\${data.imagePath}">`;
document.querySelector("#profileLink").innerHTML=img;
});
});
</script>
</body>
</html>
여기서 response.json() 은 json 파일이 아니라 Promise 객체를 리턴하는 것이다. 저 위치에서 리턴하는 방법은 둘 중 하나이다.
1. return response.json()
2. return response.text()
1번은 서버에서 json 형식의 문자열을 응답했을때 사용하는 방법이다.
1번처럼 리턴하면 두번째 then(funciton(data){})함수에 data는 object 혹은 array이기 때문에 바로 사용할 수 있다.
2번은 서버에서 json 형식 이외의 문자열(주로 xml 이나 html)을 응담했을때 사용하는 방법이다.
2번처럼 리턴을 하면 두번째 then(funciton(data){})함수에 data는 서버가 응답한 문자열이 string type으로 들어있다.
profile_upload.jsp
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. 파일을 저장할 서버에서의 실제 경로 구성하기
String realPath=application.getRealPath("/upload");
//2. 아래의 MultipartRequest 객체가 예외 없이 잘 생성되면 webapp/upload 폴더에 파일이 자동으로 저장된다.
MultipartRequest mr=new MultipartRequest(request,
realPath, //업로드된 파일을 저장할 경로
1024*1024*50, //최대 업로드 사이즈
"utf-8", //한글 파일명 깨지지 않도록
new DefaultFileRenamePolicy());
//3. MultipartRequest 객체의 메소드를 이용해서 폼전송된 내용을 추출해야 한다.
String saveFileName=mr.getFilesystemName("image");//저장된 파일명
//DB 에 저장할 이미지 경로 구성하기
String imagePath="/upload/"+saveFileName;
%>
{"imagePath":"<%=imagePath %>"}
update.jsp
<%@page import="test.users.dao.UsersDao"%>
<%@page import="test.users.dto.UsersDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. 수정할 회원의 정보를 읽어와서
String id=(String)session.getAttribute("id");
String email=request.getParameter("email");
//프로필 이미지의 경로 읽어오기 ( 등록하지 않았으면 "empty" 이다 )
String profile=request.getParameter("profile");
UsersDto dto=new UsersDto();
dto.setId(id);
dto.setEmail(email);
//만일 profile 이미지를 등록했다면 (profile 이미지가 empty 가 아니라면)
if(!profile.equals("empty")){
//dto 에 전송된 프로필 이미지 경로를 담아준다.
dto.setProfile(profile);
}
//위의 if 문 안쪽 블럭이 수행되지 않았으면 dto 에 profile 이라는 필드에는 null이 들어있다.
//2. DB 에 수정반영하고
boolean isSuccess=UsersDao.getInstance().update(dto);
//3. 응답한다.
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/private/update.jsp</title>
</head>
<body>
<script>
<%if(isSuccess){%>
alert("수정 했습니다.");
location.href="info.jsp";
<%}else{%>
alert("수정실패");
location.href="updateform.jsp";
<%}%>
</script>
</body>
</html>