'jsp 로그인'에 해당되는 글 3건

#8 로그인 디자인 및 기능 구현

2020/JSP 기본 WEB 만들기(미완성) 2020. 5. 29. 17:08

1. login.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="text/html; charset=utf-8">

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css?after">

<title>JSP Ajax fxProbest</title>

<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<!-- 자바스크립트 내용 삭제 로그인 디자인 및 기능 구현 part 삭제-->
</head>
<body>

	<%
		//userID를 초기화 해주고 session에서 userID값을 가져옵니다. 만약에 null이 아니라면 userID에 가져온 userID값을 넣어줍니다.
	String userID = null;
	if (session.getAttribute("userID") != null) {
		userID = (String) session.getAttribute("userID");
	}
	//로그인 된 상태라면 (로그인 디자인 및 기능 구현 PART 추가 수정)
	if (userID != null){
		session.setAttribute("messageType", "오류 메시지");
		session.setAttribute("messageContent", "이미 로그인이 되어 있는 상태입니다.");
		response.sendRedirect("index.jsp");
		return;
	}
	%>
	<!-- 부트스트랩을 이용하여 메뉴를 만들어 주도록 하겠씁니다. -->
	<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="index.jsp">ProbestSoft members chat</a>
		</div>
		<div class="collapse navbar-collapse"
			id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li class="active"><a href="index.jsp">메인</a>
			</ul>
			<%
				// userID가 null 이면 로그인이 되지 않은 경우
			if (userID == null) {
			%>
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="buton" aria-haspopup="true"
					aria-expand="false">접속하기<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="login.jsp">로그인</a>
						<li><a href="join.jsp">회원가입</a>
					</ul></li>
			</ul>
			<!-- (로그인 디자인 및 기능 구현 PART 추가 삭제) -->
			<%
			}
			%>
		</div>
	</nav>
	<div class="container">
		<form method="post" action="./userLogin">
			<table class="table table-bordered table-hover" style="text-align: center; border: 1px solid #dddddd">
				<thead>
					<tr>
						<th colspan="2"><h4>로그인 양식</h4></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td style="width: 110px;"><h5>아이디</h5></td>
						<td><input class="form-control" type="text" name="userID" maxlength="20" placeholder="아이디를 입력하세요."></td>
					</tr>
					<tr>
						<td style="width: 110px;"><h5>비밀번호</h5></td>
						<td><input class="form-control" type="password" name="userPassword" maxlength="20" placeholder="비밀번호를 입력하세요."></td>
					</tr>
					<tr>
						<td style="text-align: left;" colspan="2"><input class="btn btn-primary pull-right" type="submit" value="로그인">
					</tr>
				</tbody>
			</table>
		</form>
	</div>

	<!-- 회원 등록 양식 삭제 로그인 디자인 및 기능 구현 part  -->
	<%
		//서버로부터 내용을 받아왔는지 확인.
	String messageContent = null;
	if (session.getAttribute("messageContent") != null) {
		messageContent = (String) session.getAttribute("messageContent");
	}
	String messageType = null;
	if (session.getAttribute("messageType") != null) {
		messageType = (String) session.getAttribute("messageType");
	}
	if (messageContent != null) {
	%>
	<!-- 모달창 -->
	<div class="modal fade" id="messageModal" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="vertical-alignment-helper">
			<div class="modal-dialog vertical-align-center">
				<div
					class="modal-content <%if (messageType.equals("오류 메시지"))
	out.println("panel-warning");
else
	out.println("panel-success");%>">
					<div class="modal-header panel-heading">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times</span>
							<!-- bootstrap sr-only: 화면상에 출력하지 않음 -->
							<span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title">
							<%=messageType%>
						</h4>
					</div>
					<div class="modal-body">
						<%=messageContent%>
					</div>
					<div class="modal-footer">
						<!-- data-dissmiss="modal" 자바스크립트에의해 닫기 역할을 하는 속성 -->
						<button type="button" class="btn btn-primary"
							data-dissmiss="modal">확인</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		$('#messageModal').modal("show");
	</script>
	<%
		session.removeAttribute("messageContent");
		session.removeAttribute("messageType");
	}
	%>
	<!-- 하나의 모달을 더 추가 해줌. 정보를 띄워주는 모달 창 아이디 중복체크 -->
	<div class="modal fade" id="checkModal" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="vertical-alignment-helper">
			<div class="modal-dialog vertical-align-center">
				<div id="checkType" class="modal-content panel-info">
					<div class="modal-header panel-heading">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times</span>
							<!-- bootstrap sr-only: 화면상에 출력하지 않음 -->
							<span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title">확인 메시지</h4>
					</div>
					<div id="checkMessage" class="modal-body"></div>
					<div class="modal-footer">
						<!-- data-dissmiss="modal" 자바스크립트에의해 닫기 역할을 하는 속성 -->
						<button type="button" class="btn btn-primary"
							data-dissmiss="modal">확인</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

