JAVASCRIPT

php로 게시판 만들기 !

Kim do hyun 2023. 4. 25. 19:13
728x90
반응형

php로 게시판 만들기

선생님을 따라하며 직접 만든 사이트입니다. 

 

 

 

board.php

<?php
    include "../connect/connect.php";
    include "../connect/session.php";
?>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시판</title>

    <?php include "../include/head.php" ?>
</head>
<body class="gray">
    
    <?php include "../include/skip.php" ?>
    <!-- //skip -->

    <?php include "../include/header.php" ?>
    <!-- //header -->

    <main id="main" class="container">
        <div class="intro__inner center bmStyle">
            <picture class="intro__images small">
                <source srcset="../assets/img/join01.png, ../assets/img/join01@2x.png 2x, ../assets/img/join01@3x.png 3x" />
                <img src="../assets/img/join01.png" alt="회원가입 이미지">
            </picture>
            <h2>게시판</h2>
            <p class="intro__text">
                웹디자이너, 웹 퍼블리셔, 프론트엔드 개발자를 위한 게시판입니다.<br>
                관련된 문의사항은 여기서 확인하세요!
            </p>
        </div>
        <!-- intro__inner -->
        <div class="board__inner">
            <div class="board__search">
                <div class="left">
                    * 총 <em>1111</em>건의 게시물이 등록되어 있습니다.
                </div>
                <div class="right">
                    <form action="#" name="#" method="post">
                        <fieldset>
                            <legend class="blind">게시판 검색 영역</legend>
                            <input type="search" placeholder="검색어를 입력하세요!">
                            <select name="#" id="#">
                                <option value="title">제목</option>
                                <option value="content">내용</option>
                                <option value="name">등록자</option>
                            </select>
                            <button type="submit" class="btnStyle3 white">검색</button>
                            <a href="boardWrite.php" class="btnStyle3">글쓰기</a>
                        </fieldset>
                    </form>
                </div>
            </div>
            <div class="board__table">
                <table>
                    <colgroup>
                        <col style="width: 5%">
                        <col>
                        <col style="width: 10%">
                        <col style="width: 15%">
                        <col style="width: 7%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>번호</th>
                            <th>제목</th>
                            <th>등록자</th>
                            <th>등록일</th>
                            <th>조회수</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <tr>
                            <td>1</td>
                            <td><a href="boardView.html"><a href="boardView.html">게시판 제목</a></a></td>
                            <td>김도현</td>
                            <td>2022-02-02</td>
                            <td>100</td>
                        </tr> -->

<?php
    $sql = "SELECT b.boardID, b.boardTitle, m.youName, b.regTime, b.boardView FROM board b JOIN members m ON(b.memberID = m.memberID) ORDER BY boardID DESC LIMIT 10";
    $result = $connect -> query($sql);

    if($result){
        $count = $result -> num_rows;

        if($count > 0){
            for($i=0; $i<$count; $i++){
                $info = $result -> fetch_array(MYSQLI_ASSOC);

                echo "<tr>";                
                echo "<td>".$info['boardID']."</td>";
                echo "<td><a href='boardView.php?boardID={$info['boardID']}'>".$info['boardTitle']."</a></td>";
                echo "<td>".$info['youName']."</td>";
                echo "<td>".date('Y-m-d', $info['regTime'])."</td>";
                echo "<td>".$info['boardView']."</td>";
                echo "</tr>";
            }
        }
    }
?>
                    </tbody>
                </table>
            </div>
            <div class="board__pages">
                <ul>
                    <li><a href="#">처음으로</a></li>
                    <li><a href="#">이전</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                    <li><a href="#">7</a></li>
                    <li><a href="#">다음</a></li>
                    <li><a href="#">마지막으로</a></li>
                </ul>
            </div>
        </div>
    </main>
    <!-- //main -->

    <?php include "../include/footer.php" ?>
    <!-- //footer -->
</body>
</html>

코드 설명

메인 게시판 영역입니다 본문 맨위에 삽입되어있는 사이트의 코드입니다.

