앞서 작성한 게시글에 이어서 구현 부분과 결론을 설명하도록 하겠다. 앞전의 게시글은 본 링크에서 확인할 수 있다.
구현
구현된 부분의 상세 화면과 주요 코드를 설명할 예정이다. 본 코드는 Github에 존재하지 않으므로, 간단하게 코드를 설명한다. 코드는 모두 php로 이루어져 있다.
1. 회원가입
로그인 버튼을 선택했을 때 나오는 화면의 일부이다. 설계에서 설명했듯이 "아직 회원이 아니신가요?"를 선택하면 회원가입 페이지로 넘어갈 수 있다.
앞서 설명했듯이 정보를 입력하는 페이지이며, 오류메시지를 출력하는 부분은 아래의 그림과 같다.
좌측 그림은 회원가입시 빈칸이 존재할 때 뜨는 메시지이며 우측 그림은 ID가 이미 사용되고 있을 때 뜨는 메시지이다.
이어서 좌측 그림은 닉네임이 이미 사용되고 있을 때 뜨는 메시지이며, 우측 그림은 비밀번호와 비밀번호 확인에서 다를 때 뜨는 메시지이다.
회원가입이 정상적으로 이루어졌을 때 출력되는 웹 사이트이다. 여기서 위의 "바닷속 이야기" 제목을 선택하게 되면 메인화면으로 이동되게 된다.
데이터베이스에 저장된 회원 정보를 확인할 수 있다. 이미지를 출력하면 테이블이 깨져서 출력되므로, 이미지를 제외한 정보를 출력하였다.
✔ 주요 코드
if(empty($_POST['nickname']) || empty($_POST['id']) || empty($_POST['birth']) || empty($_POST['pw']) || empty($_POST['pwcon'])){ /* 칸이 하나라도 비었을 시 */
echo "<script language=javascript> alert('칸을 채우셔야 합니다!'); location.replace(history.go(-1)); </script>";
exit;
}
if ($_POST['pw'] != $_POST['pwcon']){ /* 비밀번호와 비밀번호 확인이 다를때 */
echo "<script language=javascript> alert('비밀번호가 다릅니다!'); location.replace(history.go(-1)); </script>";
exit;
}
...
$dbc = mysqli_connect($host,$user,$pass,$dbname) or die("Error Connecting to MySQL Server");
/* dbcon에서 가져온 변수를 통해 sql 연결 */
$nickname = mysqli_real_escape_string($dbc, trim($_POST['nickname']));
$password = mysqli_real_escape_string($dbc, trim($_POST['pw']));
$birth = mysqli_real_escape_string($dbc, trim($_POST['birth']));
$id = mysqli_real_escape_string($dbc, trim($_POST['id']));
$passcon = mysqli_real_escape_string($dbc, trim($_POST['pwcon']));
$image = addslashes(file_get_contents($_FILES['userimg']['tmp_name']));
/* 닉네임, 비밀번호, 생일, 아이디, 비밀번호확인, 이미지를 변수에 저장 */
...
if(mysqli_num_rows($result) != 0){ /* 아이디가 이미 있을 때 */
echo "<script language=javascript> alert('이미 사용중인 ID 입니다!'); location.replace(history.go(-1)); </script>";
exit;
}
...
$result = mysqli_query($dbc , $query) or die("Error Querying database.");
if(mysqli_num_rows($result) != 0){ /* 닉네임이 이미 있을 때 */
echo "<script language=javascript> alert('이미 사용중인 닉네임 입니다!'); location.replace(history.go(-1)); </script>";
exit;
};2. 로그인
로그인 화면은 앞서 설명한 것과 동일하다. 
좌측 그림은 로그인 시 칸을 채우지 않았을 때 뜨는 메시지이며, 중간 그림은 정보를 입력했을 때 일치하지 않으면 뜨는 메시지이다. 마지막으로 우측 그림은 정보를 입력한 후 일치하면 뜨는 메시지이다. 우측 그림처럼 메시지가 뜨게되고 확인을 선택하면 메인 화면으로 돌아간다.
✔ 주요 코드
if (isset($_SESSION['id'])){ /* 로그인이 이미 되어있을 때 */
echo "<script language=javascript> alert('세션을 통해서 로그인 정보를 확인하였습니다.'); location.replace('mainhome.php'); </script>";
exit;
}
if(empty($_POST['id']) || empty($_POST['pw'])){ /* 아이디와 비밀번호 칸이 비었을 때 */
echo "<script language=javascript> alert('칸을 채우셔야 합니다!'); location.replace(history.go(-1)); </script>";
exit;
}
$query = "select id,password,userid,nickname from user where id='$id' and password=SHA('$password')"; //id와 password 확인
$result = mysqli_query($dbc , $query) or die("Error Querying database.");
if(mysqli_num_rows($result) == 1){
$row = mysqli_fetch_assoc($result);
$userid = $row['userid'];
$_SESSION['userid'] = $userid;
setcookie('userid', $row['userid'],time() + (60 * 60 * 24));
setcookie('nickname', $row['nickname'],time() + (60 * 60 * 24));
echo "<script language=javascript> alert('로그인에 성공하였습니다! 메인으로 이동합니다.'); location.replace('mainhome.php'); </script>";
exit;
}
else { /* 아이디 또는 비밀번호가 맞지 않을 경우 */
echo "<script language=javascript> alert('로그인에 실패하였습니다!'); location.replace(history.go(-1)); </script>";
exit;
}
3. 메인
로그인을 진행했을 때 뜨게되는 메인화면이다. 오른쪽 상단 "OO님 환영합니다!"라는 문구를 확인할 수 있다.
✔ 주요 코드
if(!isset($_SESSION['userid'])){ /* 로그인 안 되어있을 때 메뉴바에 로그인 */
echo '<li><a href="login.html" accesskey="5" title="">로그인</a></li>';
}
else { /* 로그인되어있을 때 메뉴바에 로그아웃 */
echo '<li><a href="logout.php" accesskey="5" title="">로그아웃</a></li>';
}
4. 관리자 수정 요청
소개 페이지 우측 하단을 보면 관리자 수정요청 버튼을 확인할 수 있다. 이를 로그인하지않고 선택할 시 아래 그림과 같은 메시지가 출력되게 된다.
로그인이 되어있다면 위와 같은 메시지가 출력되지 않고 수정 요청사항 페이지로 이동하게 된다. 수정 요청할 내용을 입력하고 등록하면 데이터베이스에 저장된다
위의 그림에서 데이터베이스에 저장된 모습을 확인할 수 있다.
5. 게시글 리스트 조회
정보 나눔 메뉴를 선택하면 뜨게되는 화면이다.
✔ 주요 코드
<?php
require_once('dbcon.php');
$dbc = mysqli_connect($host,$user,$pass,$dbname) or die("Error Connecting to MySQL Server");
mysqli_query($dbc , 'set names utf8');
$query = "select p.text, p.title, u.nickname, p.writenum, p.date from post as p join user as u on p.number = u.userid order by writenum desc";
//user를 join 하여 post를 select 함
$ret = mysqli_query($dbc, $query) or die("Error Querying database.");
while($result = mysqli_fetch_array($ret, MYSQL_BOTH)) //리스트를 출력하는 반복문
{
//title변수에 DB에서 가져온 title을 선택
$title=$result["title"];
if(strlen($title)>30)
{
//title이 30을 넘어서면 ...표시
$title=str_replace($result["title"],mb_substr($result["title"],0,30,"utf-8")."...",$result["title"]);
}
?>
<tbody>
<tr>
<td width="70"><?php echo $result['writenum']; ?></td> //번호
<td width="500"><a href="comment.php?writenum=<?php echo $result["writenum"];?>"><?php echo $title;?></a></td> //제목
<td width="120"><?php echo $result['nickname']?></td> //글쓴이
<td width="100"><?php echo $result['date']?></td> //작성날짜
</tr>
</tbody>
<?php } ?>6. 게시글 작성
게시글 작성 버튼을 선택했을 때 로그인하지 않은 상태라면 뜨는 메시지이다. 글을 작성하려면 반드시 로그인을 진행해야 한다.
로그인 했을 때 선택하면 뜨게되는 글 작성 페이지이다. 칸을 채우지 않으면 채우라는 메시지가 출력된다. 이를 채우고 등록 버튼을 선택하면 글이 등록되었다는 메시지가 출력되게 된다. 작성되는 것은 게시판에서 확인할 수 있다. 
✔ 주요 코드
if(empty($_POST['text']) || empty($_POST['title'])){ //내용이나 제목이 비었을 때
echo "<script language=javascript> alert('칸을 채우셔야 합니다!'); location.replace(history.go(-1)); </script>";
exit;
}
...
if (!empty($_FILES['imagefile']['tmp_name'])){ //이미지가 있을 때
$image=addslashes(file_get_contents($_FILES['imagefile']['tmp_name']));
$query = "insert into post value('$text', '$title',NULL,$id,NOW(),'$image')"; //삽입
$result=mysqli_query($dbc, $query)
or die("Error Querying database.");
$que = "alter table post auto_increment=1";
$re1 = mysqli_query($dbc, $que) or die("Error Querying database.");
$set = "set @count = 0"; //글 번호 초기화
$re2 = mysqli_query($dbc, $set) or die("Error Querying database.");
$up = "update post set post.writenum=@count:=@count+1";
$re3 = mysqli_query($dbc, $up) or die("Error Querying database.");
mysqli_close($dbc);
echo "<script language=javascript> alert('글이 등록 되었습니다!!'); location.replace('board.php'); </script>";
exit;
}
else{ //이미지가 없을 때
$query = "insert into post value( '$text', '$title',NULL,$id,NOW(),'NULL')";
$result=mysqli_query($dbc, $query)
or die("Error Querying database.");
$que = "alter table post auto_increment=1";
$re1 = mysqli_query($dbc, $que) or die("Error Querying database.");
$set = "set @count = 0"; //글 번호 초기화
$re2 = mysqli_query($dbc, $set) or die("Error Querying database.");
$up = "update post set post.writenum=@count:=@count+1";
$re3 = mysqli_query($dbc, $up) or die("Error Querying database.");
mysqli_close($dbc);
echo "<script language=javascript> alert('글이 등록 되었습니다!!'); location.replace('board.php'); </script>";
exit;
}7. 게시글 검색
게시판 리스트 하단에 검색하는 Form이 존재한다.
Form 좌측에 메뉴를 선택하는 부분이 있는데, 글쓴이와 제목으로 나누어져 있다.
키워드를 입력하지 않았을 때 Form에서 입력란을 작성하라는 경고가 뜬다.
키워드를 입력하고 검색하면 제목에 "안녕"이라는 키워드가 담긴 부분만 검색이 되어 리스트로 출력된다. 글쓴이도 제목과 동일하게 적용된다.
✔ 주요 코드
if ($catagory == "nickname"){ //닉네임을 기반으로 검색하였을 때
$query = "select text,title,nickname,writenum,date from post,user where user.$catagory like '%$search_con%' and post.number = user.userid order by writenum desc";
}
else { //제목을 기반으로 검색하였을 때
$query = "select text,title,nickname,writenum,date from post,user where $catagory like '%$search_con%' and post.number = user.userid order by writenum desc";
}
$ret = mysqli_query($dbc, $query) or die("Error Querying database.");8. 게시글 수정
좌측 그림에 존재하는 [수정]을 선택했을 때 우측 그림처럼 출력된다. 수정시 제목과 내용은 유지되어 수정할 수 있다.
좌측 그림처럼 내용을 수정한 후 등록을 선택하면 우측 그림과 같이 내용이 수정되어 나온다. 데이터베이스에도 내용이 수정되게끔 하였다.
✔ 주요 코드
if(empty($_POST['text']) || empty($_POST['title'])){ //게시글에 칸을 채우지 않았을 때
echo "<script language=javascript> alert('칸을 채우셔야 합니다!'); location.replace(history.go(-1)); </script>";
exit;
}
if (!empty($_FILES['imagefile']['tmp_name'])){ //이미지가 존재할 때
$image=addslashes(file_get_contents($_FILES['imagefile']['tmp_name']));
$query = "update post set text='$text', title='$title',postimage='$image' where writenum='$writenum'"; //내용 수정
$result=mysqli_query($dbc, $query)
or die("Error Querying database.");
$que = "alter table post auto_increment=1";
$re1 = mysqli_query($dbc, $que) or die("Error Querying database.");
$set = "set @count = 0";
$re2 = mysqli_query($dbc, $set) or die("Error Querying database.");
$up = "update post set post.writenum=@count:=@count+1";
$re3 = mysqli_query($dbc, $up) or die("Error Querying database.");
mysqli_close($dbc);
echo "<script language=javascript> alert('글이 등록 되었습니다!!'); location.replace('board.php'); </script>";
exit;
}
else{ //이미지가 존재하지 않을 때
$query = "update post set text='$text', title='$title', postimage='NULL' where writenum='$writenum'"; //내용 수정
$result=mysqli_query($dbc, $query)
or die("Error Querying database.");
$que = "alter table post auto_increment=1";
$re1 = mysqli_query($dbc, $que) or die("Error Querying database.");
$set = "set @count = 0";
$re2 = mysqli_query($dbc, $set) or die("Error Querying database.");
$up = "update post set post.writenum=@count:=@count+1";
$re3 = mysqli_query($dbc, $up) or die("Error Querying database.");
mysqli_close($dbc);
echo "<script language=javascript> alert('글이 등록 되었습니다!!'); location.replace('board.php'); </script>";
exit;
}9. 게시글 삭제
우측 하단에 존재하는 [삭제]를 선택하게 되면 게시글은 삭제된다.
위의 그림처럼 메시지가 뜨게되고, 게시판에는 게시글이 삭제된다.
✔ 주요 코드
$query = "delete from post where writenum='$writenum'"; //게시글을 삭제하는 DB 명령어
$result = mysqli_query($dbc, $query) or die("Error Querying database.");
$que = "alter table post auto_increment=1"; //글 번호 초기화
$re1 = mysqli_query($dbc, $que) or die("Error Querying database.");
$set = "set @count = 0";
$re2 = mysqli_query($dbc, $set) or die("Error Querying database.");
$up = "update post set post.writenum=@count:=@count+1";
$re3 = mysqli_query($dbc, $up) or die("Error Querying database.");
echo $writenum;
echo "<script language=javascript> alert('삭제 되었습니다!'); location.replace('board.php'); </script>";
exit;10. 댓글 작성
게시글에서 댓글을 작성하고 댓글 작성 버튼을 선택하면 댓글이 작성되었다는 메시지가 출력되고 댓글을 확인할 수 있다.
댓글을 달고난 후의 메시지 처리 후 게시글 상세정보이다. 댓글이 출력되는 것을 확인할 수 있다.
댓글들의 정보가 저장된 데이터베이스를 확인할 수 있다.
✔ 주요 코드
$query = "insert into comment value('$text', NOW(), '$writenum','$id')"; //댓글 삽입 명령어
$ret = mysqli_query($dbc, $query) or die("Error Querying database.");
mysqli_close($dbc);
echo "<script language=javascript> alert('댓글이 등록 되었습니다!!'); location.replace(history.go(-1)); </script>";
exit;11. 댓글 수정
댓글 수정 버튼을 누를 시 아래의 그림과 같이 폼이 뜨게된다. 
원래 댓글창에서 바로 수정하게끔 구현하고 싶었지만, 시간이 부족하여 폼을 새로 만들어 구현하였다.
좌측 그림처럼 내용을 입력하고 수정버튼을 선택하면 우측 그림처럼 댓글이 수정되어 출력된다.
$query = "update comment set text='$text' where commentnum='$writenum' and usernum='$id'";
echo $query; //댓글 수정
$result=mysqli_query($dbc, $query)
or die("Error Querying database.");
mysqli_close($dbc);
echo "<script language=javascript> alert('댓글이 수정되었습니다!!!'); location.replace(history.go(-2)); </script>";
exit;12. 댓글 삭제
좌측 그림에서 삭제 버튼을 선택하면 댓글이 삭제되었다는 메시지가 출력되고 댓글이 삭제된다. 후에 우측 그림처럼 댓글이 사라진다.
$query = "delete from comment where usernum='$id' and commentnum='$writenum'";
//댓글 삭제 명령어
$ret = mysqli_query($dbc, $query) or die("Error Querying database.");
mysqli_close($dbc);
echo "<script language=javascript> alert('댓글이 삭제 되었습니다!!'); location.replace(history.go(-1)); </script>";
exit;13. 로그아웃
로그아웃을 선택하면 로그아웃하였다는 메시지가 출력되고 메인 화면으로 돌아가게 된다.
if(isset($_COOKIE[session_name()])){
setcookie(session_name(), '',time() - (60 * 60)); //쿠키 제거
}
session_destroy(); //세션 파괴
setcookie('userid', '',time() - (60 * 60));
setcookie('password', '',time() - (60 * 60));
echo "<script language=javascript> alert('로그아웃 하였습니다! 홈으로 돌아갑니다.'); location.replace('mainhome.php'); </script>";
exit;결론
간단하게 상호작용이 가능한 커뮤니티 웹 사이트를 개발해보았다. 시간을 많이 투자하지 않아 웹 사이트에서 어수선한 부분도 많고, 고쳐야될 부분이 많았다. 하지만 기능 자체에서는 구현을 어느정도 다 했다고 볼 수 있다.
추후 시간이 된다면 조금 더 UI에 신경을 써서 구현을 해보고싶다.
기록용입니다.