무브라더

[게시판구현] 1. 로그인 기능 구현하기 본문

Programming/Project

[게시판구현] 1. 로그인 기능 구현하기

동스다
반응형
SMALL

현재 다니고있는 국비학원의 과정은 웹과 앱이 혼합된 과정이이며 이전 과정에서 웹을 배웠고 현재는 앱을 배우고 있다.

 

나는 웹 백엔드 취업을 희망하기 때문에 혹여나 앱을 배우는 시간 도중에 앞서 배운 웹에 관련된 내용을 까먹을수도 있고 이전에 포트폴리오로 만든 웹페이지도 너무 단순한 기능만 들어가있고 마음에 들지 않아서 웹과정 복습, 몰랐던 지식 습득, 포트폴리오 등의 목적을 가지고 웹의 기본인 게시판을 구현해보기로 결심했다!

 

학원에서 진행하는게 아닌 혼자하는 개인포트폴리오 이기때문에 나의 선생님은 구글과 유튜버 '동빈나' 님의 JSP게시판구현 영상을 참고하여 구현하기로 결심했고 구현하는 과정, 구현하면서 생겼던 오류 등을 글에 모두 담고자 한다.

 

 

1. 데이터베이스 생성하기

 

 

 로그인 기능을 구현 할 때 로그인이 되는지, 아이디가 맞는지, 비밀번호가 맞는지 비교해보기 위해 DB를 생성하고 추가해주었다.

 

2. 로그인페이지 디자인

 

 

동빈나 님의 JSP게시판 구현하는 영상을 보면서 만들어봤는데 2017년 영상이다보니 영상에서 사용한 부트스트랩 버전과 내가 다운받은 버전이 달라서 따라 치면 원하는 모양대로 나오지 않았다.

 

이리저리 구글링한 결과와 유튜브 댓글을 참조하여 2021-05-30 기준으로 위 사진처럼 구현이 되게 고쳐보았으니

참고하실분들은 참고하셔도 좋다.

 

 

 

2. 로그인 기능 구현

 

User.java

public class User {
	private String userID;
	private String userPassword;
	private String userName;
	private String userGender;
	private String userEmail;
	