이 코드의 php 코드에 대한 설명입니다.
SQL 쿼리문을 작성합니다. 이 쿼리문은 board 테이블과 members 테이블을 JOIN하여 게시판 글의 정보와 작성자 정보를 가져옵니다. 가져온 정보는 boardID 기준으로 내림차순으로 정렬하며 최대 10개의 결과만 가져오도록 LIMIT 조건을 추가합니다.

$connect -> query($sql)을 사용하여 쿼리문을 실행하고 결과를 $result 변수에 저장합니다.

$result가 참인 경우, 가져온 결과의 행 수를 $count 변수에 저장합니다.

$count가 0보다 큰 경우, for 루프를 사용하여 $count번 반복하며 $info 변수에 각 행의 결과를 저장합니다.

$info 변수에서 boardID, boardTitle, youName, regTime, boardView 컬럼의 값을 가져와 HTML 테이블의 한 행(row)을 출력합니다.

for 루프를 빠져나가고, 전체적으로 HTML 테이블의 형식에 맞춰 출력을 완료합니다.

즉, 이 코드는 MySQL 데이터베이스에서 게시판 글의 정보를 가져와 HTML 테이블로 출력하는 기능을 수행합니다.

 

 

boardModify.php

<?php
    include "../connect/connect.php";
    include "../connect/session.php";
?>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시판</title>

    <?php include "../include/head.php" ?>
</head>
<body class="gray">
    
    <?php include "../include/skip.php" ?>
    <!-- //skip -->

    <?php include "../include/header.php" ?>
    <!-- //header -->

    <main id="main" class="container">
        <div class="intro__inner bmStyle center">
            <picture class="intro__images img small">
                <source srcset="../assets/img/intro01.png, ../assets/img/intro01@2x.png 2x, ../assets/img/intro01@3x.png 3x" />
                <img src="../assets/img/intro01.png" alt="소개이미지">
            </picture> 
            <h2>게시글 수정하기</h2>
            <p class="intro__text">
                웹디자이너, 웹 퍼블리셔, 프론트엔드 개발자를 위한 게시판입니다.<br>
                관련된 문의사항은 여기서 확인하세요!
            </p>
        </div>

        <div class="board__inner">
            <div class="board__write">
                <form action="boardModifySave.php" name="boardWriteSave" method="post">
                    <fieldset>
                        <legend class="blind">게시글 작성하기</legend>
<?php
    $boardID = $_GET['boardID'];

    $sql = "SELECT boardID, boardTitle, boardContents FROM board WHERE boardID = {$boardID}";
    $result = $connect -> query($sql);

    if($result){
        $info = $result -> fetch_array(MYSQLI_ASSOC);

        echo "<div style='display:none'><label for='boardID'>번호</label><input type='text' id='boardID' name='boardID' class='inputStyle' value='".$info['boardID']."'></div>";
        echo "<div><label for='boardTitle'>제목</label><input type='text' id='boardTitle' name='boardTitle' class='inputStyle' value='".$info['boardTitle']."'></div>";
        echo "<div><label for='boardContents'>내용</label><textarea name='boardContents' id='boardContents' rows='20'  class='inputStyle'>".$info['boardContents']."</textarea></div>";
    }
?>
                        <!-- <div>
                            <label for="boardTitle">제목</label>
                            <input type="text" id="boardTitle" name="boardTitle" class="inputStyle">
                        </div>
                        <div>
                            <label for="boardContents">내용</label>
                            <textarea name="boardContents" id="boardContents" rows="20"  class="inputStyle"></textarea>
                        </div> -->

                        <button type="submit" class="btnStyle3">저장하기</button>
                    </fieldset>
                </form>
            </div>
        </div>
    </main>
    <!-- //main -->

    <?php include "../include/footer.php" ?>
    <!-- //footer -->
</body>
</html>

코드 설명

$boardID = $_GET['boardID']: GET 방식으로 전달된 boardID 값을 변수에 저장합니다.

$sql = "SELECT ... WHERE boardID = {$boardID}": 게시글 정보를 가져오기 위한 SQL 쿼리를 작성합니다. WHERE 절에서는 전달받은 boardID 값을 이용하여 해당 게시글 정보를 가져오도록 작성되었습니다.

