728x90
반응형
JSP에서 DB 연동
및
로그인 회원가입 페이지 구현
구현할 페이지 목록
- index.jsp: 메인페이지이며 로그인 버튼과 회원가입 버튼으로 구성
- login.jsp: 로그인 페이지이며, 메인페이지에서 로그인 버튼이 onclick()되면 로그인 화면으로 이동
로그인 정보를 loginAction.jsp에 POST - loginAction.jsp: 로그인 페이지에 입력된 사용자 정보를 GET하여 그 값을 DB값과 비교/검사
- join.jsp: 회원가입 페이지이며, 메인페이지에서 회원가입 버튼이 onclick()되면 회원가입 화면으로 이동
회원가입 정보를 joinAction.jsp에 POST - joinAction.jsp: 회원가입 페이지에 입력된 사용자 정보를 GET하여 그 값을 DB에 INSERT
1. TABLE 생성
create table user(
userID varchar(20),
userPassword varchar(20),
userName varchar(20),
userGender varchar(20),
userEmail varchar(20),
primary key (userID)
);userID, userPassword, userName, userGender, userEmail을 생성하고 userID를 기본키로 설정
2. 메인 페이지 (index.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Index</title>
</head>
<body>
<h1>Welcome to the Index Page</h1>
<a href="login.jsp">Login</a>
<br>
<a href="join.jsp">Join</a>
</body>
</html>
3. login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
</head>
<body>
<h1>Login</h1>
<form method="post" action="login.jsp">
<label for="userID">Username:</label>
<input type="text" id="userID" name="userID" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="submit" value="Login">
</form>
<button onclick="window.location.href='join.jsp'">Join</button>
</body>
</html>로그인에 필요한 정보는 userID, userPassword이다.
회원가입된 정보를 입력하고 Login버튼을 누르면 LoginAction.jsp로 넘어가서 로그인이 되었는지 확인한다.
4. loginAction.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login Action</title>
</head>
<body>
<%
String userID = request.getParameter("userID");
String password = request.getParameter("userPassword");
String dbURL = "jdbc:mysql://localhost:3306/mydb"; // 데이터베이스 URL 수정 필요
String dbUser = "root"; // 데이터베이스 사용자명 수정 필요
String dbPassword = "root"; // 데이터베이스 비밀번호 수정 필요
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(dbURL, dbUser, dbPassword);
String sql = "SELECT * FROM user WHERE userID=? AND userPassword=?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, userID);
pstmt.setString(2, password);
rs = pstmt.executeQuery();
if (rs.next()) {
out.println("Login Successful");
} else {
out.println("Invalid credentials. Please try again.");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (pstmt != null) {
try {
pstmt.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
%>
</body>
</html>login.jsp에서 받은 값을 db에서 확인하여 결과를 출력해준다.
5. join.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Join</title>
</head>
<body>
<h1>Join</h1>
<form method="post" action="joinAction.jsp">
<label for="userID">ID:</label>
<input type="text" id="userID" name="userID" required>
<br>
<label for="userPassword">Password:</label>
<input type="password" id="userPassword" name="userPassword" required>
<br>
<label for="userName">Name:</label>
<input type="text" id="userName" name="userName" required>
<br>
<label for="userGender">Gender:</label>
<input type="text" id="userGender" name="userGender" required>
<br>
<label for="userEmail">Email:</label>
<input type="email" id="userEmail" name="userEmail" required>
<br>
<input type="submit" value="Join">
</form>
</body>
</html>회원가입을 할 땐, id와 pw 뿐만 아니라 회원의 다른 정보도 입력받으며, join이 눌리면
joinAction.jsp로 넘어가서 INSERT하고 실행 결과를 출력해준다.
단, ID는 PK이기 때문에 중복이 불가능.
6. joinAction.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Join Action</title>
</head>
<body>
<%
String userID = request.getParameter("userID");
String userPassword = request.getParameter("userPassword");
String userName = request.getParameter("userName");
String userGender = request.getParameter("userGender");
String userEmail = request.getParameter("userEmail");
String dbURL = "jdbc:mysql://localhost:3306/mydb"; // 데이터베이스 URL 수정 필요
String dbUser = "root"; // 데이터베이스 사용자명 수정 필요
String dbPassword = "root"; // 데이터베이스 비밀번호 수정 필요
Connection conn = null;
PreparedStatement pstmt = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(dbURL, dbUser, dbPassword);
String sql = "INSERT INTO user (userID, userPassword, userName, userGender, userEmail) VALUES (?, ?, ?, ?, ?)";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, userID);
pstmt.setString(2, userPassword);
pstmt.setString(3, userName);
pstmt.setString(4, userGender);
pstmt.setString(5, userEmail);
pstmt.executeUpdate();
out.println("Join Successful");
} catch (Exception e) {
e.printStackTrace();
} finally {
if (pstmt != null) {
try {
pstmt.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
%>
</body>
</html>loginAction.jsp과 기능은 크게 다르지 않지만 더 많은 정보를 받고, 값을 DB에 INSERT 해주는 점이 다르다.
실행 결과
1.메인페이지
2. 회원가입
3. 회원가입 성공
4. 로그인 페이지
5. 로그인 성공
6. DB 테이블
728x90
반응형
'Web > JSP' 카테고리의 다른 글
| [Java] StringBuilder와 String의 차이 | 민민의 하드디스크 - 티스토리 (0) | 2023.08.07 |
|---|---|
| [JSP] 세션(Session) 활용하여 로그인 페이지 데이터 저장, 이동하기 | 민민의 하드디스크 - 티스토리 (0) | 2023.06.12 |
| [JSP] 이클립스에서 JSP와 MySQL 연동하기 | 민민의 하드디스크 - 티스토리 (0) | 2023.06.09 |
| [JSP] 이클립스(eclipse) 파일 저장 시 오류 | 민민의 하드디스크 - 티스토리 (2) | 2023.06.07 |
