https://youtu.be/wEIBDHfoMBg?list=PLRx0vPvlEmdAZv_okJzox5wj2gG_fNh_6
이 강의를 그대로 만들 예정
bbs 프로젝트 생성
index.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 웹사이트</title>
</head>
<body>
<h1>index.jsp</h1>
<script>
location.href ='login.jsp'
</script>
</body>
</html>
**location.href : 현재 브라우저의 위치 \login.jsp로 바꾼다.
-> login페이지로 이동
부트스트랩 다운로드
이 예제에서는 4.1 버전을 사용했음.
압축풀어서 아래의 파일들 빼고 다 삭제
제이쿼리 다운로드
Download jQuery | jQuery
link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download
jquery.com
login.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title>로그인 페이지</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="login.jsp">JSP 게시판</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- 왼쪽 메뉴 리스트 -->
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="main.jsp">메인</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">게시판</a></li>
</ul>
<!-- 오른쪽 메뉴 리스트 -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="Dropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
접속하기
</a>
<div class="dropdown-menu" aria-labelledby="Dropdown">
<a class="dropdown-item active" href="login.jsp">로그인</a>
<a class="dropdown-item" href="join.jsp">가입하기</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-7 mx-auto">
<div class="bg-light p-5 mt-5">
<form action="loginAction.jsp" method="post">
<h3 class="text-center mb-3">로그인 화면</h3>
<input
type="text"
class="form-control mb-3"
name="userID"
placeholder="아이디"
maxlength="20"
required
/>
<input
type="password"
class="form-control mb-3"
name="userPassword"
placeholder="패스워드"
maxlength="20"
required
/>
<input
type="submit"
class="btn btn-primary form-control mb-3"
value="로그인"
/>
</form>
</div>
</div>
</div>
</div>
<!-- 부트스트랩 제이쿼리,번들 -->
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
login 시 필요한 데이터 베이스 생성
bbs 스키마 생성
create table
한 명의 유저 입력하기
INSERT INTO user VALUES ('pengsu', '1234', '펭수', '남성', 'pengsu@naver.com');
입력 됐는지 확인하기
SELECT * FROM user;
다시 이클립스로 돌아와서
user 패키지 -> User.java 클래스 생성
package user;
public class User {
// 데이터 베이스와 동일하게
// private라서 다른 클래스에서는 사용불가능하므로 get,set 메소드 사용해야함
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 {
// DB연결 객체들 선언
private Connection conn;
private PreparedStatement pstmt;
private ResultSet rs;
public UserDAO() {
try {
String dbURL = "jdbc:mysql://localhost:3306/BBS?useSSL=false";
String dbID = "root";
String dbPassword = "1234";
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(dbURL, dbID, dbPassword);
System.out.println("db연결완료");
} catch (Exception e) {
e.printStackTrace();
}
}
test 패키지 Test 클래스 만들어서 UserDAO 객체만들어서 테스트 해보기
package test;
import user.UserDAO;
public class Test {
public static void main(String[] args) {
UserDAO dao = new UserDAO();
}
}
정상적으로 연결됨을 확인한다.
userDAO에서 로그인 메소드 입력하기
// 로그인 메소드 입력( id,password) 리턴(1:성공 0:불일치 -1:아디없음 -2:에러)
public int login(String userID, String userPassword) {
// 유저Id의 유저가 있으면 password 가져옴
String SQL = "SELECT userPassword from USER where userID = ?";
try {
pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, userID);
rs = pstmt.executeQuery();//실행결과가 rs에 저장됨.
if (rs.next()) {//만약 rs가 있다면
//일단 유저가 있고, password를 비교한다.
if (rs.getString(1).equals(userPassword)) {
return 1; // 로그인 성공
} else
return 0; // 비밀번호 불일치
}
return -1; // 아이디가 없음(유저없음)
} catch (Exception e) {
e.printStackTrace();
} finally {
closeAll();//사용한 DB객체들을 닫아줌
}
return -2; // 데이터베이스 오류 (SQL)
}
closeAll 메소드 생성
//closeAll 메소드(사용한 DB객체들을 닫아줌 )
private void closeAll() {
try {
if (rs != null)
rs.close();
if (pstmt != null)
pstmt.close();
if (conn != null)
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
}
loginAction.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="user.UserDAO" %>
<!-- form으로 부터 전달된 값을 User객체의 프로퍼티(필드변수)에 설정
input 태그의 name과 자바빈의 프로퍼티명과 동일한 것에 대응-->
<% 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 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 ) {
out.println("<script>");
out.println("location.href = 'main.jsp'");
out.println("</script>");
} else if (result == 0) {
out.println("<script>");
out.println("alert('비밀번호가 틀립니다.')");
out.println("history.back()");
out.println("</script>");
} else if (result == -1) {
out.println("<script>");
out.println("alert('존재하지 않는 아이디입니다.')");
out.println("history.back()");
out.println("</script>");
} else if (result == -2) {
out.println("<script>");
out.println("alert('데이터베이스 오류가 발생했습니다.')");
out.println("history.back()");
out.println("</script>");
}
%>
</body>
</html>
테스트하기
1. 아이디 틀리기
현재 데이터 베이스에 저장되지 않은 아이디를 입력 할 경우 존재하지 않는다는 경고창 뜸
2. 비밀번호 틀리기
3. 로그인 성공
현재 main.jsp 는 생성되지 않았기 때문에 아래의 오류가 뜨는게 맞음
'BACKEND > Jsp' 카테고리의 다른 글
| 게시판 만들기 3 - 메인 페이지 ,게시판 ,글쓰기, 게시판 출력 (0) | 2023.10.11 |
|---|---|
| 게시판 만들기 2 - 회원가입 , 로그아웃 (0) | 2023.10.10 |
| 북마켓 프로젝트 10 (0) | 2023.09.27 |
| 북마켓 프로젝트 9 (0) | 2023.09.26 |
| 북마켓 프로젝트 8 (0) | 2023.09.26 |