혜랑's STORY

[개발] 글 작성, 수정 기능 본문

2021 SISS 21기 활동/겨울방학 WEB Project

[개발] 글 작성, 수정 기능

hyerang0125 2021. 2. 4. 01:33

#데이터베이스 설정

가장 먼저 개발을 위한 기본 환경을 만들기 위해 "cookies"라는 이름의 데이터베이스를 만들었다.

데이터베이스 만들기

그 뒤, 데이터들이 들어갈 테이블을 만들어 주었다. 오늘 만들 글을 작성, 수정하는 기능에 필요한 테이블은 "board"라는 이름으로 만들어주었다.

테이블 만들기

숫자는 꼭 필요하기 때문에 not null로 설정하였고, 키는 기본키 그리고 자동으로 번호가 매겨지도록 설정하였다. 나머지 제목, 내용, 아이디, 날짜 또한 꼭 필요한 존재이기 때문에 not null 설정을 하였고, 각 변수에 알맞게 데이터 타입을 설정해 주었다.

추가적으로 글 작성, 수정에 필요한 화면을 제작하면서 바로 기능을 구현해 주었다.

#게시물 작성

  • $conn = mysqli_connect('localhost', 'root', '비밀번호', 'cookies') or die ("connect fail");

-> 데이터베이스 연결하는 명령이다.

<!doctype html>
<html>
<head>
    <title>write page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="write.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
</head>
<body>
    <!--
    <?php
        session_start();
        $URL = './main.php';
        if(!isset($_SESSION['userid'])){
    ?>
    <script>
        alert("로그인이 필요합니다.");
        location.replace("<?php echo $URL?>");
    </script>
    <?php 
        } 
    ?>
    -->
    <center>
    <form action="process_write.php" method="post">
    <table class="content-from">
        <tr>
            <td><input type="hidden" name="name" value="<?=$_SESSION['uerid']?>" class="title-box"></td>
        </tr>
        <tr>
            <td><input type="text" name="title" placeholder="제목" class="title-box"></td>
            <td><button id="image-btn" class ="image-btn-box"><img src="images/image_btn.png"></button></td>
            <td><input type="submit" id="save-btn" class="save-btn-box" action="proceses_write.php"></td>
        </tr>
        <tr>
            <td colspan="3">
                <textarea name="content" cols="105" rows="20" placeholder="내용" class="content-box"></textarea>
            </td>
        </tr>
    </table>
    </form>
    </center>
</body>
</html>

 

-> 주석처리 되어있는 코드는 나중에 로그인 기능을 구현한 뒤, 로그인이 되어 있어야지만 글을 작성할 수 있도록 작성해 둔 코드이다.

 

#게시물 작성 확인

<?php
$conn = mysqli_connect('localhost', 'root', '2011732', 'cookies');

$id = $_POST['name'];
$title = $_POST['title'];
$content = $_POST['content'];

$URL = './board.php';

$sql = "
    INSERT INTO board (
        number,
        title,
        content,
        id,
        date
    ) VALUES (
        null,
        '$title',
        '$content',
        '$id',
        NOW()
    )";

$result = mysqli_query($conn, $sql);
if($result === false)
        echo mysqli_error($conn);
else{
?>                  
<script>
    alert("<?php echo "글이 등록되었습니다."?>");
    location.replace("<?php echo $URL?>");
</script>
<?php
}     
mysqli_close($conn);
?>

 

-> 게시물 작성이 성공적으로 수행되었는지 확인하는 코드이다.

 

#게시물 목록(=검색결과)

<!doctype html>
<html>
<head>
    <title>board page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="board.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
