:: GO치의 에브리데이 일기장::

전체 글

[JSP] 부트스트랩을 이용한 JSP게시판 만들기(회원가입) 2020.06.06

[JSP] 부트스트랩을 이용한 JSP게시판 만들기(회원가입)

GOGO치삼 2020. 6. 6. 01:19

2020. 6. 6. 01:19

join.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">
<!-- 부트 캠프 참조 -->
<meta name="viewport" content="width=device-width", initial-scale="1">
<!--  css 폴더에 있는 것을 참조한다. -->
<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-expanded="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-expended="false">접속하기<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="login.jsp">로그인</a></li>
						<li class="active"><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="joinAction.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>
				
				<div class="form-group">
					<input type="text" class="form-control" placeholder="이름" name="userName" maxlength="20">
				</div>
				
				<div class="form-group" style="text-align: center;">
					<div class="btn-group" data-toggle="buttons">
						<label class="btn btn-primary active">
							<input type="radio" name="userGender" autocomplete="off" value="남자" checked>남자
						</label>
						<label class="btn btn-primary">
							<input type="radio" name="userGender" autocomplete="off" value="여자">여자
						</label>
					</div>
				</div>
				
					<div class="form-group">
						<input type="email" class="form-control" placeholder="이메일" name="userEmail" 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>

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;
   private PreparedStatement pstmt;
   private ResultSet rs;

   public UserDAO() {
      try {
         String dbURL = "jdbc:mysql://localhost:3306/bbs?serverTimezone=UTC";
         String dbID = "root";
         String dbPassword = "920424";
         //mysql에 접속 할 수 있도록 매개체 역할을 해주 코딩 
         Class.forName("com.mysql.jdbc.Driver");
         conn = DriverManager.getConnection(dbURL, dbID, dbPassword);
         System.out.println("db 접속 완료");
         
      } catch (Exception e) {
         e.printStackTrace();
      }
   }
   
   // 로그인을 시도하는 함수 
   public int login(String userID, String userPassword) {
		String SQL = "SELECT userPassword FROM USER WHERE userID = ?";
				try {
					//해킹 기법을 방어하기 위한 코딩 
					pstmt = conn.prepareStatement(SQL);
					//값을 가져온다.
					pstmt.setString(1, userID) ; 
					//실행한 결과를 rs에 넣어준다.
					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; //데이터베이스 오류 
   		}//login end
   
   //회원가입 기능 
   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());
				return pstmt.executeUpdate();
				// 0 이상의 숫자가 나오기 떄문에 성공
				}catch(Exception e) {
					e.printStackTrace();
				}
					return -1; //데이터베이스 오류
		}//join end
  }

joinAction.jsp (회원가입 기능을 처리)

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="user.UserDAO"%>
<%@ page import="java.io.PrintWriter"%>

<!--login.jsp에서 받아온 자바빈즈를 UTF-8로 받아준다. -->
<%
	request.setCharacterEncoding("UTF-8");