$result = $connect -> query($sql): 작성된 SQL 쿼리를 실행하여 결과 값을 변수에 저장합니다.

if($result) { ... }: 결과 값이 존재하는 경우, 해당 게시글 정보를 출력합니다.

$info = $result -> fetch_array(MYSQLI_ASSOC): 결과 값을 배열 형태로 가져와서 $info 변수에 저장합니다.

echo "<div style='display:none'><label for='boardID'>번호</label><input type='text' id='boardID' name='boardID' class='inputStyle' value='".$info['boardID']."'></div>";: 수정 폼에서 번호를 표시하기 위해 HTML 태그를 이용하여 출력합니다. 이 때, style 속성을 이용하여 해당 요소를 숨겨놓습니다.

echo "<div><label for='boardTitle'>제목</label><input type='text' id='boardTitle' name='boardTitle' class='inputStyle' value='".$info['boardTitle']."'></div>";: 수정 폼에서 제목을 표시하기 위해 HTML 태그를 이용하여 출력합니다.

echo "<div><label for='boardContents'>내용</label><textarea name='boardContents' id='boardContents' rows='20' class='inputStyle'>".$info['boardContents']."</textarea></div>";: 수정 폼에서 내용을 표시하기 위해 HTML 태그를 이용하여 출력합니다. 여기서는 textarea 태그를 이용하여 여러 줄의 내용을 입력할 수 있도록 하였습니다.

 

 

boardModifySave.php

<?php
    include "../connect/connect.php";
    include "../connect/session.php";
    $boardID = $_POST['boardID'];
    $boardTitle = $_POST['boardTitle'];
    $boardContents = $_POST['boardContents'];
    $boardTitle = $connect -> real_escape_string($boardTitle);
    $boardContents = $connect -> real_escape_string($boardContents);
    $sql = "UPDATE board SET boardTitle = '{$boardTitle}', boardContents = '{$boardContents}' WHERE boardID = '{$boardID}'";
    $connect -> query($sql)
?>
<script>
    location.href = "board.php";
</script>

boardRemove.php

<?php
    include "../connect/connect.php";
    include "../connect/session.php";
    $boardID = $_GET['boardID'];
    $boardID = $connect -> real_escape_string($boardID);
    $sql = "DELETE FROM board WHERE boardID = {$boardID}";
    $connect -> query($sql);
?>
<script>
    location.href = "board.php";
</script>

boardView.php

<?php
    include "../connect/connect.php";
    include "../connect/session.php";
?>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시판</title>

    <?php include "../include/head.php" ?>
