[APM] Homepage bbs

- 1 -
1. 프로그램 개요
기본적인 기능을 가진 게시판
Ÿ 제목, 내용, 비밀번호로 글 작성 가능
Ÿ 글 작성 순서대로 번호가 붙음
Ÿ 번호 순서대로 리스트 작성
Ÿ 비밀번호 확인 후 글 삭제 가능
Ÿ 다음글, 이전글로 이동 가능
Ÿ 접속 방법 :　hi4003.cafe24.com/list.php로 접속
2.구성 및 사용 프로그램
Ÿ Front-end : HTML, CSS, Javascript / Atom
Ÿ Back-end : PHP, Mysql / Atom
Ÿ 서버 :　웹 호스팅 (hi4003.cafe24.com) / Putty, FileZilla(FTP)
3.개발 프로세스
Ÿ PC에 Apache와 사용 프로그램들을 설치한다.
Ÿ Bitnami로 서버, DB를 연결한 뒤 에디터(Atom)을 열어 소스를 작성, 수정한다.
Ÿ 브라우저를 켜고 localhost/board/xxxx.php로 접속해서 수정된 페이지를 확인한다.
Ÿ cafe24에서 받은 도메인으로 FileZilla와 Putty / HeidiSQL에 접속한다.
Ÿ FileZilla를 켜고 접속 정보를 입력한 후 PC에 저장되어있는 xxxx.php를 서버의 같은
파일에 덮어쓴다.
Ÿ hi4003.cafe24.com로 접속해서 실제로 반영 되었는지 확인한다.
Ÿ DB 수정이 필요한 경우 Putty를 실행시키고 mysql에 접속한 뒤 SQL을 작성한다.
Ÿ HeidiSQL을 켜고 mysql에 접속해도 DB를 확인할 수 있다.
4. 프로그램 설계 및 파일 정보
프로그램 명 :　나의 첫 게시판
작성자 :　16038020 김희진

- 2 -
Ÿ list.php는 DB에서 값을 불러와서 글번호를 기준으로 최신글이 맨 위로 오도록 내림
차순으로 큐을 정렬해서 글번호, 제목, 작성 시간, 조회수를 보여준다.
Ÿ list.php에서 글쓰기 버튼을 누르면 write.php로 이동한다.
Ÿ write.php에서 제목, 내용, 비밀번호를 입력하면 insert.php가 DB에 반영한다.
Ÿ list.php에서 글 제목이나 번호를 클릭하면 글을 읽는 페이지인 read.php로 이동한다.
Ÿ read.php에서 글 삭제를 누르면 delete.php로 이동한다.
Ÿ delete.php에서 비밀번호를 입력하면 confirm.php에서 비밀번호가 맞는지 확인하고
DB에 반영한다.
5. DB 설계
board（id, pass, title, content, wdate, ip, view）　PK={ id }
Ÿ id: 글 번호, 주키, 자료형은 int, 1부터 자동으로 오름차순으로 부여되도록 unsigned
와 AUTO_INCREMENT를 사용함
Ÿ pass: 비밀번호, 자료형은 문자열
Ÿ title: 글의 제목, 자료형은 문자열
Ÿ content: 글의 내용, 자료형은 text
Ÿ wdate: 글을 쓴 날짜, 자료형은 datetime
Ÿ ip: 작성자의 ip주소, 자료형은 문자열
Ÿ view: 조회수, 자료형은 int, 초기값은 0
Ÿ 모든 속성은 NULL이 아님

- 3 -
6. SQL문
7. 메인 코드
db_info.php
<?php
$conn = mysql_connect("localhost","xxx","xxx");
mysql_select_db("board",$conn);
?>
Ÿ DB 접속 정보를 가지고 있는 파일. DB이름과 비밀번호는 xxx로 표시함
write.php
...
<?php
header('Content-Type: text/html; charset=UTF-8');
?>
</head>
<body topmargin=0 leftmargin=0 text=#464646>
<center>
<BR>