2. logoutAction.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="text/html; charset=utf-8">

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">

<title>JSP Ajax fxProbest</title>
</head>
<body>
	<%
		session.invalidate();
	%>
	<script>
		location.href="index.jsp";
	</script>

</body>
</html>

3. index.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="text/html; charset=utf-8">

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">

<title>JSP Ajax fxProbest</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
	
	<% //userID를 초기화 해주고 session에서 userID값을 가져옵니다. 만약에 null이 아니라면 userID에 가져온 userID값을 넣어줍니다.
		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="index.jsp">ProbestSoft members chat</a>
		</div>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li class="active"><a href="index.jsp">메인</a>
			</ul>
			<% // userID가 null 이면 로그인이 되지 않은 경우
				if(userID == null){
			%>
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="buton" aria-haspopup="true"
					aria-expand="false">접속하기<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="login.jsp">로그인</a>
						<li><a href="join.jsp">회원가입</a>
					</ul>
				</li>
			</ul>
			<%
				// userID가 null이 아닐 경우 로그인이 되었다는 것.
				} 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-expand="false">회원관리<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="logoutAction.jsp">로그아웃</a></li>
					</ul>
				</li>
			</ul>
			<%
				}
			%>
		</div>
	</nav>
	<!-- 실시간 채팅 서비스 디자인 구현 -->
	<div class="container bootstrap snippet">
		<div class="row">
			<div class="col-xs-12">
				<div class="portlet portlet-default">
					<div class="portlet-heading">
						<div class="portlet-title">
							<h4><i class="fa fa-circle text-green"></i>실시간 채팅창</h4>
						</div>
						<div class="clearfix"></div>
					</div>
					
					<div id="chat" class="panel-collapse collapse in">
					
						<div id="chatList" class="portlet-body chat-widget" style="overflow-y auto; width: auto; height: 600px;">
						</div>
						<div class="portlet-footer">
						
							<div class="row" style="height: 90px;">
								<div class="form-group col-xs-10">
									<textarea style="height: 80px;" id="chatContent" class="form-control" placeholder="메시지를 입력하세요." maxlength="100"></textarea>
								</div>
								<div class="form-group col-xs-2">
									<button type="button" class="btn btn-default pull-right" onclick="submitFunction();">전송</button>
									<div class="clearfix"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="alert alert-success" id="successMessage" style="display: none;">
		<strong>메시지 전송에 성공하였습니다.</strong>
	</div>
	<div class="alert alert-danger" id="dangerMessage" style="display: none;">
		<strong>이름과 내용을 모두 입력해 주세요.</strong>
	</div>
	<div class="alert alert-warning" id="warningMessage" style="display: none;">
		<strong>데이터베이스 오류가 발생하였습니다.</strong>
	</div>
		<%
		//서버로부터 내용을 받아왔는지 확인.
	String messageContent = null;
	if (session.getAttribute("messageContent") != null) {
		messageContent = (String) session.getAttribute("messageContent");
	}
	String messageType = null;
	if (session.getAttribute("messageType") != null) {
		messageType = (String) session.getAttribute("messageType");
	}
	if (messageContent != null) {
	%>
	<!-- 모달창 -->
	<div class="modal fade" id="messageModal" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="vertical-alignment-helper">
			<div class="modal-dialog vertical-align-center">
				<div
					class="modal-content <%if (messageType.equals("오류 메시지"))
	out.println("panel-warning");
else
	out.println("panel-success");%>">
					<div class="modal-header panel-heading">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times</span>
							<!-- bootstrap sr-only: 화면상에 출력하지 않음 -->
							<span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title">
							<%=messageType%>
						</h4>
					</div>
					<div class="modal-body">
						<%=messageContent%>
					</div>
					<div class="modal-footer">
						<!-- data-dissmiss="modal" 자바스크립트에의해 닫기 역할을 하는 속성 -->
						<button type="button" class="btn btn-primary"
							data-dissmiss="modal">확인</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		$('#messageModal').modal("show");
	</script>
	<%
		session.removeAttribute("messageContent");
		session.removeAttribute("messageType");
	}
	%>
	
	<div id="container">

</div>
</body>
</html>

4. UserLoginServlet

package chat;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import user.UserDAO;

/**
 * Servlet implementation class UserLoginServlet
 */
