이제 회원정보 수정하기만 구현하면 끝입니다.
총 4시간 안에 구현해야 하니 시간 체크에 신경쓰시면서 하시는 편이 좋을거 같네용
제시된 사항을 확인해보면 회원번호를 클릭하면 정보수정페이지로 이동해야 하고, 자바스크립트로 알림창을 띄우라고 하네요.
먼저, Dao에 요청받은 회원번호에 따른 값들을 가져오는 메서드를 추가해줍니다.
컨트롤러에 새로운 요청을 추가해주고,
[MemberViewCommend]
커맨드에서 요청을 처리합니다.
[MemberView.jsp]
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@page import="org.project.MemberDto"%>
<%@page import="org.project.Dao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
MemberDto member=(MemberDto)request.getAttribute("member");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Join</title>
<link rel="stylesheet" href="css/join.css" />
<script src="js/updateOk.js" defer></script>
</head>
<body>
<%@include file="header.jsp" %>
<div class="container">
<div class="inner-con">
<form action="updateOk.do" method="post" id="updateForm" >
<table>
<thead>
<tr>
<th colspan="2">홈쇼핑 회원 정보수정</th>
</tr>
</thead>
<tbody>
<tr>
<td><label for="custNo">회원번호(자동발생)</label></td>
<td><input type="hidden" name="custNo" id="custNo" value="<%=member.getCustNo() %>" />
<span><%=member.getCustNo() %></span>
</td>
</tr>
<tr>
<td><label for="custName">회원성명</label></td>
<td><input type="text" name="custName" id="custName" value="<%=member.getCustName() %>" /></td>
</tr>
<tr>
<td><label for="phone">회원전화</label></td>
<td><input type="text" name="phone" id="phone" value="<%=member.getPhone() %>" /></td>
</tr>
<tr>
<td><label for="address">회원주소</label></td>
<td><input type="text" name="address" id="address" value="<%=member.getAddress() %>"/></td>
</tr>
<tr>
<%
Date day1=member.getJoinDate();
SimpleDateFormat simp=new SimpleDateFormat("YYYYMMDD");
String day2=simp.format(day1);
%>
<td><label for="joinDate">가입일자</label></td>
<td><input type="text" name="joinDate" id="joinDate" value="<%=member.getJoinDate() %>" /></td>
</tr>
<tr>
<td><label for="grade">고객등급[A:VIP,B:일반,C:직원]</label></td>
<td>
<select name="grade" id="grade" >
<option value="" <%if(member.getGrade().equals("")){%>selected<%} %>>::선택::</option>
<option value="A" <%if(member.getGrade().equals("A")){%>selected<%} %>>VIP</option>
<option value="B" <%if(member.getGrade().equals("B")){%>selected<%} %>>일반</option>
<option value="C" <%if(member.getGrade().equals("C")){%>selected<%} %>>직원</option>
</select>
</td>
</tr>
<tr>
<td><label for="city">도시코드</label></td>
<td>
<select name="city" id="city">
<option value="" <%if(member.getCity().equals("")){%>selected<%} %>>::선택::</option>
<option value="01" <%if(member.getCity().equals("01")){%>selected<%} %>>서울</option>
<option value="30" <%if(member.getCity().equals("30")){%>selected<%} %>>울릉도</option>
<option value="60" <%if(member.getCity().equals("60")){%>selected<%} %>>제주도</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<input type="button" value="수정" id="updateOkBtn" class="td_last" />
<a href="memberListView.do" class="td_last">조회</a>
</td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
<%@include file="footer.jsp" %>
</body>
</html>회원수정은 구조가 회원가입과 똑같기 때문에 joinView.jsp를 복사해서 수정해주는게 좋습니다.
시험에는 시간제한도 있으니 시간을 효율적으로 사용하는게 중요하기 때문이죠
css도 회원가입껄 가져와서 그냥 썼습니다.
회원번호는 고유값이니 수정할 수 없고 다른 값들은 value를 통해서 넣어줍니다.
중간에 SimpleDateFormat은 사용해보려고 넣었으나 날짜가 이상하게 출력되서...ㅠㅠ사용하지 않았습니다. 무시하셔도 되는 코드입니다.
이제 Dao에 회원정보수정 메서드를 추가해줍니다.
[UpdateOkCommend]
커맨드도 만들어 주었습니다.
[updateOk.js]
/*updateOk.js*/
const updateForm=document.querySelector('#updateForm');
const custNo=document.querySelector('#custNo');
const custName=document.querySelector('#custName');
const phone=document.querySelector('#phone');
const address=document.querySelector('#address');
const joinDate=document.querySelector('#joinDate');
const grade=document.querySelector('#grade');
const city=document.querySelector('#city');
const updateOkBtn=document.querySelector('#updateOkBtn');
updateOkBtn.addEventListener('click', ()=>{
if(custNo==null || custNo.value=="" || custNo.value<=0) {
alert("회원번호가 입력되지 않았습니다.");
custNo.focus();
return false;
}
if(custName==null || custName.value=="" || custName.value<=0) {
alert("회원성명이 입력되지 않았습니다.");
custName.focus();
return false;
}
if(phone==null || phone.value=="" || phone.value<=0) {
alert("전화번호가 입력되지 않았습니다.");
phone.focus();
return false;
}
if(address==null || address.value=="" || address.value<=0) {
alert("주소가 입력되지 않았습니다.");
address.focus();
return false;
}
if(joinDate==null || joinDate.value=="" || joinDate.value<=0) {
alert("가입일자가 입력되지 않았습니다.");
joinDate.focus();
return false;
}
if(grade==null || grade.value=="" || grade.value<=0) {
alert("등급이 입력되지 않았습니다.");
grade.focus();
return false;
}
if(city==null || city.value=="" || city.value<=0) {
alert("도시코드가 입력되지 않았습니다.");
city.focus();
return false;
}
alert("회원정보수정이 완료 되었습니다.")
updateForm.submit();
});자바스크립트로 회원가입과 너무나도 똑같아서 그냥 복사해서 이름 몇개만 바꿔주면 됩니다.
updateForm이 submit되어서 updateOk.do로 오는 요청을 컨트롤러에 추가해주면 비로소 끝이 납니다!
하면 할 수록 파일이 많아져서 외워서 하려면 정말 힘듭니다..
반복을 통해 손에 익히고 잘 모르겠는건 검색하면서 개념을 익히는게 중요합니다.
코딩은 들인 시간만큼 결과가 나오는거 같아요
우리 모두 힘냅니당~ 아좌좌~
'[자기계발] > 자격증' 카테고리의 다른 글
| [과정평가형 정보처리기능사] 22년도 4회차 실기 합격! 후기😒 (0) | 2022.10.12 |
|---|---|
| [과정평가형 정보처리산업기사] 실기 예제 - 쇼핑몰 회원관리 프로그램(2) 회원목록조회 구현하기(ArrayList로 값 출력하기) (0) | 2022.08.19 |
| [과정평가형 정보처리산업기사] 실기 예제 - 쇼핑몰 회원관리 프로그램(1) 회원가입 구현하기(유효성 검사, 회원번호 자동생성) (0) | 2022.08.19 |
