본문 바로가기

모의해킹 공부/WEB 개발

[6주차 과제-1] 게시판 수정 & 삭제

2023.04.30 - [모의해킹 공부/WEB 개발 과제] - [5주차 과제-2] 게시판 쓰기 & 읽기

 

[5주차 과제-2] 게시판 쓰기 & 읽기

2023.04.29 - [모의해킹 공부/WEB 개발 과제] - [5주차 과제-1] 게시판 DB구축 & 메인 페이지 구현 [5주차 과제-1] 게시판 DB구축 & 메인 페이지 구현 구현에 사용된 프로그램 Ubuntu-22.04.2 Apache2 : Apache/2.4.52 (

jisu069.tistory.com

게시판 CRUDCreate(write)와 Read(view)는 [5주차 과제-2]에 제작을 해서 이번에는 UpdateDelete를 구현했습니다


구현에 사용된 프로그램

  • Ubuntu-22.04.2
  • Apache2 : Apache/2.4.52 (Ubuntu)
  • PHP : PHP 8.1.2-1ubuntu2.11(cli)
  • MySQL : mysql Ver 8.0.32-0ubuntu0.22.04.2 for Linux on x86_64 ((Ubuntu))
  • Visual Code(Widnows11)

00. 구현 전 View.php(Read) 기능을 수정

00-1) Update와 Delete 기능을 사용하기 위해 게시판 작성자만 사용할 수 있도록 설정한다

<div id="view_btn">
	<p>
		<a href="boardIndex.php" class="form_btn" id="back_btn">목록</a>
	</p>
	<?php if($_SESSION['sId'] == $bdArr['userId']){ ?>
	<p>
		<a href="boardUpdate.php?idx=<?php echo $bdArr['boardIdx'] ?>" class="form_btn" id="up_btn">수정</a>
	</p>
	<p>
		<a href="boardDelete_ok.php?idx=<?php echo $bdArr['boardIdx'] ?>" class="form_btn" id="del_btn">삭제</a>
	</p>
	<?php } ?>
</div>
  • 현재 세션에 사용자 아이디와 DB에 저장된 아이디와 비교해서 같을 경우에만 버튼을 보이게 설정한다
  • 수정 삭제 모두 idx를 get 메소드 방식으로 전송하여 기능을 사용한다

※ 추가 수정 이전에 게시글은 로그인 한 사람의 이름으로 보이는 문제가 있어 수정했습니다

<?php
	$nameSql = "select * from userTB where userId = '$uid';";
	$nameRst = mysqli_query($con, $nameSql);
	$userArr = mysqli_fetch_array($nameRst);
?>

<div class="board_head">
	<label>작성자</label>
	<p><?php echo $userArr['userName']; ?></p>
	<label>작성일</label>
	<p><?php echo $bdArr['boardDate']; ?></p>
</div>

01. Update 기능 구현

01-1) boardUpdate.php : 수정할 게시판 idx값을 가져와서 수정할 게시판을 체크한다

<?php
	session_start();
	include('./connect.php');
	//if($con) echo "ok\n";
	$idx = $_GET['idx'];
	
	$sql = "select * from userBoardTB where boardIdx = '$idx';";
	$rst = mysqli_query($con, $sql);
	$bdArr = mysqli_fetch_array($rst); 
?>

01-2)  boardUpdate.php : 게시판 수정 화면 구현

<!DOCTYPE html>
<html lang="en">
<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>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/boardWrite.css">
</head>
<body>
    <header>
        <a href="index.php" id="logo">Wlkate</a>
        <nav>
            <ul>
                <li><a href="boardIndex.php">Board</a></li>
                <li><a href="index.php">Login</a></li>
            </ul>
        </nav>
    </header>
    <main class="wrap" id="write_wrap">
        <section>
            <h1>게시글 수정</h1>
            <form action="boardUpdate_ok.php" method="post">
                <div>
                    <label for="boardTitle">제목</label>
                    <p><input type="text" name="boardTitle" id="board_title" value="<?php echo $bdArr['boardTitle']; ?>"> 
                       <input type="hidden" name="boardIdx" value="<?php echo $bdArr['boardIdx']; ?>"> 
                    </p>
                </div>
                <div>
                    <label for="boardDetail">내용</label>
                    <p><textarea name="boardDetail" id="board_detail" ><?php echo $bdArr['boardDetail']; ?></textarea></p>
                </div>
                <div>
                    <label for="boardFile">파일</label>
                </div>
                <div id="write_btn">
                    <p>
                        <a href="boardIndex.php" class="form_btn" id="can_btn">취소</a>
                    </p>
                    <p>
                        <input type="submit" value="올리기" class="form_btn"  id="sub_btn">
                    </p>
                </div>
            </form>
        </section>
    </main>
</body>
</html>
  • 수정할 게시판의 데이터 값을 DB에서 가져온다
    • input 같은 경우 value 옵션으로 db값을 넣어서 사용자에게 보여준다
    • textarea 같은 경우 value 옵션이 따로 없어서 태그를 사이에 값을 넣어준다
  • form 태그를 통해 post 방식으로 boardUpdate_ok.php에 전송한다
    • 먼저 이 게시판의 idx 값을 전달한다
    • 수정된 게시판 제목, 내용을 전달한다

 

01-3) boardUpdate_ok.php : 게시판 업데이트 기능 구현

<?php
session_start();
include('./connect.php');

$boardIdx = $_POST['boardIdx'];
$boardTitle = $_POST['boardTitle'];
$boardDetail = $_POST['boardDetail'];

$sql = "update userBoardTB set boardTitle = '$boardTitle', boardDetail = '$boardDetail'where boardIdx = '$boardIdx';";
$rst = mysqli_query($con, $sql);

if($rst){
    echo"
        <script>
            alert(\"게시글이 수정됐습니다!!!\");
        </script>
    ";
    header("Location:./boardView.php?idx=$boardIdx");
}else{
    echo" 
	<script>
            alert(\"게시글 수정 실패!!!\");
            history.back();
        </script>
	";
   exit;
}
?>
  • boardUpdate.php에서 수정된 값들을 POST 메소드 방식으로 전송 받는다
  • 전송 받은 값들을 SQL UPDATE 질의문을 통해 DB안에 있는 값들을 수정한다
  • 값이 업데이트가 잘 되었을 경우 php에 header("Location:URL")을 통해 게시글로 이동한다 


02. Delete 기능 구현

02-1) boardDelete_ok.php : 삭제같은 경우 DB에서 삭제하고 따로 보이는 페이지가 없다 

<?php
session_start();
include('./connect.php');

$boardIdx = $_GET['idx'];

$delSql = "delete from userBoardTB where boardIdx = '$boardIdx';"; 
$delete = mysqli_query($con, $delSql);

if($delete){
    echo"
        <script>
            alert(\"Delete!!\");
        </script>
    ";
    header("Location:./boardIndex.php");
}else{
    echo" 
	<script>
            alert(\"Delete Fail!!!\");
            history.back();
        </script>
	";
   exit;
}
?>
  • 글의 idx를 비교해서 SQL Delete 질의문으로 DB안에 있는 데이터를 삭제한다