LoginTask_ajax로 프로필 사진 추가, xml/json을 이용한 회원리스트 출력
LoginTask 파일)
- 회원가입 폼에 프로필 사진 첨부 폼 만들기
회원가입 폼에 ‘프로필 사진’ 란을 추가했습니다.
‘프로필 사진 찾기’ 버튼을 누르면!
이렇게 사진 업로드 창이 뜹니다.
먼저, 파일을 선택하지 않고 ‘사진 등록’ 버튼을 눌러보도록 하겠습니다.
사진을 등록해달라는 알람이 뜹니다.
확인’ 버튼을 누르면, 다시 프로필 사진 업로드 창으로 돌아옵니다.
이번엔 파일을 선택하고 ‘사진 등록’ 버튼을 눌러보겠습니다.
저는 PC에 있던 ‘왕왕.jpg’ 파일을 불러왔습니다.
참고로 이 강아지는 저희 집 강아지(왕건이, 15살)입니다.
그럼 이제 ‘회원가입으로 돌아가기’ 버튼을 눌러보도록 하겠습니다.
이렇게 정상적으로 등록되었다는 알람이 뜹니다. 확인 버튼을 누르면
이렇게 자동으로 추가해줍니다.
그럼, 프로필 사진을 보기 위해 회원가입을 해보겠습니다.
가입이 되었습니다.
(2) 마이페이지에 프로필 사진 띄우기
이제 로그인 후, 마이 페이지로 들어가 보겠습니다.
이렇게 귀여운 왕건이 사진이 등록되었습니다.
DB를 확인해 볼까요.
DB에서도 확인이 되었습니다.
(3) 회원리스트를 XML 형태로 처리
먼저, xml 파일을 보겠습니다.
이 파일을 불러와서 실행시키면!
ajax로 처리해서 테이블 안으로 넣는 부분을 잘 몰랐기에 이 부분에서 많은 시간을 할애했습니다.
(4)회원리스트를 JSON 형태로 처리
JSON 파일입니다.
[오류가 발생한 이유]
JSON 파일(JoinerJson.jsp)에서 공백처리를 해주지 않았기 때문에 오류가 발생했습니다.
따라서 JSON 파일에 공백을 없애주었습니다.
<%@ page trimDirectiveWhitespaces="true"%> 추가
[소스코드]
(1)회원가입 폼에 프로필 사진 첨부 폼 만들기
[PhotoGetForm.jsp] 사진첨부 폼입니다.
이 폼은 PhotoGetAct.jsp에서 데이터를 보냈다가 다시 데이터를 잡아와 selfClose() function으로 마무리합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String imgName = request.getParameter("imgName");
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>프로필 사진 업로드</title>
<style>
body {
margin: 0px;
background: #f5f6f7;
}
#containAll {
width: 768px;
margin: 0 auto;
margin-top: 10px;
}
#container {
width: 460px;
margin: 0 auto;
background: white;
border: 1px solid gray;
text-align: center;
padding: 20px;
}
#container>h1{
text-align:center;
color: #08a600;
font-size: 40px;
font-weight: bold;
margin-bottom: 20px;
}
input[type=button], input[type=submit]{
width: 100%;
height: 55px;
border: none;
font-size: 20px;
color: #fff;
background: rgb(31, 188, 2);
margin-top: 15px;
margin-bottom: 15px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="containAll">
<div id="container">
<h1>프로필 사진 업로드</h1>
<%if(imgName==null){ %>
<form action="PhotoGetAct.jsp" method="post" enctype="multipart/form-data">
<input type="file" name="photo" value=""><br>
<input type="submit" value="사진 등록">
</form>
<%}else{ %>
<img id="img" alt="사진" src="file/photo/<%=imgName%>" style="width:400px">
<input type="button" value="회원가입으로 돌아가기" onclick="selfClose()">
<%} %>
</div>
</div>
</body>
</html>
<script>
function selfClose(){
alert("사진이 정상적으로 등록되었습니다.");
opener.document.Regi.photo.value="file/photo/<%=imgName%>";
self.close();
}
</script>
| cs |
[PhotoGetAct.jsp] 사진 첨부를 처리하는 페이지입니다.
만약 imgName 값이 있다면 Parameter로 보내주고, imgName 값이 없다면 PhotoGetForm.jsp 파일로 다시 돌아갑니다. 참고로 FileNotFoundException 처리를 사용했습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<%@page import="java.io.FileNotFoundException"%>
<%@page import="java.io.File"%>
<%@page import="java.util.Iterator"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String imgName = "";
String dir = "";
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
try{
if(isMultipart){
//파일 보관 역할
DiskFileItemFactory factory = new DiskFileItemFactory();
//업로드 요청 처리 역할
ServletFileUpload upload = new ServletFileUpload(factory);
//업로드 요청 파싱
List<FileItem> items = upload.parseRequest(request);
Iterator<FileItem> iter = items.iterator();
while(iter.hasNext()){
FileItem item = iter.next();
//파일이 아니라면 이름이겠지요
if(!item.isFormField()){/*
String name = item.getFieldName();
String value = item.getString("utf-8");
System.out.println("일반 폼 필드 : " + name + " - " + value);
//파일이라면
}else{ */
String name = item.getFieldName();
String fileName = item.getName();
String contentType = item.getContentType();
boolean isInMemory = item.isInMemory();
long sizeInBytes = item.getSize();
System.out.println("파일 이름 : " + fileName);
//업로드한 파일 저장
imgName = fileName;
//웹 서비스에서 사용되는 저장 경로
String uploadUri ="file/photo";
//물리적 경로(실제 경로)
dir = request.getSession().getServletContext().getRealPath(uploadUri);
/* System.out.println(uploadUri +"의 물리적 경로 : " + dir); */
//데이터 저장 _ File 형태로 들어가야 한다
item.write(new File(dir, imgName));
}
}
}
}catch(FileNotFoundException e){
e.printStackTrace();
out.println("<script>");
out.println("alert('사진을 등록해주세요.')");
out.println("location.href='PhotoGetForm.jsp'");
out.println("</script>");
}
%>
<%if(imgName!=null){ %>
<script>
location.href="PhotoGetForm.jsp?imgName=<%=imgName%>";
</script>
<%}else{%>
<script>
alert("사진을 등록해주세요.");
location.href='PhotoGetForm.jsp';
</script>
<%}%>
| cs |
(2) 마이페이지에 프로필 사진 띄우기
[MyPageForm.jsp] 파일에 이 노란 줄들을 추가해주었습니다.
(3) 회원리스트를 XML 형태로 처리
[JoinerXml.jsp]
xml 파일입니다,.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<%@page import="LoginTask.model.Joiner"%>
<%@page import="java.util.List"%>
<%@page import="LoginTask.service.MemberListService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<?xml version="1.0" encoding="UTF-8"?>
<%
MemberListService memberListService = MemberListService.getInstance();
List<Joiner> viewMem = memberListService.getMemberList2();
%>
<%for (Joiner joiner : viewMem) {%>
<members>
<member>
<id><%=joiner.getId()%></id>
<pwd><%=joiner.getPwd()%></pwd>
<name><%=joiner.getName()%></name>
<birth><%=joiner.getBirth_year()%>/<%=joiner.getBirth_mon()%>/<%=joiner.getBirth_day()%></birth>
<gender><%=joiner.getGender()%></gender>
<email><%=joiner.getEmail()%></email>
<phone><%=joiner.getPhone()%></phone>
<photo><%=joiner.getPhoto()%></photo>
</member>
</members>
<%}%>
| cs |
[MemberAllPageXML.jsp]
xml을 ajax로 처리하는 페이지 입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<%@page import="LoginTask.model.Joiner"%>
<%@page import="LoginTask.model.MemberListView"%>
<%@page import="LoginTask.service.MemberListService"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.PreparedStatement"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:include page="index.jsp" flush="false" />
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/MemberAllPage.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MemberList Page</title>
<style>
</style>
</head>
<script>
$(document).ready(function(){
$.ajax({
url: 'JoinerXml.jsp',
success : function(data){
var html = '';
$(data).find('member').each(function(){
var id = $(this).find('id').text()
var pwd = $(this).find('pwd').text()
var name = $(this).find('name').text()
var birth = $(this).find('birth').text()
var gender = $(this).find('gender').text()
var email = $(this).find('email').text()
var phone = $(this).find('phone').text()
var photo = $(this).find('photo').text()
/* $('<p></p>').text(id+" / "+pwd+" / "+name+" / "+birth+" / "+gender+" / "+email+" / "+phone+" / "+photo).appendTo('#table'); */
html += '<tr>';
html += '<td>'+ id +'</td>';
html += '<td>'+ pwd +'</td>';
html += '<td>'+ name +'</td>';
html += '<td>'+ birth +'</td>';
html += '<td>'+ gender +'</td>';
html += '<td>'+ email +'</td>';
html += '<td>'+ phone +'</td>';
html += '<td>'+ photo +'</td>';
html += '</tr>';
});
$('#table').html(html);
}
});
});
</script>
<body>
<div id="containAll">
<div id="container">
<h1>모든 회원정보 보기</h1>
<table id="table">
<tr id="tr">
</tr>
</table>
<input type="button" value="홈으로 가기"
onclick="location.href='indexHome.jsp'" />
</div>
</div>
</body>
</html>
<jsp:include page="footer.jsp" flush="false" />
| cs |
(3) 회원리스트를 JSON 형태로 처리
[JoinerJson.jsp]
json 파일 입니다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<%@page import="LoginTask.model.Joiner"%>
<%@page import="java.util.List"%>
<%@page import="LoginTask.service.MemberListService"%>
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>[
<%
MemberListService memberListService = MemberListService.getInstance();
List<Joiner> viewMem = memberListService.getMemberList2();
int resultCnt = 0;
%>
<%
for (Joiner joiner : viewMem) {
String birth = joiner.getBirth_year() +"/"+ joiner.getBirth_mon() +"/"+ joiner.getBirth_day();
%>
{
"id" : "<%=joiner.getId()%>",
"pwd" : "<%=joiner.getPwd()%>",
"name" : "<%=joiner.getName()%>",
"birth" : "<%=birth%>",
"gender" : "<%=joiner.getGender()%>",
"email" : "<%=joiner.getEmail()%>",
"phone" : <%=joiner.getPhone()%>,
"photo" : "<%=joiner.getPhoto()%>"
}<%
resultCnt++;
if(resultCnt!=viewMem.size()){%>,<%}
}%>
]
<%-- "<%=joiner.getBirth_year()%>/<%=joiner.getBirth_mon()%>/<%=joiner.getBirth_day()%>" --%>
| cs |
[MemberAllPageJson.jsp]
Json 파일을 ajax로 처리하는 페이지입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:include page="index.jsp" flush="false" />
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/MemberAllPage.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MemberList Page</title>
<script>
$(document).ready(function(){
/* $.getJSON('JoinerJson.jsp', function(data){
alert('hey');
$.each(data, function(key, value){
var str = '<h1>' + value.name + '</h1>';
$('body').append(str);
});
}); */
//0.
$.getJSON('JoinerJson.jsp', function(data){
var html = '';
$.each(data, function(key,value){
html += '<tr>';
html += '<td>'+ value.id +'</td>';
html += '<td>'+ value.pwd +'</td>';
html += '<td>'+ value.name +'</td>';
html += '<td>'+ value.birth +'</td>';
html += '<td>'+ value.gender +'</td>';
html += '<td>'+ value.email +'</td>';
html += '<td>'+ value.phone +'</td>';
html += '<td>'+ value.photo +'</td>';
html += '</tr>';
});
$('#table').html(html);
});
});
</script>
</head>
<body>
<div id="containAll">
<div id="container">
<h1>모든 회원정보 보기</h1>
<table id="table">
<tr id="tr">
</tr>
</table>
<input type="button" value="홈으로 가기"
onclick="location.href='indexHome.jsp'" />
</div>
</div>
</body>
</html>
<jsp:include page="footer.jsp" flush="false" />
| cs |
댓글 없음:
댓글 쓰기