서론
오늘은 저번에 게시글 작성 기능을 만들었는데
이제 리스트들이 출력되는 게시글 메인페이지를 만드려고한다.
- board.php: 게시판 리스트 만들기
- board.css: 디자인하기
최종화면
1. board.php
✅리스트들이 출력되는 게시판 만들기
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/php/db.php';
$sql = "SELECT idx,title,author,post_date,views,likes FROM board ORDER BY idx DESC";
$result = $mysqli->query($sql);
?>➡️먼저 데이터베이스 파일을 가져온다
➡️ORDER BY를 이용해서 idx(포스팅 순서)기준으로 DESC(내림차순)으로 조회한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판</title>
<link rel="stylesheet" href="/CSS/basic.css">
<link rel="stylesheet" href="/CSS/board.css">
</head>
<body>
<header class="board_title">
<h1>Board</h1>
<div class="nav">
<a href="/board/board.php">회원게시판</a>
<a href="/pages/main.php">메인페이지</a>
<a href="/pages/mypage.php">마이페이지</a>
</div>
<hr>
</header>
<div class="write_btn1">
<a href="/board/board_write.php">글쓰기</a>
</div>
<table class="board_table">
<thead>
<tr>
<th>POST ID</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
<th id="emot">💌</th>
</tr>
</thead>➡️다른페이지와 똑같이 상단엔 제목과 링크들을 넣었다.
➡️글쓰기 버튼도 넣어주기
➡️게시글 목록 상단에 제목부분을 넣어줬다.
- 제목
- 작성자
- 작성일
- 조회수
<tbody>
<?php
while($row = $result->fetch_assoc()){
?>
<tr>
<td><?= $row['idx']; ?></td>
<td><?= $row['title']; ?></td>
<td><?= $row['author']; ?></td>
<td><?= $row['post_date']; ?></td>
<td><?= $row['views']; ?></td>
<td><?= $row['likes']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</body>
</html>➡️내용은 while을 이용해서 $row변수값이 없을 때까지 반복하게 했다.
➡️$row를 이용해 각각 제목에맞게 데이터를 DB에서 가져와 출력했다.
2. board.css
✅디자인하기
.write_btn1 {
display: flex;
justify-content: flex-end;
margin-top:25px;
margin-right:200px;
}
.write_btn1 a {
width:80px;
text-align: center;
text-decoration:none;
padding: 12px;
background: linear-gradient(45deg, #4B9CD3, #9370DB);
border: none;
border-radius: 8px;
color: white;
font-weight: bold;
font-size: 15px;
cursor: pointer;
transition: 0.3s;
}
.write_btn1 a:hover {
filter:brightness(1.1);
}➡️버튼은 그대로 가져왔고 위치조정만 해줬다.
.board_table {
width:55%;
text-align: center;
margin: 30px auto;
margin-top: 25px;
border-collapse: collapse;
font-size: 20px;
}
.board_table th {
border-bottom:none;
color: #4B0082;
}
.board_table td {
padding: 25px 16px;
border-bottom: 2px solid black;
}
.board_table thead {
background-color: #f5f5f5;
font-weight: bold;
}
#emot {
font-size: 40px;
}➡️테이블을 중앙정렬하고 제목은 박스형식, 데이터 내용은 밑줄만 넣었다.
나름 디자인 생각한게 저정도이다..🫡
3. 테스트
➡️글쓰기 버튼 클릭 후 제목과 내용적기
➡️리스트가 생겼다. 여러개 작성해보자
➡️여러 리스트들이 생겼다.
➡️작성일이 테이블을 만들 때TIMESTAMP로 설정해서 초단위까지 떠서 년도,월,일 까지만 뜨도록 바꿔주자
➡️ALTER MODIFY를 이용해 컬럼의 유형(TIMESTAMP→DATE)을 수정해줬다.
➡️바뀐 것을 볼 수 있다!
오늘은 게시판 메인페이지인 리스트 출력페이지를 만들었다.
리스트들이 많아지면 페이징이라는 것을 구현해야한다.
다음에는 리스트 페이징 기능을 구현해보자!
'Web > Web 개발' 카테고리의 다른 글
| 게시판 읽기 기능 만들기 (0) | 2025.05.19 |
|---|---|
| 게시판 페이징 기능 만들기 (0) | 2025.05.19 |
| 게시글 쓰기 기능 만들기 (0) | 2025.05.09 |
| 마이페이지 회원정보 수정 기능 구현 (1) | 2025.04.26 |
| 마이페이지 만들기(+회원탈퇴) (0) | 2025.04.24 |
