본문 바로가기
학습/JSP

26. 회원 가입, 회원 조회, 회원 수정, 회원 삭제

by Elfen Lied 2022. 11. 18.
반응형

- 메이븐 프로젝트로 변환하고

pom.xml에

lombok, jstl, ojdbc6, tomcat dbcp 깔기

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>pro17</groupId>
	<artifactId>pro17</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>

	<dependencies>
		<!-- lombok, jstlm ojdbc6, tomcat dbcp-->
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<version>1.18.24</version>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>

		<dependency>
			<groupId>com.oracle.database.jdbc</groupId>
			<artifactId>ojdbc6</artifactId>
			<version>11.2.0.4</version>
		</dependency>

		<dependency>
			<groupId>org.apache.tomcat</groupId>
			<artifactId>tomcat-dbcp</artifactId>
			<version>10.1.2</version>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>3.8.1</version>
				<configuration>
					<release>11</release>
				</configuration>
			</plugin>
			<plugin>
				<artifactId>maven-war-plugin</artifactId>
				<version>3.2.3</version>
			</plugin>
		</plugins>
	</build>
</project>

 

시작전 dependency가 적용 됐는지 테스트

- MemberDAO 클래스 생성

package sec01.ex01;

import java.sql.Connection;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;

public class MemberDAO {
	
	DataSource dataSource;
	