</head>
<body class="gray">
    
    <?php include "../include/skip.php" ?>
    <!-- //skip -->

    <?php include "../include/header.php" ?>
    <!-- //header -->

    <main id="main" class="container">
        <div class="intro__inner center">
            <picture class="intro__images small">
                <source srcset="../assets/img/join01.png, ../assets/img/join01@2x.png 2x, ../assets/img/join01@3x.png 3x" />
                <img src="../assets/img/join01.png" alt="회원가입 이미지">
            </picture>
            <h2>게시판</h2>
            <p class="intro__text">
                웹디자이너, 웹 퍼블리셔, 프론트엔드 개발자를 위한 게시판입니다.<br>
                관련된 문의사항은 여기서 확인하세요!
            </p>
        </div>
        <!-- intro__inner -->

        <div class="board__inner">
            <div class="board__view">
                <table>
                    <colgroup>
                        <col style="width: 20%">
                        <col style="width: 80%">
                    </colgroup>
                    <tbody>
                        <!-- <tr>
                            <th>제목</th>
                            <td>게시판 제목입니다.</td>
                        </tr>
                        <tr>
                            <th>등록자</th>
                            <td>김도현</td>
                        </tr>
                        <tr>
                            <th>등록일</th>
                            <td>2023-03-03</td>
                        </tr>
                        <tr>
                            <th>조회수</th>
                            <td>99</td>
                        </tr>
                        <tr>
                            <th>내용</th>
                            <td>프론트 앤드 개발자 취업 노하우

                                기본 지식 습득: HTML, CSS, JavaScript는 프론트 엔드 개발에 필수적인 기초 지식입니다. 이들 언어의 기본 문법과 개념을 숙지하고, 브라우저의 동작 방식과 웹 개발에 대한 기본 개념을 이해하는 것이 중요합니다.
                                프레임워크 및 라이브러리 학습: Angular, React, Vue.js 등의 프레임워크와 jQuery, Bootstrap 등의 라이브러리를 학습하는 것이 좋습니다. 이들은 프론트 엔드 개발을 보다 쉽게, 효율적으로 하기 위해 만들어진 도구들입니다.
                                프로젝트 경험 쌓기: 개인적으로 프로젝트를 만들어 보는 것이 중요합니다. 이를 통해 실제 개발 과정을 경험하고, 자신의 능력을 증명할 수 있습니다. Github 등의 온라인 저장소를 이용하여 개발한 프로젝트를 공유하는 것도 좋습니다.
                                영어 학습: 프로그래밍에서 사용되는 언어는 대부분 영어로 되어 있습니다. 따라서 영어로 작성된 문서나 자료를 읽고 이해하는 것이 중요합니다. Stack Overflow, MDN Web Docs 등의 웹사이트들은 영어로 되어 있으며, 개발자들 사이에서 많이 사용되는 언어이기도 합니다.
                                커뮤니티 활동: 개발자들 사이에서 정보 교류를 하며, 서로 도움을 주고 받는 것은 중요합니다. Stack Overflow, Reddit, Github 등의 커뮤니티에 참여하여 다른 개발자들과 교류하는 것이 좋습니다.
                                이력서와 포트폴리오 작성: 취업을 위해서는 이력서와 포트폴리오를 작성하는 것이 필수입니다. 이력서는 간결하게 작성하고, 포트폴리오는 자신의 개발 능력과 프로젝트 경험을 잘 보여주는 것이 좋습니다. 또한, 이력서와 포트폴리오를 지속적으로 업데이트하여 최신 정보를 반영하는 것이 중요합니다.
                            </td>
                        </tr> -->
                        
<?php
    if(isset($_GET['boardID'])){
        $boardID = $_GET['boardID'];

        // echo $boardID;
        $sql = "SELECT b.boardContents, b.boardTitle, m.youName, b.regTime, b.boardView FROM board b JOIN members m ON(m.memberID = b.memberID) WHERE b.boardID = {$boardID}";
        $result = $connect -> query($sql);

        if($result){
            $info = $result -> fetch_array(MYSQLI_ASSOC);
            echo "<tr><th>제목</th><td>".$info['boardTitle']."</td></tr>";
            echo "<tr><th>등록자</th><td>".$info['youName']."</td></tr>";
            echo "<tr><th>등록일</th><td>".date('Y-m-d', $info['regTime'])."</td></tr>";
            echo "<tr><th>조회수</th><td>".$info['boardView']."WQ</td></tr>";
            echo "<tr><th>내용</th><td>".$info['boardContents']."</td></tr>";
        }
    } else {    
    echo "<tr><td colspan='4'>게시글이 없습니다.</td></tr>";
    }
    ?>
                    </tbody>
                </table>
            </div>
            <div class="board__btn mb100">
                <?php if(isset($_GET['boardID'])): ?>
                    <a href="boardModify.php?boardID=<?=$_GET['boardID']?>" class="btnStyle3">수정하기</a>
                    <a href="boardRemove.php?boardID=<?=$_GET['boardID']?>" class="btnStyle3" onclick="if(!confirm('정말 삭제하시겠습니까?')){return false;}">삭제하기</a>
                <?php endif; ?>
                <a href="board.php" class="btnStyle3">목록보기</a>
            </div>
        </div>
    </main>
    <!-- //main -->
    <?php include "../include/footer.php" ?>
    <!-- //footer -->
</body>
</html>

코드 설명

isset($_GET['boardID']): GET 방식으로 전달된 boardID가 존재하는지를 체크합니다.

$boardID = $_GET['boardID']: GET 방식으로 전달된 boardID 값을 변수에 저장합니다.

$sql = "SELECT ... WHERE b.boardID = {$boardID}": 게시글 정보를 가져오기 위한 SQL 쿼리를 작성합니다. WHERE 절에서는 전달받은 boardID 값을 이용하여 해당 게시글 정보를 가져오도록 작성되었습니다.

