🔓데이터베이스/SQL

게시판 여러 추가기능 만들어보기

하얀성 2023. 11. 26. 20:00

primary key는 댓글 입력시간으로 설정.

parent_id는 부모 테이블인 board의 내용을 참조. 

 

1. 위지윅 기능 

(파일첨부 기능도 추가)

 

input.php

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>

<!-- include summernote-ko-KR -->
<script src="lang/summernote-ko-KR.js"></script>

<script>
$(document).ready(function() {
    $('#summernote').summernote({
        height: 300,             // 에디터의 높이
        minHeight: null,         // 최소 높이
        maxHeight: null,         // 최대 높이
        focus: true,             // 에디터 로딩 후 포커스를 맞출지 여부
        lang: 'ko-KR'            // 기본 메뉴얼을 한국어로 설정
    });
});

var postForm = function() {
    var contents = $('textarea[name="contents"]').html($('#summernote').code());
};
</script>

<?php
echo "
    <center><h1>게시판</h1></center>
    <form method='post' action='process.php?board=$board' enctype='multipart/form-data'>
        <table width='700' border='0'>
            <tr>
                <td width='100' align='right'>이름 </td>
                <td width='600'><input type='text' name='writer' size='20'></td>
            </tr>
            <tr>
                <td align='right'>Email </td>
                <td><input type='text' name='email' size='40'></td>
            </tr>
            <tr>
                <td align='right'>제목 </td>
                <td><input type='text' name='topic' size='60'></td>
            </tr>
            <tr>
                <td align='right'>내용 </td>
                <td><textarea name='content' rows='12' cols='60' id='summernote'></textarea></td>
            </tr>
			<tr>
			   <td align=right><font size=2>첨부화일</font></td>
			   <td><input type=file name='userfile' size=45 maxlength=80></td>
			</tr>
            <tr>
                <td align='right'>암호 </td>
                <td><input type='password' name='passwd' size='15'></td>
            </tr>
            <tr>
                <td align='center' colspan='2'>
                    <input type='submit' value='등록하기'>
                    <input type='reset' value='지우기'>
                </td>
            </tr>
        </table>
    </form>
";
?>

2. 스타일 

3. 댓글갯수 표시기능

 

-각 아이콘에 hover 때 아이콘 색깔에 변화 스타일링.

-제목 옆에 첨부파일 존재여부 아이콘, 

show.php

<!-- Google Material Icons 스타일시트 -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<style>
    .table-board {
        width: 700px;
        margin: 20px auto;
        border-collapse: collapse;
    }
    .table-board th, .table-board td {
        padding: 8px;
        text-align: center;
        border: none; /* 세로줄 제거 */
    }
    .table-board th {
        background-color: #ffd700; /* 헤더 배경 황금색 */
        font-weight: bold;
    }
    .table-board tr:not(:last-child) {
        border-bottom: 1px solid #ddd; /* 가로줄 추가 */
    }
    .search-box {
        text-align: center;
        padding: 10px 0;
    }
    .search-box form {
        display: inline-block; /* 검색 폼을 인라인 블록으로 설정 */
        margin: 0 auto;
    }
    .search-box input[type="text"], .search-box input[type="submit"] {
        padding: 5px;
        margin: 0 5px;
    }
    .write-button {
        text-align: right;
        padding: 10px 10px;
        margin-top: 20px; /* 버튼과 테이블 사이의 간격 추가 */
    }
    .write-button a {
        padding: 5px 15px;
        background-color: #f2f2f2; /* 버튼 배경색 */
        text-decoration: none;
        border: 1px solid #ddd;
        color: #333; /* 글자색 */
    }
    .write-button a:hover {
        background-color: #ffd700; /* 버튼 호버 배경색 황금색 */
    }
    .pages {
        text-align: center;
        padding: 20px 0;
    }
    .pages a {
        padding: 5px 10px;
        margin: 0 2px;
        border: 1px solid #ddd;
        background-color: #f2f2f2;
        color: #333;
        text-decoration: none;
    }
    .pages a:hover {
        background-color: #ffd700; /* 페이지네이션 호버 배경색 황금색 */
    }
	 .material-symbols-outlined {
        font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    }
    .button {
        padding: 5px 15px;
        background-color: #f2f2f2; /* 버튼 배경색 */
        text-decoration: none;
        border: 1px solid #ddd;
        color: #333; /* 글자색 */
        cursor: pointer;
    }

    .button:hover {
        background-color: #ffd700; /* 버튼 호버 배경색 황금색 */
    }
    .write-button a {
        padding: 5px 15px;
        background-color: #f2f2f2;
        text-decoration: none;
        border: 1px solid #ddd;
        color: #333;
        display: flex; 
        align-items: center; 
        justify-content: center; 
    }

</style>
<?php 
$con = mysql_connect("localhost", "root", "apmsetup");
mysql_select_db("comma", $con);
$result = mysql_query("select * from $board order by id desc", $con);
$total = mysql_num_rows($result);

echo "<div style='text-align: center;'>
    <h1>게시판</h1>
    <div class='search-box'>
        <form method='post' action='search.php?board=$board' style='display: flex; align-items: center; justify-content: center;'>
            <select name='field' style='margin-right: 5px; padding: 6px 10px; font-size: 1em;'>
                <option value='writer'>글쓴이</option>
                <option value='topic'>제목</option>
                <option value='content'>내용</option>
            </select>
            <input type='text' name='key' size='13' style='margin-right: 5px;'>
            <button class='button' type='submit' style='margin: 0;'>
                <span class='material-symbols-outlined'>search</span>
            </button>
        </form>
    </div>
    <table class='table-board'>
        <tr>
            <th width='50'>번호</th>
            <th width='100'>글쓴이</th>
            <th width='400'>제목</th>
            <th width='150'>날짜</th>
            <th width='50'>조회</th>
        </tr>";

if (!$total) {
    echo "<tr><td colspan='5' align='center'>아직 등록된 글이 없습니다.</td></tr>";
} else {
    if ($cpage == '') $cpage = 1;
    $pagesize = 5;
    $totalpage = (int)($total / $pagesize);
    if (($total % $pagesize) != 0) $totalpage = $totalpage + 1;
    $counter = 0;

    while ($counter < $pagesize):
        $newcounter = ($cpage - 1) * $pagesize + $counter;
        if ($newcounter == $total) break;
        $id = mysql_result($result, $newcounter, "id");
        $writer = mysql_result($result, $newcounter, "writer");
        $topic = mysql_result($result, $newcounter, "topic");
        $hit = mysql_result($result, $newcounter, "hit");
        $wdate = mysql_result($result, $newcounter, "wdate");
        $space = mysql_result($result, $newcounter, "space");
        $t = "";
        $filename = mysql_result($result, $newcounter, "filename");

        // 댓글 개수 조회
        $commentQuery = "SELECT COUNT(*) FROM memojang WHERE parent_id=$id";
        $commentResult = mysql_query($commentQuery, $con);
        $commentCount = mysql_result($commentResult, 0);

        $fileIndicator = !empty($filename) ? "<span class=\"material-symbols-outlined\" style=\"font-size: 18px;\">attach_file</span>" : "";

        if ($space > 0) {
            for ($i = 0; $i <= $space; $i++)
                $t = $t . "&nbsp;";
        }

        echo "<tr>
                <td align='center'>$id</td>
                <td align='center'>$writer</td>
                <td align='left'>$t<a href='content.php?board=$board&id=$id'>$topic</a> $fileIndicator [$commentCount]</td>
                <td align='center'>$wdate</td>
                <td align='center'>$hit</td>
              </tr>";
        $counter++;
    endwhile;
}

echo "<tr>
        <td colspan='4'></td>
        <td class='write-button'>
            <a href='input.php?board=$board'>
                <span class='material-symbols-outlined'>edit</span>
            </a>
        </td>
      </tr>
    </table>
    <div class='pages'>";

if ($cblock=='') $cblock=1;
$blocksize = 10;
$pblock = $cblock - 1;
$nblock = $cblock + 1;
$startpage = ($cblock - 1) * $blocksize + 1;
$pstartpage = $startpage - 1;
$nstartpage = $startpage + $blocksize;

