카테고리 없음

[JSP] JDBC연동 회원가입

Deeb 2021. 12. 5. 23:06

common -JDBCTemplate.java 

- 커넥션 등 만들어둔 템플릿

 

src/main/webapp/lib 폴더안에

ojdbc6.jar 라이브러리 추가

 

 

 

 

 

 

 

 

 

 

 

 

결과 화면

html   src/main/webapp/

 

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ServletProject3</title>
</head>
<body>
    <a href="signUp.html">JDBC 연동 회원가입</a>
    <form action="/ServletProject3/signUp" method="post">
        ID : <input type="text" name="memberId">        <br> 
        PW : <input type="password" name="memberPw">    <br>
        이름 : <input type="text" name="memberName">    <br>
        이메일 : <input type="email" name="memberEmail"> <br>

        <button>회원가입</button>
    </form>
    
    <hr>
    
    <h4>로그인</h4>
    <form action="/ServletProject3/login" method="post">
        ID : <input type="text" name="inputId">        <br> 
        PW : <input type="password" name="inputPw">    <br>

        <input type="checkbox" name="saveId"> 아이디 저장 
        <button>로그인</button>
    </form>
</body>
</html>

get 방식은 주소에 값을 담아 전달하기 때문에 
비밀번호 같은 노출되면 안되는 값이 포함되어 문제가 발생하게 된다.
-> 이럴때는 post방식 사용

 

signUp.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
   
    <form action="/ServletProject3/jdbc/signUp" method="post">
        ID : <input type="text" name="memberId">        <br> 
        PW : <input type="password" name="memberPw">    <br>
        이름 : <input type="text" name="memberName">    <br>
        이메일 : <input type="email" name="memberEmail"> <br>
    
        <button>회원가입</button>
    </form>
</body>
</html>

 

controller

LoginServlet - POST 방식

package edu.kh.servlet.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;

@WebServlet("/login")
public class LoginServlet extends HttpServlet{
	
	// post 요청 처리
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
    req.setCharacterEncoding("UTF-8");

    String inputId = req.getParameter("inputId");
    String inputPw = req.getParameter("inputPw");

    // 체크 박스 1개인 경우 => 배열로 받을 필요 없으니 하나로 받는다.

    // 체크박스는 체크가 된 경우 value값을 전달하는데 
    // value값 없으면 == "on"  
    // 체크 안하면 == null
    String saveId = req.getParameter("saveId");

    System.out.println(inputId);
    System.out.println(inputPw);
    System.out.println(saveId);

    // 파라미터가 아닌 새로운 값을 JSP에 위임(발송)하는 방법
    String name = "아무개";

    if( inputId.equals("user01")) { // 입력 받은 id가 user01인 경우
    name = "봉국";
    }

    // 응답화면을 만들기 위해 요청 발송자를 이용해서 jsp로 전송
    RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/loginResult.jsp");
    dispatcher.forward(req, resp);
	}
}

@WebServlet("주소")
annotation : 컴파일러에게 알려주는 역할 
이걸하면 web.xml을 하지 않아도 된다.
기존에 web.xml에 작성했던 url 패턴에 따른 servlet 연결 구문을 간소화하는 어노테이션

 

req.setCharacterEncoding("UTF-8");

post 방식 요청의 주의사항

: 한글이 깨진다 => 요청 객체 문자 인코딩 변경

 

name은 요청을 처리해서 만들어진 결과물
-> name을 HttpServletRequest 객체에 담아서 JSP로 위임
req.setAttribute("name", name);

key : value 형태로 req 객체에 세팅

 

setAttribute(String name, Object o) 
: value(두 번째 매개변수)의 자료형이 Object로 설정되어 있다. 
== 모든 객체를 매개변수로 전달할 수 있다( Object는 최상위 부모, 매개변수 다형성)
==> 매개변수로 들어온 모든 객체의 Object 부분만을 참조할 수 있게 된다

SignUpServlet - doGet / doPost

package edu.kh.servlet.controller;

import java.io.IOException;
import java.io.PrintWriter;
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;

