[JSP/Servlet] DB와 연동해 회원가입/회원 리스트 페이지 만들기

Yun zzin·2022년 2월 2일
jsp
0

JSP

목록 보기
6/6
  • db와 연동해 Servlet을 이용한 회원가입/회원 리스트를 만들어보자!

JSP(view)

  1. Memberjoin.jsp : 회원가입 페이지
  2. MemberList.jsp : 회원목록 페이지
  3. LoginError.jsp : 회원가입 에러 페이지

Java(model)

  1. ModelBean.java : DTO - getter, setter
  2. ModelDAO.java : DAO - db 연동, 핵심 메소드 작성

Servlet(Controller)

  1. joinProc.java : 회원가입을 처리
  2. MemberListLoc.java : 전체 회원 리스트를 처리

구현 목표

  • 회원가입 폼
  • 회원 리스트

SQL 작성(Oracle)

  • 회원정보를 저장할 DB Table 만들기.
CREATE TABLE SYS.MEMBER_PRAC(
	ID VARCHAR(30) PRIMARY KEY,
	PASS1 VARCHAR(20),
	EMAIL VARCHAR(30),
	TEL VARCHAR(20),
	HOBBY VARCHAR(20),
	JOB VARCHAR(20),
	AGE VARCHAR(10),
	INFO VARCHAR(500)
)
  • 결과 (SELECT * FROM SYS.MEMBER_PRAC)

model/ModelBean.java

  • DTO 작성(db와 java 데이터 교환)
package model;

public class ModelBean {
	private String id;
	private String pass1;
	private String email;
	private String tel;
	private String hobby;
	private String job;
	private String age;
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPass1() {
		return pass1;
	}
	public void setPass1(String pass1) {
		this.pass1 = pass1;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getTel() {
		return tel;
	}
	public void setTel(String tel) {
		this.tel = tel;
	}
	public String getHobby() {
		return hobby;
	}
	public void setHobby(String hobby) {
		this.hobby = hobby;
	}
	public String getJob() {
		return job;
	}
	public void setJob(String job) {
		this.job = job;
	}
	public String getAge() {
		return age;
	}
	public void setAge(String age) {
		this.age = age;
	}
	public String getInfo() {
		return info;
	}
	public void setInfo(String info) {
		this.info = info;
	}
	private String info;
}

model/ModelDAO.java

  • Connection Pool을 이용한 DB 연동 메소드 작성
    Connection Pool 사용법
  • db에 사용자가 입력한 데이터를 추가할 MemberInsert() 메소드 작성
  • 회원가입한 모든 사용자 정보를 나타낼 getAllList() 메소드 작성
package model;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;

public class ModelDAO {
	PreparedStatement pstmt;
	ResultSet rs;
	Connection con;
	
	public void getCon() {
		//db연동코드, Connection Pool 사용
		try {
			Context initctx = new InitialContext();
			Context envctx = (Context) initctx.lookup("java:comp/env");
			DataSource dsc = (DataSource) envctx.lookup("jdbc/pool");
			con = dsc.getConnection();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}//getCon end
	public void MemberInsert(ModelBean bean) {
		getCon();
		try {  //sql문
			String sql = "insert into MEMBER_PRAC values(?,?,?,?,?,?,?,?)";
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, bean.getId());
			pstmt.setString(2, bean.getPass1());
			pstmt.setString(3, bean.getEmail());
			pstmt.setString(4, bean.getTel());
			pstmt.setString(5, bean.getHobby());
			pstmt.setString(6, bean.getJob());
			pstmt.setString(7, bean.getAge());
			pstmt.setString(8, bean.getInfo());
			pstmt.executeUpdate();
			con.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}//MemberInsert end
	public ArrayList<ModelBean> getAllList(){
		ArrayList<ModelBean> list = new ArrayList<>();
		getCon();
		try { //sql문
			String sql = "select * from MEMBER_PRAC";
			pstmt = con.prepareStatement(sql);
			rs = pstmt.executeQuery();
			while(rs.next()) {
				ModelBean bean = new ModelBean();
				bean.setId(rs.getString(1));
				bean.setPass1(rs.getString(2));
				bean.setEmail(rs.getString(3));
				bean.setTel(rs.getString(4));
				bean.setHobby(rs.getString(5));
				bean.setJob(rs.getString(6));
				bean.setAge(rs.getString(7));
				bean.setInfo(rs.getString(8));
				list.add(bean);
			}
			con.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return list;
	}
}

controller/JoinProc.java

  • 회원가입을 처리.
  • 회원가입때 입력한 패스워드1, 패스워드2 확인이 맞으면 회원가입
package controller;

import java.io.IOException;
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;
import model.ModelBean;
import model.ModelDAO;

@WebServlet("/JoinProc")
public class JoinProc extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doReq(request, response);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doReq(request, response);
	}	
	protected void doReq(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("UTF-8");
		ModelBean bean = new ModelBean();
		ModelDAO mdao = new ModelDAO();
		//폼에 입력한 정보를 갖고옴.

		bean.setId(request.getParameter("id"));
  		//패스워드, 패스워드확인을 비교하기 위해 변수에 저장.
		String pass1 = request.getParameter("password");
		String pass2 = request.getParameter("password2");
		bean.setPass1(pass1);
		bean.setEmail(request.getParameter("email"));
		bean.setTel(request.getParameter("tel"));
		//hobby는 여러개의 값이라서 배열로 갖고옴.
		String[] hobbies = request.getParameterValues("hobby");
		String item = "";
		for(int i=0;i<hobbies.length;i++) {
			item += hobbies[i]+" "; //하나의 스트링으로 데이터 연결
		}
		bean.setHobby(item);
		bean.setJob(request.getParameter("job"));
		bean.setAge(request.getParameter("age"));
		bean.setInfo(request.getParameter("info"));
		
		if(pass1.equals(pass2)) { //패스워드, 패스워드 확인이 일치할 경우
			mdao.MemberInsert(bean);
			//컨트롤러에서 또다른 컨트롤러를 호출
			RequestDispatcher rdis = request.getRequestDispatcher("MemberListLoc");
			rdis.forward(request, response);
		}else {
			RequestDispatcher rdis = request.getRequestDispatcher("LoginError.jsp");
			rdis.forward(request, response);
	
		}
	}
}

controller/MemberListLoc.java