%>
<!-- 현재 페이지에서만 자바빈즈를 사용해준다. -->
<jsp:useBean id="user" class="user.User" scope="page" />
<!-- join.jsp에서 보내는 id 값을 가져온다 -->
<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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
	<%
	String userID = null;
	if(session.getAttribute("userID") != null) {
		// 자신에게 할당된 유저아이디를 유저 아이디에 저장한다.
		userID = (String) session.getAttribute("userID");
	}
	//만약 유저아이디가 널값이 아니라면
	if (userID != null){
		PrintWriter script = response.getWriter();
		script.println("<script>");
		script.println("이미 로그인이 되어있습니다.");
		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 {
			//db 접근 할 수 있는 객체를 써준다.
			UserDAO userDAO = new UserDAO();
			// <jsp:useBean id="user" 의 아이디가 온다
			int result = userDAO.join(user);
			if (result == -1) {
				PrintWriter script = response.getWriter();
				script.println("<script>");
				script.println("alert('이미 존재하는 아이디 입니다.')");
				//로그인페이지로 돌려보낸다.
				script.println("history.back()");
				script.println("</script>");
			}
			else {
				//세션을 부여해주기
				session.setAttribute("userID", user.getUserID());
				PrintWriter script = response.getWriter();
				script.println("<script>");
				script.println("location.href='main.jsp'");
				script.println("</script>");
			}
		}
	%>
</body>
</html>

세션 부여해주기

- 로그인 엑션 페이지에서 세션을 할당해준다.

-조인엑션에 세션을 부여해준다.

logoutAction.jsp 만들기 (부여된 세션을 없애준다.)

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP 웹 게시판 사이트</title>
</head>
<body>
<%
	//세션값 해제 해주기
	session.invalidate();
%>
	<script>
		//해제하고 메인으로 돌아가기
		location.href = 'main.jsp';
	</script>

</body>
</html>

loginAction.jsp 페이지에 아래 같은 코드를 넣어준다.(세션 확인해서 처리하기)

	String userID = null;
		//세션을 확인해서 userID가 있다면,
		if(session.getAttribute("userID") != null) {
			// 자신에게 할당된 유저아이디를 유저 아이디에 저장한다.
			userID = (String) session.getAttribute("userID");
		}
		//만약 유저아이디가 널값이 아니라면
		if (userID != null){
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("이미 로그인이 되어있습니다.");
			script.println("location.href = 'main.jsp'");
			script.println("</script>");
		}

joinAction.jsp 페이지에 아래 같은 코드를 넣어준다.(세션을 확인해서 처리하기)

	String userID = null;
	if(session.getAttribute("userID") != null) {
		// 자신에게 할당된 유저아이디를 유저 아이디에 저장한다.
		userID = (String) session.getAttribute("userID");
	}
	//만약 유저아이디가 널값이 아니라면
	if (userID != null){
		PrintWriter script = response.getWriter();
		script.println("<script>");
		script.println("이미 로그인이 되어있습니다.");
		script.println("location.href = 'main.jsp'");
		script.println("</script>");
	}

main.jsp만들기

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<!--  스크립트 문장을 수행 하게  함 -->
	<%@ page import="java.io.PrintWriter" %>
<!DOCTYPE html>
<html>
<head>
<meta 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>
<%
//로그인이 된 사람은 로그인 정보를 담아두게한다.
	String userID = null;
	// 만약 세션이 존재하는 사람이다면, 
	if(session.getAttribute("userID") != null){
	//스트링 형태로 값을 형변환 해준다. 
	userID = (String) session.getAttribute("userID");
}
%>

	<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-expanded="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 class="active"><a href="main.jsp">메인</a>
				<li><a href="bbs.jsp">게시판</a>
			</ul>
			<%
			//로그인이 되어있지 않다면
			if(userID == null) {
			%>
			<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><a href="login.jsp">로그인</a></li>
						<li><a href="join.jsp">회원가입</a></li>
					</ul>
				</li>
			</ul>
			<%
			  } else { //로그인 된 회원만 볼수 있는 화면 
						%>
							<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><a href="logoutAction.jsp">로그아웃</a></li>
								</ul>
							</li>
				</ul>
			<%
			}
			%>
		</div>
	</nav>

	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="js/bootstrap.js"></script>
</body>

저작자표시 비영리 변경금지

':: IT > 포토폴리오' 카테고리의 다른 글

[JSP] 부트스트랩을 이용한 수강신청 게시판 만들기(index.jsp 폼 만들기) (0)	2020.06.07
[JSP] 부트스트랩을 이용한 JSP게시판 만들기(게시판) (0)	2020.06.06
[JSP] 부트스트랩을 이용한 JSP게시판 만들기(로그인) (0)	2020.06.06
[HTML/CSS] 웹 사이트 HTML/CSS 로 구현하기 (0)	2020.05.22
[맥]부트스트랩으로 간단한 개인 홈페이지 만들기/Sublime Text 3 설치/파일질러 설치 (0)	2020.05.22

PREV 이전 1 ···37 38 39 40 41 42 43 ···142 NEXT 다음

:: GO치의 에브리데이 일기장::

전체 글

[JSP] 부트스트랩을 이용한 JSP게시판 만들기(회원가입)

':: IT > 포토폴리오' 카테고리의 다른 글

+ Recent posts

티스토리툴바