[작성일: 2023. 04. 17]
게시판 메인 페이지 디자인
이번엔 게시판 메인 페이지 디자인과 게시판 데이터베이스 구축을 할 차례이다.
지금까지 구현이 안 된 부분이 프로젝트 안에서 게시판 부분이라고 할 수 있다.
게시판에 들어갔을 때 게시판 메인 페이지가 나오면서 특정한 글을 읽고 쓸 수 있는 각각의 기능을 구현해야 한다.
또한 게시판에 저장된 각각의 글들을 관리할 수 있도록 게시판 데이터베이스를 구축해야 한다.
[소스코드_게시판 1]
게시판 메인 페이지 디자인은 간단하다.
우선 메인 페이지를 복사한 후 bbs.jsp 파일을 만들어주고 active 부분을 메인이 아닌 게시판 쪽으로 옮겨준다.
게시판은 기본적으로 글을 작성했을 때 작성한 순서대로 일렬로 보이는 테이블 구조를 가지고 있다.
즉 하나의 표 형태이기 때문에 간단한 테이블을 하나 만들어줌으로써 게시판을 디자인해 줄 수 있다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter" %>
<!DOCTYPE html>
<html>
<head>
<meta 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>
<%
String userID = null;
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"> <!-- 모바일 상태에서 오른쪽에 메뉴가 나옴. -->
<!-- 오른쪽 메뉴 바에서 선 3개 -->
<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 class="active"><a href="bbs.jsp">게시판</a></li>
<!-- 메인과 게시판으로 이동 -->
</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="background-color: #eeeeee; text-align: center;">번호</th>
<th style="background-color: #eeeeee; text-align: center;">제목</th>
<th style="background-color: #eeeeee; text-align: center;">작성자</th>
<th style="background-color: #eeeeee; text-align: center;">작성일</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>안녕하세요.</td>
<td>홍길동</td>
<td>2023-04-17</td>
</tr>
</tbody>
</table>
<a href="write.jsp" class="btn btn-primary-pull right">글쓰기</a>
</div>
</div>
<script src="//code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
[실행화면_게시판 1]
[소스코드_게시판 2]
#SQL
CREATE TABLE bbs (
bbsID INT,
bbsTitle VARCHAR(50),
userID VARCHAR(20),
bbsDate DATETIME,
bbsContent VARCHAR(2048),
bbsAvailable INT, /* 글의 삭제 여부를 알려주게 될 것*/
PRIMARY KEY (bbsID)
);
SELECT * FROM bbs;
#Java
package bbs;
public class Bbs {
private int bbsID;
private String bbsTitle;
private String userID;
private String bbsDate;
private String bbsContent;
private int bbsAvailable;
public int getBbsID() {
return bbsID;
}
public void setBbsID(int bbsID) {
this.bbsID = bbsID;
}
public String getBbsTitle() {
return bbsTitle;
}
public void setBbsTitle(String bbsTitle) {
this.bbsTitle = bbsTitle;
}
public String getUserID() {
return userID;
}
public void setUserID(String userID) {
this.userID = userID;
}
public String getBbsDate() {
return bbsDate;
}
public void setBbsDate(String bbsDate) {
this.bbsDate = bbsDate;
}
public String getBbsContent() {
return bbsContent;
}
public void setBbsContent(String bbsContent) {
this.bbsContent = bbsContent;
}
public int getBbsAvailable() {
return bbsAvailable;
}
public void setBbsAvailable(int bbsAvailable) {
this.bbsAvailable = bbsAvailable;
}
}
[수정사항]
2023.04.18
- style에서 text-align에 오타가 있는 것을 발견하여 수정
- 색상코드가 잘못되어 색이 입혀지지 않았던 것을 수정
- 글쓰기 버튼이 왼쪽에 있는 것 수정
🐣 입문 개발자가 작성한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.
🐣 출처: https://youtu.be/OHvWkg9Bdf0