간단한 게시판 만들기 4번째 글입니다.
이전 글에 이어서 이번에는 게시판에 글 등록과, 글 삭제 기능을 추가해 보겠습니다.
게시판에 글을 등록하고 등록한 글도 삭제하는 기능은 게시판 기능 중 핵심이라고 할 수 있습니다.
HTML페이지 작업
먼저 HTML페이지에서 form과 자바스크립트 처리를 해주겠습니다.
이전에 글쓰기와 삭제는 동작하지 않는 버튼만 미리 만들어 두었습니다.
그 버튼을 눌렀을 때 등록과 삭제가 가능하도록 해주겠습니다.
test_page.php
<input type="button" onclick="location.href='write_page.php'" value="글쓰기">
글쓰기 버튼에 클릭 시 write_page로 이동가능하게 onclick에 href를 넣어줍니다.
글쓰기 페이지 - 스타일
게시판의 글쓰기 페이지의 디자인을 티스토리와 비슷하게 만들어 보겠습니다.
<style>
.title_box {
display:inline-block;
width:100%;
padding:10px 0 10px 0;
line-height:1.3em;
background:#EAEAEA;
color:#333333;
text-align:center;
font-size:16px;
font-weight:bold;
}
.post-title {
width: 800px;
margin: 18px auto 17px;
border-bottom: 1px solid rgba(0,0,0,.05);
}
.post-title .textarea_tit {
display: block;
width: 100%;
height: 56px;
border: none;
font-size: 30px;
color: #202020;
font-family: Noto Sans DemiLight,AppleSDGothicNeo-Regular,Malgun Gothic,dotum,sans-serif;
resize: none;
outline: 0 none;
line-height: 40px;
overflow: hidden;
letter-spacing: -.4px;
}
.post-title .on::placeholder {
color:red;
}
#select{
width: 120px;
height: 30px;
border: 1px solid #e9e9e9;
float: left;
margin-bottom: 10px;
}
.textarea_cont {
width: 100%;
min-height: 400px;
border: none;
resize: none;
}
.textarea_cont:focus {
outline: none;
}
.content-aside {
position: absolute;
bottom: 0;
width: 100%;
height: 66px;
background-color: #f5f5f5;
z-index: 1;
overflow: hidden;
text-align: right;
}
.content-aside .wrap_btn {
float: right;
padding: 13px;
}
.content-aside .wrap_btn .btn {
width: 88px;
margin: 0 4px;
line-height: 38px;
height: 40px;
border-radius: 20px;
border: 1px solid #d0d0d0;
}
.btn-default {
background-color: #000;
color: #fff;
border: 1px solid #000;
}
</style>
스타일의 코드를 위와 같이 작성했습니다.
티스토리를 참고했기 때문에 스타일 코드도 티스토리와 비슷합니다.
글쓰기 페이지 - 스크립트
<script type="text/javascript">
function submit_func(mode) {
var form = document.notice_form;
if(!form.title.value) {
$("#title").addClass("on");
} else if(!form.content.value) {
alert("글의 내용을 입력해주세요.");
} else {
$("#mode").val(mode);
form.submit();
}
}
</script>
스크립트의 코드입니다.
완료를 눌렀을 때 제목과 글의 내용이 있는지 판단한 뒤에 있다면 submit 처리를 하는 것입니다.
php의 한 페이지에서 등록과 삭제 쿼리를 처리해 줄 것이기 때문에,
등록인지 삭제인지 판별하기 위해 mode값을 설정해 주었습니다.
mode값은 form태그 아래의 hidden값으로 설정해 두었으며 아래 html 태그에 넣어두었습니다.
document.form이름으로 form을 찾고 그 아래에 title의 값과 content의 값이 존재하는지를 체크합니다.
글쓰기 페이지 - html
다음은 html 코드입니다.
<a href="test_page.php"><div class="title_box">Jong's 게시판</div></a>
<div style="text-align: right; padding: 20px 0 10px 0; position: relative;">
<form id="notice_form" name="notice_form" method="post" action="test_page2.php">
<input type="hidden" value="" name="mode" id="mode">
<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="제목을 입력하세요"></textarea>
</div>
<textarea class="textarea_cont" name="content" id="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('write');" value="완료">
</div>
</div>
</form>
</div>
notice_form이라는 이름의 폼 태그 안에 값들을 입력받습니다.
카테고리는 설정해 둔 것은 css로 처리만 해두었습니다.
나중에 카테고리 별로 게시글을 정리하고 싶다면 카테고리에 값을 넣어 작성하는 글마다 카테고리를 남겨주면 됩니다.
취소 버튼을 누르면 게시판 목록 페이지로 돌아가고, 완료 버튼을 누르면 submit_func의 함수에서 제대로 값이 다 들어갔는지 판단 후 문제없다면 test_page2.php 페이지로 값을 넘겨주어 그곳에서 db 쿼리 처리를 합니다.
이렇게 작성하고 난 결과물입니다.
티스토리의 글쓰기 페이지와 비슷하게 만들어 보았습니다.
안에 세부적인 기능들은 없고 모양만 비슷하게 꾸며둔 것입니다.
제목과 내용을 다 입력한 후 완료 버튼을 통해서 글을 등록합니다.
제목을 입력하지 않고 완료 버튼을 눌렀을 때, "제목을 입력하세요" 부분 붉게 표시합니다.
내용을 입력하지 않고 완료 버튼을 눌렀을 때, 글의 내용을 입력해 주세요 라는 경고 창 표시합니다.
DB에 등록하기
이제 틀은 다 잡았으니 입력된 내용만 DB에 저장이 되면 마무리입니다.
test_page2.php
header("Content-type:text/html;charset=utf-8");
$mode = $_POST["mode"];
$title = $_POST["title"];
$content = $_POST["content"];
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 == "delete") {
} else {
echo"<script>
alert('실패! 다시 시도 해주세요.');
</script>";
exit();
}
POST로 전달된 값을 받아옵니다.
mode를 write와 delete로 구분하여 글쓰기와 글 삭제 구분을 해줍니다.
글쓰기 일 때 sql문을 insert into로 작성하여 새로 DB에 값을 넣어줍니다.
성공적으로 등록되었을 때 '글이 성공적으로 등록되었습니다.'라는 알림과 함께 게시글 목록 페이지로 이동합니다.
등록이 실패했을 때는 '등록실패!'라는 메시지와 함께 바로 이전 페이지로 돌아갑니다.
위 이미지와 같은 내용으로 테스트해 보겠습니다.
글이 잘 등록되었다는 메시지가 표시됩니다.
가장 위의 "제목입니다."라고 등록된 글이 보입니다.
위의 이미지를 확인해 보면, DB에도 잘 등록된 것을 확인할 수 있습니다.
결론
이렇게 게시판에 글 등록까지 마무리되었습니다.
DB에 데이터를 저장해야 되기 때문에 조금 복잡하다 생각할 수 있습니다.
이제 게시판은 거의 마무리 단계가 되었습니다.
다음에 게시판 상세 페이지와 함께, 상세페이지 안에 글 삭제 버튼도 만들어 보도록 하겠습니다.
'코딩' 카테고리의 다른 글
| [jQuery] confirm 확인과 취소, div 값 변경 (23) | 2023.02.13 |
|---|---|
| [HTML/PHP] 간단한 게시판 만들기 #5 (상세페이지/수정/삭제) (29) | 2023.02.09 |
| [HTML/PHP] 간단한 게시판 만들기 #3 (검색기능) (33) | 2023.01.31 |
| [HTML/PHP] 간단한 게시판 만들기 #2 (페이징) (40) | 2023.01.26 |
| [HTML/PHP] 간단한 게시판 만들기 #1 (DB 데이터 불러오기, 게시판 형식만들기) (33) | 2023.01.17 |
댓글