[JSP] 회원가입 & 로그인 페이지 구현하기 - MVC2

보람·2023년 3월 28일
0

JSP

목록 보기
16/17

CharacterEncodingFilter.java

package com.codingbox.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.annotation.WebServlet;


			
@WebFilter("*.us") // 웹 전체에 필터									
public class CharacterEncodingFilter implements Filter{
	@Override
	public void doFilter(ServletRequest arg0, ServletResponse arg1, FilterChain arg2)
			throws IOException, ServletException {

		arg0.setCharacterEncoding("UTF-8");
		
		arg1.setCharacterEncoding("UTF-8");
		arg1.setContentType("text/html; charset=UTF-8");
		
		arg2.doFilter(arg0, arg1);
	}

}

*.sql : 오라클에 데이터를 저장하기 위한 테이블 먼저 만들기

CREATE TABLE "USER"(
	userid		varchar2(300) PRIMARY KEY,
	userpw		varchar2(300),
	username	varchar2(300),
	userphone	varchar2(300),
	useraddr	varchar2(1000)
);

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
// jstl 태그 사용 선언     
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	// 파라미터 flag의 값이 false일 때 alert : UserJoinAction.java 확인
	<c:if test ="${param.flag == false }">
		<script>
			alert("회원가입 실패 ! 다시 도전하세요.");
		</script>
	</c:if>
    
// 나의 현재 페이지 : /webapp/app/user/joinview
// 내가 현재 속한 폴더 : ./
	<a href="./app/user/joinview.jsp">회원가입</a>
	<!-- 프론트컨트롤러 안에 있는 UserLogin.us 불러오기 : 절대경로이용 -->
	<a href="${pageContext.request.contextPath}/user/UserLogin.us">로그인</a>
	
</body>
</html>

joinview.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>
	// 액션으로 요청을 보냄 : mvc2 방법 -> 프론트 컨트롤러로
	<form action="/user/UserJoin.us" method="post">
		<p>
			아이디 <input type="text" name="userid">
		</p>
		<p>
			패스워드 <input type="password" name="userpw">
		</p>
		<p>
			이름 <input type="text" name="username">
		</p>
		<p>
			전화번호 <input type="text" name="userphone">
		</p>
		<p>
			주소 <input type="text" name="useraddr">
		</p>
		<p>
			<input type="submit" value="회원가입">
		</p>

	</form>
</body>
</html>

UserDTO.java : 회원 정보를 저장하기 위한 자바클래스

package com.codingbox.app.user.dao;

public class UserDTO {
	private String userid;		
	private String userpw;		
	private String username;	
	private String userphone;	
	private String useraddr;

	
	public String getUserid() {
		return userid;
	}
	public void setUserid(String userid) {
		this.userid = userid;
	}
	public String getUserpw() {
		return userpw;
	}
	public void setUserpw(String userpw) {
		this.userpw = userpw;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getUserphone() {
		return userphone;
	}
	public void setUserphone(String userphone) {
		this.userphone = userphone;
	}
	public String getUseraddr() {
		return useraddr;
	}
	public void setUseraddr(String useraddr) {
		this.useraddr = useraddr;
	}
	
	
}

UserDAO.java : 데이터베이스에 접근하여 데이터를 가져오거나 쓰기 위한 객체

package com.codingbox.app.user.dao;

import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import com.codingbox.mybatis.SqlMapConfig;

public class UserDAO {
	
    // SqlMapConfig.getFactory() : MyBatis 구성 파일에서 정의된 SqlSessionFactory 반환
    // SqlSessionFactory : SqlSession 인스턴스 생성하는 역할
    // SqlSession : MyBatis를 사용하여 데이터베이스와 상호작용하는 데 필요
    			    (데이터베이스를 쿼리하고 업데이트하는 데 사용)
    
	SqlSessionFactory factory = SqlMapConfig.getFactory();
	SqlSession sqlsession;
	
