회원 가입과 로그인 했으면 회원 정보를 수정하고 삭제를 해야하는 기능도 있어야한다.
회원 수정은 회원가입 폼과 똑같지만, 로그인한 사람의 정보를 DB에서 가져오는 것이 필요하다. 그래서 회원수정페이지에 select 쿼리문을 작성해서 연결해줄것이다. 그리고 값을 전송해주는 기능이 있으면 수정은 끝!
회원 삭제는 회원의 정보를 DB에서 삭제해주면 끝이다. 그래서 보여지는 페이지는 따로 없이 처리구현페이지만 만들었다.
1. 회원 수정 페이지 만들기 - updateMember.jsp
회원 가입 폼을 복사해서 폼은 일정하다.
가입할 때 작성한 내용을 보여줘야 하기 때문에 로그인한 아이디를 sessionId에 저장해주고, 쿼리문을 작성해서
id에 해당하는 정보를 가져와서 각각에 해당하는 값을 value="${}"로 넣어준다.
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<!DOCTYPE html><html><head><meta charset="UTF-8">
<title>회원 수정</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<%
String sessionId=(String)session.getAttribute("sessionId");
%>
<sql:setDataSource var="dataSource"
url="jdbc:mysql://localhost:3306/board"
driver="com.mysql.jdbc.Driver" user="root" password="1234"/>
<sql:query dataSource="${dataSource}" var="resultSet">
select * from member where id=?
<sql:param value="<%=sessionId %>"/>
</sql:query>
</head>
<body>
<jsp:include page="menu.jsp"/>
<div class="jumbotron">
<div class="container">
<h1 class="display-3">회원 수정</h1>
</div>
</div>
<c:forEach var="row" items="${resultSet.rows}">
<%-- 생일나누기 --%>
<c:set var="birth" value="${row.birth}"/>
<c:set var="birthyy" value="${birth.split('/')[0]}"/>
<c:set var="birthmm" value="${birth.split('/')[1]}"/>
<c:set var="birthdd" value="${birth.split('/')[2]}"/>
<%-- 메일나누기 --%>
<c:set var="mail" value="${row.mail}"/>
<c:set var="mail1" value="${mail.split('@')[0]}"/>
<c:set var="mail2" value="${mail.split('@')[1]}"/>
<%-- 전화번호나누기 --%>
<c:set var="phone" value="${row.phone}"/>
<c:set var="phone1" value="${phone.split('-')[0]}"/>
<c:set var="phone2" value="${phone.split('-')[1]}"/>
<c:set var="phone3" value="${phone.split('-')[2]}"/>
<div class="container">
<form action="processUpdateMember.jsp" class="form-horizontal" method="post">
<div class="form-group row">
<label class="col-sm-2">아이디</label>
<div class="col-sm-3">
<input name="id" class="form-group" placeholder="ID" value="${row.id}" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">비밀번호</label>
<div class="col-sm-3">
<input type="password" name="password" class="form-group" placeholder="PASSWORD" value="${row.password}" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">이름</label>
<div class="col-sm-3">
<input name="name" class="form-group" placeholder="NAME" value="${row.name}" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">성별</label>
<div class="form-check form-check-inline">
<c:set var="gender" value="${row.gender}"/>
<input type="radio" value="남자" name="gender" class="form-check-input"
<c:if test="${gender.equals('남자')}"><c:out value="checked"/></c:if>>
<label class="from-check-label">남자</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" value="여자" name="gender" class="form-check-input"
<c:if test="${gender.equals('여자')}"><c:out value="checked"/></c:if>>
<label class="from-check-label">여자</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">생일</label>
<div class="col-sm-3">
<input name="birthhyy" maxlength="4" size="6" class="form-group" placeholder="년(4자)" value="${birthyy}" required>
<input name="birthhmm" maxlength="2" size="4" class="form-group" placeholder="월" value="${birthmm}" required>
<input name="birthhdd" maxlength="2" size="4" class="form-group" placeholder="일" value="${birthdd}" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">이메일</label>
<div class="col-sm-10">
<input name="mail1" maxlength="50" value="${mail1}" required>@
<select name="mail2">
<option value="naver.com" <c:if test="${mail2.equals('naver.com')}"><c:out value="selected"/></c:if>>naver.com</option>
<option value="daum.net" <c:if test="${mail2.equals('daum.net')}"><c:out value="selected"/></c:if>>daum.net</option>
<option value="gmail.com" <c:if test="${mail2.equals('gamil.com')}"><c:out value="selected"/></c:if>>gmail.com</option>
<option value="nate.com" <c:if test="${mail2.equals('nate.com')}"><c:out value="selected"/></c:if>>nate.com</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">전화번호</label>
<div class="col-sm-5">
<select name="phone1" required>
<option value="010" <c:if test="${mail2.equals('010')}"><c:out value="selected"/></c:if>>010</option>
<option value="011" <c:if test="${mail2.equals('011')}"><c:out value="selected"/></c:if>>011</option>
<option value="016" <c:if test="${mail2.equals('016')}"><c:out value="selected"/></c:if>>016</option>
<option value="017" <c:if test="${mail2.equals('017')}"><c:out value="selected"/></c:if>>017</option>
<option value="019" <c:if test="${mail2.equals('019')}"><c:out value="selected"/></c:if>>019</option>
</select>
-<input name="phone2" maxlength="4" size="4" value="${phone2}" required>
-<input name="phone3" maxlength="4" size="4" value="${phone3}" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">우편번호</label>
<div class="col-sm-3">
<input name="zipcode" class="from-control" placeholder="우편번호" value="${row.zipcode}">
<input type="button" onclick="Postcode()" value="우편번호 찾기"><br>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">도로명주소</label>
<div class="col-sm-3">
<input name="roadAddress" class="from-control" placeholder="도로명주소" value="${row.roadAddress}">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">지번주소</label>
<div class="col-sm-3">
<input name="jibunAddress" class="from-control" placeholder="지번주소" value="${row.jibunAddress}">
</div>
</div>
<span id="guide" style="color:#999;display:none"></span>
<div class="form-group row">
<label class="col-sm-2">상세주소</label>
<div class="col-sm-3">
<input name="detailAddress" class="from-control" placeholder="상세주소" value="${row.detailAddress}">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">참고항목</label>
<div class="col-sm-3">
<input name="extraAddress" class="from-control" placeholder="참고항목" value="${row.extraAddress}">
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-primary" value="수정">
<input type="reset" class="btn btn-warning" value="취소">
<a href="deleteMember.jsp" class="btn btn-secondary" role="button">회원삭제</a>
</div>
</div>
</form>
</div>
</c:forEach>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
//본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.
function Postcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var roadAddr = data.roadAddress; // 도로명 주소 변수
var extraRoadAddr = ''; // 참고 항목 변수
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraRoadAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraRoadAddr !== ''){
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('zipcode').value = data.zonecode;
document.getElementById("roadAddress").value = roadAddr;
document.getElementById("jibunAddress").value = data.jibunAddress;
// 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
if(roadAddr !== ''){
document.getElementById("extraAddress").value = extraRoadAddr;
} else {
document.getElementById("extraAddress").value = '';
}
var guideTextBox = document.getElementById("guide");
// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
if(data.autoRoadAddress) {
var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
guideTextBox.style.display = 'block';
} else if(data.autoJibunAddress) {
var expJibunAddr = data.autoJibunAddress;
guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
guideTextBox.style.display = 'block';
} else {
guideTextBox.innerHTML = '';
guideTextBox.style.display = 'none';
}
}
}).open();
}
</script>
</body>
</html>
여기서 오류가 엄청 났었다.
1. 12월 23, 2021 8:21:05 오후 org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: 경로 [/board]의 컨텍스트 내의 서블릿 [jsp]을(를) 위한 Servlet.service() 호출이, 근본 원인(root cause)과 함께, 예외 [/updateMember.jsp (행: [30], 열: [0]) [${birth.split('/'[0]}]이(가) 유효하지 않은 표현식(들)을 포함하고 있습니다: [javax.el.ELException: Failed to parse the expression [${birth.split('/'[0]}]]]을(를) 발생시켰습니다.
org.apache.jasper.JasperException: /updateMember.jsp (행: [30], 열: [0]) [${birth.split('/'[0]}]이(가) 유효하지 않은 표현식(들)을 포함하고 있습니다: [javax.el.ELException: Failed to parse the expression [${birth.split('/'[0]}]]
-----> 오타 조심 birth.split('/'[0]
split() 함수 괄호로 안닫아줘서 난 오류..ㅎ
2. 12월 23, 2021 8:22:58 오후 org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: 경로 [/board]의 컨텍스트 내의 서블릿 [jsp]을(를) 위한 Servlet.service() 호출이, 근본 원인(root cause)과 함께, 예외 [<h3>[/updateMember.jsp] 내의 [c]을(를) 위한 TagLibraryValidator로부터 Validation 오류 메시지들</h3><p>18: Invalid use of "param" tag outside legitimate parent tag</p>]을(를) 발생시켰습니다.
org.apache.jasper.JasperException: <h3>[/updateMember.jsp] 내의 [c]을(를) 위한 TagLibraryValidator로부터 Validation 오류 메시지들</h3><p>18: Invalid use of "param" tag outside legitimate parent tag</p>
-----> <% %> %> 중복으로 오류남
3. 12월 23, 2021 8:24:01 오후 org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: 경로 [/board]의 컨텍스트 내의 서블릿 [jsp]을(를) 위한 Servlet.service() 호출이, 근본 원인(root cause)과 함께, 예외 [/updateMember.jsp (행: [16], 열: [0]) 해당 TLD 또는 태그 파일에 의하면, 속성 [name]은(는) 태그 [param]에 필수 사항입니다.]을(를) 발생시켰습니다.
org.apache.jasper.JasperException: /updateMember.jsp (행: [16], 열: [0]) 해당 TLD 또는 태그 파일에 의하면, 속성 [name]은(는) 태그 [param]에 필수 사항입니다.
-----> mysql연결해주는데 <c:param name=""/>을 써서 오류가 났다. <sql:param value=""/>을 쓰자!
4. 12월 23, 2021 8:24:27 오후 org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: 경로 [/board]의 컨텍스트 내의 서블릿 [jsp]을(를) 위한 Servlet.service() 호출이, 근본 원인(root cause)과 함께, 예외 [javax.servlet.ServletException: javax.servlet.jsp.JspException:
select * from member id=?
: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '='hong'' at line 1]을(를) 발생시켰습니다.
java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '='hong'' at line 1
-----> 간단한 sql문에서 오타 select * from member id=? (where을 빼놓고 썼다.)
5. 12월 23, 2021 8:24:58 오후 org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: 경로 [/board]의 컨텍스트 내의 서블릿 [jsp]을(를) 위한 Servlet.service() 호출이, 근본 원인(root cause)과 함께, 예외 [행 [68]에서 [/updateMember.jsp]을(를) 처리하는 중 예외 발생
65: <div class="form-check form-check-inline">
66: <c:set var="gender" value="${row.gender}"/>
67: <input type="radio" value="남자" name="gender" class="form-check-input"
68: <c:if test="${gender.equlas('남자')}"><c:out value="checked"/></c:if>>
69: <label class="from-check-label">남자</label>
70: </div>
71: <div class="form-check form-check-inline">
Stacktrace:]을(를) 발생시켰습니다.
javax.el.MethodNotFoundException: 메소드를 찾을 수 없습니다: class java.lang.String.equlas(java.lang.String)
-----> 68행 보면 equals오타가 났다.
결과보기
정보가 잘 넘어왔고 수정도 잘 된다!
2. 수정한 정보 업데이트하기 - processUpdateMember.jsp
회원가입프로세스랑 거의 똑같다.
<%@page import="java.util.Date"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String password = request.getParameter("password");
String name = request.getParameter("name");
String gender = request.getParameter("gender");
String year = request.getParameter("birthhyy");
String month = request.getParameter("birthhmm");
String day = request.getParameter("birthhdd");
String birth = year+"/"+month+"/"+day;
String mail1 = request.getParameter("mail1");
String mail2 = request.getParameter("mail2");
String mail = mail1+"@"+mail2;
String phone1 = request.getParameter("phone1");
String phone2 = request.getParameter("phone2");
String phone3 = request.getParameter("phone3");
String phone = phone1+"-"+phone2+"-"+phone3;
String zipcode = request.getParameter("zipcode");
String roadAddress = request.getParameter("roadAddress");
String jibunAddress = request.getParameter("jibunAddress");
String detailAddress = request.getParameter("detailAddress");
String extraAddress = request.getParameter("extraAddress");
/* 회원 가입일자 타임스템프 정보 생성 */
/* JDBC에서 날짜시간타입은 Timestamp이므로 Date타입 변환 */
Date currentDatetime = new Date(System.currentTimeMillis());
java.sql.Date sqlDate = new java.sql.Date(currentDatetime.getTime());//long 타입의 값의 매개변수 생성
java.sql.Timestamp timestamp = new java.sql.Timestamp(currentDatetime.getTime());
%>
<%-- 데이터 셋 설정(DB연결) --%>
<sql:setDataSource var="dataSource"
url="jdbc:mysql://localhost:3306/board"
driver="com.mysql.jdbc.Driver" user="root" password="1234"/>
<%-- 입력처리 --%>
<sql:update dataSource="${dataSource}" var="resultSet">
update member set password=?, name=?, gender=?, birth=?, mail=?, phone=?, zipcode=?, roadAddress=?,
jibunAddress=?, detailAddress=?, extraAddress=? where id=?
<sql:param value="<%=password %>"/>
<sql:param value="<%=name %>"/>
<sql:param value="<%=gender %>"/>
<sql:param value="<%=birth %>"/>
<sql:param value="<%=mail %>"/>
<sql:param value="<%=phone %>"/>
<sql:param value="<%=zipcode %>"/>
<sql:param value="<%=roadAddress %>"/>
<sql:param value="<%=jibunAddress %>"/>
<sql:param value="<%=detailAddress %>"/>
<sql:param value="<%=extraAddress %>"/>
<sql:param value="<%=id %>"/>
</sql:update>
<%-- 입력 후 페이지 이동 처리, response.sendRedirect --%>
<c:if test="${resultSet>=1 }">
<c:redirect url="resultMember.jsp?msg=0"/>
</c:if>
3. 회원 삭제하기 - deleteMember.jsp
파라미터를 통해 sessionId를 받아와서 DB와 연동해서 아이디에 해당하는 정보를 삭제해준다.
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%
String sessionId = (String)session.getAttribute("sessionId");
%>
<sql:setDataSource var="dataSource"
url="jdbc:mysql://localhost:3306/board"
driver="com.mysql.jdbc.Driver" user="root" password="1234"/>
<sql:update dataSource="${dataSource}" var="resultSet">
delete from member where id=?
<sql:param value="<%=sessionId %>"/>
</sql:update>
<c:if test="${resultSet>=1 }">
<c:import var="url" url="logoutMember.jsp"/><%-- 회원삭제시 자동 로그아웃하기--%>
<c:redirect url="resultMember.jsp?msg=3"/>
</c:if>
1. 12월 23, 2021 9:01:21 오후 org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: 경로 [/board]의 컨텍스트 내의 서블릿 [jsp]을(를) 위한 Servlet.service() 호출이, 근본 원인(root cause)과 함께, 예외 [/deleteMember.jsp (행: [11], 열: [52]) 등호("=")가 요구됩니다.]을(를) 발생시켰습니다.
org.apache.jasper.JasperException: /deleteMember.jsp (행: [11], 열: [52]) 등호("=")가 요구됩니다.
------> <sql:update dataSource="${dataSource} var="resultSet"> ${dataSource}에서 큰 따옴표로 잘 닫아주자.
- 로그인, 회원가입, 수정, 삭제 시 나오는 화면 구현하기
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html><html><head><meta charset="UTF-8">
<title>회원 정보</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<jsp:include page="menu.jsp"/>
<div class="jumbotron">
<div class="container">
<h1 class="display-3">회원 정보</h1>
</div>
</div>
<div class="text-center">
<%
String msg = request.getParameter("msg");
if(msg!=null){
if(msg.equals("0"))
out.print("<h2 class='alert alert-primary'>회원 정보가 수정되었습니다.</h2>");
else if(msg.equals("1"))
out.print("<h2 class='alert alert-success'>회원가입을 축하드립니다.</h2>");
else if(msg.equals("2")){
String loginId = (String)session.getAttribute("sessionId");
out.print("<h2 class='alert alert-info'>"+loginId+"님 환영합니다.</h2>");
}else if(msg.equals("3"))
out.print("<h2 class='alert alert-secondary'>회원 정보가 삭제되었습니다.</h2>");
}
%>
</div>
</body>
</html>
회원 가입 후 보이는 화면
로그인 후 보이는 화면
아이디도 잘 가져온다.
- 사이트 홈페이지 구현하기
뭐 한게 아무것도 없지만 일단 기본화면을 만들었다.
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html><html><head><meta charset="UTF-8">
<title>Welcome</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<jsp:include page="menu.jsp"/>
<%
String greeting = "Welcome to my Site";
String tagline = "Good to see you!";
%>
<div class="jumbotron">
<div class="container">
<h1 class="display-3"><%=greeting %></h1>
</div>
</div>
<div class="container">
<div class="text-center">
<h3><%=tagline %></h3>
<%= new java.util.Date().toLocaleString() %>
</div>
<div class="text-center">
<jsp:include page="visitCount.jsp"/>
</div>
</div>
<hr>
<jsp:include page="footer.jsp"/>
</body>
</html>
....이렇게 보니 정말 뭐가 없네..
그래도 오늘은 여기까지.
오타 오류랑 태그 사용에서 오류가 많았는데 오타는 더 신경써야겠다.
그리고 태그 사용에서 오류는 기본개념을 더 공부해야한다는 소리다..
모르거나 헷갈리는 것들은 찾아보면서 정리해야겠다.
다음번에는 유효성 검사를 해야겠다.
벨로그? 난 켈로그