if ($pblock > 0)
    echo "<a href='show.php?board=$board&cblock=$pblock&cpage=$pstartpage'>이전블록</a> ";

for ($i = $startpage; $i < $nstartpage && $i <= $totalpage; $i++) {
    echo "<a href='show.php?board=$board&cblock=$cblock&cpage=$i'>$i</a>";
}

if ($nstartpage <= $totalpage)
    echo "<a href='show.php?board=$board&cblock=$nblock&cpage=$nstartpage'>다음블록</a> ";

echo "
    </div>
</div>";

?>

 

4. 파일 첨부기능 확인

 

게시판.png를 클릭하면 잘 보여준다. 폴더에 잘 전달됬음을 확인할 수 있다.

5. 댓글 기능

- 댓글 폼 스타일 개선 , 버튼 스타일 개선

- 댓글 입력 및 삭제기능 구현

댓글 삭제 완료(primary key 사용)

 

-다른 글목록 만들기, 댓글 스타일 변경-

 

content.php

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<style>
	.material-symbols-outlined {
        font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    }
	.group-button {
		vertical-align: middle;
		margin: 0;
		/* 기타 필요한 스타일을 여기에 추가하세요 */
	}

	.group-button a {
		padding: 5px 15px;
		background-color: #f2f2f2;
		text-decoration: none;
		color: #333;
		display: flex; 
		align-items: center; 
		justify-content: center; 
	}

    .table-m {
        border-collapse: collapse; /* 테이블 셀의 경계를 합칩니다 */
    }

    .table-m, .table-m th, .table-m td {
        border-left: none; /* 왼쪽 세로줄 제거 */
        border-right: none; /* 오른쪽 세로줄 제거 */
    }

    .table-m th, .table-m td {
        border-top: 1px solid black; /* 상단 가로줄 생성 */
        border-bottom: 1px solid black; /* 하단 가로줄 생성 */
    }

    .button a, .group-button a {
        padding: 5px 15px;
        background-color: #f2f2f2;
        text-decoration: none;
        color: #333;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        /* 기타 필요한 스타일 */
    }

    /* 마우스 호버 시의 스타일 */
    .button:hover a, .group-button:hover a {
        background-color: #ffd700;
    }
	 button:hover, .group-button:hover {
        background-color: #ffd700;
    }
	 .form-container {
        text-align: center; /* 폼을 중앙 정렬 */
        margin: 20px 0; /* 위아래 여백 */
    }

    .form-container input[type="text"], .form-container textarea {
        width: 95%; /* 폭 조정 */
        padding: 8px; /* 내부 여백 */
        margin-bottom: 10px; /* 하단 여백 */
        border: 1px solid #ccc; /* 테두리 */
        border-radius: 4px; /* 테두리 둥글게 */
    }

    .form-container button {
        background-color: #4CAF50; /* 버튼 배경색 */
        color: white; /* 버튼 글자색 */
        padding: 10px 15px; /* 버튼 내부 여백 */
        border: none; /* 테두리 없앰 */
        border-radius: 4px; /* 테두리 둥글게 */
        cursor: pointer; /* 마우스 오버시 커서 변경 */
    }

    .form-container button:hover {
        background-color: #45a049; /* 버튼 호버시 배경색 변경 */
    }
</style>
 
<?php
// 데이터베이스 연결
$con = mysql_connect("localhost", "root", "apmsetup");
mysql_select_db("comma", $con);

// 게시글 정보 가져오기
$result = mysql_query("SELECT * FROM $board WHERE id=$id", $con);

// 조회수 증가
$hit = mysql_result($result, 0, "hit") + 1;
mysql_query("UPDATE $board SET hit=$hit WHERE id=$id", $con);

