JSP-ログインページ設計
ログインページデザイン
前回のリリースでは、
index.jspファイルが作成されました.これは、あるサイトに接続したときに、最も基本的な最初のトップページを作成したことに相当します.(NAVERポータルサイトを例にとると、
例えば、https://www.naver.com/およびhttps://www.naver.com/index.htmlである.)
ログインページのユーザーを強制的にログイン画面に移動し、ログインして他のサービスを使用させましょう.
まず、作成した
index.jspファイルを開き、基本的なWebサイトのフレームワークを作成します.index.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 = 'login.jsp'; // 이 링크를 통해
// login 화면으로 연결 시킨다.
</script>
</body>
</html>login.jspファイルを作成します.基本的に、ウェブページを作成するときは、まずデザインを着てから機能を体現することが多いです.login.jspの設計作業では、Web設計フレームワークBootstrapを使用すると、より簡単に、より簡単に行うことができます.ガイドバー公式ホームページからブートストラップをダウンロードすると、css、font、jsフォルダが含まれます.これらのフォルダをWebContentディレクトリにコピーして貼り付けることができます.
では、
login.jspに内容を入力します.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">
<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-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-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html><meta name = "viewport"|インタラクティブWebを実現できます.<link rel="stylesheet" href="css/bootstrap.css">外部から提供されたcssを使用します.
ホームページと掲示板がメニューに表示され、右側のドロップダウンメニューでは会員登録と加入が許可されています.また,アイデンティティとパスワードの入力を許可する空白とログインボタンにより接続を実現した.
現在会員加入機能は実装されていないため,登録ページのみが設計されている.フロントのみを体現しています.次に、IDとパスワードを実際にDBに格納するための会員データベースを構築します.
Reference
この問題について(JSP-ログインページ設計), 我々は、より多くの情報をここで見つけました https://velog.io/@kjh950330/JSP-로그인-페이지-디자인テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol