menu.jsp
<ul class="mainnav">
<c:if test="${sessionScope.memId != null }">
<li><a href="${ pageContext.request.contextPath }/board/boardWriteForm.do">글쓰기</a></li>
</c:if>
<li><a href="${ pageContext.request.contextPath }/board/boardList.do?pg=1">목록</a></li>
</ul>board.js
// 유효성 검사를 모두 통과한 경우에만 ajax 요청 실행
if (isValid) {
$.ajax({
type: 'post',
url: '/projectMVC/board/boardWrite.do',
data: {
'subject' : $('#subject').val(),
'content' : $('#content').val()
},
success: function() {
alert('게시물 작성에 성공하였습니다!');
window.location.href = "/projectMVC/board/boardList2.do?pg=1";
},
error: function(e) {
console.log(e);
}
});
}boardMenu.jsp
<div id="nav">
<h3>
<p><a href="${ pageContext.request.contextPath }/board/boardWriteForm.do">글쓰기</a></p>
<p><a href="${ pageContext.request.contextPath }/board/boardList.do?pg=1">목록</a></p>
</h3>
</div>command.properties
#글목록
/board/boardList.do=board.service.BoardListServiceBoardListService.java
package board.service;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.control.CommandProcess;
import board.bean.BoardDTO;
import board.bean.BoardPaging;
import board.dao.BoardDAO;
public class BoardListService implements CommandProcess {
@Override
public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
int pg = 1;
if(request.getParameter("pg") != null)
pg = Integer.parseInt(request.getParameter("pg"));
//1페이지당 5개씩
int endNum = pg * 5;
int startNum = endNum - 4;
//DB
BoardDAO boardDAO = BoardDAO.getInstance();
List<BoardDTO> list = boardDAO.boardList(startNum, endNum);
//페이징 처리
int totalA = boardDAO.getTotalA();
BoardPaging boardPaging = new BoardPaging();
boardPaging.setCurrentPage(pg);
boardPaging.setPageBlock(3);
boardPaging.setPageSize(5);
boardPaging.setTotalA(totalA);
boardPaging.makePagingHTML();
request.setAttribute("list", list);
request.setAttribute("boardTotalA", boardPaging.getTotalA());
request.setAttribute("boardPagingHTML", boardPaging.getPagingHTML());
return "/board/boardList2.jsp";
}
}
1 2 3 4 다음
이걸 쥐고있는 건 ?? pagingHTML
그러므로 들고갈 때 pagingHTML만 들고가도 된다.
boardList2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시물 목록</title>
<style type="text/css">
body {
background-color: #FFE2FA;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 70vh;
flex-direction: column;
}
table {
border-collapse: collapse;
border-radius: 10px;
background-color: white;
width: 800px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 0 auto;
}
th, td {
padding: 10px;
border: 1px solid #CCC;
text-align: center;
font-size: 14px;
}
th {
background-color: #F2F2F2;
color: #333;
font-size: 16px;
}
td {
color: #333;
}
#currentPaging {
color: red;
font-size: 15px;
padding: 5px 8px;
margin: 3px;
}
#paging {
color: black;
font-size: 15px;
padding: 5px 8px;
margin: 3px;
}
span:hover {
text-decoration: underline;
cursor: pointer;
}
img {
margin-bottom: 20px;
cursor: pointer;
display: block;
}
.subjectA {
text-decoration: underline;
}
.subjectA:link {
color: black;
text-decoration: none;
}
.subjectA:visited {
color: black;
text-decoration: none;
}
.subjectA:hover {
color: green;
text-decoration: underline;
}
.subjectA:active {
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<img src="../image/free-icon-love-4096198.png" alt="홈" width="60" height="60" onclick="location.href='../index.jsp'" />
<input type="text" id="memId" value="${memId }" />
<table>
<thead>
<tr>
<th>글번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<c:if test="${list != null}">
<c:forEach var="boardDTO" items="${list}">
<tr>
<td>${boardDTO.getSeq()}</td>
<td>
<a href="#" class="subjectA">
${boardDTO.getSubject()}
</a>
</td>
<td>${boardDTO.getName()}</td>
<td>
<fmt:formatDate pattern="yyyy.MM.dd" value="${boardDTO.getLogtime()}"/>
</td>
<td>${boardDTO.getHit()}</td>
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
<div style="margin-top: 15px;">
${boardPagingHTML}
</div>
<script type="text/javascript">
function boardPaging(pg){
location.href = "/projectMVC/board/boardList.do?pg=" + pg;
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="../js/boardList.js"></script>
</body>
</html>boardList.js
시퀀스 번호를 가져오기 위해 먼저 부모로 갔다가 자식으로 가야되는 경로 잘 찾아야한다!!!!
//제목을 클릭했을 때
$('.subjectA').click(function(){
if($('#memId').val() == '')
alert('먼저 로그인하세요.');
else{
alert('seq = ' + $(this).prop('tagName'))
}
});
//제목을 클릭했을 때
$('.subjectA').click(function(){
if($('#memId').val() == '')
alert('먼저 로그인하세요.');
else{
alert('seq = ' + $(this).parent().prev().prop('tagName'))
}
});
BoardListService.java
request.setAttribute("pg", pg);
request.setAttribute("boardTotalA", boardPaging.getTotalA());
request.setAttribute("boardPagingHTML", boardPaging.getPagingHTML());boardList2.jsp
<input type="hidden" id="memId" value="${memId }" />
<input type="hidden" id="pg" value="${pg }" />boardList.js
//제목을 클릭했을 때
$('.subjectA').click(function(){
if($('#memId').val() == '')
alert('먼저 로그인하세요.');
else{
alert('seq = ' + $(this).parent().prev().text())
alert('pg = ' + $('#pg').val())
}
});
글 상세보기
갈 때 seq와 pg번호를 다 들고가야한다.
왜냐 제목 눌러서 상세보기하고
뒤로 빽하면 다시 그 페이지로 가야하기 때문이다 !!!
command.properties
#글 상세보기
/board/boardDetail.do=board.service.BoardDetailServiceBoardDetailService.java
package board.service;
import java.text.SimpleDateFormat;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.control.CommandProcess;
import board.bean.BoardDTO;
import board.dao.BoardDAO;
public class BoardDetailService implements CommandProcess {
@Override
public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
int seq = Integer.parseInt(request.getParameter("seq"));
int pg = Integer.parseInt(request.getParameter("pg"));
BoardDAO boardDAO = BoardDAO.getInstance();
BoardDTO boardDTO = boardDAO.boardDetail(seq);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy.MM.dd");
String logtime = sdf.format(boardDTO.getLogtime());
request.setAttribute("boardDTO", boardDTO);
request.setAttribute("pg", pg);
request.setAttribute("logtime", logtime);
return "/board/boardDetail.jsp";
}
}BoardDAO.java
public BoardDTO boardDetail(int seq) {
SqlSession sqlSession = sqlSessionFactory.openSession(); //생성
BoardDTO boardDTO = sqlSession.selectOne("boardSQL.boardDetail", seq);
sqlSession.close();
return boardDTO;
}boardMapper.xml
<!-- 글 상세보기 -->
<select id="boardDetail" parameterType="int" resultType="board.bean.BoardDTO">
select * from board where seq = #{seq}
</select>boardDetail.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시글 상세보기</title>
<style type="text/css">
body {
background-color: #FFE2FA;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
table {
border-collapse: collapse;
border-radius: 10px;
background-color: white;
width: 80%;
max-width: 900px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
th, td {
padding: 10px 15px;
font-size: 14px;
text-align: left;
vertical-align: top;
}
th {
background-color: #f2f2f2;
font-size: 16px;
color: #333;
text-align: center;
}
td {
color: #333;
word-wrap: break-word;
}
input[type="button"] {
background-color: #FF9ADB;
border: none;
font-size: 14px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
color: white;
transition: background-color 0.3s ease;
margin: 10px 5px;
}
input[type="button"]:hover {
background-color: #FF70C0;
}
img {
margin-bottom: 20px;
cursor: pointer;
display: block;
}
.table-buttons {
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="header">
<h1>
<img alt="하트" src="${ pageContext.request.contextPath }/image/free-icon-love-4096198.png" width="60" height="60" onclick="location.href='${ pageContext.request.contextPath }/index.do'">
MVC를 활용한 미니프로젝트
</h1>
</div>
<table border="1">
<tr>
<th width="100px">제목</th>
<td colspan="5">${boardDTO.subject}</td>
</tr>
<tr>
<th>글 번호</th>
<td>${boardDTO.seq}</td>
<th>작성자</th>
<td>${boardDTO.name}</td>
<th>조회수</th>
<td>${boardDTO.hit}</td>
</tr>
<tr>
<th>내용</th>
<td colspan="5"><pre>${boardDTO.content}</pre></td>
</tr>
</table>
<div class="table-buttons">
<input type="button" value="목록" onclick="location.href='/projectMVC/board/boardList.do?pg=${pg}'" />
<input type="button" id="updateBtn" value="수정" style="display: none;" />
<input type="button" id="deleteBtn" value="삭제" style="display: none;" />
</div>
</body>
</html>
'JSP & Servlet' 카테고리의 다른 글
| DAY 56 - 이미지 등록 AJax 이용하기 / 이미지 전체선택 전체해제 / 이미지 선택삭제 ( 2024.09.24 ) (0) | 2024.09.24 |
|---|---|
| DAY 55 - 이미지 업로드 ( 2024.09.23 ) (0) | 2024.09.24 |
| DAY 53 - projectMVC - 로그인 / 로그아웃 / 회원가입 / 회원정보수정 / 글쓰기 / 글목록 (0) | 2024.09.19 |
| DAY 52 - MVC ( 2024.09.13 ) (0) | 2024.09.13 |
| DAY 51 - EL_JSTL ( 2024.09.12 ) (0) | 2024.09.12 |
