728x90
1. index.jsp
index
index의 jsp 구성
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html lang="en">
<body>
//main.jsp 로 이동한다
<script>
location.href = 'main.jsp';
</script>
</body>
</html>
2. head.jsp
head
head의 jsp 구성
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<title>DB 포트폴리오</title>
</head>
<body>
<%
String userID = null;
if (session.getAttribute("userID") != null) {
userID = (String) session.getAttribute("userID");
}
%>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="main.jsp">JSP 게시판 프로젝트 </a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="main.jsp">메인</a>
</li>
<li class="nav-item"><a class="nav-link" href="board.jsp">게시판</a></li>
</ul>
<%
if (userID == null) {
%>
<ul class="navbar-nav navbar-right">
<li class="nav-item dropdown float-right"><a
class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"> 접속하기 </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="login.jsp">로그인</a> <a
class="dropdown-item" href="join.jsp">회원가입</a>
</div></li>
</ul>
<%
}
else {
%>
<ul class="navbar-nav navbar-right">
<li class="nav-item dropdown float-right"><a
class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"> 회원관리 </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="logoutAction.jsp">로그아웃</a>
</div>
</li>
</ul>
<%
}
%>
</div>
</nav>
</body>
</html>1. footer.jsp
footer
footer jsp 구성
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<footer class="bg-dark mt-4 p-5 text-center" style="color: #FFFFFF;">
Copyright ⓒ 2020 김기남 All Rights Reserved.
</footer>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>1. main.jsp
main
main jsp 구성
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<body>
<jsp:include page="head.jsp" flush="false" />
<div class="container">
<div class="jumbotron" style="margin: 36px">
<h1 class="display-4">게시판 프로젝트!!</h1>
<p class="lead">
이 웹 사이트는 부트스트랩으로 만든 JSP 게시판 사이트입니다.</br> 웹서버 DB 프로젝트 준비하면서 공부용 으로 만든거 입니다!
디자인 템플릿으로는 부트스트랩을 이용했습니다.
</p>
<hr class="my-4">
<p>로그인 회원가입 게시판 기능을 넣어봤습니다! 필기는 git hub로 했습니다!</p>
<a class="btn btn-dark btn-lg"
href="https://github.com/Kimginam97/BoardProject" role="button">Github</a>
</div>
</div>
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide"
data-ride="carousel" style="margin: 36px">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/1.jpg" class="d-block w-100" alt="..." >
</div>
<div class="carousel-item">
<img src="images/2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators"
role="button" data-slide="prev"> <span
class="carousel-control-prev-icon" aria-hidden="true"></span> <span
class="sr-only">Previous</span>
</a> <a class="carousel-control-next" href="#carouselExampleIndicators"
role="button" data-slide="next"> <span
class="carousel-control-next-icon" aria-hidden="true"></span> <span
class="sr-only">Next</span>
</a>
</div>
</div>
<jsp:include page="footer.jsp" flush="false" />
</body>
</html>
결과
728x90
'Back-End > JSP & Thymeleaf' 카테고리의 다른 글
| 5.로그인 폼과 로그인 기능 구현하기 (0) | 2020.12.25 |
|---|---|
| 4.회원가입 폼 과 기능 구현하기 (0) | 2020.12.25 |
| 3.User 엔티티 , UserDAO 만들기 (0) | 2020.12.25 |
| 1.DB연결방법 DBCP (0) | 2020.12.25 |
| 0.JSP 개발환경 (0) | 2020.12.25 |