	public UserDAO() {
    
    	// factory 객체에서 openSession(true) 호출해서 sqlsession 필드에 할당
        // sqlsession 객체를 사용하여 수행하는 모든 작업은 자동으로 커밋
        // 즉, 데이터베이스에 대한 삽입, 업데이트, 삭제 작업등을 수행하면 즉시 데이터베이스에 반영
		sqlsession = factory.openSession(true);
	}
  • 회원가입 시 메서드
	public boolean join(UserDTO user) {
		boolean result = false;
        
		// User.join => user.xml에 정의된 이름
        // 아래 메서드는 삽입이 성공하면 1 반환 
        // 1이 라는 뜻 : 성공했다는 뜻 그러면, result = true 출력
        
		if(sqlsession.insert("User.join", user) == 1) {
			result = true;
		}
		
		return result;
	}
  • 로그인 시 메서드
	public boolean login(String userid, String userpw) {
		boolean result = false;
		
		HashMap<String, String> dates = new HashMap<>();
		dates.put("userid", userid);
		dates.put("userpw", userpw);
		
		//selectOne의 값이 object로 넘어오니까 integer 넣어주고 == 1 이면, 로그인 성공했다는 뜻 
		if((Integer)sqlsession.selectOne("User.login", dates) == 1) {
			result = true;
		}
		
		return result;
	}
}

Action.java : (인터페이스)

package com.codingbox.action;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public interface Action {
	public ActionForward execute(HttpServletRequest request, HttpServletResponse response);
}

//  Action 인터페이스는 execute 메서드를 정의
//  이 메서드는 HttpServletRequest와 HttpServletResponse 객체를 매개변수로 받고, 
//  ActionForward 객체를 반환
//  ActionForward 객체는 이후에 사용될 JSP 파일의 경로와 전달할 데이터 등을 담음 객체
// 즉, execute 메서드는 클라이언트의 요청을 처리하고 ActionForward 객체를 반환

ActionForward.java

  • 회원가입 처리가 성공 또는 실패했을 때 이동할 뷰의 경로와 이동방식을 저장
package com.codingbox.action;
// actionforward : 뷰의 경로와 전달할 데이터를 저장
public class ActionForward {
		// 변수에 true를 넣으면 redirect방식 사용 , false 넣으면 forward방식으로 
		private boolean isRedirect;	// 이동방식
		private String path; // 뷰의 경로
		// 파라미터 없는 생성자
		public ActionForward() {}
		
		public ActionForward(boolean isRedirect, String path) {
			super();
			this.isRedirect = isRedirect;
			this.path = path;
		}

		public boolean isRedirect() {
			return isRedirect;
		}

		public void setRedirect(boolean isRedirect) {
			this.isRedirect = isRedirect;
		}

		public String getPath() {
			return path;
		}

		public void setPath(String path) {
			this.path = path;
		}		
}

UserJoinAction.java

  • 가입 성공하거나 실패했을 때 이동할 주소를 담음
package com.codingbox.app.user;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.codingbox.action.Action;
import com.codingbox.action.ActionForward;
import com.codingbox.app.user.dao.UserDAO;
import com.codingbox.app.user.dao.UserDTO;

// joinview.jsp -> UserfrontController.java -> UserJoinAction.java
// 모든 프론트 컨트롤러는 인터페이스를 상속받아서 쓸 것 -> override로 빼먹지않고 쓸수 있음
public class UserJoinAction implements Action{

	@Override
	public ActionForward execute(HttpServletRequest request, HttpServletResponse response) {
		// 필터도 filter(*.us) 바꿔주기
		UserDTO user = new UserDTO();
		
		user.setUserid(request.getParameter("userid"));
		user.setUserpw(request.getParameter("userpw"));
		user.setUsername(request.getParameter("username"));
		user.setUserphone(request.getParameter("userphone"));
		user.setUseraddr(request.getParameter("useraddr"));
		
		UserDAO udao = new UserDAO();
        // UserDAO 클래스 안에 UserDAO 메소드로 호출하기만 해도 
        // 위에 호출된 DTO 저장
		ActionForward forward = new ActionForward();
		
		// 회원가입 성공한다면 => loginview.jsp로 이동(로그인 페이지가 보이도록) 
		// -> 정보는 redirect 방식으로 따로 처리하고 로그인페이지 화면 보여짐 
		if(udao.join(user)) {
			forward.setPath("/app/user/loginview.jsp");
			forward.setRedirect(true);
		} else {
			// 회원가입 실패하면 index화면을 보여주면서 flag 띄우기
			forward.setPath("/index.jsp?flag=false");
			forward.setRedirect(true);
		}
		
		return forward;
	}	
}

UserLoginOkAction

  • 가입 성공하거나 실패했을 때 이동할 주소를 담음
package com.codingbox.app.user;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.codingbox.action.Action;
import com.codingbox.action.ActionForward;
import com.codingbox.app.user.dao.UserDAO;
import com.codingbox.app.user.dao.UserDTO;

public class UserLoginOkAction implements Action{

	@Override
	public ActionForward execute(HttpServletRequest request, HttpServletResponse response) {
		
		ActionForward forward = new ActionForward();
		UserDAO udao = new UserDAO();
		
		// request영역에 있는 userid, userpw 받아오기
		String userid = request.getParameter("userid");
		String userpw = request.getParameter("userpw");
		
		// 파라미터 값 받아서 login이라고 하는 메서드 호출
		if (udao.login(userid, userpw)) {
			// 로그인 성공
			forward.setPath("/app/main/mainview.jsp");
		} else {
			// 로그인 실패
			forward.setPath("/app/user/loginview.jsp?flag=false");
		}
		
		forward.setRedirect(true);
		
		return forward;
	
	}
}

UserFrontController.java : MVC2개념에서 나온것

