2. 로그인 페이지 작업

황고은·2022년 11월 30일

나동빈님의 jsp 게시판 만들기 강좌를 참고해 작업했다.
https://www.youtube.com/watch?v=wEIBDHfoMBg&list=PLRx0vPvlEmdAZv_okJzox5wj2gG_fNh_6

1. 데이터베이스 생성

show databases;
create database instagram;
use instagram;
show tables;

create table user(
	userID varchar(20),
	userPassword varchar(20) ,
	userName varchar(20) ,
	userNickname varchar(20),
	primary key(userID)
);

INSERT INTO USER VALUES("id", "pw", "name", "nick");

먼저 인스타그램에서 사용할 데이터베이스를 만들어줬다.
다음에 작성 할 글인 로그인 페이지에서 말하겠지만, 나는 로그인 시 아이디, 비밀번호, 이름, 별명을 받을 예정이기 때문에 각 값들을 받아올 수 있게 테이블을 생성했다.
테스트용 데이터도 하나 넣어줬다.
primary key는 userNickname도 같이 설정해줘야 하지만, 당장 마감이 다음주 화요일이기 때문에 당장은 생략...

2. JSP 파일 생성

2-1. index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Instagram</title>
</head>
<body>
	<script>
		location.href = 'login.jsp';
	</script>
</body>
</html>

웹페이지 실행 시 가장 처음에 나오는 화면은 로그인 페이지로 설정했다.

2-2. login.jsp

로그인 페이지에 사용한 html, css, js 파일은 다음 벨로그에 나온 코드를 사용했다.
https://velog.io/@hyounglee/instagram-clone-1

나는 비밀번호 찾기 기능을 회원가입 버튼으로 바꾸어 작업을 진행했다.
코드를 수정하는 과정에서 무언가를 잘못 건드린건지(...) 회원가입 하이퍼링크가 굉장히 못생기게 변해버렸다.
볼 때마다 화가 나지만 시간이 촉박하므로 나중에 수정하기로...

3. action.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" />

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Instagram</title>
</head>

<body>
	<%
		UserDAO userDAO = new UserDAO();
		int result = userDAO.login(user.getUserID(), user.getUserPassword());
		
        // 로그인 성공 시 main 페이지로 이동
		if (result == 1) {
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("location.href = 'main.jsp'");
			script.println("</script>");
		}
        
        // 비밀번호 입력 오류 시 alert 출력 후 이전 화면으로 돌아가기
		else if (result == 0) {
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('비밀번호가 틀립니다.')");
			script.println("history.back()");
			script.println("</script>");
		}
        
        // 아이디 입력 오류 시 alert 출력 후 이전 화면으로 돌아가기
		else if (result == -1) {
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('존재하지 않는 아이디입니다.')");
			script.println("history.back()");
			script.println("</script>");
		}
        
        // 데이터베이스 오류 발생 시 alert 출력 후 이전 화면으로 돌아가기
		else if (result == -2) {
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('데이터베이스 오류가 발생했습니다.')");
			script.println("history.back()");
			script.println("</script>");
		}
	%>
</body>
</html>

코드 작업을 진행하면서 마지막 else if 문이 굉장히 많이 실행됐다. (...)
알고보니 DB 연결 작업을 진행했을 때 비밀번호를 잘못 써서 그런거였다. ㅋㅋㅋㅋㅋ.

4. Java class

4-1. User.java

package user;

public class User {
	private String userID;
	private String userPassword;
	private String userName;
	private String userNickname;
	
	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 getUserNickname() {
		return userNickname;
	}
	public void setUserNickname(String userNickname) {
		this.userNickname = userNickname;
	}
}

유저 정보를 받아오거나 변경할 때 쓰이는 함수들을 작성한 클래스이다.

4-2. 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;	//db에 접근하는 객체
	private ResultSet rs;
	PreparedStatement pstmt;
	
	public UserDAO() {
			try {// create a mysql database connection
				 String url = "jdbc:mysql://localhost/instagram";
				 Class.forName("com.mysql.jdbc.Driver");
			     conn = DriverManager.getConnection(url, "root", "0000");
			 }catch(Exception e) {
				 e.printStackTrace();
			 }
	}
	
	public int login(String userID, String userPassword) {
		String SQL = "SELECT userPassword FROM USER WHERE userID = ?"; 
		//DB에 ID를 넣어줄 수 있게끔 한다 실제로 존재하는지도 비교
		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; //데이터베이스 오류
	}
}

로그인 작업 시 필요한 함수들을 작성한 클래스이다.