간단한 게시판 만들기 5번째 글입니다.
이제 작성된 게시판의 상세페이지와 글의 수정 및 삭제 기능을 추가해 보겠습니다.
작성된 글을 확인할 수 있는 페이지, 그리고 본인이 작성한 글은 수정할 수 있는 기능이 들어있어야 게시판일 것입니다.
CSS 수정
게시판의 상세페이지에서 삭제 버튼을 추가할 생각이라 기존에 게시판 목록에 있던 삭제버튼은 제거하여 주고,
글쓰기 버튼을 아래쪽으로 내렸습니다.
살짝 어두운 느낌으로 가는 게 더 좋아 보여서 색상도 조금 변경해 주었습니다.
게시판 상세 페이지
이제 게시판 상세 페이지를 만들어 보겠습니다.
test_page.php
<? while($rs=$db->fetch($res)) { ?>
<tr>
<td><?=$rs["idx"]?></td>
<td>
<a href='write_page.php?mode=view&idx=<?=$rs[idx]?>'>
<?=$rs["title"]?>
</a>
</td>
<td><?=$rs["reg_date"]?></td>
</tr>
<? } ?>
먼저 게시판 목록에서 상세페이지로 넘어가기 위해서 목록에서 게시판 제목을 눌렀을 때 상세페이지로 이동하도록,
a태그를 사용하여 주고 mode를 view로 idx값과 함께 상세페이지로 값을 넘겨줍니다.
write_page.php
<?php
if($idx) {
$sql = "select * from test_list where idx='$idx'";
$rs = $db->fetch_array($sql);
}
?>
다음으로 php코드를 이전페이지에서 넘겨받은 idx값을 통해서 DB에서,
내가 보려는 상세페이지의 idx값과 일치하는 데이터들만 가져와줍니다.
<form id="notice_form" name="notice_form" method="post" action="test_page2.php">
<input type="hidden" value="<?=$mode?>" name="mode" id="mode">
<input type="hidden" value="<?=$idx?>" name="idx" id="idx">
<? if($mode == "write" || $mode == "modify") { ?>
<select id="select">
<option>카테고리</option>
<option>카테고리1</option>
<option>카테고리2</option>
</select>
<div class="post-title">
<textarea class="textarea_tit" name="title" id="title" placeholder="제목을 입력하세요"><?=$rs[title]?></textarea>
</div>
<textarea class="textarea_cont" name="content" id="content"><?=$rs[content]?></textarea>
<div class="content-aside">
<div class="wrap_btn">
<input class="btn" type="button" onclick="location.href='test_page.php'" value="취소">
<input class="btn btn-default" type="button" onclick="submit_func('<?=$mode?>');" value="완료">
</div>
</div>
<? } else if($mode == "view") { ?>
<div class="post-title">
<span style="float:left;">카테고리</span>
<textarea class="textarea_tit" name="title" id="title" placeholder="제목을 입력하세요" readonly><?=$rs[title]?></textarea>
</div>
<textarea class="textarea_cont" name="content" id="content" readonly><?=$rs[content]?></textarea>
<div class="content-aside">
<div class="wrap_btn">
<input class="btn" type="button" onclick="location.href='test_page.php'" value="목록으로">
<input class="btn btn-default" type="button" onclick="location.href='<?=$PHP_SELF?>?mode=modify&idx=<?=$idx?>'" value="수정하기">
<input class="btn" type="button" style="background: brown; color: white;" onclick="submit_func('delete');" value="삭제">
</div>
</div>
<? } ?>
</form>
상세페이지 코드는 위와 같습니다.
이전에 만들었던 글쓰기 페이지에서 mode를 추가하여 주고,
mode가 view일 때만 readonly 옵션을 활성화시켜서 수정이 되지 않도록 했습니다.
그리고 오른쪽아래에 버튼을 목록, 수정, 삭제 버튼 3가지를 추가해 주었습니다.
처음 mode는 view로 글의 내용을 보는 것만 가능하며,
수정하기 버튼을 누르면 mode는 modify로 변경되며 수정이 가능하게 됩니다.
삭제 버튼을 누르면 mode는 delete가 되며 test_page2.php페이지에서 쿼리문을 통해 삭제처리 됩니다.
<script type="text/javascript">
function submit_func(mode) {
var form = document.notice_form;
if(mode == "write") {
if(!form.title.value) {
$("#title").addClass("on");
} else if(!form.content.value) {
alert("글의 내용을 입력해주세요.");
} else if(confirm("등록하시겠습니까?")) {
form.submit();
}
} else if(mode == "modify") {
if(!form.title.value) {
$("#title").addClass("on");
} else if(!form.content.value) {
alert("글의 내용을 입력해주세요.");
} else if(confirm("수정하시겠습니까?")) {
form.submit();
}
} else if(mode == "delete") {
if(confirm("삭제하시겠습니까?")) {
$("#mode").val("delete");
form.submit();
}
} else {
alert("잘못된 접근입니다. 다시시도해주세요.");
false();
}
}
</script>
자바 스크립트입니다.
mode값에 따라 상황에 맞는 경고문을 출력해 주고,
confirm을 사용하여 확실하게 등록, 삭제, 수정을 할지 물어본 뒤에 확인 버튼을 누르면 처리가 되게 됩니다.
작성된 페이지는 이렇게 표시가 됩니다.
test_page2.php
<?php
header("Content-type:text/html;charset=utf-8");
$mode = $_POST["mode"];
$title = $_POST["title"];
$content = $_POST["content"];
$idx = $_POST["idx"];
if($mode == "write") {
$sql = "insert into test_list set title='$title', content='$content', reg_date=SYSDATE();";
$result = $db->query($sql);
if($result > 0) {
echo"<script>
alert('글이 성공적으로 등록되었습니다.');
location.href='/process/test_page.php';
</script>";
exit();
} else {
echo"<script>
alert('등록실패!');
location.href='javascript:history.back();';
</script>";
exit();
}
} else if ( $mode == "modify") {
$sql = "update test_list set title='$title', content='$content', reg_date=SYSDATE() where idx=$idx;";
$result = $db->query($sql);
if($result > 0) {
echo"<script>
alert('글이 성공적으로 수정되었습니다.');
location.href='/process/write_page.php?mode=view&idx=$idx';
</script>";
exit();
} else {
echo"<script>
alert('수정실패!');
location.href='javascript:history.back();';
</script>";
exit();
}
} else if ( $mode == "delete") {
$sql = "delete from test_list where idx=$idx;";
$result = $db->query($sql);
echo"<script>
alert('삭제되었습니다.');
location.href='/process/test_page.php';
</script>";
exit();
} else {
echo"<script>
alert('실패! 다시 시도 해주세요.');
</script>";
exit();
}
?>
쿼리문을 처리해 주는 php 페이지입니다.
mode값에 따라서 처리해 주는 쿼리가 달라지며 insert, update, delete문을 통해서 등록, 수정, 삭제 처리를 합니다.
이제 다 완성이 되었습니다. 잘 동작하는지 확인해 보겠습니다.
수정하기 잘 동작하는 것 확인해 보았습니다.
다음으로 삭제하기도 잘 동작하는지 확인해 보겠습니다.
삭제도 마찬가지로 잘 작동되는 걸 확인할 수 있습니다.
결론
이렇게 간단하게 게시판을 등록, 수정, 삭제까지 추가를 끝냈습니다.
기본적인 게시판의 기능들은 전부 구현을 한 것 같습니다.
이렇게 차근차근 코딩을 해가면 게시판 하나는 생각보다 금방 만들게 될 것입니다.
이 글이 개발자를 준비하거나 개발의 초보자 분들에게 많은 도움이 되었으면 좋겠습니다.
'코딩' 카테고리의 다른 글
| [jQuery] 파일 첨부 시 미리보기, 파일 확장자명 판별하기 (39) | 2023.02.14 |
|---|---|
| [jQuery] confirm 확인과 취소, div 값 변경 (23) | 2023.02.13 |
| [HTML/PHP] 간단한 게시판 만들기 #4 (글쓰기) (34) | 2023.02.06 |
| [HTML/PHP] 간단한 게시판 만들기 #3 (검색기능) (33) | 2023.01.31 |
| [HTML/PHP] 간단한 게시판 만들기 #2 (페이징) (40) | 2023.01.26 |
댓글