게시판 만들기 page
안녕하세요.
고코더 입니다.
이번 시간에는 게시판에 간단한 페이징을 구현합니다. 기존에 만든 리스트 페이지는 글이 추가되면 페이징 없이 아래로 노출되는 기본방식 입니다.
오늘은 다시 리스트 페이지에 페이징을 추가해볼려고 합니다.
처음 개발시에 페이징 구현을 하지 않는건 생각보다 많은 로직이 들어가는 기능 입니다. 리스트 개발시에 페이징을 함께 하면 개인적인 경험에서는 지치기 때문에 노드를 조금 익숙하게 받아들인 후에 살펴보는 것이 낫습니다.
● 1. board.js 페이징 코딩 추가
● 1-1. board.js에 코딩을 추가합니다.
● 1-2. board.js에 아래 코딩을 추가합니다.
기존 list는 그대로 두고 page 라는 페이지를 새로 만들어 페이징을 구현합니다.
게시판 기능을 여러가지로 추가하면서 개선해 나가는 개발 습관을 길러보세요.
router.get('/page/:page',function(req,res,next)
{
var page = req.params.page;
var sql = "select idx, name, title, date_format(modidate,'%Y-%m-%d %H:%i:%s') modidate, " +
"date_format(regdate,'%Y-%m-%d %H:%i:%s') regdate,hit from board";
conn.query(sql, function (err, rows) {
if (err) console.error("err : " + err);
res.render('page', {title: ' 게시판 리스트', rows: rows, page:page, length:rows.length-1, page_num:10, pass:true});
console.log(rows.length-1);
});
});
● 1-2. 소스 설명
- 75번 라인
- page라는 URI 접속 경로를 추가 합니다. 이 페이지는 기존 리스트에 페이징이 추가된 기능입니다.
- 77번 라인
- 현재 페이지를 req객체를 통해 가져옵니다/
- 78번 라인
- 기존에 사용한 select 구절 그대로 입니다.
- 82번 라인
- rows : 데이터베이스 쿼리에 데이터를 랜더링 합니다.
- page : 현재 페이지를 랜더링 합니다.
- length : 데이터에 전체 길이를 랜더링 합니다. -1을 한 이유는 DB에 행에 전체는 1부터 시작이지만 for문은 0부터 시작이기 때문에 -1을 합니다.
- page_num : 한 페이지에 보여줄 행에 갯수를 말합니다.
● 2. page.ejs 파일 추가
● 2-1. 페이징 ejs 파일을 생성 합니다.
기존에 리스트 페이지를 수정해서 페이징 기능이 가능하도록 만들 것입니다.
● 2-2. 파일안에 내용을 아래처럼 채워주세요.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<h1><%= title %></h1>
<a href="/board/write">글쓰기</a>
<table border="1">
<tr>
<td>번호</td>
<td>작성자</td>
<td>제목</td>
<td>조회수</td>
<td>수정일</td>
<td>등록일</td>
</tr>
<%
for(var i = (page * page_num) - page_num; i < (page * page_num); i++) {
if(i > length){
i++;
}else{
var data = rows[i]
%>
<tr>
<td><%= i + 1 %></td>
<td><%= data.name %></td>
<td><a href="/board/read/<%= data.idx %>"><%= data.title %></a></td>
<td><%= data.hit %></td>
<td><%= data.modidate %></td>
<td><%= data.regdate %></td>
</tr>
<% }
}
%>
<tr>
<td colspan="6">
<%
for(var j = 0; j < rows.length / page_num; j++){
%>
[<a href="/board/page/<%= j + 1 %>"><%= j + 1 %></a>]
<%
}
%>
</td>
</tr>
</table>
</body>
</html>
● 2-3. 상단 노출 소스 설명
- 20번 라인
- (page * page_num) - page_num : 처음 보여줘야 할 게시물을 찾습니다. 2페이지면 "(2*10)-10=10" 10번째 데이터부터 노출 합니다.
- page * page_num : 마지막으로 보여질 게시물 번호를 찾습니다. "2*10=20" 20번쨰 데이터까지 노출 합니다.
- 21번 라인
- 현재데이터가 전체보다 크면 i 값을 늘려 종료 합니다.
- 24번 라인
- i값이 아직 전체 데이터보다 작다면 data를 담아서 리스트에 노출 합니다.
● 2-4. 하단 페이징 소스 설명
- 40번 라인
- length / page_num : 전체 갯수와 페이지 노출 갯수를 나누어 총 페이지를 계산 합니다.
- 42번 라인
- 계산된 페이지 만큼 노출 합니다.
● 3. 결과 화면
● 3-1. 게시판에 페이징이 추가되어 페이지를 이동하여 원하는 데이터를 한눈에 볼수 있게 되었습니다.
● 3-2. 페이지 이동시에 URI에는 맨뒤에 숫자에 따라 페이지가 나타나고 번호도 순서에 따라 노출합니다.
마무리
간단한 페이징 방법까지 배워봤습니다.
'IT_Developers > Node.js' 카테고리의 다른 글
| Node.js - IO.js의 반란 노드의 분기된 프로젝트 그리고 재결합 (0) | 2019.11.22 |
|---|---|
| Node.js - express 게시판 만들기 / 글 삭제 / delete (2) | 2019.08.03 |
| Node.js - express 게시판 만들기 / 글 수정 / Update (0) | 2019.08.01 |
| Node.js - express 게시판 만들기 / 글 상세페이지 / select / (0) | 2019.08.01 |
| Node.js - express 게시판 만들기 / 글쓰기 / insert / (3) | 2019.08.01 |
댓글