[작성일: 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