초보개발자의 성장블로그
MVC 패턴 연습> 회원 가입과 회원 보기를 모델2로 고치기
백엔드/JSP2021. 4. 27. 17:42
MemberJoin.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>
<center>
<h2>회원 가입</h2>
<!--<form action="Proc.do?gubun=1" method="post"> -->
<form action="Proc.do" method="post">
<table width="500" border="1">
<tr height="50">
<td width="150" align="center">아이디 </td>
<td width="350" align="center">
<input type="text" name="id" size="40" placeholder="id를 넣으세요">
</td>
</tr>
<tr height="50">
<td width="150" align="center">패스워드</td>
<td width="350" align="center">
<input type="password" name="pass1" size="40" placeholder="비밀번호는 숫자와 영어만 넣어주세요">
</td>
</tr>
<tr height="50">
<td width="150" align="center">패스워드</td>
<td width="350" align="center">
<input type="password" name="pass2" size="40" placeholder="비밀번호는 숫자와 영어만 넣어주세요">
</td>
</tr>
<tr height="50">
<td width="150" align="center">이메일</td>
<td width="350" align="center">
<input type="email" name="email" size="40">
</td>
</tr>
<tr height="50">
<td width="150" align="center">전화 번호 </td>
<td width="350" align="center">
<input type="tel" name="tel" size="40">
</td>
</tr>
<tr height="50">
<td width="150" align="center">당신의 관심 분야</td>
<td width="350" 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>
<td width="350" align="center">
<select name="job">
<option value="교사">교사</option>
<option value="의사">의사</option>
<option value="변호사">변호사</option>
<option value="기술사">기술사</option>
</select>
</td>
</tr>
<tr height="50">
<td width="150" align="center">당신의 연령은</td>
<td width="350" align="center">
<input type="radio" name="age" value="10">10대
<input type="radio" name="age" value="20">20대
<input type="radio" name="age" value="30">30대
<input type="radio" name="age" value="40">40대
</td>
</tr>
<tr height="50">
<td width="150" align="center">하고 싶은말</td>
<td width="350" align="center">
<textarea rows="5" cols="40" name="info"></textarea>
</td>
</tr>
<tr height="50">
<td align=center width="150" colspan="2">
<input type="submit" value="회원 가입">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
자바 리소스 폴더의 src 폴더에서 모델 패키지를 만들고 그 모델페키지에 다시 MemberBean이라는 클래스를 만든다.
MemberBean.java
package model;
public class MemberBean {
private String id;
private String pass1;
private String pass2;
private String email;
private String tel;
private String hobby;
private String job;
private String age;
private String info;
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 getPass2() {
return pass2;
}
public void setPass2(String pass2) {
this.pass2 = pass2;
}
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;
}
}
데이터베이스르 연결하기 위해서는 커넥션 풀을 써야한다.
servers 폴더에 server.xml으로 가서, 커넥션 풀을 사용할 수 있도록 서버를 등록해준다.
<Context 태그에 <Resource를 추가해준다.
Java Resource 폴더에 src폴더에 control 패키지를 만들고 MemberJoinProc 라는 서블릿을 만들어주고,
form태그에서 action을 proc.do라고 설정했기에, 어노테이션을 /proc로 바꿔준다.
bean클래스는 가방이라 생각하자.
스프링은 빈을 한꺼번에 받는다. MemberBean을하면 MemberBean을 다 받아온다.
하지만 서블릿은 못받는다. 그래서 다 써줘야한다.
Memberbean클래스의 객체를 생성해주고, 다 써준다.
MemberJoinProc.java
package control;
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.MemberBean;
import model.MemberDAO;
@WebServlet("/Proc.do")
public class MemberJoinProc extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
reqPro(request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
reqPro(request,response);
}
protected void reqPro(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//한글 처리
request.setCharacterEncoding("UTF-8");
MemberBean bean = new MemberBean();
bean.setId(request.getParameter("id"));
String pass1 = request.getParameter("pass1");
String pass2 = request.getParameter("pass2");
bean.setPass1(pass1);
bean.setPass2(pass2);
bean.setEmail(request.getParameter("email"));
bean.setTel(request.getParameter("tel"));
String [] arr = request.getParameterValues("hobby");
String data="";
for(String string : arr) {
data += string + " ";//하나의 스트림으로 데이터 연결
}
bean.setHobby(data);
bean.setJob(request.getParameter("job"));
bean.setAge(request.getParameter("age"));
bean.setInfo(request.getParameter("info"));
//패드워드가 같을 경우에만 데이터 베이스에 저장
if(pass1.equals(pass2)){
//데이터 베이스 객체 생성
MemberDAO mdao = new MemberDAO();
mdao.insertMember(bean);
//제대로 데이터베이스에 들어가면 MemberList.jsp를 호출하면 모델1이니까,
//모델2를 하기위해서
//컨트롤러에서 또다른 컨트롤러를 호출해 주어야 합니다.
RequestDispatcher dis = request.getRequestDispatcher("/MemberlistCon.do");
dis.forward(request, response);
}else {
request.setAttribute("msg","패스워드가 일치하지 않습니다");
RequestDispatcher dis = request.getRequestDispatcher("LoginError.jsp");
dis.forward(request, response);
}
}
/*
1. 매소드
2. 매소드
3. 매소드
......
*/
}
여기까지 회원가입을 할때, 빈클래스를 만들고 빈클래스에 파라미터로 넘어온 데이터를 저장하는 것 까지 진행하였다.
이제, 실제로 파라미터로 넘어온 데이터를 db에 저장하자.
이클립스에서 데이터베이스 연결해주는 클래스 dao 클래스를 만들자
모델패키지에 MemberDAO클래스를 만들어준다.
MemberDAO.java
package model;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.Vector;
public class MemberDAO {
ResultSet rs; //데이터 베이스의 테이블의 결과를 리턴 받아 자바에 저장해 주는 객체
Connection con;//데이터베이스에 접근할수 있도록 설정
PreparedStatement pstmt;//데이터 베이스에서 쿼리를 실행시켜주는 객체
public void getcon() {
try {
String dbURL = "jdbc:oracle:thin:@DESKTOP-OHJGL9K:1522:xe";
String dbID = "c##BBC";
String dbPassword = "1234";
Class.forName("oracle.jdbc.driver.OracleDriver");
con = DriverManager.getConnection(dbURL, dbID, dbPassword);
} catch (Exception e) {
e.printStackTrace();
}
}
//회원 한사람에 대한 정보를 저장하는 메소드
public void insertMember(MemberBean bean) {
getcon();
try {
//쿼리 준비
String sql ="insert into member 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();
}
}
//모든회원의 정보를 리턴하는 메소드 작성
public Vector<MemberBean> getAllMember(){
//리턴 타입 선언
Vector<MemberBean> v = new Vector<>();
getcon();
try {
//쿼리 준비
String sql ="select * from member";
//쿼리 실행창 객체 선언
pstmt = con.prepareStatement(sql);
//쿼리 실행
rs = pstmt.executeQuery();
//반복문을 돌면서 회원 정보를 저장
while(rs.next()) {
MemberBean bean =new MemberBean();
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));
//벡터에 빈클래스를 저장
v.add(bean);
}
con.close();
} catch (Exception e) {
e.printStackTrace();
}
return v;
}
}
패스워드1과 패스워드가 다를경우 아래의 LoginError.jsp로 보낸다.
LoginError.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>
<script type="text/javascript">
alert("패스워드가 일치하지 않습니다. 다시확인해주세요");
location.href='MemberJoin.jsp';
</scirpt>
</body>
</html>
원래는 아래 그림처럼 MemberjoonProc.java 서블릿에서 MemberList.jsp가 호출되게 만들었으나,
문제는 MemberList.jsp를 만들어서 데이터를 작성한다면, (<% DAO 생성하고 데이터 가져오고 %>) 이런식으로 해버리면 모델1이다. 의미가없다.
모델2는 화면에 정보만 뿌려줘야한다. 그렇기 때문에 JSP랑 DAO를 연결하면 안된다.
이 때는, 컨트롤러에서 또다른 컨트롤러를 호출해줘야한다.
첫번째 컨트롤러 MemberjoonProc.java(서블릿)에서 데이터를 인서트를 했고, 다음으로 화면에 출력하기 위해
컨트롤 패키지에 MemberlistCon 서블릿을 만든다.
MemberlistCon.java
package control;
import java.io.IOException;
import java.util.Vector;
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.MemberBean;
import model.MemberDAO;
@WebServlet("/MemberlistCon.do")
public class MemberlistCon extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
reqPro(request , response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
reqPro(request , response);
}
protected void reqPro(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 첫번째 컨트롤러(서블릿)에서 데이터를 인서트하고, 여기 서블릿에 호출했다.
// 이제 화면에 출력하기 위해서
//데이터 베이스에 연결하여 회원의 모든 정보를 리턴
MemberDAO mdao = new MemberDAO();
//MemberBean은 가방이고, 데이터를 담고, 박스인 Vector에 담아라.
// MemberDAO로 가서 모든회원의 정보를 리턴해주는 getAllMember() 만들어준다.
Vector<MemberBean> v = mdao.getAllMember();
request.setAttribute("v", v);//벡터를 jsp쪽으로 넘겨줌
RequestDispatcher dis = request.getRequestDispatcher("MemberList.jsp");
dis.forward(request, response);
}
}
화면에 출력하기 위해서 이제, MemberList.jsp를 만든다.
코어태그를 사용한다.
MemberList.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<center>
<h2> 모든 회원 보기 </h2>
<table width="800" border="1" bordercolors="gray">
<tr height ="40">
<td align="center" width="50">아이디</td>
<td align="center" width="200">이메일</td>
<td align="center" width="150">전화</td>
<td align="center" width="150">취미</td>
<td align="center" width="150">직업</td>
<td align="center" width="100">나이</td>
</tr>
<c:forEach var="bean" items="${v}"> //vector에서 하나씩 빼주면 bean에서 받기때문에
<tr height ="40">
<td align="center" width="50">${bean.id}</td>
<td align="center" width="200"><a href="#">${bean.email}</a></td>
<td align="center" width="150">${bean.tel}</td>
<td align="center" width="150">${bean.hobby}</td>
<td align="center" width="150">${bean.job}</td>
<td align="center" width="100">${bean.age}</td>
</tr>
</c:forEach>
</table>
</center>
</body>
</html>확일을 위해, MemberList.jsp 자체로는 실행이 되지 않지만,
MemberlistCon.java에서 실행하면 출력되는 것을 알수있다.
'백엔드 > JSP' 카테고리의 다른 글
| MVC 모델1로 게시판 만들기 (2) | 2021.04.28 |
|---|---|
| MVC 모델2로 게시판 만들기 (0) | 2021.04.28 |
| 인프런 JSP MVC 모델2 ① (0) | 2021.04.26 |
| 인프런 JSP 강의 정리 (0) | 2021.04.26 |
| JSP 71 MVC 패턴 구현 방법 (2) | 2021.04.14 |
댓글()