웹 개발 – 로그인
개발환경
Eclipse
Mysql
웹 페이지를 만들어보자
우선 윈도우에서 로그인, 로그아웃, 회원가입, 회원탈퇴, 게시판 기능을 가진 간단한 홈페이지를 만들어보겠다.
오늘 만든 것은 로그인 페이지 레이아웃과 로그인시 mysql의 데이터와 연동해 로그인 성공, 비밀번호 오류, DB오류 구분짓는 것이다.
Eclipse를 다운받아 설치한다.
Eclipse를 켜고 jsp를 이용한 웹 개발을 위해
File -> New -> Other -> Web -> Dynamic Web Project
부트스트랩을 다운받는다
http://getbootstrap.com/docs/3.3/압축을 풀고 나오는 파일 css랑 js랑 font를 eclipse의 WebContent 폴더에 넣는다.
그리고 시작.
login.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="UTF-8"%>
<!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 JSW 게시판 웹사이트 </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">
<ui class="nav navbar-nav">
<li><a href="main.jsp">메인</a></li>
<li><a href="bbs.jsp">게시판</a></li>
</ui>
<ui 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>
<li><a href="join.jsp">회원가입</a></li>
</ul>
</li>
</ui>
</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">
<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 class="col-lg-4"></div>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
다음으로 Mysql과 연결하기 위해 connector를 다운받아 추가한다.
https://dev.mysql.com/downloads/connector/j/5.1.html압축을 풀고
폴더 안에 mysql-connector-java-5.1.49-bin.jar를 Referenced Libraries에 넣는다.
DB와 연동을 시켜주는 파일이다.
DB와 연동을 위한 jsp 를 만든다.
loginAction.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ 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 charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%
UserDAO userDAO = new UserDAO();
int result = userDAO.login(user.getUserID(), user.getUserPassword());
if(result==1){
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("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>
잘 작동한다.
내일은 회원가입과 게시판 그럼 ㅂㅂ
https://github.com/jsw4215