	public MemberDAO() throws SQLException {
		System.out.println("MemberDAO 생성");
		try {
			Context ctx = new InitialContext();
			Context envCtx = (Context) ctx.lookup("java:/comp/env");
			dataSource = (DataSource) envCtx.lookup("jdbc/oracle"); // 예외 던짐
			System.out.println("결과 : " + dataSource);
			Connection conn = dataSource.getConnection();
			System.out.println("커넥션 : " + conn);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

 

 

- MemberServlet 생성

package sec01.ex01;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/MemberServlet")
public class MemberServlet extends HttpServlet {
	
	@Override
	public void init() throws ServletException {
		System.out.println("MemberServlet 초기화");
		MemberDAO dao = new MemberDAO();
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}
	
	private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
	}

}

 

MemberServlet에서 실행하고 콘솔 확인

확인됐으면 System.out.print 코드들 다 삭제하기

 

여기서부터 실습 시작

- sql

  • 1. CREATE TABLE -> 2. CREATE SEQUENCE -> 3. INSERT INTO -> 4. SLEECT -> 5. COMMIT
-- 테이블 삭제
DROP TABLE T_MEMBER;

-- 회원테이블 생성
CREATE TABLE T_MEMBER(
    MNO INT PRIMARY KEY,
    ID VARCHAR2(50) NOT NULL UNIQUE,
    PWD VARCHAR2(100),
    NAME VARCHAR2(50),
    EMAIL VARCHAR2(200),
    JOINDATE DATE DEFAULT SYSDATE
);

-- PRIMARY KEY : 기본키
-- VARCHAR2(10) : 문자열 자료형, 길이10(영문10자, 한글3자)
-- DATE : 날짜 자료형,
-- DEFAULT SYSDATE : 날짜를 입력하지않으면 현재 시각으로 설정

-- 시퀀스
CREATE SEQUENCE MNO_SEQ;
DROP SEQUENCE MNO_SEQ;

INSERT INTO T_MEMBER(MNO, ID, PWD, NAME, EMAIL)
VALUES(MNO_SEQ.NEXTVAL, 'kim', '1212', '김범수', 'kim@gmail');
INSERT INTO T_MEMBER(MNO, ID, PWD, NAME, EMAIL)
VALUES(MNO_SEQ.NEXTVAL, 'na', '2345', '나얼', 'na@gmail');
INSERT INTO T_MEMBER(MNO, ID, PWD, NAME, EMAIL)
VALUES(MNO_SEQ.NEXTVAL, 'park', '6666', '박효신', 'park@gmail');

SELECT * FROM T_MEMBER;

-- 테이블의 모든 로우 개수
SELECT COUNT(*) FROM T_MEMBER;

-- id가 'park'이고 pwd가 '6666'인 로우의 개수
SELECT count(*) FROM T_MEMBER WHERE id='park' AND pwd='6666';

-- id가 'park' 또는 pwd가 '6666'인 로우
SELECT count(*) FROM T_MEMBER WHERE id='park' OR pwd='6666';

-- 별칭(alias)
SELECT count(*) AS 결과 FROM T_MEMBER WHERE id='park' AND pwd='6666';

-- 업데이트
SELECT * FROM T_MEMBER;
UPDATE T_MEMBER SET pwd='7777', name='박본좌', email='born@exam.com'
WHERE MNO=4;

COMMIT;

 

 

 

- MemberVO 생성

package sec01.ex01;

import java.sql.Date;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class MemberVO {
	private int mno;
	private String id;
	private String pwd;
	private String name;
	private String email;
	private Date joinDate;
	
	public MemberVO(String id, String pwd, String name, String email) {
		this.id = id;
		this.pwd = pwd;
		this.name = name;
		this.email = email;
	}
	
}

 

 

- MemberDAO 

package sec01.ex01;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;

public class MemberDAO {

	DataSource dataSource;

	public MemberDAO() {
		try {
			Context ctx = new InitialContext();
			Context envCtx = (Context) ctx.lookup("java:/comp/env");
			dataSource = (DataSource) envCtx.lookup("jdbc/oracle");
			Connection conn = dataSource.getConnection();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	// 회원목록
	public List<MemberVO> listMembers() {
		List<MemberVO> list = new ArrayList<>();
		String query = "SELECT * FROM T_MEMBER ORDER BY joinDate DESC";
		try (
			Connection conn = dataSource.getConnection();
			PreparedStatement pstmt = conn.prepareStatement(query);
			ResultSet rs = pstmt.executeQuery();
		){
			while (rs.next()) {
				MemberVO vo = new MemberVO(
						rs.getInt("mno"),
						rs.getString("id"),
						rs.getString("pwd"),
						rs.getString("name"),
						rs.getString("email"),
						rs.getDate("joinDate"));
				list.add(vo);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return list;
	}

	// 회원가입
	public void addMember(MemberVO vo) {
		String query = "INSERT INTO T_MEMBER(mno, id, pwd, name, email) VALUES(mno_seq.NEXTVAL,?,?,?,?)";
		try (
			Connection conn = dataSource.getConnection(); 
			PreparedStatement pstmt = conn.prepareStatement(query);
		) {
			pstmt.setString(1, vo.getId());
			pstmt.setString(2, vo.getPwd());
			pstmt.setString(3, vo.getName());
			pstmt.setString(4, vo.getEmail());
			pstmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	// 회원상세정보 (단하나의 회원정보만 가져옴)
	public MemberVO findMember(String id) {
		MemberVO vo = null;
		String query = "select * from t_member where id=?";
		try (
			Connection conn = dataSource.getConnection(); 
			PreparedStatement pstmt = conn.prepareStatement(query);
		){
			pstmt.setString(1, id);
			try (ResultSet rs = pstmt.executeQuery();){
				if(rs.next()) {
					vo = new MemberVO(
						rs.getInt("mno"), 
						rs.getString("id"), 
						rs.getString("pwd"), 
						rs.getString("name"),
						rs.getString("email"), 
						rs.getDate("joinDate"));
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return vo;
	}
	
	// 회원삭제
	public void delMember(int mno) {
		String query = "delete from t_member where mno=?";
		try (
			Connection conn = dataSource.getConnection(); 
			PreparedStatement pstmt = conn.prepareStatement(query);
		){
			pstmt.setInt(1, mno);
			pstmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		}
				
	}
	
	// 회원수정
	public void modMember(MemberVO vo) {
		String query = "update t_member set pwd=?, name=?, email=? where id=?";
		try (
			Connection conn = dataSource.getConnection(); 
			PreparedStatement pstmt = conn.prepareStatement(query);
		){
			pstmt.setString(1, vo.getPwd());
			pstmt.setString(2, vo.getName());
			pstmt.setString(3, vo.getEmail());
			pstmt.setString(4, vo.getId());
			pstmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		}
				
	}
	
}

 

 

- MemberServlet

package sec01.ex01;

import java.io.IOException;
import java.net.URLEncoder;
import java.util.List;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/member/*")
public class MemberServlet extends HttpServlet {
	
	private MemberDAO dao;
	
	@Override
	public void init() throws ServletException {
		dao = new MemberDAO();
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}
	
	private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String pathInfo = request.getPathInfo();
		final String PREFIX = "/WEB-INF/views/member/";
		final String SUFFIX = ".jsp";
		
		
		RequestDispatcher rd = null;
		String nextPage = null;
		
		if(pathInfo == null || pathInfo.equals("/") || pathInfo.equals("/list")) { // 회원목록
			List<MemberVO> listMembers = dao.listMembers();
			request.setAttribute("memberList", listMembers);
			nextPage = "memberList";
		} else if(pathInfo.equals("/joinForm")) { // 회원가입폼
			nextPage = "memberJoin";
		} else if(pathInfo.equals("/modifyForm")) { // 회원수정폼
			nextPage = "memberMod";
		} 
		
		else if(pathInfo.equals("/join")) { // 회원가입 처리
			String id = request.getParameter("id");
			String pwd = request.getParameter("pwd");
			String name = request.getParameter("name");
			String email = request.getParameter("email");
			MemberVO vo = new MemberVO(id, pwd, name, email);
			dao.addMember(vo);
			String message = URLEncoder.encode(name, "utf-8");
			response.sendRedirect(request.getContextPath() + "/member?msg=" + message);
			return;
		} else if(pathInfo.equals("/delMember")) {
			String paramMno = request.getParameter("mno");
			int mno = Integer.parseInt(paramMno);
			dao.delMember(mno);
			response.sendRedirect(request.getContextPath() + "/member");
			return;
		}
		
		else { // 404에러
			System.out.println("페이지를 찾을수 없음");
			return;
		}
		
		rd = request.getRequestDispatcher(PREFIX + nextPage + SUFFIX);
		rd.forward(request, response);
	}

}

 

 

- EncodingFilter 생성 - filter로 만들기

다른거 건들지말고 doFilter 부분만 코드 추가

package common;

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpFilter;

@WebFilter("/*")
public class EncodingFilter extends HttpFilter implements Filter {
       
    public EncodingFilter() {
        super();
    }

	public void destroy() {
	}

	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		request.setCharacterEncoding("utf-8");
		chain.doFilter(request, response);
	}

	public void init(FilterConfig fConfig) throws ServletException {
	}

}

 

 

- WEB-INF 폴더 안에 views / 폴더명 / 파일명.jsp 생성

  • 직접적으로 접근 못하게하고,
  • 서블릿을 한번 거쳐오게 하기위함.
  • forward로 맵핑 해줘야함

 

 

- memberList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>회원목록</h1>
	<c:if test="${not empty param.msg}">
		<h1>${param.msg}님이 회원가입함</h1>
	</c:if>
	<table border="1">
		<tr>
			<th>회원번호</th>
			<th>아이디</th>
			<th>비밀번호</th>
			<th>이름</th>
			<th>이메일</th>
			<th>가입일</th>
			<th>삭제</th>
		</tr>
		<c:choose>
			<c:when test="${empty memberList}">
				<tr>
					<td colspan="7">등록된 회원이 없습니다.</td>
				</tr>
				
			</c:when>
			<c:otherwise>
				<c:forEach items="${memberList}" var="m">
					<tr>
						<td>${m.mno}</td>
						<td>${m.id}</td>
						<td>${m.pwd}</td>
						<td>${m.name}</td>
						<td>${m.email}</td>
						<td>${m.joinDate}</td>
						<td><a href="${contextPath}/member/delMember?mno=${m.mno}">삭제</a></td>
					</tr>
				</c:forEach>
			</c:otherwise>
		</c:choose>
	</table>
</body>
</html>

 

 

- memberJoin.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>회원가입</h1>
	<form action="${contextPath}/member/join" method="post">
		아이디 : <input type="text" name="id"><br>
		비밀번호 : <input type="text" name="pwd"><br> 
		이름 : <input type="text" name="name"><br>
		이메일 : <input type="text" name="email"><br>
		<button>회원가입</button>
	</form>
</body>
</html>

 

 

- memberMod.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>
	<h1>회원정보수정</h1>
</body>
</html>

 

 

- webapp에 index.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<a href="${contextPath}/member/joinForm">회원가입</a><br>
	<a href="${contextPath}/member">회원목록</a><br>
</body>
</html>

 

 

- 폴더와 파일 추가

WEB-INF / layout폴더 생성 / header.jsp, footer.jsp 생성

webapp / resources / js / main.js

 

 

- main.js 생성

window.onload = function() {
	let joinMember = document.querySelector("#joinMember");
	let message = joinMember.value;
	if (message != '') {
		alert(message + '님이 회원가입 함');
	}
}

가입했을때 경고창으로 알려주는 코드이다

 

 

 

부트스트랩4 사용

- header.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
	<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
		<!-- Brand/logo -->
		<a class="navbar-brand" href="#">Logo</a>

		<!-- Links -->
		<ul class="navbar-nav">
			<li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
			<li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
			<li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
		</ul>
	</nav>

 

 

- footer.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div class="jumbotron">
	<h1>푸터 영역</h1>
</div>
</body>
</html>

 

 

 

header, footer 만든 뒤 member 폴더에 있는 jsp 파일들을 수정해준다.

상단과 하단에 <%@ include file="" %> 부분을 추가 해주면 됨

상단은 header, 하단은 footer를 넣는다.

 

 

- memberList.jsp 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp" %>

<c:if test="${not empty param.msg }">
	<c:set var="joinMember" value="${param.msg}" />
</c:if>
<script src="${contextPath}/resources/js/main.js"></script>

<div class="container">
	<h1>회원목록</h1>
	<%-- <c:if test="${not empty param.msg}">
		<h1>${param.msg}님이 회원가입함</h1>
	</c:if> --%>
	<input type="hidden" id="joinMember" value="${joinMember}">
	<table border="1">
	
		<tr>
			<th>회원번호</th>
			<th>아이디</th>
			<th>비밀번호</th>
			<th>이름</th>
			<th>이메일</th>
			<th>가입일</th>
			<th>삭제</th>
			<th>수정</th>
		</tr>
		
		<c:choose>
			<c:when test="${empty memberList}">
				<tr>
					<td colspan="8">등록된 회원이 없습니다.</td>
				</tr>
				
			</c:when>
			<c:otherwise>
				<c:forEach items="${memberList}" var="m">
					<tr>
						<td>${m.mno}</td>
						<td>${m.id}</td>
						<td>${m.pwd}</td>
						<td>${m.name}</td>
						<td>${m.email}</td>
						<td>${m.joinDate}</td>
						<td><a href="${contextPath}/member/delMember?mno=${m.mno}">삭제</a></td>
						<td><a href="${contextPath}/member/modifyForm?id=${m.id}">수정</a></td>
					</tr>
				</c:forEach>
			</c:otherwise>
		</c:choose>
		
	</table>
	<a href="${contextPath}">메인으로</a>
</div>
<%@ include file="../layout/footer.jsp" %>

 

 

- memberJoin.jsp 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp" %>
<div class="container">
	<h1>회원가입</h1>
	<form action="${contextPath}/member/join" method="post">
		아이디 : <input type="text" name="id"><br>
		비밀번호 : <input type="password" name="pwd"><br> 
		이름 : <input type="text" name="name"><br>
		이메일 : <input type="text" name="email"><br>
		<button>회원가입</button>
	</form>
	<a href="${contextPath}">메인으로</a>
</div>
<%@ include file="../layout/footer.jsp" %>

 

 

- memberMod.jsp 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp" %>
<div class="container">
	<c:set var="m" value="${memberInfo}" />
	<h1>회원정보수정</h1>
	<form action="${contextPath}/member/modify" method="post">
		아이디 : <input type="text" name="id" value="${m.id}" readonly="readonly"><br>
		비밀번호 : <input type="password" name="pwd" value="${m.pwd}"><br> 
		이름 : <input type="text" name="name" value="${m.name}"><br>
		이메일 : <input type="text" name="email" value="${m.email}"><br>
		<button>수정</button>
	</form>
	<a href="${contextPath}">메인으로</a>
</div>
<%@ include file="../layout/footer.jsp" %>

 

 

MemberServlet에서 실행해서 list 화면 요청

 

메인으로 클릭

 

 

회원가입 클릭

 

다시 메인으로 간뒤 회원목록 클릭

처음 화면으로 잘 불려오면 됨.

반응형
저작자표시

'학습 > JSP' 카테고리의 다른 글

28. 게시판(기본)  (0) 2022.11.25
27. JSTL - Core 태그 라이브러리 사용(2)  (0) 2022.11.24
25. JSTL - Core 태그 라이브러리 사용(1)  (0) 2022.11.18
24. 표현 언어(2)  (0) 2022.11.18
23. 표현 언어(1)  (0) 2022.11.17

관련글

댓글

티스토리툴바