728x90
반응형
참고 유튜브
기존 메인 페이지는 구성하였지만, 게시판 화면은 아직 구성 전이었다. 게시판 메인 페이지를 구성해보겠다!
게시판 페이지의 큰 틀은 main 페이지와 동일하고, 게시판의 기능을 할 수 있도록 글을 보고, 등록하고, 수정할 수 있는 화면을 구성해보겠다.
boardSite.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content= "text/html; charset=UTF-8">
<!-- 어느 기기에서도 맞춤으로 보이는 반응형 웹에 사용되는 기본 Meta Tag -->
<meta name="viewport" content="width-device-width", initial-scale="1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
<%
String userID = null;
//로그인한 사용자들이라면, userID에 값이 담기게될 것!
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="main.jsp"> JSP 게시판 웹 사이트</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- ul은 리스트를 보여줄 때 쓰는 tag -> 안에 원소는 li로 사용 -->
<ul class="nav navbar-nav">
<li><a href="main.jsp">메인</a>
<li class="active"><a href="boardSite.jsp">게시판</a>
</ul>
<%
//아무도 로그인 되어있지 않을 때만 로그인/회원가입 메뉴를 보이게 하기 위함.
if(userID == 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="logoutAction.jsp">로그아웃</a></li>
</ul>
</li>
</ul>
<%
}
%>
</div>
</nav>
<div class="container">
<div class="row">
<table class="table table-striped" style="text-align: center; border:1px solid #dddddd">
<thead>
<tr>
<th style="backgroud-color:#eeeeee; text-align: center;"> 번호 </th>
<th style="backgroud-color:#eeeeee; text-align: center;"> 제목 </th>
<th style="backgroud-color:#eeeeee; text-align: center;"> 작성자 </th>
<th style="backgroud-color:#eeeeee; text-align: center;"> 작성일 </th>
</tr>
</thead>
<tbody>
<!-- 아래는 어떻게 화면에 나오는지를 보기 위한 예시 데이터이다. -->
<tr>
<td>1</td>
<td>안녕하세요.</td>
<td>홍길동</td>
<td>2021-11-04</td>
</tr>
</tbody>
</table>
<a href="write.jsp" class="btn btn-primary pull-right">글 작성하기</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
실행화면
다음 시간에는 게시판 페이지에 글을 쓰고, 수정하고 할 수 있도록 게시판 데이터베이스를 구축해 볼 것 이다!
'개발 > JSP 게시판 만들기' 카테고리의 다른 글
| [JSP 게시판 만들기] 10강 게시판 글쓰기 기능 구현하기 (1) | 2021.11.08 |
|---|---|
| [JSP 게시판 만들기] 9강 게시판 데이터베이스 구축하기 (0) | 2021.11.04 |
| [JSP 게시판 만들기] 7강 접속한 회원 세션 관리하기 (0) | 2021.11.04 |
| [JSP 게시판 만들기] 6강 회원가입 기능 구현하기 (0) | 2021.10.31 |
| [JSP 게시판 만들기] 5강 회원가입 페이지 디자인 (0) | 2021.10.31 |