  • 사용자 요청을 처리하는 컨트롤러
  • jsp -> jsp로 가지 않고 jsp -> java로 감으로써 mvc2
  • Action 클래스에서 생성한 ActionForward 객체를 기반으로 페이지 이동
package com.codingbox.app.user;

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 com.codingbox.action.ActionForward;

//.us로 끝나는 모든 컨트롤러를 가져옴
@WebServlet("*.us")
public class UserFrontController extends HttpServlet{

		@Override
		protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
			
			doProcess(req, resp);
		
		}
		
		@Override
		protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
			
			doProcess(req, resp);
			
		}
		
		// 컨트롤러 매번 변수에 request -> response 둬야하는데 까먹을 수도 있음 : 인터페이스에서 미리 정의 =-> 컨트롤러는 인터페이스 상속
		private void doProcess(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {

			String requestURI = request.getRequestURI();
			ActionForward forward = null;
			
			if( requestURI.equals("/user/UserJoin.us")) {
				forward = new UserJoinAction().execute(request, response);
			} else if (requestURI.equals("/user/UserLogin.us")) {
				forward = new ActionForward(false, "/app/user/loginview.jsp");
			} else if (requestURI.equals("/user/UserLoginOk.us")) {
				// execute 함수 호출
				forward = new UserLoginOkAction().execute(request, response);
			}
            
            // UserJoin.us는 joinview.jsp에 저장
            // UserLogin.us는 index.jsp의 로그인 href로 저장
			// 결국 loginview.jsp의 같은 화면이 보여지지만
            // UserJoin.us 는 loginview.jsp의 주소가 (UserJoinAction에서 정의됨)
            // UserLogin.us는 UserLogin.us의 주소가 할당됨
            
            // 마지막 elseif는 login 실행 시 이동할 주소 나타냄
            
			// 전송에 대한 일괄처리
			if( forward != null ) {
            	// ActionForward의 isRedirect getter 함수
				if( forward.isRedirect() ) {
					// true(회원가입이 성공) : redirect
					response.sendRedirect(forward.getPath());
					// 지정된 경로로 redirect
				} else {
					// false : forward
					RequestDispatcher disp = request.getRequestDispatcher(forward.getPath());
					disp.forward(request, response);
                    // 지정된 객체로 포워드 : ActionForward에 정의
				}
			}			
       }
}

🙆‍♀️ 알아두기
url vs uri

  • URL(Uniform Resource Locator)과 URI(Uniform Resource Identifier)
  • URI :
    • 인터넷에서 특정 자원을 식별하는 데 사용되는 일반적인 개념
    • URL뿐만 아니라, URN(Uniform Resource Name) 등을 포함
    • URN은 인터넷에서 특정 자원의 이름을 식별하는 데 사용
  • URL :
    • URI의 일종, 인터넷에서 특정 자원의 위치를 식별하기 위한 문자열
    • 자원이 위치한 서버의 정보와 자원의 경로 등을 포함

user.xml : 쿼리문 저장

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="User">
<!-- name space xml이름 dao에 있는 이름과 맞추고 id도 dao에 저장해둔대로-->
<!-- 

	config.xml에
	
	<configuration>
	<typeAliases>
		<typeAlias type="com.codingbox.app.user.dao.UserDTO" alias="userdto"/>
	</typeAliases> 
	
	삽입 = parameterType사용하기 쉽도록

-->

// 회원가입 정보 담을 쿼리문
	<insert id="join" parameterType="userdto">
			INSERT INTO "USER" VALUES (#{userid}, #{userpw}, #{username}, #{userphone}, #{useraddr})
	</insert>
    
// 로그인시 정보 찾을 쿼리문    
	<select id="login" parameterType="hashmap" resultType="_int">
		SELECT count(*) FROM "USER" WHERE USERID = #{userid} AND USERPW = #{userpw}
	</select>

</mapper>

loginview.jsp : 로그인 버튼 클릭 시 or 회원가입 성공시 보여줄 화면

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>   	
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<c:if test ="${param.flag == false }">
		<script>
			alert("로그인 실패 ! 다시 도전하세요.");
		</script>
	</c:if>
	
	<form action="${pageContext.request.contextPath}/user/UserLoginOk.us" method="post">
		<p>
			아이디 <input type="text" name="userid">
		</p>
		<p>
			비밀번호 <input type="password" name="userpw">
		</p>
		<p>
			<input type="submit" value="로그인하기">
		</p>
	</form>
</body>
</html>

loginview.jsp : 로그인 성공 시 이동할 화면

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>   	    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	메인뷰
	
</body>
</html>
profile
보람
안녕하세요, 한보람입니다.
이전 포스트

[JSP] 주소록 페이지 구현하기

다음 포스트

[JSP] 기본 프레임

0개의 댓글