게시글 보기 페이지
view.php 파일은 index.php에서 글 제목을 클릭했을 때 연결되어, 클릭한 게시글의 정보와 내용을 보여준다.
view.php
<!DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8'>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function Comment_Edit() {
var box = $('#cmt_edit_box');
var time = $('#cmt_time_box');
var origin = $('#cmt_origin');
box.css('display', 'table-row');
time.css('display', 'none');
origin.css('display', 'none');
}
</script>
</head>
<style>
<!-- 생략: 아래의 css -->
</style>
<body>
<?php
$connect = mysqli_connect('localhost', 'board_user', 'password', 'board_db');
$number = $_GET['number'];
session_start();
$query = "select title, content, date, hit, id, file_dir_name, file_name from board where number=$number";
$result = $connect->query($query);
$rows = mysqli_fetch_assoc($result);
$hit = "update board set hit=hit+1 where number=$number";
$connect->query($hit);
?>
<header>
<div class="site_name">
<img src=./images/logo.png></div>
<font style="color: #FFB722;">노랑</font>이 제일 좋아
</div>
<?php
if(isset($_SESSION['userid'])) { ?>
<div class = account_display>
<?php
echo $_SESSION['userid'];?>님
<font style="cursor:pointer" onClick="location.href='./logout.php'" class = bt>Logout</font>
</div>
<?php
}
else {
?>
<div class = account_display>
<div class = bt>
<font style="cursor:pointer" onClick="location.href='./login.php'">Login</font>
</div>
</div>
<?php
} ?>
</header>
<!-- MODIFY & DELETE -->
<div id="side_box">
<div class="bt" id="bt1">
<font style="cursor:pointer" onClick="location.href='./index.php'">목록</font>
</div>
<?php
if ($_SESSION['userid'] == $rows['id']) { ?>
<div class="bt" id="bt1">
<font style="cursor:pointer" onClick="location.href='./modify.php?number=<?=$number?>&id=<?=$_SESSION[userid]?>'">수정</font>
</div>
<div class="bt" id="bt1">
<font style="cursor:pointer" onClick="location.href='./delete.php?number=<?=$number?>&id=<?=$_SESSION[userid]?>'">삭제</font>
</div>
<?php
} ?>
</div>
<!-- END MODIFY & DELETE -->
<section>
<div id="menu_title">게시판</div>
<table class="view_table">
<tr>
<td class="view_title"><?php echo $rows['title']?></td>
</tr>
<tr>
<td class="view_id"><?php echo $rows['id']?></td>
</tr>
<tr id="view_info">
<td>
<?php
$d = substr($rows['date'], 0, 10);
date_default_timezone_set('Asia/Seoul');
$today = date("Y-m-d");
if ($d != $today) {
echo $d;
}
else {
$before = strtotime(substr($rows['date'], 11, ));
$now = strtotime(date('H:i:s', time()));
$min = (int)(($now - $before)/60);
if ($min < 60) {
echo $min.'분 전';
}
else {
$hour = (int)($min/60);
echo $hour.'시간 전';
}
} ?>
조회 <?php echo $rows['hit']?>
</td>
</tr>
<tr>
<td class="view_content" valign="top"><?php echo $rows['content']?></td>
</tr>
<!-- 첨부파일 -->
<?php
// 첨부 파일 크기(KB)
$file_size = round(filesize($rows['file_dir_name'])/1024, 2);
if (!empty($rows['file_dir_name']) ) {
echo "
<tr>
<td width=10>
<p allign=right><b>첨부파일 </b></p>
<p><a href={$rows['file_dir_name']} > {$rows['file_name']}</a>($file_size.KB)</p>
</td>
</tr>
";
}
?>
<!-- 첨부파일 END -->
<!--- 댓글 불러오기 -->
<tr><td height="40px" vertical-align="top"><b>댓글</b></td></tr>
<?php
$connect2 = mysqli_connect('localhost', 'comment_user', 'password', 'comment_db');
$query2 = "select * from comment where board_number=$number order by number desc";
$result2 = $connect2->query($query2);
while($cmt = $result2->fetch_array()){ ?>
<tr>
<td>
<b><?php echo $cmt['id'];?></b>
<?php if ($_SESSION['userid'] == $cmt['id']) { ?>
<input type="button" value="수정" class="cmt_edit_btn" onclick="Comment_Edit()"/>
<a href="./comment_delete.php?number=<?=$cmt['number']?>" id="bt3">삭제</a>
<?php } ?>
</td>
</tr>
<tr class="view_cmt" id="cmt_origin">
<td><?php echo nl2br("$cmt[content]");?></td>
</tr>
<tr id="cmt_time_box">
<td class="view_cmt_info">
<?php
$d = substr($cmt['date'], 0, 10);
date_default_timezone_set('Asia/Seoul');
$today = date("Y-m-d");
if ($d != $today) {
echo $d;
}
else {
$before = strtotime(substr($cmt['date'], 11, ));
$now = strtotime(date('H:i:s', time()));
$min = (int)(($now - $before)/60);
if ($min < 60) {
echo $min.'분 전';
}
else {
$hour = (int)($min/60);
echo $hour.'시간 전';
}
} ?>
</td>
</tr>
<!-- 댓글 수정 form dialog -->
<?php if ($_SESSION['userid'] == $cmt['id']) { ?>
<tr id="cmt_edit_box"><td height="100px">
<div class="input_box">
<form method="post" action="comment_modify.php">
<input type="hidden" name="comment_number" value="<?php echo $cmt['number']; ?>" />
<input type="hidden" name="baord_number" value="<?php echo $number; ?>">
<textarea name="content" id="input_area"><?php echo $cmt['content']; ?></textarea>
<input type="submit" value="수정" id="bt2">
</form>
</div>
</td></tr>
<?php } ?>
<?php }
?>
<!--- 댓글 입력 form -->
<tr><td height="100px">
<div class="input_box">
<b><?=$_SESSION['userid']?></b>
<form action="comment.php?number=<?php echo $number; ?>" method="post">
<textarea id="input_area" name = cmt_content></textarea>
<button id="bt2">댓글쓰기</button>
</form>
</div>
</td></tr>
<!-- 댓글 불러오기 끝 -->
</table>
</section>
</body>
</html>(1) 게시판 DB에 연결하기
게시글이 저장된 board_db에 board_user 사용자로 연결한다.
내용을 보고자 하는 게시글의 번호를 $number 변수에 저장한다.
(2) 번호에 해당하는 게시글 가져오기 / 조회수 +1
MySQL 쿼리를 통해 $number 번호에 해당하는 게시글을 가져와 $rows에 저장한다.
| MySQL 질의문 |
SELECT title, content, date, hit, id, file_dir_name, file_name FROM board WHERE number=$number
|
UPDATE board SET hit=hit+1 WHERE number=$number
|
| PHP 함수, 변수 |
mysqli_connect() / session_start() / query() / mysqli_fetch_assoc()
|
$_GET
|
(3) 웹서비스 이름 / 계정정보 출력
session을 검사해서 로그인 상태를 확인하고, 로그아웃된 상태라면 로그인 버튼을 출력한다.
로그인된 상태라면 사용자의 아이디와 로그아웃 버튼을 출력한다.
| PHP 함수, 변수, 언어구조 |
isset() / $_SESSION / echo
|
(4) 삭제/수정/목록 버튼
목록 버튼은 기본으로 출력한다.
삭제/수정 버튼은 로그인된 상태이고, 조회 중인 게시글 작성자와 로그인한 계정의 id가 일치하는 경우 출력한다.
수정버튼을 출력한 경우, $number를 URL 인자로 넘겨주며 modify.php 페이지로 연결한다.
삭제버튼을 출력한 경우, $number를 URL 인자로 넘겨주며 delete.php 페이지로 연결한다.
(5) 게시글 정보/내용 출력
게시글의 제목, 작성자, 작성일, 조회수와 게시글의 내용을 출력한다.
- 게시글이 작성된 지 하루가 지난 후부터는 작성일에 날짜를 표시한다.
만약 하루가 지나지 않았다면 작성시각으로부터 지난 시간을 분 단위로 계산한다.
60분 이하라면 분 단위로 작성일을 표시하고, 60분 이상이라면 시간 단위로 작성일을 표시한다.
| PHP 함수 |
substr() / date_default_timezone_set('Asia/Seoul) / date() / strtotime(), time()
|
(6) 첨부파일 출력
첨부파일이 있다면 첨부파일 제목과 첨부파일의 크기를 출력한다.
첨부파일 제목을 클릭하면 첨부파일의 위치로 이동한다.
| PHP 함수 |
round()
|
| filesize() |
| empty() |
-> filesize: 파일의 크기를 byte로 구해주는 PHP 내장 함수
-> file_dir_name 필드에 저장된 값에 해당되는 파일을 찾아 파일 크기를 구한다.
-> 파일 크기를 byte로 구했기 때문에 1024로 나누면 kb가 된다.
-> 구한 첨부 파일 크기(kb)를 소수점 반올림한 값으로 구하기 위해 round() 함수 사용
-> round(value, n): value값을 반올림하여 소수점 이하 n자리까지 구해준다.
(7) 댓글 DB에 연결하기
댓글이 저장된 comment_db에 comment_user 사용자로 연결한다.
(8) 댓글 DB에서 데이터 가져오기
댓글이 저장된 comment_db의 comment 테이블에서 특정 게시물에 달린 모든 댓글 데이터를 가져온다.
최신 댓글이 먼저 출력되도록 number 칼럼을 기준으로 내림차순한다(최신 글일수록 number 칼럼에 저장된 값이 크다).
| MySQL 질의문 |
SELECT * FROM comment WHERE board_number=$number ORDER BY number DESC
|
(8) 댓글 (+ 댓글 수정/댓글 삭제 버튼) 출력
특정 게시물에 달린 모든 댓글의 작성자, 내용, 작성일을 출력한다.
Comment_Edit()함수는 view.php의 태그 안에 정의되어 있다.
- 현재 로그인된 사용자 id와 댓글 작성자가 일치하면, 제목 옆에 수정, 삭제 버튼을 출력한다.
- 수정 버튼을 클릭하면 javascript로 작성된 Comment_Edit() 함수를 호출한다.
- 삭제 버튼을 클릭하면 comment_delete.php 페이지로 이동한다.
- 댓글이 작성된 지 하루가 지난 후부터는 작성일에 날짜를 표시한다.
만약 하루가 지나지 않았다면 작성시각으로부터 지난 시간을 분 단위로 계산한다.
60분 이하라면 분 단위로 작성일을 표시하고, 60분 이상이라면 시간 단위로 작성일을 표시한다.
| PHP 함수 |
fetch_array() / substr() / date_default_timezone_set('Asia/Seoul) / date() / strtotime(), time()
|
(9) 댓글 수정 창 출력
게시글의 제목, 작성자, 작성일, 조회수와 게시글의 내용을 출력한다.
- 수정 버튼을 클릭하면 호출되는 Comment_Edit() 함수는 원래 댓글의 내용과 날짜를 숨기고,
- 댓글 수정 창이 보여지도록 CSS display 설정을 바꾼다.
- 댓글 수정 창에서 내용을 원하는대로 입력한 뒤 수정 창 하단의 수정 버튼을 클릭하면 comment_modify.php 페이지로 연결한다.
수정 버튼 클릭 이벤트가 발생했을 때 브라우저에 출력되는 요소를 변화시키기 위해 jQuery(javascript 라이브러리)를 설치했다. jQuery 설치 방법은 제일 아래 링크에 있다.
(10) 댓글 입력 창 출력
댓글 입력 창을 출력한다.
댓글 쓰기 버튼을 클릭하면 comment.php 페이지로 연결한다.
CSS
#cmt_edit_box {
display: none;
}
#cmt_time_box {
display: table-row;
}
#cmt_origin {
display: table-row;
}
.cmt_edit_btn {
display: inline;
color: grey;
border: none;
background-color: white;
font-size: 13px;
cursor: pointer;
}
header {
width: 1000px;
height: 45px;
margin-left: 20%;
background-color: #FFF3DD;
padding: 15px 0;
text-align: center;
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
.site_name {
display: inline;
vertical-align: middle;
margin-left: 10%;
}
.account_display {
font-size: 16px;
font-weight: normal;
margin-right: 10px;
vertical-align: top;
float: right;
}
img {
object-fit: contain;
vertical-align: middle;
}
.bt{
width: 50px;
height: 25px;
text-align:center;
color: black;
}
.bt:hover{
text-decoration: underline;
}
#bt1 {
margin-left: 10px;
border: 1px solid #BFBFBFBF;
font-size: 15px;
float: right;
}
#bt2 {
border: none;
background-color: white;
font-size: 14px;
float: right;
}
#bt3 {
display: inline;
color: grey;
border: none;
background-color: white;
font-size: 13px;
cursor: pointer;
text-decoration-line: none;
}
#side_box {
width: 1000px;
margin-left: 20%;
background-color: #FFFFFF;
padding: 15px 0;
text-align: center;
font-size: 1.5em;
margin-bottom: 10px;
}
section {
width: 1000px;
height: 100px;
margin-left: 20%
}
#menu_title {
display: block;
width: 900px;
text-align: left;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
}
.view_table {
overflow: auto;
padding: 0px 10px;
border: 2px solid #FFF3DD;
border-radius: 5px;
}
.view_title {
height: 50px;
font-size: 26px;
text-align: left;
background-color: white;
color: black;
width: 1000px;
}
.view_id {
font-size: 18px;
background-color: white;
}
#view_info {
font-size: 14px;
color: grey;
background-color: white;
}
.view_content {
overflow: auto;
padding-top: 20px;
border-top: 2px solid #FFF3DD;
border-bottom: 2px solid #FFF3DD;
height: 50px;
white-space: pre;
}
.view_cmt {
font-size: 15px;
white-space: pre;
}
.view_cmt_info {
font-size: 12px;
color: grey;
border-bottom: 2px solid #FFF3DD;
}
.input_box {
border: 2px solid #FFF3DD;
border-radius: 3px;
width: 900px;
display: inline-block;
}
#input_area {
border: 0px;
width: 890px;
height: 45px;
display: inline-block;
}
.cmt_edit_box {
width: 890px;
height: 45px;
position: absolute;
}CSS 설명:
2022.01.13 - [project] - [웹게시판] CSS 태그/스타일
[ 참고한 블로그 ]
'project' 카테고리의 다른 글
| [웹게시판] (9) 로그인 세션 생성(login_action.php) (0) | 2022.01.17 |
|---|---|
| [웹게시판] (8) 로그인(login.php) (0) | 2022.01.17 |
| [웹게시판] (6) 게시글 등록(write_action.php) (0) | 2022.01.17 |
| [웹게시판] (5) 게시글 작성(write.php) (0) | 2022.01.17 |
| [웹게시판] (4) 게시글 검색(search.php) (0) | 2022.01.17 |