public class SignUpServlet extends HttpServlet{
	
    // get 방식을 처리하는 메서드
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
        // input의 name 속성 값
		String memberId = req.getParameter("memberId"); 
		String memberPw = req.getParameter("memberPw"); 
		String memberName = req.getParameter("memberName"); 
		String memberEmail = req.getParameter("memberEmail"); 
		
		System.out.println(memberId);
		System.out.println(memberPw);
		System.out.println(memberName);
		System.out.println(memberEmail);
	}
	
	// post 방식을 처리하는 메서드
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		req.setCharacterEncoding("UTF-8"); // 대소 문자 구분 x
		
		String memberId = req.getParameter("memberId"); // input의 name 속성 값
		String memberPw = req.getParameter("memberPw"); 
		String memberName = req.getParameter("memberName"); 
		String memberEmail = req.getParameter("memberEmail"); 
		
		System.out.println(memberId);
		System.out.println(memberPw);
		System.out.println(memberName);
		System.out.println(memberEmail);
		
        // JSP 
		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/result.jsp");
		dispatcher.forward(req, resp);

	}
}

파라미터(Parameter) : input 태그에 작성되어 전달 받은 값을 변수에 저장

 

POST 방식

- POST 방식으로 데이터(값)을 전달하게 되면 문자 인코딩이 지정되어 있지 않아 
2byte 범위의 문자(한글, 한자, 이모티콘 등)들이 모두 깨져서 보이게 된다.

 

해결법 : 문자 인코딩을 지정하면된다.

req.setCharacterEncoding("UTF-8");  ( 괄호안에 utf-8, UTF-8 다 가능하다. 대소 문자 구분 x)

 

setCharacterEncoding : 요청 관련 객체에 담긴 값의 문자 인코딩을 변경한다.

 

forward : 전송하다, 보내다

 

Servlet 방식

// 1. 응답 화면의 문서 형식 지정
resp.setContentType("text/html; charset=UTF-8");

// 2. 응답 화면을 클라이언트에게 전달할 통로(스트림) 얻어오기
PrintWriter out = resp.getWriter();
// 지속적인 사용을 위해 변수 선언


// 3. 클라이언트에게 응답 화면 코드(HTML) 내보내기(출력)
out.print("<!DOCTYPE html>");
out.print("<html>");

out.print("<head>");
out.print("<title>회원 가입 결과</title>");
out.print("</head>");

out.print("<body>");
out.print("<h1>" + memberName + "님의 가입을 환영합니다.</h1>");		
out.print("</body>");

out.print("</html>");

JSP를 이용하여 응답하기

RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/result.jsp");
dispatcher.forward(req, resp);

Dispatcher : 발송자, 필요 정보를 제공하는자
RequestDispatcher : 요청 발송자, 요청 정보 발송 객체(요청 위임 객체)

RequestDispatcher는 무엇을 발송(위임)하는가?
-> servlet에서는 응답 화면(HTML) 코드를 만들기가 힘들다
그래서 응답 화면을 더 쉽게 만들 수 있는 JSP에게
응답 화면을 만들어 달라고 요청 발송(위임)

이 때, 매개변수로 요청 관련 정보를 담고있는 객체 HttpServletReques를 전달하여 
파라미터, 클라이언트 정보를 이용해 응답화면을 구성할 수 있고 

응답 관련 정보를 담고있는 객체 HttpServletResponse를 전달하여
클라이언트와 스트림으로 연결하여 자동으로 응답 화면을 출력해준다.

 

forward : 전송하다, 보내다

SignUp2Servlet - JSP 방식 POST

package edu.kh.servlet.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 edu.kh.servlet.model.service.MemberService;
import edu.kh.servlet.model.vo.Member;


// 처리할 주소를 annotation 안에 넣어두기
@WebServlet("/jdbc/signUp")
public class SignUp2Servlet extends HttpServlet{

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// POST 방식 -> 문자 인코딩 처리
		req.setCharacterEncoding("UTF-8");