	public String getUserID() {
		return userID;
	}
	public void setUserID(String userID) {
		this.userID = userID;
	}
	public String getUserPassword() {
		return userPassword;
	}
	public void setUserPassword(String userPassword) {
		this.userPassword = userPassword;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getUserGender() {
		return userGender;
	}
	public void setUserGender(String userGender) {
		this.userGender = userGender;
	}
	public String getUserEmail() {
		return userEmail;
	}
	public void setUserEmail(String userEmail) {
		this.userEmail = userEmail;
	}
}

 

UserDAO.java

package user;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class UserDAO {

	private Connection conn;
	private PreparedStatement pstmt;
	private ResultSet rs;
	
	public UserDAO() {
		try {
			String dbURL = "jdbc:mysql://localhost:3306/projectDB";
			String dbID = "root";
			String dbPassword = "mysql";
			Class.forName("com.mysql.jdbc.Driver");
			
			conn = DriverManager.getConnection(dbURL,dbID,dbPassword);
			// 여기까지가 mysql에 접속 할 수 있게 해주는 부분
		}catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	// 로그인을 시도하는 하나의 함수
	public int login(String userID, String userPassword) {
		
		String SQL = "SELECT userPassword FROM USER WHERE userID =?";
		
		try {
			pstmt = conn.prepareStatement(SQL);
			pstmt.setString(1, userID);
			rs = pstmt.executeQuery();
			if(rs.next()) {
				if(rs.getString(1).equals(userPassword)) {
					return 1; // 로그인성공
				}else {
					return 0; // 비밀번호 불일치
				}
			}
			return -1; // 아이디가 없음
		} catch (Exception e) {
			e.printStackTrace();
		}
		return -2; // 데이터베이스 오류
	}
}

loginAciton.jsp (로그인 처리해주는 페이지)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="user.UserDAO" %>
<%@ page import="java.io.PrintWriter" %> <!-- 자바스크립트 문장을 작성하기 위해 사용 -->
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:useBean id="user" class="user.User" scope="page" />
<jsp:setProperty name="user" property="userID" />
<jsp:setProperty name="user" property="userPassword" />
<!-- 이렇게되면 이제 이 페이지 안에 넘어온 id와 password가 담기게 됨 usebean의 id와 setProperty의 name은 같다. 매개변수 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>실질적으로 로그인 시도를 처리해주는 페이지</title>
</head>
<body>
	<%
		UserDAO userDAO = new UserDAO();
		int result = userDAO.login(user.getUserID(), user.getUserPassword()); // UserDAO의 login 메소드에 아이디와 패스워드를 가져온것?
		
		if(result==1){ // userDAO에서 만들어준 로그인이 성공했을때
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("location.href=main.jsp");
			script.println("</script>");
		}else if(result==0){ // userDAO에서 만들어준 비밀번호가 틀릴때
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('비밀번호가 틀립니다.')");
			script.println("history.back()"); // 로그인페이지로 돌려보내는거
			script.println("</script>");
		}else if(result==-1){
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('존재하지 않는 아이디입니다.')");
			script.println("history.back()");
			script.println("</script>");
		}else if(result==-2){
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('데이터베이스 오류가 발생했습니다.')");
			script.println("history.back()");
			script.println("</script>");
		}
	%>
</body>
</html>

 

User과 UserDAO는 Java Resources/src 에서 user라는 패키지를 생성 후 거기에 생성하였다.

 

* 굳이 왜 DAO 를 사용하는걸까? (그냥 나의 생각)

 

순전히 나의 생각이지만 각 파일마다 하는 역할이 있기 때문이라고 생각한다.

 

배우는 과정속에서는 프로그램의 복잡도가 낮아보일수도 있으니  필요없다고 생각할 수도 있겠지만 만약 대규모 프로젝트에서의 시스템을 기반으로 한 서비스에서 프로그램이 굉장히 복잡하고 다양한 로직을 구현한다고 하면 나누어서 표현하는것이 더 효율적이기 때문이다?? (사실 잘 모르겠다.. 갈길이 멀다...)

 

* useBean과 setProperty

 

loginAction.jsp를 보면

<jsp:useBean id="user" class="user.User" scope="page" />
<jsp:setProperty name="user" property="userID" />
<jsp:setProperty name="user" property="userPassword" />

 

라고 작성되어있는데

 

이전에 공부했던 내용이고 복습 차 단순히 정리해보자면

 

(1). <jsp:useBean id="" class="" scope="" />  : 자바빈 객체를 생성하는 액션태그이다!

- id : JSP페이지에서 자바빈 객체에 접근 할 때 사용하는 이름 ( 어떻게보면 객체역할?)
- class : 패키지 이름을 포함한 자바빈 클래스의 완전한 이름을 입력
- scope : 자바빈 객체가 저장될 영역을 지정
. page, request, session, application 중 하나의 값을 갖는다


(2). <jsp:setProperty name="" property="" value="" /> : 생성된 자바빈 객체에 프로퍼티(멤버변수) 값을 지정하는 기능을 한다.

- name : 프로퍼티(멤버변수) 값을 변경할 자바빈 객체의 이름. <jsp:useBean> 액션 태그의 id속성에서 지정한 값을 사용
(useBean의 id에서 지정된 값을 name에 넣어준다.
- property : 값을 지정할 프로퍼티(멤버변수)의 이름
- value : 프로퍼티(멤버변수)의 값, 표현식 사용가능

 

윗 설명을 참고하여 단순하게 예를 들자면!

 

<jsp:useBean id="member" class="test.MemberBean"/>
<jsp:setProperty name="member" property="id" value="abcd" />

-> MemberBean의 id 프로퍼티(멤버변수) 값을 abcd로 변경하고 싶으면 다음과 같이 지정

<jsp:useBean id="member" class="test.MemberBean"/>
<jsp:setProperty name="member" property="*" />

-> property 속성의 값을 *로 지정할 수 있는데, 이럴 경우 각각의 프로퍼티(멤버변수)의 값을 같은 이름을 갖는 파라미터의 값으로 설정한다.

많이 쓰기때문에 잘 알아두면 좋은 개념이다!

 

3. 기능결과

 

1. 데이터베이스 생성에서 아이디가 admin이고 비밀번호가 1234인 db를 생성해 놨기 때문에 아이디와 비밀번호에 admin과 1234를 입력하면 로그인이 성공될 것이고 다른 아이디와 비밀번호를 쓴다면 db값이 없는 아이디와 비밀번호기 때문에 밑의 사진과 같은 페이지가 나올 것이다. 

 

 

 

이렇게 오늘은 로그인기능까지 구현을 해봤고 다음에는 회원가입페이지와 회원가입을 구현해볼것이다!

 

 

 

※ 개인으로 한 프로젝트이고 오류가 났던 부분과 몰랐던 개념들을 정리하고자 작성한 글이기 때문에 잘못된 개념을 가지고 설명을 한 부분도 있을테고 이해가 안되는 부분도 있을겁니다. 댓글로 남겨주시면 확인하고 수정하겠습니다!

반응형
LIST
Comments