</head>
<body>
    <?php
        $conn = mysqli_connect('localhost', 'root', '2011732', 'cookies') or die ("connect fail");
        $sql = "SELECT * FROM board order by number desc";
        $result = mysqli_query($conn, $sql);
        $total = mysqli_num_rows($result);
    ?>
    <center>
        <form>
          <fieldset class="search-from">
                <input class="input-text" placeholder="레시피를 검색해주세요." type="text">
                <button id="search-btn" type="submit" style="background:none; border:0px;"><img src="images/search_btn.png" class="submit-btn"></button>
          </fieldset>
        </form>

        <table>
            <th>
                <tr style="font-size:30px; border-top:3px solid #FFDE82">
                    <td width="70" style="border-top:3px solid #FFDE82">번호</td>
                    <td width="500" style="border-top:3px solid #FFDE82">제목</td>
                    <td width="120" style="border-top:3px solid #FFDE82">글쓴이</td>
                    <td width="100" style="border-top:3px solid #FFDE82">작성일</td>
                </tr>
            </th>
            <tbody>
            <?php
                while($rows = mysqli_fetch_assoc($result)){
            ?>
            <tr>
                <td width="70"><?php echo $total?></td>
                <td width="500">
                    <a href = "./view.php?number=<?php echo $rows['number']?>">
                    <?php echo $rows['title']?>
                </td>
                <td width="120"><?php echo $rows['id']?></td>
                <td width="100"><?php echo $rows['date']?></td>
            </tr>
            <?php 
                $total--;
                }
            ?>
            </tbody>
        </table>
    </center>

</body>
</html>

 

-> 앞의 기능을 사용하여 게시물을 작성하였다. 결과는 다음과 같다.

게시물 목록 확인

이번엔 cookies를 확인해보자!

데이터베이스 결과

앞서 개발을 하는 과정에서 쓰레기 값들을 넣어두었었는데 모두 삭제해 주었기 때문에 지금은 게시물이 한개 존재한다. 이렇듯 number와 번호가 다르게 출력되는 이유는 번호를 출력할 때, $total을 사용하기 때문이다. 

  • $total = mysqli_num_rows() : 데이터베이스에 저장되어있는 열의 개수를 가져옴

 

#게시물 확인

<?php
    $conn = mysqli_connect('localhost', 'root', '2011732', 'cookies') or die ("connect fail");
    $number = $_GET['number'];
    session_start();
    $sql = "SELECT title, content, id, date FROM board WHERE number = $number";
    $result = mysqli_query($conn, $sql);
    $rows = mysqli_fetch_assoc($result);
?>

<!doctype html>
<html>
<head>
    <title>view page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="view.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
</head>
<body>
    <center>
    <table class="view-table">
        <tr>
            <td colspan="4" class="view-title"><?php echo $rows['title']?></td>
        </tr>
        <tr>
            <td class="view-id">작성자</td>
            <td class="view-id2"><?php echo $rows['id']?></td>
            <td class="view-date">작성날짜</td>
            <td class="view-date2"><?php echo $rows['date']?></td>
        </tr>
        <tr>
            <td colspan="4" class="view-content"><?php echo $rows['content']?></td>
        </tr>
    </table>

    <div>
        <button onclick="location.href='./board.php'" class="button">목록으로</button>
        <button class="button" onclick="location.href='./update.php?number=<?php echo $number?>&id=<?php echo $rows['id']?>'">수정</button>
        <button class="button" onclick="location.href='./delete.php?number=<?php echo $rows['number']?>&id=<?php echo $rows['id']?>'">삭제</button>
    </div>
    </center>
</body>
</html>

 

/*view.css*/
body{
    background-color: #FFF7DE;
    font-family: 'Nanum Pen Script', cursive;
}

td{
    font-size: 22px;
}

.view-table{
    border: 3px solid black;
    margin-top: 120px;
    width: 1000px;
}

.view-title{
    height: 40px;
    text-align: center;
    background-color: #FFDE82;
    border-bottom: 2px solid #FFF7DE;
    font-size: 26px;
}

.view-id{
    text-align: center;
    background-color: #FFDE82;
    border-bottom: 2px solid #FFF7DE;
}

.view-id2{
    text-align: center;
    background-color: white;
    width: 300px;
    border-bottom: 2px solid #FFF7DE;
}

.view-date{
    text-align: center;
    background-color: #FFDE82;
    border-bottom: 2px solid #FFF7DE;
}