  • 전체 회원 리스트를 처리
package controller;

import java.io.IOException;
import java.util.ArrayList;
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;
import model.ModelBean;
import model.ModelDAO;

@WebServlet("/MemberListLoc")
public class MemberListLoc extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doReq(request, response);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doReq(request, response);
	}	
	protected void doReq(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//여기서 리스트에 띄어줄 DAO 호출
		ModelDAO mdao = new ModelDAO();
		//MemberList.jsp로 보낼 list를 셋팅해줌.
		ArrayList<ModelBean> list = mdao.getAllList();
		request.setAttribute("list", list);
		RequestDispatcher rdis= request.getRequestDispatcher("MemberList.jsp");
		rdis.forward(request, response);
	}
}

Memberjoin.jsp

  • 회원가입 입력 폼
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h2>회원가입</h2>
<form method="post" action="JoinProc">
<table border="1">
	<tr height="50">
		<td width="150" align="center">아이디</td>
		<td width="250"  align="center"><input type="text" name="id"></td>
	</tr>
		<tr height="50">
			<td width="150" align="center">패스워드</td>
			<td width="250"  align="center"><input type="password" name="password"></td>
	</tr>
		<tr height="50">
			<td width="150" align="center">패스워드확인</td>
			<td width="250"  align="center"><input type="password" name="password2"></td>
	</tr>
		<tr height="50">
			<td width="150" align="center">이메일</td>
			<td width="200"  align="center"><input type="email" name="email"></td>
	</tr>
		<tr height="50">
			<td width="150" align="center">전화번호</td>
			<td width="250"  align="center"><input type="tel" name="tel"></td>
	</tr>
		<tr height="50">
			<td width="150" align="center">관심 분야</td>
			<td width="250"  align="center">
				<input type="checkbox" name="hobby" value="음악">음악
				<input type="checkbox" name="hobby" value="코딩">코딩
				<input type="checkbox" name="hobby" value="영화">영화
				<input type="checkbox" name="hobby" value="독서">독서</td>
			</tr>
		<tr height="50">
			<td width="150" align="center">직업
			<td width="250"  align="center">
		<select name="job">
			<option value="학생">학생</option>
			<option value="직장인">직장인</option>
			<option value="취준생">취준생</option>
			<option value="먼지">먼지</option>
		</select>
	</td>
	<tr height="50">
			<td width="150" align="center">연령대</td>
			<td width="250"  align="center">
			<input type="radio" value="10대" name="age">10대	
			<input type="radio" value="20대" name="age">20대	
			<input type="radio" value="30대" name="age">30대
			<input type="radio" value="40대" name="age">40대	</td>
			</tr>
		<tr height="50">
			<td width="150" align="center">하고싶은말
			<td width="250"  align="center">
			<textarea rows="10" cols="25" name="info"></textarea>
		</td>
		<tr height="50">
			<td colspan="2" width="150" align="center">
			<input type="submit" value="회원 가입">	
</table>
</form>
</body>
</html>

  • 결과

    LoginError.jsp

  • 입력한 패스워드1, 패스워드2가 일치하지 않으면 에러페이지로 보내고 다시 이전 페이지로 돌려보냄.

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
	alert("비밀번호가 일치하지 않습니다.")
	history.go(-1)
</script>
</body>
</html>

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" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h2>모든 회원보기</h2>
<table border="1">
	<tr height="50">
		<td width="150" align="center">아이디</td>
		<td width="200" align="center">이메일</td>
		<td width="150" align="center">전화번호</td>
		<td width="200" align="center">취미</td>
		<td width="100" align="center">직업</td>
		<td width="100" align="center">나이</td>
	</tr>
<c:forEach var="bean" items="${list }">
	<tr height="50">
		<td width="150" align="center">${bean.id}</td>
		<td width="200" align="center">${bean.email}</td>
		<td width="150" align="center">${bean.tel}</td>
		<td width="200" align="center">${bean.hobby}</td>
		<td width="100" align="center">${bean.job}</td>
		<td width="100" align="center">${bean.age}</td>
	</tr>
</c:forEach>	

</table>
</body>
</html>
  • 결과. 회원가입시 패스워드, 패스워드확인이 일치하지 않으면 alert창이 나타난다.

전체 코드 결과

profile
Yun zzin
공부 기록장
이전 포스트

[JSP] 세션(Session) 로그인/로그아웃 처리

0개의 댓글