728x90
1~3편 바로가기
[JSP] 게시판 만들기 | 1편. 환경 설정 및 JSP 개념 이해
1. 목표 로그인, 회원가입, 게시판 기능 구현하기 2. 환경설정 JDK - 17버전 --> 환경변수 설정 다시 해줌 톰캣 - 9.0버전 이클립스 - Java EE Developers 이클립스 실행 후, Dynamic Web Project로 프로젝트를 생
ururuwave.tistory.com
[JSP] 게시판 만들기 | 2편.데이터베이스 설치 및 연동
⬇️ 1편 바로가기 ⬇️ [JSP] 게시판 만들기 | 1편. 환경 설정 및 JSP 개념 이해 1. 목표 로그인, 회원가입, 게시판 기능 구현하기 2. 환경설정 JDK - 17버전 --> 환경변수 설정 다시 해줌 톰캣 - 9.0버전
ururuwave.tistory.com
[JSP] 게시판 만들기 | 3편.로그인 기능 구현하기
⬇️ 1편 바로가기 ⬇️ [JSP] 게시판 만들기 | 1편. 환경 설정 및 JSP 개념 이해 1. 목표 로그인, 회원가입, 게시판 기능 구현하기 2. 환경설정 JDK - 17버전 --> 환경변수 설정 다시 해줌 톰캣 - 9.0버전
ururuwave.tistory.com
1.회원가입 UI 만들기(join.jsp)
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JSP 회원가입 페이지</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<style>
/* 네비게이션 바의 드롭다운 메뉴 위치 조정 */
.navbar-nav .dropdown-menu {
position: absolute;
right: 0;
overflow-x: hidden;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 p-3 bg-secondary-subtle my-5 rounded">
<form class="p-3" action="joinAction.jsp">
<h2 class="text-center"><b>회원가입</b></h2>
<div class="form-group py-2">
<label for="userID">아이디</label>
<input type="text" class="form-control" id="userID" name="userID" placeholder="아이디 입력" required>
</div>
<div class="form-group py-2">
<label for="userPassword">비밀번호</label>
<input type="password" class="form-control" id="userPassword" name="userPassword" placeholder="비밀번호 입력" required>
</div>
<div class="form-group py-2">
<label for="userName">이름</label>
<input type="text" class="form-control" id="userName" name="userName" placeholder="이름 입력" required>
</div>
<div class="form-group py-2">
<label>성별</label>
<div>
<input type="radio" id="male" name="userGender" value="male" required>
<label for="male">남자</label>
<input type="radio" id="female" name="userGender" value="female" required>
<label for="female">여자</label>
</div>
</div>
<div class="form-group py-2">
<label for="userEmail">이메일</label>
<input type="email" class="form-control" id="userEmail" name="userEmail" placeholder="이메일 입력" required>
</div>
<button type="submit" class="btn btn-primary" style="float:right; margin-top:10px;">회원가입</button>
</form>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
부트스트랩을 이용하여 UI를 만들었다.
회원가입 버튼을 누르면 joinAction.jsp가 실행된다.
2. 회원가입 실행 로직 만들기.( UserDAO.java )
아래 코드를 추가해준다.
public int join(User user) {
String sql = "INSERT INTO USER VALUES(?,?,?,?,?)";
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, user.getUserID());
pstmt.setString(2, user.getUserPassword());
pstmt.setString(3, user.getUserName());
pstmt.setString(4, user.getUserGender());
pstmt.setString(5, user.getUserEmail());
int result = pstmt.executeUpdate();
if(result == 1) {
return 0;
}
}catch(Exception e){
e.printStackTrace();
}
return -1; //데이터베이스 오류
}
로그인 로직과 마찬가지로 상태에 따라 리턴값을 달리 줘서 구분한다.
정상 수행은 0을 리턴하고 DB오류는 -1을 리턴한다.
3. 회원가입 버튼 동작 구현하기. (joinAction.jsp)
위와 같이 경로에 맞춰 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");%>
<!-- 자바빈은 데이터를 저장하고 데이터에 접근하는 메서드(getter, setter)를 제공한다. -->
<jsp:useBean id="user" class="user.User" scope = "page"/>
<!-- 프로퍼티에 해당하는 setter가 호출되어 요청(request)에 있는 같은 이름의 파라미터 값으로 설정됨 -->
<jsp:setProperty name="user" property="userID"/>
<jsp:setProperty name="user" property="userPassword"/>
<jsp:setProperty name="user" property="userName"/>
<jsp:setProperty name="user" property="userGender"/>
<jsp:setProperty name="user" property="userEmail"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 액션</title>
</head>
<body>
<%
/* 로그인 세션확인 */
String userID = null;
if(session.getAttribute("userID") !=null){ //세션ID 존재하면 userID에 값넣어줌.
userID = (String)session.getAttribute("userID");
}
if(userID != null){
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('이미 로그인이 되어있습니다.')");
script.println("location.href = 'main.jsp'");
script.println("</script>");
}
if(user.getUserID() ==null || user.getUserPassword() == null || user.getUserName()==null
||user.getUserGender()==null||user.getUserEmail()==null){
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('입력이 안 된 사항이 있습니다.')");
script.println("history.back()");
script.println("</script>");
} else {
UserDAO userDAO = new UserDAO();
int result = userDAO.join(user);
if(result == -1){ //DB오류
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('이미 존재하는 아이디입니다.')");
script.println("history.back()");
script.println("</script>");
} else if(result == 0){//회원가입 완료.
session.setAttribute("userID",user.getUserID());//세션ID부여
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('회원가입이 완료되었습니다.')");
script.println("location.href = 'main.jsp'");
script.println("</script>");
}
}
%>
</body>
</html>✔️회원가입시 모든 input이 필수입력사항이므로 , 하나라도 null이면 alert창을 띄워준다.
✔️ 모든 input값이 null이 아님을 확인하고나면 아이디 중복값을 확인한다.
✔️ userID는 PRIMARY KEY이기 때문에 userID가 중복이면 DB오류가 발생한다.
때문에, result가 -1이면 이미 존재하는 아이디라는 알림창을 띄워준다.
✔️ 정상 회원가입이 되면 main페이지로 이동하도록 해준다.
회원가입 끝!
4. 로그아웃 기능 구현 (logoutAction.jsp)
로그아웃 버튼을 눌러주면, logoutAction.jsp가 실행되도록 한다.
<li><a class="dropdown-item" href="logoutAction.jsp">로그아웃</a></li>
href에 경로를 설정해주면 된다.
webapp하위에 logoutAction파일을 생성해준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그아웃 액션</title>
</head>
<body>
<%
session.invalidate(); //세션을 빼앗는다.
%>
<script>
location.href = 'main.jsp';
</script>
</body>
</html>
session.invalidate()로 세션을 빼앗고 main.jsp로 가도록 유도해준다.
로그아웃 끝!
728x90
'프로그래밍 언어 > Java' 카테고리의 다른 글
| [IntelliJ] Live Templates 사용법 | 반복되는 코드 편하게 작성하기 (0) | 2024.08.08 |
|---|---|
| [JSP] 게시판 만들기 | 5편.게시판 기능 구현하기 (1) | 2024.02.07 |
| [JSP] 게시판 만들기 | 3편.로그인 기능 구현하기 (0) | 2024.02.07 |
| [JSP] 게시판 만들기 | 2편.데이터베이스 설치 및 연동 (1) | 2024.02.07 |
| [JSP] 게시판 만들기 | 1편. 환경 설정 및 JSP 개념 이해 (0) | 2024.02.07 |
