오늘은 PHP로 게시판을 만들고 게시글 작성하고 수정하고 삭제하는 기능을 추가하였습니다.
createBoard.php
<?php
include "../connect/connect.php";
$sql = "CREATE TABLE board(";
$sql .= "boardID int(10) unsigned NOT NULL auto_increment,";
$sql .= "memberID int(10) NOT NULL,";
$sql .= "boardTitle varchar(100) NOT NULL,";
$sql .= "boardContents longtext NOT NULL,";
$sql .= "boardView int(10) NOT NULL,";
$sql .= "regTime int(20) NOT NULL,";
$sql .= "PRIMARY KEY(boardID)";
$sql .= ") charset=utf8;";
$connect -> query($sql);
?>create 파일 안에 createBoard.php를 만들고 sql문으로 게시판 테이블을 작성해주었습니다.
createBoardData.php
<?php
include "../connect/connect.php";
for($i=1; $i<300; $i++){
$regTime = time();
$sql = "INSERT INTO board(memberID, boardTitle, boardContents, boardView, regTime) VALUES(1, '게시판 타이틀${i}입니다.', '게시판 내용물${i}입니다.게시판 내용물${i}입니다.게시판 내용물${i}입니다.게시판 내용물${i}입니다.게시판 내용물${i}입니다.','1','$regTime')";
$connect -> query($sql);
}
?>그 다음 create 파일 안에 게시판 글 데이터가 들어가는 php를 만들고 for문을 통해 글을 임시로 300개를 만들어주었습니다.
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>PHP 블로그 만들기</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">
<source srcset="../assets/img/board01.png, ../assets/img/board01@2x.png 2x, ../assets/img/board01@3x.png 3x" />
<img src="../assets/img/board01.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></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 100";
$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>include를 통해 전에 만든 connect 안에 있는 파일들을 연결해주었습니다.
head와 footer부분도 연결해 주었습니다.
각각 영역을 만들어 주고 중간에 게시글 영역은 php를 통해 만들어줍니다.
SQL 쿼리가 $sql 변수에 구성되고 저장됩니다. 이 쿼리는 특정 컬럼(boardID, boardTitle, youName, regTime, boardView)들을 선택하여, board 테이블과 members 테이블을 조인하고, boardID를 기준으로 내림차순으로 정렬한 후에 최대 100개의 결과만 가져옵니다.
$result 변수를 통해 $sql 쿼리를 실행합니다.
만약 $result 변수가 유효하다면, $result에서 검색된 데이터의 개수를 $count 변수에 저장합니다.
만약 $count가 0보다 크다면, $count만큼 반복문을 수행합니다.
$result에서 가져온 데이터를 $info 배열에 저장합니다.
echo 함수를 사용하여 HTML 테이블의 한 행(row)을 출력합니다. $info 배열의 각 요소를 사용하여 테이블의 각 셀(cell)에 데이터를 출력합니다.
4번에서의 반복문이 모두 완료되면, HTML 테이블이 완성되고 출력됩니다.
그리고 게시글을 쓰는 페이지를 만들고 글을 작성하면 HTTP POST 메소드를 통해 데이터를 저장하고, php를 통해 데이터를 나타내줍니다.
boardWrite.php
<?php
include "../connect/connect.php";
include "../connect/session.php";
// echo "<pre>";
// var_dump($_SESSION);
// echo "</pre>";
?>
<!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>PHP 게시글 작성하기</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">
<source srcset="../assets/img/board01.png, ../assets/img/board01@2x.png 2x, ../assets/img/board01@3x.png 3x" />
<img src="../assets/img/board01.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>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>폼에서 전송된 "boardTitle"과 "boardContents"라는 이름의 데이터를 가져옵니다.
게시물의 조회수를 1로 설정합니다.
$regTime = time();: time() 함수를 사용하여 현재 시간을 $regTime 변수에 저장합니다. 이는 게시물의 등록 시간을 나타냅니다.
$memberID = $_SESSION['memberID'];: 이전에 세션으로 저장된 현재 사용자의 회원 ID를 $memberID 변수에 저장합니다. 세션을 사용하여 로그인한 사용자의 정보를 유지하고 있음으로 보입니다.
$connect 객체의 real_escape_string() 메소드를 사용하여 게시물 제목과 내용을 SQL 인젝션 공격을 방지하기 위해 이스케이프 처리합니다.
: SQL 쿼리를 생성하여 삽입할 데이터를 포함합니다. $memberID, $boardTitle, $boardContents, $boardView, $regTime 등의 변수 값을 사용하여 새로운 게시물을 추가하는 INSERT 쿼리가 생성됩니다
생성된 SQL 쿼리를 실행하여 새로운 게시물을 데이터베이스에 삽입합니다
JavaScript를 사용하여 "board.php" 페이지로 이동하는 클라이언트 사이드 리다이렉션 코드입니다. 게시물이 성공적으로 등록되면 사용자를 게시판 페이지로 이동시킵니다
boardVeiw.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">
<source srcset="../assets/img/board01.png, ../assets/img/board01@2x.png 2x, ../assets/img/board01@3x.png 3x" />
<img src="../assets/img/board01.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.13</td>
</tr>
<tr>
<th>조회수</th>
<td>999</td>
</tr>
<tr>
<th>내용</th>
<td>
코딩 쉽게 배우는 방법!!!<br>
컴퓨터 과학 기초 지식 습득: 프로그래밍 언어를 배우기 전에 컴퓨터 과학 기초 지식을 습득하는 것이 중요합니다. 이에는 컴퓨터의 작동 원리, 알고리즘, 데이터 구조 등이 포함됩니다. 이러한 기초적인 지식을 습득하면 프로그래밍 언어를 배우는데 큰 도움이 됩니다.
프로그래밍 언어 선택: 코딩을 배우는 가장 일반적인 방법은 프로그래밍 언어를 배우는 것입니다. 많은 프로그래밍 언어 중에서는 Python, Java, C++, JavaScript 등이 널리 사용됩니다. 이 중에서 자신이 배우고 싶은 언어를 선택하고 해당 언어의 문법과 기초 지식을 습득하는 것이 좋습니다.
온라인 자료 활용: 온라인에는 다양한 코딩 학습 자료가 있습니다. 강의, 튜토리얼, 문제 풀이 사이트 등을 활용하여 코딩을 배울 수 있습니다. 각 언어별로 제공되는 공식 문서와 레퍼런스를 참고하여 배우는 것도 좋은 방법입니다.
코딩 연습: 코딩을 배운 후에는 많은 연습이 필요합니다. 간단한 예제부터 시작하여 점점 어려운 문제를 해결해 나가는 것이 좋습니다. 이를 통해 코딩 스킬을 향상시킬 수 있습니다.
프로젝트 수행: 프로그래밍 언어를 배운 후, 개인 프로젝트를 수행하는 것이 좋습니다. 이를 통해 배운 지식을 실제로 적용하고, 문제를 해결하는 경험을 쌓을 수 있습니다.
지속적인 학습: 코딩을 배우는 것은 끊임없는 학습과 발전이 필요합니다. 새로운 기술이나 프레임워크가 나타날 때마다 학습하고 적용해 나가는 것이 좋습니다.
</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']."</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">
<a href="boardModify.php?boardID=<?=$_GET['boardID']?>" class="btnStyle3">수정하기</a>
<a href="boardRemove.php?boardID=<?=$_GET['boardID']?>" class="btnStyle3" onclick="return confirm('정말 삭제하시겠습니까?','')">삭제하기</a>
<a href="board.php" class="btnStyle3">목록보기</a>
</div>
</div>
</main>
<!-- //main -->
<?php include "../include/footer.php" ?>
<!-- //footer -->
</body>
</html>
main에 주석처리한 테이블과 같이 php로 테이블을 만들어 줍니다.
버튼 부분은 먼저, "수정하기" 버튼을 클릭하면 "boardModify.php" 페이지로 이동하게 되며, URL에 현재 게시물의 "boardID" 값을 GET 방식으로 전달합니다.
"삭제하기" 버튼을 클릭하면 "boardRemove.php" 페이지로 이동하게 되며, URL에 현재 게시물의 "boardID" 값을 GET 방식으로 전달합니다. 또한, onclick 속성을 통해 JavaScript의 confirm() 함수를 호출하여 "정말 삭제하시겠습니까?"라는 확인 창을 띄우고, return 을 사용자가 확인을 선택한 경우에만 삭제가 진행되도록 구현합니다.
목록보기" 버튼은 클릭하면 "board.php" 페이지로 이동하게 됩니다.
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>$boardID = $_GET['boardID'];: URL에 GET 방식으로 전달된 "boardID" 값을 받아와 변수 $boardID에 저장하는 부분입니다.
$boardID = $connect -> real_escape_string($boardID);: $boardID 값을 MySQL의 SQL Injection 공격에 대비하여 Escape 처리합니다.
real_escape_string() 함수를 사용하여 사용자로부터 받은 값을 안전하게 처리합니다.
sql = "DELETE FROM board WHERE boardID = {$boardID}";: . "boardID" 값을 이용하여 board 테이블에서 해당 게시물을 삭제하는 쿼리문을 생성합니다.
connect -> query($sql);:$connect 객체의 query() 메서드를 사용하여 쿼리를 실행합니다.
<script> location.href ="board.php"; </script>: 이 부분은 삭제가 완료되면 location.href를 통해 페이지를 이동합니다
boardModify.php
<?php
$boardID =$_GET['boardID'];
$memberID = $_SESSION['memberID'];
$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>";
}
?>글 작성하는 php와 똑같이 작성해주고 php안에만 바꾸어 주었습니다.
$boardID =$_GET['boardID'];: 이 부분은 URL에 GET 방식으로 전달된 "boardID" 값을 받아와 변수 $boardID에 저장하는 부분입니다.
$memberID = $_SESSION['memberID'];: 이 부분은 현재 세션에 저장된 "memberID" 값을 받아와 $_SESSION['memberID']를 통해 현재 로그인된 사용자의 "memberID"를 가져옵니다
$sql = "SELECT boardID, boardTitle, boardContents FROM board WHERE boardID = {$boardID}";: 이 부분은 수정할 게시물의 정보를 가져오기 위한 SQL 쿼리문입니다. "boardID" 값을 이용하여 board 테이블에서 해당 게시물의 "boardID", "boardTitle", "boardContents" 컬럼 값을 가져옵니다.
if($result){}: $result 변수에 결과가 있는 경우에만 실행되는 조건문입니다.
$info = $result -> fetch_array(MYSQLI_ASSOC);: $result 변수에서 가져온 결과를 배열 형태로 변환하여 변수 $info에 저장합니다 .fetch_array() 메서드를 사용하여 결과를 배열로 변환하고, MYSQLI_ASSOC를 인자로 전달하여 연관배열로 변환합니다.
echo : . HTML의 입력 요소인 input과 textarea를 사용하여 폼을 생성하고, $info 배열에서 가져온 값들을 각 요소의 value 속성에 할당하여 초기값으로 설정합니다. 이를 통해 현재 게시물의 정보를 수정 폼에 미리 표시합니다.
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);
// $memberID = $_SESSION['memberID'];
$sql = "UPDATE board SET boardTitle = '{$boardTitle}',boardContents = '{$boardContents}'WHERE boardID = '{$boardID}'";
// echo $boardID, $boardTitle, $boardContents;
$connect -> query($sql);
?>
<script>
location.href = "board.php"
</script>게시물을 수정한 후, 수정된 내용을 DB에 업데이트하는 기능을 구현한 하였습니다.
아이디와, 콘텐츠, 타이틀을 post방식으로 값을 받아옵니다.
Injection 공격에 대비하여 Escape 처리합니다.
"boardTitle"과 "boardContents" 값을 업데이트할 게시물의 "boardID"를 이용하여 board 테이블에서 해당 게시물의 정보를 업데이트합니다
$connect 객체의 query() 메서드를 사용하여 쿼리를 실행합니다
게시물 정보가 성공적으로 업데이트된 후, board.php페이지로 location.href를 사용하여 페이지를 이동합니다.