$result = $connect -> query($sql): 작성된 SQL 쿼리를 실행하여 결과 값을 변수에 저장합니다.

if($result) { ... } else { ... }: 결과 값이 존재하는 경우, 해당 게시글 정보를 출력합니다. 결과 값이 존재하지 않는 경우, "게시글이 없습니다." 라는 메시지를 출력합니다.

$info = $result -> fetch_array(MYSQLI_ASSOC): 결과 값을 배열 형태로 가져와서 $info 변수에 저장합니다.

$info['boardTitle'], $info['youName'], $info['regTime'], $info['boardView'], $info['boardContents']: 가져온 게시글 정보를 출력하기 위한 각각의 변수들입니다.

echo "<tr><th>제목</th><td>".$info['boardTitle']."</td></tr>";: 가져온 게시글 정보를 출력합니다. HTML 테이블의 행(row)과 셀(cell)을 이용하여 제목, 등록자, 등록일, 조회수, 내용 등의 정보를 표시합니다.

date('Y-m-d', $info['regTime']): 등록일 정보를 표시하기 위해 PHP의 date() 함수를 사용합니다. 첫 번째 인자는 출력할 날짜의 포맷을 지정하고, 두 번째 인자는 UNIX 타임스탬프 형태의 날짜 정보를 전달합니다.

MYSQLI_ASSOC: fetch_array() 함수가 반환하는 배열의 형식을 지정합니다. 이 코드에서는 연관 배열 형식으로 반환되도록 설정되었습니다.

 

boardWrite.php

<?php
    include "../connect/connect.php";
    include "../connect/session.php";
?>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시판</title>

    <?php include "../include/head.php" ?>
</head>
<body class="gray">
    
    <?php include "../include/skip.php" ?>
    <!-- //skip -->

    <?php include "../include/header.php" ?>
    <!-- //header -->

    <main id="main" class="container">
        <div class="intro__inner bmStyle center">
            <picture class="intro__images img small">
                <source srcset="../assets/img/intro01.png, ../assets/img/intro01@2x.png 2x, ../assets/img/intro01@3x.png 3x" />
                <img src="../assets/img/intro01.png" alt="소개이미지">
            </picture> 
            <h2>게시글 작성하기</h2>
            <p class="intro__text">
                웹디자이너, 웹 퍼블리셔, 프론트엔드 개발자를 위한 게시판입니다.<br>
                관련된 문의사항은 여기서 확인하세요!
            </p>
        </div>

        <div class="board__inner">
            <div class="board__write">
                <form action="boardWriteSave.php" name="boardWriteSave" method="post">
                    <fieldset>
                        <legend class="blind">게시글 작성하기</legend>
                        <div>
                            <label for="boardTitle">제목</label>
                            <input type="text" id="boardTitle" name="boardTitle" class="inputStyle">
                        </div>
                        <div>
                            <label for="boardContents">내용</label>
                            <textarea name="boardContents" id="boardContents" rows="20"  class="inputStyle"></textarea>
                        </div>
                        <button type="submit" class="btnStyle3">저장하기</button>
                    </fieldset>
                </form>
            </div>
        </div>
    </main>
    <!-- //main -->

    <?php include "../include/footer.php" ?>
    <!-- //footer -->
</body>
</html>

코드 설명

게시판에 글을 작성하는 페이지입니다.

 

boardWriteSave.php

<?php
    include "../connect/connect.php";
    include "../connect/session.php";

    $boardTitle = $_POST['boardTitle'];
    $boardContents = $_POST['boardContents'];
    $boardView = 1;
    $regTime = time();
    $memberID = $_SESSION['memberID'];

    $boardTitle = $connect -> real_escape_string($boardTitle);
    $boardContents = $connect -> real_escape_string($boardContents);

    $sql = "INSERT INTO board(memberID, boardTitle, boardContents, boardView, regTime) VALUES('$memberID', '$boardTitle', '$boardContents', '$boardView', '$regTime')";
    $connect -> query($sql);
?>

<script>
    location.href = "board.php";
</script>