2022.04.28 - [Practice] - JSP로 반응형 게시판 만들기[6]
JSP로 반응형 게시판 만들기[6]
2022.04.28 - [분류 전체보기] - JSP로 반응형 게시판 만들기[5] JSP로 반응형 게시판 만들기[5] 2022.04.28 - [Practice] - JSP로 반응형 게시판 만들기 [4] JSP로 반응형 게시판 만들기 [4] 2022.04.28 - [Pract..
puenti.tistory.com
이번 포스팅은 실제로 해당 게시글을 클릭했을때 보여주는 view 화면을 만들어 보겠습니다
BbsDAO 페이지에서 기능을 추가해주도록 하겠습니다
// 하나의 글을 불러오는 함수
public Bbs getBbs(int bbsID) {
String SQL = "SELECT * FROM BBS WHERE bbsID = ?";
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
pstmt.setInt(1, bbsID);
rs = pstmt.executeQuery();
if (rs.next()) {
Bbs bbs = new Bbs();
bbs.setBbsID(rs.getInt(1));
bbs.setBbsTitle(rs.getString(2));
bbs.setUserID(rs.getString(3));
bbs.setBbsDate(rs.getString(4));
bbs.setBbsContent(rs.getString(5));
bbs.setBbsAvailable(rs.getInt(6));
return bbs;
}
} catch(Exception e) {
e.printStackTrace();
}
return null;
이 페이지를 BbsDAO에 추가해주면 view 페이지를 만들어볼께요!!
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import = "java.io.PrintWriter"%> <!-- 스크립트 문장을 실행 할 수 있게 해주자 -->
<%@ page import="bbs.Bbs" %>
<%@ page import="bbs.BbsDAO" %>
<!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="css/bootstrap.css"> <!-- 디자인을 담당하는 css 참조 완료 -->
<title>JSP 게시판 웹사이트</title>
</head>
<body>
<% /* 로그인이 된 사람들은 로그인 정보를 담을 수 있게 해주자 */
String userID = null;
if (session.getAttribute("userID") != null){
userID = (String) session.getAttribute("userID");
}
// 현재 세션이 존재하는 사람이라면 그 아이디값을 그대로 받아서 관리할 수 있게 해줌
int bbsID = 0;
if (request.getParameter("bbsID") != null) {
bbsID = Integer.parseInt(request.getParameter("bbsID"));
}
if (bbsID ==0){
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('유효하지 않은 글입니다.')");
script.println("location.href = 'bbs.jsp'");
script.println("</script>");
}
Bbs bbs = new BbsDAO().getBbs(bbsID);
%>
<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>
<!-- 경로와 오타가 없음에도 a 링크 실행이 안됨 -->
</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; boerder: 1px solid #dddddd">
<!-- class = "table table-striped"는 게시판 목록들이 짝수와 홀수 번갈아가면서 색이 변하게해줌 -->
<thead>
<tr>
<th colspan ="3" style="background-color: #eeeeee; text-align: center;">게시판 글 보기</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:20%;">글 제목</td>
<td colspan="2"><%=bbs.getBbsTitle() %></td>
</tr>
<tr>
<td>작성자</td>
<td colspan="2"><%=bbs.getUserID() %></td>
</tr>
<tr>
<td>작성일자</td>
<td colspan="2"><%=bbs.getBbsDate().substring(0, 11) + bbs.getBbsDate().substring(11,13) + "시 " + bbs.getBbsDate().substring(14,16) + "분 " %></td>
</tr>
<tr>
<td>내용</td>
<td colspan="2" style="min-height: 200px; text-align: left;"><%= bbs.getBbsContent().replaceAll(" ", " ").replaceAll("<", "<").replaceAll(">", ">").replaceAll("\n", "<br>")%></td>
</tr>
</tbody>
<!-- Action 페이지로 보낼 수 있음 -->
</table>
<a href="bbs.jsp" class="btn btn-primary">목록</a>
<%
if(userID != null && userID.equals(bbs.getUserID())) {
%>
<a href="update.jsp?bbsID= <%= bbsID %>" class="btn btn-primary">수정</a>
<a href="deleteAction.jsp?bbsID= <%= bbsID %>" class="btn btn-primary">삭제</a>
<!-- 현재 작성자가 현재 사용자와 동일하다면 윗부분 출력 -->
<%
}
%>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 제이쿼리를 가져오기 -->
<script src="js/bootstrap.js"></script>
<!-- 부트스트랩에서 기본적으로 참조 -->
</body>
</html>
중간중간 주석으로 설명해놓았으니 참고해주세요
이렇게 제가 쓴 글은 수정, 삭제가 보이고 남이 쓴 글을 누르면 목록으로 가는 버튼만 보이는걸 확인 할 수 있어요!!!
<%= bbs.getBbsContent().replaceAll(" ", " ").replaceAll("<", "<").replaceAll(">", ">").replaceAll("\n", "<br>")%>
getBbsContnent를 받아을때 위부분을 추가해줘야 특수문자들이 변형되서 우리가 볼 수 있게 되니 저 위부분도 추가해줬어요!
이렇게 특수문자 처리까지 다 해줬구요! 정상적으로 작성된 글이 성공적으로 화면에 출력하는것까지 확인 할 수 있었습니다!
즉 이번 포스팅까지 글 보기, 기능까지 구현이 완료되었어요!!
또한 추가적으로 특수문자와 관련해서는 굉장히 중요한 부분이 하나 있는데요!
바로 맵해킹 공격에 해당하는 크로스 사이트 스크립팅이 있어요!!
간단히 설명하자면 게시판을 작성할때 스크립트 문장을 삽입함으로서 그 페이지에 접속하는 사람들한테 영향을 끼칠 수 있는
해킹기법이라고 생각하시면 되요!!
그래서 특수문자 치환을 꼭꼭 해줘야 한답니다!!
타이틀을 보여주는 bbs.jsp에서도 꼭 치환을 해줘야합니다!
다음 포스팅은 게시글을 수정, 삭제 기능을 구현해보도록 할께요!!
'Practice' 카테고리의 다른 글
JSP로 반응형 게시판만들기[9/9], 메인페이지 디자인 (0) | 2022.04.29 |
---|---|
JSP로 반응형 게시판 만들기[8/9], 게시글 삭제 및 수정 기능 (0) | 2022.04.29 |
JSP로 반응형 게시판 만들기[6/9], 게시판 보기, 목록 기능 구현하기 (0) | 2022.04.28 |
JSP로 반응형 게시판 만들기[5/9], 글 쓰기 기능 구현 (0) | 2022.04.28 |
JSP로 반응형 게시판 만들기 [4/9], DB 구축, 게시판 기능 구현 (0) | 2022.04.28 |