<form action=insert.php method=post>
<table width=580 border=0 cellpadding=2 cellspacing=1 bgcolor=#777777>
<tr>
<td height=20 align=center bgcolor=#999999>
<font color=white><B>글쓰기</B></font>
</td>
</tr>

- 4 -
<tr>
<td bgcolor=white> 
<TABLE>
<tr>
<td width=60 align=left>제 목</td>
<td align=left>
<INPUT type=text name=title size=60 maxlength=35>
</td>
</tr>
<tr>
<td width=60 align=left>내용</td>
<td align=left>
<TEXTAREA name=content cols=65 rows=15></TEXTAREA>
</td>
</tr>
<tr>
<td width=60 align=left>비밀번호</td>
<td align=left>
<INPUT type=password name=pass size=8 maxlength=8>
</td>
</tr>
<tr>
<td colspan=10 align=center>
<INPUT type=submit value="저장"> 
<INPUT type=button value="목록" onclick="history.back(-1)">
</td>
</tr>
</TABLE>
</td>
</tr>

Ÿ <head>부분 안에 header('Content-Type: text/html; charset=UTF-8'); 문장을 통해 한
글 깨짐 현상을 해결하였다.
Ÿ POST형식을 이용해서 폼을 만들어주었다. 저장 버튼을 누르면 입력된 값들이 action
뒤에 쓰여 있는 insert,php로 이동한다.
Ÿ 목록 버튼을 누르면 이전 페이지인 list.php로 이동한다.
insert.php
<?php
include "db_info.php";
$title= $_POST["title"];
$content = $_POST["content"];
$pass = $_POST["pass"];
$query="INSERT INTO board(id, pass, title, content, wdate, ip, view)
VALUES('','$pass','$title','$content',now(),'{$_SERVER['REMOTE_ADDR']}',0)";
$result=mysql_query($query, $conn);
//DB연결종료

- 5 -
mysql_close($conn);
//1초 뒤 리스트로
echo ("<meta http-equiv='Refresh' content='1;URL=list.php'>");
?>
<center>
<font size=2>정상적으로 저장되었습니다.</font>
Ÿ 쿼리문을 통해 DB에 값을 넣어준 뒤 DB연결을 종료한다.
Ÿ 1초 후 list.php로 이동한다.
list.php
<?php
extract($_POST);
extract($_SERVER);
// mysql_select_db("");
$query = "select * from board order by id desc";
$result = mysql_query($query, $conn);
?>
...
<?php
while($row = mysql_fetch_array($result)){
?>
<tr>
<td bgcolor="#ffffff" align=center><a href="read.php?num=<?=$row['id']?>">
<?=$row['id']?></a>
<td bgcolor="#ffffff" align=center><a href="read.php?num=<?=$row['id']?>">
<?=strip_tags($row['title'],'<b><i>');?></a>
<td bgcolor="#ffffff" align=center><?=$row['wdate']?>
<td bgcolor="#ffffff" align=center><?=$row['view']?>
<?php
}
mysql_close($conn);
?>
</table>
<p>
<a href=write.php>[Write]</a>
</center>
Ÿ board의 큐들을 id를 기준으로 최신 글이 맨 위로 오도록 내림차순으로 정렬하고
while문을 이용해서 리스트를 만들어준 다음 DB연결을 종료한다.

- 6 -
Ÿ 각 글 번호, 글 제목을 클릭하면 read.php로 이동하는데, id를 num으로 넘겨준다.
read.php
...
<?php
?>
</head>
<center>
<br>
<?php
$id = $_GET["num"];
$query = "select * from board where id=$id";
$result = mysql_query($query, $conn);
$row=mysql_fetch_array($result);
?>
<table width=600 border=0 cellpadding=2 cellspacing=1 bgcolor=#777777>
<tr>
<td height=20 align=center bgcolor=#777777 colspan=4>
<font color=white><B><?=$row['title']?></font>
</td>
</tr>
<tr>
<td bgcolor=#dddddd width=50 height=20 align=center>날 짜</td>
<td bgcolor=white width=250><?=$row['wdate']?></td>
<td bgcolor=#dddddd width=50 height=20 align=center>조회수</td>
<td bgcolor=white width=250><?=$row['view']?></td>
</tr>
<tr>
<td bgcolor=white colspan=4>
<font color=black>
<pre><?=$row['content']?></pre>
</font>
</td>
</tr>

