Day54 - [JSP]정보수정 페이지 만들기
2021. 4. 30. 18:16ㆍJSP 공부
이번에는 이전 글 로그인에 이어서 정보수정 페이지를 만들어 볼 겁니다.
Day 54 - [JSP]로그인 페이지 만들기
이번에는 어제에 이어서, 회원가입 한 데이터를 가지고, 로그인 페이지를 만들어 볼 겁니다. rsorry.tistory.com/187 Day53 - [JSP] 회원가입 페이지 만들기 이번에는 JSP 에서 JDBC를 이용하고, 회원가입 하
rsorry.tistory.com
정보수정 페이지 만들기
만들기 전에, 흐름을 한번 생각해 봅시다.
회원가입을 하면, 해당 데이터가 데이터베이스 테이블에 저장이 되고, 그 데이터를 바탕으로 로그인이 완료되면, 마이페이지 같은 곳으로 이동이 됩니다.
마이페이지 에서, 정보수정을 누르면 기존에 있는 내 정보가 미리 입력이 되어 있고, 그걸 바꿔서 수정을 누르면, 데이터베이스에 저장된 값이 update(수정) 되면 되겠죠?
먼저, 아래와 같이, 기본 화면을 만들어 줍시다.
파일명 : login.welcome.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String id = (String)session.getAttribute("user_id");
String name = (String)session.getAttribute("user_name");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%=id %>(<%=name %>)님 안녕하세요
<a href="logout.jsp">로그아웃</a><br/>
<a href="getInfo.jsp">정보수정</a><br/>
<a href="delete_ok.jsp">회원탈퇴</a><br/>
</body>
</html>그러면 이제, 정보수정을 누르면, 데이터베이스에 있는 테이블을 id로 검색을 해서, 회원가입할 때, 입력했던 데이터를 가지고 화면에 나타날 수 있도록 해줄 겁니다.
파일명 : getInfo.jsp
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 정보수정 화면으로 가기전에
// 아이디 기준으로 회원정보를 조회해서 다음 화면으로 전달
String id = (String)session.getAttribute("user_id");
//DB연결에 필요한 변수 선언
String url = "jdbc:oracle:thin:@localhost:1521/XEPDB1";
String uid = "JSP";
String upw = "JSP";
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql = "select * from members where id = ?";
try{
// 드라이버 호출
Class.forName("oracle.jdbc.driver.OracleDriver");
// conn 생성
conn = DriverManager.getConnection(url, uid, upw);
// pstmt 생성
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, id);
// sql실행
rs = pstmt.executeQuery();
if(rs.next()){
id = rs.getString("id");
String name = rs.getString("name");
String phone1 = rs.getString("phone1");
String phone2 = rs.getString("phone2");
String phone3 = rs.getString("phone3");
String gender = rs.getString("gender");
// 포워드로 전달하기 위해
request.setAttribute("id", id);
request.setAttribute("name", name);
request.setAttribute("phone1", phone1);
request.setAttribute("phone2", phone2);
request.setAttribute("phone3", phone3);
request.setAttribute("gender", gender);
// 포워드 이동
request.getRequestDispatcher("update.jsp").forward(request, response);
} else{ // 세션이 만료된 경우
response.sendRedirect("login.jsp");
}
} catch(Exception e){
e.printStackTrace();
response.sendRedirect("login.jsp");
} finally{
try{
if(conn != null) conn.close();
if(pstmt != null) pstmt.close();
if(rs != null) rs.close();
} catch(Exception e){
e.printStackTrace();
}
}
%>그리고, getInfo에서 데이터베이스에 연결해 가져온 데이터를 다음 페이지로 넘겨주어야 겠죠?
request에 setAttribute를 이용해서 값을 저장하고, forward로 넘겨 줍니다.
그러면, update.jsp 에서는 넘어온 데이터를 꺼내서, 화면에 표시를 해주면 되겠죠?
화면에 표시 할 때, selected 와 checked 를 잘 사용해 주면 됩니다.
파일명 : update.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 이전화면에서 전달받은 데이터를 받습니다.
// 화면에 미리 보여지도록 처리를 하세요~
request.setCharacterEncoding("UTF-8");
String id = (String)request.getAttribute("id");
String name = (String)request.getAttribute("name");
String phone1 = (String)request.getAttribute("phone1");
String phone2 = (String)request.getAttribute("phone2");
String phone3 = (String)request.getAttribute("phone3");
String gender = (String)request.getAttribute("gender");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>정보 수정페이지</h2>
<form action="update_ok.jsp" method="post">
아이디:<input type="text" name="id" value="<%=id %>" readonly><br/>
비밀번호:<input type="password" name="pw"><br/>
이름:<input type="text" name="name" value="<%=name %>"><br/>
전화번호:
<select name="phone1">
<option <%=phone1.equals("010") ? "selected" : "" %>>010</option>
<option <%=phone1.equals("02") ? "selected" : "" %>>02</option>
<option <%=phone1.equals("031") ? "selected" : "" %>>031</option>
<option <%=phone1.equals("051") ? "selected" : "" %>>051</option>
</select>
- <input type="text" name="phone2" size="5" value="<%=phone2 %>">
- <input type="text" name="phone3" size="5" value="<%=phone3 %>">
<br/>
<% if(gender.equals("m")) { %>
<input type="radio" name="gender" value="m" checked>남자
<input type="radio" name="gender" value="f">여자
<% } else { %>
<input type="radio" name="gender" value="m">남자
<input type="radio" name="gender" value="f" checked>여자
<% } %>
<input type="submit" value="수정">
</form>
<hr/>
</body>
</html>이제, update.jsp 페이지에서 수정을 누르게 된다면 form에서 받은 값들을 데이터베이스에서 update(수정) 해주면 되는데요, 수정을 할 때는, id는 변경을 안 시킬 거니까, 빼고 해주면 됩니다.
파일명 : update_ok.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
1. 폼에서 넘어온 데이터를 각각 처리합니다.
2. SQL문을 이용해서 DB에 업데이트 작업.
3. executeUpdate() 성공시 1을 반환, 실패시 0을 반환
4. 업데이트가 성공하면 세션에 저장된 이름을 변경한 후에
update_success.jsp로 리다이렉트
업데이트에 실패하면, update_fail.jsp로 리다이렉트
*/
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String pw = request.getParameter("pw");
String name = request.getParameter("name");
String phone1 = request.getParameter("phone1");
String phone2 = request.getParameter("phone2");
String phone3 = request.getParameter("phone3");
String gender = request.getParameter("gender");
//DB연결에 필요한 변수 선언
String url = "jdbc:oracle:thin:@localhost:1521/XEPDB1";
String uid = "JSP";
String upw = "JSP";
Connection conn = null;
PreparedStatement pstmt = null;
String sql = "update members set pw = ?, name = ?, phone1 = ?, phone2 = ?, phone3 = ?, gender = ?"
+ "where id = ?";
try{
// 드라이버 호출
Class.forName("oracle.jdbc.driver.OracleDriver");
// conn 생성
conn = DriverManager.getConnection(url, uid, upw);
// pstmt 생성
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, pw);
pstmt.setString(2, name);
pstmt.setString(3, phone1);
pstmt.setString(4, phone2);
pstmt.setString(5, phone3);
pstmt.setString(6, gender);
pstmt.setString(7, id);
int result = pstmt.executeUpdate();
if(result == 1){
session.setAttribute("user_name", name);
response.sendRedirect("update_success.jsp");
} else{
response.sendRedirect("update_fail.jsp");
}
} catch(Exception e){
e.printStackTrace();
response.sendRedirect("update_fail.jsp");
} finally{
try{
if(conn != null) conn.close();
if(pstmt != null) pstmt.close();
} catch(Exception e){
e.printStackTrace();
}
}
%>이렇게, 회원정보 수정 페이지를 만드는 것을 해보았습니다.
고생하셨습니다.
다음글로 이어집니다.
Day54 - [JSP]회원탈퇴 구현하기
http://rsorry.tistory.com/189 Day54 - [JSP]정보수정 페이지 만들기 이번에는 이전 글 로그인에 이어서 정보수정 페이지를 만들어 볼 겁니다. http://rsorry.tistory.com/188 Day 54 - [JSP]로그인 페이지 만들..
rsorry.tistory.com
'JSP 공부' 카테고리의 다른 글
| Day55 - [JSP]DAO클래스와 VO클래스 (0) | 2021.05.03 |
|---|---|
| Day54 - [JSP]회원탈퇴 구현하기 (0) | 2021.04.30 |
| Day 54 - [JSP]로그인 페이지 만들기 (1) | 2021.04.30 |
| Day53 - [JSP]회원가입 페이지 만들기 (4) | 2021.04.29 |
| Day53 - [JSP]Action Tag (0) | 2021.04.29 |