20220729_Fri
팝업창 만들기
-코드입력
<%@ 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 type="text/javascript">
alert('회원가입이 완료되었습니다.');
location.href = 'memberList.me';/* 팝업창 닫으면 목록페이지로 이동하기 */
</script>
</head>
<body>
</body>
</html>-출력화면
--> 이후 디비에서 조회하여 제대로 입력되었는지 확인하기
회원상세조회하기
순서
1.페이지이동부터 만들기
2.데이터베이스 작업이 필요한지 판단하기
->회원의 모든 정보는 DB에 저장되어있다.
->이 화면을 상세조회해서 화면에 띄운다.
3.그렇다면, 쿼리부터 만들기.(상세조회 = select문)
1.회원상세페이지 이동하기.
- member_list.jsp 에서 기본키인 id값으로 페이지 이동 a 태그 만들기
<%@ 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>
<style type="text/css">
table{
width: 800px;
margin: 0 auto;
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
tr,td{
border: 1px solid black;
}
.container{
background-color: #94B49F;
color: #FCF8E8;
}
</style>
</head>
<body>
<form action="regMemberForm.me" method="post">
<table>
<tr class ="container">
<td>No</td>
<td>아이디</td>
<td>이름</td>
<td>이메일</td>
<td>연락처</td>
</tr>
<c:choose>
<c:when test="${memberList.size() eq 0 }">
<tr>
<td colspan ="5">조회된 데이터가 없습니다.</td>
</tr>
</c:when >
<c:otherwise>
<c:forEach var="member" items="${memberList}">
<tr>
<td></td>
<td><a href="detailMember.me?id=${member.id}">${member.id}</a></td>
<td>${member.name}</td>
<td>${member.email}</td>
<td>${member.tell}></td>
</tr>
</c:forEach>
</c:otherwise>
</c:choose>
</table>
<div>
<input style="background-color:#FCF8E8;" type="button"
value="회원가입" onclick="location.href='reg_member_form.jsp';">
</div>
</form>
</body>
</html>
-
memberController.java에서 if문 만들기
//회원상세보기 페이지이동 else if (command.equals("/detailMember.me")) { String id = request.getParameter("id"); MemberDTO result =memberDAO.selectMemberDetail(id); request.setAttribute("member", result); page= "detail_member.jsp"; }
- MemberDAO.java 클래스에서 상세회원조회 메소드 만들기
public MemberDTO selectMemberDetail(String id) {
MemberDTO result = new MemberDTO();//멤버dto가 담겨질 통 하나 만들기
sql ="SELECT ID"
+ ", PW"
+ ", NAME"
+ ", AGE"
+ ", EMAIL"
+ ", TELL"
+ ", GENDER "
+ "FROM MEMBER "
+ "WHERE ID = ?";
try {
conn = JDBCUtil.getConnection();
stmt = conn.prepareStatement(sql);
//?세팅설정
stmt.setString(1,id);
//쿼리실행
stmt.executeQuery();//디비에서 데이터 조회된다.
rs =stmt.executeQuery();//select 조회는 rs로 데이터 받아올수있다.
//리스트는 필요없다 -> 쿼리실행시 한줄만 나오기때문에!!
//하지만 데이터 매개변수 하나하나 담을 필요가 필요해서 memberDTO 한 개 필요하다.
// (전체가 쓸수있게 맨위에만들기)
// MemberDTO result = new MemberDTO();//멤버dto가 담겨질 통 하나 만들기
while (rs.next()) {
result.setId(rs.getString("ID"));//rs db에서 뺀 값"id"를 멤버dto의 rs안에 id값 넣는다.
result.setEmail(rs.getString("EMAIL"));
result.setGender(rs.getString("GENDER"));
result.setTell(rs.getString("TELL"));
result.setPw(rs.getString("PW"));
result.setName(rs.getString("NAME"));
}//결국 디비에서 빼낸 모든 값들을 result가 담고있다!!!
//그래서 마지막 리턴시켜야한다.
} catch (Exception e) {
e.printStackTrace();
}finally {
JDBCUtil.close(rs, stmt, conn);
}
return result;//리턴값으로 던져줘야함.
}- detail_member.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> </head> <body> 아이디: ${member.id}<br> 비밀번호 :${member.pw}<br> 이름 :${member.name}<br> 나이 :${member.age}<br> 이메일 :${member.email}<br> 연락처 :${member.tell}<br> 성별 :${member.gender}<br> <input type="button" value="삭제" > </body> </html>
회원상세정보조회에서 해당회원 정보삭제하기
-상세정보페이지에서 삭제페이지이동은 목록으로 가면되니 페이지만들 필요없다.
-detail_member.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>
</head>
<body>
아이디: ${member.id}<br>
비밀번호 :${member.pw}<br>
이름 :${member.name}<br>
나이 :${member.age}<br>
이메일 :${member.email}<br>
연락처 :${member.tell}<br>
성별 :${member.gender}<br>
<input type="button" value="삭제" onclick="location.href='deleteMember.me?id=${member.id}';">
</body>
</html>
-삭제하려면 디비정보를 건드려야하니 데이터베이스와 연결되어있다->쿼리사용해야한다
-반복문,list 필요없다. 반복할 데이터 필요x 여러개x
-마지막 '삭제되었습니다.' 팝업창 띄우고 목록페이지로 이동하기.
-delete_member.jsp 파일 만들기<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
상세보기화면에 수정버튼 만들기
수정내용은 나이 이메일 연락처 세개만 수정할 수 있도록 만든다.
'수정되었습니다.'라는 alert() 창을 띄웁니다.
상세페이지로 이동한다.
1.상세보기 페이지에서 수정버튼 누르고 페이지 이동하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
아이디: {member.pw}
이름 :{member.age}
이메일 :{member.tell}
성별 :{member.id}';">
Dev.Vinch