		// 파라미터 변수에 저장
		String memberId = req.getParameter("memberId");
		String memberPw = req.getParameter("memberPw");
		String memberName = req.getParameter("memberName");
		String memberEmail = req.getParameter("memberEmail");
		
		// Member VO에 담기
		Member member = new Member(memberId, memberPw, memberName, memberEmail);
	
		// MemberService 객체 생성
		MemberService service = new MemberService();
		
		// 입력 받은 값들을 DB에 삽입 후 결과 반환 받기
		// 예외가 이쪽으로 오고있기때문에 try-catch문으로 묶기
		try {
			int result = service.signUp(member);
			
			String message = null;
			
			if(result > 0) { // 삽입 성공 시
				message = "회원 가입 성공";
			} else {
				message = "회원 가입 실패";
			}
			
			// 기존에 request에 없는 값을 세팅
			req.setAttribute("msg", message);
			
			// JSP로 요청 위임
			// 1) 요청 위임 객체 생성
			RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/signUpResult.jsp");

			// 2) 요청 위임 객체를 이용해서 
			dispatcher.forward(req, resp);
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

model package

 

vo/Member

더보기 
package edu.kh.servlet.model.vo;

public class Member {
	private String memberId;
	private String memberPw;
	private String memberName;
	private String memberEmail;

	public Member() {}

	public Member(String memberId, String memberPw, String memberName, String memberEmail) {
		super();
		this.memberId = memberId;
		this.memberPw = memberPw;
		this.memberName = memberName;
		this.memberEmail = memberEmail;
	}

	public String getMemberId() {
		return memberId;
	}

	public void setMemberId(String memberId) {
		this.memberId = memberId;
	}

	public String getMemberPw() {
		return memberPw;
	}

	public void setMemberPw(String memberPw) {
		this.memberPw = memberPw;
	}

	public String getMemberName() {
		return memberName;
	}

	public void setMemberName(String memberName) {
		this.memberName = memberName;
	}

	public String getMemberEmail() {
		return memberEmail;
	}

	public void setMemberEmail(String memberEmail) {
		this.memberEmail = memberEmail;
	}

	
	//toString alt shift s
	@Override
	public String toString() {
		return "Member [memberId=" + memberId + ", memberPw=" + memberPw + ", memberName=" + memberName
				+ ", memberEmail=" + memberEmail + "]";
	}	
}

 

service/MemberService

더보기 
package edu.kh.servlet.model.service;

import static edu.kh.servlet.common.JDBCTemplate.*;

import java.sql.Connection;

import edu.kh.servlet.model.dao.MemberDAO;
import edu.kh.servlet.model.vo.Member;

public class MemberService {
	
	private MemberDAO dao = new MemberDAO();

	/** 회원 가입 service
	 * @param member
	 * @return result( 1 성공)
	 * @throws Exception
	 */
	public int signUp(Member member) throws Exception {
		
		// Connection 얻어오기
		Connection conn = getConnection();
		
		// DAO 호출 후 결과 반환 받기
		int result = dao.signUp(member, conn);
				
		// 반환 받은 결과에 따라서 트랜잭션 제어
		if(result > 0)	commit(conn);
		else 			rollback(conn);
		
		// 사용한 Connection 반환
		close(conn); 
		
		
		// 결과 반환
		return result;
		
	}
	
	
	
}

dao/MemberDAO

더보기 
package edu.kh.servlet.model.dao;

import static edu.kh.servlet.common.JDBCTemplate.*;

import java.io.FileInputStream;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.Properties;

import edu.kh.servlet.model.vo.Member;

public class MemberDAO {
	
	private Statement stmt;
	private PreparedStatement pstmt;
	private ResultSet rs;
	
	private Properties prop;
	
	public MemberDAO() {
		
		try {
			prop = new Properties();
			
			String filePath = MemberDAO.class.getResource("/edu/kh/servlet/sql/member-query.xml").getPath();       
		
			prop.loadFromXML( new FileInputStream(filePath) );

			
		} catch(Exception e) {
			e.printStackTrace();
		}
	}

	
	
	/** 회원가입
	 * @param member
	 * @param conn
	 * @return result(1 성공)
	 * @throws Exception
	 */
	public int signUp(Member member, Connection conn)  throws Exception {
		
		// 결과 저장용 변수
		int result = 0;
		
		try {
			// SQL 얻어오기
			String sql = prop.getProperty("signUp");
					
			// SQL을 DB에 전달하고 결과 받아오는 객체 생성하기
			pstmt = conn.prepareStatement(sql);
			
			// SQL 빈자리에 알맞은 값 세팅
			pstmt.setString(1, member.getMemberId());
			pstmt.setString(2, member.getMemberPw());
			pstmt.setString(3, member.getMemberName());
			pstmt.setString(4, member.getMemberEmail());
			
			// SQL 수행 후 결과 반환 받기
			result = pstmt.executeUpdate();
			
			
		}finally {
			// 사용한 JDBC 객체 자원 반환
			close(pstmt);
		}
		// 결과 반환
		return result;
	}
	
}

 

 

member-query.xml sql

더보기 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE properties SYSTEM "http://java.sun.com/dtd/properties.dtd">
<properties>
   <entry key ="signUp">
   		INSERT INTO TB_MEMBER
   		VALUES(SEQ_MEMBER_NO.NEXTVAL, ?, ?, ?, ?)
   </entry>


</properties>

 

JSP

 

JSP 는 Servlet(Java) 코드로 변형되어 컴파일 된다. 이 때 JSP 주석은 해석조차 되지 않는다.
+ JSP에 작성된 Java 코드는 HTML 주석으로 처리할 수 없기 때문에 반드시 JSP 주석 사용

HTML 주석 : <!-- -->
JSP 주석 : <%--  --%>

<% %>  : 스크립플릿(scripteLET) => JSP에서 자바 코드 작성에 사용
<%= %>  : 표현식(Expression) -> 자바 코드 중 값이나 데이터를 HTML 코드 자체로 출력


<!-- request.getParameter("saveId") : 받아오는 값이 문자열 -->

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 결과</title>
</head>
<body>
	<!-- // 서블릿에 있는것을 jsp에 요청정보를 발송한다. -->
	<h1> <%=request.getParameter("inputId") %>이 로그인 되었습니다.</h1>
	<!-- =을 넣어서 표현식으로 만든다 -->
	
	
	<% if( request.getParameter("saveId") != null) { %>
		<%-- 아이디 저장을 체크한 경우 --%>
		<h3>아이디 저장이 체크 되었습니다.</h3>

	<% }  else { %>
		<%-- 아이디 저장이 체크 되지 않은 경우 --%>
		<h3>아이디 저장이 체크되지 않았습니다.</h3>
	
	<% }  %>
	
	<% for (int i=1; i<=6; i++) {%>
		<h<%=i%>>반복문으로 n 출력중 </h<%=i%>>
	<% }  %>
	
	<h1>전달된 name 확인</h1>
	<!-- 둘의 자료형(스트링, 오브젝트)이 다르기 때문에 다운캐스팅 /  
	어트리뷰트로 세팅되면 오브젝트 타입으로 -->
	<% String name = (String)request.getAttribute("name"); %>
	
	<h1 style="color:salmon"><%= name %></h1>
	
</body>
</html>

result.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 결과</title>

	<style>
	.yellowgreen{ color : yellowgreen; }
	</style>
</head>
<body>

	<h1 class ="yellowgreen"> <%= request.getParameter("memberName")%>님 가입을 환영합니다.</h1>

	<p>
		ID : <%=request.getParameter("memberId")%> <br>
		PW : <%=request.getParameter("memberPw")%> <br>
		Email : <%=request.getParameter("memberEmail")%> <br>
	</p>
</body>
</html>

signUpResult.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 주로 변수 선언하는 위치 -->
<% // 스크립틀릿 : JSP에서 자바 코드 작성하는 영역
	String msg = (String)request.getAttribute("msg");
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1><%= msg %></h1>

</body>
</html>
반응형
저작자표시 비영리 변경금지