728x90
반응형
SMALL
안녕하세요.
#yeoneeblog 여니입니다 :)
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=divice-width", initial-scale="1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>Login</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggl="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expended="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-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;">
<form method="post" action="loginAction.jsp">
<h3 style="text-align: center;">로그인 화면</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="ID" name="userId" maxlength="20">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="PASSWORD" name="userPwd" maxlength="20">
</div>
<input type="submit" class="btn btn-primary form-control" value="Login">
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
<script src="js/bootstrap.js"></script>
</body>
</html>네비바의 icon--bar은 웹 페이지의 가로 길이가 줄어들었을 때, 우측 상단에 삼색 아이콘이 나타나는 것을 의미합니다.
개발에서의 기본적인 약속인 카멜케이스 방식을 유의하여 name을 지어줍니다.
form은 method방식을 post방식으로 사용자가 입력한 정보를 보여주지 않고 숨겨서 서버로 정보를 전달하게 됩니다.
<화면 출력 모습>
다음과 같이 화면에 네비바와 내가 정의한 로그인 화면이 나타납니다. 주소창 링크도 내가 만든 login.jsp로 변경된 것을 확인할 수 있습니다.
728x90
반응형
LIST
'｡*:･ﾟ☆･ﾟschedule･ﾟ*:･ﾟ★･:*:･☆ *:･ﾟ★ > 개인프로젝트' 카테고리의 다른 글
| [개인프로젝트] JSP 게시판 만들기 3-1 (회원 데이터베이스 구축하기) (0) | 2023.10.09 |
|---|---|
| [개인프로젝트] JSP 게시판 만들기 3 (회원 데이터베이스 구축하기) (1) | 2023.10.09 |
| [개인프로젝트] JSP 게시판 만들기 1 (아파치톰캣, 이클립스 설치 및 환경설정하기) (0) | 2023.10.08 |
| [개인프로젝트] Garden of Books 책들의정원 15(웹 디자인 완성 - 작업물 목록 정리) (1) | 2023.10.08 |
| [개인프로젝트] Garden of Books 책들의정원 14(폼 - Form) (1) | 2023.10.07 |