.view-date2{
    text-align: center;
    background-color: white;
    border-bottom: 2px solid #FFF7DE;
}

.view-content{
    padding: 20px;
    border-top: 3px solid black;
    height: 500px;
}

.button{
    background-color: #FFDE82;
    width: 322px;
    height: 48px;
    border: 3px solid black;
    margin: 7px;
    margin-top: 20px;
    padding: 5px;
    box-sizing: border-box;
}

 

-> 목록에 있는 제목을 눌러 게시물의 내용을 확인해보자!

게시물 확인 페이지

역시 데이터베이스에 들어있는 값이 잘 출력되고 있다.

 

#게시물 수정

<!doctype html>
<html>
<head>
    <title>update page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="write.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
</head>
<body>
    <?php
        $conn = mysqli_connect('localhost', 'root', '2011732', 'cookies') or die ("connect fail");
        $userid = $_GET['id'];
        $number = $_GET['number'];
        $sql = "SELECT title, content, id, date FROM board WHERE number = $number";
        $result = mysqli_query($conn, $sql);
        $rows = mysqli_fetch_assoc($result);

        $title = $rows['title'];
        $content = $rows['content'];
    ?>
    <!--
    <?php
        session_start();
        $URL = './main.php';
        if(!isset($_SESSION['userid'])){
    ?>
    <script>
        alert("로그인이 필요합니다.");
        location.replace("<?php echo $URL?>");
    </script>
    <?php 
        }
        
    ?>
    -->
    <center>
    <form action="process_update.php" method="POST">
    <table class="content-from">
        <tr>
            <td><input type="text" name="name" value="<?php echo $userid?>" class="title-box"></td>
        </tr>
        <tr>
            <td><input type="text" name="title" value="<?php echo $title?>" class="title-box"></td>
            <td><button id="image-btn" class ="image-btn-box"><img src="images/image_btn.png"></button></td>
            <td><input type="submit" id="save-btn" class="save-btn-box" action="proceses_write.php"></td>
        </tr>
        <tr>
            <td colspan="3">
                <textarea name="content" cols="105" rows="20" class="content-box"><?php echo $content?></textarea>
                <input type="hiden" name="number" value="<?php echo $number?>">
            </td>
        </tr>
    </table>
    </form>
    </center>
</body>
</html>
v

 

-> 수정버튼을 클릭하여 게시물을 수정해보자!

수정된 게시물 목차

수정이 완료되었다는 알람과 함께 목차 페이지로 이동되었다.

수정된 게시물
수정된 데이터베이스

역시 글의 제목과 본문, 작성 날짜가 모두 잘 수정되어있었다.

 

#게시물 수정 확인

<?php
$conn = mysqli_connect('localhost', 'root', '2011732', 'cookies') or die ("connect fail");
$title = $_POST['title'];
$content = $_POST['content'];
$number = $_POST['number'];
//$date = date('Y-m-d H:i:s');

$URL = './board.php ?>';

$sql ="UPDATE board SET title='$title', content='$content', date=NOW() WHERE number=$number";
echo $sql;

$result = mysqli_query($conn, $sql);
if($result === false)
        echo mysqli_error($conn);
else{
?>                  
<script>
    alert("<?php echo "글이 수정되었습니다."?>");
    location.replace("<?php echo $URL?>");
</script>
<?php
}     
mysqli_close($conn);
?>

 

->게시물이 성공적으로 수정되었는지 확인하는 코드이다.

저작자표시 비영리 변경금지

'2021 SISS 21기 활동 > 겨울방학 WEB Project' 카테고리의 다른 글

[개발] 글 삭제, 사진 첨부 기능  (1) 2021.02.18
[개발] 기본 화면 만들기(HTML, CSS)  (0) 2021.02.04
[생활코딩] : MySQL  (0) 2021.01.15
[생활코딩] : PHP 강의  (0) 2021.01.15
'2021 SISS 21기 활동/겨울방학 WEB Project' Related Articles more