728x90
PHP + MAMP사이트 만들기 기초 - 02 게시판 & 게시글보기 & 수정하기
오늘은 PHP게시판을 만들어봤어요
글목록 보기 & 클릭하여 글상세내용 보기 & 게시글 수정하기를 만들어 봤어요
오늘한걸 같이 알아보아요 !
1. 게시글 목록 보기
<?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 small">
<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 bmStyle mt70">
<div class="board__search">
<div class="left" >
<p>*총 <em>1111</em>건의 게시물이 등록 되어 있습니다.</p>
</div>
<div class="right">
<form action="#" name="#" mmethod="post">
<fieldset>
<legend class="blind">게시판 검색영역</legend>
<input type="search" placeholder="검색어를 입력해 주세요." required>
<select name="#" id="#">
<option value="title">제목</option>
<option value="content">내용</option>
<option value="name">등록자</option>
</select>
<button type="submit " class="btnStyle3 white">검색 </button>
<!-- <button type="submit" class="btnStyle3">글쓰기 </button> -->
<a class="btnStyle3" href="boardWrite.php"> 글쓰기</a>
</fieldset>
</form>
</div>
</div>
<div class="board__tables">
<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>
<?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 "<pre>";
// var_dump($info);
// echo "</pre>";
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>";
}
}
}else{
echo "<tr><td colspan='4'>게시글이 없습니다.</td></tr>";
}
?>
</tbody>
</table>
</div>
<div class="board__pages mb70">
<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="#">8</a></li>
<li><a href="#">다음</a></li>
<li><a href="#">마지막으로</a></li>
</ul>
</div>
</div>
</main>
<!-- main -->
<?php include "../include/footer.php" ?>
<!-- header -->
</body>
</html>
게시글을 보여주는 소스에요 !
기본 게시판 양식으로 만들었구
php문안에 안에서 for문을 사용하여 게시글을 10개 보여주고 게시글 클릭시
상세 내용을 보여주게 했어요 !
2. 게시글 입력
//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 small">
<!-- ../assets/img/intro01.png -->
<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" class="inputStyle" rows="20"></textarea>
</div>
<button type="submit" class="btnStyle3">저장하기</button>
</fieldset>
</form>
</div>
</div>
</main>
<!-- main -->
<?php include "../include/footer.php" ?>
<!-- header -->
</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'];
// sql보안
$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>boardWrite.php 에서 글을 입력하고 post 전송을하여
boardWriteSave에서 받은값들을 db에 저장해 줍니다 !
아래는 boardWrite.php입니다.
3. 게시글 상세보기 + 삭제하기
<?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/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 mt70">
<div class="board__view">
<table>
<colgroup>
<col style="width: 20%;">
<col style="width: 80%;">
</colgroup>
<tbody>
<?php
// http://localhost/board/boardView.php?[1-9]
// [1-9]
// 잘못된경로로 접근하셨어요
$query_string=getenv("QUERY_STRING"); // Get값으로 넘어온 값들을 구합니다.
$searchName = 'boardID=';
$searchChk = true;
//boardID=로 시작이 되는지???
$pos= strpos($query_string, $searchName);
//boardID= 가 있는지 확인 정규표현식
// if($pos === false ||!preg_match("/^[0-9]/i",substr($query_string, (int)strlen($searchName)))){
// echo substr($query_string, (int)strlen($searchName));
//Get으로 넘어온값이 숫자가 아닐경우 체크
if($pos === false ||!is_numeric(substr($query_string, (int)strlen($searchName)))) {
// 포함되어 있지 않다.
echo "<tr><td colspan='4'>잘못된접근입니다.</td></tr>";
die();
}
$boardID = $_GET['boardID'];
$sql = "update board set boardView = boardView+1 where boardID = {$boardID}";
$connect -> query($sql);
$sql = "select B.boardTitle , B.boardContents, M.youName, B.regTime, B.boardView From board B join members M on (m.memberID = b.memberID) where boardID = {$boardID}";
$result =$connect -> query($sql);
//1. 보더 아이디 값이 없을때 board로 보내지말기
//2. 확인 / 취소누르면 삭제 안되게
//3. 쓴사람이 수정 하기
//4. 쓴사람의 비밀번호가 같을경우 수정하기
if($result){
$info = $result -> fetch_array(MYSQLI_ASSOC);
// echo "<pre>";
// var_dump($info);
// echo "</pre>";
echo "<tr>";
echo "<th>제목</th>";
echo "<td>".$info['boardTitle']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>등록자</th>";
echo "<td>".$info['youName']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>등록일</th>";
echo "<td>".date('Y-m-d',$info['regTime'])."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>조회수</th>";
echo "<td>".$info['boardView']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>내용</th>";
echo "<td>".$info['boardContents']."</td>";
echo "</tr>";
}else{
echo "<tr><td colspan='4'>게시글이 없습니다.</td></tr>";
}
?>
</tbody>
</table>
</div>
</div>
<div class="board__btn mb100">
<a href="boardModify.php?boardID=<?=$boardID?>" class="btnStyle3">수정하기</a>
<a class="btnStyle3" onclick="chkDel(<?=$_GET['boardID']?>)">삭제하기</a>
<a href="board.php" class="btnStyle3">목록보기</a>
</div>
</main>
<!-- main -->
<?php include "../include/footer.php" ?>
<!-- header -->
<script>
function chkDel(num){
let chkConfirm = confirm("정말삭제하시겠습니까?");
if(chkConfirm){
location.href ='boardRemove.php?boardID='+num;
}
}
</script>
</body>
</html>2번에서 제목을 클릭하면 아래처럼 화면을 이동해요 !
위소스에서 get방식으로 파라미터 값을 가져온걸 유효성 검사 해줍니다.
$query_string=getenv("QUERY_STRING"); // Get값으로 넘어온 값들을 구합니다.
ex ) http://localhost/board/boardView.php?boardID=295
$searchName = 'boardID=';
$searchChk = true;
//boardID=를 포함한 파라미터를 받았는지 확인해요 있다면 true 없으면 false를 값에 넣어줘요
$pos= strpos($query_string, $searchName);
//boardID= 의 값이 숫자로만 되어있는지 확인하는 부분이에요 !
//Get으로 넘어온값이 숫자가 아닐경우 체크
if($pos === false ||!is_numeric(substr($query_string, (int)strlen($searchName)))) {
// 포함되어 있지 않다.
echo "<tr><td colspan='4'>잘못된접근입니다.</td></tr>";
die();
}
삭제하기를 누를경우 onclick 이벤트가 발생해요
<a class="btnStyle3" onclick="chkDel(<?=$_GET['boardID']?>)">삭제하기</a>
function chkDel(num){
let chkConfirm = confirm("정말삭제하시겠습니까?");
if(chkConfirm){
location.href ='boardRemove.php?boardID='+num;
}
}
아래 스크립트를 실행한뒤 yes면 삭제 no면 취 글을 삭제 시켜주도록 했어요 !
boardRemove는 delete 쿼리가 한줄있어요 !
4. 수정하는 부분을 볼게요 !
<?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 small">
<!-- ../assets/img/intro01.png -->
<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="boardModifySave.php" name="boardModifySave" method="post">
<!-- <form action="boardModifySave.php" name="boardModifySave" method="post"> -->
<fieldset>
<legend class="blind">게시글작성하기</legend>
<?php
$boardID = $_GET['boardID'];
$sql = "select memberID,boardID,boardTitle,boardContents from board where boardID = {$boardID}";
echo $sql;
$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 style='display:none'><label for='memberID'>번호</label><input type='text' id='memberID' name='memberID' class='inputStyle' value ='".$info['memberID']."'></div>";
echo "<div style='display:none'><label for='youPass'>번호</label><input type='text' id='youPass' name='youPass' class='inputStyle' value ='0'></div>";
echo "<div style='display:none'><label for='inputPass'>번호</label><input type='text' id='inputPass' name='inputPass' class='inputStyle' value ='1'></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' class='inputStyle' rows='20'>".$info['boardContents']."</textarea></div>";
?>
<div>
<!-- <button type="submit" class="btnStyle3">수정하기</button> -->
<button class="btnStyle3">수정하기</button>
</fieldset>
</form>
</div>
</div>
</main>
<!-- main -->
<?php include "../include/footer.php" ?>
<!-- header -->
</body>
</html>3화면에서 수정하기를 누를경우
위와 같이 나와요 !
기존 3번화면에서 보이는 부분은 똑같이 sql문처리 했구
입력한 내용이 출력되게 바꿨어요
수정하기를 누를경우
글쓴이와 로그인한 사람이 같으면 바로 수정이 되고
아닐경우 글쓴이의 비밀번호를 입력받아 글을 수정 하게 만들었어요
비밀번호를 틀릴경우 해당 화면이 계속 나오구요 !
아래는 소스를 볼게요 !
<?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 small">
<!-- ../assets/img/intro01.png -->
<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="boardModifySave.php" name="boardModifySave" method="post"> -->
<form action="boardModifySave.php" name="boardModifySave" method="post">
<fieldset>
<legend class="blind">게시글 수정하기</legend>
<?php
$youPass = '';
$memberID = $_POST['memberID'];
$boardID = $_POST['boardID'];
$boardTitle = $_POST['boardTitle'];
$boardContents = $_POST['boardContents'];
$youPass_1 = $_POST['youPass'];
$youPass_2 = $_POST['inputPass'];
if(isset($_SESSION['memberId']) == $memberID){
$boardContents = $connect -> real_escape_string($boardContents);
$boardTitle = $connect -> real_escape_string($boardTitle);
$memberID = $_SESSION['memberId'];
$sql = "update board set boardContents = '{$boardContents}', boardTitle = '{$boardTitle}' where boardID = '{$boardID}'";
$connect -> query($sql);
?>
<script>
location.href="board.php";
</script>
<?php
}else if($youPass_1 == $youPass_2){
$sql = "update board set boardContents = '{$boardContents}', boardTitle = '{$boardTitle}' where boardID = '{$boardID}'";
$connect -> query($sql);
?>
<script>
location.href="board.php";
</script>
<?php
}else{
$sql = "select youPass from members where memberID = {$memberID}";
$result = $connect -> query($sql);
if($result){
$info = $result->fetch_array(MYSQLI_ASSOC);
}
$youPass = $info['youPass'];
// echo $youPass;
echo "<div><label for='inputPass'>비밀번호를 입력해주세요</label><input type='text' id='inputPass' name='inputPass' class='inputStyle'></div>";
echo "<div style='display:none'><label for='memberID'></label><input type='text' id='memberID' name='memberID' class='inputStyle' value='".$memberID."'></div>";
echo "<div style='display:none'><label for='youPass'></label><input type='text' id='youPass' name='youPass' class='inputStyle' value='".$info['youPass']."'></div>";
echo "<div style='display:none'><label for='boardID'>번호</label><input type='text' id='boardID' name='boardID' class='inputStyle' value ='".$boardID."'></div>";
echo "<div style='display:none'><label for='boardTitle'>제목</label><input type='text' id='boardTitle' name='boardTitle' class='inputStyle' value ='".$boardTitle."'></div>";
echo "<div style='display:none'><label for='boardContents'>내용</label><textarea name='boardContents' id='boardContents' class='inputStyle' rows='20'>".$boardContents."</textarea></div>";
}
?>
<button class="btnStyle3" onclick="">확인</button>
</fieldset>
</form>
</div>
</div>
</main>
<!-- main -->
<?php include "../include/footer.php" ?>
<!-- header -->
</body>
</html>if문안의 분기 내용을 볼게요 !
1. 세션에 로그인된 memberId와 글쓴이의 memberId를 비교 하여 같을경우 수정
2. 글쓴이의 로그인 비밀번호와 입력받는 비밀번호의 값이 같다면 삭제
3. 1.2번이 아닐경우 비밀번호 입력화면 띄워주기!
요렇게 코드를 만들어봤어요 ..
오늘도 고생하셨습니당.