<tr>
<td colspan=4 bgcolor=white>
<table width=100%>
<tr>
<td width=200 height=20 align=left>
<a href=list.php>[목록보기]</a>
<a href=write.php>[글쓰기]</a>
<a href=delete.php?num=<?=$row['id']?>>[글삭제]</a>
</td>

- 7 -
<td align=right>
<?php
$query = mysql_query("select id from board where id > $id limit 1",
$conn);
$prev_id = mysql_fetch_array($query);
if($prev_id[id]){
echo "<a href=read.php?num=$prev_id[id]>[이전] </a>";
}else{
echo "[이전]";
}
?>
<?php
$query = mysql_query("select id from board where id < $id
order by id desc limit 1", $conn);
$next_id = mysql_fetch_array($query);
if($next_id['id']){
echo "<a href=read.php?num=$next_id[id]> [다음]</a>";
}else{
echo "[다음]";
}
?>
...
<?php
$result=mysql_query("update board set view = view + 1 where id=$id");
mysql_close($conn);
?>
Ÿ num을 GET방식으로 받아서 id에 저장한다. id가 동일한 큐를 추출해서 각 항목에 맞
게 보여준다.
Ÿ 이전 버튼을 클릭하면 현재의 id보다 작은 id의 글로 이동한다. prev_id의 값을 num
으로 넘겨준다.
Ÿ 다음 버튼을 클릭하면 현재의 id보다 큰 id의 글로 이동한다. next_id의 값을 num으
로 넘겨준다.
Ÿ 조회수를 1씩 올려준 뒤 DB연결을 종료한다.
delete.php
...
<?php
?>
</head>

- 8 -
<?php
$id = $_GET["num"];
?>
<center>
<br>
<form action=confirm.php?num=<?=$id?> method=post>
<table width=300 align=center border=0 cellpadding=2 cellspacing=1
bgcolor=#777777>
<tr>
<td height=20 align=center bgcolor=#999999>
<font color=white>비 밀 번 호 확 인</font>
</td>
</tr>
<tr>
<td align=center>
<font color=white><B>비밀번호 : </b>
<INPUT type=password name=pass size=8>
<INPUT type=submit value="확 인">
<INPUT type=button value="취 소" onclick="history.back(-1)">
...
Ÿ num을 GET방식으로 받아서 id에 입력한다.
Ÿ POST형식을 이용해서 폼을 만들어주었다. 확인 버튼을 누르면 입력된 비밀번호가
action 뒤에 쓰여 있는 confirm,php로 이동하면서 id를 num으로 보내준다.
Ÿ 취소 버튼을 누르면 이전 페이지인 read.php로 이동한다.
confirm.php
<?php
$id = $_GET["num"];
$result=mysql_query("SELECT pass FROM board WHERE id=$id",$conn);
$row=mysql_fetch_array($result);
$pass=$_POST[pass];
if($pass==$row[pass])
{
$query = "DELETE FROM board WHERE id=$id";
$result=mysql_query($query,$conn);
}
else{
echo("<script>
alert('비밀번호가 틀립니다.');
history.go(-1);
</script>
");
exit;
}
?>

- 9 -
<center>
<meta http-equiv="refresh" content='1; URL=list.php'>
<FONT size=2>삭제되었습니다.</font>
</center>
Ÿ num을 GET형식으로 받아서 id에 넣어준다. id가 동일한 큐를 추출해서 비밀번호를
비교한다.
Ÿ 비밀번호가 틀렸을 때에는 경고창이 뜨면서 다시 입력하게 한다.
Ÿ 비밀번호가 맞았을 때에는 id가 동일한 큐를 DB에서 삭제하고 1초 뒤 list.php로 돌
아가게 한다.
8. 실행 결과
<글쓰기>
<DB반영 후>
<글 목록>

- 10 -
<글 내용 보기>
<글 삭제>
<비밀번호가 틀린 경우>
<비밀번호가 맞은 경우>
<삭제 전 DB>
<삭제 후 DB>
<DB반영 후>
9. 평가 및 느낀점
§ 기본적인 게시판의 기능을 구현해내었다.
§ 로그인 없이도 간단하게 글 작성과 글 삭제가 가능하다.
§ 디자인이 심플하다.
§ 보안에는 취약하므로 실제로 쓰이지는 못한다.

- 11 -
웹 프로그래밍은 해본 적이 없어서 처음 게시판을 만들어야 했을 때는, 내가 아직 html
도 모르는데 만들 수 있을까? 라고 생각했었다. 그래서 어떤 언어를 사용해야할지, 어떤
서버, 어떤 DB를 사용해야할지 고민을 많이 했었다. php가 서버 연결하기엔 간단하다고
해서 APM을 사용하기로 했다.
다행히 이번 학기에 같이 듣는 수업 중에서 html, css, javascript 관련된 수업이 있어서
게시판 만들기에 많은 도움이 됐다. php는 책으로 차근차근 공부하면서 일단 게시판 만
들기에 필요한 문법을 우선시 하여 공부했다.
제일 어려웠던 부분은 역시 데이터베이스 관련 부분이었다. 데이터베이스를 설계하거나
질의문을 작성하는 것은 문제가 없었는데, 데이터베이스와 서버를 연결하고 반영하는 부
분에서 POST방식이나 GET방식에 대한 심도 있는 이해가 필요했다.
웹호스팅에서도 정말 고난을 많이 겪었다. 처음엔 관심 있는 분야였던 AWS로 호스팅을
하고 싶었는데 자료가 너무 없어서 cafe24에서 호스팅을 시작했다. cafe24는 지금도 많
이 사용되는 곳이라서 프로그램만 몇 개 더 설치하면 간단하게 이용 가능했다. 그러나
왜인지 localhost에서는 문제가 없이 잘 돌아가던 프로그램이 DB관련 문제가 일어났다.
서버는 문제가 없어서 접속하는 건 되는데 DB에서 값을 가져오거나 값을 반영하는 부분
이 제대로 작동하지 않았다. DB에 문제가 있는 것도 아니고 DB와 서버가 연동되어있지
않을 리가 없는데 이런 문제가 있어서 굉장히 좌절했다.
한번은 보고서를 쓰는 도중에 블루 스크린이 뜬 적이 있었는데 php파일이나 DB는 건
들지 않았는데 갑자기 myphpAdmin에 로그인도 안 되고 당연히 DB연동도 안되어서 당
황한 적이 있었다. 비트나미에서 DB 포트번호를 바꿔주니 다시 myphpAdmin은 로그인
이 되었는데 DB는 여전히 연동이 안 되어 있어서 다시 방법을 찾아보다가 db_info.php
에서 local뒤에 바뀐 포트번호를 추가해서 해결하였다.
처음으로 웹 프로그래밍을 시작해서 만든 게시판을 이렇게 실제로 구현하고 호스팅까
지 해볼 수 있어서 너무 좋은 경험이었다. 시간이 모자라서 구현하지 못한 글 수정 기능
도 다음에 종강하고 나서 마저 구현해 보려고 한다. 여러 가지 어려운 점도 많았지만 그
만큼 보람 있었고 한층 성장할 수 있게 되어서 다행이라고 생각한다.
10.학습 자료
Ÿ 뇌를 자극하는 PHP / 한빛 미디어
Ÿ 차세대 웹 프로그래밍 / 한빛 아카데미
Ÿ 구글 검색

[APM] Homepage bbs

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to [APM] Homepage bbs

Similar to [APM] Homepage bbs (20)

[APM] Homepage bbs