index.jsp 만들기

- 프로젝트를 실행할 때 가장 먼저 실행 해줄 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>JSP 게시판 웹 사이트</title>
</head>
<body>
	<script>
		location.href = 'main.jsp';
	</script>
</body>
</html>

 

부트스트랩 적용 방법

부트스트랩에서 다운받은 아래 폴더를 WebContent 폴더 안에 넣어준다.

login.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">
				<!-- 아이콘 바 하나의 작데기를 표현(3개)  -->
				<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 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;">
			<!-- loginAction에 정보를 보내주겠다 -->
				<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>
	
	<!-- 애니메이션을 담당할 J쿼리를 홈페이지 넣어준다. -->
	<script src = "https://code.jquery.com/jquery-3.1.1.min.js"></script>
	
	<!-- WebContent 폴더에 있는 JS폴더의 부트스트랩을 가져와준다. -->
	<script src = "js/bootstrap.js"></script>
	
</body>
</html>

 

mysql db 만들기(테이블 만들기)

- 데이터베이스 안에 테이블을 만들어 준다.

create database bbs;

use bbs;

create table user (
userID varchar(20),
userPassword vachar(20),
userName varchar(20),
userGender varchar(20),
userEmail varchar(50),
primary key (userID)
);

show tables;

desc user;

insert into user values('hyunji', '123','현지','여자','hello@naver.com');

select * from user;

commit;

desc user;

 

User.java만들기(자바빈즈 만들기)

- 로그인 회원정보 변수들을 만들어 준다. 

- 자바빈즈를 만들어준다.

- 한명의 변수를 만들어준다.

package user;

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 만들기(로그인 기능 만들기)

- 데이터베이스 접근 객체

- 실제로 DB 에서 정보를 저장하거나 연결하는 것을 나타낸다.

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
  }

 

loginAction.jsp 만들기

- login.jsp에서 받은 아이디와 비번을 받아서 이 페이지가 처리를 해준다.

- mysql 커넥터를 lib폴더 안에 넣어준다.

- 프로젝트폴더를 우클릭해서 java build path에서 라이브러리 클릭 후, add JARs를 해준 후, lib폴더에 추가한 jar 파일을 추가해준다.

<%@ 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"); %>
<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>
	<%
		
		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>");
		}
		
		UserDAO userDAO = new UserDAO();
		int result = userDAO.login(user.getUserID(), user.getUserPassword());
		System.out.println(result);

		if(result == 1){
			session.setAttribute("userID", user.getUserID());
			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("</script>");
			script.println("<script>");
			script.println("history.back()");
			script.println("</script>");
		}
		else if(result == -1){
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('존재하지 않는 아이디입니다.')");
			script.println("</script>");
			script.println("<script>");
			script.println("history.back()");
			script.println("</script>");
		}
		else if(result == -2){
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('데이터베이스 오류가 발생했습니다.')");
			script.println("</script>");
			script.println("<script>");
			script.println("history.back()");
			script.println("</script>");
		}
	%>
</body>
</html>
저작자표시 비영리 변경금지

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

[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
[부트스트랩] Spring 게시판 이용하여 부트스트랩 수정 삭제 추가  (0) 2020.05.19

+ Recent posts

티스토리툴바