// 게시글 정보 출력
echo("
    <table border=0 width=700>
    <tr><td align=center><h1>게시판</h1></td></tr>
    </table>
    <a href='show.php?board=$board'><span class=\"material-symbols-outlined\">list</span></a>
    <table border=1 width=700>
        <tr>
            <td width=100>번호: ".mysql_result($result, 0, "id")."</td>
            <td width=200>글쓴이: <a href='mailto:".mysql_result($result, 0, "email")."'  style='text-decoration: none;'>".mysql_result($result, 0, "writer")."</a></td>
            <td width=300>글쓴날짜: ".mysql_result($result, 0, "wdate")."</td>
            <td width=100>조회: $hit</td>
        </tr>
        <tr>
            <td colspan=4>제목: ".mysql_result($result, 0, "topic")."</td>
        </tr>
        <tr>
            <td colspan=4><pre>".mysql_result($result, 0, "content")."</pre></td>
        </tr>
");

// 첨부파일 정보 출력
$filename = mysql_result($result, 0, "filename");
$filesize = mysql_result($result, 0, "filesize");
$disp_size = ($filesize > 1000) ? (int)($filesize / 1000).' KBytes' : $filesize.' Bytes';

echo("<tr><td colspan=4>첨부파일 ");
echo !empty($filename) ? "<a href='./pds/$filename'  style='text-decoration: none;'>: $filename</a> [$disp_size]" : "x";
echo("</td></tr></table>");

// 게시글 수정, 삭제, 답변 링크
echo("
    <table border=0 width=700>
    <tr><td align=right>
			<button class='button' type='submit' style='margin: 0;'>
                <a href='pass.php?board=$board&id=".mysql_result($result, 0, "id")."&mode=0'  style='text-decoration: none;'>수정</a>
            </button>
			<button class='button' type='submit' style='margin: 0;'>
                <a href='pass.php?board=$board&id=".mysql_result($result, 0, "id")."&mode=1'  style='text-decoration: none;'>삭제</a>
            </button>        
			<button class='group-button' type='submit'>
                <span class='material-symbols-outlined'><a href='reply.php?board=$board&id=".mysql_result($result, 0, "id")."'>group_add</a></span>
            </button>
    </td></tr>
    </table>
	<br>
	
");
?>
<?php
// 데이터베이스 연결
$con = mysql_connect("localhost", "root", "apmsetup");
mysql_select_db("comma", $con);

// 게시글 ID 확인
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;

// 댓글 입력 처리
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $wname = isset($_POST['wname']) ? $_POST['wname'] : '';
    $wmemo = isset($_POST['wmemo']) ? $_POST['wmemo'] : '';
    $parent_id = isset($_POST['parent_id']) ? intval($_POST['parent_id']) : 0;

    if (!$wname) {
        echo "<script>alert('이름을 입력하세요'); history.go(-1);</script>";
        exit;
    }
    if (!$wmemo) {
        echo "<script>alert('내용을 입력하세요'); history.go(-1);</script>";
        exit;
    }

    $wdate = date("Y-m-d H:i:s");
    mysql_query("INSERT INTO memojang (wdate, parent_id, name, message) VALUES ('$wdate', '$parent_id', '$wname', '$wmemo')", $con);
    
    // 페이지를 다시 로드하여 댓글 목록을 갱신합니다.
    echo "<meta http-equiv='Refresh' content='0; url=content.php?board=$board&id=$parent_id'>";
    exit;
}

// 게시글 정보 출력 코드는 여기에 배치합니다.

// 댓글 입력 폼
echo("
    <table border=0 width=700>
        <tr><td align=center><h3>댓글</h3></td></tr>
    </table>
    <table border=0 width=700>
    <tr>
        <td align=center>
            <div class='form-container'>
                <form action='content.php?board=$board&id=$id' method='post'>
                    <input type='hidden' name='parent_id' value='$id'>
                    <input type='text' name='wname' placeholder='닉네임'><br>
                    <textarea name='wmemo' rows='4' cols='50' placeholder='내용을 입력하세요'></textarea><br>
                    <button type='submit' class='button'>댓글달기</button>
                </form>
            </div>
        </td>
    </tr>
	</table>
");

// 댓글 목록 출력
$result = mysql_query("select * from memojang where parent_id=$id order by wdate desc", $con);

if (mysql_num_rows($result) == 0) {
    echo "아직 등록된 댓글이 없습니다";
} else {

    while ($comment = mysql_fetch_assoc($result)) {
        echo("
			<table width='700px' style='border-bottom: 1px solid #ccc; margin-bottom: 10px;'>
            <tr>
                <td>".$comment['name']."<br></td>
			</tr>
			<tr>
				<td width='500'>".$comment['message']."</td>
                <td width='150' style='text-align: right; font-weight: 200;'>".$comment['wdate']."</td>
                <td width='50' style='text-align: right'>
					<button><a href='content.php?board=$board&id=".$id."&delete_wdate=".$comment['wdate']."' style='text-decoration: none;'>삭제</a></button>
                </td>
            </tr>
        ");
    }

    echo("</table><br><br>");
	if (isset($_GET['delete_wdate'])) {
		$delete_wdate = mysql_real_escape_string($_GET['delete_wdate']);
		mysql_query("DELETE FROM memojang WHERE wdate = '$delete_wdate'", $con);
		echo "<meta http-equiv='Refresh' content='0; url=content.php?board=$board&id=$id'>";
		exit;
	}
}


?>
<?php 
$con = mysql_connect("localhost", "root", "apmsetup");
mysql_select_db("comma", $con);
$result = mysql_query("select * from $board order by id desc", $con);
$total = mysql_num_rows($result);

echo "<div style='text-align: center;'>
<table class='table-m'>
        <tr>
            <th width='50' style='background-color: #ffd700;'>번호</th>
            <th width='100' style='background-color: #ffd700;'>글쓴이</th>
            <th width='400' style='background-color: #ffd700;'>제목</th>
            <th width='150' style='background-color: #ffd700;'>날짜</th>
            <th width='50' style='background-color: #ffd700;'>조회</th>
        </tr>";



if (!$total) {
    echo "<tr><td colspan='5' align='center'>아직 등록된 글이 없습니다.</td></tr>";
} else {
    if ($cpage == '') $cpage = 1;
    $pagesize = 2;
    $totalpage = (int)($total / $pagesize);
    if (($total % $pagesize) != 0) $totalpage = $totalpage + 1;
    $counter = 0;

    while ($counter < $pagesize):
        $newcounter = ($cpage - 1) * $pagesize + $counter;
        if ($newcounter == $total) break;
        $id = mysql_result($result, $newcounter, "id");
        $writer = mysql_result($result, $newcounter, "writer");
        $topic = mysql_result($result, $newcounter, "topic");
        $hit = mysql_result($result, $newcounter, "hit");
        $wdate = mysql_result($result, $newcounter, "wdate");
        $space = mysql_result($result, $newcounter, "space");
        $t = "";
        $filename = mysql_result($result, $newcounter, "filename");

        // 댓글 개수 조회
        $commentQuery = "SELECT COUNT(*) FROM memojang WHERE parent_id=$id";
        $commentResult = mysql_query($commentQuery, $con);
        $commentCount = mysql_result($commentResult, 0);

        $fileIndicator = !empty($filename) ? "<span class=\"material-symbols-outlined\" style=\"font-size: 18px;\">attach_file</span>" : "";

        if ($space > 0) {
            for ($i = 0; $i <= $space; $i++)
                $t = $t . "&nbsp;";
        }

        echo "<tr>
                <td align='center'>$id</td>
                <td align='center'>$writer</td>
                <td align='left'>$t<a href='content.php?board=$board&id=$id'>$topic</a> $fileIndicator [$commentCount]</td>
                <td align='center'>$wdate</td>
                <td align='center'>$hit</td>
              </tr>";
        $counter++;
    endwhile;
}
echo ("
    </div>");
mysql_close($con);
?>

'🔓데이터베이스 > SQL' 카테고리의 다른 글

게시판리스트 스타일 수정 및 아이콘 추가  (0) 2023.11.24
sql input 이슈관련 수정전후코드.  (0) 2023.11.16
php 게시판만들기 관련 영상(1,2편)  (0) 2023.11.14
오늘은 다사다난하다(환경관리의 중요성)  (0) 2023.11.10
메모장 만들기 [primary key 선언하기]  (0) 2023.11.08

'🔓데이터베이스/SQL'의 다른글

  • 현재글게시판 여러 추가기능 만들어보기

관련글

댓글

티스토리툴바