@WebServlet("/UserLoginServlet")
public class UserLoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
  
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=UTF-8");
		String userID = request.getParameter("userID");
		String userPassword= request.getParameter("userPassword");
		// 만약에 userID나 userPassword가  null이거나 공백이라면 로그인을 할 수 없기 때문에 오류창을 띄움
		if(userID == null || userID.equals("") || userPassword == null || userPassword.equals("")) {
			request.getSession().setAttribute("messageType", "오류 메시지");
			request.getSession().setAttribute("messageContent", "모든 내용을 입력해주세요.");
			response.sendRedirect("login.jsp");
			return;
		}
		int result = new UserDAO().login(userID, userPassword);
		if(result==1) {
			request.getSession().setAttribute("userID", userID);
			request.getSession().setAttribute("messageType", "성공메 시지");
			request.getSession().setAttribute("messageContent", "로그인에 성공했습니다.");
			response.sendRedirect("index.jsp");
		}else if(result == 2) {
			request.getSession().setAttribute("messageType", "오류 메시지");
			request.getSession().setAttribute("messageContent", "비밀번호를 확인해 주세요.");
			response.sendRedirect("login.jsp");
		}else if(result == 0) {
			request.getSession().setAttribute("messageType", "오류 메시지");
			request.getSession().setAttribute("messageContent", "아이디가 정확하지 않습니다.");
			response.sendRedirect("login.jsp");
		}else if(result == -1) {
			request.getSession().setAttribute("messageType",  "오류 메시지");
			request.getSession().setAttribute("messageContent", "데이터 베이스 오류가 발생하였습니다.");
			response.sendRedirect("login.jsp");
		}
	}

}

5. web.xml 내용 추가

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>UserChat</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
  	<servlet-name>UserRegisterServlet</servlet-name>
  	<servlet-class>user.UserRegisterServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>UserRegisterServlet</servlet-name>
  	<url-pattern>/userRegister</url-pattern>
  </servlet-mapping>
  
  <servlet>
  	<servlet-name>ChatSubmitServlet</servlet-name>
  	<servlet-class>chat.ChatSubmitServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>ChatSubmitServlet</servlet-name>
  	<url-pattern>/chatSubmitServlet</url-pattern>
  </servlet-mapping>
  
    <servlet>
  	<servlet-name>ChatListServlet</servlet-name>
  	<servlet-class>chat.ChatListServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>ChatListServlet</servlet-name>
  	<url-pattern>/chatListServlet</url-pattern>
  </servlet-mapping>
  
  <servlet>
  	<servlet-name>UserLoginServlet</servlet-name>
  	<servlet-class>chat.UserLoginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>UserLoginServlet</servlet-name>
  	<url-pattern>/userLogin</url-pattern>
  </servlet-mapping>
</web-app>

결과물

1. 로그인 양식

2. 기존의 db에 저장되어있는 아이디와 비밀번호로 로그인 가능.

3. 아이디가 없으면 아이디 확인해달라는 메시지가 뜨고 비밀번호가 틀리면 비밀번호 확인해 달라는 메시지가 뜸.

저작자표시

'2020 > JSP 기본 WEB 만들기(미완성)' 카테고리의 다른 글

#7 채팅 메시지 전송 기능 구현 (0)	2020.05.29
# 6 채팅 데이터베이스 구축 (0)	2020.05.28
#5 채팅창 디자인 구현 (0)	2020.05.27
#4 JSP 회원 가입 DB기능 구현 (0)	2020.05.20
# 회원 가입 화면 만들기 (0)	2020.05.20

꽃꽂이하는개발자

JSP 게시판 만들기 #4 로그인 기능 구현하기

2020/JSP 게시판 만들기 2020. 1. 16. 21:41

2020/01/16 - [JSP 게시판 만들기] - JSP 게시판 만들기 #3 회원 데이터베이스 구축

이어서 진행하겠습니다.

이번에는 UserDAO를 만들어 주겠습니다

DAO 는 데이터베이스 접근 객체로 회원 정보를 불러오거나 입력할때 사용됩니다.

package user;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class UserDAO {
	
	//Connection 데이터 베이스 접근하게 해주는 하나의 객체
	private Connection conn;
	private PreparedStatement pstmt;
	//하나의 정보를 담을 수 있는 하나의 객체
	private ResultSet rs;
	
	//ctrl +shift + o 를 눌러 외부 라이브러리를 넣어줍니다
	
	//생성자를 만들어줍니다.
	public UserDAO() { //실제로 mysql에 접속할 수 있도록 도와줌
		try {
			//localhost:3306은 우리 컴퓨터에 설치된 mysql 서버 자체를 의미하고 bbs는 우리가 만든 테이블 이름입니다.
			String dbURL = "jdbc:mysql://localhost:3306/BBS?serverTimezone=UTC";
			String dbID ="root"; //db 계정
			String dbPassword ="root"; //db 비밀번호
			
            //driver는 mysql에 접속할 수 있도록 도와주는 하나의 라이브러리 매개체
            Class.forName("com.mysql.jdbc.Driver"); 
            
			conn=DriverManager.getConnection(dbURL, dbID, dbPassword);
		}catch(Exception e) {
			e.printStackTrace(); //오류가 무엇인지 출력
		}
		
	}
    // 실제로 로그인을 시도하는 함수
	public int login(String userID, String userPassword) { // 아이디와 비밀번호를 받아옴
		//실제로 db에 입력할 sql문
		String SQL = "SELECT userPassword FROM USER WHERE 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; // 데이터베이스 오류를 의미합니다.
	}
}

