로그인 페이지 디자인
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>JSP 게시판 웹사이트</title>
</head>
<body>
<script> // login.jsp로 이동하도록
location.href = 'login.jsp'
</script>
</body>
</html>
-홈페이지를 만들때 디자인부터 만들고 기능을 입히는 경우가 많다.
login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width", initial-scale="1" > <!-- 반응형 웹에 사용하는 메타태그 -->
<link rel="stylesheet" href="css/bootstrap.css"> <!-- 참조 -->
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
<nav class ="navbar navbar-default">
<div class="navbar-header"> <!-- 홈페이지의 로고 -->
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expand="false">
<span class ="icon-bar"></span> <!-- 줄였을때 옆에 짝대기 -->
<span class ="icon-bar"></span>
<span class ="icon-bar"></span>
</button>
<a class ="navbar-brand" href="main.jsp">JSP 게시판 웹 사이트</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="main.jsp">메인</a></li>
<li><a href="bbs.jsp">게시판</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class = "dropdown-toggle"
data-toggle="dropdown" role ="button"
aria-haspopup="true"
aria-expanded="false">접속하기<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="active"><a href="login.jsp">로그인</a></li>
<li><a href="join.jsp">회원가입</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class ="jumbotron" style="padding-top:20px;">
<form method = "post" action="loginAction.jsp">
<h3 style="text-align:center;">로그인 화면</h3>
<div class ="form-group">
<input type ="text" class="form-control" placeholder="아이디" name ="userID" maxlength='20'>
</div>
<div class ="form-group">
<input type ="password" class="form-control" placeholder="비밀번호" name ="userPassword" maxlength='20'>
</div>
<input type="submit" class="btn btn-primary form-control" value="로그인">
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
회원 데이터베이스 구축하기
- 데이터베이스 생성
CREATE DATABASE BBS;
- 해당 데이터베이스 접속
USE BBS;
- 테이블 만들기
CREATE TABLE USER (
-> userID VARCHAR(20), 문자가 20개까지 들어가도록
-> userPassword VARCHAR(20),
-> userName VARCHAR(20),
-> userGENDER varchar(20),
-> userEmail VARCHAR(50),
-> PRIMARY KEY (userID) 중복방지 primary키
);
- 테이블 확인
show tables;
- 테이블 내용 확인
desc user;
- 데이터 삽입
INSERT INTO USER VALUES('gildoing', '123456', '홍길동', '남자', 'gildoing@naver.com');
- user 테이블 확인
select * from user;
commit;
로그인기능 구현하기
User.java
package user;
//회원데이터를 다룰수 있는 데이터베이스 & bins
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;
// DAO는 데이터베이스 접근객체의 약자로써 회원정보를 불러오거나 넣을때사용
public class UserDAO {
// ctrl + shift + o = import하기
// 데이터 베이스에 접극하게 해주는 객체
private Connection conn;
private PreparedStatement pstmt;
// 정보를 담을 수 있는 객체
private ResultSet rs;
// 생성자, 자동으로 DB(mysql)에 연결이 되도록
public UserDAO() {
// try catch로 예외처리
try {
// DB에 접속하도록
String dbURL = "jdbc:mysql://localhost:3306/BBS";
// root계정
String dbID = "root";
// root비번
String dbPassword = "1234";
// mysql드라이버를 찾을 수 있도록
Class.forName("com.mysql.jdbc.Drvier");
conn = DriverManager.getConnection(dbURL, dbID, dbPassword);
} catch (Exception e) {
// 어떤오류인지 체크
e.printStackTrace();
}
}
// 로그인을 시도하는 함수
// 유저 아이디, 패스워드를 입력받기
public int login(String userID, String userPassword) {
// sql에 입력할 명령어 입력
String SQL = "SELECT userPassword FROM USER WHERE userID = ?";
try {
// sql문장을 데이터베이스에 삽입하는
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; // ID가 없음
} catch (Exception e) {
e.printStackTrace();
}
return -2; //데이터 베이스 오류
}
}
loginAction.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="user.UserDAO" %> <!-- userDAO 불러오기 -->
<%@ page import="java.io.PrintWriter" %> <!-- Javascript문장을 사용하기 위해 -->
<% request.setCharacterEncoding("UTF-8"); %> <!-- 건너오는 데이터를 UTF-8으로 변경 -->
<jsp:useBean id="user" class="user.User" scope="page" /> <!-- user클래스를 java bins로 사용 -->
<jsp:setProperty name="user" property="userID" />
<jsp:setProperty name="user" property="userPassword" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
<%
UserDAO userDAO = new UserDAO();
int result = userDAO.login(user.getUserID(), user.getUserPassword());
if (result == 1) {
PrintWriter script = response.getWriter();
script.println("<Script>");
script.println("location.href = 'main.jsp'");
script.println("</script>");
}
else if (result == 0){
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>
Mysql jdbc driver 설치하기
참조 : https://youtu.be/kN8xRG6UPZM?list=PLRx0vPvlEmdAZv_okJzox5wj2gG_fNh_6
'Back-end > JAVA' 카테고리의 다른 글
JSP 게시판 만들기 - 3 (0) | 2022.08.22 |
---|---|
JSP 게시판 만들기 - 2 (0) | 2022.08.20 |
Spring Bean Scopes and Lifecycle 정리 (0) | 2020.11.25 |
Inversion Of Control Container 란? (0) | 2020.11.23 |
2020년 JAVA 개발자 로드맵 ( The 2020 Java Developer RoadMap ) (0) | 2020.11.21 |