반응형
안녕하세요 준입니다!!
어제 JSP와 JQUERY로 게시판을 만들어봤는데요
2022.04.26 - [Practice] - JSP와 Jquery로 게시판 만들어 보기
JSP와 Jquery로 게시판 만들어 보기
오늘은 수업시간에 배운 JSP와Jquery를 통해 게시판을 만들어볼께요! 요즘에는 이런 방식이 아니라 스프링을 통해서 만드는데 1990년대 2000년대 까지 이 방식으로 많이 만들었다고 해요. 현업에 가
puenti.tistory.com
만들면서 많이 부족하다는 생각이 들더라구요!!
그래서 오늘은 조금 더 욕심 내서 만들고 싶어서 다시 한 번 만들어봤어요!!
먼저 로그인 페이지부터 만들어봅니다!!
중간중간에 주석처리하면서 설명을 해놨어요!!
부트스트랩이란걸 이용해서 반응형 웹을 만들어봤어요!!
<%@ 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">
<!-- 부트스트랩은 컴퓨터, 모바일 어떤걸로 접속하더라도 해상도에 맞게 디자인을 보여주는 템플릿. 그래서 반응형 웹에 사용되는 메타 태그를 적어준다 -->
<link rel="stylesheet" href="css/bootstrap.css"> <!-- 디자인을 담당하는 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 data-toggle="collapse" id = "bs-example-navbar-collapse-1">
<ul class = "nav navbar-nav">
<li><a href="main.sjp">메인</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-expanded="false">접속하기<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="active"><a href = "login.jsp">로그인</a></li> <!-- active는 현재 선택이 되었음 -->
<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;">
<form method="post" action="loginAction.jsp"> <!-- post 정보를 숨기는 메서드 -->
<h3 syle = "text-align :center;">로그인 화면</h3> <!-- loginAction 페이지로 로그인 정보를 보내주겠다 -->
<div class="form-group">
<input type="text" class="form-control" placeholder="아이디" name="userID" maxlength = "20">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="비밀번호" name="userPassword" maxlength = "20">
</div>
<input type = "submit" class = "btn btn-primary form-control" value="로그인">
<!-- 로그인을 누르면 loginAction 페이지로 이동 -->
</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>
접속하기를 누르면 드롭다운도 되요!
화면이 줄어도 맞춰서 화면을 보여줘요!!
이제는 회원 정보를 관리하는 데이터베이스를 구축해볼게요
데이터베이스는 MySQL로 구축할거예요!
mysql> USE BBS;
Database changed
mysql> CREATE TABLE USER(
-> userID VARCHAR(20),
-> userPassword VARCHAR(20),
-> userName VARCHAR(20),
-> userGender VARCHAR(20),
-> userEmail VARCHAR(50),
-> PRIMARY KEY (userID)
-> );
테이블이 잘만들어졌네요!
이제 값을 넣도록 할게요!
mysql> INSERT INTO USER VALUES('dongwon', '1234', '강동원', '남자', 'dongwon@naver.com');'
잘 들어갔네요ㅎㅎ
이제 JSP 서버에서 사용할 수 있게 Java Beans를 만들어줄께요!
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;
}
}이제는 데이터베이스에서 회원정보를 불러오거나 넣을 수 있게 하는 DAO (데이터베이스 접근 객체)를 만들어볼께요!
로그인 기능이라고 생각하면 되요!!
// 로그인 기능에 대한 구현
public int login(String userID, String userPassword) {
// SQL에 넣을 명령어 적어주기
String SQL = "SELECT userPassword FROM USER WHERE userID = ?"; // ? 안에는 입력받은 userID가 들어간다
try {
pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, userID);
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; // 데이터베이스 오류
}그리고 다음엔 이 함수를 받아줄 로그인 페이지를 만들어줄께요!!!
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import = "user.UserDAO" %> <!--우리가 만든 클래스를 사용해주기 위해-->
<%@ page import = "java.io.PrintWriter" %> <!-- JS 문장을 작성하기 위해 -->
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:useBean id = "user" class="user.User" scope="page" />
<jsp:setProperty name="user" property="userID" /> <!-- 로그인페이지에서 넘겨준 userID를 받음 -->
<jsp:setProperty name="user" property="userPassword" />
<!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">
<!-- 부트스트랩은 컴퓨터, 모바일 어떤걸로 접속하더라도 해상도에 맞게 디자인을 보여주는 템플릿. 그래서 반응형 웹에 사용되는 메타 태그를 적어준다 -->
<link rel="stylesheet" href="css/bootstrap.css"> <!-- 디자인을 담당하는 css 참조 완료 -->
<title>JSP 게시판 웹사이트</title>
</head>
<body>
<%
UserDAO userDAO = new UserDAO();
int result = userDAO.login(user.getUserID(), user.getUserPassword());
/* 로그인 페이지에서 각각 입력된 값이 넘어와서 login()에 넣어줘서 실행하게 된다
-2 ~ 1까지의 값이 result 값에 담기게 된다
*/
if (result == 1){
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("location.href = 'main.jsp'"); // 로그인이 성공하면 main.jsp로 이동한다
script.println("</script>");
}
else if (result == 0){
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('비밀번호가 틀립니다')");
script.println("history.back()"); // 로그인을 못 했으니 로그인 화면으로 돌아간다
script.println("</script>");
}
else if (result == -1){
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('존재하지 않는 아이디입니다')");
script.println("history.back()"); // 로그인을 못 했으니 로그인 화면으로 돌아간다
script.println("</script>");
}
else if (result == -2){
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('데이터베이스 오류가 발생했습니다')");
script.println("history.back()"); // 로그인을 못 했으니 로그인 화면으로 돌아간다
script.println("</script>");
}
%>
</body>
</html>이렇게 하고 buidpath에서 mysql과 jdbc를 연결시켜주는 드라이버를 WEB-INF/lib에 넣어주고 실행시켜봤다
회원 정보가 없는 값을 넣어주니 로그인이 안되고 다시 로그인 화면으로 돌아왔다
그럼 이번에는 아까 넣어준 회원정보를 넣어볼게요~
아이디가 없을때!
아이디는 맞는데 비밀번호가 틀렸을때
아이디랑 비밀번호가 같을때!!
아직 로그인 성공한 화면을 안만들어서 화면이 저렇게 나와요!
의도한데로 잘 작동하는걸 볼 수 있습니다!!
이번 포스팅은 이까지 하고
다음 포스팅에서 계속 하도록 할께요!!
반응형
'Practice' 카테고리의 다른 글
| JSP로 반응형 게시판 만들기[6/9], 게시판 보기, 목록 기능 구현하기 (0) | 2022.04.28 |
|---|---|
| JSP로 반응형 게시판 만들기[5/9], 글 쓰기 기능 구현 (0) | 2022.04.28 |
| JSP로 반응형 게시판 만들기 [4/9], DB 구축, 게시판 기능 구현 (0) | 2022.04.28 |
| JSP로 반응형 게시판 만들기 [3/9], 로그인 회원가입 페이지 만들기, 세션 설정 (0) | 2022.04.28 |
| JSP로 반응형 게시판 만들기 [2/9], 회원가입 양식 만들기 (0) | 2022.04.27 |