728x90
게시판 코드작성완료 후기 생생하게 공유드립니다. 많이 놀러와주세여:)
https://www.youtube.com/watch?v=P5s5JwvZjBA&t=27s&pp=sAQA
#Index.jsp 만들기
index.jsp를 만들고 index.jsp파일에 접속한 모든 유저들이 login페이지로 강제 이동하도록 만들어보자.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BulevulpeBoard</title>
</head>
<body>
<script>
location.href = 'login.jsp';
</script>
</body>
</html>
body태그안에 script태그를 만들고 , index.jsp에 접속하면 바로 long.jsp로 접속하는 코드를 위와같이 작성한다.
location에 'i'를 빼먹어서 정상적으로 화면이 이동이 안됨을 확인했다. 항상 오탈자 주의하자.
# Bootstrap CDN 설정
bootstarp CDN이 하도 안먹혀서..헤메가다 아래 사이트 들어가서 코드를 붙여넣기 했더니 적용이 잘 되었다.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_default&stacked=h
Tryit Editor v3.6
Bootstrap Example My First Bootstrap Page Resize this responsive page to see the effect! Column 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit... Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris... Column 2 Lorem ipsum dolor s
www.w3schools.com
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>위와 같이 넣으니 로그인 화면이 아래와 같이 아주 이쁘게 navbar가 출력됨을 확인했다.
# login.jsp code
<%@ 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>BluevulpeBoard</title>
</head>
<body style= "background-color : lightblue;">
<nav class="navbar navbar-default"> <!-- navbar-색상(inverse = 검은색, default = 색x) -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<!-- class="navbar-toggle collapsed"=>네비게이션의 화면 출력유무
data-toggle="collapse" : 모바일 상태에서 클릭하면서 메뉴가 나오게 설정 -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<!-- 아이콘 이미지 -->
</button>
<a class="navbar-brand" href="main.jsp">BluevulpeBoard</a>
<!-- Bootstrap navbar 기본 메뉴바 -->
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav"> <!-- navbar-nav => 네비게이션 바의 메뉴 -->
<li><a href="main.jsp">메뉴</a></li>
<li><a href="list.jsp">게시판</a></li>
<!-- 메뉴, 게시판의 main.jsp와 list.jsp의 파일로 각각 이동 -->
</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>
<!-- 임시의 주소링크 "#"을 기재한다. -->
<!-- caret = creates a caret arrow icon (▼) -->
<ul class="dropdown-menu">
<!-- 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;">
<!-- jumbotron indicates a big box(큰 상자) -->
<form method="post" action="loginAction.jsp">
<h2 style="text-align : center;">로그인 화면</h2>
<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>
</body>
</html>
main.jsp나 bbs.jsp 또는 join.jsp는 이미 어제 {day1}때 만든것도 있어서 join.jsp나 main.jsp의 경우 아래와 같이이쁘게 출력되는걸 볼 수 있다.
# main.jsp code
<%@ 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>bluevulpeBoard</title>
</head>
<body>
<body style= "background-color : lightblue;">
<%String id = null;
if(session.getAttribute("id") != null){
id = (String)session.getAttribute("id");
}
%>
<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">BluevulpeBoard</a>
</div>
<div class="collapse navbar-collapse" id="#bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="main.jsp">메인</a></li>
<li><a href="boardList.do">게시판</a></li>
</ul>
<%
if(id == null) {
%>
<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><a href="login.jsp">로그인</a></li>
<li><a href="join.jsp">회원가입</a></li>
</ul>
</li>
</ul>
<%
} 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-expanded="false">회원관리<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="logout.jsp">로그아웃</a></li>
<li><a href="modify.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="loginGo.jsp">
<h3 style="text-align: center;">로그인 화면</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="이이디"
name="id" maxlength="20">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="비밀번호"
name="pw" maxlength="20">
</div>
<input type="submit" class="btn btn-primary form-control"
value="로그인">
</form>
</div>
</div>
</div>
</body>
</html># join.jsp code
<%@ 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script language="JavaScript" src="members.js"></script>
<title>bluevulpeBoard</title>
</head>
<body>
<body style= "background-color : #F8E9FF;">
<nav class="navbar navbar-default">
<div>
<button type="button" class="navbar-toggle collapsed"
data-toggle=:collapse data-target="#bs-example-navbar-collapse-1"
aria-expanded="false"></button>
<sapn class="icon-bar"></sapn>
<sapn class="icon-bar"></sapn>
<sapn class="icon-bar"></sapn>
</button>
<a class="navbar-brand" href="main.jsp">BluevulpeBoard</a>
</div>
<div class="collapse navbar-collapse"
id="#bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="login.jsp">메인</a></li>
<li><a href="join.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><a href="login.jsp">로그인</a></li>
<li class="active"><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="joinGo.jsp" name="reg_frm">
<h3 style="text-align: center;">회원가입 화면</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="이이디"
name="id" maxlength="20">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="비밀번호"
name="pw" maxlength="20">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="비밀번호확인"
name="pw_check" maxlength="20">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="이름"
name="name" maxlength="20">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="이메일"
name="eMail" maxlength="20">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="주소"
name="address" maxlength="50">
</div>
<input type="submit" class="btn btn-primary form-control"
value="회원가입" onclick="infoConfirm()"> <input type="reset"
value="취소" onclick="javascript:window.location='login.jsp'">
</form>
</div>
</div>
</div>
</body>
</html>아이유 '라일락'version으로 background color를 상큼하게 넣어보았다.
참고로 {day4}에서 위 join.jsp의 경우 코드수정이 있으니 반드시 참고바람***
Copyright ⓒ 2021 by bluevulpe All Contents cannot be copied without permission.
728x90
댓글