개발 대상은 [회원게시판 - 게시글목록] 페이지이다.
구성은 다음과 같다.
mem_list.php : 게시글 목록 출력 페이지
mem_list.js : 게시글 정렬 관련 Javascript
board_list.js : 게시글 목록 출력 CSS
1. Frontend & Backend
<mem_list.php>
<?php
session_start();
if (!isset($_SESSION["user_id"])) {
echo "<script>
alert('회원만 이용가능합니다.');
location.href='../auth/login.php';
</script>";
exit;
}
include "../db/db_con.php";
date_default_timezone_set("Asia/Seoul");
$sql = "select count(*) as total from memboard";
$result = mysqli_query($con, $sql);
$_result = mysqli_fetch_assoc($result);
$count = $_result["total"];
$limit = 5;
$total_page = ceil($count/$limit);
if(!isset($_GET['page']) or !ctype_digit($_GET['page']))
$page = 1;
else
$page = $_GET["page"];
if (($page<1) or ($page > $total_page))
$page = 1;
$offset = ($page-1)*$limit;
if (!isset($_GET["order"]))
$order = "num";
else
$order = $_GET["order"];
if ($order != "views" and $order != "likes")
$order = "num";
$sql = "select * from memboard order by $order desc limit $limit offset $offset";
$result = mysqli_query($con, $sql);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 게시판</title>
<script src="../js/mem_list.js?v=<?=time()?>"></script>
<link rel="stylesheet" href="../css/board_list.css?v=<?=time()?>">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
</head>
<body>
<?php include "../include/header.php"; ?>
<h2><i class="fa-solid fa-users"></i> 회원 게시판</h2>
<form method="get" action="./mem_search.php">
<select id="input_select" name="input_select">
<option value="title">제목</option>
<option value="writer">작성자</option>
</select>
<input id="input_search" name="input_search" placeholder="검색어 입력" size="80">
<input type="submit" value="검색">
</form>
<select id="order">
<option value="recent" <?= ($_GET['order'] ?? '') == 'recent' ? 'selected' : '' ?>>최신순</option>
<option value="views" <?= ($_GET['order'] ?? '') == 'views' ? 'selected' : '' ?>>조회순</option>
<option value="likes" <?= ($_GET['order'] ?? '') == 'likes' ? 'selected' : '' ?>>추천순</option>
</select>
<table>
<?php
if (mysqli_num_rows($result)>0) {
echo "<tr>";
echo "<th>No.</th>";
echo "<th width='800'>제목 <i class='fa-solid fa-book'></i></th>";
echo "<th>작성자 <i class='fa-solid fa-user-pen'></i></th>";
echo "<th>날짜 <i class='fa-solid fa-calendar-days'></i></th>";
echo "<th>조회 <i class= 'fa-solid fa-eye'></i></th>";
echo "<th>추천 <i class='fa-solid fa-thumbs-up'></i></th>";
echo "</tr>";
while ($row = mysqli_fetch_assoc($result)) {
$today_date = date("Y-m-d");
$write_day = substr($row['write_time'], 0, 10);
if ($write_day == $today_date)
$display_time = date("H:i", strtotime($row['write_time']));
else
$display_time = $write_day;
if ($row["comments"] <= 0)
$comments = "";
else
$comments = "<strong>[{$row['comments']}]</strong>";
echo "<tr onclick=\"location.href='mem_view.php?num={$row['num']}'\" style='cursor:pointer'>";
echo "<td>{$row['num']}</td>";
if (empty($row["file_name"]))
echo "<td>{$row['title']} $comments</td>";
else
echo "<td>{$row['title']} $comments <i class='fa-solid fa-file'></i></td>";
echo "<td>{$row['user_name']}</td>";
echo "<td>{$display_time}</td>";
echo "<td>{$row['views']}</td>";
echo "<td>{$row['likes']}</td>";
echo "</tr>";
}
}
else {
echo "<tr><td colspan='6' class='no-posts'>등록된 글이 없습니다.</td></tr>";
}
?>
</table>
<div>
<?php
for ($i=1;$i<=$total_page;$i++) {
if ($i == $page)
echo "<b>[{$i}]</b> ";
else
echo "<a href='mem_list.php?page={$i}&order={$order}'>$i</a> ";
}
?>
</div>
<input type="button" onclick="location.href='./mem_write.php'" value="게시글 작성">
</body>
</html>| mem_list.php |
|---|
 |
[1. 페이지 인덱스 계산]
페이지 인덱스 계산 내용은 9. 비회원게시판 - 게시글목록 에 이전에 정리한 내용과 동일하다.
[2. 게시글 출력]
게시글 출력 내용은 9. 비회원게시판 - 게시글목록 에 이전에 정리한 내용과, 기본적인 출력 방법이 동일하다.
기존 방식에 추가적으로, 회원게시판에는 댓글 개수와 첨부파일 여부를 제목에 표시하도록 하였다.
-
1. 댓글 개수 표시
memboard에서 게시글 정보를 불러올때 댓글수(comments)를 변수에 저장한다.
만약 게시글에 댓글이 작성된 경우, 게시글 제목 옆에 [N] 형식으로 작성된 댓글 개수를 표시한다.
-
2. 첨부파일 여부 표시
memboard에서 게시글 정보를 불러올때 파일 이름(file_name)이 존재하는지 확인한다.
만약 파일이름이 존재하는 경우, 게시글 제목 옆에 파일 아이콘을 표시한다.
[3. 게시글 정렬]
- 최신순 / 조회수 / 추천수 기준에 따라 게시글 정렬:
게시글 리스트의 Select 상자를 통해 게시글의 정렬 방식을 지정할 수 있다.
사용자가 선택하는 값은 order 파라미터에 담겨 GET방식으로 전달된다.
→ 이 값이 order by 구문에 들어가게 되며, 게시글의 정렬 순서를 바꿀 수 있다.
해당 동작을 처리하는 코드는 mem_list.js에 스크립트로 작성되어 있다.
[4. 게시글 검색]
- 검색어 입력:
게시글 리스트의 검색어 입력칸을 통해 특정 조건의 게시글을 검색할 수 있다.
제목/작성자, 검색어를 검색하면 해당 값이 input_select 와 input_search 파라미터에 담겨 GET방식으로 mem_search.php에 전달된다.
→ 검색 결과는 mem_search.php에서 처리한다.
[5. 페이지 인덱싱]
- 페이지 이동:
게시판 리스트 하단의 페이지 번호를 클릭하면 해당 페이지로 이동할 수 있다.
각 페이지별로, page번호와 order를 전달함으로써 해당 페이지에 맞는 게시글 목록으로 이동할 수 있도록 하였다.
2. Javascript
<mem_list.js>
document.addEventListener("DOMContentLoaded", function() {
const select = document.getElementById("order");
const params = new URLSearchParams(window.location.search);
const page = params.get("page");
const order = params.get("order");
select.addEventListener("change", function() {
location.href = "./mem_list.php?page="+page+"&order="+ this.value;
});
});- 최신순 / 조회수 / 추천수 정렬방식 선택시 해당 결과로 출력:
사용자가 select 태그에서 정렬순서를 선택시, 이벤트리스너가 이름 감지하여 해당 기준에 맞는 정렬 결과로 리스트를 다시 출력한다.
GET메소드를 통해 파라미터를 전달받으며 order값은 정렬기준을 나타내며, page 파라미터는 정렬결과 페이지에서도 이전의 페이지 번호를 유지할 수 있도록 해준다.
3. 동작 정리
동작 화면은 9. 비회원게시판 - 게시글 목록에 이전에 정리한 내용과 동일하다.