여기까지 오셨으면 loginAction.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"); %>
<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="UTF-8">
<title>Login page</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("alter('비밀번호가 틀립니다.')");
			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('database에 오류가 발생하였습니다.')");
			script.println("history.back()");
			script.println("</script>");
		}
	%>
</body>
</html>

mysql에 접속하기 위해서 driver를 프로젝트에 추가해주어야 합니다.

mysql jdbc driver을 구글에 검색해서

다운로드 하고 압축을 풀어준 뒤

이 파일을

WEB-INF/lib/ 복사해서 넣어줍니다.

이제 실행을 해보겠습니다.

DB에서 회원관리 구축할때 홍길동 한명 넣어 준거 기억 나시나요?

전 gildong//1234 로 회원가입을 했습니다.

아직 main.jsp는 구현을 못했기 때문에 정상적으로 출력되는 걸 알 수 있습니다.

하지만 비밀번호 가 틀렸을경우 비밀번호가 틀렸다고 나오고

db오류일 경우 db오류라고 뜨게 되고

아이디가 없을 경우 아이디가 없다고 뜨게 됩니다.

저작자표시

'2020 > JSP 게시판 만들기' 카테고리의 다른 글

JSP 게시판 만들기 #6 회원가입 기능 구현 (0)	2020.01.17
JSP 게시판 만들기 #5 회원가입 페이지 디자인 (0)	2020.01.17
JSP 게시판 만들기 #3 회원 데이터베이스 구축 (0)	2020.01.16
JSP 게시판 만들기 #2 로그인 기능 (0)	2020.01.16
JSP 게시판 만들기 #1 (0)	2020.01.16

꽃꽂이하는개발자

JSP 게시판 만들기 #2 로그인 기능

2020/JSP 게시판 만들기 2020. 1. 16. 19:17

2020/01/16 - [JSP 게시판 만들기] - JSP 게시판 만들기 #1

JSP 게시판 만들기 #1

이클립스 내에서 Dynamic Web Project 를 만들어 줍니다. 그리고 WEB-INF 내에 index.jsp를 만들어 줍니다. WebContent내에 우리가 사용할 bootstrap을 넣어줍니다. zip파일을 다운받고 압축을 푼 후에 css, fon..

windorsky.tistory.com

이전 글에 이어서 이번에는 로그인 기능을 만들어 보겠습니다.

우선 index.jsp에 아래처럼코딩해 줍니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rodin</title>
</head>
<body>
	<script>
		location.href="login.jsp";
	</script>
</body>
</html>

location.href 는 객체의 속성으로 페이지를 이동하는 것이기 때문에 뒤로가기 버튼을 누른경우 이전 페이지로 이동이 가능합니다.

<%@ 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">
<link rel="stylesheet" href="css/bootstrap.css">
<title>Rodin login</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">Rodin Web Site</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="font.jsp">포스터 분석</a></li>
				<li><a href="posterCategory.jsp">포스터 카테고리</a></li>
				<li><a href="analisys.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"	role="button" aria-haspopup="true" data-toggle="dropdown" 
					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>
			</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">
					<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>

<script
  src="https://code.jquery.com/jquery-1.11.3.js"
  integrity="sha256-IGWuzKD7mwVnNY01LtXxq3L84Tm/RJtNCYBfXZw3Je0="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

실행해 보겠습니다.

저작자표시

'2020 > JSP 게시판 만들기' 카테고리의 다른 글

JSP 게시판 만들기 #6 회원가입 기능 구현 (0)	2020.01.17
JSP 게시판 만들기 #5 회원가입 페이지 디자인 (0)	2020.01.17
JSP 게시판 만들기 #4 로그인 기능 구현하기 (0)	2020.01.16
JSP 게시판 만들기 #3 회원 데이터베이스 구축 (0)	2020.01.16
JSP 게시판 만들기 #1 (0)	2020.01.16

꽃꽂이하는개발자

'jsp 로그인'에 해당되는 글 3건

#8 로그인 디자인 및 기능 구현

'2020 > JSP 기본 WEB 만들기(미완성)' 카테고리의 다른 글

JSP 게시판 만들기 #4 로그인 기능 구현하기

'2020 > JSP 게시판 만들기' 카테고리의 다른 글

JSP 게시판 만들기 #2 로그인 기능

'2020 > JSP 게시판 만들기' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

꽃꽂이하는개발자

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31