글 읽기 구현은 생각보다 간단했다. 따로 데이터를 처리하는 php 파일이 필요 없고, 기존의 로그인과 회원가입 페이지에서 썼던 css만 조금 수정을 해주었다. 코드는 여기 를 참고했다.
[read.php]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../css/board_read.css" />
<title>게시글 읽기</title>
</head>
<body>
<?php
include "../db_conn.php";
$number = $_GET['idx'];
// 조회수
$view_sql = "update board set views = views+1 where idx = '$number'";
mysqli_query($db_conn, $view_sql);
// 게시글 가져오기
$sql = "select title, content, regdate, writer, id from board where idx = $number";
$result = mysqli_query($db_conn, $sql);
$row = mysqli_fetch_array($result);
?>
<div id="board_wrap" class="wrap">
<table style="padding-top:50px" align=center width=auto border=0 cellpadding=2>
<tr>
<td>
<p><b><?php echo $row['title'] ?></b></p>
</td>
</tr>
<tr>
<td>
<table class="table2">
<tr>
<td class="writer">작성자</td>
<td class="writer2"><input type="hidden" name="name"><?php echo $row['writer'] . " (" . $row['id'] . ")" ?></td>
</tr>
<tr>
<td colspan="2" class="content"><?= nl2br($row['content']) ?></td>
</tr>
</table>
<div class="read_btn">
<button class="btn" onclick="location.href='../main/index.php'">목록</button>
<button class="btn" onclick="location.href='modify.php?idx=<?= $number ?>'">수정</button>
<button class="btn" onclick="location.href='delete.php?idx=<?= $number ?>'">삭제</button>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
글 읽기 페이지는 게시판 목록의 글을 통해 접속할 수 있으며 제목, 작성자와 id, 본문이 출력된다. 본문 밑에는 목록, 수정, 삭제 버튼을 만들어 원하는 페이지로 이동할 수 있도록 했다.
추가적으로 update문을 이용해서 조회수 기능도 구현했다.
[board_read.css]
/* style.css */
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #000;
}
/* body를 가운데 정렬하기 위해 html에 flex를 주었습니다. */
html {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
body {
width: 100%;
margin: 0 auto;
text-align: center;
background: linear-gradient(black, gray);
font-family: sans-serif;
}
.wrap {
/* 하얀 상자 */
width: 1200px;
height: 650px;
margin: 0 auto;
background-color: #fff;
border-radius: 20px; /* 상자 둥근 정도 */
display: flex;
justify-content: center;
align-items: center;
}
table {
border: black;
}
table.table2 {
border-collapse: separate;
border-spacing: 1px;
text-align: left;
line-height: 1.5;
border-top: 1px solid #ccc;
margin: 20px 10px;
}
table.table2 tr {
width: 50px;
padding: 10px;
vertical-align: top;
border-bottom: 1px solid #ccc;
}
table.table2 td {
width: 80px;
padding: 10px;
vertical-align: top;
border-bottom: 1px solid #ccc;
}
table.table2 .writer {
font-weight: bold;
text-align: center;
background-color: white;
width: 80px;
height: 33px;
background-color: #eeeeee;
}
table.table2 .writer2 {
background-color: white;
font-weight: bold;
width: 350px;
height: 33px;
padding-left: 10px;
}
table td {
height: 35;
float: center;
}
table p {
font-size: 25px;
text-align: center;
color: black;
margin-top: 15px;
margin-bottom: 10px;
height: 30px;
width: 530px;
/* background-color: gray; */
}
table .table2 input {
border: 1px solid gray;
width: 400px;
height: 35px;
margin: 5px;
padding-left: 10px;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
}
table .table2 .content {
padding: 20px;
height: 250px;
}
.btn {
width: 70px;
height: 40px;
margin: 5px;
border-radius: 5px;
border: 0;
background: black;
color: #fff;
font-weight: bold;
font-size: 15px;
cursor: pointer;
}
구현된 글 읽기 페이지
'웹 모의해킹 스터디 > 웹 개발 (PHP | MySQL)' 카테고리의 다른 글
| [php/mysql] 게시판 글 삭제 구현하기 (2) | 2023.11.25 |
|---|---|
| [php/mysql] 게시판 글 수정 구현하기 (0) | 2023.11.24 |
| [php/mysql] 게시판 글 작성 구현하기 (3) | 2023.11.21 |
| [php/mysql] 게시판 리스트 구현하기 (메인 페이지) (0) | 2023.11.21 |
| [php / mysql] 세션(session)을 이용한 로그인 / 로그아웃 구현 (0) | 2023.11.17 |
